voluptatesiusto/packages/coinbase/src/index.ts

Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, mul

import { WalletInit } from '@web3-onboard/common'

function coinbaseWallet({
  darkMode = false,
  enableMobileWalletLink = false,
  reloadOnDisconnect = true
}: {
  /** @optional Use dark theme */
  darkMode?: boolean
  /** @optional whether to connect mobile web app via WalletLink, defaults to false */
  enableMobileWalletLink?: boolean
  /** @optional whether or not to reload dapp automatically after disconnect, defaults to true */
  reloadOnDisconnect?: boolean
} = {}): WalletInit {
  return () => {
    return {
      label: 'Coinbase Wallet',
      getIcon: async () => (await import('./icon.js')).default,
      getInterface: async ({ chains, appMetadata }) => {
        const [chain] = chains
        const { name, icon } = appMetadata || {}

        // according to https://github.com/wagmi-dev/wagmi/issues/383
        // @coinbase/wallet-sdk export double default fields
        // so we need to detect it to get the real constructor
        const { default: CoinbaseWalletSDK } = await import(
          '@coinbase/wallet-sdk'
        )
        const CoinbaseWalletSDKConstructor = (
          (CoinbaseWalletSDK as any).default
            ? (CoinbaseWalletSDK as any).default
            : CoinbaseWalletSDK
        ) as typeof CoinbaseWalletSDK

        const base64 = window.btoa(icon || '')
        const appLogoUrl = `data:image/svg+xml;base64,${base64}`

        const instance = new CoinbaseWalletSDKConstructor({
          appName: name || '',
          appLogoUrl,
          darkMode,
          enableMobileWalletLink,
          reloadOnDisconnect
        })

        const coinbaseWalletProvider = instance.makeWeb3Provider(
          chain.rpcUrl,
          parseInt(chain.id)
        )

        // patch the chainChanged event
        const on = coinbaseWalletProvider.on.bind(coinbaseWalletProvider)
        coinbaseWalletProvider.on = (event, listener) => {
          on(event, val => {
            if (event === 'chainChanged') {
              listener(`0x${(val as number).toString(16)}`)
              return
            }

            listener(val)
          })

          return coinbaseWalletProvider
        }

        return {
          provider: coinbaseWalletProvider,
          instance
        }
      }
    }
  }
}

export default coinbaseWallet