npm install web3modal-web3js web3js

import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'

// 1. Get projectId, Your Project ID can be obtained from walletconnect.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Set chains
const mainnet = {
  chainId: 1,
  name: 'Ethereum',
  currency: 'ETH',
  explorerUrl: 'https://etherscan.io',
  rpcUrl: 'https://cloudflare-eth.com'
}

// 3. Create a metadata object
const metadata = {
  name: 'My Website',
  description: 'My Website description',
  url: 'https://mywebsite.com', // origin must match your domain & subdomain
  icons: ['https://avatars.mywebsite.com/']
}

// 4. Create web3 config
const web3Config = defaultConfig({
  /*Required*/
  metadata,

  /*Optional*/
  enableEIP6963: true, // true by default
  enableInjected: true, // true by default
  enableCoinbase: true, // true by default
  rpcUrl: '...', // used for the Coinbase SDK
  defaultChainId: 1, // used for the Coinbase SDK
})

// 5. Create a Web3Modal instance
createWeb3Modal({
  web3Config,
  chains: [mainnet],
  projectId,
  enableAnalytics: true // Optional - defaults to your Cloud configuration
})

export default function App() {
  return <YourApp />
}

export default function ConnectButton() {
  return <w3m-button/>
}

import Web3 from 'web3';
import { ERC20ABI } from './contracts/ERC20';

const USDTAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7';

function Components() {
  const { isConnected } = useWeb3ModalAccount()
  const { walletProvider } = useWeb3ModalProvider()
  const [USDTBalance, setUSDTBalance] = useState(0);
  const [smartContractName, setSmartContractName] = useState('');

  async function getContractInfo() {
    if (!isConnected) throw Error('not connected');
    const web3 = new Web3({
      provider: walletProvider,
      config: { defaultNetworkId: chainId },
    });
    const contract = new web3.eth.Contract(ERC20ABI, USDTAddress);
    const balance = await contract.methods.balanceOf(address).call();
    const name = (await contract.methods.name().call()) as string;
    setUSDTBalance(Number(balance));
    setSmartContractName(name);
  }

  return <> <button onClick={getContractInfo}>Get User Balance and Contract name</button> <p> Balance: {USDTBalance} smartContractName: {smartContractName}</p></>
}