Merge c1fa1a6 into 77fc924

jest.config.ts

@@ -5,7 +5,7 @@ export default async (): Promise<Config> => {
   return {
     verbose: true,
     testEnvironment: 'jsdom',
-    setupFiles: ['<rootDir>/src/tests/beforeSetupTests.ts'],
+    setupFiles: ['<rootDir>/src/tests/beforeSetupTests.ts', 'jest-canvas-mock'],
     setupFilesAfterEnv: ['<rootDir>/src/tests/afterSetupTest.ts'],
     transform: {
       '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package.json

@@ -5,13 +5,13 @@
   "dependencies": {
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
-    "@dcl/builder-client": "^4.0.0",
+    "@dcl/builder-client": "^4.3.2",
     "@dcl/builder-templates": "^0.2.0",
     "@dcl/content-hash-tree": "^1.1.3",
     "@dcl/crypto": "^3.4.5",
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
-    "@dcl/schemas": "^10.2.0",
+    "@dcl/schemas": "^11.4.0",
     "@dcl/sdk": "^7.4.12",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
@@ -36,12 +36,13 @@
     "dcl-scene-writer": "^1.1.2",
     "decentraland": "3.3.0",
     "decentraland-builder-scripts": "^0.24.0",
+    "decentraland-connect": "^6.3.1",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^19.3.3",
+    "decentraland-dapps": "^19.4.1",
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.0.3",
-    "decentraland-ui": "^5.13.1",
+    "decentraland-ui": "^5.14.2",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",
@@ -111,6 +112,7 @@
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^2.7.1",
     "rollup-plugin-polyfill-node": "^0.13.0",

src/components/ItemEditorPage/RightPanel/RightPanel.container.ts

@@ -8,7 +8,7 @@ import { isOwner } from 'modules/item/utils'
 import { getSelectedItemId } from 'modules/location/selectors'
 import { getCollection, hasViewAndEditRights } from 'modules/collection/selectors'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
-import { getIsCampaignEnabled } from 'modules/features/selectors'
+import { getIsCampaignEnabled, getIsExoticRarityEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './RightPanel.types'
 import RightPanel from './RightPanel'
 
@@ -34,6 +34,7 @@ const mapState = (state: RootState): MapStateProps => {
     isConnected: isConnected(state),
     isDownloading: isDownloading(state),
     isCommitteeMember: isWalletCommitteeMember(state),
+    isExoticRarityEnabled: getIsExoticRarityEnabled(state),
     isCampaignEnabled: getIsCampaignEnabled(state)
   }
 }

src/components/ItemEditorPage/RightPanel/RightPanel.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react'
 import equal from 'fast-deep-equal'
 import { Loader, Dropdown, Button } from 'decentraland-ui'
-import { BodyPartCategory, EmoteCategory, EmoteDataADR74, HideableWearableCategory, Network, WearableCategory } from '@dcl/schemas'
+import { BodyPartCategory, EmoteCategory, Rarity, EmoteDataADR74, HideableWearableCategory, Network, WearableCategory } from '@dcl/schemas'
 import { NetworkButton } from 'decentraland-dapps/dist/containers'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { isThirdParty } from 'lib/urn'
 import {
   getMissingBodyShapeType,
-  getRarities,
   getWearableCategories,
   isOwner,
   resizeImage,
@@ -25,7 +24,6 @@ import {
   EmotePlayMode,
   isEmoteData,
   Item,
-  ItemRarity,
   ItemType,
   ITEM_DESCRIPTION_MAX_LENGTH,
   ITEM_NAME_MAX_LENGTH,
@@ -149,7 +147,7 @@ export default class RightPanel extends React.PureComponent<Props, State> {
     this.setState({ description, isDirty: this.isDirty({ description }) })
   }
 
-  handleChangeRarity = (rarity: ItemRarity) => {
+  handleChangeRarity = (rarity: Rarity) => {
     this.setState({ rarity, isDirty: this.isDirty({ rarity }) })
   }
 
@@ -357,7 +355,7 @@ export default class RightPanel extends React.PureComponent<Props, State> {
     return values.map(value => ({ value, text: t(`${type}.category.${value as string}`) }))
   }
 
-  asRaritySelect(values: ItemRarity[]) {
+  asRaritySelect(values: Rarity[]) {
     return values.map(value => ({ value, text: t(`wearable.rarity.${value}`) }))
   }
 
@@ -491,9 +489,9 @@ export default class RightPanel extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { selectedItemId, address, isConnected, error, isCampaignEnabled } = this.props
+    const { selectedItemId, address, isConnected, error, isCampaignEnabled, isExoticRarityEnabled } = this.props
     const { name, description, rarity, data, isDirty, hasItem } = this.state
-    const rarities = getRarities()
+    const rarities = Rarity.getRarities().filter(rarity => isExoticRarityEnabled || rarity !== Rarity.EXOTIC)
     const playModes = getEmotePlayModes()
 
     return (
@@ -571,7 +569,7 @@ export default class RightPanel extends React.PureComponent<Props, State> {
                           />
 
                           {!(item.urn && isThirdParty(item.urn)) && (
-                            <Select<ItemRarity>
+                            <Select<Rarity>
                               itemId={item.id}
                               label={t('global.rarity')}
                               value={rarity}

src/components/ItemEditorPage/RightPanel/RightPanel.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { EmoteDataADR74 } from '@dcl/schemas'
+import { EmoteDataADR74, Rarity } from '@dcl/schemas'
 import {
   deleteItemRequest,
   DeleteItemRequestAction,
@@ -10,7 +10,7 @@ import {
   downloadItemRequest,
   DownloadItemRequestAction
 } from 'modules/item/actions'
-import { Item, ItemRarity, SyncStatus, WearableData } from 'modules/item/types'
+import { Item, SyncStatus, WearableData } from 'modules/item/types'
 import { Collection } from 'modules/collection/types'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 
@@ -26,6 +26,7 @@ export type Props = {
   isDownloading: boolean
   isCommitteeMember: boolean
   isCampaignEnabled: boolean
+  isExoticRarityEnabled: boolean
   onSaveItem: typeof saveItemRequest
   onDeleteItem: typeof deleteItemRequest
   onOpenModal: typeof openModal
@@ -38,7 +39,7 @@ export type State = {
   description: string
   thumbnail: string
   video: string
-  rarity?: ItemRarity
+  rarity?: Rarity
   contents: Record<string, Blob>
   data?: WearableData | EmoteDataADR74
   hasItem: boolean
@@ -58,6 +59,7 @@ export type MapStateProps = Pick<
   | 'isCommitteeMember'
   | 'canEditSelectedItem'
   | 'isCampaignEnabled'
+  | 'isExoticRarityEnabled'
 >
 export type MapDispatchProps = Pick<Props, 'onSaveItem' | 'onDeleteItem' | 'onOpenModal' | 'onSetCollection' | 'onDownload'>
 export type MapDispatch = Dispatch<

src/components/Modals/CreateAndEditMultipleItemsModal/CreateAndEditMultipleItemsModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import PQueue from 'p-queue'
 import uuid from 'uuid'
-import { FileTooBigError, ItemFactory, loadFile, LocalItem, MAX_FILE_SIZE, Rarity, THUMBNAIL_PATH } from '@dcl/builder-client'
+import { ItemFactory, loadFile, LocalItem, Rarity, THUMBNAIL_PATH } from '@dcl/builder-client'
 import Dropzone, { DropzoneState } from 'react-dropzone'
 import { Button, Icon, Message, ModalNavigation, Progress, Table } from 'decentraland-ui'
 import { isErrorWithMessage } from 'decentraland-dapps/dist/lib/error'
@@ -97,10 +97,6 @@ export default class CreateAndEditMultipleItemsModal extends React.PureComponent
   processAcceptedFile = async (file: File) => {
     const { collection, metadata } = this.props
     try {
-      if (file.size > MAX_FILE_SIZE) {
-        throw new FileTooBigError(file.name, file.size)
-      }
-
       const fileArrayBuffer = await file.arrayBuffer()
       const loadedFile = await loadFile(file.name, new Blob([new Uint8Array(fileArrayBuffer)]))
 

src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.container.ts

@@ -6,6 +6,7 @@ import { getCollection } from 'modules/collection/selectors'
 import { Collection } from 'modules/collection/types'
 import { saveItemRequest, SAVE_ITEM_REQUEST } from 'modules/item/actions'
 import { getLoading, getError, getStatusByItemId } from 'modules/item/selectors'
+import { getIsExoticRarityEnabled } from 'modules/features/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateSingleItemModal.types'
 import CreateSingleItemModal from './CreateSingleItemModal'
 
@@ -19,7 +20,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     address: getAddress(state),
     error: getError(state),
     itemStatus,
-    isLoading: isLoadingType(getLoading(state), SAVE_ITEM_REQUEST)
+    isLoading: isLoadingType(getLoading(state), SAVE_ITEM_REQUEST),
+    isExoticRarityEnabled: getIsExoticRarityEnabled(state)
   }
 }
 

src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import uuid from 'uuid'
-import { BodyPartCategory, BodyShape, EmoteCategory, EmoteDataADR74, PreviewProjection, WearableCategory } from '@dcl/schemas'
+import { BodyPartCategory, BodyShape, EmoteCategory, EmoteDataADR74, Rarity, PreviewProjection, WearableCategory } from '@dcl/schemas'
 import {
   ModalNavigation,
   Row,
@@ -26,7 +26,6 @@ import {
   THUMBNAIL_PATH,
   Item,
   BodyShapeType,
-  ItemRarity,
   ITEM_NAME_MAX_LENGTH,
   WearableRepresentation,
   ItemType,
@@ -40,12 +39,10 @@ import { computeHashes } from 'modules/deployment/contentUtils'
 import {
   getBodyShapeType,
   getMissingBodyShapeType,
-  getRarities,
   getWearableCategories,
   getBackgroundStyle,
   isImageFile,
   resizeImage,
-  getMaxSupplyForRarity,
   getEmoteCategories,
   getEmotePlayModes,
   getBodyShapeTypeFromContents,
@@ -284,7 +281,7 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
       blockchainContentHash: null,
       currentContentHash: null,
       catalystContentHash: null,
-      rarity: belongsToAThirdPartyCollection ? ItemRarity.UNIQUE : rarity,
+      rarity: belongsToAThirdPartyCollection ? Rarity.UNIQUE : rarity,
       data,
       owner: address!,
       metrics,
@@ -515,7 +512,7 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
   }
 
   handleRarityChange = (_event: React.SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
-    const rarity = value as ItemRarity
+    const rarity = value as Rarity
     this.setState({ rarity })
   }
 
@@ -803,11 +800,11 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
   }
 
   renderFields() {
-    const { collection } = this.props
+    const { collection, isExoticRarityEnabled } = this.props
     const { name, category, rarity, contents, item, type } = this.state
 
     const belongsToAThirdPartyCollection = collection?.urn && isThirdParty(collection.urn)
-    const rarities = getRarities()
+    const rarities = Rarity.getRarities().filter(rarity => isExoticRarityEnabled || rarity !== Rarity.EXOTIC)
     const categories: string[] = type === ItemType.WEARABLE ? getWearableCategories(contents) : getEmoteCategories()
 
     const raritiesLink =
@@ -837,8 +834,8 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
               options={rarities.map(value => ({
                 value,
                 label: t('wearable.supply', {
-                  count: getMaxSupplyForRarity(value),
-                  formatted: getMaxSupplyForRarity(value).toLocaleString()
+                  count: Rarity.getMaxSupply(value),
+                  formatted: Rarity.getMaxSupply(value).toLocaleString()
                 }),
                 text: t(`wearable.rarity.${value}`)
               }))}

src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.types.ts

@@ -1,10 +1,10 @@
 import { Dispatch } from 'redux'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
-import { IPreviewController } from '@dcl/schemas'
+import { IPreviewController, Rarity } from '@dcl/schemas'
 import { Metrics } from 'modules/models/types'
 import { Collection } from 'modules/collection/types'
 import { saveItemRequest, SaveItemRequestAction } from 'modules/item/actions'
-import { BodyShapeType, Item, ItemRarity, ItemType, SyncStatus } from 'modules/item/types'
+import { BodyShapeType, Item, ItemType, SyncStatus } from 'modules/item/types'
 
 export enum CreateItemView {
   IMPORT = 'import',
@@ -23,6 +23,7 @@ export type Props = ModalProps & {
   isLoading: boolean
   collection: Collection | null
   itemStatus: SyncStatus | null
+  isExoticRarityEnabled: boolean
   onSave: typeof saveItemRequest
 }
 
@@ -33,7 +34,7 @@ export type StateData = {
   type: ItemType
   category: string
   playMode?: string
-  rarity: ItemRarity
+  rarity: Rarity
   bodyShape: BodyShapeType
   thumbnail: string
   model: string
@@ -99,6 +100,6 @@ export type AcceptedFileProps = Pick<
   | 'tags'
 >
 export type OwnProps = Pick<Props, 'metadata' | 'name' | 'onClose'>
-export type MapStateProps = Pick<Props, 'address' | 'error' | 'isLoading' | 'collection' | 'itemStatus'>
+export type MapStateProps = Pick<Props, 'address' | 'error' | 'isLoading' | 'collection' | 'itemStatus' | 'isExoticRarityEnabled'>
 export type MapDispatchProps = Pick<Props, 'onSave'>
 export type MapDispatch = Dispatch<SaveItemRequestAction>

src/components/Modals/ENSMapAddressModal/ENSMapAddressModal.spec.tsx

@@ -1,11 +1,11 @@
 import userEvent from '@testing-library/user-event'
 import { RenderResult } from '@testing-library/react'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { ENS_RESOLVER_ADDRESS } from 'modules/common/contracts'
 import { ENS } from 'modules/ens/types'
 import { renderWithProviders } from 'specs/utils'
 import { Props } from './ENSMapAddressModal.types'
 import EnsMapAddressModal from './ENSMapAddressModal'
-import { ENS_RESOLVER_ADDRESS } from 'modules/common/contracts'
 
 function renderENSMapAddressModal(props: Partial<Props> = {}) {
   return renderWithProviders(
@@ -60,10 +60,10 @@ describe('when the resolver is defined for the ens', () => {
       const onSave = jest.fn()
       const screen = renderENSMapAddressModal({ onSave, ens })
       const addressInput = screen.getByLabelText(t('ens_map_address_modal.address.label'))
-      userEvent.type(addressInput, '0xtestaddress')
+      userEvent.type(addressInput, '0xeDaE96F7739aF8A7fB16E2a888C1E578E1328299')
       const saveButton = screen.getByRole('button', { name: t('ens_map_address_modal.save') })
       userEvent.click(saveButton)
-      expect(onSave).toHaveBeenCalledWith('0xtestaddress')
+      expect(onSave).toHaveBeenCalledWith('0xeDaE96F7739aF8A7fB16E2a888C1E578E1328299')
     })
   })
 

src/components/Modals/PublishWizardCollectionModal/PayPublicationFeeStep/PayPublicationFeeStep.tsx

@@ -5,7 +5,7 @@ import { config } from 'config'
 import { Button, Column, Icon, InfoTooltip, Mana, Modal, Row } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { toFixedMANAValue } from 'decentraland-dapps/dist/lib/mana'
-import { Currency, Rarity } from 'modules/item/types'
+import { Currency, BlockchainRarity } from 'modules/item/types'
 import { PaymentMethod } from 'modules/collection/types'
 import { MapStateProps } from '../PublishWizardCollectionModal.types'
 import './PayPublicationFeeStep.css'
@@ -28,7 +28,7 @@ export const PayPublicationFeeStep: React.FC<
 
   // The UI is designed in a way that considers that all rarities have the same price, so only using the first one
   // as reference for the prices is enough.
-  const refRarity: Rarity | undefined = rarities[0]
+  const refRarity: BlockchainRarity | undefined = rarities[0]
 
   let priceUSD = '0'
   let totalPrice = '0'

src/components/Modals/PublishWizardCollectionModal/PublishWizardCollectionModal.types.ts

@@ -4,7 +4,7 @@ import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/Moda
 import { WithAuthorizedActionProps } from 'decentraland-dapps/dist/containers/withAuthorizedAction'
 import { publishCollectionRequest, PublishCollectionRequestAction } from 'modules/collection/actions'
 import { Collection } from 'modules/collection/types'
-import { Item, Rarity } from 'modules/item/types'
+import { Item, BlockchainRarity } from 'modules/item/types'
 import { fetchRaritiesRequest, FetchRaritiesRequestAction } from 'modules/item/actions'
 
 export enum PublishWizardCollectionSteps {
@@ -20,7 +20,7 @@ export type Props = ModalProps & {
   wallet: Wallet
   collection: Collection
   items: Item[]
-  rarities: Rarity[]
+  rarities: BlockchainRarity[]
   unsyncedCollectionError: string | null
   collectionError: string | null
   itemError: string | null

src/components/RarityBadge/RarityBadge.types.ts

@@ -1,8 +1,7 @@
-import { EmoteCategory, WearableCategory } from '@dcl/schemas'
-import { ItemRarity } from 'modules/item/types'
+import { EmoteCategory, WearableCategory, Rarity } from '@dcl/schemas'
 
 export type Props = {
-  rarity: ItemRarity
+  rarity: Rarity
   category: WearableCategory | EmoteCategory
   size: 'medium' | 'small'
   withTooltip: boolean