From 1051128bee57fe2ee39eca642b9dde143e177900 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Mon, 16 Dec 2024 14:45:25 +0200
Subject: [PATCH] web-wallet: Add Migration Successful Step

Resolves #3180
---
 .../ExecuteMigration/ExecuteMigration.svelte  | 38 +++++++++----------
 .../MigrateContract/MigrateContract.svelte    | 35 +++++++++++++----
 2 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
index 442bf43a3..dbf5a1249 100644
--- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
+++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -8,11 +8,12 @@
   } from "@mdi/js";
   import { waitForTransactionReceipt } from "@wagmi/core";
   import { isHex } from "viem";
-  import { AppAnchor } from "$lib/components";
+  import { AppAnchor, Banner } from "$lib/components";
   import { Button, Icon } from "$lib/dusk/components";
   import { account, wagmiConfig } from "$lib/migration/walletConnection";
   import { migrate } from "$lib/migration/migration";
   import { createDataStore } from "$lib/dusk/svelte-stores";
+  import { createEventDispatcher } from "svelte";
 
   /** @type {bigint} */
   export let amount;
@@ -23,6 +24,8 @@
   /** @type {HexString} */
   export let migrationContract;
 
+  const dispatch = createEventDispatcher();
+
   /** @type {string} */
   let migrationHash = "";
 
@@ -37,10 +40,15 @@
 
     if (isHex(txHash)) {
       migrationHash = txHash;
-      return waitForTransactionReceipt(wagmiConfig, {
+      const result = await waitForTransactionReceipt(wagmiConfig, {
         confirmations: 10,
         hash: txHash,
       });
+      if (result.status === "success") {
+        dispatch("incrementStep");
+      } else {
+        throw new Error("Could not validate the transaction receipt");
+      }
     } else {
       throw new Error("txHash is not a hex string");
     }
@@ -66,19 +74,19 @@
   {/if}
   {#if migrationHash && chain?.blockExplorers}
     <div class="migrate__execute-approval">
-      <Icon path={mdiCheckDecagramOutline} />
+      <Icon path={mdiTimerSand} />
       <span>Migration has been submitted</span>
     </div>
-    <div class="migrate__execute-notice">
-      <span
-        >Migration takes some minutes to complete. Your transaction is being
-        executed and you can check it <AppAnchor
+    <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
-        >.</span
-      >
-    </div>
+        >.
+      </p>
+    </Banner>
   {/if}
   {#if (isLoading || !data || error) && !migrationHash}
     <Button
@@ -95,16 +103,6 @@
     justify-content: center;
     flex-direction: column;
 
-    &-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;
-    }
-
     &-approval {
       display: flex;
       flex-direction: column;
diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
index 6c603081d..b5c0c8d02 100644
--- a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
+++ b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -1,7 +1,12 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { mdiArrowLeft, mdiArrowRight, mdiWalletOutline } from "@mdi/js";
+  import {
+    mdiArrowLeft,
+    mdiArrowRight,
+    mdiCheckDecagramOutline,
+    mdiWalletOutline,
+  } from "@mdi/js";
   import { getAccount, switchChain } from "@wagmi/core";
   import { formatUnits, parseUnits } from "viem";
   import { onMount } from "svelte";
@@ -22,6 +27,7 @@
   } from "$lib/components";
   import {
     Button,
+    Card,
     ExclusiveChoice,
     Icon,
     Stepper,
@@ -258,10 +264,10 @@
         )}
       </p>
       <span class="migrate__token-balance">
+        Balance:
         {#if connectedWalletBalance === undefined}
-          Loading Balance...
+          <span>Loading...</span>
         {:else}
-          Balance:
           <span
             >{slashDecimals(
               formatUnits(connectedWalletBalance ?? 0n, ercDecimals)
@@ -320,9 +326,8 @@
   {/if}
 
   {#if walletState.isConnected && isAmountValid && isMigrationInitialized}
-    <div class="migrate__wizard">
-      <Stepper steps={2} activeStep={migrationStep} variant="secondary" />
-
+    <Card gap="small">
+      <Stepper steps={3} activeStep={migrationStep} />
       {#if migrationStep === 0}
         <ApproveMigration
           on:incrementStep={() => migrationStep++}
@@ -336,14 +341,20 @@
           chainContract={tokens[network][selectedChain].contract}
           migrationContract={tokens[network][selectedChain].migrationContract}
         />
-      {:else}
+      {:else if migrationStep === 1}
         <ExecuteMigration
+          on:incrementStep={() => migrationStep++}
           amount={parseUnits(amount.replace(",", "."), ercDecimals)}
           currentAddress={walletState.address ?? ""}
           migrationContract={tokens[network][selectedChain].migrationContract}
         />
+      {:else}
+        <div class="migrate__execute">
+          <Icon path={mdiCheckDecagramOutline} />
+          <p>Migration completed successfully!</p>
+        </div>
       {/if}
-    </div>
+    </Card>
   {/if}
 
   {#if !walletState.isConnected}
@@ -393,6 +404,14 @@
     gap: var(--default-gap);
     padding: 1.25em;
 
+    &__execute {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--default-gap);
+      padding: 2.25em 0;
+    }
+
     &__header {
       display: flex;
       justify-content: space-between;