NEAR for Ethereum developers
NEAR components are chain-agnostic, enabling you to create decentralized frontends tailored for any Ethereum dApps. Throughout this article, we'll navigate prevalent use-cases with code snippets. You’ll also find links to exemplary NEAR components for reference.
Interact with Ethereum using Ethers.js
The NEAR VM has imported the Ethers.js library, allowing for seamless interaction with Ethereum nodes using JavaScript in a NEAR component.
The Ethers
object exposes the provider connection:
Ethers.provider()
is a read-only connection to the blockchain, which allows querying the blockchain state (e.g., account, block or transaction details), querying event logs or evaluating read-only code using call.Ethers.provider().getSigner()
abstracts the class that interacts with an accountEthers.provider().getSigner().getBalance()
returns a Promise that resolves to the account address.
Ethers.provider().getBlockNumber()
looks up the current block number (i.e. height)Ethers.provider().getFeeData()
gets the best guess at the recommended FeeData
You can see various ways of using Ethers
objects on the Ethers documentation portal).
Furthermore, numerous basic tools can be found in the ethers.utils object (be aware of the lowercase 'e').
ethers.utils.parseUnits(value, unit)
converts the decimal string value to a BigInt, assuming unit decimal places. The unit may the number of decimal places or the name of a unit (e.g. "gwei" for 9 decimal places).ethers.utils.formatEther(wei)
converts value into a decimal string using 18 decimal places.
Example showing the difference between Ethers.provider()
and ethers.utils
:
Ethers.provider()
.getSigner()
.getBalance()
.then((balance) => {
console.log("Your ETH balance: ", ethers.utils.formatEther(balance))
});
FAQ
How to get a user account?
const receiver = Ethers.provider().send("eth_requestAccounts", [])[0];
How to get the current chain ID?
Ethers.provider().getNetwork().then((chainIdData) => {
console.log(chainIdData.chainId);
});
How to show a Web3Login button?
<Web3ConnectButton
className="my-class"
connectLabel="Connect Web3 Wallet"
disconnectLabel="Disconnect Web3 Wallet"
connectingLabel="Connecting..."
/>
How to load a contract ABI?
const abi = fetch(`https://eth.blockscout.com/api?module=contract&action=getabi&address=0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2`);
if (!abi.ok) {
return "Loading";
}
console.log(abi.body.result);
How to load data from EVM nodes?
// create a contract interface
const iface = new ethers.utils.Interface(abi.body.result);
// encode the balanceOf get request
const encodedBalanceData = iface.encodeFunctionData("balanceOf", [receiver]);
// perform a call
Ethers.provider().call({
to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
data: encodedBalanceData,
})
.then((rawBalance) => {
// decode the result
const receiverBalanceHex = iface.decodeFunctionResult(
"balanceOf",
rawBalance
);
console.log(Big(receiverBalanceHex).toFixed());
});
How to send a transaction to Ethereum nodes?
// create a contract instance
const wEthContract = new ethers.Contract(
"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
abi.body.result,
Ethers.provider().getSigner()
);
// perform a given method (withdraw in this case)
wEthContract
.withdraw(balance, {
value: 0
})
.then((transactionHash) => {
console.log(transactionHash);
});
How to convert HEX values to human readable numbers?
// use Big().toFixed method
Big(balanceHex).toFixed()
How to locate the ABI of a Smart Contract?
Utilize platforms like etherscan.com and blockscout.com, or delve into the project's GitHub repositories and documentation.
Is there an example of applications with a description of how they were created?
Yes, there is an article that describes best practices for creating applications for Ethereum developers on NEAR, with a breakdown of individual steps.
Examples
Below is a curated list of NEAR components, developed by the community, that epitomize the best practices for creating NEAR components:
- Unwrap ETH
- ERC-20 Token sender
- Lido Component
- Swap component (a set of swap dApps for Ethereum Mainnet, Polygon Mainnet, Polygon zkevm, Aurora, NEAR, etc)
- 1inch
- Liquity