Skip to content
This repository was archived by the owner on Aug 5, 2024. It is now read-only.

Commit 78c56b4

Browse files
TS quickstart
1 parent 5292fe1 commit 78c56b4

File tree

6 files changed

+211
-7
lines changed

6 files changed

+211
-7
lines changed

src/app/dotnet/getting-started/page.mdx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Callout, Steps, Step, ArticleIconCard, createMetadata } from "@doc";
1+
import { Callout, Steps, Step, ArticleIconCard, createMetadata, Stack } from "@doc";
22
import { GraduationCap } from "lucide-react";
33

44
export const metadata = createMetadata({
@@ -71,6 +71,8 @@ Check the SDK documentation for more advanced features like interacting with sma
7171

7272
## Gaming Integrations
7373

74+
<Stack>
75+
7476
<ArticleIconCard
7577
href="/dotnet/godot"
7678
icon={GraduationCap}
@@ -82,3 +84,5 @@ Check the SDK documentation for more advanced features like interacting with sma
8284
icon={GraduationCap}
8385
title="Unity Integration"
8486
/>
87+
88+
</Stack>

src/app/dotnet/sidebar.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { SideBar } from "@/components/Layouts/DocLayout";
2-
import { SidebarLink } from "@/components/others/Sidebar";
1+
import type { SideBar } from "@/components/Layouts/DocLayout";
2+
import type { SidebarLink } from "@/components/others/Sidebar";
3+
import { ZapIcon } from "lucide-react";
34

45
const walletProviders: SidebarLink = (() => {
56
const parentSlug = "/dotnet/wallets/providers";
@@ -195,6 +196,7 @@ export const sidebar: SideBar = {
195196
{
196197
name: "Getting Started",
197198
href: "/dotnet/getting-started",
199+
icon: <ZapIcon />,
198200
},
199201
{
200202
name: "Godot Setup",

src/app/typescript/v5/extensions/use/page.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const transaction = mintTo({
5252
// Send the transaction
5353
const transactionResult = await sendTransaction({
5454
transaction,
55-
wallet,
55+
account,
5656
});
5757
```
5858

@@ -77,6 +77,6 @@ const transaction = transfer({
7777
// Send the transaction
7878
const transactionResult = await sendTransaction({
7979
transaction,
80-
wallet,
80+
account,
8181
});
8282
```
Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import { InstallTabs, Steps, Step, Callout } from "@doc";
2+
3+
# Getting Started
4+
5+
In this quickstart guide, we'll create a basic script to generate a wallet using a private key and send a transaction. We’ll assume you already have a TypeScript project created.
6+
7+
<Steps>
8+
<Step title="Install the SDK">
9+
10+
To get started, install the thirdweb SDK using your preferred package manager.
11+
12+
<InstallTabs npm="npm i thirdweb" yarn="yarn add thirdweb" pnpm="pnpm i thirdweb" bun="bun i thirdweb" />
13+
</Step>
14+
15+
<Step title="Create a thirdweb client">
16+
17+
Get an API key from https://thirdweb.com/dashboard/settings/api-keys and add it to your `.env`.
18+
19+
```shell
20+
THIRDWEB_SECRET_KEY=[YOUR SECRET KEY]
21+
WALLET_PRIVATE_KEY=[YOUR WALLET PRIVATE KEY]
22+
```
23+
24+
Create a thirdweb client in your script.
25+
26+
```ts
27+
import { createThirdwebClient } from "thirdweb"
28+
29+
const client = createThirdwebClient({
30+
// use `secretKey` for server side or script usage
31+
secretKey: process.env.THIRDWEB_SECRET_KEY
32+
});
33+
```
34+
35+
<Callout variant="warning" title="Client Id vs Secret Key">
36+
Client Id is used for **client side usage** and is restricted by the domain restrictions you set on your API key, it is a public identifier which can be used on the frontend safely.
37+
38+
Secret key is used for **server side or script usage** and is not restricted by the domain restrictions. Never expose your secret key in client side code.
39+
</Callout>
40+
41+
42+
</Step>
43+
44+
<Step title="Read Contract State">
45+
46+
A client is all your need to start reading blockchain data.
47+
48+
1. Import the extensions you want to use.
49+
2. Define a contract with `getContract` at a given address and chain.
50+
3. Call the extension function to read the data.
51+
52+
```ts
53+
import { getContract } from "thirdweb";
54+
import { sepolia } from "thirdweb/chains";
55+
// 1. import the extension you want to use
56+
import { getOwnedNFTs } from "thirdweb/extensions/erc1155";
57+
58+
// 2. get the contract
59+
const contract = getContract({
60+
client,
61+
address: "0x1234...",
62+
chain: sepolia,
63+
});
64+
65+
// 3. call the extension function
66+
const ownedNFTs = await getOwnedNFTs({
67+
contract,
68+
address: "0x1234...",
69+
});
70+
71+
console.log(ownedNFTs);
72+
```
73+
74+
</Step>
75+
76+
<Step title="Generate a wallet from a private key">
77+
78+
To perform transactions from your script, you'll need an account. You can generate a wallet from a private key using the `privateKeyToAccount` function.
79+
80+
```ts
81+
import { privateKeyToAccount } from "thirdweb/wallets"
82+
83+
const account = privateKeyToAccount({
84+
client,
85+
privateKey: process.env.PRIVATE_KEY
86+
});
87+
88+
// Get the address of the account
89+
const address = account.address;
90+
console.log("Connected as", address);
91+
```
92+
93+
</Step>
94+
95+
<Step title="Read Wallet Data">
96+
97+
Let's read balance of the account you just created, you'll need funds to perform transactions.
98+
99+
```ts
100+
import { getWalletBalance } from "thirdweb/wallets";
101+
102+
// Get the balance of the account
103+
const balance = await getWalletBalance({
104+
account,
105+
chain: sepolia,
106+
});
107+
console.log("Balance:", balance.displayValue, balance.symbol);
108+
```
109+
110+
</Step>
111+
112+
<Step title="Send a transaction">
113+
114+
With the account created and funded, you can now send a transaction.
115+
116+
1. Import the extension you want to use.
117+
2. Define a contract with `getContract` at a given address and chain.
118+
3. Call the extension function to prepare the transaction.
119+
4. Send the transaction.
120+
121+
```ts
122+
import { getContract, sendTransaction } from "thirdweb";
123+
// 1. Import the extension you want to use
124+
import { transfer } from "thirdweb/extensions/erc20";
125+
126+
// 2. Define the contract
127+
const contract = getContract({
128+
client,
129+
address: "0x1234...",
130+
chain: sepolia,
131+
});
132+
133+
// 3. Call the extension function to prepare the transaction
134+
const transaction = transfer({
135+
contract,
136+
to: "0x1234...",
137+
amount: "0.01",
138+
});
139+
140+
// 4. Send the transaction
141+
const result = await sendTransaction({
142+
transaction,
143+
account,
144+
});
145+
146+
console.log("Transaction hash:", result.transactionHash);
147+
```
148+
149+
You can also call generic contract functions using the `prepareContractCall` function by just specifying the solidity method signature you want to call. The arguments will be automatically inferred based on the method signature.
150+
151+
```ts
152+
import { getContract, prepareContractCall, sendTransaction } from "thirdweb";
153+
import { sepolia } from "thirdweb/chains";
154+
import { toWei } from "thirdweb/utils";
155+
156+
// 1. Define the contract
157+
const contract = getContract({
158+
client,
159+
address: "0x1234...",
160+
chain: sepolia,
161+
});
162+
163+
// 2. Prepare the transaction
164+
const transaction = prepareContractCall({
165+
contract,
166+
// Pass the method signature that you want to call
167+
method: "function mintTo(address to, uint256 amount)",
168+
// and the params for that method
169+
// Their types are automatically inferred based on the method signature
170+
params: ["0x123...", toWei("100")],
171+
});
172+
173+
// 3. Send the transaction
174+
const result = await sendTransaction({
175+
transaction,
176+
account,
177+
});
178+
179+
console.log("Transaction hash:", result.transactionHash);
180+
```
181+
182+
</Step>
183+
<Step title="Conclusion">
184+
185+
You've now learned the basics of how to use the thirdweb SDK to read and write to the blockchain. You can now start building your own applications and explore the full potential of the SDK.
186+
187+
[View the full SDK reference](/references/typescript/v5).
188+
189+
190+
</Step>
191+
192+
</Steps>

src/app/typescript/v5/sidebar.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { FunctionDoc } from "typedoc-better-json";
22
import type { SideBar } from "../../../components/Layouts/DocLayout";
33
import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
44
import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups";
5-
import { Book, CodeIcon } from "lucide-react";
5+
import { Book, CodeIcon, ZapIcon } from "lucide-react";
66

77
const slug = "/typescript/v5";
88
const docs = await fetchTypeScriptDoc("v5");
@@ -17,7 +17,11 @@ export const sidebar: SideBar = {
1717
name: "Overview",
1818
href: slug,
1919
},
20-
// TODO (docs): add getting started
20+
{
21+
name: "Getting Started",
22+
href: `${slug}/getting-started`,
23+
icon: <ZapIcon />,
24+
},
2125
{ separator: true },
2226
{
2327
name: "Core",

src/app/unity/sidebar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { SideBar } from "@/components/Layouts/DocLayout";
22
import { SidebarLink } from "@/components/others/Sidebar";
3+
import { ZapIcon } from "lucide-react";
34

45
const walletProviders: SidebarLink = (() => {
56
const parentSlug = "/unity/wallets/providers";
@@ -397,6 +398,7 @@ export const sidebar: SideBar = {
397398
{
398399
name: "Getting Started",
399400
href: "/unity/getting-started",
401+
icon: <ZapIcon />,
400402
},
401403
{
402404
name: "Core",

0 commit comments

Comments
 (0)