钱包涉及到的内容

连接钱包的代码

  async connectWallet () {
      // （1） 多个登录方式：
      //  多钱包登录环境 （1）pc真实环境 （2）pc手机模拟环境并且注册钱包数目较多
      if (!window.tools.isMobile() || window.ethereum.providers?.length) {
        if (!walletType) {
          const hasShow = store.state.mutiLoginShow
          if (hasShow) return
          const result = await window.walletSelectFn()
          if (!result) {
            return
          }
          walletType = store.state.web3.walletType
        }
        if (!walletType) return

      // （2）针对不同的provider进行获取对应的用户信息
      const currentEtherum = utilWeb3.getCurrentEtherum()
        var t = await currentEtherum.request({ method: 'eth_requestAccounts' })
        if (!t) {
          error = 'Wallet enable Error'
          return { error }
        }

      // （3）充值web3、以及web3provider对象
      window.wallet = null
      window.web3Provider = null
      this.getWeb3()
      this.getWeb3Provider()

      //  （4）通过provider进行监听
      this.addListenerEthereum()

      //  （5）获取networkId 、coinbase
      const web3 = new Web3(utilWeb3.getCurrentEtherum())
      var networkId = await promisify(cb => web3.eth.getChainId(cb))
      var coinbase = await promisify(cb => web3.eth.getCoinbase(cb))

      //  （6）配置当前网络的链 ：这个是业务需求
      await connectTools.setConfigChain(networkId)
      const isConnected = !(!coinbase || coinbase.length <= 0)
      if (!isConnected) {
        const error = '没有获取到钱包地址'
        return { networkId, coinbase, walletType, isConnected, error }
      }
      return { networkId, coinbase, walletType, isConnected }
    }
  },

0x01 Wallet connect provider

getWalletConnectProvider () {
    const rpcDict = this.rpcDict()
    return new WalletConnectProvider({
      rpc: rpcDict,
      qrcodeModalOptions: {
        desktopLinks: [
          'ledger',
          'tokenary',
          'wallet',
          'wallet 3',
          'secuX',
          'ambire',
          'wallet3',
          'apolloX',
          'zerion',
          'sequence',
          'punkWallet',
          'kryptoGO',
          'nft',
          'riceWallet',
          'vision',
          'keyring'
        ],
        mobileLinks: [
          'rainbow',
          'metamask',
          'argent',
          'trust',
          'imtoken',
          'pillar'
        ]
      }
    })
  }

0x02 coinbase provider ， 没有window.ethereum 中的时候， 也就是可能是在移动端

  getCoinBaseProvider () {
    const APP_NAME = 'PlayTop'
    const rpcDict = this.rpcDict()

    // （2）Initialize Coinbase Wallet SDK
    const coinbaseWallet = new CoinbaseWalletSDK({
      appName: APP_NAME,
      darkMode: false
    })

    //  （3）启动coinbase钱包
    const DEFAULT_CHAIN_ID = store.state.web3.networkId ?? 1
    const DEFAULT_ETH_JSONRPC_URL = rpcDict[DEFAULT_CHAIN_ID]
    if (DEFAULT_CHAIN_ID && DEFAULT_ETH_JSONRPC_URL) {
      const ethereum = coinbaseWallet.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID)

      return ethereum
    }
    //  不支持的网络， 其他的地方处理
    return null
  },

0x03: Coinbase & MetaMask 都有的时候处理了

getWindowEthereumProvider () { // 只处理通过window.ethereum的情况
    // （1） 没有ethereum， 直接return
    if (!utilWeb3.hasEtherem()) {
      return null
    }

    // （2）上次存储的provider
    let ethereum = store.state.walletProvider
    if (ethereum) return ethereum

    //  （3）处理不同移动端口的provider
    const walletType = store.state.web3.walletType
    if (window.tools.isMobile()) { // 真实手机端，pc手机模拟器环境
      if (window.ethereum.providers?.length) { // 注册钱包 >= 2, pc的手机模拟器环境才会出现
        window.ethereum.providers.forEach(async (p) => {
          if (this.isMetaMask(p) || this.isCoinBase(p)) {
            ethereum = p
            window.ethereum.selectedProvider = ethereum
          }
        })
      } else { // 注册钱包<= 1 1)真实手机 2）pc手机模拟环境 3）coinbase 移动端的环境
        ethereum = window.ethereum
      }
    } else { // 真实的pc环境
      if (!walletType) return null
      if (window.ethereum.providers?.length) {
        window.ethereum.providers.forEach(async (p) => {
          if (this.isMetaMask(p) || this.isCoinBase(p)) {
            ethereum = p
          }
        })
      } else {
        if (this.isMetaMask(window.ethereum) || this.isCoinBase(window.ethereum)) {
          ethereum = window.ethereum
        }
      }
    }
    store.commit('UPDATE_WALLET_PROVIDER', { walletProvider: ethereum })
    return ethereum
  },

0x04 WalletConnect中的connector

  async connectWallet () {
    return new Promise(async function (resolve, reject) {
      let error = ''

      // （1） 创建connector
      const bridge = 'https://bridge.walletconnect.org'
      const connector = new WalletConnect({ bridge, qrcodeModal: QRCodeModal })
      if (!connector) {
        error = 'MetaMask not Install'
        return { error }
      }
      
      // （2）创建connector会话
      // check if already connected // create new session
      if (!connector.connected) {
        await connector.createSession()
      }

      // （3）监听会话更新
      connector.on('session_update', async (error, payload) => {
        // 回话的更新 ， 账号切换、网络切换
      })

      //  （4）从没有连接到链接的监听
      connector.on('connect', (error, payload) => {
       // 监听浅薄啊连接的处理
      })

      // （5） 断开监听
      connector.on('disconnect', (error, payload) => {
       // 断开的处理
      })

      //  （6）钱包已经是链接了，之将就能够拿到链接状态，上面的连接监听不会触发
      if (connector.connected) {
        // 已经连接之后的处理
      }
    })
  },

公众号：技术小难

简书

博客园 链接需要替换

CSDN

知乎

掘金

segmentfault

本文由mdnice多平台发布