Merge remote-tracking branch 'origin/master' into feat/add-enable-sales

decentraland · Sep 25, 2024 · 566b556 · 566b556
2 parents 64f12f1 + 16f79af
commit 566b556
Show file tree

Hide file tree

Showing 47 changed files with 2,007 additions and 677 deletions.
diff --git a/src/components/CollectionDetailPage/CollectionItem/CollectionItem.tsx b/src/components/CollectionDetailPage/CollectionItem/CollectionItem.tsx
@@ -204,7 +204,7 @@ export default function CollectionItem({
       {isOffchainPublicItemOrdersEnabled && !isOnSaleLegacy && (
         <Table.Cell>
           <Button primary size="tiny" disabled={!isEnableForSaleOffchainMarketplace}>
-            PUT UP FOR SALE
+            {t('collection_item.put_for_sale')}
           </Button>
         </Table.Cell>
       )}

diff --git a/...omponents/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.container.ts b/...omponents/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.container.ts
@@ -1,14 +1,7 @@
 import { connect } from 'react-redux'
 import { openModal } from 'decentraland-dapps/dist/modules/modal'
-import { isLoadingThirdParties, isThirdPartyManager } from 'modules/thirdParty/selectors'
-import { MapDispatchProps, MapDispatch, OwnProps, MapStateProps } from './CreateCollectionSelectorModal.types'
+import { MapDispatchProps, MapDispatch, OwnProps } from './CreateCollectionSelectorModal.types'
 import { CreateCollectionSelectorModal } from './CreateCollectionSelectorModal'
-import { RootState } from 'modules/common/types'
-
-const mapState = (state: RootState): MapStateProps => ({
-  isThirdPartyManager: isThirdPartyManager(state),
-  isLoadingThirdParties: isLoadingThirdParties(state)
-})
 
 const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProps => ({
   onCreateCollection: () => {
@@ -21,4 +14,4 @@ const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProp
   }
 })
 
-export default connect(mapState, mapDispatch)(CreateCollectionSelectorModal)
+export default connect(undefined, mapDispatch)(CreateCollectionSelectorModal)
diff --git a/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.module.css b/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.module.css
@@ -16,17 +16,6 @@
   border-radius: 8px;
 }
 
-.collectionSelection .disabled {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0.3;
-  background-color: black;
-}
-
 .collectionSelection img {
   width: 227px;
   height: 110px;

diff --git a/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.spec.tsx b/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.spec.tsx
@@ -1,7 +1,7 @@
 import { renderWithProviders } from 'specs/utils'
 import { CreateCollectionSelectorModal } from './CreateCollectionSelectorModal'
 import { Props } from './CreateCollectionSelectorModal.types'
-import { CREATE_BUTTON_TEST_ID, DISABLED_DATA_TEST_ID } from './constants'
+import { CREATE_BUTTON_TEST_ID } from './constants'
 import userEvent from '@testing-library/user-event'
 
 export function renderWorldContributorTab(props: Partial<Props>) {
@@ -12,8 +12,6 @@ export function renderWorldContributorTab(props: Partial<Props>) {
       metadata={{}}
       name="aName"
       onClose={jest.fn()}
-      isLoadingThirdParties={false}
-      isThirdPartyManager={false}
       {...props}
     />
   )
@@ -29,8 +27,7 @@ describe('when clicking on the create collection button', () => {
     onCreateThirdPartyCollection = jest.fn()
     renderedComponent = renderWorldContributorTab({
       onCreateCollection,
-      onCreateThirdPartyCollection,
-      isThirdPartyManager: true
+      onCreateThirdPartyCollection
     })
   })
 
@@ -57,42 +54,3 @@ describe('when clicking on the create collection button', () => {
     })
   })
 })
-
-describe('and the linked collections are being loaded', () => {
-  let renderedComponent: ReturnType<typeof renderWorldContributorTab>
-  beforeEach(() => {
-    renderedComponent = renderWorldContributorTab({ isLoadingThirdParties: true })
-  })
-
-  it('should show the disabled overlay for the linked collections', () => {
-    const disabledOverlay = renderedComponent.getByTestId(DISABLED_DATA_TEST_ID)
-    expect(disabledOverlay).toBeInTheDocument()
-  })
-
-  it('should disable the create button for the linked collections', () => {
-    const createButton = renderedComponent.getAllByTestId(CREATE_BUTTON_TEST_ID)[1]
-    expect(createButton).toBeDisabled()
-  })
-
-  it('should set the button as loading', () => {
-    const createButton = renderedComponent.getAllByTestId(CREATE_BUTTON_TEST_ID)[1]
-    expect(createButton).toHaveClass('loading')
-  })
-})
-
-describe('and the user is not a third party manager', () => {
-  let renderedComponent: ReturnType<typeof renderWorldContributorTab>
-  beforeEach(() => {
-    renderedComponent = renderWorldContributorTab({ isThirdPartyManager: false })
-  })
-
-  it('should show the disabled overlay for the linked collections', () => {
-    const disabledOverlay = renderedComponent.getByTestId(DISABLED_DATA_TEST_ID)
-    expect(disabledOverlay).toBeInTheDocument()
-  })
-
-  it('should disable the create button for the linked collections', () => {
-    const createButton = renderedComponent.getAllByTestId(CREATE_BUTTON_TEST_ID)[1]
-    expect(createButton).toBeDisabled()
-  })
-})
diff --git a/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.tsx b/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.tsx
@@ -7,7 +7,7 @@ import collectionsImage from '../../../images/collections.png'
 import linkedCollectionsImage from '../../../images/linked-collections.png'
 import { Props } from './CreateCollectionSelectorModal.types'
 import styles from './CreateCollectionSelectorModal.module.css'
-import { CREATE_BUTTON_TEST_ID, DISABLED_DATA_TEST_ID } from './constants'
+import { CREATE_BUTTON_TEST_ID } from './constants'
 
 const CollectionSelectionModal = ({
   image,
@@ -28,7 +28,6 @@ const CollectionSelectionModal = ({
 }) => {
   return (
     <div className={classNames(styles.collectionSelection)}>
-      {disabled && <div data-testid={DISABLED_DATA_TEST_ID} className={styles.disabled}></div>}
       <img src={image} alt={title} />
       <div className={styles.content}>
         <div className={styles.text}>
@@ -49,7 +48,7 @@ const COLLECTIONS_LEARN_MORE_URL = `${config.get('DOCS_URL')}/creator/wearables-
 const LINKED_COLLECTIONS_LEARN_MORE_URL = `${config.get('DOCS_URL')}/creator/wearables/linked-wearables/`
 
 export const CreateCollectionSelectorModal = (props: Props) => {
-  const { onClose, onCreateCollection, onCreateThirdPartyCollection, name, isThirdPartyManager, isLoadingThirdParties } = props
+  const { onClose, onCreateCollection, onCreateThirdPartyCollection, name } = props
 
   return (
     <Modal name={name} onClose={onClose} size="large">
@@ -72,8 +71,6 @@ export const CreateCollectionSelectorModal = (props: Props) => {
             title={t('create_collection_selector_modal.linked_collection.title')}
             subtitle={t('create_collection_selector_modal.linked_collection.subtitle')}
             onCreate={onCreateThirdPartyCollection}
-            isLoading={isLoadingThirdParties}
-            disabled={!isThirdPartyManager || isLoadingThirdParties}
             learnMoreUrl={LINKED_COLLECTIONS_LEARN_MORE_URL}
           />
         </div>

diff --git a/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.types.ts b/src/components/Modals/CreateCollectionSelectorModal/CreateCollectionSelectorModal.types.ts
@@ -3,13 +3,10 @@ import { OpenModalAction } from 'decentraland-dapps/dist/modules/modal'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
 
 export type Props = ModalProps & {
-  isThirdPartyManager: boolean
-  isLoadingThirdParties: boolean
   onCreateCollection: () => void
   onCreateThirdPartyCollection: () => void
 }
 
-export type MapStateProps = Pick<Props, 'isThirdPartyManager' | 'isLoadingThirdParties'>
 export type MapDispatchProps = Pick<Props, 'onCreateCollection' | 'onCreateThirdPartyCollection'>
 export type OwnProps = Pick<Props, 'metadata' | 'onClose' | 'name'>
 export type MapDispatch = Dispatch<OpenModalAction>
diff --git a/src/components/Modals/CreateCollectionSelectorModal/constants.ts b/src/components/Modals/CreateCollectionSelectorModal/constants.ts
@@ -1,2 +1 @@
-export const DISABLED_DATA_TEST_ID = 'create-collection-selector-modal-disabled'
 export const CREATE_BUTTON_TEST_ID = 'create-collection-selector-modal-create-button'
diff --git a/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx b/src/components/Modals/CreateThirdPartyCollectionModal/CreateThirdPartyCollectionModal.tsx
@@ -217,7 +217,7 @@ export const CreateThirdPartyCollectionModal: FC<Props> = (props: Props) => {
         collectionName
       })
     }
-  }, [onSubmit, collectionId, collectionName, selectedThirdParty, ownerAddress, analytics])
+  }, [onSubmit, collectionId, selectedContract, selectedNetwork, collectionName, selectedThirdParty, ownerAddress, analytics])
 
   const isSubmittable =
     collectionName &&

diff --git a/...ls/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.css b/...ls/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.css
@@ -107,3 +107,21 @@
 .ui.visible.popup.price-popup {
   z-index: 4000;
 }
+
+.ConfirmCollectionItemsStep .loading-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1000000;
+  background-color: rgba(var(--dark-raw), 0.78);
+  font-weight: 500;
+  border-radius: 8px;
+  font-size: 20px;
+  gap: 8px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/...ls/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.tsx b/...ls/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import { ethers } from 'ethers'
 import { Network } from '@dcl/schemas'
-import { Button, Column, Mana, Modal, Popup, Row, Table } from 'decentraland-ui'
+import { Button, Column, Loader, Mana, Modal, Popup, Row, Table } from 'decentraland-ui'
 import { RarityBadge } from 'decentraland-dapps/dist/containers/RarityBadge'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Item } from 'modules/item/types'
@@ -11,8 +11,14 @@ import ItemImage from 'components/ItemImage'
 import ItemBadge from 'components/ItemBadge'
 import './ConfirmCollectionItemsStep.css'
 
-export const ConfirmCollectionItemsStep: React.FC<{ items: Item[]; onNextStep: () => void; onPrevStep: () => void }> = props => {
-  const { items, onNextStep, onPrevStep } = props
+export const ConfirmCollectionItemsStep: React.FC<{
+  items: Item[]
+  onNextStep: () => void
+  onPrevStep: () => void
+  isSigningCheque: boolean
+  isThirdParty: boolean
+}> = props => {
+  const { items, onNextStep, onPrevStep, isSigningCheque, isThirdParty } = props
 
   const renderPrice = (item: Item) => {
     const price = ethers.utils.formatEther(item.price!)
@@ -86,18 +92,30 @@ export const ConfirmCollectionItemsStep: React.FC<{ items: Item[]; onNextStep: (
     <Modal.Content className="ConfirmCollectionItemsStep">
       <Column>
         <Row className="details">
+          {isSigningCheque && (
+            <div className="loading-overlay">
+              <Loader inline size="massive" />
+              {t('publish_wizard_collection_modal.accept_in_wallet')}
+            </div>
+          )}
           <Column grow={true}>
             <p className="title">{t('publish_wizard_collection_modal.confirm_collection_items_step.title')}</p>
-            <p className="subtitle">{t('publish_wizard_collection_modal.confirm_collection_items_step.subtitle', { br: <br /> })}</p>
-            <p className="description">{t('publish_wizard_collection_modal.confirm_collection_items_step.description')}</p>
+            <p className="subtitle">
+              {t(`publish_wizard_collection_modal.confirm_collection_items_step.${isThirdParty ? 'third_party' : 'standard'}.subtitle`, {
+                br: <br />
+              })}
+            </p>
+            <p className="description">
+              {t(`publish_wizard_collection_modal.confirm_collection_items_step.${isThirdParty ? 'third_party' : 'standard'}.description`)}
+            </p>
             <div className="items">{renderItemsTable()}</div>
           </Column>
         </Row>
         <Row className="actions">
-          <Button className="back" secondary onClick={onPrevStep}>
+          <Button className="back" secondary disabled={isSigningCheque} onClick={onPrevStep}>
             {t('global.back')}
           </Button>
-          <Button className="proceed" primary onClick={onNextStep}>
+          <Button className="proceed" primary disabled={isSigningCheque} onClick={onNextStep}>
             {t('publish_wizard_collection_modal.confirm_collection_items_step.confirm_items')}
           </Button>
         </Row>