From 64a67d0c73c6420568d245feac53c49d0555398b Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Sat, 21 Dec 2024 19:41:59 +0200
Subject: [PATCH] web-wallet: Improve Migration Functionality

Resolves #3267
---
 .../ExecuteMigration/ExecuteMigration.svelte  |  2 +-
 .../MigrateContract/MigrateContract.svelte    | 19 +++++++++++++++----
 .../src/lib/migration/walletConnection.js     |  7 -------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
index dbf5a1249..6c593966d 100644
--- a/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
+++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -59,7 +59,7 @@
   {#if !isLoading && !data && !error}
     <div class="migrate__execute-approval">
       <Icon path={mdiCheckDecagramOutline} />
-      <span>Migration Approved</span>
+      <span>Approval successful! You may now proceed with the migration.</span>
     </div>
   {:else if error}
     <div class="migrate__execute-approval">
diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
index ae969c3f0..6fa7bfb59 100644
--- a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
+++ b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -42,6 +42,8 @@
     walletDisconnect,
   } from "$lib/migration/walletConnection";
   import { getBalanceOfCoin } from "$lib/migration/migration";
+  import Wizard from "$lib/dusk/components/Wizard/Wizard.svelte";
+  import WizardStep from "$lib/dusk/components/Wizard/WizardStep.svelte";
 
   /** @type {string} */
   export let migrationNetwork;
@@ -92,6 +94,8 @@
   /** @type {boolean} */
   let isInputDisabled = false;
 
+  const steps = [{ label: "Approve" }, { label: "Migrate" }, { label: "Done" }];
+
   $: ({ currentProfile } = $walletStore);
   $: moonlightAccount = currentProfile?.account.toString();
 
@@ -329,8 +333,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++}
@@ -357,7 +361,7 @@
           <p>Migration completed successfully!</p>
         </div>
       {/if}
-    </Card>
+    </div>
   {/if}
 
   {#if !walletState.isConnected}
@@ -407,12 +411,19 @@
     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;
+      padding-bottom: 2.25em;
     }
 
     &__header {
diff --git a/web-wallet/src/lib/migration/walletConnection.js b/web-wallet/src/lib/migration/walletConnection.js
index 8eeae9397..19174b389 100644
--- a/web-wallet/src/lib/migration/walletConnection.js
+++ b/web-wallet/src/lib/migration/walletConnection.js
@@ -7,12 +7,6 @@ import { readable } from "svelte/store";
 
 // Required project metadata
 const projectId = "b5303e1c8374b100fbb7f181884fef28";
-const metadata = {
-  description: "Dusk Web-Wallet",
-  icons: [],
-  name: "Dusk Migration",
-  url: "https://127.0.0.1:5173/dashboard/",
-};
 
 /** @typedef {import("@reown/appkit/networks").AppKitNetwork} AppKitNetwork */
 /** @type {[AppKitNetwork, ...AppKitNetwork[]]} */
@@ -33,7 +27,6 @@ export const modal = createAppKit({
     onramp: false,
     swaps: false,
   },
-  metadata,
   networks,
   projectId,
   themeMode: "dark",