Skip to content

Commit 59616d0

Browse files
joaquim-vergesjoaquim-verges
authored
[Portal] Add documentation for third-party library adapters (#8074)
1 parent 32980f8 commit 59616d0

File tree

2 files changed

+305
-0
lines changed

2 files changed

+305
-0
lines changed

‎apps/portal/src/app/wallets/adapters/page.mdx‎

Lines changed: 301 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,301 @@
1+
import { Stack, InstallTabs, Callout, Steps, Step, GithubTemplateCard } from "@doc";
2+
3+
# Third party library adapters
4+
5+
The thirdweb SDK can work side by side with:
6+
7+
- any library that supports EIP1193 (wagmi, privy, etc.)
8+
- ethers.js v5 & v6
9+
- viem
10+
- older versions of the @thirdweb-dev/sdk (using the ethers.js v5 adapter)
11+
12+
Adapters allow you to use contracts, providers and wallets from these libraries with the thirdweb SDK and vice versa.
13+
14+
## Wagmi
15+
16+
### Using thirdweb in-app wallets with wagmi
17+
18+
View the demo repo for using thirdweb in-app / smart wallets with wagmi:
19+
20+
<Stack>
21+
<GithubTemplateCard
22+
title="wagmi + thirdweb demo repo"
23+
description="A demo repo for using thirdweb in-app / smart wallets with wagmi"
24+
href="https://github.com/thirdweb-example/wagmi-inapp-smart-wallets"
25+
/>
26+
</Stack>
27+
28+
You can use thirdweb's in-app, ecosystem and smart wallets in your wagmi application by using the `@thirdweb-dev/wagmi-adapter` package.
29+
30+
```shell
31+
npm install wagmi thirdweb @thirdweb-dev/wagmi-adapter
32+
```
33+
34+
Make sure you're running wagmi 2.14.1 or above.
35+
36+
You probably already have a wagmi config with some connectors, simply add the inAppWalletConnector to the list, along with the desired options.
37+
38+
```ts
39+
import { http, createConfig } from "wagmi";
40+
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
41+
import { createThirdwebClient } from "thirdweb";
42+
43+
const client = createThirdwebClient({
44+
clientId: "your-client-id",
45+
});
46+
47+
export const config = createConfig({
48+
chains: [sepolia],
49+
connectors: [
50+
// add the in-app wallet connector
51+
inAppWalletConnector({
52+
client,
53+
// optional: turn on gasless transactions!
54+
executionMode: {
55+
mode: "EIP7702",
56+
sponsorGas: true,
57+
},
58+
}),
59+
],
60+
transports: {
61+
[sepolia.id]: http(),
62+
},
63+
});
64+
```
65+
66+
Then in your application, you can use the connector to trigger the in-app wallet connection.
67+
68+
```ts
69+
const { connect, connectors } = useConnect();
70+
71+
const onClick = () => {
72+
// grab the connector
73+
const inAppWallet = connectors.find((x) => x.id === "in-app-wallet");
74+
// call connect with the desired strategy
75+
connect({
76+
connector: inAppWallet,
77+
strategy: "google",
78+
});
79+
};
80+
```
81+
82+
### Converting a wagmi wallet client to a thirdweb wallet
83+
84+
You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
85+
86+
```ts
87+
// Assumes you've wrapped your application in a `<ThirdwebProvider>`
88+
89+
import { useEffect } from 'react'
90+
import { defineChain } from 'thirdweb'
91+
import { useSetActiveWallet } from 'thirdweb/react'
92+
import { EIP1193 } from 'thirdweb/wallets'
93+
import { useDisconnect, useSwitchChain, useWalletClient } from 'wagmi'
94+
import { client } from './client'
95+
96+
97+
const account = useAccount(); // from wagmi
98+
const setActiveWallet = useSetActiveWallet(); // from thirdweb/react
99+
100+
// whenever the wagmi account changes,
101+
// we adapt it to a thirdweb wallet and set it as the active wallet
102+
useEffect(() => {
103+
const setActive = async () => {
104+
if (account?.connector?.getProvider) {
105+
const provider = await account?.connector?.getProvider({
106+
chainId,
107+
});
108+
const thirdwebWallet = EIP1193.fromProvider({
109+
provider,
110+
});
111+
await thirdwebWallet.connect({
112+
client,
113+
});
114+
setActiveWallet(thirdwebWallet);
115+
}
116+
};
117+
setActive();
118+
}, [account?.connector?.getProvider, setActiveWallet]);
119+
```
120+
121+
You can view a fully functioning wagmi + thirdweb app in this [github repository](https://github.com/thirdweb-example/wagmi-thirdweb).
122+
123+
## Privy
124+
125+
Similarly, you can use the thirdweb SDK with privy by setting the privy wallet as the thirdweb 'active wallet'. After that, you can use all of the react components, functions and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
126+
127+
```ts
128+
// Assumes you've wrapped your application in a `<ThirdwebProvider>`
129+
130+
import { useEffect } from 'react'
131+
import { defineChain } from 'thirdweb'
132+
import { useSetActiveWallet } from 'thirdweb/react'
133+
import { EIP1193 } from 'thirdweb/wallets'
134+
import { ethers5Adapter } from 'thirdweb/adapters/ethers5';
135+
import { client } from './client'
136+
import { useWallets } from "@privy-io/react-auth";
137+
138+
139+
const { wallets } = useWallets(); // from privy
140+
const setActiveWallet = useSetActiveWallet(); // from thirdweb/react
141+
142+
// whenever the privy wallet changes,
143+
// we adapt it to a thirdweb account and set it as the active wallet
144+
useEffect(() => {
145+
const setActive = async () => {
146+
const privyWallet = wallets[0];
147+
if (privyWallet) {
148+
const ethersProvider = await privyWallet.getEthereumProvider();
149+
// create a thirdweb wallet with the privy provider
150+
const thirdwebWallet = EIP1193.fromProvider({
151+
provider: ethersProvider,
152+
});
153+
await thirdwebWallet.connect({
154+
client,
155+
});
156+
setActiveWallet(thirdwebWallet);
157+
}
158+
};
159+
setActive();
160+
}, [wallets]);
161+
```
162+
163+
164+
## EIP1193
165+
166+
You can use any wallet that supports EIP1193 with the thirdweb SDK by converting it using `EIP1193.fromProvider`:
167+
168+
```ts
169+
import { EIP1193 } from "thirdweb/wallets";
170+
171+
// Create a Thirdweb wallet from a EIP1193 provider
172+
const wallet = EIP1193.fromProvider({
173+
provider: yourProvider, // any EIP1193 provider
174+
});
175+
176+
// Use like any other Thirdweb wallet
177+
const account = await wallet.connect({
178+
client: createThirdwebClient({ clientId: "..." }),
179+
});
180+
181+
// Sign messages
182+
await account.signMessage({ message: "Hello World" });
183+
```
184+
185+
You can also convert a thirdweb account to an EIP1193 provider using `EIP1193.toProvider`, which can then be used with other libraries:
186+
187+
```ts
188+
import { EIP1193 } from "thirdweb/wallets";
189+
190+
// Create an EIP-1193 provider from a Thirdweb wallet
191+
const provider = EIP1193.toProvider({
192+
wallet,
193+
chain: ethereum,
194+
client: createThirdwebClient({ clientId: "..." }),
195+
});
196+
197+
// Use with any EIP-1193 compatible library
198+
const accounts = await provider.request({
199+
method: "eth_requestAccounts",
200+
});
201+
```
202+
203+
## viem
204+
205+
You can use an existing wallet client from viem with the thirdweb SDK by converting it using the `viemAdapter`:
206+
207+
```ts
208+
import { viemAdapter } from "thirdweb/adapters/viem";
209+
210+
// convert a viem wallet client to a thirdweb wallet
211+
const walletClient = createWalletClient(...);
212+
const thirdwebWallet = await viemAdapter.wallet.fromViem({
213+
walletClient,
214+
});
215+
216+
217+
// convert a thirdweb account to viem wallet client
218+
const viemClientWallet = viemAdapter.wallet.toViem({
219+
client,
220+
chain,
221+
wallet,
222+
});
223+
```
224+
225+
You can also convert viem public clients and contracts from and to the thirdweb SDK.
226+
227+
View the [viemAdapter](/references/typescript/v5/viemAdapter) reference for more details.
228+
229+
## Ethers v6
230+
231+
You can use an existing ethers.js v6 Signer with the thirdweb SDK by converting it using the `ethers6Adapter`:
232+
233+
```ts
234+
import { ethers6Adapter } from "thirdweb/adapters/ethers6";
235+
import { sendTransaction } from "thirdweb";
236+
237+
// convert a ethers signer
238+
const signer: ethers.Signer = ...;
239+
const account = await ethers6Adapter.signer.fromEthers({
240+
signer,
241+
});
242+
243+
// use it with the thirdweb SDK
244+
await sendTransaction({
245+
transaction,
246+
account,
247+
});
248+
```
249+
250+
Similarly, you can use any wallets created with the thirdweb SDK with ethers.js v6 by converting them using the `ethers6Adapter`:
251+
252+
```ts
253+
import { ethers6Adapter } from "thirdweb/adapters/ethers6";
254+
import { createThirdwebClient, inAppWallet } from "thirdweb/wallets";
255+
import { sepolia } from "thirdweb/chains";
256+
257+
const client = createThirdwebClient({ clientId });
258+
const wallet = inAppWallet();
259+
const chain = sepolia;
260+
const account = await wallet.connect({
261+
client,
262+
strategy: "google",
263+
});
264+
265+
// convert a thirdweb account to ethers signer
266+
const ethersSigner = await ethers6Adapter.signer.toEthers({
267+
client,
268+
chain,
269+
account,
270+
});
271+
```
272+
273+
You can also convert ethers.js providers and contracts from and to the thirdweb SDK.
274+
275+
View the [ethers6Adapter](/references/typescript/v5/ethers6Adapter) reference for more details.
276+
277+
## Ethers v5
278+
279+
You can use an existing ethers.js v5 Signer with the thirdweb SDK by converting it using the `ethers5Adapter`:
280+
281+
```ts
282+
import { ethers5Adapter } from "thirdweb/adapters/ethers5";
283+
284+
// convert an ethers signer to a thirdweb account
285+
const signer: ethers.Signer = ...;
286+
const account = await ethers5Adapter.signer.fromEthers({
287+
signer,
288+
});
289+
290+
// convert a thirdweb account to ethers signer
291+
const ethersSigner = await ethers5Adapter.signer.toEthers({
292+
client,
293+
chain,
294+
account
295+
});
296+
```
297+
298+
You can also convert ethers.js providers and contracts from and to the thirdweb SDK.
299+
300+
View the [ethers5Adapter](/references/typescript/v5/ethers5Adapter) reference for more details.
301+

‎apps/portal/src/app/wallets/sidebar.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ export const sidebar: SideBar = {
6565
href: `${walletSlug}/export-private-key`,
6666
name: "Export Private Keys",
6767
},
68+
{
69+
href: `${walletSlug}/adapters`,
70+
name: "Usage with other libraries",
71+
},
6872
],
6973
name: "Guides",
7074
},

0 commit comments

Comments
 (0)