Skip to content

Latest commit

 

History

History
183 lines (125 loc) · 4.61 KB

about.mdx

File metadata and controls

183 lines (125 loc) · 4.61 KB
Raw

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

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 Ethers5Modal from './ethers5/triggermodal.mdx'

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

React

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 viem @tanstack/react-query

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

npm install @web3modal/wagmi@3.5.7 wagmi@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 hooks can help us interact with wallets and smart contracts:

import { useReadContract } from 'wagmi'
import { USDTAbi } from '../abi/USDTAbi'

const USDTAddress = '0x...'

function App() {
  const result = useReadContract({
    abi: USDTAbi,
    address: USDTAddress,
    functionName: 'totalSupply'
  })
}

Read more about Wagmi hooks for smart contract interaction here.

Ethers can help us interact with wallets and smart contracts:

import { useWeb3ModalProvider, useWeb3ModalAccount } from '@web3modal/ethers/react'
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)'
]

function Components() {
  const { address, chainId, isConnected } = useWeb3ModalAccount()
  const { walletProvider } = useWeb3ModalProvider()

  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))
  }

  return <button onClick={getBalance}>Get User Balance</button>
}

Video Tutorial