Skip to content

[Documentation] Refactor: React guides #5375

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 21, 2024
Merged

[Documentation] Refactor: React guides #5375

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 98 additions & 60 deletions apps/portal/src/app/react/v5/account-abstraction/get-started/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import {
createMetadata,
Steps,
Step,
Stack,
} from "@doc";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { WalletsSmartIcon } from "@/icons";
import { WalletsSmartIcon, TypeScriptIcon } from "@/icons";
import { ExternalLink } from "lucide-react";

export const metadata = createMetadata({
image: {
Expand All @@ -20,40 +22,42 @@ export const metadata = createMetadata({
"Getting started to add ERC-4337 Account Abstraction support to your application easily.",
});

# Getting Started
# ERC-4337 Smart Accounts

Getting started to add ERC-4337 compatible smart accounts to your application easily.

Once set, your application will:
Convert any wallet to a ERC-4337 smart account to your application.

- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding.
- Automatically **deploy individual account contracts** for your users when they do their first onchain transaction.
- **Handle all transaction gas costs** via the thirdweb paymaster.
- **Sponsor gas costs for all transactions** via the thirdweb paymaster.

<Steps>
<Step title="Get a free API key">

You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
<Callout title="Sponsored transactions" variant="info">

Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
All transactions performed with the smart account will then be sponsored by your application. Testnet transactions are free, but you need a valid credit card on file for mainnet transactions.

The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for smart accounts to operate and optionally enable [gasless transactions](/glossary/gasless-transactions).
</Callout>

Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
## Live Playground

</Step>
<Step title="Connect smart accounts in your application">
Try out in-app wallets for yourself in the [in-app wallet live playground](https://playground.thirdweb.com/connect/account-abstraction/connect)

The easiest way to get started with account abstraction is to use the [ConnectButton](/connect/sign-in/ConnectButton) component. Simply add the `accountAbstraction` property with the desired chain and whether to sponsor gas for your users.
<Stack>

With this property, all connected wallets will be automatically converted to smart accounts. The connected wallet will be the admin wallet of the smart account.
<ArticleIconCard
title="Try the demo"
icon={ExternalLink}
href="https://playground.thirdweb.com/connect/account-abstraction/connect"
description="See the SDK in action on the live playground"
/>

<Callout title="Sponsored transactions" variant="info">
</Stack>

To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
All transactions performed with the smart account will then be sponsored by your application. Testnet transactions are free, but you need a valid credit card on file for mainnet transactions.
## Usage with Connect UI components

</Callout>
The easiest way to get started with account abstraction is to use the [ConnectButton](/connect/sign-in/ConnectButton) component. Simply add the `accountAbstraction` property with the desired chain and whether to sponsor gas for your users.

With this property, all connected wallets will be automatically converted to smart accounts. The connected wallet will be the admin wallet of the smart account.

```tsx
import { createThirdwebClient } from "thirdweb";
Expand All @@ -77,56 +81,90 @@ return (
);
}
```
</Step>
<Step title="Executing Transactions with Smart Accounts">

Once setup, you can use the rest of the Connect [React SDK](/react/latest) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
You can also make it so *only* in-app wallets get converted to smart accounts, by configuring the in-app wallet individually. Other external wallets will not be converted to smart accounts with this setup.

```tsx
import { getContract } from "thirdweb";
import { useActiveAccount, TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc721";

const contract = getContract({ client, chain, address: "0x..." });

// The ThirdwebProvider setup above already handles the connection to the smart account
// Within the provider, you can use the SDK normally to interact with the blockchain
export default function MyComponent() {
// Get the connected smart account
const smartAccount = useActiveAccount();
// Mint a new NFT
return (
<TransactionButton
transaction={() => {
if (!account) return;
return claimTo({
contract,
to: account.address,
quantity: 1n,
});
}}
>
Mint NFT
</TransactionButton>
);
import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";

const client = createThirdwebClient({
clientId: "YOUR_CLIENT_ID",
});

const wallets = [inAppWallet({
// only configure smart accounts for in-app wallets
smartAccount: {
chain: sepolia,
sponsorGas: true
}
}),
// other external wallets will not become smart accounts
createWallet("io.metamask"),
createWallet("rainbow.me"),
];

export default function App() {
return (
<ThirdwebProvider>
<ConnectButton
client={client}
wallets={wallets}
/>
</ThirdwebProvider>
);
}
```

</Step>
</Steps>

### Build your own UI
## Usage with your own UI

You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.

See the [Build your own UI](/react/v5/account-abstraction/build-your-own-ui) guide for more information.
```tsx
import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";

function App() {
// 1. set the `accountAbstraction` configuration to convert wallets to smart accounts
const { connect } = useConnect({
client,
accountAbstraction: {
chain: sepolia, // the chain where your smart accounts will be or is deployed
sponsorGas: true, // enable or disable sponsored transactions
},
});

const connectToSmartAccount = async () => {
// 2. connect with the admin wallet of the smart account
connect(async () => {
const wallet = inAppWallet(); // or any other wallet
await wallet.connect({
client,
chain: sepolia,
strategy: "google",
});
return wallet;
});
};

return <button onClick={() => connectToSmartAccount()}>Connect</button>;
}
```

<Callout title="Auto connection of smart accounts" variant="info">
When building your own UI, remember to also pass the `accountAbstraction` prop to `useAutoConnect` to always reconnect to the smart account on page reload.
</Callout>

### Demos
Refer to the [Smart Wallet API reference](/references/typescript/v5/smartWallet) for more advanced configuration of your smart accounts.

Learn by example with these open-source demos:
<Stack>

<OpenSourceCard
title="Account Abstraction Demos"
description="A reference implementation to create and interact with smart accounts."
href={"https://github.com/thirdweb-example/account-abstraction"}
<ArticleIconCard
title="Smart Wallet API reference"
icon={TypeScriptIcon}
href="/references/typescript/v5/smartWallet"
description="More advanced configuration of your smart accounts"
/>

</Stack>
72 changes: 65 additions & 7 deletions apps/portal/src/app/react/v5/account-abstraction/permissions/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { createMetadata } from "@doc";
import { createMetadata, Stack, ArticleIconCard } from "@doc";
import { V4SDKbanner } from "@/components/others/V4SDKBanner";
import { TypeScriptIcon } from "@/icons";

export const metadata = createMetadata({
image: {
title: "Account Permissions & Session Keys",
title: "Permissions & Session Keys",
icon: "thirdweb",
},
title: "Account Permissions & Session Keys | thirdweb",
Expand All @@ -14,11 +15,9 @@ export const metadata = createMetadata({

# Account Permissions & Session Keys

All of the account contracts - [Simple](https://thirdweb.com/thirdweb.eth/AccountFactory) and [Managed](https://thirdweb.com/thirdweb.eth/ManagedAccountFactory) - share the same permission model. In this section, we'll describe this permission model in detail.
A [smart account](/react/v5/account-abstraction/get-started) can have two types of actors: _Session Keys_ and _Admins_.

An account recognizes only two types of actors: _Session Keys_ and _Admins_.

## 1. Admins
## Admins

Admins have **unrestricted access** to the account; call any functions on the contract, use the contract without going through the ERC-4337 infrastructure (bundlers, EntryPoint, etc.), withdraw the account's native token balance, and so on.

Expand Down Expand Up @@ -49,7 +48,33 @@ const onClick = () => {
};
```

## 2. Session Keys
Check out the [API reference](/references/typescript/v5/erc4337/addAdmin) function for more information.

<Stack>

<ArticleIconCard
title="addAdmin"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/addAdmin"
description="Function to add a new admin to the account"
/>

<ArticleIconCard
title="getAllAdmins"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/getAllAdmins"
description="Function to get all admins of the account"
/>

<ArticleIconCard
title="removeAdmin"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/removeAdmin"
description="Function to remove an admin from the account"
/>
</Stack>

## Session Keys

Session Keys are additional authorized signers that must go through ERC-4337 infrastructure (bundlers, EntryPoint, etc.) to use an account to execute transactions. Session keys can use an account under certain restrictions.

Expand Down Expand Up @@ -91,3 +116,36 @@ const onClick = () => {
sendTransaction(transaction);
};
```

Check out the [API reference](/references/typescript/v5/erc4337/addSessionKey) for more information.

<Stack>

<ArticleIconCard
title="addSessionKey"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/addSessionKey"
description="Function to add a new session key to the account"
/>

<ArticleIconCard
title="getAllActiveSigners"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/getAllActiveSigners"
description="Function to get all session keys of the account"
/>

<ArticleIconCard
title="getPermissionsForSigner"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/getPermissionsForSigner"
description="Function to get the permissions assigned to a session key"
/>

<ArticleIconCard
title="removeSessionKey"
icon={TypeScriptIcon}
href="/references/typescript/v5/erc4337/removeSessionKey"
description="Function to remove a session key from the account"
/>
</Stack>
Loading