web3modal-vue2

    1.0.9 • Public • Published

    Web3ModalVue

    Fork from

    https://github.com/SmallRuralDog/web3modal-vue.git

    Thanks, SmallRuralDog!!

    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

    1. Install Web3Modal NPM package
    npm install --save web3modal-vue2
    
    # OR
    
    yarn add web3modal-vue2
    1. Install Provider packages
    /* See Provider Options Section */
    1. Then you can add Web3Modal to your Dapp as follows
    <template>
      <div id="app">
        <web3-modal-vue
          ref="web3modal"
          :theme="theme"
          :provider-options="providerOptions"
          cache-provider
        />
      </div>
    </template>
    <script>
    import Web3ModalVue from 'web3modal-vue'
    import WalletConnectProvider from '@walletconnect/web3-provider'
    import { web3Modal } from './config/mixins'
    import Header from '@/components/Header'
    
    export default {
      components: {
        Header,
        Web3ModalVue,
      },
      mixins: [web3Modal],
      data() {
        return {
          theme: 'light',
          providerOptions: {
            walletconnect: {
              package: WalletConnectProvider,
              options: {
                infuraId: '-',
              },
            },
          },
          number: 0,
          balance: 0,
        }
      },
      created() {
        if (
          window.matchMedia &&
          window.matchMedia('(prefers-color-scheme: dark)').matches
        ) {
          this.theme = 'dark'
        }
      },
      mounted() {
        this.$nextTick(async () => {
          const web3modal = this.$refs.web3modal
          this.$store.commit('setWeb3Modal', web3modal)
          if (web3modal.cachedProvider) {
            await this.$store.dispatch('connect')
            this.subscribeMewBlockHeaders()
          }
        })
      },
      methods: {
        connect() {
          this.$store.dispatch('connect')
        },
      },
    }
    </script>
    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

    Provider Options

    These are all the providers available with Web3Modal and how to configure their provider options:

    Who using it

    Submit my Dapp

    Example

    https://github.com/SmallRuralDog/web3modal-vue/tree/master/example

    Demo

    https://smallruraldog.github.io/web3modal-vue

    License

    MIT

    Install

    npm i web3modal-vue2

    DownloadsWeekly Downloads

    3

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    224 kB

    Total Files

    65

    Last publish

    Collaborators

    • dirmich