Merge pull request #4 from MobileWalletProtocol/felix/connector

fan-zhang-sv · web-flow · commit 660583071f82 · 2024-08-14T13:45:13.000-07:00
wagmi-connectors
diff --git a/.eslintignore b/.eslintignore
@@ -2,7 +2,5 @@
 *.md
 
 # folders to ignore
-build
-dist
-node_modules
-verdor-js
+**/dist
+**/node_modules
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.4.0.cjs
diff --git a/assets/coinbase_wallet_logo_kit.zip b/assets/coinbase_wallet_logo_kit.zip
diff --git a/package.json b/package.json
@@ -0,0 +1,10 @@
+{
+    "repository": "https://github.com/MobileWalletProtocol/react-native-client.git",
+    "author": "Coinbase, Inc.",
+    "license": "Apache-2.0",
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ],
+    "packageManager": "yarn@4.4.0"
+}
diff --git a/packages/client/jest.config.ts b/packages/client/jest.config.ts
@@ -57,5 +57,5 @@ export default {
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  testPathIgnorePatterns: ['/node_modules/', '/build/'],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
 };
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -15,7 +15,11 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "repository": "https://github.com/MobileWalletProtocol/react-native-client",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MobileWalletProtocol/react-native-client.git",
+    "directory": "packages/client"
+  },
   "author": "Coinbase, Inc.",
   "license": "Apache-2.0",
   "scripts": {
@@ -77,4 +81,4 @@
     "tslib": "^2.6.0",
     "typescript": "^5.1.6"
   }
-}
+}
diff --git a/packages/client/src/MWPClient.ts b/packages/client/src/MWPClient.ts
@@ -85,6 +85,8 @@ export class MWPClient {
   }
 
   async handshake(): Promise<AddressString[]> {
+    if (this.accounts.length > 0) return this.accounts;
+
     const handshakeMessage = await this.createRequestMessage({
       handshake: {
         method: 'eth_requestAccounts',
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -3,6 +3,8 @@ import { MWPClient } from './MWPClient';
 export default MWPClient;
 
 export { handleResponse } from './components/communicator';
-export type { AppMetadata, Preference, ProviderInterface } from './core/provider/interface';
+export type { AppMetadata, ProviderInterface } from './core/provider/interface';
+export type { Wallet } from './core/wallet';
+export { Wallets } from './core/wallet';
 export { EIP1193Provider } from './interfaces/eip1193/EIP1193Provider';
 export { MWPClient } from './MWPClient';
diff --git a/packages/client/tsconfig.base.json b/packages/client/tsconfig.base.json
@@ -4,6 +4,7 @@
     "**/*.test.*",
   ],
   "exclude": [
+    "node_modules",
     "dist",
   ],  
   "compilerOptions": {
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
diff --git a/packages/wagmi-connectors/jest.config.ts b/packages/wagmi-connectors/jest.config.ts
@@ -0,0 +1,27 @@
+import type {Config} from 'jest';
+
+const config: Config = {
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates which provider should be used to instrument code for coverage
+  coverageProvider: "v8",
+
+  // The root directory that Jest should scan for tests and modules within
+  rootDir: '.',
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: ['<rootDir>/src/**/*.test.[tj]s?(x)'],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    '^.+\\.(js|ts|tsx)$': ['ts-jest', {
+      useESM: true,
+    },],
+  },
+};
+
+export default config;
diff --git a/packages/wagmi-connectors/package.json b/packages/wagmi-connectors/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@mobile-wallet-protocol/wagmi-connectors",
+  "version": "1.0.0",
+  "description": "Mobile Wallet Protocol connectors for Wagmi",
+  "keywords": [
+    "react-native",
+    "hooks",
+    "eth",
+    "ethereum",
+    "wagmi",
+    "web3",
+    "coinbase",
+    "coinbasewallet",
+    "dapps",
+    "wallet"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MobileWalletProtocol/react-native-client.git",
+    "directory": "packages/wagmi-connectors"
+  },
+  "author": "Coinbase, Inc.",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "@mobile-wallet-protocol/client": "*",
+    "@wagmi/core": "^2.13.4",
+    "typescript": ">=5.0.4",
+    "viem": "^2.19.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mobile-wallet-protocol/client": "workspace:*",
+    "@types/jest": "^29.5.12",
+    "@wagmi/core": "^2.13.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "ts-jest": "^29.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.1.6",
+    "viem": "^2.19.4"
+  }
+}
diff --git a/packages/wagmi-connectors/src/createConnectorFromWallet.ts b/packages/wagmi-connectors/src/createConnectorFromWallet.ts
@@ -0,0 +1,225 @@
+import type { AppMetadata, EIP1193Provider, Wallet } from '@mobile-wallet-protocol/client';
+import { ChainNotConfiguredError, type Connector, createConnector } from '@wagmi/core';
+import type { Omit } from '@wagmi/core/internal';
+import {
+  type AddEthereumChainParameter,
+  getAddress,
+  type Hex,
+  numberToHex,
+  type ProviderRpcError,
+  SwitchChainError,
+  UserRejectedRequestError,
+} from 'viem';
+
+import { toCamelCase } from './utils.js';
+
+type WagmiWallet = Wallet & {
+  wagmiType?: string;
+  supportsSimulation?: boolean;
+};
+
+export type CreateConnectorParameters = {
+  metadata: Omit<AppMetadata, 'appChainIds'>;
+  wallet: WagmiWallet;
+};
+
+export function createConnectorFromWallet(parameters: CreateConnectorParameters) {
+  type Provider = EIP1193Provider;
+
+  let walletProvider: Provider | undefined;
+
+  let accountsChanged: Connector['onAccountsChanged'] | undefined;
+  let chainChanged: Connector['onChainChanged'] | undefined;
+  let disconnect: Connector['onDisconnect'] | undefined;
+
+  const walletName = toCamelCase(parameters.metadata.appName);
+
+  return createConnector<Provider>((config) => ({
+    id: walletName,
+    name: walletName,
+    supportsSimulation: parameters.wallet.supportsSimulation,
+    type: parameters.wallet.wagmiType ?? walletName,
+    async connect({ chainId } = {}) {
+      try {
+        const provider = await this.getProvider();
+        const accounts = (
+          (await provider.request({
+            method: 'eth_requestAccounts',
+          })) as string[]
+        ).map((x) => getAddress(x));
+
+        if (!accountsChanged) {
+          accountsChanged = this.onAccountsChanged.bind(this);
+          provider.on('accountsChanged', accountsChanged);
+        }
+        if (!chainChanged) {
+          chainChanged = this.onChainChanged.bind(this);
+          provider.on('chainChanged', chainChanged);
+        }
+        if (!disconnect) {
+          disconnect = this.onDisconnect.bind(this);
+          provider.on('disconnect', disconnect);
+        }
+
+        // Switch to chain if provided
+        let currentChainId = await this.getChainId();
+        if (chainId && currentChainId !== chainId) {
+          const chain = await this.switchChain!({ chainId }).catch((error) => {
+            if (error.code === UserRejectedRequestError.code) throw error;
+            return { id: currentChainId };
+          });
+          currentChainId = chain?.id ?? currentChainId;
+        }
+
+        return { accounts, chainId: currentChainId };
+      } catch (error) {
+        if (
+          /(user closed modal|accounts received is empty|user denied account|request rejected)/i.test(
+            (error as Error).message
+          )
+        )
+          throw new UserRejectedRequestError(error as Error);
+        throw error;
+      }
+    },
+    async disconnect() {
+      const provider = await this.getProvider();
+
+      if (accountsChanged) {
+        provider.removeListener('accountsChanged', accountsChanged);
+        accountsChanged = undefined;
+      }
+      if (chainChanged) {
+        provider.removeListener('chainChanged', chainChanged);
+        chainChanged = undefined;
+      }
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect);
+        disconnect = undefined;
+      }
+
+      provider.disconnect();
+    },
+    async getAccounts() {
+      const provider = await this.getProvider();
+      return (
+        (await provider.request({
+          method: 'eth_accounts',
+        })) as string[]
+      ).map((x) => getAddress(x));
+    },
+    async getChainId() {
+      const provider = await this.getProvider();
+      const chainId = (await provider.request({
+        method: 'eth_chainId',
+      })) as Hex;
+      return Number(chainId);
+    },
+    async getProvider() {
+      if (!walletProvider) {
+        // Unwrapping import for Vite compatibility.
+        // See: https://github.com/vitejs/vite/issues/9703
+        const EIP1193Provider = await (async () =>
+          (await import('@mobile-wallet-protocol/client')).EIP1193Provider)();
+
+        walletProvider = new EIP1193Provider({
+          metadata: {
+            ...parameters.metadata,
+            appChainIds: config.chains.map((x) => x.id),
+          },
+          wallet: parameters.wallet,
+        });
+      }
+
+      return walletProvider;
+    },
+    async isAuthorized() {
+      try {
+        const accounts = await this.getAccounts();
+        return !!accounts.length;
+      } catch {
+        return false;
+      }
+    },
+    async switchChain({ addEthereumChainParameter, chainId }) {
+      const chain = config.chains.find((chain) => chain.id === chainId);
+      if (!chain) throw new SwitchChainError(new ChainNotConfiguredError());
+
+      const provider = await this.getProvider();
+
+      try {
+        await provider.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: numberToHex(chain.id) }],
+        });
+        return chain;
+      } catch (error) {
+        // Indicates chain is not added to provider
+        if ((error as ProviderRpcError).code === 4902) {
+          try {
+            let blockExplorerUrls: string[] | undefined;
+            if (addEthereumChainParameter?.blockExplorerUrls)
+              blockExplorerUrls = addEthereumChainParameter.blockExplorerUrls;
+            else
+              blockExplorerUrls = chain.blockExplorers?.default.url
+                ? [chain.blockExplorers?.default.url]
+                : [];
+
+            let rpcUrls: readonly string[];
+            if (addEthereumChainParameter?.rpcUrls?.length)
+              rpcUrls = addEthereumChainParameter.rpcUrls;
+            else rpcUrls = [chain.rpcUrls.default?.http[0] ?? ''];
+
+            const addEthereumChain = {
+              blockExplorerUrls,
+              chainId: numberToHex(chainId),
+              chainName: addEthereumChainParameter?.chainName ?? chain.name,
+              iconUrls: addEthereumChainParameter?.iconUrls,
+              nativeCurrency: addEthereumChainParameter?.nativeCurrency ?? chain.nativeCurrency,
+              rpcUrls,
+            } satisfies AddEthereumChainParameter;
+
+            await provider.request({
+              method: 'wallet_addEthereumChain',
+              params: [addEthereumChain],
+            });
+
+            return chain;
+          } catch (error) {
+            throw new UserRejectedRequestError(error as Error);
+          }
+        }
+
+        throw new SwitchChainError(error as Error);
+      }
+    },
+    onAccountsChanged(accounts) {
+      if (accounts.length === 0) this.onDisconnect();
+      else
+        config.emitter.emit('change', {
+          accounts: accounts.map((x) => getAddress(x)),
+        });
+    },
+    onChainChanged(chain) {
+      const chainId = Number(chain);
+      config.emitter.emit('change', { chainId });
+    },
+    async onDisconnect(_error) {
+      config.emitter.emit('disconnect');
+
+      const provider = await this.getProvider();
+      if (accountsChanged) {
+        provider.removeListener('accountsChanged', accountsChanged);
+        accountsChanged = undefined;
+      }
+      if (chainChanged) {
+        provider.removeListener('chainChanged', chainChanged);
+        chainChanged = undefined;
+      }
+      if (disconnect) {
+        provider.removeListener('disconnect', disconnect);
+        disconnect = undefined;
+      }
+    },
+  }));
+}
diff --git a/packages/wagmi-connectors/src/index.ts b/packages/wagmi-connectors/src/index.ts
@@ -0,0 +1,3 @@
+export type { CreateConnectorParameters } from './createConnectorFromWallet.js';
+export { createConnectorFromWallet } from './createConnectorFromWallet.js';
+export { Wallets } from '@mobile-wallet-protocol/client';
diff --git a/packages/wagmi-connectors/src/utils.ts b/packages/wagmi-connectors/src/utils.ts
diff --git a/packages/wagmi-connectors/tsconfig.json b/packages/wagmi-connectors/tsconfig.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+nodeLinker: node-modules`
	`2`	`+`
	`3`	`+yarnPath: .yarn/releases/yarn-4.4.0.cjs`
Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,8 @@ export class MWPClient {`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`async handshake(): Promise<AddressString[]> {`
	`88`	`+ if (this.accounts.length > 0) return this.accounts;`
	`89`	`+`
`88`	`90`	`const handshakeMessage = await this.createRequestMessage({`
`89`	`91`	`handshake: {`
`90`	`92`	`method: 'eth_requestAccounts',`