dAppBooster/src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/index.tsx at 8543bacf593a17fcecda0cd70e8b8f1f3fb0f78f · BootNodeDev/dAppBooster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { type Address, formatUnits } from 'viem'
import { sepolia } from 'viem/chains'
import { useWriteContract } from 'wagmi'
import BaseERC20ApproveAndTransferButton from '@/src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/ERC20ApproveAndTransferButton'
import MintUSDC from '@/src/components/pageComponents/home/Examples/demos/TransactionButton/ERC20ApproveAndTransferButton/MintUSDC'
import Wrapper from '@/src/components/pageComponents/home/Examples/demos/TransactionButton/Wrapper'
import { useWeb3StatusConnected } from '@/src/components/sharedComponents/WalletStatusVerifier'
import { useSuspenseReadErc20BalanceOf } from '@/src/hooks/generated'
import type { Token } from '@/src/types/token'
import { formatNumberOrString, NumberType } from '@/src/utils/numberFormat'
import { withSuspense } from '@/src/utils/suspenseWrapper'

// USDC token on Sepolia chain
const tokenUSDC_sepolia: Token = {
  address: '0x94a9d9ac8a22534e3faca9f4e7f2e2cf85d5e4c8',
  chainId: sepolia.id,
  decimals: 6,
  name: 'USD Coin',
  symbol: 'USDC',
}

// Using the AAVE staging contract pool apply function
const ABIExample = [
  {
    inputs: [
      {
        internalType: 'address',
        name: 'asset',
        type: 'address',
      },
      {
        internalType: 'uint256',
        name: 'amount',
        type: 'uint256',
      },
      {
        internalType: 'address',
        name: 'onBehalfOf',
        type: 'address',
      },
      {
        internalType: 'uint16',
        name: 'referralCode',
        type: 'uint16',
      },
    ],
    name: 'supply',
    outputs: [],
    stateMutability: 'nonpayable',
    type: 'function',
  },
] as const

/**
 * This demo shows how to approve and send an ERC20 token transaction using the `TransactionButton` component.
 *
 * Works only on Sepolia chain.
 */
const ERC20ApproveAndTransferButton = withSuspense(() => {
  const { address } = useWeb3StatusConnected()
  const { mutateAsync: writeContractAsync } = useWriteContract()

  const { data: balance, refetch: refetchBalance } = useSuspenseReadErc20BalanceOf({
    address: tokenUSDC_sepolia.address as Address,
    args: [address],
  })

  // AAVE staging contract pool address
  const spender = '0x6Ae43d3271ff6888e7Fc43Fd7321a503ff738951'

  const amount = 10000000000n // 10,000.00 USDC

  const handleTransaction = () =>
    writeContractAsync({
      abi: ABIExample,
      address: spender,
      functionName: 'supply',
      args: [tokenUSDC_sepolia.address as Address, amount, address, 0],
    })
  handleTransaction.methodId = 'Supply USDC'

  const formattedAmount = formatNumberOrString(
    formatUnits(amount, tokenUSDC_sepolia.decimals),
    NumberType.TokenTx,
  )

  return balance < amount ? (
    <Wrapper
      text={'Get Sepolia USDC from Aave faucet'}
      title={'Mint USDC'}
    >
      <MintUSDC onSuccess={refetchBalance} />
    </Wrapper>
  ) : (
    <BaseERC20ApproveAndTransferButton
      amount={amount}
      label={`Supply ${formattedAmount} USDC`}
      labelSending="Sending..."
      onSuccess={() => refetchBalance()}
      spender={spender}
      token={tokenUSDC_sepolia}
      transaction={handleTransaction}
    />
  )
})

export default ERC20ApproveAndTransferButton