h

hly

V1

2022/10/20阅读:24主题:默认主题

web3-0x00钱包连接

钱包涉及到的内容
钱包涉及到的内容

连接钱包的代码

  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

分类:

前端

标签:

前端

作者介绍

h
hly
V1