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.
Top comments (0)