walletConnect连接钱包【web3.0】

walletConnect连接钱包

官网文档地址

https://docs.walletconnect.com/quick-start/dapps/client#sign-message-eth_sign

1、引入依赖

npm install --save @walletconnect/node @walletconnect/qrcode-modal

2、添加js文件，名字meta-provider.js

import NodeWalletConnect from "@walletconnect/node";
import WalletConnectQRCodeModal from "@walletconnect/qrcode-modal";
import {Message} from "element-ui";
import Store from '@/store/index'   //引入在第三步
import Router from '@/router'

const restwallet = () => {
    const walletConnector = new NodeWalletConnect({
        bridge: "https://bridge.walletconnect.org", // Required
    }, {
        clientMeta: {
            description: "WalletConnect NodeJS Client",
            url: "https://nodejs.org/en/",
            icons: ["https://nodejs.org/static/images/logo.svg"],
            name: "WalletConnect",
        },
    });
    // Check if connection is already established
    if (!walletConnector.connected) {
        // create new session
        walletConnector.createSession().then(() => {
            // get uri for QR Code modal
            const uri = walletConnector.uri;
            // display QR Code modal
            WalletConnectQRCodeModal.open(
                uri,
                () => {
                    console.log("QR Code Modal closed");
                },
                true // isNode = true
            );
            Message({
                message: "disconnect!",
                type: "success",
            });
            localStorage.clear();
        });
    }

    // Subscribe to connection events
    walletConnector.on("connect", (error, payload) => {
        if (error) {
            throw error;
        }
        // Close QR Code Modal
        WalletConnectQRCodeModal.close(
            true // isNode = true
        );

        // Get provided accounts and chainId
        const {accounts, chainId} = payload.params[0];
        // console.log(chainId, 'payload.params')
        if (chainId != 56) {
            localStorage.removeItem("walletconnect")
            Message({
                message: "please use Binance Smart Chain!",
                type: "error",
                duration: 5000
            });
        }
        //  console.log(accounts, "accounts");
        let myeth = accounts[0];
        let wallet = myeth.slice(0, 6) + "..." + myeth.slice(-4)
        Store.commit('set_address', myeth)
        Store.commit('set_wallet', wallet)
        Store.commit('set_address', myeth)
        sessionStorage.setItem("address",myeth)
    });

    walletConnector.on("session_update", (error, payload) => {
        if (error) {
            throw error;
        }
        // Get updated accounts and chainId
        const {accounts, chainId} = payload.params[0];
    });
    walletConnector.on("disconnect", (error, payload) => {
        if (error) {
            throw error;
        }
        // Delete walletConnector
    });
}
export default {
    restwallet
};

3、引入index文件 index.js路径@/store/index

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//全局变量数据的操作
export default new Vuex.Store({
    state: {
        token: '',
        address: '',
        wallet: '',
        link: 'http://127.0.0.1'
    },
    mutations: {
        set_token(state, token) {
            state.token = token
            sessionStorage.token = token
        },
        del_token(state) {
            state.token = ''
            sessionStorage.removeItem('token')
        },
        set_address(state, address) {
            state.address = address
            sessionStorage.address = address
        },
        del_address(state) {
            state.address = ''
            sessionStorage.removeItem('address')
        },
        set_wallet(state, address) {
            state.wallet = address
            sessionStorage.wallet = address
        },
        del_wallet(state) {
            state.wallet = ''
            sessionStorage.removeItem('wallet')
        },
        set_link(state, link) {
            state.link = link
            localStorage.link = link
        },
    },
});

4、添加点击事件

 <div @click="login()">
    <div >连接钱包</div>
</div> 

import restApi from "../service/web3/meta-provider.js";  //这个是第二步定义的js

methods: {
login() {
      restApi.restwallet();
   },
}

成功之后如图

所用依赖版本

"@walletconnect/node": "^1.0.0",
"@walletconnect/qrcode-modal": "^1.7.8",
"web3": "^0.20.7",
"web3-eth-abi": "^1.7.3",
"web3-utils": "^1.6.0",
"xhr2": "^0.2.1",
"keccak256": "^1.0.6",