Skip to content

Latest commit

 

History

History
176 lines (119 loc) · 4.31 KB

about.mdx

File metadata and controls

176 lines (119 loc) · 4.31 KB
Raw

import CloudBanner from '../../components/CloudBanner' import PlatformTabs from '../../components/PlatformTabs' import PlatformTabItem from '../../components/PlatformTabItem'

import WagmiImplementation from './wagmi/about/implementation.mdx' import WagmiModal from './wagmi/about/triggermodal.mdx'

import Wagmi1Implementation from './wagmi1/about/implementation.mdx' import Wagmi1Modal from './wagmi1/about/triggermodal.mdx'

import Ethers5Implementation from './ethers5/implementation.mdx'

import EthersImplementation from './ethers/about/implementation.mdx' import EthersModal from './ethers/about/triggermodal.mdx'

Vue

Introduction

Web3Modal SDK has support for Wagmi and Ethers, which will help you interact with wallets and smart contracts. Choose one of these Ethereum libraries to get started.

Installation

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "wagmi1", "ethers5","ethers"]}>

npm install @web3modal/wagmi @wagmi/core @wagmi/connectors viem

:::caution Wagmi v1 has been deprecated. Please upgrade to Wagmi v2. Read the migration guide. :::

npm install @web3modal/wagmi@3.5.7 @wagmi/core@1.4.13 viem@1.21.4
npm install @web3modal/ethers5 ethers@5.7.2
npm install @web3modal/ethers ethers

Implementation

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "wagmi1", "ethers5","ethers"]}>

Trigger the modal

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "wagmi1", "ethers5","ethers"]}>

Smart Contract Interaction

<PlatformTabs groupId="eth-lib" activeOptions={["wagmi", "ethers"]}>

Wagmi actions can help us interact with wallets and smart contracts:

<script setup lang="ts">
  import { readContract } from '@wagmi/core'
  import { USDTAbi } from '../abi/USDTAbi'

  const USDTAddress = '0x...'

  const data = readContract({
    abi: USDTAbi,
    address: USDTAddress,
    functionName: 'symbol'
  })
</script>

Read more about Wagmi actions for smart contract interaction here.

Ethers can help us interact with wallets and smart contracts:

<script setup lang="ts">
  import { BrowserProvider, Contract, formatUnits } from 'ethers'

  const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'

  // The ERC-20 Contract ABI, which is a common contract interface
  // for tokens (this is the Human-Readable ABI format)
  const USDTAbi = [
    'function name() view returns (string)',
    'function symbol() view returns (string)',
    'function balanceOf(address) view returns (uint)',
    'function transfer(address to, uint amount)',
    'event Transfer(address indexed from, address indexed to, uint amount)'
  ]

  const walletProvider = modal.getWalletProvider()

  async function getBalance() {
    if (!isConnected) throw Error('User disconnected')

    const ethersProvider = new BrowserProvider(walletProvider)
    const signer = await ethersProvider.getSigner()
    // The Contract object
    const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
    const USDTBalance = await USDTContract.balanceOf(address)

    console.log(formatUnits(USDTBalance, 18))
  }
</script>