Simple WalletConnect Web3Modal v2 integration package for Vue3 apps.

Versions

| package version | web3modal | | -------------------------------------------------------- | -------------------------------------------------------- | | 2.x.x | v2 |

Table of Contents

• Versions
• Getting started
  • Installation
  • Setup
    • Configuration
    • Custom chain
    • Custom rpc provider
• Usage
  • Basic usage
    • Info about the user's connected wallet and wallet type
    • Connect wallet button
    • Switch chain
    • Select chain via Web3Modal
    • FetchGasPrice
    • FetchBlockNumber
    • FetchTransaction
    • FetchTransactionReceipt
    • PrepareSendTransaction
    • SendTransaction
    • WaitForTransaction
    • SignMessage
    • Multicall
    • FetchBalance
    • FetchToken
    • ReadContract
    • WriteContract
    • EstimateWriteContractGas
    • ParseEvents
    • WatchContractEvent
    • WatchAsset
  • Composable
    • UseFetchBalance
• Demo
• Example
• Faq
• License
• Other projects

Getting started

Installation

Use yarn or npm to install the package @kolirt/vue-web3-auth.

npm install --save @kolirt/vue-web3-auth

yarn add @kolirt/vue-web3-auth

Setup

Configuration

Add dependencies to your main.js:

import { createApp } from 'vue'
import { Chains, createWeb3Auth } from '@kolirt/vue-web3-auth'

const app = createApp({...})

app.use(createWeb3Auth({
  projectId: '', // generate here https://cloud.walletconnect.com/ and turn on 'Supports Sign v2'
  chains: [
    Chains.bsc,
    Chains.mainnet,
    Chains.polygon
  ]
}))

app.mount('#app')

Custom chain

import { type Chain } from '@kolirt/vue-web3-auth'

const bsc: Chain = {
  id: 56,
  name: 'BNB Smart Chain',
  network: 'bsc',
  nativeCurrency: {
    decimals: 18,
    name: 'BNB',
    symbol: 'BNB'
  },
  rpcUrls: {
    default: {
      http: ['https://rpc.ankr.com/bsc'],
      webSocket: ['wss://bsc-ws-node.nariox.org:443']
    },
    public: {
      http: ['https://rpc.ankr.com/bsc'],
      webSocket: ['wss://bsc-ws-node.nariox.org:443']
    }
  },
  blockExplorers: {
    etherscan: {
      name: 'BscScan',
      url: 'https://bscscan.com'
    },
    default: {
      name: 'BscScan',
      url: 'https://bscscan.com'
    }
  },
  contracts: {
    multicall3: {
      address: '0xca11bde05977b3631167028862be2a173976ca11',
      blockCreated: 15921452
    }
  }
}

Custom rpc provider

By default, the package uses the walletconnect rpc provider. If you want to use a custom rpc from the chain, you can set the enableCustomProvider option to true.

app.use(createWeb3Auth({
  enableCustomProvider: true
})

Usage

Basic usage

Info about the user's connected wallet and wallet type

import { account } from '@kolirt/vue-web3-auth'

account.connected // if connected
account.address // current account address
account.shortAddress // current account address with 3 dots
account.wallet.id // current wallet id
account.wallet.name // current wallet name

Connect wallet button

<script setup lang="ts">
import { account, accountDetails, connect, disconnect } from '@kolirt/vue-web3-auth'
</script>

<template>
  <div v-if="account.connected">
    <button @click="accountDetails()">
      {{ account.address }}
    </button>
    <button @click="disconnect()">Disconnect from {{ account.wallet.name }}</button>
  </div>
  <button v-else @click="connect()">Connect wallet</button>
</template>

Switch chain

To switch the chain, you need to add it during configuration.

<script setup lang="ts">
import { switchChain, Chains } from '@kolirt/vue-web3-auth'
</script>

<template>
  <button @click="switchChain(Chains.polygon)">Switch to polygon</button>
</template>

Select chain via Web3Modal

<script setup lang="ts">
import { selectChain } from '@kolirt/vue-web3-auth'
</script>

<template>
  <button @click="selectChain">Select chain</button>
</template>

FetchGasPrice

import { fetchGasPrice } from '@kolirt/vue-web3-auth'

const data = await fetchGasPrice()

/**
 * Result in data
 *
 * {
 *  formatted: {
 *   gasPrice: '3'
 *  },
 *  gasPrice: 3000000000n
 * }
 */

FetchBlockNumber

import { fetchBlockNumber } from '@kolirt/vue-web3-auth'

const data = await fetchBlockNumber()

/**
 * Result in data
 *
 * 29288229n
 */

FetchTransaction

import { fetchTransaction } from '@kolirt/vue-web3-auth'

const transaction = await fetchTransaction({
  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb'
})

FetchTransactionReceipt

import { fetchTransactionReceipt } from '@kolirt/vue-web3-auth'

const transactionReceipt = await fetchTransactionReceipt({
  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb'
})

PrepareSendTransaction

import { prepareSendTransaction } from '@kolirt/vue-web3-auth'

const preparedTxn = await prepareSendTransaction({
  to: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',
  value: 1n
})

SendTransaction

import { sendTransaction } from '@kolirt/vue-web3-auth'

const txn = await sendTransaction({
  to: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',
  value: 1n
})

WaitForTransaction

import { waitForTransaction } from '@kolirt/vue-web3-auth'

const transactionReceipt = await waitForTransaction({
  hash: '0x7ed8dc64f54ae43f4d53173e95aa929c52de44ec5cea8c28246989914ed7f4fb',
})

SignMessage

import { signMessage } from '@kolirt/vue-web3-auth'

const signature = await signMessage('test message')

Multicall

import { chain, multicall, multicallABI } from '@kolirt/vue-web3-auth'

let data = await multicall({
  calls: [
    {
      abi: multicallABI,
      contractAddress: chain.value.contracts.multicall3.address,
      calls: [
        ['getEthBalance', ['0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9']],
        ['getEthBalance', ['0x295e26495CEF6F69dFA69911d9D8e4F3bBadB89B']],
        ['getEthBalance', ['0x2465176C461AfB316ebc773C61fAEe85A6515DAA']]
      ]
    }
  ]
})

/**
 * Result in data
 *
 * [
 *  {result: 1908669631824871303n, status: "success"},
 *  {result: 133515691552422277n, status: "success"},
 *  {result: 2080909582708869960n, status: "success"}
 * ]
 */

FetchBalance

import { fetchBalance } from '@kolirt/vue-web3-auth'

let bnbBalance = await fetchBalance({
  address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9'
})

/**
 * Result in bnbBalance
 *
 * {
 *  decimals: 18,
 *  formatted: '1.908669631824871303',
 *  symbol: 'BNB',
 *  value: 1908669631824871303n
 * }
 */

let tokenBalance = await fetchBalance({
  address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9',
  token: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c'
})

/**
 * Result in tokenBalance
 *
 * {
 *  decimals: 18,
 *  formatted: '0',
 *  symbol: 'WBNB',
 *  value: 0n
 * }
 */

FetchToken

import { fetchToken } from '@kolirt/vue-web3-auth'

let data = await fetchToken({
  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c'
})

/**
 * Result in data
 *
 * {
 *  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
 *  decimals: 18,
 *  name: 'Wrapped BNB',
 *  symbol: 'WBNB',
 *  totalSupply: {
 *   formatted: '2538454.736169014001284694',
 *   value: 2538454736169014001284694n
 *  }
 * }
 */

ReadContract

import { erc20ABI, readContract } from '@kolirt/vue-web3-auth'

let data = await readContract({
  address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c', // wbnb on bsc
  abi: erc20ABI,
  functionName: 'balanceOf',
  args: ['0x36696169c63e42cd08ce11f5deebbcebae652050']
})

/**
 * Result in data
 *
 * 107109316688516684525777n
 */

WriteContract

import { erc20ABI, writeContract } from '@kolirt/vue-web3-auth'

await writeContract({
  abi: erc20ABI,
  address: '0x55d398326f99059fF775485246999027B3197955',
  functionName: 'approve',
  args: ['0x685B1ded8013785d6623CC18D214320b6Bb64759', 100]
}).then(async (data) => {
  console.log('hash', data.hash)

  await data.wait()

  console.log('transaction successfully')
})

EstimateWriteContractGas

import { erc20ABI, estimateWriteContractGas } from '@kolirt/vue-web3-auth'

const gas = await estimateWriteContractGas({
  abi: erc20ABI,
  address: '0x55d398326f99059fF775485246999027B3197955',
  functionName: 'approve',
  args: ['0x685B1ded8013785d6623CC18D214320b6Bb64759', 100]
}).catch((e) => {})

ParseEvents

import { erc20ABI, fetchTransactionReceipt, parseEvents } from '@kolirt/vue-web3-auth'

const transactionReceipt = await fetchTransactionReceipt({
  hash: '0x2a328737e94bb243b1ff64792ae68cd6c179797dc1de1e092c96137f0d3404c3'
})

const events = parseEvents({ abi: erc20ABI }, transactionReceipt)
/**
 * Result in events
 *
 * [
 *  {
 *   args: {
 *    owner: '0xaA916B4a4cDbEFC045fa24542673F500a11F5413',
 *    spender: '0x023963f7e755bE4F743047183d1F49C31E84AEa4',
 *    value: 1000000000000000000n
 *   },
 *   eventName: 'Approval'
 *  }
 * ]
 */

WatchContractEvent

import { erc20ABI, watchContractEvent } from '@kolirt/vue-web3-auth'

const unwatch = watchContractEvent(
  {
    address: '0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c',
    abi: erc20ABI,
    eventName: 'Transfer'
  },
  (log) => {
    console.log(log)
  }
)

WatchAsset

import { watchAsset } from '@kolirt/vue-web3-auth'

const result = watchAsset({
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  decimals: 18,
  symbol: 'DAI'
})

Composable

UseFetchBalance

import { useFetchBalance } from '@kolirt/vue-web3-auth'

// use `fetch` for manual init when `disableAutoFetch` is `true`
const { loaded, fetching, data, fetch, reload, disableAutoReload } = useFetchBalance(
  {
    address: '0x2D4C407BBe49438ED859fe965b140dcF1aaB71a9'
  },
  {
    disableAutoFetch: false,
    autoReloadTime: 30000,
    disableAutoReload: false
  }
)

Demo

Demo here.

Example

Example here.

FAQ

Check closed issues to get answers for most asked questions.

License

MIT.

Other projects

Check out my other projects:

• @kolirt/vue-modal - easy to use and highly customizable Vue3 modal package.