Skip to content

Commit 7d1d2c4

Browse files
LautaroPetaccioLautaroPetaccio
authored
revert: New Linked Wearables URN and mappings (#3142)
* Revert "fix: Editing new item URN (#3139)" This reverts commit bcd6063. * revert: New third parties URN
1 parent a95931d commit 7d1d2c4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+482
-906
lines changed

‎package-lock.json

+42-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
"dependencies": {
66
"@babylonjs/core": "^4.2.0",
77
"@babylonjs/loaders": "^4.2.0",
8-
"@dcl/builder-client": "^4.4.0",
8+
"@dcl/builder-client": "^5.0.0",
99
"@dcl/builder-templates": "^0.2.0",
1010
"@dcl/content-hash-tree": "^1.1.3",
1111
"@dcl/crypto": "^3.4.5",
1212
"@dcl/hashing": "^3.0.4",
1313
"@dcl/mini-rpc": "^1.0.7",
14-
"@dcl/schemas": "^11.12.0",
14+
"@dcl/schemas": "^13.2.2",
1515
"@dcl/sdk": "7.5.5",
1616
"@dcl/single-sign-on-client": "^0.1.0",
1717
"@dcl/ui-env": "^1.5.0",

‎src/components/CollectionsPage/CollectionsPage.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function CollectionsPage(props: Props) {
7676
}, [address, sort])
7777

7878
const handleNewThirdPartyCollection = useCallback(() => {
79-
onOpenModal('CreateLinkedWearablesCollectionModal')
79+
onOpenModal('CreateThirdPartyCollectionModal')
8080
}, [onOpenModal, isLinkedWearablesV2Enabled])
8181

8282
const handleNewCollection = useCallback(() => {
@@ -213,7 +213,7 @@ export default function CollectionsPage(props: Props) {
213213
<Field
214214
placeholder={t('itemdrawer.search_items')}
215215
className="collections-search-field"
216-
input={{ icon: 'search', iconPosition: 'left', inverted: true }}
216+
input={{ icon: 'search', iconPosition: 'left' }}
217217
onChange={handleSearchChange}
218218
icon={<UIIcon name="search" className="searchIcon" />}
219219
iconPosition="left"
@@ -236,7 +236,7 @@ export default function CollectionsPage(props: Props) {
236236
</Row>
237237
</div>
238238
)
239-
}, [search, isThirdPartyManager, handleSearchChange, handleOpenEditor, handleNewCollection])
239+
}, [search, isThirdPartyManager, isLinkedWearablesV2Enabled, handleSearchChange, handleOpenEditor, handleNewCollection])
240240

241241
const renderViewActions = useCallback(() => {
242242
return (

‎src/components/MappingEditor/MappingEditor.module.css

+13-1
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,22 @@
88
flex-direction: column;
99
}
1010

11-
.main :global(.ui.dropdown > .text > img) {
11+
.mappingType :global(.ui.dropdown > .text > img) {
1212
margin-top: 3px;
1313
}
1414

1515
.mappingType :global(.ui.dropdown .menu > .item > img) {
1616
margin-top: 0px;
1717
}
18+
19+
.linkedContractSelect :global(.divider.text),
20+
.linkedContractSelect :global(.visible.menu.transition) > div {
21+
display: flex !important;
22+
align-items: center !important;
23+
}
24+
25+
.linkedContractSelect :global(.divider.text) img,
26+
.linkedContractSelect :global(.visible.menu.transition) img {
27+
height: 25px;
28+
width: 25px;
29+
}

‎src/components/MappingEditor/MappingEditor.tsx

+87-37
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import { SyntheticEvent, useCallback, useMemo } from 'react'
22
import { DropdownProps, Field, InputOnChangeData, SelectField, TextAreaField, TextAreaProps } from 'decentraland-ui'
33
import { MappingType, MultipleMapping } from '@dcl/schemas'
44
import { t } from 'decentraland-dapps/dist/modules/translation'
5+
import { LinkedContractProtocol } from 'modules/thirdParty/types'
6+
import { shorten } from 'lib/address'
57
import allIcon from '../../icons/all.svg'
68
import multipleIcon from '../../icons/multiple.svg'
79
import singleIcon from '../../icons/single.svg'
810
import rangeIcon from '../../icons/range.svg'
11+
import ethereumSvg from '../../icons/ethereum.svg'
12+
import polygonSvg from '../../icons/polygon.svg'
913
import { Props } from './MappingEditor.types'
1014
import styles from './MappingEditor.module.css'
1115

@@ -15,9 +19,26 @@ const mappingTypeIcons = {
1519
[MappingType.SINGLE]: singleIcon,
1620
[MappingType.RANGE]: rangeIcon
1721
}
22+
const imgSrcByNetwork = {
23+
[LinkedContractProtocol.MAINNET]: ethereumSvg,
24+
[LinkedContractProtocol.MATIC]: polygonSvg,
25+
[LinkedContractProtocol.SEPOLIA]: ethereumSvg,
26+
[LinkedContractProtocol.AMOY]: polygonSvg
27+
}
1828

1929
export const MappingEditor = (props: Props) => {
20-
const { mapping, error, disabled, onChange } = props
30+
const { mapping, error, disabled, contract, contracts, onChange } = props
31+
const linkedContractsOptions = useMemo(
32+
() =>
33+
contracts.map((contract, index) => ({
34+
value: index,
35+
key: index,
36+
image: imgSrcByNetwork[contract.network],
37+
text: shorten(contract.address, 14, 14)
38+
})),
39+
[contracts, imgSrcByNetwork]
40+
)
41+
2142
const [mappingType, mappingValue] = useMemo(() => {
2243
switch (mapping.type) {
2344
case MappingType.MULTIPLE:
@@ -42,58 +63,87 @@ export const MappingEditor = (props: Props) => {
4263
[]
4364
)
4465

45-
const handleMappingTypeChange = useCallback((_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
46-
const mappingType = value as MappingType
47-
switch (mappingType) {
48-
case MappingType.ANY:
49-
props.onChange({ type: mappingType })
50-
break
51-
case MappingType.MULTIPLE:
52-
props.onChange({ type: mappingType, ids: [] })
53-
break
54-
case MappingType.SINGLE:
55-
props.onChange({ type: mappingType, id: '' })
56-
break
57-
case MappingType.RANGE:
58-
props.onChange({ type: mappingType, to: '', from: '' })
59-
break
60-
}
61-
}, [])
66+
const handleMappingTypeChange = useCallback(
67+
(_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
68+
const mappingType = value as MappingType
69+
switch (mappingType) {
70+
case MappingType.ANY:
71+
onChange({ type: mappingType }, contract)
72+
break
73+
case MappingType.MULTIPLE:
74+
onChange({ type: mappingType, ids: [] }, contract)
75+
break
76+
case MappingType.SINGLE:
77+
onChange({ type: mappingType, id: '' }, contract)
78+
break
79+
case MappingType.RANGE:
80+
onChange({ type: mappingType, to: '', from: '' }, contract)
81+
break
82+
}
83+
},
84+
[contract, onChange]
85+
)
6286

63-
const handleSingleMappingValueChange = useCallback((_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
64-
onChange({ type: MappingType.SINGLE, id: data.value })
65-
}, [])
87+
const handleSingleMappingValueChange = useCallback(
88+
(_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
89+
onChange({ type: MappingType.SINGLE, id: data.value }, contract)
90+
},
91+
[contract]
92+
)
6693

67-
const handleMultipleMappingValueChange = useCallback((_: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => {
68-
const ids =
69-
data.value
70-
?.toString()
71-
.replaceAll(/[^0-9,\s]/g, '')
72-
.split(',')
73-
.map(value => value.trim()) ?? []
94+
const handleMultipleMappingValueChange = useCallback(
95+
(_: React.ChangeEvent<HTMLTextAreaElement>, data: TextAreaProps) => {
96+
const ids =
97+
data.value
98+
?.toString()
99+
.replaceAll(/[^0-9,\s]/g, '')
100+
.split(',')
101+
.map(value => value.trim()) ?? []
74102

75-
onChange({
76-
type: MappingType.MULTIPLE,
77-
ids
78-
})
79-
}, [])
103+
onChange(
104+
{
105+
type: MappingType.MULTIPLE,
106+
ids
107+
},
108+
contract
109+
)
110+
},
111+
[contract]
112+
)
80113

81114
const handleFromMappingValueChange = useCallback(
82115
(_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
83-
onChange({ type: MappingType.RANGE, from: data.value, to: mappingValue.split(',')[1] })
116+
onChange({ type: MappingType.RANGE, from: data.value, to: mappingValue.split(',')[1] }, contract)
84117
},
85-
[mappingValue]
118+
[mappingValue, contract]
86119
)
87120

88121
const handleToMappingValueChange = useCallback(
89122
(_: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
90-
onChange({ type: MappingType.RANGE, from: mappingValue.split(',')[0], to: data.value })
123+
onChange({ type: MappingType.RANGE, from: mappingValue.split(',')[0], to: data.value }, contract)
91124
},
92-
[mappingValue]
125+
[mappingValue, contract]
126+
)
127+
128+
const handleLinkedContractChange = useCallback(
129+
(_: SyntheticEvent<HTMLElement, Event>, { value }: DropdownProps) => {
130+
onChange(mapping, contracts[value as number])
131+
},
132+
[mapping, contracts]
93133
)
94134

95135
return (
96136
<div className={styles.main}>
137+
<SelectField
138+
label={t('create_linked_wearable_collection_modal.linked_contract_field.label')}
139+
className={styles.linkedContractSelect}
140+
disabled={linkedContractsOptions.length === 0}
141+
value={contract ? contracts.indexOf(contract) : undefined}
142+
options={linkedContractsOptions}
143+
search={false}
144+
onChange={handleLinkedContractChange}
145+
message={linkedContractsOptions.length === 0 ? t('create_linked_wearable_collection_modal.linked_contract_field.message') : ''}
146+
/>
97147
<SelectField
98148
label={t('mapping_editor.mapping_type_label')}
99149
onChange={handleMappingTypeChange}

‎src/components/MappingEditor/MappingEditor.types.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { Mapping } from '@dcl/schemas'
2+
import { LinkedContract } from 'modules/thirdParty/types'
23

34
export type Props = {
45
mapping: Mapping
6+
contracts: LinkedContract[]
7+
contract: LinkedContract
58
error?: string
69
disabled?: boolean
7-
onChange: (mapping: Mapping) => void
10+
onChange: (mapping: Mapping, contract: LinkedContract) => void
811
}

0 commit comments

Comments
 (0)