Skip to content

Commit 1a7315c

Browse files
saminacodessaminacodes
committed
arb-docs (#7799)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR enhances the documentation for thirdweb's `Stylus` contracts, detailing the deployment and usage of `Stylus` contracts and `Airdrop` contracts on the `Arbitrum` network, including benefits, prerequisites, and step-by-step tutorials. ### Detailed summary - Added a new section on `Contract security` in `page.mdx`. - Updated `sidebar.tsx` to include collapsible sections for `Arbitrum Stylus` with links to contract deployment guides. - Created detailed documentation for `Stylus Contracts` and `Stylus Airdrop Contracts` in their respective `page.mdx` files, including benefits, prerequisites, and step-by-step deployment instructions. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Added a new page detailing Stylus Airdrop Contract deployment and usage on Arbitrum, including multiple airdrop patterns and integration examples. * Introduced a guide for deploying Stylus contracts on Arbitrum, covering project setup, deployment, and NFT minting. * Added a contract security section highlighting third-party audits and linking to audit reports. * Updated the sidebar with a new "Arbitrum Stylus" section for easier navigation to Stylus contract guides. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 50c6c19 commit 1a7315c

File tree

4 files changed

+376
-1
lines changed

4 files changed

+376
-1
lines changed

‎apps/portal/src/app/contracts/arbitrum-stylus/airdrop-contract/page.mdx

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import { Step, Steps, createMetadata } from "@doc";
2+
3+
export const metadata = createMetadata({
4+
title: "Stylus Airdrop Contracts | thirdweb Documentation",
5+
description:
6+
"Use Stylus Airdrop contracts on Arbitrum for efficient token distribution at scale. WASM-powered smart contracts enable fast, low-cost airdrops to thousands of wallets.",
7+
image: {
8+
title: "Stylus Airdrop Contract",
9+
icon: "contracts",
10+
},
11+
});
12+
13+
# Stylus Airdrop Contract
14+
15+
16+
If you need to send tokens to thousands of wallets at once, you can leverage the Stylus Airdrop contracts.
17+
18+
Learn how to deploy Stylus Airdrop contracts through dashboard or CLI for inexpensive, WASM-powered distribution on [Arbitrum](https://thirdweb.com/arbitrum) chain.
19+
20+
### Benefits
21+
22+
- Ink, not gas: Stylus executes WASM thousands of times faster than the EVM, so sending 10 000 NFTs costs a fraction of normal gas.
23+
- Rust Tooling: Cargo tests, Clippy lints, and the full crates ecosystem for your drop logic.
24+
- Interoperability: Rust contracts call Solidity (and vice-versa) with zero wrappers.
25+
- Battle-tested Logic: Template ports the same claim, snapshot &amp; signature pattern used by thirdweb’s Solidity pre-built contracts.
26+
27+
## Deploy through dashboard
28+
29+
Deploying a Stylus Airdrop contract is easy through the thirdweb dashboard and ideal when you don't want to modify any code on the contract.
30+
31+
<Steps>
32+
<Step title="Select Stylus Contract">
33+
34+
Navigate to the Stylus Contracts section on Explore and select any Airdrop contract for your project.
35+
</Step>
36+
37+
<Step title="Deploy Contract">
38+
Select Arbitrum Sepolia or any other Stylus-supported network, then select Deploy.
39+
</Step>
40+
41+
<Step title="Upload Recipients">
42+
You can either upload a CSV file with the recipient addresses and amounts and select `Run Airdrop`
43+
44+
Or set a claim condition for recipients to claim their tokens on their own.
45+
</Step>
46+
47+
</Steps>
48+
49+
## Deploy through CLI
50+
51+
If you want to modify the contract code or deploy a custom Airdrop contract, you can use the thirdweb CLI.
52+
53+
<Steps>
54+
<Step title="Create a new Stylus Airdrop project">
55+
56+
In your CLI, run the following command to create a new directory with an airdrop template contract.
57+
58+
```bash
59+
npx thirdweb create-stylus --template airdrop-erc721
60+
```
61+
</Step>
62+
63+
<Step title="Modify contract logic">
64+
In the `src/lib.rs` file you can modify the contract logic such as adding fees, gating logic, analytics events, and more.
65+
</Step>
66+
67+
<Step title="Build & Test the Contract">
68+
69+
To build your project, run the following command:
70+
71+
```bash
72+
cargo stylus build
73+
```
74+
75+
</Step>
76+
77+
<Step title="Deploy or Publish Your Contract">
78+
You can publish and deploy your project to Arbitrum. Publishing stores your contract metadata in thirdweb’s on-chain registry so anyone (including you) can deploy that exact version later with a few clicks.
79+
80+
To publish your contract, ensure you have your thirdweb secret key from your created project, then run the following command:
81+
82+
```bash
83+
npx thirdweb publish-stylus -k YOUR_TW_SECRET_KEY
84+
```
85+
86+
If you'd prefer to just deploy a single instance of the contract without publishing, run the following command to deploy:
87+
88+
```bash
89+
npx thirdweb deploy-stylus -k YOUR_TW_SECRET_KEY
90+
```
91+
92+
Once the transaction confirms, the CLI will redirect you to the contract management dashboard where you can mint, transfer, view events, or pull ready-made SDK snippets.
93+
</Step>
94+
95+
</Steps>
96+
97+
## Interacting with the Contract
98+
99+
Using the thirdweb SDKs, you can interact with your Stylus Airdrop contract to mint tokens, transfer ownership, and more.
100+
101+
The following includes three common patterns using thirdweb TypeScript SDK:
102+
103+
### Owner-executed batch airdrop
104+
105+
**When to use:** you already have every recipient’s address and want to send everything in a single transaction.
106+
107+
```javascript
108+
import { createThirdwebClient, getContract, sendTransaction} from "thirdweb";
109+
import { arbitrumSepolia } from "thirdweb/chains";
110+
import { airdropERC721 } from "thirdweb/extensions/airdrop";
111+
import { createWallet, injectedProvider } from "thirdweb/wallets";
112+
113+
const client = createThirdwebClient({ clientId });
114+
115+
const wallet = createWallet("io.metamask"); // or any wallet id
116+
const account = await wallet.connect({ client });
117+
118+
const contract = getContract({
119+
client,
120+
chain: arbitrumSepolia,
121+
address: "<DEPLOYED_ADDRESS>",
122+
});
123+
124+
const contents = [
125+
{ recipient: "0xAbc…", tokenId: 1n },
126+
{ recipient: "0x123…", tokenId: 2n },
127+
];
128+
129+
const tx = airdropERC721({
130+
contract,
131+
tokenAddress: contract.address,
132+
contents,
133+
});
134+
135+
await sendTransaction({ transaction: tx, account });
136+
```
137+
138+
(Swap for airdropERC20 or airdropERC1155 helpers as needed.)
139+
140+
### Claim-based airdrop (Merkle snapshot)
141+
142+
**When to use:** you know the recipients but want them to claim the tokens at their convenience (gas paid by the claimer).
143+
144+
1. Generate snapshot off-chain
145+
146+
```javascript
147+
import { generateMerkleTreeInfoERC721 } from "thirdweb/extensions/airdrop";
148+
149+
const snapshot = [
150+
{ address: "0xAbc…", tokenId: 7n },
151+
{ address: "0x123…", tokenId: 8n },
152+
];
153+
154+
const { merkleRoot, contents } = await generateMerkleTreeInfoERC721({ snapshot });
155+
```
156+
157+
merkleRoot is a single 32-byte value representing the whole list.
158+
159+
2. Store root on-chain (_setMerkleRoot(root) in the template).
160+
161+
```javascript
162+
const tx = setMerkleRoot({
163+
contract,
164+
root: merkleRoot,
165+
});
166+
await sendTransaction({ transaction: tx, account }); // executed by admin
167+
```
168+
169+
3. Recipient claims:
170+
171+
```javascript
172+
import { claimERC721, fetchProofsERC721 } from "thirdweb/extensions/airdrop";
173+
174+
const proof = await fetchProofsERC721({
175+
contract,
176+
merkleRoot,
177+
recipient: "0xAbc…",
178+
});
179+
180+
const tx = claimERC721({
181+
contract,
182+
tokenAddress: contract.address,
183+
proof,
184+
});
185+
186+
await sendTransaction({ transaction: tx, account });
187+
```
188+
189+
### Signature Based Airdrop (Dynamic Authentication)
190+
191+
**When to use:** you don’t know the full list ahead of time (e.g., quest rewards). An authorised backend signs a payload per user; the user submits it on-chain.
192+
193+
1. Generate signed payload server-side:
194+
195+
```javascript
196+
import { generateAirdropSignatureERC721 } from "thirdweb/extensions/airdrop";
197+
198+
const { signature, payload } = await generateAirdropSignatureERC721({
199+
contract,
200+
signer: account, // ADMIN role or owner
201+
to: "0xRecipient",
202+
tokenId: 42n,
203+
});
204+
```
205+
206+
2. Recipient executes:
207+
208+
```javascript
209+
import { airdropERC721WithSignature } from "thirdweb/extensions/airdrop";
210+
211+
const tx = airdropERC721WithSignature({
212+
contract,
213+
signature,
214+
payload,
215+
});
216+
217+
await sendTransaction({ transaction: tx, account: recipientAccount });
218+
```
219+
220+
### Resources
221+
222+
- [ERC-721 Airdrop Template](https://github.com/thirdweb-example/stylus-airdrop-erc721-template)
223+
- [TypeScript SDK Documentation > Airdrops](https://portal.thirdweb.com/references/typescript/v5/airdrop/airdropERC721)
224+

‎apps/portal/src/app/contracts/arbitrum-stylus/stylus-contract/page.mdx

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { Steps, Step, createMetadata } from "@doc";
2+
3+
export const metadata = createMetadata({
4+
title: "Stylus Contracts | thirdweb Documentation",
5+
description:
6+
"Deploy Stylus contracts on Arbitrum for efficient token distribution at scale. WASM-powered smart contracts enable fast, low-cost airdrops to thousands of wallets.",
7+
image: {
8+
title: "Deploy Stylus Contracts",
9+
icon: "contracts",
10+
},
11+
});
12+
13+
# Deploy Stylus Contracts on Arbitrum
14+
15+
Arbitrum Stylus brings a second, WebAssembly (WASM) virtual machine to every Arbitrum chain, so you can write contracts in Rust (or C/C++) while staying 100 % interoperable with existing Solidity code.
16+
17+
Under the hood, Stylus executes WASM thousands of times faster than the EVM, so transactions are metered in a new, much-smaller unit called ink rather than gas — translating to dramatic fee savings for compute- or memory-heavy logic. Learn more about Stylus on the [Arbitrum documentation](https://docs.arbitrum.io/stylus/concepts/how-it-works).
18+
19+
This tutorial will cover how to create a simple NFT template project with thirdweb CLI and deploy it to the Arbitrum network using Stylus. You can also follow this tutorial to deploy an ERC-20, ERC-1155, or Airdrop contract.
20+
21+
## Benefits
22+
23+
- Rust Tooling: Cargo, Clippy, unit tests, Rust crates, and the broader Rust ecosystem are at your disposal.
24+
- Ink-priced execution: Complex math, on-chain SVG generation, even lightweight ML models are suddenly affordable.
25+
- Opt-in re-entrancy protection: The Rust SDK disables re-entrancy by default; you only enable it when you really need it.
26+
- Multi-VM composability: Rust contract can call Solidity contracts (and vice-versa) without wrappers.
27+
28+
## Prerequisites
29+
30+
- [Create a project on your thirdweb account](https://thirdweb.com/dashboard)
31+
- Install thirdweb CLI by running `npm install -g thirdweb`
32+
- Install Rust tool chain by running `curl https://sh.rustup.rs -sSf | sh` or visit rust-lang.org
33+
- Install solc by running `npm install -g solc` or visit soliditylang.org
34+
- Install Node version 18 or higher
35+
36+
## Scaffold an ERC-721 Stylus project
37+
38+
<Steps>
39+
<Step title="Initialize a new Stylus project">
40+
In your CLI, create a new directory and run the following command to create a new stylus project:
41+
42+
```bash
43+
npx thirdweb create-stylus
44+
```
45+
46+
Select the ERC-721 template when prompted. This will scaffold a new Stylus project with a basic ERC-721 contract.
47+
</Step>
48+
49+
<Step title="Set Collection Name & Symbol">
50+
51+
Open src/lib.rs and set the collection name and symbol. You may also tweak any other minting logic as well such as supply cap, roles, and fees.
52+
53+
</Step>
54+
<Step title="Build & test the project">
55+
56+
Stylus compiles your Rust to WASM and generates an ABI JSON that thirdweb uses for the dashboard & SDK.
57+
58+
Run the following command to build your project:
59+
60+
```bash
61+
cargo stylus build
62+
```
63+
64+
You can also run the following command to test your project:
65+
66+
```bash
67+
cargo test
68+
```
69+
70+
</Step>
71+
72+
<Step title="Deploy or Publish Your Contract">
73+
74+
You can publish and deploy your project to Arbitrum. Publishing stores your contract metadata in thirdweb’s on-chain registry so anyone (including you) can deploy that exact version later with a few clicks.
75+
76+
To publish your contract, ensure you have your thirdweb secret key from your created project, then run the following command:
77+
78+
```bash
79+
npx thirdweb publish-stylus -k YOUR_TW_SECRET_KEY
80+
```
81+
82+
If you'd prefer to just deploy a single instance of the contract without publishing, run the following command to deploy:
83+
84+
```bash
85+
npx thirdweb deploy-stylus -k YOUR_TW_SECRET_KEY
86+
```
87+
88+
Once the transaction confirms, the CLI will redirect you to the contract management dashboard where you can mint, transfer, view events, or pull ready-made SDK snippets.
89+
90+
</Step>
91+
92+
<Step title="(Optional) Mint NFTs Programmatically">
93+
94+
You can mint NFTs programmatically using the thirdweb SDKs. Use the following code snippet to mint NFTs:
95+
96+
```javascript
97+
import { createThirdwebClient, getContract, sendTransaction } from "thirdweb";
98+
import { arbitrumSepolia } from "thirdweb/chains";
99+
import { mintTo } from "thirdweb/extensions/erc721";
100+
import { createWallet, injectedProvider } from "thirdweb/wallets";
101+
102+
const client = createThirdwebClient({ clientId });
103+
104+
const wallet = createWallet("io.metamask"); // or any wallet id
105+
const account = await wallet.connect({ client });
106+
107+
// 3 · Wrap the deployed contract
108+
const contract = getContract({
109+
client,
110+
chain: arbitrumSepolia,
111+
address: "<DEPLOYED_ADDRESS>",
112+
});
113+
114+
// 4 · Prepare the mint transaction
115+
const transaction = mintTo({
116+
contract,
117+
to: "0xRecipient",
118+
nft: {
119+
name: "Stylus NFT #1",
120+
// image, description, attributes, … are optional
121+
},
122+
});
123+
124+
// 5 · Send the transaction
125+
const result = await sendTransaction({ transaction, account });
126+
console.log("Minted token:", result);
127+
```
128+
129+
</Step>
130+
131+
</Steps>
132+
133+
## Next Steps
134+
135+
- Learn more about Arbitrum Stylus through the official docs on architecture, gas/ink, and safety features. [View Arbitrum Documentation.](https://docs.arbitrum.io/stylus/concepts/how-it-works)

‎apps/portal/src/app/contracts/security/page.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Contract security
2+
3+
All thirdweb pre-built contracts are audited by third-party security firms. You can see the attached audit reports for each contract linked on the contract page on Explore.

‎apps/portal/src/app/contracts/sidebar.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,20 @@ export const sidebar: SideBar = {
4545
],
4646
name: "Guides",
4747
},
48-
{ separator: true },
48+
{
49+
isCollapsible: true,
50+
links: [
51+
{
52+
href: `${slug}/arbitrum-stylus/stylus-contract`,
53+
name: "Deploy Stylus Contract",
54+
},
55+
{
56+
href: `${slug}/arbitrum-stylus/airdrop-contract`,
57+
name: "Stylus Airdrop Contract",
58+
},
59+
],
60+
name: "Arbitrum Stylus",
61+
},
4962
{
5063
isCollapsible: false,
5164
links: [

0 commit comments

Comments
 (0)