From bf056a352d1fef5dd8eb1809f5064dd51363c430 Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Fri, 12 Apr 2024 14:14:53 -0700 Subject: [PATCH] feat: Add wallets documentation page and update extensions table --- .../v5/extensions/built-in/page.mdx | 21 +++--- src/app/typescript/v5/wallets/page.mdx | 67 +++++++++++++++++++ 2 files changed, 78 insertions(+), 10 deletions(-) create mode 100644 src/app/typescript/v5/wallets/page.mdx diff --git a/src/app/typescript/v5/extensions/built-in/page.mdx b/src/app/typescript/v5/extensions/built-in/page.mdx index 0438df15..0d104fb4 100644 --- a/src/app/typescript/v5/extensions/built-in/page.mdx +++ b/src/app/typescript/v5/extensions/built-in/page.mdx @@ -2,15 +2,16 @@ The SDK comes packed with a set of built-in extensions for common standards. These extensions are designed to make it easy to interact with popular contracts and protocols. They are available as part of the SDK and can be used in your application without any additional setup. -| Standard | Import Path | Description | -| --------- | -------------------------------------------------------------------------------- | ----------------------------------- | -| Common | [`thirdweb/extensions/common`](/references/typescript/v5/functions#common) | Common contract extensions | -| ERC20 | [`thirdweb/extensions/erc20`](/references/typescript/v5/functions#erc20) | ERC20 token standard extensions | -| ERC721 | [`thirdweb/extensions/erc721`](/references/typescript/v5/functions#erc721) | ERC721 token standard extensions | -| ERC1155 | [`thirdweb/extensions/erc1155`](/references/typescript/v5/functions#erc1155) | ERC1155 token standard extensions | -| ERC4626 | [`thirdweb/extensions/erc4626`](/references/typescript/v5/functions#erc4626) | ERC4626 Tokenized Vaults extensions | -| ENS | [`thirdweb/extensions/ens`](/references/typescript/v5/functions#ens) | ENS extensions | -| Uniswap | [`thirdweb/extensions/uniswap`](/references/typescript/v5/functions#uniswap) | Uniswap extensions | -| Farcaster | [`thirdweb/extensions/farcaster`](/references/typescript/v5/functions#farcaster) | Farcaster protocol extensions | +| Standard | Import Path | Description | +| --------- | -------------------------------------------------------------------------------- | -------------------------------------- | +| Common | [`thirdweb/extensions/common`](/references/typescript/v5/functions#common) | Common contract extensions | +| ERC20 | [`thirdweb/extensions/erc20`](/references/typescript/v5/functions#erc20) | ERC20 token standard extensions | +| ERC721 | [`thirdweb/extensions/erc721`](/references/typescript/v5/functions#erc721) | ERC721 token standard extensions | +| ERC1155 | [`thirdweb/extensions/erc1155`](/references/typescript/v5/functions#erc1155) | ERC1155 token standard extensions | +| ERC4337 | [`thirdweb/extensions/erc4337`](/references/typescript/v5/functions#erc4337) | ERC4337 account abstraction extensions | +| ERC4626 | [`thirdweb/extensions/erc4626`](/references/typescript/v5/functions#erc4626) | ERC4626 Tokenized Vaults extensions | +| ENS | [`thirdweb/extensions/ens`](/references/typescript/v5/functions#ens) | ENS extensions | +| Uniswap | [`thirdweb/extensions/uniswap`](/references/typescript/v5/functions#uniswap) | Uniswap extensions | +| Farcaster | [`thirdweb/extensions/farcaster`](/references/typescript/v5/functions#farcaster) | Farcaster protocol extensions | More extensions are being added regularly. Anyone can [create an extension](/typescript/v5/extensions/create) and contribute it back to the repository. You can also [generate extensions](/typescript/v5/extensions/generate) for any deployed contract. diff --git a/src/app/typescript/v5/wallets/page.mdx b/src/app/typescript/v5/wallets/page.mdx new file mode 100644 index 00000000..bc208f0b --- /dev/null +++ b/src/app/typescript/v5/wallets/page.mdx @@ -0,0 +1,67 @@ +import { Breadcrumb, createMetadata, ArticleIconCard, Stack } from "@doc"; +import { ComponentIcon } from "lucide-react"; + +export const metadata = createMetadata({ + image: { + title: "Accounts & Wallets", + icon: "typescript", + }, + title: "Accounts & Wallets | thirdweb SDK", + description: "Learn about accounts and wallets in the thirdweb SDK.", +}); + +# Accounts & Wallets + +We have decided to distinguish between "accounts" and "wallets" in the thirdweb SDK. We believe this ultimately provides a more predictable and flexible API for developers. + +## What is an Account? + +- An account always has an `address` and a way to `sign` messages, transactions, and typed data. +- An account is always mapped to exactly one address on the blockchain. +- An account cannot be "connected" or "disconnected" like a wallet, instead it is often the result of a wallet being connected. + +See also: [Account (ethereum.org)](https://ethereum.org/en/glossary/#account) + +## What is a Wallet? + +- A wallet "contains" one or more accounts. +- A wallet can be "connected" (often prompting the user for approval) or "disconnected". +- A wallet cannot independently sign messages, transactions, or typed data, instead, it delegates this to the account(s) it "contains". + +## Example: Connect a wallet and access an account to send a transaction. + +```ts +import { sendTransaction } from "thirdweb"; +// We use MetaMask wallet as an example, the pattern is the same for all wallets +import { createWallet } from "thirdweb/wallets"; + +// initialize the wallet, you can pick any of the 300+ wallet connectors supported +// wallet ids are typed, let your TS editor autocomplete them for you +// ex: "io.metamask", "com.coinbase.wallet", "me.rainbow", etc... +const wallet = createWallet("io.metamask"); + +// connect the wallet, this returns a promise that resolves to the connected account +const account = await wallet.connect({ + // pass the client you created with `createThirdwebClient()` + client, +}); + +// sign & send a transaction with the account -> returns the transaction hash +const { transactionHash } = await sendTransaction({ + // assuming you have called `prepareTransaction()` or `prepareContractCall()` before which returns the prepared transaction to send + transaction, + // Pass the account to sign the transaction with + account, +}); +``` + + + + + +