在上一篇文章中，我介绍了一些连接钱包关键性函数方法，接下来我会教大家将他们串联起来后实现以下效果：
因为连接钱包后，我们需要将钱包地址，钱包余额，网络信息等保存，全局提供给其他页面使用，所以，我使用Vuex来做连接的功能和存储。
Connect连接钱包
连接区块网络函数：
async connectNetwork({ commit, dispatch }, data) {
let web3 = {
providerInstance: null,
userAddress: '',
userBalance: 0,
symbol: '',
isConnect: false,
network: null
}
try {
switch (data.type) {
case 1:
if (!isMetaMaskProvider()) {
alert('Consider installing MetaMask')
commit('setWeb3', web3)
return
}
await window.ethereum.enable()
let provider = new ethers.providers.Web3Provider(
window.ethereum,
'any'
)
dispatch('setProvider', () => provider)
break
default:
break
}
} catch (error) {
alert(error.message)
}
}在页面初次打开时，我们需要判断钱包是否已经连接，如果没有连接，使用rpc默认网络连接，未连接时，我使用的是BSC主网的网络信息。
初始化函数：
async isConnect({ dispatch, commit }) {
let web3 = {
providerInstance: null,
userAddress: '',
userBalance: 0,
symbol: '',
isConnect: false,
network: null
}
let provider
let defautnet = networkList.filter(val => val.chain === 'BSC')[0]
if (!isMetaMaskProvider()) {
let chain = localStorage.getItem('chain')
if (!chain) chain = 'BSC' // 默认BSC网络
let currents = networkList.filter(val => val.chain === chain)
// 用网络配置中的第一个RPC
provider = new ethers.providers.JsonRpcProvider(currents[0].rpcUrls[0])
} else {
provider = new ethers.providers.Web3Provider(window.ethereum)
}
web3.providerInstance = () => provider
let signer = provider.getSigner()
signer
.getAddress()
.then(async address => {
web3.network = await provider.getNetwork()
dispatch('connectNetwork', { type: 1 })
commit('setCurrentNetwork', await web3.network)
})
.catch(error => {
console.log(defautnet)
commit('setCurrentNetwork', defautnet)
commit('setWeb3', web3)
})
},state中重要参数保存：
state: {
web3: {
providerInstance: null,
userAddress: '',
userBalance: 0,
fireBalance: 0,
isConnect: false,
network: null,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone // Asia/Shanghai
},
currentNetwork: {
name: 'fire',
symbol: 'fire',
chainId: '',
current: {
name: 'Fire',
symbol: 'Fire',
decimals: 18
},
logo: require('@/assets/fire.png'),
type: 2,
status: 0
}
},网络切换功能
在连接钱包后，可以通过钱包去切换网络，也可以通过我们自己写代码去实现切换。
Pinksale中支持的网络很多，关键看你自己发布的合约地址都在哪些网络中。
本教程支持BSC的主网和测试网络，如果你们想添加其他网络，可以自己查找如ETH的网络配置信息添加配置即可
export const networkList = [
{
name: 'Binance Smart Chain Mainnet',
symbol: 'BSC MAINNET',
chainId: 56,
tag: 'bsc',
chain: 'BSC',
logo: require('@/assets/ic-bsc.svg'),
rpcUrls: ['https://bsc-dataseed1.binance.org/'],
blockExplorerUrls: ['https://bscscan.com/'],
erc20symbol: 'BNB',
tokens: {
WETH: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
USDT: '0x55d398326f99059ff775485246999027b3197955'
},
launchpadTokens: {
BNB: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
USDT: '0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56',
BUSD: '0xe9e7CEA3DedcA5984780Bafc599bD69ADd087D56'
},
dividendTracker: '0x8e268141DaF54aA1fcdB5574A72feB0eC2fC3970',
current: {
name: 'BNB',
symbol: 'BNB',
decimals: 18
},
routers: [
{
name: 'Pancakeswap',
address: '0x10ED43C718714eb63d5aA57B78B54704E256024E',
url: 'https://pancakeswap.finance/swap'
}
],
type: 1,
status: 0
},
{
name: 'Binance Smart Chain Testnet',
symbol: 'BSC TESTNET',
chainId: 97,
logo: require('@/assets/ic-bsc.svg'),
type: 2,
status: 0,
erc20symbol: 'BNB',
routers: [
{
name: 'PancakeSwap test',
address: '0xB6BA90af76D139AB3170c7df0139636dB6120F7e',
url: 'https://swap.bsctest.jishutuan.com/#/swap'
}
],
tokens: {
WETH: '0x4c6289890009d7358e522d8BA97287a29F1988bB',
USDT: '0xEdA5dA0050e21e9E34fadb1075986Af1370c7BDb'
},
launchpadTokens: {
BNB: '0x4c6289890009d7358e522d8BA97287a29F1988bB',
USDT: '0xEdA5dA0050e21e9E34fadb1075986Af1370c7BDb'
},
dividendTracker: '0x6d78A4A7F840C09FDF5Af422a4FBDFA99E250Bee',
current: {
name: 'BNB',
symbol: 'BNB',
decimals: 18
},
rpcUrls: [
'https://data-seed-prebsc-1-s1.binance.org:8545/',
'https://data-seed-prebsc-2-s1.binance.org:8545/',
'https://data-seed-prebsc-1-s2.binance.org:8545/'
],
blockExplorerUrls: ['https://testnet.bscscan.com/']
},
{
name: 'Other Net',
symbol: 'Other Net',
chainId: '',
logo: require('@/assets/fire.png'),
type: 2,
status: 0,
current: {
name: 'fire',
symbol: 'fire',
decimals: 18
},
hidden: true
}
]
切换网络的关键性代码：
async changeNetwork({ commit, dispatch }, data) {
let chainId = data.chainId
if (chainId == 1) {
chainId = '0x1'
} else {
chainId = ethers.utils.hexlify(data.chainId)
}
try {
await web3.currentProvider.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: chainId }]
})
} catch (error) {
if (error.code === 4902) {
try {
await web3.currentProvider.request({
method: 'wallet_addEthereumChain',
params: [
{
chainId: chainId,
chainName: data.name,
rpcUrls: data.rpcUrls,
nativeCurrency: data.current,
blockExplorerUrls: data.blockExplorerUrls
}
]
})
} catch (error) {
alert(error.message)
}
}
}
}实现效果如下：
连接后，我们就可以在其他页面直接使用相关信息：
networkInfo() {
return this.$store.state.web3Network.currentNetwork;
},
userAddress() {
return this.$store.state.web3Network.web3.userAddress;
},
userBalance() {
return this.$store.state.web3Network.web3.userBalance;
},
web3provider() {
return this.$store.state.web3Network.web3.providerInstance;
},本教程仅供学习，如有疑问，请移步Telegram
