Skip to content

Commit b74b3f2

Browse files
eabdelmoneimeabdelmoneim
committed
completed core building blocks
1 parent 3a1f17e commit b74b3f2

File tree

10 files changed

+856
-14
lines changed

10 files changed

+856
-14
lines changed

‎ai-docs/sdk/ai-docs/README.md

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,27 @@
1616

1717
### Phase 2 — Core Building‑Blocks
1818

19-
- [ ] 4. **`ThirdwebClient` class** (core HTTP / RPC client)
20-
- [ ] 5. **`createThirdwebClient` helper & configuration schema**
21-
- [ ] 6. **`useActiveAccount` React hook**
22-
- [ ] 7. **Wallet connection React components (`ConnectButton`, etc.)**
23-
- [ ] 8. **Transaction helpers (`prepareContractCall`, `sendTransaction`, etc.)**
24-
- [ ] 9. **`Contract` abstraction & frequently‑used methods**
19+
- [x] 4. **`ThirdwebClient` type** (client object docs)
20+
- [x] 5. **`createThirdwebClient` helper & configuration schema**
21+
- [x] 6. **`useActiveAccount` React hook**
22+
- [x] 7. **Wallet connection React components (`ConnectButton`, etc.)**
23+
- [x] 8. **`PayEmbed` component (thirdweb Pay)**
24+
- [x] 9. **Transaction helpers (`prepareContractCall`, `sendTransaction`, `readContract`, etc.)**
25+
- [x] 10. **`Extensions` that implement standards like `ERC721`, `ERC1155`, `ERC20`, `ERC4337` & frequently‑used methods**
2526

2627
### Phase 3 — Supporting Modules
2728

28-
- [ ] 10. **Storage / File upload APIs**
29-
- [ ] 11. **Auth module (`login`, `logout`, `validateSession`)**
30-
- [ ] 12. **Gas & Pay utilities**
31-
- [ ] 13. **Chain / Network constants & helpers**
32-
- [ ] 14. **Analytics / Insight utilities**
29+
- [ ] 12. **Storage / File upload APIs**
30+
- [ ] 13. **Auth module (`login`, `logout`, `validateSession`)**
31+
- [ ] 14. **Gas & Pay utilities**
32+
- [ ] 15. **Chain / Network constants & helpers**
33+
- [ ] 16. **Analytics / Insight utilities**
3334

3435
### Phase 4 — Reference & Indexes
3536

36-
- [ ] 15. **Generate master index file listing all doc pages**
37-
- [ ] 16. **Write contribution guidelines for keeping docs up‑to‑date**
38-
- [ ] 17. **Quality pass: lint markdown, verify code samples compile**
37+
- [ ] 17. **Generate master index file listing all doc pages**
38+
- [ ] 18. **Write contribution guidelines for keeping docs up‑to‑date**
39+
- [ ] 19. **Quality pass: lint markdown, verify code samples compile**
3940

4041
---
4142

‎ai-docs/sdk/ai-docs/components/ConnectButton.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# ConnectButton
2+
3+
## <!--
4+
5+
title: ConnectButton
6+
category: component
7+
8+
---
9+
10+
-->
11+
12+
## Description
13+
14+
`ConnectButton` renders an opinionated wallet‑connect UI that allows users to:
15+
16+
1. Select a wallet (in‑app, injected, WalletConnect, etc.)
17+
2. Authorise the connection
18+
3. View wallet details (address, balance, NFTs) and manage the session
19+
20+
It handles network switching, auto‑reconnect, SIWE authentication, account‑abstraction, and integrates thirdweb **Pay** flows. You can drop it into any React/Next.js app and customise nearly every aspect via props.
21+
22+
## Quick Start
23+
24+
```tsx
25+
import { createThirdwebClient } from "thirdweb";
26+
import { ConnectButton, darkTheme } from "thirdweb/react";
27+
import { polygon } from "thirdweb/chains";
28+
29+
const client = createThirdwebClient({ clientId: "YOUR_ID" });
30+
31+
export default function Page() {
32+
return <ConnectButton client={client} chain={polygon} theme={darkTheme()} />;
33+
}
34+
```
35+
36+
## Core Props (cheat‑sheet)
37+
38+
| Prop | Type | Default | Purpose |
39+
| -------------- | ----------------------------------- | -------------------- | ---------------------------------------------------- |
40+
| `client` | `ThirdwebClient` | — | SDK entrypoint (required) |
41+
| `chain` | `Chain` | undefined | Ensure wallet connects to a specific chain |
42+
| `chains` | `Chain[]` | undefined | Multi‑chain support list |
43+
| `wallets` | `Wallet[]` | default wallets | Limit wallets shown |
44+
| `theme` | `"dark" \| "light" \| Theme` | `"dark"` | UI theming |
45+
| `autoConnect` | `boolean \| { timeout: number }` | `{ timeout: 15000 }` | Auto‑reconnect behaviour |
46+
| `connectModal` | `ConnectButton_connectModalOptions` | — | Customise the connect modal (title, size, TOS, etc.) |
47+
| `detailsModal` | `ConnectButton_detailsModalOptions` | — | Customise post‑connect details modal |
48+
| `onConnect` | `(wallet) => void` | — | Callback when a wallet connects |
49+
| `onDisconnect` | `(info) => void` | — | Callback when user disconnects |
50+
51+
For the full prop surface see `ConnectButtonProps` type.
52+
53+
## Examples
54+
55+
### Minimal
56+
57+
```tsx
58+
<ConnectButton client={client} />
59+
```
60+
61+
### Custom button label + autoConnect off
62+
63+
```tsx
64+
<ConnectButton
65+
client={client}
66+
autoConnect={false}
67+
connectButton={{ label: "Sign in" }}
68+
/>
69+
```
70+
71+
### SIWE authentication required
72+
73+
```tsx
74+
<ConnectButton
75+
client={client}
76+
auth={{
77+
domain: "example.com",
78+
statement: "Sign to authenticate",
79+
}}
80+
/>
81+
```
82+
83+
### Account‑abstraction gasless setup
84+
85+
```tsx
86+
import { sepolia } from "thirdweb/chains";
87+
88+
<ConnectButton
89+
client={client}
90+
accountAbstraction={{
91+
factoryAddress: "0xFactory",
92+
chain: sepolia,
93+
gasless: true,
94+
}}
95+
/>;
96+
```
97+
98+
## Signature
99+
100+
```tsx
101+
function ConnectButton(props: ConnectButtonProps): JSX.Element;
102+
```
103+
104+
## Related
105+
106+
- `useActiveAccount` hook
107+
- `useConnect` hook
108+
- [`ConnectEmbed`](/components/ConnectEmbed.md)
109+
- [`ConnectButtonProps` type](https://portal.thirdweb.com/references/typescript/v5/ConnectButtonProps)

‎ai-docs/sdk/ai-docs/components/PayEmbed.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
# PayEmbed
2+
3+
## <!--
4+
5+
title: PayEmbed
6+
category: component
7+
8+
---
9+
10+
-->
11+
12+
## Description
13+
14+
`PayEmbed` is a powerful, self‑contained widget that lets users **buy tokens, fund their wallet, or make direct payments** with either crypto or fiat – all inside your dApp. It wraps wallet‑connection logic, token selection, on‑ramp providers, and thirdweb’s transaction services into a single drop‑in React component.
15+
16+
Use it for:
17+
18+
- On‑boarding users who don’t yet own crypto
19+
- Selling digital goods (NFTs, in‑app items) via direct payments
20+
- Topping‑up smart‑account balances before gas‑sponsored actions
21+
22+
## Quick Start
23+
24+
```tsx
25+
import { createThirdwebClient } from "thirdweb";
26+
import { PayEmbed } from "thirdweb/react";
27+
28+
const client = createThirdwebClient({ clientId: "YOUR_CLIENT_ID" });
29+
30+
export default function Checkout() {
31+
return <PayEmbed client={client} />;
32+
}
33+
```
34+
35+
## Core Props (cheat‑sheet)
36+
37+
| Prop | Type | Required | Purpose |
38+
| --------------------- | ---------------------------- | -------- | -------------------------------------------------------------------------------- |
39+
| `client` | `ThirdwebClient` | ✅ | SDK entrypoint |
40+
| `payOptions` | `PayUIOptions` | — | Configure mode (`fund_wallet` \| `direct_payment` \| `transaction`) and metadata |
41+
| `supportedTokens` | `SupportedTokens` | — | Override default token list per chain |
42+
| `theme` | `"dark" \| "light" \| Theme` | — | UI theming |
43+
| `locale` | `LocaleId` | — | Localise UI strings |
44+
| `connectOptions` | `PayEmbedConnectOptions` | — | Fine‑tune the underlying Connect flow |
45+
| `style` / `className` | React styling | — | Container styling |
46+
47+
## Common Recipes
48+
49+
### 1. Fund wallet (default)
50+
51+
```tsx
52+
<PayEmbed client={client} payOptions={{ mode: "fund_wallet" }} />
53+
```
54+
55+
### 2. Direct payment for merchandise
56+
57+
```tsx
58+
import { base, getDefaultToken } from "thirdweb/chains";
59+
60+
<PayEmbed
61+
client={client}
62+
theme="light"
63+
payOptions={{
64+
mode: "direct_payment",
65+
paymentInfo: {
66+
amount: "35",
67+
chain: base,
68+
token: getDefaultToken(base, "USDC"),
69+
sellerAddress: "0xSeller",
70+
},
71+
metadata: {
72+
name: "Black Hoodie (Size L)",
73+
image: "/hoodie.png",
74+
},
75+
}}
76+
/>;
77+
```
78+
79+
### 3. Gasless transaction top‑up
80+
81+
```tsx
82+
<PayEmbed
83+
client={client}
84+
payOptions={{
85+
mode: "transaction",
86+
transaction: preparedTx, // output of prepareContractCall
87+
}}
88+
/>
89+
```
90+
91+
## Signature
92+
93+
```tsx
94+
function PayEmbed(props: PayEmbedProps): JSX.Element;
95+
```
96+
97+
See [`PayEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/PayEmbedProps) and [`PayUIOptions`](https://portal.thirdweb.com/references/typescript/v5/PayUIOptions) for the full, exhaustive type definitions.
98+
99+
## Related
100+
101+
- `ConnectButton` \- under‑the‑hood connect flow
102+
- Transaction helpers: `prepareContractCall`, `sendTransaction`
103+
- [`PayUIOptions` type](https://portal.thirdweb.com/references/typescript/v5/PayUIOptions)

‎ai-docs/sdk/ai-docs/extensions/ERC1155.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# ERC1155 Extension
2+
3+
## <!--
4+
5+
title: ERC1155 Extension
6+
category: extension
7+
8+
---
9+
10+
-->
11+
12+
## Description
13+
14+
The **ERC‑1155 extension** lets you work with multi‑token (semi‑fungible) contracts that house many tokenIds under one contract. Helpers cover balance queries, batch transfers, mint/burn, drop mechanics, and event subscriptions.
15+
16+
## Import Cheatsheet
17+
18+
```ts
19+
import {
20+
// Reads
21+
balanceOf,
22+
balanceOfBatch,
23+
totalSupply,
24+
uri,
25+
// Writes
26+
mintTo,
27+
mintBatchTo,
28+
transferFrom,
29+
burn,
30+
} from "thirdweb/extensions/erc1155";
31+
```
32+
33+
## Examples
34+
35+
### Mint 100 tokens of id 42 to a wallet
36+
37+
```ts no‑lint
38+
const tx = mintTo({ contract, to: user, tokenId: 42n, amount: 100n });
39+
await sendAndConfirmTransaction({ account: admin, transaction: tx });
40+
```
41+
42+
### Check wallet's balance for two ids
43+
44+
```ts
45+
const [swords, shields] = await balanceOfBatch({
46+
contract,
47+
owner: myAddr,
48+
tokenIds: [1n, 2n],
49+
});
50+
```
51+
52+
### Claim via Drop
53+
54+
```ts
55+
const tx = claimTo({ contract, to: user, tokenId: 10n, quantity: 5n });
56+
```
57+
58+
## Key Helpers Table
59+
60+
| Category | Helper | Purpose |
61+
| -------- | ----------------------- | ------------------------- |
62+
| Read | `balanceOf` | Balance for id |
63+
| Read | `uri` | Metadata URI per id |
64+
| Read | `totalSupply` | Supply across ids |
65+
| Write | `mintTo`, `mintBatchTo` | Mint one / many ids |
66+
| Write | `transferFrom` | Safe transfer single id |
67+
| Write | `burn` | Burn tokens |
68+
| Drop | `claimTo` | Claim during active phase |
69+
| Drop | `setClaimConditions` | Configure phases |
70+
71+
## Events
72+
73+
```ts
74+
import { transferSingleEvent } from "thirdweb/extensions/erc1155";
75+
const { data } = useContractEvents({
76+
contract,
77+
events: [transferSingleEvent({})],
78+
});
79+
```
80+
81+
## Related
82+
83+
- ERC‑721, ERC‑20 extensions
84+
- Batch transfer utilities

0 commit comments

Comments
 (0)