feat: Use wert for collection fees (#3058)

* feat: WIP wert for collection fees

* fix: Update schemas

* fix: Update dapps

* fix: Update config

* fix: Reorder imports

* feat: Use wert to publish a collection

* fix: Update dapps

* fix: Update styles

* fix: Update styles

* fix: Update styles

* fix: Lint

* fix: Update styles

* fix: Update styles

* fix: Lint

* fix: Update copies and style

* fix: Update color

* fix: Update styles

* fix: Add new checkbox

* fix: Update styles

* fix: Lint

* fix: Update error message

* fix: Update copy

* fix: Show some data in the modal

* fix: Update last part styles

* fix: Lint

* fix: Update imports

* fix: Add feature flag

* fix: Add card image for wert modal

* fix: Lint

* fix: Update dcl dapps

* fix: Handle modal close

* fix: Add icons

* fix: Update styles

* fix: Track if fiat

* fix: Add tests

* fix: Update tests

* fix: Add comment

* fix: Skip publish with fiat tests

* fix: Update unused var

* fix: Use webp instead

* fix: Simplify params

* fix: Add comment

* fix: Move commodity amount function

* fix: Lint

* fix: Test func

* fix: Test

* fix: Remove only

* fix: Skip its

package.json

@@ -11,7 +11,7 @@
     "@dcl/crypto": "^3.4.5",
     "@dcl/hashing": "^3.0.4",
     "@dcl/mini-rpc": "^1.0.7",
-    "@dcl/schemas": "^9.14.0",
+    "@dcl/schemas": "^10.2.0",
     "@dcl/sdk": "^7.4.9",
     "@dcl/single-sign-on-client": "^0.1.0",
     "@dcl/ui-env": "^1.5.0",
@@ -37,7 +37,7 @@
     "decentraland": "3.3.0",
     "decentraland-builder-scripts": "^0.24.0",
     "decentraland-crypto-fetch": "^2.0.1",
-    "decentraland-dapps": "^18.1.0",
+    "decentraland-dapps": "^19.2.0",
     "decentraland-ecs": "6.12.4-7784644013.commit-f770b3e",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.0.3",

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

@@ -9,16 +9,24 @@
 }
 
 .ConfirmCollectionItemsStep .details .title {
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
 }
 
 .ConfirmCollectionItemsStep .details .subtitle {
+  font-size: 15px;
   font-weight: 600;
-  margin-bottom: 0;
+  line-height: 24px;
+  color: var(--clear-divider);
+  margin-bottom: 0px;
 }
 
 .ConfirmCollectionItemsStep .details .description {
+  font-size: 15px;
   font-weight: 400;
+  line-height: 24px;
+  color: var(--clear-divider);
 }
 
 .ConfirmCollectionItemsStep .details .fields .dcl.field {
@@ -28,6 +36,7 @@
 .ConfirmCollectionItemsStep .actions {
   margin-top: 24px;
   width: 100%;
+  justify-content: space-between !important;
 }
 
 .ConfirmCollectionItemsStep .actions .button {

src/components/Modals/PublishWizardCollectionModal/ConfirmCollectionItemsStep/ConfirmCollectionItemsStep.tsx

@@ -88,12 +88,12 @@ export const ConfirmCollectionItemsStep: React.FC<{ items: Item[]; onNextStep: (
         <Row className="details">
           <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', { enter: <br /> })}</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>
             <div className="items">{renderItemsTable()}</div>
           </Column>
         </Row>
-        <Row className="actions" align="right">
+        <Row className="actions">
           <Button className="back" secondary onClick={onPrevStep}>
             {t('global.back')}
           </Button>

src/components/Modals/PublishWizardCollectionModal/ConfirmCollectionNameStep/ConfirmCollectionNameStep.css

@@ -6,21 +6,30 @@
 }
 
 .ConfirmCollectionNameStep .details .title {
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
 }
 
 .ConfirmCollectionNameStep .details .subtitle {
+  font-size: 15px;
   font-weight: 600;
-  margin-bottom: 0;
+  line-height: 24px;
+  color: var(--clear-divider);
+  margin-bottom: 0px;
 }
 
 .ConfirmCollectionNameStep .details .description {
-  font-weight: 200;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--clear-divider);
 }
 
 .ConfirmCollectionNameStep .details .fields .dcl.field {
   margin-top: 32px;
 }
+
 .ConfirmCollectionNameStep .details .fields .confirm-collection-name .has-label .header {
   color: white;
 }

src/components/Modals/PublishWizardCollectionModal/CongratulationsStep/CongratulationsStep.css

@@ -2,21 +2,27 @@
   background-color: rgba(var(--dark-raw), 0.48);
   border-radius: 8px;
   width: 100%;
-  padding: 20px 24px 48px;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 24px;
-  text-align: justify;
+  padding: 20px 24px 38px;
 }
 
-.CongratulationsStep .sparkles {
+.CongratulationsStep .collection-image {
   align-self: center;
-  height: 128px;
-  width: 128px;
-  margin: 50px auto;
-  background-image: url('../../../../images/sparkles_colors.svg');
-  background-repeat: no-repeat;
-  background-size: contain;
+  height: 165px;
+  width: 165px;
+  margin-top: 18px;
+  margin-bottom: 38px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.CongratulationsStep .texts-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 80%;
+  margin: auto;
+  text-align: justify;
 }
 
 .CongratulationsStep .details a.forum-post {
@@ -25,9 +31,33 @@
   font-weight: 600;
 }
 
+.CongratulationsStep .details .title {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.CongratulationsStep .details .subtitle {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--clear-divider);
+}
+
 .CongratulationsStep .details .description {
-  margin-top: 24px;
-  margin-bottom: 84px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--clear-divider);
+}
+
+.CongratulationsStep .details .dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--primary);
+  transform: translateY(10px) translateX(-17px);
 }
 
 .CongratulationsStep .actions {