feat(typink): add support for the WalletConnect protocol

examples/demo-inkv5/.eslintrc.cjs

@@ -1,19 +1,13 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    "@typescript-eslint/no-explicit-any": "off"
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-expressions': 'off',
   },
-}
+};

examples/demo-inkv5/src/main.tsx

@@ -6,26 +6,25 @@ import App from '@/App';
 import { theme } from '@/theme';
 import { deployments } from '@/contracts/deployments';
 import {
-  alephZeroTestnet,
-  development,
+  alephZero,
   ExtensionWallet,
   polkadotjs,
-  popTestnet,
   ReactToastifyAdapter,
   setupTxToaster,
   subwallet,
   talisman,
   TypinkProvider,
+  walletConnect,
 } from 'typink';
 import { toast } from 'react-toastify';
 
 setupTxToaster({ adapter: new ReactToastifyAdapter(toast) });
 
 const DEFAULT_CALLER = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'; // Alice
-const SUPPORTED_NETWORK = [popTestnet, alephZeroTestnet];
-if (process.env.NODE_ENV === 'development') {
-  SUPPORTED_NETWORK.push(development);
-}
+const SUPPORTED_NETWORK = [alephZero];
+// if (process.env.NODE_ENV === 'development') {
+//   SUPPORTED_NETWORK.push(development);
+// }
 
 const enkrypt = new ExtensionWallet({
   name: 'Enkrypt',
@@ -43,9 +42,9 @@ function Root() {
         deployments={deployments}
         defaultCaller={DEFAULT_CALLER}
         supportedNetworks={SUPPORTED_NETWORK}
-        defaultNetworkId={popTestnet.id}
+        defaultNetworkId={alephZero.id}
         cacheMetadata={true}
-        wallets={[subwallet, talisman, polkadotjs, enkrypt]}>
+        wallets={[subwallet, talisman, polkadotjs, enkrypt, walletConnect]}>
         <App />
         <ToastContainer
           position='top-right'

packages/typink/package.json

@@ -19,6 +19,9 @@
   },
   "dependencies": {
     "@substrate/connect-known-chains": "^1.10.3",
+    "@walletconnect/modal": "^2.7.0",
+    "@walletconnect/types": "^2.22.4",
+    "@walletconnect/universal-provider": "^2.22.4",
     "fast-deep-equal": "^3.1.3",
     "jotai": "^2.15.0"
   },

packages/typink/src/atoms/walletActions.ts

@@ -8,7 +8,7 @@ import {
   walletConnectionsAtomFamily,
 } from './walletAtoms.js';
 import { InjectedSigner, TypinkAccount } from '../types.js';
-import { Wallet } from '../wallets/index.js';
+import { Wallet, WalletConnect } from '../wallets/index.js';
 import { assert } from 'dedot/utils';
 import { transformInjectedToTypinkAccounts } from '../utils/index.js';
 
@@ -91,7 +91,7 @@ export const connectWalletAtom = atom(null, async (get, set, walletId: string) =
 });
 
 // Write-only atom for disconnecting wallet(s)
-export const disconnectWalletAtom = atom(null, (get, set, walletId?: string) => {
+export const disconnectWalletAtom = atom(null, async (get, set, walletId?: string) => {
   const walletIds = get(connectedWalletIdsAtom);
   const connectedAccount = get(connectedAccountAtom);
 
@@ -100,6 +100,11 @@ export const disconnectWalletAtom = atom(null, (get, set, walletId?: string) =>
     const connectionAtom = walletConnectionsAtomFamily(walletId);
     const connection = get(connectionAtom);
 
+    // Clean up WalletConnect session if needed
+    if (connection?.wallet instanceof WalletConnect) {
+      await connection.wallet.disconnect();
+    }
+
     // Clean up subscription
     if (connection?.subscription) {
       connection.subscription();
@@ -118,14 +123,20 @@ export const disconnectWalletAtom = atom(null, (get, set, walletId?: string) =>
     }
   } else {
     // Disconnect all wallets
-    walletIds.forEach((id) => {
+    for (const id of walletIds) {
       const connectionAtom = walletConnectionsAtomFamily(id);
       const connection = get(connectionAtom);
+
+      // Clean up WalletConnect session if needed
+      if (connection?.wallet instanceof WalletConnect) {
+        await connection.wallet.disconnect();
+      }
+
       if (connection?.subscription) {
         connection.subscription();
       }
       set(connectionAtom, null);
-    });
+    }
 
     set(connectedWalletIdsAtom, []);
     set(connectedAccountAtom, undefined);

packages/typink/src/networks/mainnet.ts

@@ -11,6 +11,7 @@ export const alephZero: NetworkInfo = {
   decimals: 12,
   jsonRpcApi: JsonRpcApi.LEGACY,
   subscanUrl: 'https://alephzero.subscan.io',
+  genesisHash: '0x70255b4d28de0fc4e1a193d7e175ad1ccef431598211c55538f1018651a0307e',
 };
 
 export const astar: NetworkInfo = {
@@ -22,6 +23,7 @@ export const astar: NetworkInfo = {
   symbol: 'ASTR',
   decimals: 18,
   subscanUrl: 'https://astar.subscan.io',
+  genesisHash: '0x9eb76c5184c4ab8679d2d5d819fdf90b9c001403e9e17da2e14b6d8aec4029c6',
 };
 
 export const shiden: NetworkInfo = {
@@ -33,6 +35,7 @@ export const shiden: NetworkInfo = {
   symbol: 'SDN',
   decimals: 18,
   subscanUrl: 'https://shiden.subscan.io',
+  genesisHash: '0xf1cf9022c7ebb34b162d5b5e34e705a5a740b2d0ecc1009fb89023e62a488108',
 };
 
 export const polkadot: NetworkInfo = {
@@ -60,6 +63,7 @@ export const polkadot: NetworkInfo = {
   chainSpec: async () => {
     return (await import('@substrate/connect-known-chains/polkadot')).chainSpec;
   },
+  genesisHash: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
 };
 
 export const polkadotAssetHub: NetworkInfo = {
@@ -85,6 +89,7 @@ export const polkadotAssetHub: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/polkadot_asset_hub')).chainSpec;
   },
   relayChain: polkadot,
+  genesisHash: '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f',
 };
 
 export const polkadotPeople: NetworkInfo = {
@@ -106,6 +111,7 @@ export const polkadotPeople: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/polkadot_people')).chainSpec;
   },
   relayChain: polkadot,
+  genesisHash: '0x67fa177a097bfa18f77ea95ab56e9bcdfeb0e5b8a40e46298bb93e16b6fc5008',
 };
 
 export const kusama: NetworkInfo = {
@@ -130,6 +136,7 @@ export const kusama: NetworkInfo = {
   chainSpec: async () => {
     return (await import('@substrate/connect-known-chains/ksmcc3')).chainSpec;
   },
+  genesisHash: '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe',
 };
 
 export const kusamaAssetHub: NetworkInfo = {
@@ -154,6 +161,7 @@ export const kusamaAssetHub: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/ksmcc3_asset_hub')).chainSpec;
   },
   relayChain: kusama,
+  genesisHash: '0x48239ef607d7928874027a43a67689209727dfb3d3dc5e5b03a39bdc2eda771a',
 };
 
 export const kusamaPeople: NetworkInfo = {
@@ -178,6 +186,7 @@ export const kusamaPeople: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/ksmcc3_people')).chainSpec;
   },
   relayChain: kusama,
+  genesisHash: '0xc1af4cb4eb3918e5db15086c0cc5ec17fb334f728b7c65dd44bfe1e174ff8b3f',
 };
 
 export const hydration: NetworkInfo = {
@@ -195,6 +204,7 @@ export const hydration: NetworkInfo = {
   symbol: 'HDX',
   decimals: 12,
   subscanUrl: 'https://hydration.subscan.io',
+  genesisHash: '0xafdc188f45c71dacbaa0b62e16a91f726c7b8699a9748cdf715459de6b7f366d',
 };
 
 export const basilisk: NetworkInfo = {
@@ -206,6 +216,7 @@ export const basilisk: NetworkInfo = {
   symbol: 'BSX',
   decimals: 12,
   subscanUrl: 'https://basilisk.subscan.io',
+  genesisHash: '0xa85cfb9b9fd4d622a5b28289a02347af987d8f73fa3108450e2b4a11c1ce5755',
 };
 
 export const vara: NetworkInfo = {
@@ -217,4 +228,5 @@ export const vara: NetworkInfo = {
   symbol: 'VARA',
   decimals: 12,
   subscanUrl: 'https://vara.subscan.io',
+  genesisHash: '0xfe1b4c55fd4d668101126434206571a7838a8b6b93a6d1b95d607e78e6c53763',
 };

packages/typink/src/networks/testnet.ts

@@ -11,6 +11,7 @@ export const popTestnet: NetworkInfo = {
   decimals: 10,
   faucetUrl: 'https://onboard.popnetwork.xyz',
   pjsUrl: 'https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Frpc1.paseo.popnetwork.xyz',
+  genesisHash: '0xe8b2d197b82a0da1fffca832c050894ebe343b289c61ef439aa694bdcef78aa1',
 };
 
 export const alephZeroTestnet: NetworkInfo = {
@@ -36,6 +37,7 @@ export const shibuyaTestnet: NetworkInfo = {
   decimals: 18,
   faucetUrl: 'https://docs.astar.network/docs/build/environment/faucet',
   subscanUrl: 'https://shibuya.subscan.io',
+  genesisHash: '0xddb89973361a170839f80f152d2e9e38a376a5a7eccefcade763f46a8e567019',
 };
 
 export const westend: NetworkInfo = {
@@ -51,6 +53,7 @@ export const westend: NetworkInfo = {
   chainSpec: async () => {
     return (await import('@substrate/connect-known-chains/westend2')).chainSpec;
   },
+  genesisHash: '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e',
 };
 
 export const westendAssetHub: NetworkInfo = {
@@ -67,6 +70,7 @@ export const westendAssetHub: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/westend2_asset_hub')).chainSpec;
   },
   relayChain: westend,
+  genesisHash: '0x67f9723393ef76214df0118c34bbbd3dbebc8ed46a10973a8c969d48fe7598c9',
 };
 
 export const westendPeople: NetworkInfo = {
@@ -83,6 +87,7 @@ export const westendPeople: NetworkInfo = {
     return (await import('@substrate/connect-known-chains/westend_people')).chainSpec;
   },
   relayChain: westend,
+  genesisHash: '0x1eb6fb0ba5187434de017a70cb84d4f47142df1d571d0ef9e7e1407f2b80b93c',
 };
 
 export const paseo: NetworkInfo = {
@@ -103,6 +108,7 @@ export const paseo: NetworkInfo = {
   chainSpec: async () => {
     return (await import('@substrate/connect-known-chains/paseo')).chainSpec;
   },
+  genesisHash: '0x77afd6190f1554ad45fd0d31aee62aacc33c6db0ea801129acb813f913e0764f',
 };
 
 export const paseoPeople: NetworkInfo = {
@@ -118,6 +124,7 @@ export const paseoPeople: NetworkInfo = {
   decimals: 10,
   faucetUrl: 'https://faucet.polkadot.io',
   subscanUrl: 'https://people-paseo.subscan.io',
+  genesisHash: '0xe6c30d6e148f250b887105237bcaa5cb9f16dd203bf7b5b9d4f1da7387cb86ec',
 };
 
 export const paseoAssetHub: NetworkInfo = {
@@ -136,6 +143,7 @@ export const paseoAssetHub: NetworkInfo = {
   decimals: 10,
   faucetUrl: 'https://faucet.polkadot.io',
   subscanUrl: 'https://assethub-paseo.subscan.io',
+  genesisHash: '0xd6eec26135305a8ad257a20d003357284c8aa03d0bdb2b357ab0a22371e11ef2',
 };
 
 export const passetHub: NetworkInfo = {
@@ -150,6 +158,7 @@ export const passetHub: NetworkInfo = {
   symbol: 'PAS',
   decimals: 10,
   faucetUrl: 'https://faucet.polkadot.io/?parachain=1111',
+  genesisHash: '0xfd974cf9eaf028f5e44b9fdd1949ab039c6cf9cc54449b0b60d71b042e79aeb6',
 };
 
 export const paseoHydration: NetworkInfo = {
@@ -161,4 +170,5 @@ export const paseoHydration: NetworkInfo = {
   symbol: 'HDX',
   decimals: 12,
   faucetUrl: 'https://faucet.polkadot.io',
+  genesisHash: '0x05fab032a899566268235e3c89c847fb4644558a0d856282d47d17ff06cb2020',
 };

packages/typink/src/providers/WalletSetupProvider.tsx

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { TypinkAccount } from '../types.js';
-import { polkadotjs, subwallet, talisman, Wallet } from '../wallets/index.js';
+import { polkadotjs, subwallet, talisman, Wallet, WalletConnect } from '../wallets/index.js';
 import { noop } from '../utils/index.js';
 import { WalletProvider, WalletProviderProps } from './WalletProvider.js';
 import {
@@ -19,6 +19,7 @@ import {
   initializeWalletsAtom,
   setExternalSignerAtom,
 } from '../atoms/walletActions.js';
+import { supportedNetworksAtom } from '../atoms/clientAtoms.js';
 
 // Split these into 2 separate context (one for setup & one for signer & connected account)
 export interface WalletSetupContextProps {
@@ -86,6 +87,7 @@ export function WalletSetupProvider({
   const accounts = useAtomValue(allAccountsAtom);
   const availableWallets = useAtomValue(availableWalletsAtom);
   const finalEffectiveSigner = useAtomValue(finalEffectiveSignerAtom);
+  const supportedNetworks = useAtomValue(supportedNetworksAtom);
 
   // Use atom actions
   const connectWallet = useSetAtom(connectWalletAtom);
@@ -95,8 +97,16 @@ export function WalletSetupProvider({
   // Initialize wallets and app name
   useEffect(() => {
     const walletsToUse = initialWallets || DEFAULT_WALLETS;
+
+    // Configure WalletConnect with supported networks
+    for (const wallet of walletsToUse) {
+      if (wallet instanceof WalletConnect && supportedNetworks.length > 0) {
+        wallet.setSupportedNetworks(supportedNetworks);
+      }
+    }
+
     initializeWallets(walletsToUse);
-  }, [initialWallets, initializeWallets]);
+  }, [initialWallets, supportedNetworks, initializeWallets]);
 
   useEffect(() => {
     initializeAppName(appName);

packages/typink/src/providers/__tests__/WalletSetupProvider.test.tsx

@@ -17,6 +17,7 @@ vi.mock('jotai', () => ({
   useAtomValue: (atom: any) => mockUseAtomValue(atom),
   useSetAtom: (atom: any) => mockUseSetAtom(atom),
   createStore: vi.fn(() => ({})),
+  atom: (initialValue: any) => initialValue,
   Provider: ({ children }: any) => children,
 }));
 

packages/typink/src/types.ts

@@ -79,6 +79,7 @@ export interface NetworkInfo {
   pjsUrl?: string;
   faucetUrl?: string;
   jsonRpcApi?: JsonRpcApi; // default to new
+  genesisHash?: string;
   chainSpec?: () => Promise<string>;
   relayChain?: NetworkInfo;
 }