Add coinbase wallet support (#266)

* Add coinbase wallet support

* Add dapp name and icon to coinbase wallet sdk

jest.config.js

@@ -13,4 +13,8 @@ module.exports = {
   coveragePathIgnorePatterns: ['__tests__', 'lib'],
   coverageReporters: [Boolean(process.env.CI) ? 'clover' : 'html'],
   verbose: Boolean(process.env.CI),
+  moduleNameMapper: {
+    '^preact$': require.resolve('preact'),
+    '^preact/hooks$': require.resolve('preact/hooks'),
+  },
 };

packages/react-celo/__tests__/connectors/coinbase-wallet.test.ts

@@ -0,0 +1,85 @@
+import { CeloContract } from '@celo/contractkit/lib/base';
+import crypto from 'crypto';
+import { generateTestingUtils } from 'eth-testing';
+
+import { CoinbaseWalletConnector } from '../../src/connectors';
+import { Alfajores, Baklava, localStorageKeys } from '../../src/constants';
+import { getTypedStorageKey } from '../../src/utils/local-storage';
+
+const ACCOUNT = '0xf61B443A155b07D2b2cAeA2d99715dC84E839EEf';
+
+const testingUtils = generateTestingUtils({
+  providerType: 'default',
+  verbose: false,
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock('@coinbase/wallet-sdk', () => ({
+  ...jest.requireActual('@coinbase/wallet-sdk'),
+  CoinbaseWalletSDK: jest.fn(() => ({
+    makeWeb3Provider: () => testingUtils.getProvider(),
+  })),
+}));
+
+describe('CoinbaseWalletConnector', () => {
+  beforeAll(() => {
+    // @ts-expect-error global override
+    global.crypto = crypto;
+    Object.defineProperty(global.self, 'crypto', {
+      value: {
+        getRandomValues: (arr: number[]) => crypto.randomBytes(arr.length),
+      },
+    });
+
+    testingUtils.mockNotConnectedWallet();
+    testingUtils.mockAccounts([ACCOUNT]);
+    testingUtils.mockRequestAccounts([ACCOUNT]);
+    testingUtils.lowLevel.mockRequest('wallet_switchEthereumChain', {});
+  });
+
+  afterEach(() => {
+    // Clear all mocks between tests
+    testingUtils.clearAllMocks();
+  });
+
+  it('initialises', async () => {
+    const connector = new CoinbaseWalletConnector(
+      Alfajores,
+      CeloContract.GoldToken
+    );
+    await connector.initialise();
+    expect(connector.account).toEqual(ACCOUNT);
+    expect(connector.initialised).toBe(true);
+  });
+
+  describe('when network change', () => {
+    let connector: CoinbaseWalletConnector;
+    beforeEach(() => {
+      testingUtils.mockConnectedWallet([ACCOUNT]);
+      connector = new CoinbaseWalletConnector(
+        Alfajores,
+        CeloContract.GoldToken
+      );
+    });
+
+    it('sets network in local storage and in connection', async () => {
+      await connector.updateKitWithNetwork(Baklava);
+      expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
+        Baklava.name
+      );
+    });
+
+    const callback = jest.fn();
+
+    it('reacts to network being changed from CoinbaseWallet side', async () => {
+      connector.onNetworkChange(callback);
+
+      // Seems to only work when  init is called after the callback is set
+      await connector.initialise();
+
+      testingUtils.mockChainChanged('0x1');
+
+      expect(callback).toHaveBeenLastCalledWith(1);
+    });
+  });
+});

packages/react-celo/__tests__/utils/resurector.test.ts

@@ -1,3 +1,5 @@
+import crypto from 'crypto';
+
 import { CONNECTOR_TYPES } from '../../src/connectors';
 import {
   Baklava,
@@ -16,6 +18,15 @@ const PRIVATE_TEST_KEY =
   '04f9d516be49bb44346ca040bdd2736d486bca868693c74d51d274ad92f61976';
 
 describe('resurrector', () => {
+  beforeAll(() => {
+    // @ts-expect-error global override
+    global.crypto = crypto;
+    Object.defineProperty(global.self, 'crypto', {
+      value: {
+        getRandomValues: (arr: number[]) => crypto.randomBytes(arr.length),
+      },
+    });
+  });
   afterEach(() => {
     clearPreviousConfig();
   });

packages/react-celo/package.json

@@ -29,6 +29,7 @@
     "@celo/wallet-local": "^2.0.0",
     "@celo/wallet-remote": "^2.0.0",
     "@celo/wallet-walletconnect-v1": "4.0.0-dev",
+    "@coinbase/wallet-sdk": "^3.2.0",
     "@ethersproject/providers": "^5.5.2",
     "@ledgerhq/hw-transport-webusb": "^5.43.0",
     "eventemitter3": "^4.0.7",

packages/react-celo/src/components/icons/coinbase-wallet.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const COINBASE_WALLET: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1024"
+    height="1024"
+    viewBox="0 0 1024 1024"
+    fill="none"
+    {...props}
+  >
+    <rect width="1024" height="1024" fill="#0052FF" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default COINBASE_WALLET;

packages/react-celo/src/components/icons/index.tsx

@@ -2,6 +2,7 @@ export { default as Celo } from './celo';
 export { default as CeloDance } from './celo-dance';
 export { default as CeloTerminal } from './celo-terminal';
 export { default as ChromeExtensionStore } from './chrome-extension-store';
+export { default as CoinbaseWallet } from './coinbase-wallet';
 export { default as Ethereum } from './ethereum';
 export { default as Ledger } from './ledger';
 export { default as MetaMask } from './metamask';

packages/react-celo/src/connectors/coinbase-wallet.ts

@@ -0,0 +1,130 @@
+import { CeloTokenContract } from '@celo/contractkit/lib/base';
+import {
+  MiniContractKit,
+  newKit,
+  newKitFromWeb3,
+} from '@celo/contractkit/lib/mini-kit';
+import {
+  CoinbaseWalletProvider,
+  CoinbaseWalletSDK,
+} from '@coinbase/wallet-sdk';
+
+import { localStorageKeys, WalletTypes } from '../constants';
+import { Ethereum } from '../global';
+import { Connector, Dapp, Maybe, Network } from '../types';
+import {
+  clearPreviousConfig,
+  setTypedStorageKey,
+} from '../utils/local-storage';
+import { switchToCeloNetwork } from '../utils/metamask';
+import { persist, Web3Type } from './common';
+
+export default class CoinbaseWalletConnector implements Connector {
+  public initialised = false;
+  public type = WalletTypes.CoinbaseWallet;
+  public kit: MiniContractKit;
+  public account: Maybe<string> = null;
+  private onNetworkChangeCallback?: (chainId: number) => void;
+  private onAddressChangeCallback?: (address: Maybe<string>) => void;
+  private network: Network;
+
+  private provider: CoinbaseWalletProvider | null = null;
+
+  constructor(
+    network: Network,
+    public feeCurrency: CeloTokenContract,
+    dapp?: Dapp
+  ) {
+    this.kit = newKit(network.rpcUrl);
+    this.network = network;
+
+    const sdk = new CoinbaseWalletSDK({
+      appName: dapp?.name ?? '',
+      appLogoUrl: dapp?.icon ?? '',
+    });
+    this.provider = sdk.makeWeb3Provider(network.rpcUrl, network.chainId);
+  }
+
+  persist() {
+    persist({
+      walletType: this.type,
+      network: this.network,
+    });
+  }
+
+  async initialise(): Promise<this> {
+    if (!this.provider) {
+      throw new Error('Coinbase wallet provider not instantiated');
+    }
+    const { default: Web3 } = await import('web3');
+    const web3 = new Web3(this.provider);
+    const [defaultAccount]: string[] = await this.provider.request({
+      method: 'eth_requestAccounts',
+    });
+
+    this.provider.removeListener('chainChanged', this.onChainChanged);
+    this.provider.removeListener('accountsChanged', this.onAccountsChanged);
+
+    await switchToCeloNetwork(
+      this.kit,
+      this.network,
+      this.provider as unknown as Ethereum
+    );
+
+    this.provider.on('chainChanged', this.onChainChanged);
+    this.provider.on('accountsChanged', this.onAccountsChanged);
+
+    this.kit = newKitFromWeb3(web3 as unknown as Web3Type);
+
+    this.kit.connection.defaultAccount = defaultAccount;
+    this.account = defaultAccount ?? null;
+    this.initialised = true;
+
+    this.persist();
+
+    return this;
+  }
+
+  private onChainChanged = (chainIdHex: string) => {
+    const chainId = parseInt(chainIdHex, 16);
+    if (this.onNetworkChangeCallback && this.network.chainId !== chainId) {
+      this.onNetworkChangeCallback(chainId);
+    }
+  };
+
+  private onAccountsChanged = (accounts: string[]) => {
+    if (this.onAddressChangeCallback) {
+      this.kit.connection.defaultAccount = accounts[0];
+      this.onAddressChangeCallback(accounts[0] ?? null);
+    }
+  };
+
+  supportsFeeCurrency() {
+    return false;
+  }
+
+  async updateKitWithNetwork(network: Network): Promise<void> {
+    setTypedStorageKey(localStorageKeys.lastUsedNetwork, network.name);
+    this.network = network;
+    await this.initialise();
+  }
+
+  onNetworkChange(callback: (chainId: number) => void): void {
+    this.onNetworkChangeCallback = callback;
+  }
+
+  onAddressChange(callback: (address: Maybe<string>) => void): void {
+    this.onAddressChangeCallback = callback;
+  }
+
+  close(): void {
+    clearPreviousConfig();
+    if (this.provider) {
+      this.provider.removeListener('chainChanged', this.onChainChanged);
+      this.provider.removeListener('accountsChanged', this.onAccountsChanged);
+    }
+    this.onNetworkChangeCallback = undefined;
+    this.onAddressChangeCallback = undefined;
+    return;
+  }
+}

packages/react-celo/src/connectors/connectors-by-name.ts

@@ -1,6 +1,7 @@
 import { WalletTypes } from '../constants';
 import { Connector, Network } from '../types';
 import CeloExtensionWalletConnector from './celo-extension-wallet';
+import CoinbaseWalletConnector from './coinbase-wallet';
 import InjectedConnector from './injected';
 import LedgerConnector from './ledger';
 import MetaMaskConnector from './metamask';
@@ -27,4 +28,5 @@ export const CONNECTOR_TYPES: {
   [WalletTypes.CeloDance]: WalletConnectConnector,
   [WalletTypes.CeloTerminal]: WalletConnectConnector,
   [WalletTypes.CeloWallet]: WalletConnectConnector,
+  [WalletTypes.CoinbaseWallet]: CoinbaseWalletConnector,
 };

packages/react-celo/src/connectors/index.ts

@@ -1,4 +1,5 @@
 export { default as CeloExtensionWalletConnector } from './celo-extension-wallet';
+export { default as CoinbaseWalletConnector } from './coinbase-wallet';
 export * from './common';
 export * from './connectors-by-name';
 export { default as InjectedConnector } from './injected';

packages/react-celo/src/constants.tsx

@@ -5,6 +5,7 @@ import {
   CeloDance,
   CeloTerminal,
   ChromeExtensionStore,
+  CoinbaseWallet,
   Ethereum,
   Ledger,
   MetaMask,
@@ -47,6 +48,7 @@ export enum SupportedProviders {
   Valora = 'Valora',
   WalletConnect = 'WalletConnect',
   Steakwallet = 'Steakwallet',
+  CoinbaseWallet = 'Coinbase Wallet',
 }
 export enum WalletTypes {
   Valora = 'Valora',
@@ -60,6 +62,7 @@ export enum WalletTypes {
   Injected = 'Injected',
   PrivateKey = 'PrivateKey',
   Unauthenticated = 'Unauthenticated',
+  CoinbaseWallet = 'CoinbaseWallet',
 }
 
 export enum Priorities {
@@ -249,6 +252,16 @@ export const PROVIDERS: {
       }
     },
   },
+  [SupportedProviders.CoinbaseWallet]: {
+    name: SupportedProviders.CoinbaseWallet,
+    type: WalletTypes.CoinbaseWallet,
+    description: 'Scan a QR code to connect your wallet',
+    icon: CoinbaseWallet,
+    canConnect: () => true,
+    showInList: () => true,
+    listPriority: () => Priorities.Popular,
+    supportedPlatforms: [Platform.Mobile, Platform.Web],
+  },
 };
 
 export const NetworkNames = {

packages/react-celo/src/hooks/use-coinbase-wallet-connector.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+
+import { CoinbaseWalletConnector } from '../connectors';
+import { Connector, Dapp, Maybe, Network } from '../types';
+import { useCeloInternal } from '../use-celo';
+
+export function useCoinbaseWalletConnector(
+  onSubmit: (connector: Connector) => void
+): UseCoinbaseWalletConnector {
+  const {
+    network,
+    feeCurrency,
+    initConnector,
+    initError: error,
+    dapp,
+  } = useCeloInternal();
+
+  useEffect(() => {
+    let stale;
+    void (async () => {
+      const connector = new CoinbaseWalletConnector(network, feeCurrency, dapp);
+      try {
+        await initConnector(connector);
+        if (!stale) {
+          onSubmit(connector);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+
+    return () => {
+      stale = true;
+    };
+  }, [initConnector, network, dapp, onSubmit, feeCurrency]);
+
+  return { error, dapp, network };
+}
+
+export interface UseCoinbaseWalletConnector {
+  error: Maybe<Error>;
+  network: Network;
+  dapp: Dapp;
+}