Skip to content

Commit a491de4

Browse files
joaquim-vergesjoaquim-verges
authored
[Docs] Refactor Contract and Tokens docs (#7676)
1 parent 898efc5 commit a491de4

File tree

254 files changed

+1753
-902
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

254 files changed

+1753
-902
lines changed

‎apps/portal/src/app/Header.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,8 @@ const links = [
4848
name: "Contracts",
4949
},
5050
{
51-
href: "/insight",
52-
name: "Insight",
53-
},
54-
{
55-
href: "/vault",
56-
name: "Vault",
51+
href: "/tokens",
52+
name: "Tokens",
5753
},
5854
];
5955

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Deploy Contracts
2+
3+
You can deploy contracts via CLI or programatically.
4+
5+
## Deploying via CLI
6+
7+
From your forge or hardhat project, you can deploy your contract with a single command.
8+
9+
```bash
10+
npx thirdweb deploy -k <project-secret-key>
11+
```
12+
13+
You can also publish your contract to be deployable by anyone on any chain.
14+
15+
```bash
16+
npx thirdweb publish -k <project-secret-key>
17+
```
18+
19+
20+
21+
## Deploying via SDK
22+
23+
You can deploy contracts from ABI and bytecode.
24+
25+
```ts
26+
import { deployContract } from "thirdweb/deploys";
27+
28+
const address = await deployContract({
29+
client,
30+
chain,
31+
bytecode: "0x...",
32+
abi: contractAbi,
33+
constructorParams: {
34+
param1: "value1",
35+
param2: 123,
36+
},
37+
salt, // optional: salt enables deterministic deploys
38+
});
39+
```
40+
41+
Or alternatively, you can deploy a contract from a previously published contract.
42+
43+
```ts
44+
import { deployPublishedContract } from "thirdweb/deploys";
45+
46+
const address = await deployPublishedContract({
47+
client,
48+
chain,
49+
account,
50+
contractId: "MyPublishedContract",
51+
contractParams: {
52+
param1: "value1",
53+
param2: 123,
54+
},
55+
publisher: "0x...", // optional, defaults to the thirdweb deployer
56+
});
57+
```

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Listening to Events
2+
3+
The recommended way to listen to contract events is to use the [`getContractEvents`](/references/typescript/v5/getContractEvents) function and passing a prepared event with the Solidity event signature and the params. This is type-safe based on the Solidity event signature you define. You can get your desired contract event signature from the solidity code directly.
4+
5+
```ts
6+
import { getContractEvents, prepareEvent } from "thirdweb";
7+
8+
const myEvent = prepareEvent({
9+
signature: "event Transfer(address indexed from, address indexed to, uint256 value)",
10+
});
11+
12+
const events = await getContractEvents({
13+
contract: myContract,
14+
events: [myEvent],
15+
});
16+
```
17+
18+
### Using standard event definitions
19+
20+
You can also use the standard event definitions from the SDK to define the events you want to listen to.
21+
22+
```ts
23+
import { getContractEvents } from "thirdweb";
24+
import { transferEvent } from "thirdweb/extensions/erc20";
25+
26+
const events = await getContractEvents({
27+
contract: myContract,
28+
events: [transferEvent()],
29+
});
30+
```
31+
32+
### Generating all read functions and events for a deployed contract
33+
34+
Using the CLI, you can generate optimized functions for all the possible calls to a contract. This saves you time and precomputes all the necessary encoding.
35+
36+
```shell
37+
npx thirdweb generate <contractId>/<contractAddress>
38+
```
39+
40+
Read more on how to [generate extension functions using the CLI](/contracts/generate).

‎apps/portal/src/app/contracts/extensions/page.tsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
2+
import { getCustomTag } from "@/app/references/components/TDoc/utils/getSidebarLinkgroups";
3+
import { DocLink, Heading, Paragraph } from "@/components/Document";
4+
import { Table, TBody, Td, Th, Tr } from "@/components/Document/Table";
5+
6+
export default async function ExtensionPage() {
7+
const docs = await fetchTypeScriptDoc();
8+
const extensions = [
9+
...new Set(
10+
docs.functions
11+
?.filter((f) => {
12+
const [extension] = getCustomTag(f) || [];
13+
return extension === "@extension";
14+
})
15+
?.map((f) => {
16+
const [, extensionName] = getCustomTag(f) || [];
17+
return extensionName;
18+
})
19+
.filter((item) => item !== undefined) || [],
20+
),
21+
];
22+
23+
const overrides: Record<string, { name?: string; description?: string }> = {
24+
common: {
25+
description: "Common contract extensions",
26+
name: "Common",
27+
},
28+
erc20: { description: "ERC20 token standard extensions" },
29+
erc721: { description: "ERC721 token standard extensions" },
30+
erc1155: { description: "ERC1155 token standard extensions" },
31+
erc4337: { description: "ERC4337 account abstraction extensions" },
32+
erc4626: { description: "ERC4626 Tokenized Vaults extensions" },
33+
farcaster: { description: "Farcaster protocol extensions" },
34+
lens: { description: "Lens protocol extensions" },
35+
};
36+
return (
37+
<>
38+
<Heading anchorId="built-in-extensions" level={1}>
39+
Built-in extensions for common standards
40+
</Heading>
41+
<Paragraph>
42+
The SDK comes packed with a set of built-in extensions for common
43+
standards. These extensions are designed to make it easy to interact
44+
with popular contracts and protocols. They are available as part of the
45+
SDK and can be used in your application without any additional setup.
46+
</Paragraph>
47+
<Table>
48+
<TBody>
49+
<Tr>
50+
<Th>Standard</Th>
51+
<Th>Import Path</Th>
52+
<Th>Description</Th>
53+
</Tr>
54+
55+
{extensions.map((item) => {
56+
return (
57+
<Tr key={item}>
58+
<Td>{overrides[item]?.name ?? item}</Td>
59+
<Td>
60+
<DocLink
61+
href={`/references/typescript/v5/functions#${item.toLowerCase()}`}
62+
>
63+
thirdweb/extensions/{item.toLowerCase()}
64+
</DocLink>
65+
</Td>
66+
<Td>{overrides[item]?.description ?? `${item} extensions`}</Td>
67+
</Tr>
68+
);
69+
})}
70+
</TBody>
71+
</Table>
72+
<Paragraph>
73+
More extensions are being added regularly. Anyone can{" "}
74+
<DocLink href="/typescript/v5/extensions/create">
75+
create an extension
76+
</DocLink>{" "}
77+
and contribute it back to the repository. You can also{" "}
78+
<DocLink href="/typescript/v5/extensions/generate">
79+
generate extensions
80+
</DocLink>{" "}
81+
for any deployed contract.
82+
</Paragraph>
83+
</>
84+
);
85+
}

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Generating extensions
2+
3+
You can generate precompiled, optimized extensions for any deployed contract using the thirdweb CLI.
4+
5+
The thirdweb SDK comes with a CLI that can be run with your package manager of choice.
6+
7+
```bash
8+
npx thirdweb generate <chainId>/<contract-address>
9+
```
10+
11+
This will generate a new `thirdweb` directory in your own project, containing the precompiled extension for the contract at the given address.
12+
13+
### Example: Generating an extension for a USDC contract on Optimism
14+
15+
```bash
16+
npx thirdweb generate 10/0x0b2c639c533813f4aa9d7837caf62653d097ff85
17+
```
18+
19+
This will generate the following file `thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85.ts` in your project, containing:
20+
21+
- Precompiled, type-safe event definitions
22+
- Precompiled, type-safe function definitions
23+
24+
You can inspect the generated code, modify it, and use it in your project.
25+
26+
### Example: Using a generated extension function
27+
28+
```typescript
29+
import { permit } from "/thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85";
30+
31+
const contract = getContract({
32+
client,
33+
chain: optimism,
34+
address: USDC_ADDRESS,
35+
});
36+
37+
// Type-safe function to do a permit transaction
38+
const transaction = permit({
39+
owner: ...,
40+
spender: ...,
41+
value: ...,
42+
deadline: ...,
43+
signature: ...,
44+
});
45+
await sendTransaction({ transaction, account });
46+
```
47+
48+
### Example: Using a generated event
49+
50+
```typescript
51+
import { transferEvent } from "/thirdweb/10/0x0b2c639c533813f4aa9d7837caf62653d097ff85";
52+
53+
const contract = getContract({
54+
client,
55+
chain: optimism,
56+
address: USDC_ADDRESS,
57+
});
58+
59+
// Type-safe event listener
60+
const events = await getContractEvents({
61+
contract,
62+
events: [
63+
transferEvent({
64+
from: ...,
65+
to: ...,
66+
})
67+
],
68+
});
69+
```

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ export default async function Layout(props: { children: React.ReactNode }) {
1212

1313
export const metadata = createMetadata({
1414
description:
15-
"Easily create, deploy, and manage smart contracts on any EVM compatible blockchain",
15+
"Easily read, write, deploy, and listen to contract events on any EVM compatible blockchain",
1616
image: {
1717
icon: "contract",
18-
title: "thirdweb contracts",
18+
title: "Contracts",
1919
},
20-
title: "thirdweb Contracts",
20+
title: "Contracts",
2121
});

0 commit comments

Comments
 (0)