dAppBooster/src/components/pageComponents/home/Examples/demos/TransactionButton/NativeToken.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
import { Dialog } from '@chakra-ui/react'
import { type ReactElement, useState } from 'react'
import { type Hash, parseEther, type TransactionReceipt } from 'viem'
import { useSendTransaction } from 'wagmi'
import Wrapper from '@/src/components/pageComponents/home/Examples/demos/TransactionButton/Wrapper'
import TransactionButton from '@/src/components/sharedComponents/TransactionButton'
import { GeneralMessage } from '@/src/components/sharedComponents/ui/GeneralMessage'
import PrimaryButton from '@/src/components/sharedComponents/ui/PrimaryButton'
import { useWeb3StatusConnected } from '@/src/components/sharedComponents/WalletStatusVerifier'

/**
 * This demo shows how to send a native token transaction.
 *
 * Works only on Sepolia chain.
 */
const NativeToken = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const { address } = useWeb3StatusConnected()
  const { mutateAsync: sendTransactionAsync } = useSendTransaction()
  const [minedMessage, setMinedMessage] = useState<string | ReactElement>()

  const handleOnMined = (receipt: TransactionReceipt) => {
    setMinedMessage(
      <>
        <b>Hash:</b> <span>{receipt.transactionHash}</span>
      </>,
    )
    setIsModalOpen(true)
  }

  const handleSendTransaction = (): Promise<Hash> => {
    // Send native token
    return sendTransactionAsync({
      to: address,
      value: parseEther('0.1'),
    })
  }
  handleSendTransaction.methodId = 'sendTransaction'

  return (
    <Dialog.Root
      open={isModalOpen}
      size="xs"
    >
      <Wrapper
        text="Demo transaction that sends 0.1 Sepolia ETH from / to your wallet."
        title="Native token demo"
      >
        <TransactionButton
          labelSending="Sending 0.1 ETH..."
          onMined={handleOnMined}
          transaction={handleSendTransaction}
        >
          Send 0.1 Sepolia ETH
        </TransactionButton>
      </Wrapper>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <GeneralMessage
            actionButton={
              <PrimaryButton
                onClick={() => {
                  setIsModalOpen(false)
                  setMinedMessage('')
                }}
              >
                Close
              </PrimaryButton>
            }
            message={minedMessage}
            title={'Transaction completed!'}
          />
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  )
}

export default NativeToken