diff --git a/docs/developer/build-on-minipay/overview.mdx b/docs/developer/build-on-minipay/overview.mdx index dc90c58bc3..2277ca5abd 100644 --- a/docs/developer/build-on-minipay/overview.mdx +++ b/docs/developer/build-on-minipay/overview.mdx @@ -124,7 +124,7 @@ This will provide you with a public URL that tunnels to your localhost. ### Get your dApp ready for MiniPay :::warning -MiniPay uses Custom [Fee Abstraction](../fee-currency.md) based transactions, which is not yet supported by Ethers.js, so if you are using Ethers.js for smart contract interactions in your dapp, those won't work inside of MiniPay. Make sure to use viem or wagmi. If you are using web3.js make sure to use our [custom built plugin for fee abstraction](../web3/index.md). +MiniPay uses Custom [Fee Abstraction](../fee-currency.md) based transactions, which is not yet supported by Ethers.js, so if you are using Ethers.js for smart contract interactions in your dapp, those won't work inside of MiniPay. Make sure to use viem or wagmi. If you are using Web3.js make sure to use our [custom built plugin for fee abstraction](../web3/index.mdx). ::: #### 1. Viem diff --git a/docs/developer/contractkit/notes-web3-with-contractkit.md b/docs/developer/contractkit/notes-web3-with-contractkit.md index 3a9a09cf06..38bb535a87 100644 --- a/docs/developer/contractkit/notes-web3-with-contractkit.md +++ b/docs/developer/contractkit/notes-web3-with-contractkit.md @@ -49,4 +49,4 @@ This is also the reason that the `Kit` requires a valid provider from the beginn ## Local Signing -As part of the [Donut hardfork](https://medium.com/celoorg/dissecting-the-donut-hardfork-23cad6015fa2) network upgrade that occurred on May 19th, 2021, the Celo network now accepts Ethereum-style transactions as well as Celo transactions. This means that you can use Ethereum transaction signing tools (like [Metamask](/wallet/metamask/use), web3.js and ethers.js) to sign transactions for the Celo network. Remember that Celo is a separate layer 1 blockchain from Ethereum, so do not send Ethereum assets directly to your Celo account address on Ethereum. +As part of the [Donut hardfork](https://medium.com/celoorg/dissecting-the-donut-hardfork-23cad6015fa2) network upgrade that occurred on May 19th, 2021, the Celo network now accepts Ethereum-style transactions as well as Celo transactions. This means that you can use Ethereum transaction signing tools (like [Metamask](/wallet/metamask/use), Web3.js and ethers.js) to sign transactions for the Celo network. Remember that Celo is a separate layer 1 blockchain from Ethereum, so do not send Ethereum assets directly to your Celo account address on Ethereum. diff --git a/docs/developer/fee-currency.md b/docs/developer/fee-currency.md index 6c33ab13c6..0af6d3b9f1 100644 --- a/docs/developer/fee-currency.md +++ b/docs/developer/fee-currency.md @@ -3,7 +3,7 @@ title: Implementing Fee Abstraction in Wallets description: How to allow your wallet users to pay for gas fee using alternate fee currencies --- -Celo allows paying gas fees in currency other than the native currency. The tokens that can be used to pay gas fees is controlled via governance and the list of tokens allowed is maintained in **FeeCurrencyWhitelist.sol**. +Celo allows paying gas fees in currency other than the native currency. The tokens that can be used to pay gas fees is controlled via governance and the list of tokens allowed is maintained in [**FeeCurrencyWhitelist.sol**](../contract-addresses.md). Alternate fee currency works with EOAs and no paymaster is required! diff --git a/docs/developer/web3/index.md b/docs/developer/web3/index.md deleted file mode 100644 index f8b7d354fd..0000000000 --- a/docs/developer/web3/index.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Web3.js -description: Using Web3.js with Celo ---- - -## Web3.js - -Web3.js was established in 2014, making it the oldest web3 library. With extensive documentation, an active community and modular design, Web3.js is powerful and easy-to-use. It has _support for Celo features via plugins since version 4.13.1_. - -The [Web3.js docs](https://docs.web3js.org/) have excellent examples of how to use it in your project. - -### With Celo - -For basic use web3 works out of the box. - -For Celo' specific features like Fee Abstraction transcations you need to install `@celo/web3-plugin-transaction-types` as well as `web3@4.13.1` or higher. This also adds utils like `getCoreContractAddress` for fetching core contract address from onchain registry. - -```ts -// see web3 docs for more info on setup - -import { Web3 } from "web3"; -import { CeloTransactionTypesPlugin } from "@celo/web3-plugin-transaction-types"; - -const web3 = new Web3("http://127.0.0.1:8545"); -web3.registerPlugin(new CeloTransactionTypesPlugin()); - -// Now `web3.celo` is available and `celo.eth` is celo-aware - -const cEUR = await web3.celo.getCoreContractAddress("StableTokenEUR"); -const txData = { - from: "0x123...", - to: "0x456...", - value: 123n, - feeCurrency: cEUR, // optional -}; -await web3.celo.populateTransaction(txData); -const tx = await web3.eth.sendTransaction(txData); -``` - -## Gas Price - -When paying for transaction with an alternate feeCurrency token it is important to know the price of gas denominated in that token. You can use `web3.celo.populateTransaction` to make sure `maxPriorityFeePerGas`, `maxFeePerGas`, and `gas` are filled properly. - -```ts -await web3.celo.populateTransaction(txData); -``` - -More examples in the [github repository readme](https://github.com/celo-org/web3-plugin-transaction-types). diff --git a/docs/developer/web3/index.mdx b/docs/developer/web3/index.mdx new file mode 100644 index 0000000000..1d11c75e6a --- /dev/null +++ b/docs/developer/web3/index.mdx @@ -0,0 +1,82 @@ +--- +title: Web3.js +description: Using Web3.js with Celo +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +## Web3.js + +Web3.js was established in 2014, making it the oldest web3 library. With extensive documentation, an active community and modular design, Web3.js is powerful and easy-to-use. It has _support for Celo features (specifically **[Fee Abstraction](../fee-currency.md)** via plugins since version 4.13.1_. + +To learn more about building with Web3.js, check out their [docs](https://docs.web3js.org/) as they have excellent examples of how to use it in your project. + +### Fee Abstraction with Web3.js + +[Fee Abstraction](../fee-currency.md) on Celo enables the use of stablecoins like cUSD, USDT and USDC as gas tokens. + +#### Requirements + +- Web3.js v. > 4.13.1 + +#### Install the Celo Web3.js Plugin + +For Celo' specific features like [Fee Abstraction](../fee-currency.md) transactions you need to install `@celo/web3-plugin-transaction-types` as well as `web3@4.13.1` or higher. This also adds utils like `getCoreContractAddress` for fetching core contract address from onchain registry. This is useful to get the stablecoin addresses you are planning to use programmatically. Make sure they are listed in the [**FeeCurrencyWhitelist.sol**](../../contract-addresses.md). + +{/* prettier-ignore-start */} + + + + + ```bash + yarn add @celo/web3-plugin-transaction-types web3 + ``` + + + + + ```bash + npm install @celo/web3-plugin-transaction-types web3 + ``` + + + + + +Now `web3.celo` is available and `web3.eth` is "celo-aware". "aware" means that if the tx has the `feeCurrency` param, calling `eth.sendTransaction` will use the celo cip64 serializer and be able to recognize the fee currency. + +Here an example on how to use "feeCurrency" with cEUR. + +```ts +// see web3 docs for more info on setup + +import { Web3 } from "web3"; +import { CeloTransactionTypesPlugin } from "@celo/web3-plugin-transaction-types"; + +const web3 = new Web3("http://127.0.0.1:8545"); +web3.registerPlugin(new CeloTransactionTypesPlugin()); + +// Now `web3.celo` is available and `web3.eth` is celo-aware. +// Get all StableToken Addresses through the getCoreContractAddress +const cEUR = await web3.celo.getCoreContractAddress("StableTokenEUR"); +const txData = { + from: "0x123...", + to: "0x456...", + value: 123n, + // find the list of accepted tokens in the Fee Abstraction documentation + feeCurrency: cEUR, // optional +}; +await web3.celo.populateTransaction(txData); +const tx = await web3.eth.sendTransaction(txData); +``` + +## Gas Price + +When paying for transaction with an alternate feeCurrency token it is **important** to know the price of gas denominated in that token. You can use `web3.celo.populateTransaction` to make sure `maxPriorityFeePerGas`, `maxFeePerGas`, and `gas` are filled properly. + +```ts +await web3.celo.populateTransaction(txData); +``` + +You can find more examples in the [github repository readme](https://github.com/celo-org/web3-plugin-transaction-types).