feat: Add Third Party payments (#3189)

* feat: Publication fee Payment

* feat: Add more changes

* fix: Update test

* feat: Adds hooks tests and adds loader screen for the Confirm and Pay steps

* feat: Add multiple items image

* feat: Add publish and push changes tests

* fix: Remove unusued action reducers in the curations reducer

* fix: Remove unusued action reducers in the curations reducer

* fix: Types

* fix: Packages problem

* fix: Publishing for standard collections

* fix: Add missing translations

* fix: Use the weiPerEther constant

Author: LautaroPetaccio

package-lock.json

@@ -11,7 +11,7 @@
     "@dcl/crypto": "^3.4.5",
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
-    "@dcl/schemas": "^13.9.0",
+    "@dcl/schemas": "^13.12.0",
     "@dcl/sdk": "7.5.5",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",

package.json

@@ -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;
+}

src/components/Modals/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.css

@@ -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>