web-wallet: Improve Migration Functionality

Resolves #3267
dusk-network · Dec 22, 2024 · f48f12a · f48f12a
1 parent c69ac7b
commit f48f12a
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 81 deletions.
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
@@ -9,10 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add "VITE_REOWN_PROJECT_ID" ENV variable [#3267]
+- Add additional notices to the Migrate flow [#3267]
+
 ### Changed
 
 - Update Transactions list design [#1922]
 - Prioritize Public Account in the interface and transaction flows [#3259]
+- Enhance Migrate flow layout, aligning it to the rest of the transaction-based flows [#3267]
+- Display the Migration Requirements details using the `Banner` component [#3267]
+- Update the Approval Success copy for clarity (Migrate flow) [#3267]
+- Trigger sync after a successful migration [#3267]
 
 ### Removed
 
@@ -480,6 +487,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3245]: https://github.com/dusk-network/rusk/issues/3245
 [#3259]: https://github.com/dusk-network/rusk/issues/3259
 [#3265]: https://github.com/dusk-network/rusk/issues/3265
+[#3267]: https://github.com/dusk-network/rusk/issues/3267
 
 <!-- VERSIONS -->
 

diff --git a/web-wallet/README.md b/web-wallet/README.md
@@ -44,6 +44,7 @@ VITE_GAS_LIMIT_UPPER=1000000000
 VITE_GAS_PRICE_DEFAULT=1
 VITE_GAS_PRICE_LOWER=1
 VITE_MODE_MAINTENANCE=false
+VITE_REOWN_PROJECT_ID="" # the ID of the Bridge project (as on Reown Cloud)
 VITE_NODE_URL="" # connect to a specific node
 ```
 

diff --git a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
@@ -6,6 +6,7 @@
   import { isHex } from "viem";
   import { createEventDispatcher } from "svelte";
   import { Button, Icon } from "$lib/dusk/components";
+  import { Banner } from "$lib/components";
   import { account, wagmiConfig } from "$lib/migration/walletConnection";
   import { allowance, approve } from "$lib/migration/migration";
   import { createDataStore } from "$lib/dusk/svelte-stores";
@@ -85,27 +86,37 @@
 
 <div class="migrate__approve">
   {#if !isLoading && !error && !data}
-    <div class="migrate__approve-notice">
-      <p>DUSK token migration requires two transactions:</p>
-      <ol class="migrate__approve-notice-list">
-        <li>
-          Approve: Authorize the migration contract to spend your DUSK tokens.
-        </li>
-        <li>Migrate: Transfer your DUSK tokens to the migration contract.</li>
-      </ol>
-      <p>
-        Both steps must be completed for a successful migration.<br /><br
-        />Warning: Make sure your wallet has enough funds to pay for the gas.
-      </p>
+    <div class="migrate__approve-notice-container">
+      <Banner title="Migration Requirements" variant="info">
+        <div class="migrate__requirements-info">
+          <p>DUSK token migration requires two transactions:</p>
+          <ol class="migrate__requirements-info-list">
+            <li>
+              <b>Approve:</b> Authorize the migration contract to spend your DUSK
+              tokens.
+            </li>
+            <li>
+              <b>Migrate:</b> Transfer your DUSK tokens to the migration contract.
+            </li>
+          </ol>
+          <p>Both steps must be completed for a successful migration.</p>
+        </div>
+      </Banner>
+      <Banner title="Gas Fee Reminder" variant="warning">
+        <p>
+          Please ensure your wallet has sufficient funds to cover the gas fees
+          for the migration.
+        </p>
+      </Banner>
     </div>
   {:else if isLoading}
     <div class="migrate__approve-approval">
-      <Icon path={mdiTimerSand} />
+      <Icon path={mdiTimerSand} size="large" />
       <span>Approval in progress...</span>
     </div>
   {:else if error}
     <div class="migrate__approve-approval">
-      <Icon path={mdiAlertOutline} />
+      <Icon path={mdiAlertOutline} size="large" />
       <span>An error occurred during approval</span>
     </div>
   {/if}
@@ -118,31 +129,34 @@
 </div>
 
 <style lang="postcss">
+  .migrate {
+    &__requirements-info {
+      display: flex;
+      flex-direction: column;
+      gap: var(--small-gap);
+    }
+    &__requirements-info-list {
+      list-style-position: inside;
+    }
+  }
+
   .migrate__approve {
     display: flex;
     justify-content: center;
     flex-direction: column;
+    gap: 1.875em;
 
-    &-notice {
-      font-size: 0.875em;
-      line-height: 1.3125em;
-      padding: 1em 1.375em;
-      border-radius: 0.675em;
-      border: 1px solid var(--primary-color);
-      margin-top: 0.625em;
-      margin-bottom: 1em;
-
-      &-list {
-        padding-left: 1.375em;
-      }
+    &-notice-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--default-gap);
     }
 
     &-approval {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
     }
   }
 </style>
diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -14,6 +14,7 @@
   import { migrate } from "$lib/migration/migration";
   import { createDataStore } from "$lib/dusk/svelte-stores";
   import { createEventDispatcher } from "svelte";
+  import { walletStore } from "$lib/stores";
 
   /** @type {bigint} */
   export let amount;
@@ -46,6 +47,9 @@
       });
       if (result.status === "success") {
         dispatch("incrementStep");
+        setTimeout(() => {
+          walletStore.sync();
+        }, 20000);
       } else {
         throw new Error("Could not validate the transaction receipt");
       }
@@ -58,35 +62,35 @@
 <div class="migrate__execute">
   {#if !isLoading && !data && !error}
     <div class="migrate__execute-approval">
-      <Icon path={mdiCheckDecagramOutline} />
-      <span>Migration Approved</span>
+      <Icon path={mdiCheckDecagramOutline} size="large" />
+      <span>Approval successful! You may now proceed with the migration.</span>
     </div>
   {:else if error}
     <div class="migrate__execute-approval">
-      <Icon path={mdiAlertOutline} />
+      <Icon path={mdiAlertOutline} size="large" />
       <span>Action has been rejected on the connected wallet.</span>
     </div>
   {:else if isLoading && !migrationHash}
     <div class="migrate__execute-approval">
-      <Icon path={mdiTimerSand} />
+      <Icon path={mdiTimerSand} size="large" />
       <span>Migration in progress...</span>
     </div>
   {/if}
   {#if migrationHash && chain?.blockExplorers}
     <div class="migrate__execute-approval">
-      <Icon path={mdiTimerSand} />
-      <span>Migration has been submitted</span>
+      <Icon path={mdiTimerSand} size="large" />
+      <span>Your migration request is being processed...</span>
+      <Banner title="Migration in Progress" variant="info">
+        <p>
+          Your migration request is currently being executed and may take a few
+          minutes to complete. You can track the transaction status <AppAnchor
+            href={`${chain.blockExplorers.default.url}/tx/${migrationHash}`}
+            target="_blank"
+            rel="noopener noreferrer">here</AppAnchor
+          >.
+        </p>
+      </Banner>
     </div>
-    <Banner title="Migration in progress..." variant="info">
-      <p>
-        Migration takes some minutes to complete. Your transaction is being
-        executed and you can check its status <AppAnchor
-          href={`${chain.blockExplorers.default.url}/tx/${migrationHash}`}
-          target="_blank"
-          rel="noopener noreferrer">here</AppAnchor
-        >.
-      </p>
-    </Banner>
   {/if}
   {#if (isLoading || !data || error) && !migrationHash}
     <Button
@@ -102,13 +106,13 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
+    gap: 1.875em;
 
     &-approval {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
     }
   }
 </style>
diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -18,7 +18,6 @@
     middleEllipsis,
   } from "$lib/dusk/string";
   import {
-    AppAnchor,
     AppAnchorButton,
     AppImage,
     ApproveMigration,
@@ -27,7 +26,6 @@
   } from "$lib/components";
   import {
     Button,
-    Card,
     ExclusiveChoice,
     Icon,
     Stepper,
@@ -71,9 +69,6 @@
   /** @type {TokenNames} */
   let selectedChain = erc20.name;
 
-  /** @type {boolean} */
-  const migrationInProgress = false;
-
   /** @type {undefined | bigint} */
   let connectedWalletBalance;
 
@@ -92,6 +87,8 @@
   /** @type {boolean} */
   let isInputDisabled = false;
 
+  const steps = [{ label: "Approve" }, { label: "Migrate" }, { label: "Done" }];
+
   $: ({ currentProfile } = $walletStore);
   $: moonlightAccount = currentProfile?.account.toString();
 
@@ -241,16 +238,6 @@
     </div>
   </header>
 
-  {#if migrationInProgress}
-    <div class="migrate__progress-notice">
-      <span
-        >Another migration is in progress. You can check the status <AppAnchor
-          href="#">here</AppAnchor
-        >.</span
-      >
-    </div>
-  {/if}
-
   <div class="migrate__token">
     <p class="migrate__token-header">From:</p>
     <ExclusiveChoice
@@ -329,8 +316,8 @@
   {/if}
 
   {#if walletState.isConnected && isAmountValid && isMigrationInitialized}
-    <Card gap="small">
-      <Stepper steps={3} activeStep={migrationStep} />
+    <div class="migrate__wizard">
+      <Stepper {steps} activeStep={migrationStep} />
       {#if migrationStep === 0}
         <ApproveMigration
           on:incrementStep={() => migrationStep++}
@@ -353,11 +340,20 @@
         />
       {:else}
         <div class="migrate__execute">
-          <Icon path={mdiCheckDecagramOutline} />
-          <p>Migration completed successfully!</p>
+          <div class="migrate__execute-approval">
+            <Icon path={mdiCheckDecagramOutline} size="large" />
+            <p>Migration request accepted!</p>
+          </div>
+          <Banner title="Migration Request Accepted" variant="info">
+            <p>
+              The migration request has now been accepted on chain. We will
+              process the request in the background. Receiving your DUSK might
+              take some time. Check back again later.
+            </p>
+          </Banner>
         </div>
       {/if}
-    </Card>
+    </div>
   {/if}
 
   {#if !walletState.isConnected}
@@ -407,12 +403,25 @@
     gap: var(--default-gap);
     padding: 1.25em;
 
+    &__wizard {
+      margin-top: var(--default-gap);
+      gap: 1.25em;
+      display: flex;
+      flex-direction: column;
+    }
+
     &__execute {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: var(--default-gap);
-      padding: 2.25em 0;
+
+      &-approval {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--default-gap);
+      }
     }
 
     &__header {
@@ -442,12 +451,6 @@
       align-items: center;
     }
 
-    &__progress-notice {
-      padding: 1em 1.375em;
-      border-radius: 1.5em;
-      border: 1px solid var(--primary-color);
-    }
-
     &__token-header {
       font-weight: 500;
     }

diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -57,7 +57,9 @@ export default [
     ],
   },
   {
-    enabled: import.meta.env.VITE_FEATURE_MIGRATE === "true",
+    enabled:
+      import.meta.env.VITE_FEATURE_MIGRATE === "true" &&
+      import.meta.env.VITE_REOWN_PROJECT_ID !== "",
     id: "migrate",
     label: "Migrate",
     operations: [