Skip to content

Commit 5c6b6b7

Browse files
joaquim-vergesjoaquim-verges
committed
[Connect] Redesign sidebar and update wallet documentation
1 parent 8b6a953 commit 5c6b6b7

File tree

7 files changed

+874
-459
lines changed

7 files changed

+874
-459
lines changed

‎apps/portal/src/app/connect/account-abstraction/get-started/page.mdx‎

Lines changed: 41 additions & 322 deletions
Original file line numberDiff line numberDiff line change
@@ -9,337 +9,56 @@ import {
99
} from "@doc";
1010
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
1111
import { WalletsSmartIcon } from "@/icons";
12+
import { TypeScriptIcon, DotNetIcon } from "@/icons";
1213

1314
export const metadata = createMetadata({
1415
image: {
15-
title: "Get started with Account Abstraction",
16+
title: "Sponsor gas",
1617
icon: "wallets",
1718
},
18-
title: "Getting Started with Account Abstraction | thirdweb",
19+
title: "Sponsor Gas | thirdweb",
1920
description:
20-
"Getting started to add ERC-4337 Account Abstraction support to your application easily.",
21+
"Sponsor Gas for all users of your application.",
2122
});
2223

23-
# Getting Started
24-
25-
Getting started to add ERC-4337 compatible smart accounts to your application easily.
26-
27-
Once set, your application will:
28-
29-
- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding.
30-
- Automatically **deploy individual account contracts** for your users when they do their first onchain transaction.
31-
- **Handle all transaction gas costs** via the thirdweb paymaster.
32-
33-
<Steps>
34-
<Step title="Get a free API key">
35-
36-
You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
37-
38-
Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
39-
40-
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).
41-
42-
Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
43-
44-
</Step>
45-
<Step title="Connect smart accounts in your application">
46-
47-
Use the following code to integrate account abstraction into your apps.
48-
49-
<Callout title="Sponsored transactions" variant="info">
50-
51-
To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
52-
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.
53-
54-
</Callout>
55-
56-
<Tabs defaultValue="ui">
57-
58-
<TabsList>
59-
<TabsTrigger value="ui">UI Component</TabsTrigger>
60-
<TabsTrigger value="react">React Hook</TabsTrigger>
61-
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
62-
<TabsTrigger value="unity">Unity</TabsTrigger>
63-
</TabsList>
64-
65-
<TabsContent value="ui">
66-
```tsx
67-
import { createThirdwebClient } from "thirdweb";
68-
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
69-
70-
const client = createThirdwebClient({
71-
clientId: "YOUR_CLIENT_ID",
72-
});
73-
74-
export default function App() {
75-
return (
76-
<ThirdwebProvider>
77-
<ConnectButton
78-
client={client}
79-
accountAbstraction={{
80-
chain: sepolia, // the chain where your smart accounts will be or is deployed
81-
sponsorGas: true // enable or disable sponsored transactions
82-
}}
83-
/>
84-
</ThirdwebProvider>
85-
);
86-
}
87-
```
88-
</TabsContent>
89-
90-
<TabsContent value="react">
91-
92-
```tsx
93-
import { useConnect } from "thirdweb/react";
94-
import { inAppWallet } from "thirdweb/wallets";
95-
import { sepolia } from "thirdweb/chains";
96-
97-
function App() {
98-
// 1. set the `accountAbstraction` configuration
99-
const { connect } = useConnect({
100-
client,
101-
accountAbstraction: {
102-
chain: sepolia, // the chain where your smart accounts will be or is deployed
103-
sponsorGas: true, // enable or disable sponsored transactions
104-
},
105-
});
106-
107-
const connectToSmartAccount = async () => {
108-
// 2. connect with the admin wallet of the smart account
109-
connect(async () => {
110-
const wallet = inAppWallet(); // or any other wallet
111-
await wallet.connect({
112-
client,
113-
chain: sepolia,
114-
strategy: "google",
115-
});
116-
return wallet;
24+
# Sponsor gas
25+
26+
Sponsor gas fees for your users' in-app wallets using [EIP-7702](https://eips.ethereum.org/EIPS/eip-7702), enabling gasless transactions and improving user experience.
27+
28+
<Tabs defaultValue="typescript">
29+
<TabsList>
30+
<TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
31+
<TypeScriptIcon className="size-4" />
32+
TypeScript / React
33+
</TabsTrigger>
34+
<TabsTrigger value="dotnet" className="flex items-center gap-2 [&>p]:mb-0">
35+
<DotNetIcon className="size-4" />
36+
.NET / Unity
37+
</TabsTrigger>
38+
</TabsList>
39+
40+
<TabsContent value="typescript">
41+
```typescript
42+
const wallet = inAppWallet({
43+
// enable gasless transactions for the wallet
44+
executionMode: {
45+
mode: "EIP7702",
46+
sponsorGas: true,
47+
},
11748
});
118-
};
119-
120-
return <button onClick={() => connectToSmartAccount()}>Connect</button>;
121-
}
122-
```
123-
124-
</TabsContent>
125-
126-
<TabsContent value="typescript">
127-
128-
```ts
129-
import { createThirdwebClient } from "thirdweb";
130-
import { inAppWallet, smartWallet } from "thirdweb/wallets";
131-
import { sepolia } from "thirdweb/chains";
132-
133-
const client = createThirdwebClient({
134-
clientId,
135-
});
136-
137-
// First, create and connect the personal wallet, which can be any wallet (in-app, metamask, etc.)
138-
const personalWallet = inAppWallet();
139-
const personalAccount = await personalWallet.connect({
140-
client,
141-
strategy: "google",
142-
});
143-
// Then, create and connect the Smart wallet
144-
const wallet = smartWallet({
145-
client,
146-
chain: sepolia, // the chain where your smart wallet will be or is deployed
147-
sponsorGas: true, // enable or disable sponsored transactions
148-
});
149-
const smartAccount = await wallet.connect({
150-
client,
151-
personalAccount,
152-
});
153-
```
154-
155-
</TabsContent>
156-
157-
<TabsContent value="unity">
158-
159-
```csharp
160-
using Thirdweb;
161-
162-
public async void ConnectWallet()
163-
{
164-
// Reference to your Thirdweb SDK
165-
var sdk = ThirdwebManager.Instance.SDK;
166-
// Configure the connection
167-
var connection = new WalletConnection(
168-
provider: WalletProvider.SmartWallet, // The wallet provider you want to connect to (Required)
169-
chainId: 1, // The chain you want to connect to (Required)
170-
password: "myEpicPassword", // If using a local wallet as a personal wallet (Optional)
171-
email: "[email protected]", // If using an email wallet as a personal wallet (Optional)
172-
personalWallet: WalletProvider.LocalWallet // The personal wallet you want to use with your Smart Wallet (Optional)
173-
);
174-
// Connect the wallet
175-
string address = await sdk.wallet.Connect(connection);
176-
}
177-
178-
```
179-
180-
</TabsContent>
49+
```
50+
</TabsContent>
51+
52+
<TabsContent value="dotnet">
53+
```csharp
54+
var smartEoa = await InAppWallet.Create(
55+
client: thirdwebClient,
56+
authProvider: AuthProvider.Google, // or other auth providers
57+
executionMode: ExecutionMode.EIP7702Sponsored // enable gas sponsorship
58+
);
59+
```
60+
</TabsContent>
18161
</Tabs>
18262

183-
</Step>
184-
<Step title="Executing Transactions with Smart Accounts">
185-
186-
Once setup, you can use the Connect [TypeScript](/typescript/v5), [React](/react/v5) and [Unity SDKs](/unity) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
187-
188-
<Tabs defaultValue="react">
189-
190-
<TabsList>
191-
<TabsTrigger value="ui">UI Component</TabsTrigger>
192-
<TabsTrigger value="react">React Hook</TabsTrigger>
193-
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
194-
<TabsTrigger value="unity">Unity</TabsTrigger>
195-
</TabsList>
196-
197-
<TabsContent value="ui">
198-
199-
```tsx
200-
import { getContract } from "thirdweb";
201-
import { useActiveAccount, TransactionButton } from "thirdweb/react";
202-
import { mintTo } from "thirdweb/extensions/erc721";
203-
204-
const contract = getContract({ client, chain, address: "0x..." });
205-
206-
// The ThirdwebProvider setup above already handles the connection to the smart account
207-
// Within the provider, you can use the SDK normally to interact with the blockchain
208-
export default function MyComponent() {
209-
// Get the connected smart account
210-
const smartAccount = useActiveAccount();
211-
// Mint a new NFT
212-
return (
213-
<TransactionButton
214-
transaction={() => {
215-
if (!account) return;
216-
return mintTo({
217-
contract,
218-
to: account.address,
219-
nft: {
220-
name: "My NFT",
221-
description: "My NFT description",
222-
image: "https://example.com/image.png",
223-
},
224-
});
225-
}}
226-
>
227-
Mint NFT
228-
</TransactionButton>
229-
);
230-
}
231-
```
232-
233-
</TabsContent>
234-
235-
<TabsContent value="react">
236-
237-
```tsx
238-
import { getContract } from "thirdweb";
239-
import { useActiveAccount, useSendTransaction } from "thirdweb/react";
240-
import { mintTo, balanceOf } from "thirdweb/extensions/erc721";
241-
242-
const contract = getContract({ client, chain, address: "0x..." });
243-
244-
// The ThirdwebProvider setup above already handles the connection to the smart account
245-
// Within the provider, you can use the SDK normally to interact with the blockchain
246-
export default function MyComponent() {
247-
// Get the connected smart account
248-
const smartAccount = useActiveAccount();
249-
// Example read
250-
const { data, isLoading } = useReadContract(
251-
balanceOf,
252-
{
253-
contract,
254-
owner: smartAccount.address!,
255-
},
256-
{
257-
enabled: !!smartAccount,
258-
},
259-
);
260-
// Example write
261-
const { mutate: sendTransaction, isPending } = useSendTransaction();
262-
const mint = () => {
263-
sendTransaction({
264-
transaction: mintTo({
265-
contract,
266-
to: smartAccount.address,
267-
nft: {
268-
name: "My NFT",
269-
description: "My NFT description",
270-
image: "https://example.com/image.png",
271-
},
272-
}),
273-
});
274-
};
275-
// Mint a new NFT
276-
return <button onClick={mint}>Mint NFT</button>;
277-
}
278-
```
279-
280-
</TabsContent>
281-
282-
<TabsContent value="typescript">
283-
284-
```ts
285-
import { getContract, prepareContractCall } from "thirdweb";
286-
import { mintTo } from "thirdweb/extensions/erc721";
287-
288-
// Once you have a smartAccount connected, you can interact with the blockchain as you would with a regular EOA
289-
const smartWalletAddress = smartAccount.address;
290-
// gas-free wallet actions
291-
const transaction = await mintTo({
292-
contract,
293-
to: smartWalletAddress,
294-
nft: {
295-
name: "My NFT",
296-
description: "My NFT description",
297-
image: "https://example.com/image.png",
298-
},
299-
});
300-
const { transactionHash } = await sendTransaction({
301-
transaction,
302-
smartAccount,
303-
});
304-
console.log(`Minted NFT with transaction hash: ${transactionHash}`);
305-
```
306-
307-
</TabsContent>
308-
309-
<TabsContent value="unity">
310-
311-
```cs
312-
using Thirdweb;
313-
public async void MintNFT()
314-
{
315-
// The ThirdwebManger prefab holds the smart wallet connection state
316-
var sdk = ThirdwebManager.Instance.SDK;
317-
// Get the connected smart wallet address
318-
var smartWalletAddress = await sdk.Wallet.GetAddress();
319-
// Interact with contracts
320-
Contract contract = sdk.GetContract("0x...");
321-
await contract.ERC721.Mint(new NFTMetadata()
322-
{
323-
name = "My NFT",
324-
description = "My NFT description",
325-
image = "https://example.com/image.png",
326-
}
327-
);
328-
}
329-
```
330-
331-
</TabsContent>
332-
</Tabs>
333-
334-
</Step>
335-
</Steps>
336-
337-
### Demos
338-
339-
Learn by example with these open-source demos:
63+
That's it! All transactions executed by the user will be sponsored via the thirdweb infrastructure.
34064

341-
<OpenSourceCard
342-
title="Account Abstraction Demos"
343-
description="A reference implementation to create and interact with smart accounts."
344-
href={"https://github.com/thirdweb-example/account-abstraction"}
345-
/>

‎apps/portal/src/app/connect/assets/test.jpg‎

-867 KB
Binary file not shown.

0 commit comments

Comments
 (0)