Web3ModalVue

A single Web3 / Ethereum provider solution for all Wallets

Introduction

Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration.

By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc) and WalletConnect, You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane.

React

web3modal

Usage

Install Web3Modal NPM package

npm install --save web3modal-vue OR

yarn add web3modal-vue

Install Provider packages

/ See Provider Options Section /

Then you can add Web3Modal to your Dapp as follows

<template>
  <div id="app">
    <web3-modal-vue
        ref="web3modal"
        :theme="theme"
        :provider-opti
        cache-provider
    />
  </div>
</template>

import {getLibrary} from "@/utils/web3";
import {ethers} from "ethers";
import {parseInt} from 'lodash'
const web3ModalStore = {     state: {         web3Modal: null,
library: getLibrary(),         active: false,         account: null,         chainId: 0,     },     mutations: {         setWeb3Modal(state, web3Modal) {             state.web3Modal = web3Modal         },         setLibrary(state, library) {             state.library = library         },         setActive(state, active) {             state.active = active         },         setAccount(state, account) {             state.account = account         },         setChainId(state, chainId) {             state.chainId = chainId         }     },     actions: {         async connect({state, commit, dispatch}) {             const provider = await state.web3Modal.connect();
const library = new ethers.providers.Web3Provider(provider)
library.pollingInterval = 12000             commit('setLibrary', library)
const accounts = await library.listAccounts()             if (accounts.length > 0) {                 commit('setAccount', accounts[0])             }             const network = await library.getNetwork()             commit('setChainId', network.chainId)             commit('setActive', true)
provider.on("connect", async (info) => {                 let chainId = parseInt(info.chainId)                 commit('setChainId', chainId)                 console.log("connect", info)             });
provider.on("accountsChanged", async (accounts) => {                 if (accounts.length > 0) {                     commit('setAccount', accounts[0])                 } else {                     await dispatch('resetApp')                 }                 console.log("accountsChanged")             });             provider.on("chainChanged", async (chainId) => {                 chainId = parseInt(chainId)                 commit('setChainId', chainId)                 console.log("chainChanged", chainId)             });
},         async resetApp({state, commit}) {             try {                 await state.web3Modal.clearCachedProvider();             } catch (error) {                 console.error(error)             }             commit('setAccount', null)             commit('setActive', false)             commit('setLibrary', getLibrary())         },     } } export default web3ModalStore;