Merge pull request #22 from nemmtor/feature/migrate-to-wallet-connect

feat: migrate to wallet connect modal sdk

package.json

@@ -8,22 +8,21 @@
     "buildProd": "webpack --mode=production"
   },
   "dependencies": {
-    "@depay/coinbase-wallet-sdk": "^1.0.5",
-    "@magic-ext/connect": "^3.1.0",
+    "@web3modal/ethers5": "^3.5.3",
     "alchemy-sdk": "^2.0.2",
     "fast-creator": "^1.6.0",
-    "idriss-crypto": "^1.9.0",
-    "magic-sdk": "^10.1.0",
-    "web3": "^1.7.0",
-    "web3modal": "^1.9.7"
+    "idriss-crypto": "link:../ts-library",
+    "web3": "^1.7.0"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.4.0",
-    "ethers": "^5.6.9",
+    "ethers": "5.7.2",
     "mpts-loader": "^1.0.0",
     "sass": "^1.43.2",
     "sass-loader": "^13.0.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.59.0",
     "webpack-cli": "^4.9.1"
@@ -35,6 +34,5 @@
     "./sendToAnyoneUtils": "./dist/sendToAnyoneUtils.mjs",
     "./sendToAnyoneStyle": "./dist/sendToAnyoneStyle.mjs",
     "./getWeb3Provider": "./dist/getWeb3Provider.mjs"
-
   }
 }

src/getWeb3Provider.ts

@@ -0,0 +1,28 @@
+import { createModal } from "./modal";
+import {
+    type CombinedProvider,
+    type Provider,
+} from "@web3modal/scaffold-utils/ethers";
+
+const modal = createModal();
+
+export async function getProvider() {
+    // web3modal sdk "caches" the connection but we disconnect user on purpose every time he re-visits the page
+    if (modal.getIsConnected()) {
+        modal.disconnect();
+    }
+    modal.open();
+
+    // await for provider event
+    // TODO: add some timeout so it's not a never ending promise
+    const provider: CombinedProvider | Provider = await new Promise((res) => {
+        modal.subscribeProvider((providerEvent) => {
+            if (providerEvent.isConnected && providerEvent.provider) {
+                return res(providerEvent.provider);
+            }
+        });
+    });
+
+    modal.close();
+    return provider;
+}

src/global.d.ts

@@ -0,0 +1,7 @@
+// This file declares types for global variables injected via webpack
+// Add more variables here when migrating other files to typescript and seeing type errors.
+// TODO: implement better way for injecting environment variables
+declare const POLYGON_CHAIN_ID: string;
+declare const POLYGON_BLOCK_EXPLORER_ADDRESS: string;
+declare const POLYGON_RPC_ENDPOINT: string;
+declare const WALLET_CONNECT_ID: string;

src/modal/constants.ts

@@ -0,0 +1,25 @@
+// Required by web3modal, it is also visible in Metamask mobile app in confirmation popups etc.
+export const metadata = {
+  name: "IDriss",
+  description: "IDriss",
+  url: "https://idriss.xyz/",
+  icons: ["https://www.idriss.xyz/static/images/IDriss_Logo.svg"],
+};
+
+// we don't allow to switch chains anyway because the modal is only used for connection purposes but the library still requires at least 1 chain, chain switching is handled internally in our code.
+export const chains = [
+  {
+    chainId: Number(POLYGON_CHAIN_ID),
+    name: "Polygon",
+    currency: "MATIC",
+    explorerUrl: POLYGON_BLOCK_EXPLORER_ADDRESS,
+    rpcUrl: POLYGON_RPC_ENDPOINT,
+  },
+];
+
+export const desktopFeaturedWalletIds = [
+  "cf14642fb8736a99b733ada71863241c823743b16e2a822b3dba24e2fa25014d",
+  "fd20dc426fb37566d803205b19bbc1d4096b248ac04548e3cfb6b3a38bd033aa",
+  "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709",
+];
+export const mobileFeaturedWalletIds = [];

src/modal/index.ts

@@ -0,0 +1 @@
+export { createModal } from "./modal";

src/modal/modal.ts

@@ -0,0 +1,15 @@
+import { defaultConfig, createWeb3Modal } from "@web3modal/ethers5";
+
+import { metadata, chains } from "./constants";
+import { getFeaturedWalletIds } from "./utils"
+
+export const createModal = () => {
+  return createWeb3Modal({
+    ethersConfig: defaultConfig({
+      metadata,
+    }),
+    chains,
+    featuredWalletIds: getFeaturedWalletIds(),
+    projectId: WALLET_CONNECT_ID,
+  });
+};

src/modal/utils.ts

@@ -0,0 +1,7 @@
+import { isDesktop } from "../utils";
+
+import { desktopFeaturedWalletIds, mobileFeaturedWalletIds } from "./constants";
+
+export const getFeaturedWalletIds = () => {
+  return isDesktop() ? desktopFeaturedWalletIds : mobileFeaturedWalletIds;
+};

src/sendToAnyoneLogic.js

@@ -113,6 +113,7 @@ export const SendToAnyoneLogic = {
         const web3 = new Web3(this.provider);
         // all values are injected by webpack based on the environment
         this.idriss = new IdrissCrypto(this.provider.host ?? POLYGON_RPC_ENDPOINT, {
+            providerType: 'ethersv5',
             web3Provider: this.provider,
             sendToAnyoneContractAddress: SEND_TO_ANYONE_CONTRACT_ADDRESS,
             idrissRegistryContractAddress: IDRISS_REGISTRY_CONTRACT_ADDRESS,