revert: New Linked Wearables URN and mappings (#3142)

* Revert "fix: Editing new item URN (#3139)" This reverts commit bcd6063. * revert: New third parties URN
decentraland · Jul 25, 2024 · 7d1d2c4 · 7d1d2c4
1 parent a95931d
commit 7d1d2c4
Show file tree

Hide file tree

Showing 47 changed files with 482 additions and 906 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,13 +5,13 @@
   "dependencies": {
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/loaders": "^4.2.0",
-    "@dcl/builder-client": "^4.4.0",
+    "@dcl/builder-client": "^5.0.0",
     "@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": "^11.12.0",
+    "@dcl/schemas": "^13.2.2",
     "@dcl/sdk": "7.5.5",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",

diff --git a/src/components/CollectionsPage/CollectionsPage.tsx b/src/components/CollectionsPage/CollectionsPage.tsx
@@ -76,7 +76,7 @@ export default function CollectionsPage(props: Props) {
   }, [address, sort])
 
   const handleNewThirdPartyCollection = useCallback(() => {
-    onOpenModal('CreateLinkedWearablesCollectionModal')
+    onOpenModal('CreateThirdPartyCollectionModal')
   }, [onOpenModal, isLinkedWearablesV2Enabled])
 
   const handleNewCollection = useCallback(() => {
@@ -213,7 +213,7 @@ export default function CollectionsPage(props: Props) {
         <Field
           placeholder={t('itemdrawer.search_items')}
           className="collections-search-field"
-          input={{ icon: 'search', iconPosition: 'left', inverted: true }}
+          input={{ icon: 'search', iconPosition: 'left' }}
           onChange={handleSearchChange}
           icon={<UIIcon name="search" className="searchIcon" />}
           iconPosition="left"
@@ -236,7 +236,7 @@ export default function CollectionsPage(props: Props) {
         </Row>
       </div>
     )
-  }, [search, isThirdPartyManager, handleSearchChange, handleOpenEditor, handleNewCollection])
+  }, [search, isThirdPartyManager, isLinkedWearablesV2Enabled, handleSearchChange, handleOpenEditor, handleNewCollection])
 
   const renderViewActions = useCallback(() => {
     return (

diff --git a/src/components/MappingEditor/MappingEditor.module.css b/src/components/MappingEditor/MappingEditor.module.css
@@ -8,10 +8,22 @@
   flex-direction: column;
 }
 
-.main :global(.ui.dropdown > .text > img) {
+.mappingType :global(.ui.dropdown > .text > img) {
   margin-top: 3px;
 }
 
 .mappingType :global(.ui.dropdown .menu > .item > img) {
   margin-top: 0px;
 }
+
+.linkedContractSelect :global(.divider.text),
+.linkedContractSelect :global(.visible.menu.transition) > div {
+  display: flex !important;
+  align-items: center !important;
+}
+
+.linkedContractSelect :global(.divider.text) img,
+.linkedContractSelect :global(.visible.menu.transition) img {
+  height: 25px;
+  width: 25px;
+}
diff --git a/src/components/MappingEditor/MappingEditor.tsx b/src/components/MappingEditor/MappingEditor.tsx
@@ -2,10 +2,14 @@ import { SyntheticEvent, useCallback, useMemo } from 'react'
 import { DropdownProps, Field, InputOnChangeData, SelectField, TextAreaField, TextAreaProps } from 'decentraland-ui'
 import { MappingType, MultipleMapping } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation'
+import { LinkedContractProtocol } from 'modules/thirdParty/types'
+import { shorten } from 'lib/address'
 import allIcon from '../../icons/all.svg'
 import multipleIcon from '../../icons/multiple.svg'
 import singleIcon from '../../icons/single.svg'
 import rangeIcon from '../../icons/range.svg'
+import ethereumSvg from '../../icons/ethereum.svg'
+import polygonSvg from '../../icons/polygon.svg'
 import { Props } from './MappingEditor.types'
 import styles from './MappingEditor.module.css'
 
@@ -15,9 +19,26 @@ const mappingTypeIcons = {
   [MappingType.SINGLE]: singleIcon,
   [MappingType.RANGE]: rangeIcon
 }
+const imgSrcByNetwork = {
+  [LinkedContractProtocol.MAINNET]: ethereumSvg,
+  [LinkedContractProtocol.MATIC]: polygonSvg,
+  [LinkedContractProtocol.SEPOLIA]: ethereumSvg,
+  [LinkedContractProtocol.AMOY]: polygonSvg
+}
 
 export const MappingEditor = (props: Props) => {
-  const { mapping, error, disabled, onChange } = props
+  const { mapping, error, disabled, contract, contracts, onChange } = props
+  const linkedContractsOptions = useMemo(
+    () =>
+      contracts.map((contract, index) => ({
+        value: index,
+        key: index,
+        image: imgSrcByNetwork[contract.network],
+        text: shorten(contract.address, 14, 14)
+      })),
+    [contracts, imgSrcByNetwork]
+  )
+
   const [mappingType, mappingValue] = useMemo(() => {
     switch (mapping.type) {
       case MappingType.MULTIPLE:
@@ -42,58 +63,87 @@ export const MappingEditor = (props: Props) => {
     []
   )
 
-  const handleMappingTypeChange = useCallback((_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
-    const mappingType = value as MappingType
-    switch (mappingType) {
-      case MappingType.ANY:
-        props.onChange({ type: mappingType })
-        break
-      case MappingType.MULTIPLE:
-        props.onChange({ type: mappingType, ids: [] })
-        break
-      case MappingType.SINGLE:
-        props.onChange({ type: mappingType, id: '' })
-        break
-      case MappingType.RANGE:
-        props.onChange({ type: mappingType, to: '', from: '' })
-        break
-    }
-  }, [])
+  const handleMappingTypeChange = useCallback(
+    (_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
+      const mappingType = value as MappingType
+      switch (mappingType) {
+        case MappingType.ANY:
+          onChange({ type: mappingType }, contract)
+          break
+        case MappingType.MULTIPLE:
+          onChange({ type: mappingType, ids: [] }, contract)
+          break
+        case MappingType.SINGLE:
+          onChange({ type: mappingType, id: '' }, contract)
+          break
+        case MappingType.RANGE:
+          onChange({ type: mappingType, to: '', from: '' }, contract)
+          break
+      }
+    },
+    [contract, onChange]
+  )
 
-  const handleSingleMappingValueChange = useCallback((_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-    onChange({ type: MappingType.SINGLE, id: data.value })
-  }, [])
+  const handleSingleMappingValueChange = useCallback(
+    (_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+      onChange({ type: MappingType.SINGLE, id: data.value }, contract)
+    },
+    [contract]
+  )
 
-  const handleMultipleMappingValueChange = useCallback((_: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => {
-    const ids =
-      data.value
-        ?.toString()
-        .replaceAll(/[^0-9,\s]/g, '')
-        .split(',')
-        .map(value => value.trim()) ?? []
+  const handleMultipleMappingValueChange = useCallback(
+    (_: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => {
+      const ids =
+        data.value
+          ?.toString()
+          .replaceAll(/[^0-9,\s]/g, '')
+          .split(',')
+          .map(value => value.trim()) ?? []
 
-    onChange({
-      type: MappingType.MULTIPLE,
-      ids
-    })
-  }, [])
+      onChange(
+        {
+          type: MappingType.MULTIPLE,
+          ids
+        },
+        contract
+      )
+    },
+    [contract]
+  )
 
   const handleFromMappingValueChange = useCallback(
     (_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-      onChange({ type: MappingType.RANGE, from: data.value, to: mappingValue.split(',')[1] })
+      onChange({ type: MappingType.RANGE, from: data.value, to: mappingValue.split(',')[1] }, contract)
     },
-    [mappingValue]
+    [mappingValue, contract]
   )
 
   const handleToMappingValueChange = useCallback(
     (_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-      onChange({ type: MappingType.RANGE, from: mappingValue.split(',')[0], to: data.value })
+      onChange({ type: MappingType.RANGE, from: mappingValue.split(',')[0], to: data.value }, contract)
     },
-    [mappingValue]
+    [mappingValue, contract]
+  )
+
+  const handleLinkedContractChange = useCallback(
+    (_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
+      onChange(mapping, contracts[value as number])
+    },
+    [mapping, contracts]
   )
 
   return (
     <div className={styles.main}>
+      <SelectField
+        label={t('create_linked_wearable_collection_modal.linked_contract_field.label')}
+        className={styles.linkedContractSelect}
+        disabled={linkedContractsOptions.length === 0}
+        value={contract ? contracts.indexOf(contract) : undefined}
+        options={linkedContractsOptions}
+        search={false}
+        onChange={handleLinkedContractChange}
+        message={linkedContractsOptions.length === 0 ? t('create_linked_wearable_collection_modal.linked_contract_field.message') : ''}
+      />
       <SelectField
         label={t('mapping_editor.mapping_type_label')}
         onChange={handleMappingTypeChange}

diff --git a/src/components/MappingEditor/MappingEditor.types.ts b/src/components/MappingEditor/MappingEditor.types.ts
@@ -1,8 +1,11 @@
 import { Mapping } from '@dcl/schemas'
+import { LinkedContract } from 'modules/thirdParty/types'
 
 export type Props = {
   mapping: Mapping
+  contracts: LinkedContract[]
+  contract: LinkedContract
   error?: string
   disabled?: boolean
-  onChange: (mapping: Mapping) => void
+  onChange: (mapping: Mapping, contract: LinkedContract) => void
 }