Skip to content

Commit bb42113

Browse files
saminacodessaminacodes
committed
arb-docs
1 parent 9a3ebe1 commit bb42113

File tree

4 files changed

+383
-1
lines changed

4 files changed

+383
-1
lines changed

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

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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 distribituion 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 & 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 } from "thirdweb/wallets";
112+
113+
const client = createThirdwebClient({ secretKey: process.env.TW_SECRET_KEY! });
114+
const wallet = createWallet("private-key-wallet");
115+
const account = await wallet.connect({
116+
client,
117+
chain: arbitrumSepolia,
118+
privateKey: process.env.PRIVATE_KEY!,
119+
});
120+
121+
const contract = getContract({
122+
client,
123+
chain: arbitrumSepolia,
124+
address: "<DEPLOYED_ADDRESS>",
125+
});
126+
127+
const contents = [
128+
{ recipient: "0xAbc…", tokenId: 1n },
129+
{ recipient: "0x123…", tokenId: 2n },
130+
];
131+
132+
const tx = airdropERC721({
133+
contract,
134+
tokenAddress: contract.address,
135+
contents,
136+
});
137+
138+
await sendTransaction({ transaction: tx, account });
139+
```
140+
141+
(Swap for airdropERC20 or airdropERC1155 helpers as needed.)
142+
143+
### Claim-based airdrop (Merkle snapshot)
144+
145+
**When to use:** you know the recipients but want them to claim the tokens at their convenience (gas paid by the claimer).
146+
147+
1. Generate snapshot off-chain
148+
149+
```javascript
150+
import { generateMerkleTreeInfoERC721 } from "thirdweb/extensions/airdrop";
151+
152+
const snapshot = [
153+
{ address: "0xAbc…", tokenId: 7n },
154+
{ address: "0x123…", tokenId: 8n },
155+
];
156+
157+
const { merkleRoot, contents } = await generateMerkleTreeInfoERC721({ snapshot });
158+
```
159+
160+
merkleRoot is a single 32-byte value representing the whole list.
161+
162+
2. Store root on-chain (_setMerkleRoot(root) in the template).
163+
164+
```javascript
165+
const tx = setMerkleRoot({
166+
contract,
167+
root: merkleRoot,
168+
});
169+
await sendTransaction({ transaction: tx, account }); // executed by admin
170+
```
171+
172+
3. Recipient claims:
173+
174+
```javascript
175+
import { claimERC721, fetchProofsERC721 } from "thirdweb/extensions/airdrop";
176+
177+
const proof = await fetchProofsERC721({
178+
contract,
179+
merkleRoot,
180+
recipient: "0xAbc…",
181+
});
182+
183+
const tx = claimERC721({
184+
contract,
185+
tokenAddress: contract.address,
186+
proof,
187+
});
188+
189+
await sendTransaction({ transaction: tx, account });
190+
```
191+
192+
### Signature Based Airdrop (Dynamic Authentication)
193+
194+
**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.
195+
196+
1. Generate signed payload server-side:
197+
198+
```javascript
199+
import { generateAirdropSignatureERC721 } from "thirdweb/extensions/airdrop";
200+
201+
const { signature, payload } = await generateAirdropSignatureERC721({
202+
contract,
203+
signer: account, // ADMIN role or owner
204+
to: "0xRecipient",
205+
tokenId: 42n,
206+
});
207+
```
208+
209+
2. Recipient executes:
210+
211+
```javascript
212+
import { airdropERC721WithSignature } from "thirdweb/extensions/airdrop";
213+
214+
const tx = airdropERC721WithSignature({
215+
contract,
216+
signature,
217+
payload,
218+
});
219+
220+
await sendTransaction({ transaction: tx, account: recipientAccount });
221+
```
222+
223+
### Resources
224+
225+
- [ERC-721 Airdrop Template](https://github.com/thirdweb-example/stylus-airdrop-erc721-template)
226+
- [TypeScript SDK Documentation > Airdrops](https://portal.thirdweb.com/references/typescript/v5/airdrop/airdropERC721)
227+

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
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 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+
</Step>
46+
47+
<Step title="Set Collection Name & Symbol">
48+
49+
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.
50+
51+
</Step>
52+
<Step title="Build & test the project">
53+
54+
Stylus compiles your Rust to WASM and generates an ABI JSON that thirdweb uses for the dashboard & SDK.
55+
56+
Run the following command to build your project:
57+
58+
```bash
59+
cargo stylus build
60+
```
61+
62+
You can also run the following command to test your project:
63+
64+
```bash
65+
cargo test
66+
```
67+
68+
</Step>
69+
70+
<Step title="Deploy or Publish Your Contract">
71+
72+
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.
73+
74+
To publish your contract, ensure you have your thirdweb secret key from your created project, then run the following command:
75+
76+
```bash
77+
npx thirdweb publish-stylus -k YOUR_TW_SECRET_KEY
78+
```
79+
80+
If you'd prefer to just deploy a single instance of the contract without publishing, run the following command to deploy:
81+
82+
```bash
83+
npx thirdweb deploy-stylus -k YOUR_TW_SECRET_KEY
84+
```
85+
86+
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.
87+
88+
</Step>
89+
90+
<Step title="(Optional) Mint NFTs Programmatically">
91+
92+
You can mint NFTs programmatically using the thirdweb SDKs. Use the following code snippet to mint NFTs:
93+
94+
```
95+
import { createThirdwebClient, getContract, sendTransaction } from "thirdweb";
96+
import { arbitrumSepolia } from "thirdweb/chains";
97+
import { mintTo } from "thirdweb/extensions/erc721";
98+
import { createWallet } from "thirdweb/wallets";
99+
100+
// 1 · Create a client (use secret key on backend or clientId in browser)
101+
const client = createThirdwebClient({ secretKey: process.env.TW_SECRET_KEY! });
102+
103+
// 2 · Connect a wallet / account (here using a private-key wallet for Node.js)
104+
const wallet = createWallet("private-key-wallet");
105+
const account = await wallet.connect({
106+
client,
107+
chain: arbitrumSepolia,
108+
privateKey: process.env.PRIVATE_KEY!,
109+
});
110+
111+
// 3 · Wrap the deployed contract
112+
const contract = getContract({
113+
client,
114+
chain: arbitrumSepolia,
115+
address: "<DEPLOYED_ADDRESS>",
116+
});
117+
118+
// 4 · Prepare the mint transaction
119+
const transaction = mintTo({
120+
contract,
121+
to: "0xRecipient",
122+
nft: {
123+
name: "Stylus NFT #1",
124+
// image, description, attributes, … are optional
125+
},
126+
});
127+
128+
// 5 · Send the transaction
129+
const result = await sendTransaction({ transaction, account });
130+
console.log("Minted token:", result);
131+
```
132+
133+
</Step>
134+
135+
</Steps>
136+
137+
## Next Steps
138+
139+
- 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)