diff --git a/build-on-celo/attribution-tags.mdx b/build-on-celo/attribution-tags.mdx index 92fef4a4d9..6b914556ac 100644 --- a/build-on-celo/attribution-tags.mdx +++ b/build-on-celo/attribution-tags.mdx @@ -61,7 +61,7 @@ const taggedData = concat([callData, tag]); await wallet.sendTransaction({ to: tokenAddress, data: taggedData }); ``` -With [wagmi](/tooling/dev-environments/thirdweb/overview), pass `dataSuffix` directly and wagmi handles the concatenation: +With [wagmi](https://wagmi.sh), pass `dataSuffix` directly and wagmi handles the concatenation: ```ts const { writeContract } = useWriteContract(); diff --git a/build-on-celo/build-with-ai/x402.mdx b/build-on-celo/build-with-ai/x402.mdx index eaaf211a92..b86142ffe2 100644 --- a/build-on-celo/build-with-ai/x402.mdx +++ b/build-on-celo/build-with-ai/x402.mdx @@ -239,9 +239,9 @@ Instead of charging a fixed price upfront, a server can price each request by ac Publishers can monetize individual articles instead of requiring subscriptions. Each request is checked for a valid x402 payment—if missing, the server returns `402 Payment Required` with pricing details; if present, the payment is settled and the content is delivered. This unlocks true pay-per-article pricing at amounts too small for card-based payments. -## Alternative: thirdweb facilitator +## Other facilitators -[thirdweb](https://thirdweb.com) offers a hosted x402 facilitator and SDK supporting Celo and 170+ EVM chains. It provides React hooks (`useFetchWithPayment`), a `wrapFetchWithPayment` helper for non-React clients, and a `settlePayment` helper for servers, handling wallet connection, payment signing, and retries. See the [thirdweb x402 docs](https://portal.thirdweb.com/x402) and [playground](https://playground.thirdweb.com/x402) to get started. +thirdweb runs a hosted x402 facilitator that supports Celo — see the [thirdweb x402 docs](https://portal.thirdweb.com/x402). ## Resources @@ -251,7 +251,6 @@ Publishers can monetize individual articles instead of requiring subscriptions. | Celo x402 Dashboard | [x402.celo.org](https://x402.celo.org/) | | Celo x402 Facilitator API | `https://api.x402.celo.org` | | thirdweb x402 Docs | [portal.thirdweb.com/x402](https://portal.thirdweb.com/x402) | -| thirdweb Playground | [playground.thirdweb.com/x402](https://playground.thirdweb.com/x402) | | GitHub | [github.com/coinbase/x402](https://github.com/coinbase/x402) | | Whitepaper | [x402.org/x402-whitepaper.pdf](https://www.x402.org/x402-whitepaper.pdf) | diff --git a/build-on-celo/build-with-thirdweb/celo-nft-drop-tutorial.mdx b/build-on-celo/build-with-thirdweb/celo-nft-drop-tutorial.mdx deleted file mode 100644 index 1847dfa8cb..0000000000 --- a/build-on-celo/build-with-thirdweb/celo-nft-drop-tutorial.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Celo NFT Drop Tutorial ---- - -Create and deploy your own Web3 app effortlessly with Thirdweb and Celo. - ---- - -## Objectives - -By the end of this tutorial, you will: - -* Have a set of **NFT Drops**. -* Build an **NFT gallery** with **`Thirdweb`** and **`Celo`**. - -## Prerequisites - -* Node (v20 or higher) -* A wallet with some test tokens (more on this later) - -## Fund Your Wallet - -1. Ensure you have sufficient funds to cover the transaction fees. -2. Visit the [Celo Sepolia Faucet](https://faucet.celo.org/celo-sepolia) to claim test tokens using your wallet address. ***Remember to claim only what you need.*** - -## Create a Contract on Thirdweb - -1. Visit [Thirdweb](https://thirdweb.com/login?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) and log in or create a new account. -2. Navigate to **`Contracts`** and click **`Deploy Contract`**. -3. Since multiple smart contracts have already been audited, we don’t need to write them from scratch. -4. Select **`NFT Drop`** and click **`Deploy`**. -5. Configure your token by setting its **Name** (mandatory), **Symbol**, and optionally adding an **Image** and **Description**. -6. In the **Deploy Options** section, choose **`Celo Sepolia`** as the Chain (if not selected by default). -7. Click **`Deploy Now`** to finalize the process. -8. After deployment, you’ll be redirected to the dashboard to upload your NFTs. -9. Provide a **name**, upload an **image**, add a **description**, and define **traits** for your NFT. -10. **Lazy Mint** your NFT. -11. Repeat steps 9 and 10 a few times—we need at least **3 NFTs**. -12. Copy your **`contract address`** from the NFT dashboard. - -## Get a Thirdweb Client ID - -1. Open the **Thirdweb Dashboard** and click **`Add New`** in the **Projects** section. -2. Select **`Project`** from the dropdown menu. -3. Enter a **project name** and add **`localhost:5173`** under **`Allowed Domains`**. Click **`Create`**. -4. A **`Client ID`** and **`Secret ID`** will be generated. Copy both to a secure location—we’ll only need the **`Client ID`**. - -## Clone the Thirdweb Celo NFT Repository - -1. Clone the repository: - - ```sh - git clone https://github.com/atejada/thirdweb-celo-nft - cd celo-token-agent - ``` -2. Install dependencies: - - - ```sh - npm install - ``` -3. Create a .env file with the following content: - - - ```sh - VITE_CLIENTID=your_thirdweb_client_id - VITE_ADDRESS=your_nft_contract_address - ``` - -4. Run the project: - - - ```sh - npm run dev - ``` - -Once the project is running, you’ll see the first NFT displayed along with a dropdown menu. You can select any other NFT from your collection to view its image, name, and description. - -## Join Build with Celo - Proof of Ship - -1. Create a project profile on [Karma GAP](https://docs.gap.karmahq.xyz/how-to-guides/integrations/celo-proof-of-ship)**. -2. Sign up to join [Proof of Ship](https://celo-devs.beehiiv.com/subscribe). -3. You can win up to **`5k USDm`** + Track Bounties. -4. Build with **`Celo`**. diff --git a/build-on-celo/build-with-thirdweb/one-click quickstart.mdx b/build-on-celo/build-with-thirdweb/one-click quickstart.mdx deleted file mode 100644 index df15fd005d..0000000000 --- a/build-on-celo/build-with-thirdweb/one-click quickstart.mdx +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: One-Click Quickstart ---- - -Create and deploy Web3 apps effortlessly with Thirdweb and Celo. - ---- - -## Objectives - -By the end of this tutorial, you will: - -* Be able to transfer Celo to another address -* Have a mintable **NFT Drop**. - -## Prerequisites - -* Node (v20 or higher) -* A wallet with some test tokens (more on this later) - -## Fund Your Wallet - -1. Ensure you have sufficient funds to cover the transaction fees. -2. Visit the [Celo Sepolia Faucet](https://faucet.celo.org/celo-sepolia) to claim test tokens using a wallet address. ***Remember to claim only what you need.*** - -## Create a Contract on Thirdweb - -1. Visit [Thirdweb](https://thirdweb.com/login?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) and log in or create a new account. -2. Navigate to **`Contracts`** and click **`Deploy Contract`**. -3. Since multiple smart contracts have already been audited, there's no need to write them from scratch. -4. Select **`NFT Drop`** and click **`Deploy`**. -5. Configure the token by setting its **Name** (mandatory), **Symbol**, and optionally adding an **Image** and **Description**. -6. In the **Deploy Options** section, choose **`Celo Sepolia`** as the Chain (if not selected by default). -7. Click **`Deploy Now`** to finalize the process. -8. After deployment, well’ll be redirected to the dashboard to upload your NFTs. -9. Provide a **name**, upload an **image**, add a **description**, and define **traits** for the NFT. -10. **Lazy Mint** the NFT. -11. Copy the **`contract address`** from the NFT dashboard. - -## Make the NFT Mintable - -1. On the dashboard, go to **Claim Conditions** -2. Click on **Add Phase**. -2. Specify the **Default Price (0.1)** and the **Limit per wallet (3)**. -3. Click on **Save Phases**. - -## Get a Thirdweb Client ID - -1. Open the **Thirdweb Dashboard** and click **`Add New`** in the **Projects** section. -2. Select **`Project`** from the dropdown menu. -3. Enter a **project name** and add **`localhost:5173`** under **`Allowed Domains`**. Click **`Create`**. -4. A **`Client ID`** and **`Secret ID`** will be generated. Copy both to a secure location—we’ll only need the **`Client ID`**. - -## Clone the Thirdweb Celo NFT Repository - -1. Clone the repository: - - ```sh - git clone https://github.com/celo-org/one-click-quickstart - cd one-click-quickstart - ``` - -2. Install dependencies: - - - ```sh - npm install - ``` - -3. Create a .env file with the following content: - - - ```sh - VITE_CLIENTID=your_thirdweb_client_id - VITE_ADDRESS=your_nft_contract_address - VITE_ADRESS_TO=your_wallet_address - ``` - -4. Run the project: - - - ```sh - npm run dev - ``` - -Once the project is running, there will be two links, the first named **Send Celo** and the second named **Mint NFT**. -The first one will be displayed by default. Click on the **Connect** button to connect the wallet. Enter an -address and an amount of Celo to transfer. The second link will display an NFT along with its description and by pressing -the mint button, 0.1 Celo will be paid. - -## Join Build with Celo - Proof of Ship - -1. Create a project profile on [Karma GAP](https://docs.gap.karmahq.xyz/how-to-guides/integrations/celo-proof-of-ship)**. -2. Sign up to join [Proof of Ship](https://celo-devs.beehiiv.com/subscribe). -3. You can win up to **`5k USDm`** + Track Bounties. -4. Build with **`Celo`**. - diff --git a/build-on-celo/build-with-thirdweb/overview.mdx b/build-on-celo/build-with-thirdweb/overview.mdx deleted file mode 100644 index f2f61eed33..0000000000 --- a/build-on-celo/build-with-thirdweb/overview.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: "Getting Started with Thirdweb" ---- - ---- - -## Table of Contents -- [Introduction](#introduction) -- [Why Thirdweb?](#why-thirdweb) -- [Resources](#resources) - -## Introduction - -Thirdweb streamlines blockchain development with pre-built contracts, SDKs, and a user-friendly dashboard. Deploy dApps, NFTs, and tokens effortlessly across multiple chains—fast, secure, and developer-friendly. - -## Why Thirdweb? - -Using Thirdweb is recommended because it eliminates the complexity of Web3 development, focusing on building rather than managing blockchain intricacies. - -* Pre-built Smart Contracts -* SDKs & APIs -* Multi-chain Support -* Wallet & Payments -* Dashboard Management - -## Resources - -* [Thirdweb main page](https://thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -* [Thirdweb Docs](https://portal.thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) diff --git a/build-on-celo/quickstart.mdx b/build-on-celo/quickstart.mdx index d51c46f8d5..e9aa2e45ec 100644 --- a/build-on-celo/quickstart.mdx +++ b/build-on-celo/quickstart.mdx @@ -104,7 +104,7 @@ npx @celo/celo-composer@latest create --template ai-chat Choose a wallet provider to handle user authentication and transaction signing: - **RainbowKit** (default): Popular, easy-to-use wallet connector for React apps -- **Thirdweb**: Complete Web3 development framework with powerful wallet tools +- **thirdweb**: Wallet connector from thirdweb - **None**: Skip wallet integration if you want to integrate your own solution ```bash diff --git a/build-on-celo/scaling-your-app.mdx b/build-on-celo/scaling-your-app.mdx index 004de5d76d..7567b87e05 100644 --- a/build-on-celo/scaling-your-app.mdx +++ b/build-on-celo/scaling-your-app.mdx @@ -151,11 +151,12 @@ Cache API responses wherever it makes sense: If you need an indexer, choose cost-effective options: -- **Recommended**: Use affordable indexers like [thirdweb Insight](https://portal.thirdweb.com/insights) -- **Consider**: - - The Graph (decentralized indexing) - - Alchemy (if already using their RPC) - - Custom indexer (if you have specific needs) +- The Graph (decentralized indexing) +- Alchemy (if you already use their RPC) +- thirdweb Insight +- A custom indexer, if none of the hosted options fit + +See [Indexers](/tooling/indexers/overview) for the providers documented on Celo. Indexers can significantly reduce RPC calls by providing pre-indexed @@ -292,7 +293,7 @@ Use Grafana for analytics and logs: - [Celo Documentation](/build-on-celo) - Explore Celo development resources - [Launch Checklist](/build-on-celo/launch-checklist) - Pre-launch preparation guide -- [thirdweb Insight](https://portal.thirdweb.com/insights) - Affordable blockchain indexer +- [Indexers](/tooling/indexers/overview) - Indexing providers documented on Celo - [Vercel AI SDK](https://sdk.vercel.ai/) - AI SDK for JavaScript/TypeScript - [Sentry Documentation](https://docs.sentry.io/) - Error monitoring and performance tracking - [Grafana Documentation](https://grafana.com/docs/) - Analytics and observability platform diff --git a/docs.json b/docs.json index 24d514e2c0..62c4b581fb 100644 --- a/docs.json +++ b/docs.json @@ -295,14 +295,7 @@ "pages": [ "tooling/dev-environments/index", "tooling/dev-environments/foundry", - { - "group": "Using thirdweb", - "pages": [ - "tooling/dev-environments/thirdweb/overview", - "tooling/dev-environments/thirdweb/thirdweb", - "tooling/dev-environments/thirdweb/one-click-deploy" - ] - }, + "tooling/dev-environments/thirdweb", { "group": "Using MultiBaas", "pages": [ @@ -347,7 +340,6 @@ ] }, "tooling/libraries-sdks/viem/index", - "tooling/libraries-sdks/thirdweb-sdk/index", "tooling/libraries-sdks/ethers/index", "tooling/libraries-sdks/reown/index", "tooling/libraries-sdks/dynamic/index", @@ -1337,7 +1329,7 @@ }, { "source": "/blog/2022/06/14/How%20to%20quickly%20build%20an%20NFT%20collection%20on%20Celo", - "destination": "/tooling/dev-environments/thirdweb/thirdweb" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/blog/tags/celo.org", @@ -1761,7 +1753,7 @@ }, { "source": "/developer/deploy/thirdweb", - "destination": "/tooling/dev-environments/thirdweb/overview" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/docs.celo.org", @@ -2613,7 +2605,7 @@ }, { "source": "/developer/thirdweb-sdk/:slug*", - "destination": "/tooling/libraries-sdks/thirdweb-sdk/:slug*" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/developer/viem/:slug*", @@ -3025,7 +3017,7 @@ }, { "source": "/developer/thirdweb-sdk", - "destination": "/tooling/libraries-sdks/thirdweb-sdk" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/developer/viem", @@ -3045,15 +3037,47 @@ }, { "source": "/build/build-with-thirdweb/celo-nft-drop-tutorial", - "destination": "/tooling/dev-environments/thirdweb/thirdweb" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/build/build-with-thirdweb/one-click%20quickstart", - "destination": "/tooling/dev-environments/thirdweb/one-click-deploy" + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/build/build-with-thirdweb/overview", - "destination": "/tooling/dev-environments/thirdweb/overview" + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/tooling/dev-environments/thirdweb/overview", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/tooling/dev-environments/thirdweb/thirdweb", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/tooling/dev-environments/thirdweb/one-click-deploy", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/tooling/libraries-sdks/thirdweb-sdk", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/tooling/libraries-sdks/thirdweb-sdk/index", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/build-on-celo/build-with-thirdweb/overview", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/build-on-celo/build-with-thirdweb/celo-nft-drop-tutorial", + "destination": "/tooling/dev-environments/thirdweb" + }, + { + "source": "/build-on-celo/build-with-thirdweb/one-click%20quickstart", + "destination": "/tooling/dev-environments/thirdweb" }, { "source": "/build/composer-kit", diff --git a/img/building/how-to-deploy/thirdweb/thirdweb-explore.png b/img/building/how-to-deploy/thirdweb/thirdweb-explore.png deleted file mode 100644 index 5c189eef8f..0000000000 Binary files a/img/building/how-to-deploy/thirdweb/thirdweb-explore.png and /dev/null differ diff --git a/img/thirdweb-explore.png b/img/thirdweb-explore.png deleted file mode 100644 index 5c189eef8f..0000000000 Binary files a/img/thirdweb-explore.png and /dev/null differ diff --git a/img/thirdweb.svg b/img/thirdweb.svg deleted file mode 100644 index ea63b3540c..0000000000 --- a/img/thirdweb.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/tooling/dev-environments/index.mdx b/tooling/dev-environments/index.mdx index 5768925ccd..a1a39a2fd4 100644 --- a/tooling/dev-environments/index.mdx +++ b/tooling/dev-environments/index.mdx @@ -24,12 +24,9 @@ Learn more about Celo Composer in the [README](https://github.com/celo-org/celo- ## Using EVM Tools -{/* make the below text code block because crowdin is messing it up */} - -```mdx-code-block Developers can build with Celo using many [Ethereum](https://ethereum.org/en/) compatible tools including Remix, Hardhat, and others. By making a few adjustments to your project’s network configuration settings, you can deploy your new or existing dApp on Celo. -``` -- [Using thirdweb](/developer/deploy/thirdweb/overview) -- [Using Remix](/developer/deploy/remix) -- [Using Hardhat](/developer/deploy/hardhat) \ No newline at end of file +- [Using Foundry](/tooling/dev-environments/foundry) +- [Using Hardhat](/tooling/dev-environments/hardhat) +- [Using Remix](/tooling/dev-environments/remix) +- [Using thirdweb](/tooling/dev-environments/thirdweb) \ No newline at end of file diff --git a/tooling/dev-environments/thirdweb.mdx b/tooling/dev-environments/thirdweb.mdx new file mode 100644 index 0000000000..b7f93e1bc4 --- /dev/null +++ b/tooling/dev-environments/thirdweb.mdx @@ -0,0 +1,45 @@ +--- +title: "Deploy on Celo with thirdweb" +sidebarTitle: "Using thirdweb" +description: How to point thirdweb's contracts, SDK and dashboard at Celo Mainnet and Celo Sepolia +--- + +thirdweb is a third-party platform for deploying contracts and building apps on EVM chains. This page is for app developers who have already chosen thirdweb and need the Celo-specific configuration; thirdweb's own documentation is the source of truth for everything else. + +--- + +## Celo chain configuration + +thirdweb v5 exports both Celo networks from `thirdweb/chains`. + +```ts +// thirdweb v5 +import { celo, celoSepoliaTestnet } from "thirdweb/chains"; + +const mainnet = celo; // Celo Mainnet, chain ID 42220 +const testnet = celoSepoliaTestnet; // Celo Sepolia testnet, chain ID 11142220 +``` + +Pass the chain to `getContract`, `ConnectButton` and the rest of the SDK as you would for any other network. Chain IDs, RPC URLs and the faucet are on [Network information](/build-on-celo/network-overview). + +When deploying from the thirdweb dashboard, select **Celo** or **Celo Sepolia** as the network in the deploy options. + +## Fee abstraction + +Paying gas in a stablecoin instead of CELO uses Celo's `feeCurrency` transaction field, which not every EVM library sets. [viem](/tooling/libraries-sdks/viem) and [wagmi](https://wagmi.sh) support it natively — see [Fee abstraction](/build-on-celo/fee-abstraction/overview) for what the field expects, including the adapter-address rule for 6-decimal tokens. + +## Resources + +| Resource | Link | +|---|---| +| thirdweb documentation | [portal.thirdweb.com](https://portal.thirdweb.com/) | +| Celo chain page on thirdweb | [thirdweb.com/celo](https://thirdweb.com/celo) | +| TypeScript SDK reference | [portal.thirdweb.com/references/typescript/v5](https://portal.thirdweb.com/references/typescript/v5) | +| thirdweb support | [support.thirdweb.com](https://support.thirdweb.com) | + +## Related + +- [Using Foundry](/tooling/dev-environments/foundry) - deploy and test contracts from the command line +- [Using Hardhat](/tooling/dev-environments/hardhat) - deploy and test contracts with the Hardhat toolchain +- [Using Remix](/tooling/dev-environments/remix) - deploy from the browser without local setup +- [Celo SDKs](/tooling/libraries-sdks/celo-sdks) - the libraries available for reading and writing Celo state diff --git a/tooling/dev-environments/thirdweb/one-click-deploy.mdx b/tooling/dev-environments/thirdweb/one-click-deploy.mdx deleted file mode 100644 index ef144323c8..0000000000 --- a/tooling/dev-environments/thirdweb/one-click-deploy.mdx +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: One-Click Deploy -description: Tutorial for deploying an NFT drop and gallery on Celo with thirdweb ---- - -Create and deploy Web3 apps effortlessly with Thirdweb and Celo. - ---- - -## Objectives - -By the end of this tutorial, you will: - -- Be able to **transfer Celo** to another address -- Have a mintable **NFT Drop**. -- Build an **NFT gallery** - -## Prerequisites - -* Node (v20 or higher) -* A wallet with some test tokens (more on this later) - -## Fund Your Wallet - -1. Ensure there are sufficient funds to cover the transaction fees. -2. Visit the [Celo Sepolia Faucet](https://faucet.celo.org/celo-sepolia) to claim test tokens using a wallet address. ***Remember to claim only what is needed.*** - -## Create a Contract on Thirdweb - -1. Visit [Thirdweb](https://thirdweb.com/login?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) and log in or create a new account. -2. Navigate to **`Contracts`** and click **`Deploy Contract`**. -3. Since multiple smart contracts have already been audited, there's no need to write them from scratch. -4. Select **`NFT Drop`** and click **`Deploy`**. -5. Configure the token by setting its **Name** (mandatory), **Symbol**, and optionally adding an **Image** and **Description**. -6. In the **Deploy Options** section, choose **`Celo Sepolia`** as the Chain (if not selected by default). -7. Click **`Deploy Now`** to finalize the process. -8. After deployment, well’ll be redirected to the dashboard to upload your NFTs. -9. Provide a **name**, upload an **image**, add a **description**, and define **traits** for the NFT. -10. **Lazy Mint** the NFT. -11. Repeat steps 9 and 10 a few times—we need at least **3 NFTs**. -12. Copy your **`contract address`** from the NFT dashboard. -13. Copy the **`contract address`** from the NFT dashboard. - -## Make the NFT Mintable - -1. On the dashboard, go to **Claim Conditions** -2. Click on **Add Phase**. -2. Specify the **Default Price (0.1)** and the **Limit per wallet (3)**. -3. Click on **Save Phases**. - -## Get a Thirdweb Client ID - -1. Open the **Thirdweb Dashboard** and click **`Add New`** in the **Projects** section. -2. Select **`Project`** from the dropdown menu. -3. Enter a **project name** and add **`localhost:5173`** under **`Allowed Domains`**. Click **`Create`**. -4. A **`Client ID`** and **`Secret ID`** will be generated. Copy both to a secure location—we’ll only need the **`Client ID`**. - -## Clone the Thirdweb Celo NFT Repository - -1. Clone the repository: - - ```sh - git https://github.com/atejada/celo-one-click-deploy - cd celo-one-click-deploy - ``` - -2. Install dependencies: - - - ```sh - npm install - ``` - -3. Create a .env file with the following content: - - - ```sh - VITE_CLIENTID = THIRD_WEB_CLIENT_ID - VITE_ADDRESS = MINTABLE_NFT_CONTRACT - VITE_GALLERY_ADDRESS = NFT_GALLERY_CONTRACT - VITE_ADDRESS_TO = ACCOUNT_TO_SEND_CELO_TO - ``` - -4. Run the project: - - - ```sh - npm run dev - ``` - -Once the project is running, there will be three links, the first named **Send Celo**, the second **NFT Gallery** and the third -named **Mint NFT**. - -The first one will be displayed by default. Click on the **Connect** button to connect the wallet. Enter an -address and an amount of Celo to transfer. The second link will display an NTF with a combo box at the top, to choose between 3 different -NFTs. The third and last link will display an NFT along with its description and by pressing the mint button, 0.1 Celo will be paid. - -## Join Build with Celo - Proof of Ship - -1. Create a project profile on [Karma GAP](https://docs.gap.karmahq.xyz/how-to-guides/integrations/celo-proof-of-ship)**. -2. Sign up to join [Proof of Ship](https://celo-devs.beehiiv.com/subscribe). -3. You can win up to **`5k USDm`** + Track Bounties. -4. Build with **`Celo`**. - diff --git a/tooling/dev-environments/thirdweb/overview.mdx b/tooling/dev-environments/thirdweb/overview.mdx deleted file mode 100644 index 7d3105714c..0000000000 --- a/tooling/dev-environments/thirdweb/overview.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: "Getting Started with Thirdweb" -sidebarTitle: "Overview" -description: Introduction to building on Celo with thirdweb's contracts, SDKs, and dashboard ---- - ---- - -## Table of Contents -- [Introduction](#introduction) -- [Why Thirdweb?](#why-thirdweb) -- [Thirdweb documentation](#thirdweb-docs) -- [Resources](#resources) - -## Introduction - -Thirdweb streamlines blockchain development with pre-built contracts, SDKs, and a user-friendly dashboard. Deploy dApps, NFTs, and tokens effortlessly across multiple chains—fast, secure, and developer-friendly. - -## Why Thirdweb? - -Using Thirdweb is recommended because it eliminates the complexity of Web3 development, focusing on building rather than managing blockchain intricacies. - -- Pre-built Smart Contracts -- SDKs & APIs -- Multi-chain Support -- Wallet & Payments -- Dashboard Management - -## Thirdweb documentation - -- Build - - [Wallets](https://portal.thirdweb.com/wallets?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - - [Transactions](https://portal.thirdweb.com/transactions?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - - [Contracts](https://portal.thirdweb.com/contracts?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - - [AI](https://portal.thirdweb.com/ai/chat?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- Monetize - - [Payments](https://portal.thirdweb.com/payments?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - - [Bridge](https://portal.thirdweb.com/bridge?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - - [Tokens](https://portal.thirdweb.com/payments?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- References - - [thirdweb API](https://portal.thirdweb.com/reference?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) - -## Resources - -- [Thirdweb main page](https://thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- [Thirdweb Docs](https://portal.thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- [Playground](https://playground.thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- [Templates](https://thirdweb.com/templates?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) \ No newline at end of file diff --git a/tooling/dev-environments/thirdweb/thirdweb.mdx b/tooling/dev-environments/thirdweb/thirdweb.mdx deleted file mode 100644 index 7da9699035..0000000000 --- a/tooling/dev-environments/thirdweb/thirdweb.mdx +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: "Using thirdweb" -sidebarTitle: "Deploy with Thirdweb CLI" -description: Create, deploy, and manage Celo smart contracts using the thirdweb CLI ---- - -## Create Contract - -To create a new smart contract using thirdweb CLI, follow these steps: - -1. In your CLI run the following command: - - ``` - npx thirdweb create contract - ``` - -2. Input your preferences for the command line prompts: - 1. Give your project a name - 2. Choose your preferred framework: Hardhat or Foundry - 3. Name your smart contract - 4. Choose the type of base contract: Empty, [ERC20](https://portal.thirdweb.com/solidity/base-contracts/erc20base), [ERC721](https://portal.thirdweb.com/solidity/base-contracts/erc721base), or [ERC1155](https://portal.thirdweb.com/solidity/base-contracts/erc1155base) - 5. Add any desired [extensions](https://portal.thirdweb.com/solidity/extensions) -3. Once created, navigate to your project’s directory and open in your preferred code editor. -4. If you open the `contracts` folder, you will find your smart contract; this is your smart contract written in Solidity. - - The following is code for an ERC721Base contract without specified extensions. It implements all of the logic inside the [`ERC721Base.sol`](https://github.com/thirdweb-dev/contracts/blob/main/contracts/base/ERC721Base.sol) contract; which implements the [`ERC721A`](https://github.com/thirdweb-dev/contracts/blob/main/contracts/eip/ERC721A.sol) standard. - - ```bash - // SPDX-License-Identifier: MIT - pragma solidity ^0.8.0; - - import "@thirdweb-dev/contracts/base/ERC721Base.sol"; - - contract Contract is ERC721Base { - constructor( - string memory _name, - string memory _symbol, - address _royaltyRecipient, - uint128 _royaltyBps - ) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {} - } - ``` - - This contract inherits the functionality of ERC721Base through the following steps: - - - Importing the ERC721Base contract - - Inheriting the contract by declaring that our contract is an ERC721Base contract - - Implementing any required methods, such as the constructor. - -5. After modifying your contract with your desired custom logic, you may deploy it to Celo using [Deploy](https://portal.thirdweb.com/deploy). - ---- - -Alternatively, you can deploy a prebuilt contract for NFTs, tokens, or marketplace directly from the thirdweb Explore page: - -1. Go to the thirdweb Explore page: https://thirdweb.com/explore - - - ![thirdweb Explore page](/img/thirdweb-explore.png) - - -2. Choose the type of contract you want to deploy from the available options: NFTs, tokens, marketplace, and more. -3. Follow the on-screen prompts to configure and deploy your contract. - -> For more information on different contracts available on Explore, check out [thirdweb’s documentation.](https://portal.thirdweb.com/pre-built-contracts) - -## Deploy Contract - -Deploy allows you to deploy a smart contract to any EVM compatible network without configuring RPC URLs, exposing your private keys, writing scripts, and other additional setup such as verifying your contract. - -1. To deploy your smart contract using deploy, navigate to the root directory of your project and execute the following command: - - ```bash - npx thirdweb deploy - ``` - - Executing this command will trigger the following actions: - - - Compiling all the contracts in the current directory. - - Providing the option to select which contract(s) you wish to deploy. - - Uploading your contract source code (ABI) to IPFS. - -2. When it is completed, it will open a dashboard interface to finish filling out the parameters. - - `_name`: contract name - - `_symbol`: symbol or "ticker" - - `_royaltyRecipient`: wallet address to receive royalties from secondary sales - - `_royaltyBps`: basis points (bps) that will be given to the royalty recipient for each secondary sale, e.g. 500 = 5% -3. Select Celo as the network -4. Manage additional settings on your contract’s dashboard as needed such as uploading NFTs, configuring permissions, and more. - -For additional information on Deploy, please reference [thirdweb’s documentation](https://portal.thirdweb.com/deploy). - -If you have any further questions or encounter any issues during the process, please reach out to thirdweb support at [support.thirdweb.com](http://support.thirdweb.com/). diff --git a/tooling/libraries-sdks/celo-sdks.mdx b/tooling/libraries-sdks/celo-sdks.mdx index b6722f65b6..4ecfe6b9df 100644 --- a/tooling/libraries-sdks/celo-sdks.mdx +++ b/tooling/libraries-sdks/celo-sdks.mdx @@ -13,7 +13,7 @@ Because Celo is compatible with Ethereum any ethereum package can be used with C - [viem](/tooling/libraries-sdks/viem) - [ethers](/tooling/libraries-sdks/ethers) -- [thirdweb SDK](/tooling/libraries-sdks/thirdweb-sdk) +- [thirdweb](/tooling/dev-environments/thirdweb) - [ContractKit (deprecated - only for internal use)](/tooling/libraries-sdks/contractkit) - [web3.js (deprecated)](/tooling/libraries-sdks/web3) diff --git a/tooling/libraries-sdks/thirdweb-sdk/index.mdx b/tooling/libraries-sdks/thirdweb-sdk/index.mdx deleted file mode 100644 index 82d5f8353b..0000000000 --- a/tooling/libraries-sdks/thirdweb-sdk/index.mdx +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: thirdweb SDK -description: Build web3 applications that can interact with your smart contracts using our powerful SDKs. ---- - -## Install thirdweb - -Thirdweb is a CLI tool that you need to install to create and manage your Web3 applications. - -```bash -npx thirdweb install -``` - -## Create Application - -thirdweb offers SDKs for various programming languages, such as React, React Native, TypeScript, Python, Go, and Unity. - -1. In your CLI run the following command: - - ```bash - npx thirdweb create --app - ``` - -2. Input your preferences for the command line prompts: - 1. Give your **`project`** a name - 2. Choose your **`network`**: We will choose EVM for Moonbeam - 3. Choose your preferred **`framework`**: Next.js, CRA, Vite, React Native, Node.js, or Express - 4. Choose your preferred **`language`**: JavaScript or TypeScript - 5. We are choosing **Vite** and **TypeScript** for this particular example. -3. Use the React or TypeScript SDK to interact with your application’s functions. See the section on “interact with your contract” - -## Get a Thirdweb Client ID - -1. Open the **Thirdweb Dashboard** and click **`Add New`** in the **Projects** section. -2. Select **`Project`** from the dropdown menu. -3. Enter a **project name** and add **`localhost:5173`** under **`Allowed Domains`**. Click **`Create`**. -4. A **`Client ID`** and **`Secret ID`** will be generated. Copy both to a secure location—we’ll only need the **`Client ID`**. - -## Create an .env file - -1. Create an **`.env`** file on your root folder. -2. Add the following: - -```bash -VITE_TEMPLATE_CLIENT_ID=YOUR_THIRDWEB_CLIENT_ID -VITE_TEMPLATE_CONTRACT_ID=YOUR_CONTRACT_ID -``` - -## Interact With a Contract - -### Initialize SDK On Celo - -Wrap your application in the `ThirdwebProvider` component and change the `activeChain` to Celo - -```tsx -import React from "react"; -import { createRoot } from "react-dom/client"; -import { App } from "./App"; -import { ThirdwebProvider } from "thirdweb/react"; - -createRoot(document.getElementById("root")!).render( - - - - - -); -``` - -### Get Contract - -To connect to your contract, use the SDK’s `getContract` method. - -```tsx -import { client } from "./client"; -import { getContract, createThirdwebClient } from 'thirdweb'; -import { celo } from "thirdweb/chains"; - -export function App() { - - const contract = getContract({ - client, - address: import.meta.env.VITE_CONTRACT_ADDRESS, - chain: celo, - }); - - return ( -
-

{contract.contract}

-
- ); -} -``` - -Full reference: [getContract](https://portal.thirdweb.com/references/typescript/v5/getContract) - -### Calling Contract Functions - -- For extension-based functions, use the built-in supported hooks. The following is an example using the NFTs extension to access a list of NFTs owned by an address- `useOwnedNFTs` - - ```tsx - import React, { useState } from 'react'; - import { client } from "./client"; - import { getContract, createThirdwebClient } from 'thirdweb'; - import { celo } from "thirdweb/chains"; - import { getOwnedNFTs } from "thirdweb/extensions/erc721"; - - export function App() { - const [nftData, setNftData] = useState(null); - - const contract = getContract({ - client, - address: import.meta.env.VITE_CONTRACT_ADDRESS, - chain: celo, - }); - - const loadNFTs = async (contractId) => { - try { - const nft = await getOwnedNFTs({ - contract, - start: 0, - count: 10, - address: contractId, - }); - setNftData(nft); - } catch (error) { - console.error('Error loading NFT:', error); - } - }; - - React.useEffect(() => { - loadNFTs(import.meta.env.VITE_CONTRACT_ADDRESS); - }, []); - - return ( -
-

{nftData[0].metadata.name}

-
- ); - } - ``` - - Full reference: [https://portal.thirdweb.com/references/typescript/v5/erc721/getOwnedNFTs](https://portal.thirdweb.com/references/typescript/v5/erc721/getOwnedNFTs) - -- Use the `useReadContract` hook to call any read functions on your contract by passing in the name of the function you want to use. - - ```tsx - import React, { useState } from 'react'; - import { client } from "./client"; - import { getContract, createThirdwebClient } from 'thirdweb'; - import { celo } from "thirdweb/chains"; - import { getOwnedNFTs } from "thirdweb/extensions/erc721"; - import { useReadContract } from "thirdweb/react"; - - export function App() { - const [nftData, setNftData] = useState(null); - - const contract = getContract({ - client, - address: import.meta.env.VITE_CONTRACT_ADDRESS, - chain: celo, - }); - - const { data, isPending } = useReadContract({ - contract, - method: "function name() view returns (string)", - params: [], - }); - - return ( -
-

{data}

-
- ); - } - ``` - - Full reference: [https://portal.thirdweb.com/references/typescript/v5/useReadContract](https://portal.thirdweb.com/references/typescript/v5/useReadContract) - -- Use the `updatemetadata` function to update the **`metadata`** on your contract by passing in the information you want to update. - - ```tsx - import React, { useState } from 'react'; - import { getContract, createThirdwebClient } from 'thirdweb'; - import { celo } from "thirdweb/chains"; - import { updateMetadata } from "thirdweb/extensions/erc721"; - - export function App() { - const [newName, setNewName] = useState(''); - const [isUpdating, setIsUpdating] = useState(false); - - const client = createThirdwebClient({ - clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID - }); - - const contract = getContract({ - client, - address: import.meta.env.VITE_CONTRACT_ADDRESS, - chain: celo, - }); - - const updateContractName = async () => { - if (!newName) { - alert("Please enter a new name"); - return; - } - - setIsUpdating(true); - - try { - console.log("Updating contract metadata name to:", newName); - - const transaction = await updateMetadata({ - contract, - metadata: { - name: newName, - }, - }); - - console.log("Transaction sent:", transaction); - console.log("Contract metadata updated successfully!"); - - alert("Contract metadata updated successfully!"); - } catch (error) { - console.error('Error updating contract metadata:', error); - alert("Failed to update contract metadata. Check the console for details."); - } finally { - setIsUpdating(false); - } - }; - - return ( -
-

Update Contract Metadata Name

- setNewName(e.target.value)} - /> - -
- ); - ``` - - Full reference: [https://portal.thirdweb.com/references/typescript/v5/erc721/updateMetadata](https://portal.thirdweb.com/references/typescript/v5/erc721/updateMetadata) - -### Connect Wallet - -Create a custom connect wallet experience by declaring supported wallets passed to your provider. - -```tsx -import React, { useState } from 'react'; -import { client } from "./client"; -import { ConnectButton } from "thirdweb/react"; -import { createWallet, inAppWallet } from "thirdweb/wallets"; - -const wallets = [ - inAppWallet(), - createWallet("io.metamask"), - createWallet("com.coinbase.wallet"), - createWallet("me.rainbow"), -]; - -export function App() { - - return ( -
- -
- ); -} -``` - -Full reference: [https://portal.thirdweb.com/references/typescript/v5/ConnectButton](https://portal.thirdweb.com/references/typescript/v5/ConnectButton) - -## Deploy Application - -To host your static web application on decentralized storage, run: - -```jsx -npx thirdweb deploy --app -``` - -By running this command, your application is built for production and stored using Storage. The built application is uploaded to IPFS, a decentralized storage network, and a unique URL is generated for your application. - -This URL serves as a permanent hosting location for your application on the web. - -If you have any further questions or encounter any issues during the process, please reach out to thirdweb support at [support.thirdweb.com](https://support.thirdweb.com). \ No newline at end of file diff --git a/tooling/libraries-sdks/web3/index.mdx b/tooling/libraries-sdks/web3/index.mdx index d148802bf1..b15f6556c3 100644 --- a/tooling/libraries-sdks/web3/index.mdx +++ b/tooling/libraries-sdks/web3/index.mdx @@ -8,7 +8,7 @@ sidebarTitle: "Web3.js (deprecated)" -Web3.js has been sunset in 2024. Please consider using [thirdweb](https://thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) or viem for your project. +Web3.js was sunset in 2024. Use [viem](/tooling/libraries-sdks/viem) instead. 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](/build-on-celo/fee-abstraction/overview)** via plugins since version 4.13.1_. diff --git a/tooling/nodes/overview.mdx b/tooling/nodes/overview.mdx index 9ea292a80e..0a4dd7dbce 100644 --- a/tooling/nodes/overview.mdx +++ b/tooling/nodes/overview.mdx @@ -111,14 +111,14 @@ https://docs.lavanet.xyz ### thirdweb -thirdweb is a complete web3 development platform, allowing developers to build, manage, and analyze their web3 applications. +[thirdweb](https://thirdweb.com/celo) provides RPC endpoints alongside its contract deployment and SDK tooling. #### Supported Networks - Celo Mainnet - Celo Sepolia (Testnet) - + https://thirdweb.com/celo diff --git a/tooling/overview/index.mdx b/tooling/overview/index.mdx index d21c2ebd03..5c22db067b 100644 --- a/tooling/overview/index.mdx +++ b/tooling/overview/index.mdx @@ -24,9 +24,10 @@ Celo Composer allows you to quickly build, deploy, and iterate on decentralized ## Developer Environments -- [Using thirdweb](/developer/deploy/thirdweb/overview) -- [Using Remix](/developer/deploy/remix) -- [Using Hardhat](/developer/deploy/hardhat) +- [Using Foundry](/tooling/dev-environments/foundry) +- [Using Hardhat](/tooling/dev-environments/hardhat) +- [Using Remix](/tooling/dev-environments/remix) +- [Using thirdweb](/tooling/dev-environments/thirdweb) ## Code Courses diff --git a/tooling/wallets/index.mdx b/tooling/wallets/index.mdx index 111d2aff58..5c55a958df 100644 --- a/tooling/wallets/index.mdx +++ b/tooling/wallets/index.mdx @@ -93,8 +93,8 @@ Onboard and activate users with secure, easy-to-use, enterprise-grade wallets. N Scale your onboarding with a wallet as a service that works for secure, self-custodial and customizable embedded wallet infrastructure to onboard any user to your web3 app. -- Homepage: [thirdweb.com](https://thirdweb.com/?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) -- [Docs](https://portal.thirdweb.com/wallets?utm_source=celo&utm_medium=documentation&utm_campaign=chain_docs) +- Homepage: [thirdweb.com](https://thirdweb.com/) +- [Docs](https://portal.thirdweb.com/wallets) ---