How to send Ether or Matic using Ethers

If you're building a dapp you'll probably need to implement a solution for users to send tokens to one another.

Here's how to send ethers or any ERC-20 token from the frontend using ethers and web3.

First we'll need these three libraries: web3, web3modal and ethers

yarn add ethers web3 web3modal

Then we need to request to connect to Metamask or any other Ethereum web wallet a user is using.

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

The function above collects the user's address and signer which allows us to request a transaction to the network. In this case I will demonstrate how to send Matic on Polygon.

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

To help with things I'm using a Polygon node endpoint provided by Alchemy.

Putting things all together this is what my final code looks like to send matic on polygon using ethers.

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

That's it! You can also use the same method to send ether and any other Ethereum based token.

Blog

How to send Ether or Matic using Ethers

Cormac

Join Our Newsletter. No Spam, Only the good stuff.

Related