Merge pull request #3130 from dusk-network/feature-3129

web-wallet: Upgrade Migration Feature to Use Reown AppKit

web-wallet/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Update Transactions list design [#1922]
 - Reword "Staking" header to "Stake" [#3113]
+- Upgrade Migration Feature to Use Reown AppKit [#3129]
 
 ### Removed
 
@@ -422,6 +423,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3098]: https://github.com/dusk-network/rusk/issues/3098
 [#3099]: https://github.com/dusk-network/rusk/issues/3099
 [#3113]: https://github.com/dusk-network/rusk/issues/3113
+[#3129]: https://github.com/dusk-network/rusk/issues/3129
 
 <!-- VERSIONS -->
 

web-wallet/package.json

@@ -37,16 +37,14 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.5",
     "@mdi/js": "7.4.47",
-    "@wagmi/connectors": "5.1.6",
-    "@wagmi/core": "2.13.4",
-    "@web3modal/wagmi": "5.1.0",
+    "@reown/appkit": "1.5.3",
+    "@reown/appkit-adapter-wagmi": "1.5.3",
     "bip39": "3.1.0",
     "css-doodle": "0.39.2",
     "dexie": "4.0.8",
     "lamb": "0.61.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
-    "viem": "2.19.8",
     "web-streams-polyfill": "4.0.0"
   },
   "devDependencies": {

web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte

@@ -113,7 +113,7 @@
     }
   }
 
-  /** Emits the switchChain event to the thrid-party wallet when the ExclusiveChoice UI is interacted with  */
+  /** Emits the switchChain event to the third-party wallet when the ExclusiveChoice UI is interacted with  */
   // @ts-ignore
   async function onChainSwitch(e) {
     if (!isConnected) {
@@ -295,7 +295,9 @@
       </div>
 
       <Textbox
-        className="migrate__input-field"
+        className="migrate__input-field {!isAmountValid
+          ? 'migrate__input-field--invalid'
+          : ''}"
         bind:value={amount}
         required
         type="text"
@@ -442,4 +444,8 @@
   :global(.dusk-textbox.migrate__input-field) {
     background-color: var(--non-button-control-bg-color);
   }
+
+  :global(.dusk-textbox.migrate__input-field--invalid) {
+    color: var(--error-color);
+  }
 </style>

web-wallet/src/lib/migration/migration.js

@@ -18,19 +18,18 @@ export const allowance = async (
   migrationContract
 ) => {
   try {
-    const balance = /** @type {bigint} */ (
+    return /** @type {bigint} */ (
       await readContract(wagmiConfig, {
         abi: ERC20Abi,
         address: stableCoinAddress,
         args: [userAddress, migrationContract],
         functionName: "allowance",
       })
     );
-    return balance;
   } catch (e) {
     const errorMessage =
       e instanceof Error
-        ? `An error occurred while checking the spender ${e.message}`
+        ? `An error occurred while checking the spender: ${e.message}`
         : "An unexpected error occurred while checking the spender";
     throw new Error(errorMessage);
   }
@@ -56,7 +55,7 @@ export const approve = async (migrationContract, stableCoinAddress, value) => {
   } catch (e) {
     const errorMessage =
       e instanceof Error
-        ? `An error occurred while approving the stable coin ${e.message}`
+        ? `An error occurred while approving the stable coin: ${e.message}`
         : "An unexpected error occurred while approving the stable coin";
     throw new Error(errorMessage);
   }
@@ -72,24 +71,22 @@ export const approve = async (migrationContract, stableCoinAddress, value) => {
  */
 export const getBalanceOfCoin = async (userAddress, stableCoinAddress) => {
   try {
-    const balance = /** @type {bigint} */ (
+    return /** @type {bigint} */ (
       await readContract(wagmiConfig, {
         abi: ERC20Abi,
         address: stableCoinAddress,
         args: [userAddress],
         functionName: "balanceOf",
       })
     );
-    return balance;
   } catch (e) {
     const errorMessage =
       e instanceof Error
-        ? `An error occurred while checking the spender ${e.message}`
+        ? `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
  *

web-wallet/src/lib/migration/walletConnection.js

@@ -1,4 +1,7 @@
-import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi";
+import { createAppKit } from "@reown/appkit";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+// eslint-disable-next-line import/no-unresolved
+import { bsc, mainnet, sepolia } from "@reown/appkit/networks";
 import {
   disconnect,
   getAccount,
@@ -7,7 +10,6 @@ import {
   watchAccount,
 } from "@wagmi/core";
 import { readable } from "svelte/store";
-import { bsc, mainnet, sepolia } from "viem/chains";
 
 // Required project metadata
 const projectId = "b5303e1c8374b100fbb7f181884fef28";
@@ -18,26 +20,31 @@ const metadata = {
   url: "https://127.0.0.1:5173/dashboard/",
 };
 
-/** @type {[import("viem").Chain, import("viem").Chain, import("viem").Chain]} */
-const chains = [sepolia, bsc, mainnet];
+/** @typedef {import("@reown/appkit/networks").AppKitNetwork} AppKitNetwork */
+/** @type {[AppKitNetwork, ...AppKitNetwork[]]} */
+const networks = [sepolia, bsc, mainnet];
 
-export const wagmiConfig = defaultWagmiConfig({
-  auth: { email: false },
-  chains,
-  metadata,
+const wagmiAdapter = new WagmiAdapter({
+  networks,
   projectId,
 });
+
+export const wagmiConfig = wagmiAdapter.wagmiConfig;
+
 reconnect(wagmiConfig);
 
 // Create the Web3 modal with the WAGMI config
-export const modal = createWeb3Modal({
-  allowUnsupportedChain: false,
-  enableAnalytics: false,
-  enableOnramp: false,
-  enableSwaps: false,
+export const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  features: {
+    analytics: false,
+    onramp: false,
+    swaps: false,
+  },
+  metadata,
+  networks,
   projectId,
   themeMode: "dark",
-  wagmiConfig,
 });
 
 // Svelte store to track the current account, and update if a new account is set
@@ -53,6 +60,9 @@ export const account = readable(getAccount(wagmiConfig), (set) => {
 
 /** @param {*} address */
 export const accountBalance = (address) =>
-  getBalance(wagmiConfig, { address: address, blockTag: "latest" });
+  getBalance(wagmiConfig, {
+    address: address,
+    blockTag: "latest",
+  });
 
 export const walletDisconnect = () => disconnect(wagmiConfig);

web-wallet/vite-setup.js

@@ -20,8 +20,7 @@ import "fake-indexeddb/auto";
 import { IntersectionObserver } from "./src/lib/dusk/mocks";
 
 // Mocking wallet connection modules
-vi.mock("@wagmi/core");
-vi.mock("@web3modal/wagmi");
+vi.mock("@reown/appkit");
 
 vi.mock("./src/lib/vendor/w3sper.js/src/protocol-driver/mod", async () => ({
   ...(await import("./src/__mocks__/ProtocolDriver.js")),