From daee98bb61974e1f76e6aaefb07ccc577da5e6e7 Mon Sep 17 00:00:00 2001
From: Alex Panturu <panturu.alexandru@gmail.com>
Date: Tue, 27 Aug 2024 11:24:54 +0300
Subject: [PATCH] web-wallet: add token migration contract bindings

---
 web-wallet/CHANGELOG.md                       |   3 +
 web-wallet/README.md                          |   1 +
 .../ApproveMigration/ApproveMigration.svelte  | 142 +++++++
 .../ExecuteMigration/ExecuteMigration.svelte  | 112 +++++
 .../__snapshots__/GasControls.spec.js.snap    |  53 +--
 web-wallet/src/lib/components/index.js        |   2 +
 .../MigrateContract/MigrateContract.svelte    | 389 +++++++-----------
 .../containers/MigrateContract/tokenConfig.js |  33 ++
 .../containers/MigrateContract/tokens.d.ts    |  20 +
 .../src/lib/contracts/contract-descriptors.js |  15 +
 .../promise/__tests__/rejectAfter.spec.js     |  30 ++
 .../promise/__tests__/resolveAfter.spec.js    |  30 ++
 web-wallet/src/lib/dusk/promise/index.js      |   2 +
 .../src/lib/dusk/promise/rejectAfter.js       |   7 +
 .../src/lib/dusk/promise/resolveAfter.js      |   7 +
 .../__tests__/createDataStore.spec.js         | 351 ++++++++++++++++
 .../lib/dusk/svelte-stores/createDataStore.js |  78 ++++
 .../src/lib/dusk/svelte-stores/index.js       |   1 +
 .../lib/dusk/svelte-stores/svelte-stores.d.ts |  10 +
 .../{erc_bep_duskABI.json => erc_bep_20.json} |   0
 web-wallet/src/lib/migration/migration.js     | 121 ++++++
 .../src/lib/migration/walletConnection.js     |  17 +-
 .../src/routes/(app)/dashboard/+page.svelte   |   4 +
 .../__tests__/__snapshots__/page.spec.js.snap |  60 +++
 .../(app)/dashboard/migrate/+page.svelte      |  21 +
 web-wallet/vite-setup.js                      |   4 +
 web-wallet/vite.config.js                     |   2 +
 27 files changed, 1223 insertions(+), 292 deletions(-)
 create mode 100644 web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
 create mode 100644 web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
 create mode 100644 web-wallet/src/lib/containers/MigrateContract/tokenConfig.js
 create mode 100644 web-wallet/src/lib/containers/MigrateContract/tokens.d.ts
 create mode 100644 web-wallet/src/lib/dusk/promise/__tests__/rejectAfter.spec.js
 create mode 100644 web-wallet/src/lib/dusk/promise/__tests__/resolveAfter.spec.js
 create mode 100644 web-wallet/src/lib/dusk/promise/index.js
 create mode 100644 web-wallet/src/lib/dusk/promise/rejectAfter.js
 create mode 100644 web-wallet/src/lib/dusk/promise/resolveAfter.js
 create mode 100644 web-wallet/src/lib/dusk/svelte-stores/__tests__/createDataStore.spec.js
 create mode 100644 web-wallet/src/lib/dusk/svelte-stores/createDataStore.js
 create mode 100644 web-wallet/src/lib/dusk/svelte-stores/index.js
 create mode 100644 web-wallet/src/lib/dusk/svelte-stores/svelte-stores.d.ts
 rename web-wallet/src/lib/migration/abi/{erc_bep_duskABI.json => erc_bep_20.json} (100%)
 create mode 100644 web-wallet/src/lib/migration/migration.js
 create mode 100644 web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte

diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 91faa7eb2e..f25308d9ce 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added gas settings validation on Unstake / Widthdraw Rewards flows [#2000]
 - Added allocation (shield/unshield) page and UI [#2196]
+- Added token migration contract bindings [#2014]
 
 ### Changed
 
@@ -242,6 +243,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2071]: https://github.com/dusk-network/rusk/issues/2075
 [#2118]: https://github.com/dusk-network/rusk/issues/2118
 [#2118]: https://github.com/dusk-network/rusk/issues/2175
+[#2196]: https://github.com/dusk-network/rusk/issues/2196
+[#2014]: https://github.com/dusk-network/rusk/issues/2014
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/README.md b/web-wallet/README.md
index fd86c74669..64a41810aa 100644
--- a/web-wallet/README.md
+++ b/web-wallet/README.md
@@ -34,6 +34,7 @@ N.B. the current `0.1.2` version of the library has no option to pick the networ
 # can be empty string, must start with a slash otherwise, must not end with a slash
 VITE_BASE_PATH=""
 VITE_CONTRACT_ALLOCATE_DISABLED=true
+VITE_CONTRACT_MIGRATE_DISABLED=true
 VITE_CONTRACT_STAKE_DISABLED=false
 VITE_CONTRACT_TRANSFER_DISABLED=false
 VITE_CURRENT_NODE=${VITE_LOCAL_NODE}
diff --git a/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
new file mode 100644
index 0000000000..7413e52bd9
--- /dev/null
+++ b/web-wallet/src/lib/components/ApproveMigration/ApproveMigration.svelte
@@ -0,0 +1,142 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { mdiAlertOutline, mdiTimerSand } from "@mdi/js";
+  import { waitForTransactionReceipt } from "@wagmi/core";
+  import { isHex } from "viem";
+  import { createEventDispatcher } from "svelte";
+  import { Button, Icon } from "$lib/dusk/components";
+  import { account, wagmiConfig } from "$lib/migration/walletConnection";
+  import { allowance, approve } from "$lib/migration/migration";
+  import { createDataStore } from "$lib/dusk/svelte-stores";
+
+  /** @type {number} */
+  export let amount;
+
+  /** @type {HexString} */
+  export let chainContract;
+
+  /** @type {HexString} */
+  export let migrationContract;
+
+  $: ({ address } = $account);
+
+  let hasApprovedCoin = false;
+
+  const dispatch = createEventDispatcher();
+
+  const approvalTxStore = createDataStore(handleApprove);
+
+  $: ({ isLoading, data, error } = $approvalTxStore);
+
+  async function checkAllowance() {
+    if (!address) {
+      dispatch("errorApproval");
+      throw new Error("Address is undefined");
+    }
+
+    try {
+      const allowedAmount = await allowance(
+        address,
+        chainContract,
+        migrationContract
+      );
+      return Number(allowedAmount) >= amount;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  async function handleApprove() {
+    dispatch("initApproval");
+
+    hasApprovedCoin = await checkAllowance();
+
+    if (!hasApprovedCoin) {
+      const txHash = await approve(
+        migrationContract,
+        chainContract,
+        amount.toString()
+      );
+
+      if (isHex(txHash)) {
+        dispatch("incrementStep");
+        await waitForTransactionReceipt(wagmiConfig, {
+          confirmations: 3,
+          hash: txHash,
+        });
+
+        hasApprovedCoin = await checkAllowance();
+      } else {
+        dispatch("errorApproval");
+        throw new Error("txHash is not a hex string");
+      }
+    } else {
+      dispatch("incrementStep");
+    }
+  }
+</script>
+
+<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>
+  {:else if isLoading}
+    <div class="migrate__approve-approval">
+      <Icon path={mdiTimerSand} />
+      <span>Approval in progress</span>
+    </div>
+  {:else if error}
+    <div class="migrate__approve-approval">
+      <Icon path={mdiAlertOutline} />
+      <span>An error occured during approval</span>
+    </div>
+  {/if}
+
+  <Button
+    text={error ? "RETRY APPROVAL" : "APPROVE MIGRATION"}
+    disabled={!!isLoading}
+    on:click={approvalTxStore.getData}
+  />
+</div>
+
+<style lang="postcss">
+  .migrate__approve {
+    display: flex;
+    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;
+
+      &-list {
+        padding-left: 1.375em;
+      }
+    }
+
+    &-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
new file mode 100644
index 0000000000..4620f144c7
--- /dev/null
+++ b/web-wallet/src/lib/components/ExecuteMigration/ExecuteMigration.svelte
@@ -0,0 +1,112 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { mdiAlertOutline, mdiCheckDecagramOutline } from "@mdi/js";
+  import { waitForTransactionReceipt } from "@wagmi/core";
+  import { isHex } from "viem";
+  import { AppAnchor } 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";
+
+  /** @type {number} */
+  export let amount;
+
+  /** @type {string} */
+  export let currentAddress;
+
+  /** @type {HexString} */
+  export let migrationContract;
+
+  /** @type {string} */
+  let migrationHash = "";
+
+  const migrationStore = createDataStore(handleMigration);
+
+  $: ({ chain, chainId } = $account);
+  $: ({ data, error, isLoading } = $migrationStore);
+
+  /** @param {number} id - the chain id of the selected smart contract */
+  async function handleMigration(id) {
+    const txHash = await migrate(
+      amount.toString(),
+      id,
+      currentAddress,
+      migrationContract
+    );
+
+    if (isHex(txHash)) {
+      migrationHash = txHash;
+      return waitForTransactionReceipt(wagmiConfig, {
+        confirmations: 10,
+        hash: txHash,
+      });
+    } else {
+      throw new Error("txHash is not a hex string");
+    }
+  }
+</script>
+
+<div class="migrate__execute">
+  {#if !isLoading && !data && !error}
+    <div class="migrate__execute-approval">
+      <Icon path={mdiCheckDecagramOutline} />
+      <span>Migration Approved</span>
+    </div>
+  {:else if error}
+    <div class="migrate__execute-approval">
+      <Icon path={mdiAlertOutline} />
+      <span>Action has been rejected on the wallet connected.</span>
+    </div>
+  {:else if isLoading || data}
+    <div class="migrate__execute-approval">
+      <Icon path={mdiCheckDecagramOutline} />
+      <span>Migration has been submitted</span>
+    </div>
+  {/if}
+  {#if migrationHash && chain?.blockExplorers}
+    <div class="migrate__execute-notice">
+      <span
+        >Migration takes some minutes to complete. Your transaction is being
+        executed and you can check it <AppAnchor
+          href={`${chain.blockExplorers.default.url}/tx/${migrationHash}`}
+          >here</AppAnchor
+        >.</span
+      >
+    </div>
+  {/if}
+  {#if isLoading || !data || error}
+    <Button
+      text={`${error ? "RETRY" : "EXECUTE"}  MIGRATION`}
+      disabled={!!isLoading}
+      on:click={() => migrationStore.getData(chainId)}
+    />
+  {/if}
+</div>
+
+<style lang="postcss">
+  .migrate__execute {
+    display: flex;
+    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;
+      align-items: center;
+      gap: var(--default-gap);
+      padding: 2.25em 0;
+    }
+  }
+</style>
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
index b084dcf1d2..1e93f532a4 100644
--- a/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
+++ b/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
@@ -1,43 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`GasControls > should render the \`GasControls\` component 1`] = `
-<body>
-  <label
-    class="gas-control svelte-14slcjg"
+<label
+  class="gas-control svelte-14slcjg"
+>
+  <span
+    class="gas-control__label svelte-14slcjg"
   >
-    <span
-      class="gas-control__label svelte-14slcjg"
-    >
-      Price: (lux)
-    </span>
-     
-    <input
-      class="dusk-textbox dusk-textbox-number gas-control__input"
-      max="20"
-      min="1"
-      required=""
-      type="number"
-    />
-    
-  </label>
+    Price: (lux)
+  </span>
    
-  <label
-    class="gas-control svelte-14slcjg"
-  >
-    <span
-      class="gas-control__label svelte-14slcjg"
-    >
-      Gas Limit: (unit)
-    </span>
-     
-    <input
-      class="dusk-textbox dusk-textbox-number gas-control__input"
-      max="100"
-      min="10"
-      required=""
-      type="number"
-    />
-    
-  </label>
-</body>
+  <input
+    class="dusk-textbox dusk-textbox-number gas-control__input"
+    max="20"
+    min="1"
+    required=""
+    type="number"
+  />
+  
+</label>
 `;
diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js
index a4914716ab..6671565e6d 100644
--- a/web-wallet/src/lib/components/index.js
+++ b/web-wallet/src/lib/components/index.js
@@ -3,10 +3,12 @@ export { default as Allocate } from "./Allocate/Allocate.svelte";
 export { default as AppAnchor } from "./AppAnchor/AppAnchor.svelte";
 export { default as AppAnchorButton } from "./AppAnchorButton/AppAnchorButton.svelte";
 export { default as AppImage } from "./AppImage/AppImage.svelte";
+export { default as ApproveMigration } from "./ApproveMigration/ApproveMigration.svelte";
 export { default as Balance } from "./Balance/Balance.svelte";
 export { default as ContractOperations } from "./ContractOperations/ContractOperations.svelte";
 export { default as ContractStatusesList } from "./ContractStatusesList/ContractStatusesList.svelte";
 export { default as DashboardNav } from "./DashboardNav/DashboardNav.svelte";
+export { default as ExecuteMigration } from "./ExecuteMigration/ExecuteMigration.svelte";
 export { default as ExistingWalletNotice } from "./ExistingWalletNotice/ExistingWalletNotice.svelte";
 export { default as GasControls } from "./GasControls/GasControls.svelte";
 export { default as GasFee } from "./GasFee/GasFee.svelte";
diff --git a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
index e1bf7b2727..116942c4d5 100644
--- a/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
+++ b/web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte
@@ -1,133 +1,138 @@
 <svelte:options immutable={true} />
 
 <script>
-  import { AppAnchor, AppImage } from "$lib/components";
+  import { mdiArrowLeft, mdiArrowRight, mdiWalletOutline } from "@mdi/js";
+  import { switchChain } from "@wagmi/core";
+  import { parseUnits } from "viem";
+  import { onDestroy, onMount } from "svelte";
+  import { tokens } from "./tokenConfig";
+  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
+  import {
+    AppAnchor,
+    AppAnchorButton,
+    AppImage,
+    ApproveMigration,
+    ExecuteMigration,
+  } from "$lib/components";
   import {
     Button,
     ExclusiveChoice,
     Icon,
+    Stepper,
     Textbox,
-    Wizard,
-    WizardStep,
   } from "$lib/dusk/components";
-  import {
-    mdiArrowRight,
-    mdiCheckDecagramOutline,
-    mdiInformationOutline,
-    mdiTimerSand,
-    mdiWalletOutline,
-  } from "@mdi/js";
-  import { createCurrencyFormatter } from "$lib/dusk/currency";
   import { logo } from "$lib/dusk/icons";
-  import { calculateAdaptiveCharCount, middleEllipsis } from "$lib/dusk/string";
-  import { onDestroy, onMount } from "svelte";
-  import { settingsStore } from "$lib/stores";
+  import { settingsStore, walletStore } from "$lib/stores";
   import {
     account,
-    accountBalance,
     modal,
     wagmiConfig,
     walletDisconnect,
   } from "$lib/migration/walletConnection";
-  import { switchChain } from "@wagmi/core";
-  import { bsc, mainnet } from "viem/chains";
-
-  const tokens = {
-    bnb: {
-      chainId: bsc.id,
-      name: "BEP-20",
-    },
-    eth: {
-      chainId: mainnet.id,
-      name: "ERC-20",
-    },
-  };
-
-  const options = [
-    { disabled: false, label: tokens.eth.name, value: tokens.eth.name },
-    { disabled: false, label: tokens.bnb.name, value: tokens.bnb.name },
-  ];
-
-  /** @type {String} */
-  let selected = tokens.eth.name;
-
-  /** @type {Boolean} */
+  import { getBalanceOfCoin } from "$lib/migration/migration";
+
+  $: ({ address, chainId, isConnected } = $account);
+  $: ({ currentAddress } = $walletStore);
+  $: isAmountValid =
+    amount >= minAmount &&
+    amount <= Number(parseUnits(connectedWalletBalance, 0));
+
+  const { darkMode, network: migrationNetwork } = $settingsStore;
+
+  /** @type {"mainnet" | "testnet"} */
+  // @ts-ignore
+  const network = migrationNetwork.toLowerCase();
+
+  const { ["ERC-20"]: erc20, ["BEP-20"]: bep20 } = tokens[network];
+
+  const options = ["ERC-20", "BEP-20"];
+
+  const minAmount = 1e-9;
+
+  /** @type {TokenNames} */
+  let selectedChain = erc20.name;
+
+  /** @type {boolean} */
   const migrationInProgress = false;
 
-  /** @type {Number} */
-  let connectedWalletBalance = 1;
+  /** @type {string} */
+  let connectedWalletBalance;
 
-  /** @type {Number | undefined} */
+  /** @type {number} */
   let amount;
 
   /** @type {HTMLInputElement | null} */
   let amountInput;
 
-  /** @type {Boolean} */
+  /** @type {boolean} */
   let isMigrationInitialized = false;
 
-  /** @type {Number} */
-  const gasFee = 1;
-
-  /** @type {Boolean} */
-  let isMigrationBeingApproved = false;
-
-  /** @type {String}*/
-  const estimatedTime = "45 min";
-
   /** @type {number} */
   let screenWidth = window.innerWidth;
 
-  const { darkMode } = $settingsStore;
-  const minAmount = 1e-18;
-
-  $: ({ address, chainId, isConnected } = $account);
+  /** @type {number} */
+  let migrationStep = 0;
 
-  $: maxSpendable = connectedWalletBalance - gasFee;
-  $: isAmountValid =
-    typeof amount === "number"
-      ? amount >= minAmount && amount <= maxSpendable
-      : false;
-  $: ({ language } = $settingsStore);
-  $: duskFormatter = createCurrencyFormatter(language, "DUSK", 9);
+  /** @type {boolean} */
+  let isInputDisabled = false;
 
-  /** @param {Number} id */
+  /**
+   *  Triggers the switchChain event and reverts the ExclusiveChoice UI selected option if an error is thrown
+   *
+   * @param {number} id - the chain id of the desired smart contract
+   */
   async function handleSwitchChain(id) {
     try {
       await switchChain(wagmiConfig, { chainId: id });
+      connectedWalletBalance = await getBalance();
     } catch (e) {
-      selected =
-        chainId === tokens.eth.chainId ? tokens.eth.name : tokens.bnb.name;
+      selectedChain = chainId === erc20.chainId ? erc20.name : bep20.name;
     }
   }
 
+  /** Emits the switchChain event to the thrid-party wallet when the ExclusiveChoice UI is interacted with  */
   // @ts-ignore
-  function onNetworkChange(e) {
-    if (isConnected) {
-      if (e?.target?.value === tokens.bnb.name) {
-        handleSwitchChain(bsc.id);
-      } else {
-        handleSwitchChain(mainnet.id);
-      }
+  async function onChainSwitch(e) {
+    if (!isConnected) {
+      return;
     }
+    const chainIdToSwitchTo =
+      e.target?.value === bep20.name ? bep20.chainId : erc20.chainId;
+    await handleSwitchChain(chainIdToSwitchTo);
   }
 
-  function switchNetwork() {
+  /**
+   * Checks if the chainId of the selected option of ExclusiveChoice UI is different than the chainId of the smart contract in the third-party wallet
+   * and triggers an event to set the chainId if there is a difference
+   */
+  async function switchToSelectedChain() {
     const currentChainId =
-      selected === tokens.eth.name ? tokens.eth.chainId : tokens.bnb.chainId;
+      selectedChain === erc20.name ? erc20.chainId : bep20.chainId;
     if (chainId !== currentChainId) {
-      handleSwitchChain(currentChainId);
+      await handleSwitchChain(currentChainId);
     }
   }
 
+  async function getBalance() {
+    if (!address) {
+      throw new Error("Address is undefined");
+    }
+
+    return await getBalanceOfCoin(
+      address,
+      tokens[network][selectedChain].contract
+    );
+  }
+
+  function incrementStep() {
+    migrationStep++;
+  }
+
   onMount(() => {
-    modal.subscribeEvents((e) => {
+    modal.subscribeEvents(async (e) => {
       if (e.data.event === "CONNECT_SUCCESS") {
-        switchNetwork();
-
-        accountBalance(address).then((balance) => {
-          connectedWalletBalance = Number(balance.value);
-        });
+        switchToSelectedChain();
+        connectedWalletBalance = await getBalance();
       }
     });
 
@@ -144,11 +149,15 @@
     return () => resizeObserver.disconnect();
   });
 
-  onDestroy(async () => {
+  onMount(async () => {
     if (isConnected) {
       await walletDisconnect();
     }
   });
+
+  onDestroy(async () => {
+    await walletDisconnect();
+  });
 </script>
 
 <article class="migrate">
@@ -165,8 +174,8 @@
         <AppImage
           src={darkMode ? "/eth_dusk_light.svg" : "/eth_dusk.svg"}
           alt="Ethereum Dusk"
-          width="20"
-          height="25"
+          width="37"
+          height="27"
         />
       </div>
       <Icon path={mdiArrowRight} />
@@ -188,10 +197,10 @@
     <p class="migrate__token-header">From:</p>
     <ExclusiveChoice
       {options}
-      bind:value={selected}
-      on:change={onNetworkChange}
+      bind:value={selectedChain}
+      on:change={onChainSwitch}
     />
-    {#if isConnected}
+    {#if isConnected && address}
       <p class="migrate__token-header">Connected Wallet:</p>
       <p class="migrate__token-address">
         {address
@@ -199,24 +208,21 @@
           : ""}
       </p>
       <div class="migrate__token-balance">
-        Balance: <span
-          >{duskFormatter(connectedWalletBalance)}
-          {selected} DUSK</span
-        >
+        Balance: <span>{connectedWalletBalance} {selectedChain} DUSK</span>
       </div>
     {/if}
   </div>
 
-  {#if isConnected}
+  {#if isConnected && connectedWalletBalance}
     <div class="migrate__amount">
       <div class="migrate__amount-header">
         <div class="migrate__amount-token">
-          {#if selected === tokens.eth.name}
+          {#if selectedChain === erc20.name}
             <AppImage
               src={darkMode ? "/eth_dusk_light.svg" : "/eth_dusk.svg"}
               alt="Ethereum Dusk"
-              width="20"
-              height="25"
+              width="37"
+              height="27"
             />
           {:else}
             <AppImage
@@ -226,7 +232,7 @@
               height="27"
             />
           {/if}
-          <p class="migrate__amount-currency">DUSK {selected}</p>
+          <p class="migrate__amount-currency">DUSK {selectedChain}</p>
         </div>
 
         <Button
@@ -234,12 +240,13 @@
           variant="tertiary"
           on:click={() => {
             if (amountInput) {
-              amountInput.value = maxSpendable.toString();
+              amountInput.value = connectedWalletBalance;
             }
 
-            amount = maxSpendable;
+            amount = Number(parseUnits(connectedWalletBalance, 0));
           }}
           text="USE MAX"
+          disabled={isInputDisabled}
         />
       </div>
 
@@ -249,127 +256,50 @@
         required
         type="number"
         min={minAmount}
-        max={maxSpendable}
-        step="0.000000001"
+        max={Number(parseUnits(connectedWalletBalance, 0))}
+        step={minAmount}
         placeholder="Amount"
+        disabled={isInputDisabled}
       />
     </div>
   {/if}
 
-  {#if isConnected && !isAmountValid && typeof amount === "number"}
-    <div class="migrate__amount-notice">Not enough balance</div>
-  {/if}
-
   {#if isConnected && isAmountValid && isMigrationInitialized}
-    <div class="migrate__information">
-      <div class="migrate__information-header">
-        <p class="migrate__information-time">
-          <span>
-            Est. Time<Icon
-              path={mdiInformationOutline}
-              data-tooltip-id="main-tooltip"
-              data-tooltip-text="Estimated time of migration"
-            />
-          </span>
-          {estimatedTime}
-        </p>
-        <p class="migrate__information-fee">
-          <span>
-            Total Gas Fee<Icon
-              path={mdiInformationOutline}
-              data-tooltip-id="main-tooltip"
-              data-tooltip-text="Total cost of gas"
-            />
-          </span>
-          {gasFee}
-        </p>
-      </div>
-
-      <Wizard steps={3} let:key>
-        <WizardStep
-          step={0}
-          {key}
-          showStepper={true}
-          hideBackButton={true}
-          nextButton={{
-            action: async () => {
-              isMigrationBeingApproved = true;
-            },
-            disabled: isMigrationBeingApproved,
-            icon: null,
-            label: "APPROVE MIGRATION",
-            variant: "primary",
+    <div class="migrate__wizard">
+      <Stepper steps={2} activeStep={migrationStep} variant="secondary" />
+
+      {#if migrationStep === 0}
+        <ApproveMigration
+          on:incrementStep={incrementStep}
+          on:initApproval={() => {
+            isInputDisabled = true;
           }}
-        >
-          {#if !isMigrationBeingApproved}
-            <div class="migrate__information-notice">
-              <p>DUSK token migration requires two transactions:</p>
-              <ol class="migrate__information-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>
-          {:else}
-            <div class="migrate__information-approval">
-              <Icon path={mdiTimerSand} />
-              <span>Approval in progress</span>
-            </div>
-          {/if}
-        </WizardStep>
-        <WizardStep
-          step={1}
-          {key}
-          hideBackButton={true}
-          showStepper={true}
-          nextButton={{
-            action: async () => {},
-            icon: null,
-            label: "EXECUTE MIGRATION",
-            variant: "primary",
+          on:errorApproval={() => {
+            isInputDisabled = false;
           }}
-        >
-          <div class="migrate__information-approval">
-            <Icon path={mdiCheckDecagramOutline} />
-            <span>Migration Approved</span>
-          </div>
-        </WizardStep>
-        <WizardStep step={2} {key} showStepper={true} showNavigation={false}>
-          <div class="migrate__information-approval">
-            <Icon path={mdiCheckDecagramOutline} />
-            <span>Migration in progress</span>
-          </div>
-          <div class="migrate__information-notice">
-            <span
-              >Migration takes some minutes to complete. Your transaction is
-              being executed and you can check it <AppAnchor href="#"
-                >here</AppAnchor
-              >.</span
-            >
-          </div>
-        </WizardStep>
-      </Wizard>
+          {amount}
+          chainContract={tokens[network][selectedChain].contract}
+          migrationContract={tokens[network][selectedChain].migrationContract}
+        />
+      {:else}
+        <ExecuteMigration
+          {amount}
+          {currentAddress}
+          migrationContract={tokens[network][selectedChain].migrationContract}
+        />
+      {/if}
     </div>
   {/if}
 
   {#if !isConnected}
     <Button
       icon={{ path: mdiWalletOutline }}
-      text={`CONNECT TO  ${selected === tokens.eth.name ? "ETHEREUM" : "BSC"}`}
+      text={`CONNECT TO  ${selectedChain === tokens[network]["ERC-20"].name ? "ETHEREUM" : "BSC"}`}
       on:click={() => {
         modal.open();
       }}
     />
-  {:else if !isMigrationInitialized}
+  {:else if !isMigrationInitialized && address}
     <Button
       text="INITIALIZE MIGRATION"
       on:click={() => {
@@ -379,6 +309,12 @@
     />
   {/if}
 </article>
+<AppAnchorButton
+  href="/dashboard"
+  icon={{ path: mdiArrowLeft }}
+  text="Back"
+  variant="tertiary"
+/>
 
 <style lang="postcss">
   .migrate {
@@ -429,7 +365,7 @@
     &__token-address {
       font-size: 1em;
       font-weight: 500;
-      font-family: "Soehne Mono";
+      font-family: var(--mono-font-family);
       text-align: center;
     }
 
@@ -440,7 +376,7 @@
 
       span {
         font-weight: 500;
-        font-family: "Soehne Mono";
+        font-family: var(--mono-font-family);
       }
     }
 
@@ -452,53 +388,6 @@
     &__amount-currency {
       font-size: 0.875em;
     }
-
-    &__amount-notice {
-      padding: 1em 1.375em;
-      border-radius: 0.675em;
-      border: 1px solid var(--error-color);
-      color: var(--error-color);
-    }
-
-    &__information-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: 1.875em;
-    }
-
-    &__information-header {
-      display: flex;
-      justify-content: space-between;
-      padding-bottom: 1.25em;
-    }
-
-    &__information-time,
-    &__information-fee {
-      display: flex;
-      font-size: 0.875em;
-      align-items: center;
-      gap: var(--small-gap);
-
-      span {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &__information-list {
-      padding-left: 1.375em;
-    }
-
-    &__information-approval {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--default-gap);
-      padding: 2.25em 0;
-    }
   }
 
   :global(.dusk-textbox.migrate__input-field) {
diff --git a/web-wallet/src/lib/containers/MigrateContract/tokenConfig.js b/web-wallet/src/lib/containers/MigrateContract/tokenConfig.js
new file mode 100644
index 0000000000..82386122a0
--- /dev/null
+++ b/web-wallet/src/lib/containers/MigrateContract/tokenConfig.js
@@ -0,0 +1,33 @@
+import { bsc, mainnet, sepolia } from "viem/chains";
+
+/** @type {Tokens} */
+export const tokens = {
+  mainnet: {
+    "BEP-20": {
+      chainId: bsc.id,
+      contract: "0xb2bd0749dbe21f623d9baba856d3b0f0e1bfec9c",
+      migrationContract: "0x",
+      name: "BEP-20",
+    },
+    "ERC-20": {
+      chainId: mainnet.id,
+      contract: "0x940a2db1b7008b6c776d4faaca729d6d4a4aa551",
+      migrationContract: "0x",
+      name: "ERC-20",
+    },
+  },
+  testnet: {
+    "BEP-20": {
+      chainId: sepolia.id,
+      contract: "0xC416f5d2AE6BAec2a23f412Df11166afC35CAba2",
+      migrationContract: "0x9f5d1c067710fc6ed49a6444afd69b64799a57b6",
+      name: "BEP-20",
+    },
+    "ERC-20": {
+      chainId: sepolia.id,
+      contract: "0x92DA9BE2039E818bB78223A6BA7C85CC2b17D8D5",
+      migrationContract: "0x63fd2B12034e108BCe73e8832b7dabC8bd67f738",
+      name: "ERC-20",
+    },
+  },
+};
diff --git a/web-wallet/src/lib/containers/MigrateContract/tokens.d.ts b/web-wallet/src/lib/containers/MigrateContract/tokens.d.ts
new file mode 100644
index 0000000000..43cd5ad808
--- /dev/null
+++ b/web-wallet/src/lib/containers/MigrateContract/tokens.d.ts
@@ -0,0 +1,20 @@
+type HexString = `0x${string}`;
+
+type TokenInfo = {
+  chainId: number;
+  contract: HexString;
+  migrationContract: HexString;
+  name: TokenNames;
+};
+
+type NetworkTokens = {
+  "BEP-20": TokenInfo;
+  "ERC-20": TokenInfo;
+};
+
+type Tokens = {
+  mainnet: NetworkTokens;
+  testnet: NetworkTokens;
+};
+
+type TokenNames = "BEP-20" | "ERC-20";
diff --git a/web-wallet/src/lib/contracts/contract-descriptors.js b/web-wallet/src/lib/contracts/contract-descriptors.js
index 8f450b7794..52ff857ed1 100644
--- a/web-wallet/src/lib/contracts/contract-descriptors.js
+++ b/web-wallet/src/lib/contracts/contract-descriptors.js
@@ -64,4 +64,19 @@ export default [
       },
     ],
   },
+  {
+    disabled:
+      import.meta.env.VITE_CONTRACT_MIGRATE_DISABLED &&
+      import.meta.env.VITE_CONTRACT_MIGRATE_DISABLED === "true",
+    id: "migrate",
+    label: "Migrate",
+    operations: [
+      {
+        disabled: false,
+        id: "connect",
+        label: "Connect",
+        primary: true,
+      },
+    ],
+  },
 ];
diff --git a/web-wallet/src/lib/dusk/promise/__tests__/rejectAfter.spec.js b/web-wallet/src/lib/dusk/promise/__tests__/rejectAfter.spec.js
new file mode 100644
index 0000000000..b170546e09
--- /dev/null
+++ b/web-wallet/src/lib/dusk/promise/__tests__/rejectAfter.spec.js
@@ -0,0 +1,30 @@
+import { afterAll, describe, expect, it, vi } from "vitest";
+
+import { rejectAfter } from "..";
+
+describe("rejectAfter", () => {
+  vi.useFakeTimers();
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("build a promise that rejects with the given error after the chosen delay", async () => {
+    let result;
+
+    const error = new Error("some error message");
+    const delay = 2000;
+
+    rejectAfter(delay, error).catch((r) => {
+      result = r;
+    });
+
+    await vi.advanceTimersByTimeAsync(delay / 2);
+
+    expect(result).toBeUndefined();
+
+    await vi.advanceTimersByTimeAsync(delay / 2);
+
+    expect(result).toBe(error);
+  });
+});
diff --git a/web-wallet/src/lib/dusk/promise/__tests__/resolveAfter.spec.js b/web-wallet/src/lib/dusk/promise/__tests__/resolveAfter.spec.js
new file mode 100644
index 0000000000..0367395ff7
--- /dev/null
+++ b/web-wallet/src/lib/dusk/promise/__tests__/resolveAfter.spec.js
@@ -0,0 +1,30 @@
+import { afterAll, describe, expect, it, vi } from "vitest";
+
+import { resolveAfter } from "..";
+
+describe("resolveAfter", () => {
+  vi.useFakeTimers();
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("build a promise that resolves with the given value after the chosen delay", async () => {
+    let result;
+
+    const value = {};
+    const delay = 2000;
+
+    resolveAfter(delay, value).then((r) => {
+      result = r;
+    });
+
+    await vi.advanceTimersByTimeAsync(delay / 2);
+
+    expect(result).toBeUndefined();
+
+    await vi.advanceTimersByTimeAsync(delay / 2);
+
+    expect(result).toBe(value);
+  });
+});
diff --git a/web-wallet/src/lib/dusk/promise/index.js b/web-wallet/src/lib/dusk/promise/index.js
new file mode 100644
index 0000000000..11f27917e2
--- /dev/null
+++ b/web-wallet/src/lib/dusk/promise/index.js
@@ -0,0 +1,2 @@
+export { default as rejectAfter } from "./rejectAfter";
+export { default as resolveAfter } from "./resolveAfter";
diff --git a/web-wallet/src/lib/dusk/promise/rejectAfter.js b/web-wallet/src/lib/dusk/promise/rejectAfter.js
new file mode 100644
index 0000000000..c31a30ab1f
--- /dev/null
+++ b/web-wallet/src/lib/dusk/promise/rejectAfter.js
@@ -0,0 +1,7 @@
+/** @type {(delay: number, error: Error) => Promise<any>} */
+const rejectAfter = (delay, error) =>
+  new Promise((_, reject) => {
+    setTimeout(() => reject(error), delay);
+  });
+
+export default rejectAfter;
diff --git a/web-wallet/src/lib/dusk/promise/resolveAfter.js b/web-wallet/src/lib/dusk/promise/resolveAfter.js
new file mode 100644
index 0000000000..960d85c285
--- /dev/null
+++ b/web-wallet/src/lib/dusk/promise/resolveAfter.js
@@ -0,0 +1,7 @@
+/** @type {(delay: number, value: any) => Promise<typeof value>} */
+const resolveAfter = (delay, value) =>
+  new Promise((resolve) => {
+    setTimeout(() => resolve(value), delay);
+  });
+
+export default resolveAfter;
diff --git a/web-wallet/src/lib/dusk/svelte-stores/__tests__/createDataStore.spec.js b/web-wallet/src/lib/dusk/svelte-stores/__tests__/createDataStore.spec.js
new file mode 100644
index 0000000000..be0fd696e9
--- /dev/null
+++ b/web-wallet/src/lib/dusk/svelte-stores/__tests__/createDataStore.spec.js
@@ -0,0 +1,351 @@
+import {
+  afterAll,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import { get } from "svelte/store";
+
+import { rejectAfter, resolveAfter } from "$lib/dusk/promise";
+
+import { createDataStore } from "..";
+
+describe("createDataStore", () => {
+  const data1 = { a: 1 };
+  const data2 = { a: 2 };
+  const data3 = { a: 3 };
+  const error = new Error("some error message");
+  const args = [1, "a", new Date()];
+  const dataRetriever = vi.fn().mockResolvedValue(data1);
+
+  /** @type {DataStore} */
+  let dataStore;
+
+  vi.useFakeTimers();
+
+  beforeEach(() => {
+    dataStore = createDataStore(dataRetriever);
+  });
+
+  afterEach(() => {
+    dataRetriever.mockClear();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should create a readable data store and expose `getData` and `reset` as service method", () => {
+    expect(dataRetriever).not.toHaveBeenCalled();
+    expect(dataStore).toHaveProperty("getData", expect.any(Function));
+    expect(dataStore).toHaveProperty("reset", expect.any(Function));
+    expect(dataStore).toHaveProperty("subscribe", expect.any(Function));
+    expect(dataStore).not.toHaveProperty("set");
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: false,
+    });
+  });
+
+  it("should set the loading property to `true` when `getData` is called and then fill the data and set loading to `false` if the promise resolves", async () => {
+    const expectedState = {
+      data: data1,
+      error: null,
+      isLoading: false,
+    };
+    const dataPromise = dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(1);
+    expect(dataRetriever).toHaveBeenCalledWith(...args);
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: true,
+    });
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+  });
+
+  it("should set the loading property to `true` when `getData` is called and then set the error and the loading to `false` if the promise rejects", async () => {
+    dataRetriever.mockRejectedValueOnce(error);
+
+    const expectedState = {
+      data: null,
+      error,
+      isLoading: false,
+    };
+    const dataPromise = dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(1);
+    expect(dataRetriever).toHaveBeenCalledWith(...args);
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: true,
+    });
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+  });
+
+  it("should ignore the previous call if `getData` is called while the promise is still pending", async () => {
+    // test the first promise as success
+    dataRetriever
+      .mockImplementationOnce(() => resolveAfter(1000, data1))
+      .mockResolvedValueOnce(data2);
+
+    /** @type {DataStoreContent} */
+    let expectedState = {
+      data: data2,
+      error: null,
+      isLoading: false,
+    };
+
+    dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(1);
+    expect(dataRetriever).toHaveBeenCalledWith(...args);
+
+    let dataPromise = dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(2);
+    expect(dataRetriever).toHaveBeenNthCalledWith(2, ...args);
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // waiting for the first promise to resolve
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // test the first promise as failure
+    dataRetriever
+      .mockImplementationOnce(() => rejectAfter(1000, error))
+      .mockResolvedValueOnce(data3);
+
+    dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(3);
+    expect(dataRetriever).toHaveBeenNthCalledWith(3, ...args);
+
+    expectedState = {
+      data: data3,
+      error: null,
+      isLoading: false,
+    };
+    dataPromise = dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(4);
+    expect(dataRetriever).toHaveBeenNthCalledWith(4, ...args);
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // waiting for the first promise to resolve
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // test the first promise as success and the second one as failure
+    dataRetriever
+      .mockImplementationOnce(() => resolveAfter(1000, data1))
+      .mockRejectedValueOnce(error);
+
+    dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(5);
+    expect(dataRetriever).toHaveBeenNthCalledWith(5, ...args);
+
+    expectedState = {
+      data: null,
+      error,
+      isLoading: false,
+    };
+    dataPromise = dataStore.getData(...args);
+
+    expect(dataRetriever).toHaveBeenCalledTimes(6);
+    expect(dataRetriever).toHaveBeenNthCalledWith(6, ...args);
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // waiting for the first promise to resolve
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(get(dataStore)).toStrictEqual(expectedState);
+  });
+
+  it("should clear the error and leave the existing data while the promise is pending and clear the data when it ends with a failure", async () => {
+    dataRetriever.mockRejectedValueOnce(error);
+
+    /** @type {DataStoreContent} */
+    let expectedState = {
+      data: null,
+      error,
+      isLoading: false,
+    };
+    let dataPromise = dataStore.getData();
+
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: true,
+    });
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    expectedState = {
+      data: data1,
+      error: null,
+      isLoading: false,
+    };
+    dataPromise = dataStore.getData();
+
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: true,
+    });
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    dataRetriever.mockRejectedValueOnce(error);
+
+    expectedState = {
+      data: null,
+      error,
+      isLoading: false,
+    };
+    dataPromise = dataStore.getData();
+
+    expect(get(dataStore)).toStrictEqual({
+      data: data1,
+      error: null,
+      isLoading: true,
+    });
+
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+  });
+
+  it("should expose a `reset` method to reset the data to its initial state", async () => {
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: false,
+    });
+
+    await dataStore.getData(...args);
+
+    expect(get(dataStore)).toStrictEqual({
+      data: data1,
+      error: null,
+      isLoading: false,
+    });
+
+    dataStore.reset();
+
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: false,
+    });
+
+    dataRetriever.mockRejectedValueOnce(error);
+
+    await dataStore.getData(...args);
+
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error,
+      isLoading: false,
+    });
+
+    dataStore.reset();
+
+    expect(get(dataStore)).toStrictEqual({
+      data: null,
+      error: null,
+      isLoading: false,
+    });
+  });
+
+  it("should ignore the pending promise when `reset` is called and have `getData` return the reset store", async () => {
+    const expectedInitialState = {
+      data: null,
+      error: null,
+      isLoading: false,
+    };
+
+    await dataStore.getData(...args);
+
+    let dataPromise = dataStore.getData(...args);
+
+    expect(get(dataStore)).toStrictEqual({
+      data: data1,
+      error: null,
+      isLoading: true,
+    });
+
+    dataStore.reset();
+
+    expect(await dataPromise).toStrictEqual(expectedInitialState);
+    expect(get(dataStore)).toStrictEqual(expectedInitialState);
+
+    await dataStore.getData(...args);
+
+    dataRetriever.mockRejectedValueOnce(error);
+    dataPromise = dataStore.getData(...args);
+
+    expect(get(dataStore)).toStrictEqual({
+      data: data1,
+      error: null,
+      isLoading: true,
+    });
+
+    dataStore.reset();
+
+    expect(await dataPromise).toStrictEqual(expectedInitialState);
+    expect(get(dataStore)).toStrictEqual(expectedInitialState);
+  });
+
+  it("should ignore the pending promise when `reset` is called and a `getData` is called immediately afterwards and return the new result", async () => {
+    const expectedState = {
+      data: data2,
+      error: null,
+      isLoading: false,
+    };
+
+    dataRetriever
+      .mockImplementationOnce(() => resolveAfter(1000, data1))
+      .mockResolvedValueOnce(data2);
+
+    dataStore.getData(...args);
+    dataStore.reset();
+
+    const dataPromise = dataStore.getData(...args);
+
+    expect(await dataPromise).toStrictEqual(expectedState);
+    expect(get(dataStore)).toStrictEqual(expectedState);
+
+    // waiting for the first promise to resolve
+    await vi.advanceTimersToNextTimerAsync();
+
+    expect(get(dataStore)).toStrictEqual(expectedState);
+  });
+});
diff --git a/web-wallet/src/lib/dusk/svelte-stores/createDataStore.js b/web-wallet/src/lib/dusk/svelte-stores/createDataStore.js
new file mode 100644
index 0000000000..a8ea73d720
--- /dev/null
+++ b/web-wallet/src/lib/dusk/svelte-stores/createDataStore.js
@@ -0,0 +1,78 @@
+import { get, writable } from "svelte/store";
+
+import { getErrorFrom } from "$lib/dusk/error";
+
+/**
+ * @param {(...args: any) => Promise<any>} dataRetriever
+ * @returns {DataStore}
+ */
+function createDataStore(dataRetriever) {
+  /** @type {DataStoreContent} */
+  const initialState = {
+    data: null,
+    error: null,
+    isLoading: false,
+  };
+
+  const dataStore = writable(initialState);
+  const { set, subscribe, update } = dataStore;
+
+  /** @type {number} */
+  let currentRetrieveId = 0;
+
+  /** @type {(...args: Parameters<dataRetriever>) => Promise<DataStoreContent>} */
+  const getData = (...args) => {
+    const retrieveId = ++currentRetrieveId;
+
+    update((store) => ({ ...store, error: null, isLoading: true }));
+
+    return dataRetriever(...args)
+      .then((data) => {
+        if (retrieveId === currentRetrieveId) {
+          const newStoreContent = { data, error: null, isLoading: false };
+
+          set(newStoreContent);
+
+          return newStoreContent;
+        } else {
+          return get(dataStore);
+        }
+      })
+      .catch(
+        /** @param {any} error */
+        (error) => {
+          if (retrieveId === currentRetrieveId) {
+            const newStoreContent = {
+              data: null,
+              error: getErrorFrom(error),
+              isLoading: false,
+            };
+
+            set(newStoreContent);
+
+            return newStoreContent;
+          } else {
+            return get(dataStore);
+          }
+        }
+      );
+  };
+
+  const reset = () => {
+    /**
+     * We don't want pending promises to be written
+     * in the store, and we don't want id clashes
+     * if `getData` is called immediately after `reset`.
+     */
+    currentRetrieveId++;
+    set(initialState);
+  };
+
+  return {
+    getData,
+    reset,
+    subscribe,
+  };
+}
+
+export default createDataStore;
diff --git a/web-wallet/src/lib/dusk/svelte-stores/index.js b/web-wallet/src/lib/dusk/svelte-stores/index.js
new file mode 100644
index 0000000000..aebe78fff8
--- /dev/null
+++ b/web-wallet/src/lib/dusk/svelte-stores/index.js
@@ -0,0 +1 @@
+export { default as createDataStore } from "./createDataStore";
diff --git a/web-wallet/src/lib/dusk/svelte-stores/svelte-stores.d.ts b/web-wallet/src/lib/dusk/svelte-stores/svelte-stores.d.ts
new file mode 100644
index 0000000000..72c0fb245a
--- /dev/null
+++ b/web-wallet/src/lib/dusk/svelte-stores/svelte-stores.d.ts
@@ -0,0 +1,10 @@
+type DataStoreContent = {
+  data: any;
+  error: Error | null;
+  isLoading: boolean;
+};
+
+type DataStore = Readable<DataStoreContent> & {
+  getData: (...args: any) => Promise<DataStoreContent>;
+  reset: () => void;
+};
diff --git a/web-wallet/src/lib/migration/abi/erc_bep_duskABI.json b/web-wallet/src/lib/migration/abi/erc_bep_20.json
similarity index 100%
rename from web-wallet/src/lib/migration/abi/erc_bep_duskABI.json
rename to web-wallet/src/lib/migration/abi/erc_bep_20.json
diff --git a/web-wallet/src/lib/migration/migration.js b/web-wallet/src/lib/migration/migration.js
new file mode 100644
index 0000000000..d8788fa761
--- /dev/null
+++ b/web-wallet/src/lib/migration/migration.js
@@ -0,0 +1,121 @@
+import { readContract, simulateContract, writeContract } from "@wagmi/core";
+import { formatUnits, parseUnits } from "viem";
+import ERC20Abi from "./abi/erc_bep_20.json";
+import migrationABI from "./abi/migrationABI.json";
+import { wagmiConfig } from "./walletConnection";
+
+const stableCoinDecimals = 18;
+
+/**
+ * Retrieves the allowance amount for a stable coin for a given spender and account.
+ *
+ * @param {HexString} userAddress - The address of the user to check if it gave an allowance to the migration contract.
+ * @param {HexString} stableCoinAddress - contract address for the coin.
+ * @param {HexString} migrationContract - migration contract address for the the coin.
+ * @returns {Promise<string>} - A promise that resolves to the allowed amount.
+ * @throws {Error} - Throws an error if there is an issue with retrieving the allowance.
+ */
+export const allowance = async (
+  userAddress,
+  stableCoinAddress,
+  migrationContract
+) => {
+  try {
+    const balance = /** @type {bigint} */ (
+      await readContract(wagmiConfig, {
+        abi: ERC20Abi,
+        address: stableCoinAddress,
+        args: [userAddress, migrationContract],
+        functionName: "allowance",
+      })
+    );
+    return formatUnits(balance, stableCoinDecimals);
+  } catch (e) {
+    const errorMessage =
+      e instanceof Error
+        ? `An error occurred while checking the spender ${e.message}`
+        : "An unexpected error occurred while checking the spender";
+    throw new Error(errorMessage);
+  }
+};
+
+/**
+ * Approves a spender to transfer a specified amount of stable coin on behalf of the caller.
+ *
+ * @param {string} value - The amount of stable coin to approve.
+ * @param {HexString} stableCoinAddress - contract address for the coin.
+ * @param {HexString} migrationContract - migration contract address for the the coin.
+ * @returns {Promise<string>} - Transaction hash.
+ * @throws {Error} - Throws an error if there is an issue with the approval transaction.
+ */
+export const approve = async (migrationContract, stableCoinAddress, value) => {
+  try {
+    const convertedValue = parseUnits(value, stableCoinDecimals);
+    return await writeContract(wagmiConfig, {
+      abi: ERC20Abi,
+      address: stableCoinAddress,
+      args: [migrationContract, convertedValue],
+      functionName: "approve",
+    });
+  } catch (e) {
+    const errorMessage =
+      e instanceof Error
+        ? `An error occurred while approving the stable coin ${e.message}`
+        : "An unexpected error occurred while approving the stable coin";
+    throw new Error(errorMessage);
+  }
+};
+
+/**
+ * Retrieves the balance of the stable coin for a given account.
+ *
+ * @param {HexString} userAddress - The address of the account to check the balance for.
+ * @param {HexString} stableCoinAddress - contract address for the coin.
+ * @returns {Promise<string>} - A promise that resolves to the balance of the stable coin.
+ * @throws {Error} - Throws an error if there is an issue with retrieving the balance.
+ */
+export const getBalanceOfCoin = async (userAddress, stableCoinAddress) => {
+  try {
+    const balance = /** @type {bigint} */ (
+      await readContract(wagmiConfig, {
+        abi: ERC20Abi,
+        address: stableCoinAddress,
+        args: [userAddress],
+        functionName: "balanceOf",
+      })
+    );
+    return formatUnits(balance, stableCoinDecimals);
+  } catch (e) {
+    const errorMessage =
+      e instanceof Error
+        ? `An error occurred while checking the spender ${e.message}`
+        : "An unknown error occurred while checking the spender";
+    throw new Error(errorMessage);
+  }
+};
+
+/**
+ *  Migrates the approved amount to the given account
+ *
+ * @param {string} amount - the amount to be migrated
+ * @param {number} chainId - the id of the smart contract
+ * @param {string} mainnetDuskAddress - the wallet address where tokens should be migrated to
+ * @param {HexString} migrationContract - the migration contract address
+ * @returns {Promise<HexString>} - The transaction hash.
+ */
+export const migrate = async (
+  amount,
+  chainId,
+  mainnetDuskAddress,
+  migrationContract
+) => {
+  const { request } = await simulateContract(wagmiConfig, {
+    abi: migrationABI,
+    address: migrationContract,
+    args: [parseUnits(amount, 18), mainnetDuskAddress],
+    chainId: chainId,
+    functionName: "migrate",
+  });
+
+  return await writeContract(wagmiConfig, request);
+};
diff --git a/web-wallet/src/lib/migration/walletConnection.js b/web-wallet/src/lib/migration/walletConnection.js
index 83e7accf99..9fe2dabf94 100644
--- a/web-wallet/src/lib/migration/walletConnection.js
+++ b/web-wallet/src/lib/migration/walletConnection.js
@@ -1,7 +1,13 @@
 import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi";
-import { disconnect, getAccount, getBalance, watchAccount } from "@wagmi/core";
+import {
+  disconnect,
+  getAccount,
+  getBalance,
+  reconnect,
+  watchAccount,
+} from "@wagmi/core";
 import { readable } from "svelte/store";
-import { bsc, mainnet } from "viem/chains";
+import { bsc, mainnet, sepolia } from "viem/chains";
 
 // Required project metadata
 const projectId = "b5303e1c8374b100fbb7f181884fef28";
@@ -12,14 +18,15 @@ const metadata = {
   url: "https://127.0.0.1:5173/dashboard/",
 };
 
-/** @type {[import("viem").Chain, import("viem").Chain]} */
-const chains = [mainnet, bsc];
+/** @type {[import("viem").Chain, import("viem").Chain, import("viem").Chain]} */
+const chains = [sepolia, bsc, mainnet];
 
 export const wagmiConfig = defaultWagmiConfig({
   chains,
   metadata,
   projectId,
 });
+reconnect(wagmiConfig);
 
 // Create the Web3 modal with the WAGMI config
 export const modal = createWeb3Modal({
@@ -36,7 +43,7 @@ export const modal = createWeb3Modal({
 // of the app itself
 export const account = readable(getAccount(wagmiConfig), (set) => {
   watchAccount(wagmiConfig, {
-    onChange: (newAccount) => {
+    onChange(newAccount) {
       set(newAccount);
     },
   });
diff --git a/web-wallet/src/routes/(app)/dashboard/+page.svelte b/web-wallet/src/routes/(app)/dashboard/+page.svelte
index e2b3a6b213..1c5c8c1bc1 100644
--- a/web-wallet/src/routes/(app)/dashboard/+page.svelte
+++ b/web-wallet/src/routes/(app)/dashboard/+page.svelte
@@ -7,6 +7,7 @@
     mdiArrowTopRight,
     mdiContain,
     mdiDatabaseOutline,
+    mdiSwapHorizontal,
     mdiSwapVertical,
     mdiSync,
   } from "@mdi/js";
@@ -40,6 +41,9 @@
       case "transfer":
         icons = [{ path: mdiSwapVertical }];
         break;
+      case "migrate":
+        icons = [{ path: mdiSwapHorizontal }];
+        break;
       default:
         break;
     }
diff --git a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
index f6a93f7fd6..e9e8faf5ad 100644
--- a/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(app)/dashboard/__tests__/__snapshots__/page.spec.js.snap
@@ -129,6 +129,36 @@ exports[`Dashboard > should render a card when there is an error getting transac
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    
@@ -321,6 +351,36 @@ exports[`Dashboard > should render the dashboard page with the transactions afte
         </a>
          
       </li>
+      <li>
+        <a
+          class="dusk-anchor dusk-anchor--on-surface dashboard-nav-list__item"
+          href="migrate"
+        >
+          <span
+            class="dashboard-nav-item-label svelte-5szabu"
+          >
+            Migrate
+          </span>
+           
+          <span
+            class="dashboard-nav-item-icons svelte-5szabu"
+          >
+            
+            <svg
+              class="dusk-icon dusk-icon--size--default"
+              role="graphics-symbol"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z"
+              />
+            </svg>
+            
+          </span>
+          
+        </a>
+         
+      </li>
     </ul>
   </nav>
    
diff --git a/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte b/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte
new file mode 100644
index 0000000000..dce01fac0e
--- /dev/null
+++ b/web-wallet/src/routes/(app)/dashboard/migrate/+page.svelte
@@ -0,0 +1,21 @@
+<svelte:options immutable={true} />
+
+<script>
+  import { onDestroy } from "svelte";
+  import { MigrateContract } from "$lib/containers";
+  import { operationsStore } from "$lib/stores";
+
+  /** @param {string} id */
+  function updateOperation(id) {
+    operationsStore.update((store) => ({
+      ...store,
+      currentOperation: id,
+    }));
+  }
+
+  onDestroy(() => {
+    updateOperation("");
+  });
+</script>
+
+<MigrateContract />
diff --git a/web-wallet/vite-setup.js b/web-wallet/vite-setup.js
index 12341f1091..6e0231abd1 100644
--- a/web-wallet/vite-setup.js
+++ b/web-wallet/vite-setup.js
@@ -13,6 +13,10 @@ import "vitest-canvas-mock";
 import { IntersectionObserver } from "./src/lib/dusk/mocks";
 import Wallet from "./__mocks__/Wallet.js";
 
+// Mock wallet connection modules
+vi.mock("@wagmi/core");
+vi.mock("@web3modal/wagmi");
+
 // Mocking the Wallet
 vi.doMock("@dusk-network/dusk-wallet-js", () => ({ Wallet }));
 
diff --git a/web-wallet/vite.config.js b/web-wallet/vite.config.js
index 7029f9f94c..f2f1b8c61b 100644
--- a/web-wallet/vite.config.js
+++ b/web-wallet/vite.config.js
@@ -49,6 +49,7 @@ export default defineConfig(({ mode }) => {
         TESTNET_PROVER_NODE: env.VITE_TESTNET_PROVER_NODE,
         TRANSFER_CONTRACT: env.VITE_TRANSFER_CONTRACT,
         VITE_CONTRACT_ALLOCATE_DISABLED: env.VITE_CONTRACT_ALLOCATE_DISABLED,
+        VITE_CONTRACT_MIGRATE_DISABLED: env.VITE_CONTRACT_MIGRATE_DISABLED,
         VITE_CONTRACT_STAKE_DISABLED: env.VITE_CONTRACT_STAKE_DISABLED,
         VITE_CONTRACT_TRANSFER_DISABLED: env.VITE_CONTRACT_TRANSFER_DISABLED,
         VITE_GAS_LIMIT_DEFAULT: env.VITE_GAS_LIMIT_DEFAULT,
@@ -98,6 +99,7 @@ export default defineConfig(({ mode }) => {
         TRANSFER_CONTRACT:
           "0100000000000000000000000000000000000000000000000000000000000000",
         VITE_CONTRACT_ALLOCATE_DISABLED: "false",
+        VITE_CONTRACT_MIGRATE_DISABLED: "false",
         VITE_CONTRACT_STAKE_DISABLED: "false",
         VITE_CONTRACT_TRANSFER_DISABLED: "false",
         VITE_GAS_LIMIT_DEFAULT: "20000000",