feat: add put for sale logic (#3199)

package.json

@@ -38,10 +38,10 @@
     "decentraland-builder-scripts": "^0.24.0",
     "decentraland-connect": "^6.3.1",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^23.5.0",
+    "decentraland-dapps": "^23.6.1",
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
-    "decentraland-transactions": "^2.13.0",
+    "decentraland-transactions": "^2.15.0",
     "decentraland-ui": "^6.9.2",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",

src/components/CollectionDetailPage/CollectionDetailPage.tsx

@@ -86,7 +86,7 @@ export default function CollectionDetailPage({
     if (collection) {
       onOpenModal('SellCollectionModal', {
         collectionId: collection.id,
-        isOnSale: isOffchainPublicItemOrdersEnabled ? isEnableForSaleOffchain(collection, wallet) : isCollectionOnSale(collection, wallet)
+        isOnSale: isEnableForSaleOffchain(collection, wallet) || isCollectionOnSale(collection, wallet)
       })
     }
   }, [collection, wallet, onOpenModal])
@@ -277,7 +277,6 @@ export default function CollectionDetailPage({
       const hasOnlyWearables = hasWearables && !hasEmotes
       const filteredItems = items.filter(item => (hasOnlyWearables ? isWearable(item) : hasOnlyEmotes ? isEmote(item) : item.type === tab))
       const showShowTabs = hasEmotes && hasWearables
-
       return (
         <>
           <Section className={classNames({ 'is-published': collection.isPublished })}>

src/components/CollectionDetailPage/CollectionItem/CollectionItem.tsx

@@ -9,7 +9,7 @@ import { Link, useHistory } from 'react-router-dom'
 import { locations } from 'routing/locations'
 import { preventDefault } from 'lib/event'
 import { extractThirdPartyTokenId, extractTokenId, isThirdParty } from 'lib/urn'
-import { isComplete, isFree, canManageItem, getMaxSupply, isSmart, isEmote } from 'modules/item/utils'
+import { isComplete, canManageItem, getMaxSupply, isSmart, isEmote, isFree } from 'modules/item/utils'
 import { isEnableForSaleOffchain, isLocked, isOnSale } from 'modules/collection/utils'
 import { isEmoteData, SyncStatus, VIDEO_PATH, WearableData } from 'modules/item/types'
 import { FromParam } from 'modules/location/types'
@@ -36,6 +36,7 @@ export default function CollectionItem({
   const history = useHistory()
   const isOnSaleLegacy = wallet && isOnSale(collection, wallet)
   const isEnableForSaleOffchainMarketplace = wallet && isOffchainPublicItemOrdersEnabled && isEnableForSaleOffchain(collection, wallet)
+  const shouldAllowPriceEdition = !isOffchainPublicItemOrdersEnabled || isEnableForSaleOffchainMarketplace || isOnSaleLegacy
 
   const handleEditPriceAndBeneficiary = useCallback(() => {
     onOpenModal('EditPriceAndBeneficiaryModal', { itemId: item.id })
@@ -64,21 +65,31 @@ export default function CollectionItem({
     onOpenModal('MoveItemToAnotherCollectionModal', { item, fromCollection: collection })
   }, [item, onOpenModal, collection])
 
+  const handlePutForSale = useCallback(() => {
+    onOpenModal('PutForSaleOffchainModal', { itemId: item.id })
+  }, [])
+
   const renderPrice = useCallback(() => {
-    return item.price ? (
-      <div>
-        {isFree(item) ? (
-          t('global.free')
-        ) : (
-          <Mana className={styles.mana} network={Network.MATIC} showTooltip>
-            {ethers.utils.formatEther(item.price)}
-          </Mana>
-        )}
-      </div>
-    ) : (
-      <div className={`link ${styles.linkAction}`} onClick={preventDefault(handleEditPriceAndBeneficiary)}>
-        {t('collection_item.set_price')}
-      </div>
+    if (!item.price) {
+      return (
+        <div className={`link ${styles.linkAction}`} onClick={preventDefault(handleEditPriceAndBeneficiary)}>
+          {t('collection_item.set_price')}
+        </div>
+      )
+    }
+
+    if (isFree(item)) {
+      return <span>{t('global.free')}</span>
+    }
+
+    if (item.price === ethers.constants.MaxUint256.toString()) {
+      return <span>-</span>
+    }
+
+    return (
+      <Mana className={styles.mana} network={Network.MATIC} showTooltip>
+        {ethers.utils.formatEther(item.price)}
+      </Mana>
     )
   }, [item, handleEditPriceAndBeneficiary])
 
@@ -135,7 +146,9 @@ export default function CollectionItem({
             )}
             {canManageItem(collection, item, ethAddress) && !isLocked(collection) ? (
               <>
-                {item.price ? <Dropdown.Item text={t('collection_item.edit_price')} onClick={handleEditPriceAndBeneficiary} /> : null}
+                {item.price && shouldAllowPriceEdition ? (
+                  <Dropdown.Item text={t('collection_item.edit_price')} onClick={handleEditPriceAndBeneficiary} />
+                ) : null}
                 <ResetItemButton itemId={item.id} />
                 {!item.isPublished ? (
                   <>
@@ -203,7 +216,7 @@ export default function CollectionItem({
       <Table.Cell>{renderItemStatus()}</Table.Cell>
       {isOffchainPublicItemOrdersEnabled && !isOnSaleLegacy && (
         <Table.Cell>
-          <Button primary size="tiny" disabled={!isEnableForSaleOffchainMarketplace}>
+          <Button primary size="tiny" disabled={!isEnableForSaleOffchainMarketplace} onClick={handlePutForSale}>
             {t('collection_item.put_for_sale')}
           </Button>
         </Table.Cell>

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

@@ -4,7 +4,7 @@ import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors
 import { RootState } from 'modules/common/types'
 import { getCollection } from 'modules/collection/selectors'
 import { Collection } from 'modules/collection/types'
-import { getIsLinkedWearablesV2Enabled } from 'modules/features/selectors'
+import { getIsLinkedWearablesV2Enabled, getIsOffchainPublicItemOrdersEnabled } from 'modules/features/selectors'
 import { saveItemRequest, SAVE_ITEM_REQUEST } from 'modules/item/actions'
 import { getLoading, getError, getStatusByItemId } from 'modules/item/selectors'
 import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CreateSingleItemModal.types'
@@ -21,6 +21,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
     address: getAddress(state),
     error: getError(state),
     isThirdPartyV2Enabled: getIsLinkedWearablesV2Enabled(state),
+    isOffchainPublicItemOrdersEnabled: getIsOffchainPublicItemOrdersEnabled(state),
     itemStatus,
     isLoading: isLoadingType(getLoading(state), SAVE_ITEM_REQUEST)
   }

src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.tsx

@@ -272,7 +272,7 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
   }
 
   createItem = async (sortedContents: SortedContent, representations: WearableRepresentation[]) => {
-    const { address, collection, onSave } = this.props
+    const { address, collection, isOffchainPublicItemOrdersEnabled, onSave } = this.props
     const {
       id,
       name,
@@ -361,6 +361,12 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
       return onSave(item as Item, sortedContents.all)
     }
 
+    if ((hasScreenshotTaken || type !== ItemType.EMOTE) && isOffchainPublicItemOrdersEnabled) {
+      item.price = ethers.constants.MaxUint256.toString()
+      item.beneficiary = ethers.constants.AddressZero
+      return onSave(item as Item, sortedContents.all)
+    }
+
     this.setState({
       item,
       itemSortedContents: sortedContents.all,

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

@@ -21,6 +21,7 @@ export type Props = ModalProps & {
   metadata: CreateSingleItemModalMetadata
   error: string | null
   isThirdPartyV2Enabled: boolean
+  isOffchainPublicItemOrdersEnabled: boolean
   isLoading: boolean
   collection: Collection | null
   itemStatus: SyncStatus | null
@@ -104,6 +105,9 @@ export type AcceptedFileProps = Pick<
   | 'blockVrmExport'
 >
 export type OwnProps = Pick<Props, 'name' | 'onClose'> & { metadata: CreateSingleItemModalMetadata }
-export type MapStateProps = Pick<Props, 'address' | 'error' | 'isLoading' | 'collection' | 'itemStatus' | 'isThirdPartyV2Enabled'>
+export type MapStateProps = Pick<
+  Props,
+  'address' | 'error' | 'isLoading' | 'collection' | 'itemStatus' | 'isThirdPartyV2Enabled' | 'isOffchainPublicItemOrdersEnabled'
+>
 export type MapDispatchProps = Pick<Props, 'onSave'>
 export type MapDispatch = Dispatch<SaveItemRequestAction>

src/components/Modals/EditPriceAndBeneficiaryModal/EditPriceAndBeneficiaryModal.container.ts

@@ -30,7 +30,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSave: (item, contents) => dispatch(saveItemRequest(item, contents)),
-  onSetPriceAndBeneficiary: (itemId, price, beneficiary) => dispatch(setPriceAndBeneficiaryRequest(itemId, price, beneficiary))
+  onSetPriceAndBeneficiary: (itemId: string, price: string, beneficiary: string) =>
+    dispatch(setPriceAndBeneficiaryRequest(itemId, price, beneficiary))
 })
 
 export default connect(mapState, mapDispatch)(EditPriceAndBeneficiaryModal)

src/components/Modals/EditPriceAndBeneficiaryModal/EditPriceAndBeneficiaryModal.css

@@ -2,10 +2,31 @@
   padding: 16px 32px 38px;
 }
 
+.EditPriceAndBeneficiaryModal.ui.modal .modalContainer {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 40px;
+}
+
+.EditPriceAndBeneficiaryModal.ui.modal .priceThumbnail {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.EditPriceAndBeneficiaryModal.ui.modal .priceThumbnail .priceName {
+  text-align: center;
+  line-height: 20px;
+}
+
 .EditPriceAndBeneficiaryModal .ui.form .dcl.field {
   margin-bottom: 4px;
 }
 
+.EditPriceAndBeneficiaryModal .ui.form .dcl.field .field {
+  width: 100%;
+}
+
 .EditPriceAndBeneficiaryModal .ui.form .dcl.field > .message {
   display: none;
 }
@@ -59,12 +80,18 @@
 }
 
 .EditPriceAndBeneficiaryModal .ui.form > .actions {
-  width: auto;
+  display: flex;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
+.EditPriceAndBeneficiaryModal .ItemImage {
+  min-height: 200px;
+}
+
 .EditPriceAndBeneficiaryModal .ui.form > .actions > button {
-  width: 100%;
+  width: auto;
+  flex: 1;
   margin: 1em 0 0;
 }