Skip to content

Commit

Permalink
feat: add docs for web3js plugin (#1511)
Browse files Browse the repository at this point in the history
* feat: add line for web plugin

* feat: add web3 page
nicolasbrugneaux authored Oct 4, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 8d36c15 commit ff71035
Showing 3 changed files with 51 additions and 1 deletion.
5 changes: 4 additions & 1 deletion docs/cel2/fee-currencies.md
Original file line number Diff line number Diff line change
@@ -43,8 +43,11 @@ Wallets will overwrite the `feeCurrency`, which is why this is recommended for w

For using Fee Abstraction for a wallet or inside your dApp we recommend using [viem](https://viem.sh/docs/introduction.html) or [wagmi](https://wagmi.sh/).

:::info
While we recommend viem, [web3.js](https://docs.web3js.org/) has added as of 4.13.1 support for `feeCurrency` via the usage of [plugins](https://docs.web3js.org/#packages--plugins). There is a celo-specific [plugin for web3@4 available on github](https://github.com/celo-org/web3-plugin-transaction-types).

:::warning
Currently, ethers.js and web3.js don't support the `feeCurrency` property
Currently, ethers.js doesn't support the `feeCurrency` property
:::

### Sending transaction using Fee Abstraction
1 change: 1 addition & 0 deletions docs/developer/sdks/celo-sdks.md
Original file line number Diff line number Diff line change
@@ -17,3 +17,4 @@ Because Celo is compitable with Ethereum any ethereum package can be used with C
- [ContractKit](../contractkit/index.md)
- [thirdweb SDK](../thirdweb-sdk/index.md)
- [Rainbowkit-Celo](../rainbowkit-celo/index.md)
- [web3](../web3/index.md)
46 changes: 46 additions & 0 deletions docs/developer/web3/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
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 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

You need to install `@celo/web3-plugin-transaction-types` as well as `[email protected]` or higher.

```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).

0 comments on commit ff71035

Please sign in to comment.