diff --git a/src/app/dotnet/getting-started/page.mdx b/src/app/dotnet/getting-started/page.mdx index 98d2fe67..040911c5 100644 --- a/src/app/dotnet/getting-started/page.mdx +++ b/src/app/dotnet/getting-started/page.mdx @@ -1,4 +1,4 @@ -import { Callout, Steps, Step, ArticleIconCard, createMetadata } from "@doc"; +import { Callout, Steps, Step, ArticleIconCard, createMetadata, Stack } from "@doc"; import { GraduationCap } from "lucide-react"; export const metadata = createMetadata({ @@ -71,6 +71,8 @@ Check the SDK documentation for more advanced features like interacting with sma ## Gaming Integrations + + + + diff --git a/src/app/dotnet/sidebar.tsx b/src/app/dotnet/sidebar.tsx index 33d73324..a9c0ae16 100644 --- a/src/app/dotnet/sidebar.tsx +++ b/src/app/dotnet/sidebar.tsx @@ -1,5 +1,6 @@ -import { SideBar } from "@/components/Layouts/DocLayout"; -import { SidebarLink } from "@/components/others/Sidebar"; +import type { SideBar } from "@/components/Layouts/DocLayout"; +import type { SidebarLink } from "@/components/others/Sidebar"; +import { ZapIcon } from "lucide-react"; const walletProviders: SidebarLink = (() => { const parentSlug = "/dotnet/wallets/providers"; @@ -195,6 +196,7 @@ export const sidebar: SideBar = { { name: "Getting Started", href: "/dotnet/getting-started", + icon: , }, { name: "Godot Setup", diff --git a/src/app/typescript/v5/extensions/use/page.mdx b/src/app/typescript/v5/extensions/use/page.mdx index b97709d8..ff4708ff 100644 --- a/src/app/typescript/v5/extensions/use/page.mdx +++ b/src/app/typescript/v5/extensions/use/page.mdx @@ -52,7 +52,7 @@ const transaction = mintTo({ // Send the transaction const transactionResult = await sendTransaction({ transaction, - wallet, + account, }); ``` @@ -77,6 +77,6 @@ const transaction = transfer({ // Send the transaction const transactionResult = await sendTransaction({ transaction, - wallet, + account, }); ``` diff --git a/src/app/typescript/v5/getting-started/page.mdx b/src/app/typescript/v5/getting-started/page.mdx new file mode 100644 index 00000000..5d3ebe77 --- /dev/null +++ b/src/app/typescript/v5/getting-started/page.mdx @@ -0,0 +1,192 @@ +import { InstallTabs, Steps, Step, Callout } from "@doc"; + +# Getting Started + +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. + + + + +To get started, install the thirdweb SDK using your preferred package manager. + + + + + + +Get an API key from https://thirdweb.com/dashboard/settings/api-keys and add it to your `.env`. + +```shell +THIRDWEB_SECRET_KEY=[YOUR SECRET KEY] +WALLET_PRIVATE_KEY=[YOUR WALLET PRIVATE KEY] +``` + +Create a thirdweb client in your script. + +```ts +import { createThirdwebClient } from "thirdweb" + +const client = createThirdwebClient({ + // use `secretKey` for server side or script usage + secretKey: process.env.THIRDWEB_SECRET_KEY +}); +``` + + + 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. + + 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. + + + + + + + +A client is all your need to start reading blockchain data. + +1. Import the extensions you want to use. +2. Define a contract with `getContract` at a given address and chain. +3. Call the extension function to read the data. + +```ts +import { getContract } from "thirdweb"; +import { sepolia } from "thirdweb/chains"; +// 1. import the extension you want to use +import { getOwnedNFTs } from "thirdweb/extensions/erc1155"; + +// 2. get the contract +const contract = getContract({ + client, + address: "0x1234...", + chain: sepolia, +}); + +// 3. call the extension function +const ownedNFTs = await getOwnedNFTs({ + contract, + address: "0x1234...", +}); + +console.log(ownedNFTs); +``` + + + + + +To perform transactions from your script, you'll need an account. You can generate a wallet from a private key using the `privateKeyToAccount` function. + +```ts +import { privateKeyToAccount } from "thirdweb/wallets" + +const account = privateKeyToAccount({ + client, + privateKey: process.env.PRIVATE_KEY +}); + +// Get the address of the account +const address = account.address; +console.log("Connected as", address); +``` + + + + + +Let's read balance of the account you just created, you'll need funds to perform transactions. + +```ts +import { getWalletBalance } from "thirdweb/wallets"; + +// Get the balance of the account +const balance = await getWalletBalance({ + account, + chain: sepolia, +}); +console.log("Balance:", balance.displayValue, balance.symbol); +``` + + + + + +With the account created and funded, you can now send a transaction. + +1. Import the extension you want to use. +2. Define a contract with `getContract` at a given address and chain. +3. Call the extension function to prepare the transaction. +4. Send the transaction. + +```ts +import { getContract, sendTransaction } from "thirdweb"; +// 1. Import the extension you want to use +import { transfer } from "thirdweb/extensions/erc20"; + +// 2. Define the contract +const contract = getContract({ + client, + address: "0x1234...", + chain: sepolia, +}); + +// 3. Call the extension function to prepare the transaction +const transaction = transfer({ + contract, + to: "0x1234...", + amount: "0.01", +}); + +// 4. Send the transaction +const result = await sendTransaction({ + transaction, + account, +}); + +console.log("Transaction hash:", result.transactionHash); +``` + +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. + +```ts +import { getContract, prepareContractCall, sendTransaction } from "thirdweb"; +import { sepolia } from "thirdweb/chains"; +import { toWei } from "thirdweb/utils"; + +// 1. Define the contract +const contract = getContract({ + client, + address: "0x1234...", + chain: sepolia, +}); + +// 2. Prepare the transaction +const transaction = prepareContractCall({ + contract, + // Pass the method signature that you want to call + method: "function mintTo(address to, uint256 amount)", + // and the params for that method + // Their types are automatically inferred based on the method signature + params: ["0x123...", toWei("100")], +}); + +// 3. Send the transaction +const result = await sendTransaction({ + transaction, + account, +}); + +console.log("Transaction hash:", result.transactionHash); +``` + + + + +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. + +[View the full SDK reference](/references/typescript/v5). + + + + + \ No newline at end of file diff --git a/src/app/typescript/v5/sidebar.tsx b/src/app/typescript/v5/sidebar.tsx index fe188695..e7436359 100644 --- a/src/app/typescript/v5/sidebar.tsx +++ b/src/app/typescript/v5/sidebar.tsx @@ -2,7 +2,7 @@ import type { FunctionDoc } from "typedoc-better-json"; import type { SideBar } from "../../../components/Layouts/DocLayout"; import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups"; -import { Book, CodeIcon } from "lucide-react"; +import { Book, CodeIcon, ZapIcon } from "lucide-react"; const slug = "/typescript/v5"; const docs = await fetchTypeScriptDoc("v5"); @@ -17,7 +17,11 @@ export const sidebar: SideBar = { name: "Overview", href: slug, }, - // TODO (docs): add getting started + { + name: "Getting Started", + href: `${slug}/getting-started`, + icon: , + }, { separator: true }, { name: "Core", diff --git a/src/app/unity/sidebar.tsx b/src/app/unity/sidebar.tsx index 94d61686..85ba1382 100644 --- a/src/app/unity/sidebar.tsx +++ b/src/app/unity/sidebar.tsx @@ -1,5 +1,6 @@ import { SideBar } from "@/components/Layouts/DocLayout"; import { SidebarLink } from "@/components/others/Sidebar"; +import { ZapIcon } from "lucide-react"; const walletProviders: SidebarLink = (() => { const parentSlug = "/unity/wallets/providers"; @@ -397,6 +398,7 @@ export const sidebar: SideBar = { { name: "Getting Started", href: "/unity/getting-started", + icon: , }, { name: "Core",