elaborate on web3.js plugin for fee abstraction (#1611)

* standardize Web3.js spelling,

add commands to install plugin

* fix broken links

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

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.

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!
 

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 `[email protected]` 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 */}
+
+<Tabs>
+  <TabItem value="yarn" label="yarn" attributes={{ className: "yarn_tab" }} default>
+
+        ```bash
+        yarn add @celo/web3-plugin-transaction-types web3
+        ```
+
+  </TabItem>
+  <TabItem value="npm" label="npm" attributes={{ className: "npm_tab" }}>
+
+        ```bash
+        npm install @celo/web3-plugin-transaction-types web3
+        ```
+
+  </TabItem>
+</Tabs>
+
+
+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).