Web3链接钱包

Vue+Web3链接常用的钱包配置项

"dependencies": {
    "@coinbase/wallet-sdk": "^3.0.3",
   "@walletconnect/web3-provider": "^1.7.4",
    "fortmatic": "^2.2.1",
    "jsencrypt": "^3.2.1",
    "vue": "2.6.14",
    "vue-awesome-swiper": "^4.1.1",
    "vue-color": "^2.8.1",
    "vue-moment": "^4.1.0",
    "vue-router": "^3.0.1",
    "vuex": "3.6.2",
    "web3": "^1.7.1",
    "web3modal": "^1.9.5"
  },

公用代码封装

import Web3 from "web3";
import Fortmatic from 'fortmatic'
import WalletConnectProvider from "@walletconnect/web3-provider";
import CoinbaseWalletSDK from "@coinbase/wallet-sdk";
//获取各个钱包的provider
const modalItemClick = async (name) => {
  let provider
  if (name === 'injected') {
    // injected METAMASK
    const { ethereum } = window
    if (ethereum && ethereum.isMetaMask) {
      provider = ethereum
    } else {
      const href = document.location.host + document.location.pathname
      //跳转metamask app
      location.href = `https://metamask.app.link/dapp/${href}`
  } else if (name === 'walletlink') {
    let walletLink = new CoinbaseWalletSDK({ appName: 'NFTSTAR', infuraId: INFURA_ID })
    provider = walletLink.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID)
  } else if (name === 'walletconnect') {
    // Walletconnect
    provider = new WalletConnectProvider({
      infuraId: INFURA_ID
    })
  } else if (name === 'fortmatic') {
    // Fortmatic
    let fm = new Fortmatic(FORTMATIC_KEY, { rpcUrl: 			DEFAULT_ETH_JSONRPC_URL, chianId: process.env.VUE_APP_ETH_CHAIN_ID })
    provider = fm.getProvider()
  }
  if (provider) {
    try {
      await provider.enable()
    } catch {
      return
    }
    return provider
  }
}
const fetchAccountData = async (provider) => {
  store.commit('setWalletModal', { showWallet: false })
  const web3 = new Web3(provider)

  // Get connected chain id from Ethereum node
  const chainId = await web3.eth.getChainId()
  if (chainId != process.env.VUE_APP_ETH_CHAIN_ID) {
    	//判断是否ETH主链
    	//不是主链，你要干点啥都行
  }
  const accounts = await web3.eth.getAccounts()
  //钱包地址存入VUEX
  store.commit('setWalletAddress', { address: accounts[0] })

  if (provider.on) {
    // 监听地址变更d
    provider.on('accountsChanged', (accounts) => {
      store.commit('setWalletAddress', { address: accounts[0] })

      // window.location.reload()

    })
    // 监听网络变更
    provider.on('chainChanged', (chainId) => {
      window.location.reload()
    })
  }
  // 获取钱包余额
  // const rowResolvers = accounts.map(async (address) => {
  //   store.commit('setWalletBalance', { balance: await web3.eth.getBalance(address) })
  //   const ethBalance = web3.utils.fromWei(store.state.wallet.balance, 'ether')
  //   // console.log('ethBalance: ', ethBalance)
  //   const humanFriendlyBalance = parseFloat(ethBalance).toFixed(4)
  //   // console.log('humanFriendlyBalance: ', humanFriendlyBalance)
  // })
  // await Promise.all(rowResolvers)
}
export {
  modalItemClick,
  fetchAccountData
}

//钱包组件 wallet-address-login.vue

//调用组件

//父组件引入
import walletAddressLogin from '@/components/common/wallet-address-login'
export default {
  components: {
    walletAddressLogin
  },
  computed: {
    showLoading() {
      return this.$store.state.waitingToLoad
    }
  }
}
//调用组件
 
 methods:{
	 connectWallet(){
		 this.$store.commit('setWalletModal', { showWallet: true })
	 }
 }

有不明白的可以私聊讨论，web3modal有现成的钱包组件弹窗，以上争对移动端自定义的钱包组件，下一篇会写PC端的web3modal使用方法