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

<template>
  <div class="wallet-address-login">
    <!-- 选择钱包 -->
    <van-popup class="walletModule" v-model="showWallet" style="width: 90%">
      <div class="wallet-collection">
    <ul class="wallet">
      <li class="item" v-for="item in walletList" :key="item.index" @click="walletModalClick(item.name)">
        <img class="icon" :src="item.icon" alt="" />
        <div class="title">{{ item.title }}</div>
        <div class="tips">{{ item.tips }}</div>
      </li>
    </ul>
  </div>
    </van-popup>
    <div class="showLoading" v-show="showWalletMouleLoading">
      <van-loading color="#00EAAA" vertical text-color="#fff">Loading...</van-loading>
    </div>
  </div>
</template>

<script>
// 钱包登录相关
import Web3 from 'web3'
import walletCollection from '@/components/common/walletCollection.vue'
import { modalItemClick, fetchAccountData } from '@/web3Modal/index.js'
export default {
  data() {
    return {
      walletList: [
        { icon:'钱包icon', title: 'MetaMask', tips: 'Connect to your MetaMask Wallet', index: 1, name: 'injected' },
        { icon:'钱包icon', title: 'WalletConnect', tips: 'Scan with WalletConnect to connect', index: 2, name: 'walletconnect' },
        { icon:'钱包icon', title: 'Fortmatic', tips: 'Connect with your Fortmatic account', index: 3, name: 'fortmatic' },
        { icon:'钱包icon', title: 'Coinbase Wallet', tips: 'Scan with Coinbase Wallet to connect', index: 4, name: 'walletlink' }
      ]
    }
  },

  computed: {
    address() {
      return this.$store.state.wallet.address
    },
    showWallet: {
      get: function () {
        return this.$store.state.showWallet
      },
      // setter
      set: function (newValue) {
        this.$store.commit('setWalletModal', { showWallet: newValue })
      }
    },
    showWalletMouleLoading() {
      return this.$store.state.showWalletMouleLoading
    }
  },
  methods: {
    async walletModalClick(name) {
      sessionStorage.setItem('walletConnectName', name)
      if (name == 'fortmatic') {
        this.$store.commit('setWalletMouleLoading', { showWalletMouleLoading: true })
      }
      this.$store.commit('setWalletConnectName', { walletConnectName: name })
      const provider = await modalItemClick(name)

      await fetchAccountData(provider)
    },
  components: {
    walletCollection
  }
}
</script>

<style lang="stylus" scoped>
.wallet-address-login {
  .showLoading {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>

//调用组件

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

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