Ethers를 사용하여 Ether 또는 Matic을 보내는 방법

dapp을 구축하고 있다면 사용자가 서로에게 토큰을 보낼 수 있는 솔루션을 구현해야 할 것입니다.

ethers 및 web3를 사용하여 프런트 엔드에서 ethers 또는 ERC-20 토큰을 보내는 방법은 다음과 같습니다.

먼저 web3 , web3modal 및 ethers 세 개의 라이브러리가 필요합니다.
yarn add ethers web3 web3modal
그런 다음 메타마스크 또는 사용자가 사용 중인 다른 이더리움 웹 지갑에 연결하도록 요청해야 합니다.

const connectToMetamask = async () => {
    const web3Modal = new Web3Modal()
    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)
    const signer = provider.getSigner()
    const address = await signer.getAddress()
    if (!address || !signer || !provider) {
      console.log("ERROR couldn't connect to metamask")
    } 
  }

위의 기능은 네트워크에 거래를 요청할 수 있도록 사용자의 주소와 서명자를 수집합니다. 이 경우 Polygon에서 Matic을 보내는 방법을 보여 드리겠습니다.

const requestPolygonTransaction = async (signer, address, provider) => {
    // check validity of addresses
    if (
      !web3.utils.isAddress(address) || !web3.utils.isAddress(process.env.NEXT_PUBLIC_OWNER_WALLET)
    ) {
      console.log('ERROR invalid wallet addresses provided')
      return
    }

    const transactionParameters = {
      from: address, // sender wallet address
      to: process.env.NEXT_PUBLIC_OWNER_WALLET,  // receiver address
      data: '0x',
      value: ethers.utils.parseEther(polygonAmount),
      gasLimit: ethers.utils.hexlify(10000),
      gasPrice: ethers.utils.hexlify(parseInt(await provider.getGasPrice())),
    }

    await signer
      .sendTransaction(transactionParameters)
      .then((transaction) => {
        isModalVisible = false
        Modal.success({
          title: 'Transaction success!',
      })
      .catch((e) => {
        console.log('failed!')
        Modal.error({
          title: 'Oops transaction failed!',
          content: 'please double check the amount and try again',
        })

        return
      })
  }

도움을 주기 위해 Alchemy에서 제공하는 Polygon 노드 끝점을 사용하고 있습니다.

모든 것을 종합하면 에테르를 사용하여 폴리곤에 matic을 보내는 최종 코드가 보입니다.

import { Modal, Input, Tooltip } from 'antd'
import { ethers } from 'ethers'
import Web3 from 'web3'
import Web3Modal from 'web3modal'
import utilStyles from '../styles/utils.module.css'
import 'antd/dist/antd.css'

const web3 = new Web3(process.env.NEXT_PUBLIC_ALCHEMY_ENDPOINT)

export default function CryptoCheckout({
  isModalVisible,
  handleOk,
  handleCancel,
  polygonAmount,
  updateAmount,
}) {
  const connectToMetamask = async () => {
    const web3Modal = new Web3Modal()
    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)
    const signer = provider.getSigner()
    const address = await signer.getAddress()
    if (address && signer && provider) {
      requestPolygonTransaction(signer, address, provider)
    } else {
      console.log("ERROR couldn't connect to metamask")
    }
  }

  const requestPolygonTransaction = async (signer, address, provider) => {
    // check validity of addresses
    if (
      !web3.utils.isAddress(address) ||
   !web3.utils.isAddress(process.env.NEXT_PUBLIC_OWNER_WALLET)
    ) {
      console.log('ERROR invalid wallet addresses provided')
      return
    }

    const transactionParameters = {
      from: address,
      to: process.env.NEXT_PUBLIC_OWNER_WALLET, 
      data: '0x',
      value: ethers.utils.parseEther(polygonAmount),
      gasLimit: ethers.utils.hexlify(10000),
      gasPrice: ethers.utils.hexlify(parseInt(await provider.getGasPrice())),
    }

    await signer
      .sendTransaction(transactionParameters)
      .then((transaction) => {
        isModalVisible = false
        Modal.success({
          title: 'Tx Success!'
      })
      .catch((e) => {
        console.log('failed!')
        Modal.error({
          title: 'Oops transaction failed!',
          content: 'please double check the amount and try again',
        })

        return
      })
  }

  return (
    <>
      <Modal
        title="Crypto Checkout"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[
          <button
            key="submit"
            className={`${utilStyles.primaryButton}`}
            onClick={connectToMetamask}
          >
            Submit
          </button>,
        ]}
      >
        <p>Enter amount in polygon (MATIC) you'd like to send</p>

        <Input
          prefix=""
          className={`${utilStyles.input}`}
          value={polygonAmount}
          onChange={updateAmount}
          placeholder="50"
          suffix="matic"
        />
      </Modal>
    </>
  )
}

그게 다야! 동일한 방법을 사용하여 에테르 및 기타 이더리움 기반 토큰을 보낼 수도 있습니다.