Skip to content

Commit 978fb26

Browse files
joaquim-vergesjoaquim-verges
committed
Update page.mdx
1 parent 9285e24 commit 978fb26

File tree

3 files changed

+149
-67
lines changed
  • apps/portal/src/app

3 files changed

+149
-67
lines changed

‎apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ To enable a given sign-in method for the thirdweb wallet, refer to the following
6767

6868
### Ecosystem Wallets
6969

70-
In order to configure sign-in options for all appswithin your ecosystem, first configure the allowed sign-in methods on [your dashboard](https://thirdweb.com/team/~/~/ecosystem).
70+
71+
In order to configure sign-in options for all apps within your ecosystem, first configure the allowed sign-in methods on [your dashboard](https://thirdweb.com/team/~/~/ecosystem).
72+
7173

7274
<DocImage src={EcosystemSocialConfig}/>
7375

‎apps/portal/src/app/react/v5/adapters/page.mdx‎

Lines changed: 80 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,64 @@ Adapters allow you to use contracts, providers and wallets from these libraries
1414

1515
## Wagmi
1616

17+
### Using thirdweb in-app wallets with wagmi
18+
19+
You can use in-app and ecosystem wallets in your wagmi application by using the `@thirdweb-dev/wagmi-adapter` package.
20+
21+
```shell
22+
npm install thirdweb @thirdweb-dev/wagmi-adapter
23+
```
24+
25+
Make sure you're running wagmi 2.14.1 or above.
26+
27+
You probably already have a wagmi config with some connectors, simply add the inAppWalletConnector to the list, along with the desired options.
28+
29+
```ts
30+
import { http, createConfig } from "wagmi";
31+
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
32+
import { createThirdwebClient, defineChain as thirdwebChain } from "thirdweb";
33+
34+
const client = createThirdwebClient({
35+
clientId: "your-client-id",
36+
});
37+
38+
export const config = createConfig({
39+
chains: [sepolia],
40+
connectors: [
41+
// add the in-app wallet connector
42+
inAppWalletConnector({
43+
client,
44+
// optional: turn on smart accounts!
45+
smartAccounts: {
46+
sponsorGas: true,
47+
chain: thirdwebChain(sepolia),
48+
},
49+
}),
50+
],
51+
transports: {
52+
[sepolia.id]: http(),
53+
},
54+
});
55+
```
56+
57+
Then in your application, you can use the connector to trigger the in-app wallet connection.
58+
59+
```ts
60+
const { connect, connectors } = useConnect();
61+
62+
const onClick = () => {
63+
// grab the connector
64+
const inAppWallet = connectors.find((x) => x.id === "in-app-wallet");
65+
// call connect with the desired strategy
66+
connect({
67+
connector: inAppWallet,
68+
strategy: "google",
69+
});
70+
};
71+
```
72+
73+
### Converting a wagmi wallet client to a thirdweb wallet
74+
1775
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 `PayEmbed`, `TransactionButton`, etc.
1876

1977
```ts
@@ -28,37 +86,28 @@ import { viemAdapter } from "thirdweb/adapters/viem";
2886
import { client } from './client'
2987

3088

31-
const { data: walletClient } = useWalletClient(); // from wagmi
32-
const { disconnectAsync } = useDisconnect(); // from wagmi
33-
const { switchChainAsync } = useSwitchChain(); // from wagmi
89+
const account = useAccount(); // from wagmi
3490
const setActiveWallet = useSetActiveWallet(); // from thirdweb/react
3591

36-
// whenever the walletClient changes,
37-
// we adapt it to a thirdweb account and set it as the active wallet
38-
useEffect(() => {
92+
// whenever the wagmi account changes,
93+
// we adapt it to a thirdweb wallet and set it as the active wallet
94+
useEffect(() => {
3995
const setActive = async () => {
40-
if (walletClient) {
41-
// adapt the walletClient to a thirdweb account
42-
const adaptedAccount = viemAdapter.walletClient.fromViem({
43-
walletClient: walletClient as any, // accounts for wagmi/viem version mismatches
44-
});
45-
// create the thirdweb wallet with the adapted account
46-
const thirdwebWallet = createWalletAdapter({
47-
client,
48-
adaptedAccount,
49-
chain: defineChain(await walletClient.getChainId()),
50-
onDisconnect: async () => {
51-
await disconnectAsync();
52-
},
53-
switchChain: async (chain) => {
54-
await switchChainAsync({ chainId: chain.id as any });
55-
},
56-
});
57-
setActiveWallet(thirdwebWallet);
58-
}
96+
if (account?.connector?.getProvider) {
97+
const provider = await account?.connector?.getProvider({
98+
chainId,
99+
});
100+
const thirdwebWallet = EIP1193.fromProvider({
101+
provider,
102+
});
103+
await thirdwebWallet.connect({
104+
client,
105+
});
106+
setActiveWallet(thirdwebWallet);
107+
}
59108
};
60109
setActive();
61-
}, [walletClient]);
110+
}, [account?.connector?.getProvider, setActiveWallet]);
62111
```
63112

64113
You can view a fully functioning wagmi + thirdweb app in this [github repository](https://github.com/thirdweb-example/wagmi-thirdweb).
@@ -89,22 +138,12 @@ useEffect(() => {
89138
const privyWallet = wallets[0];
90139
if (privyWallet) {
91140
const ethersProvider = await privyWallet.getEthersProvider();
92-
// adapt privy wallet to a thirdweb account
93-
const adaptedAccount = await ethers5Adapter.signer.fromEthers({
94-
signer: ethersProvider.getSigner(),
141+
// create a thirdweb wallet with the privy provider
142+
const thirdwebWallet = EIP1193.fromProvider({
143+
provider: ethersProvider,
95144
});
96-
// create the thirdweb wallet with the adapted account
97-
const thirdwebWallet = createWalletAdapter({
98-
client,
99-
adaptedAccount,
100-
// chainId is in the format of "eip155:1"
101-
chain: defineChain(Number(privyWallet.chainId.split(":")[1])),
102-
onDisconnect: async () => {
103-
privyWallet.disconnect();
104-
},
105-
switchChain: async (chain) => {
106-
await privyWallet.switchChain(chain.id);
107-
},
145+
await thirdwebWallet.connect({
146+
client,
108147
});
109148
setActiveWallet(thirdwebWallet);
110149
}

‎apps/portal/src/app/typescript/v5/adapters/page.mdx‎

Lines changed: 66 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,79 @@
22

33
The thirdweb SDK can work side by side with:
44

5+
- any wallet that supports EIP1193
56
- ethers.js v5
67
- ethers.js v6
78
- viem
89
- older versions of the @thirdweb-dev/sdk (using the ethers.js v5 adapter)
910

1011
Adapters allow you to use contracts, providers and wallets from these libraries with the thirdweb SDK and vice versa.
1112

13+
## EIP1193
14+
15+
You can use any wallet that supports EIP1193 with the thirdweb SDK by converting it using `EIP1193.fromProvider`:
16+
17+
```ts
18+
import { EIP1193 } from "thirdweb/wallets";
19+
20+
// Create a Thirdweb wallet from a EIP1193 provider
21+
const wallet = EIP1193.fromProvider({
22+
provider: yourProvider, // any EIP1193 provider
23+
});
24+
25+
// Use like any other Thirdweb wallet
26+
const account = await wallet.connect({
27+
client: createThirdwebClient({ clientId: "..." }),
28+
});
29+
30+
// Sign messages
31+
await account.signMessage({ message: "Hello World" });
32+
```
33+
34+
You can also convert a thirdweb account to an EIP1193 provider using `EIP1193.toProvider`, which can then be used with other libraries:
35+
36+
```ts
37+
import { EIP1193 } from "thirdweb/wallets";
38+
39+
// Create an EIP-1193 provider from a Thirdweb wallet
40+
const provider = EIP1193.toProvider({
41+
wallet,
42+
chain: ethereum,
43+
client: createThirdwebClient({ clientId: "..." }),
44+
});
45+
46+
// Use with any EIP-1193 compatible library
47+
const accounts = await provider.request({
48+
method: "eth_requestAccounts",
49+
});
50+
```
51+
52+
## viem
53+
54+
You can use an existing wallet client from viem with the thirdweb SDK by converting it using the `viemAdapter`:
55+
56+
```ts
57+
import { viemAdapter } from "thirdweb/adapters/viem";
58+
59+
// convert a viem wallet client to a thirdweb account
60+
const walletClient = createWalletClient(...);
61+
const account = await viemAdapter.walletClient.fromViem({
62+
walletClient,
63+
});
64+
65+
66+
// convert a thirdweb account to viem wallet client
67+
const viemClientWallet = viemAdapter.walletClient.toViem({
68+
client,
69+
chain,
70+
account,
71+
});
72+
```
73+
74+
You can also convert viem public clients and contracts from and to the thirdweb SDK.
75+
76+
View the [viemAdapter](/references/typescript/v5/viemAdapter) reference for more details.
77+
1278
## Ethers v6
1379

1480
You can use an existing ethers.js v6 Signer with the thirdweb SDK by converting it using the `ethers6Adapter`:
@@ -82,28 +148,3 @@ You can also convert ethers.js providers and contracts from and to the thirdweb
82148

83149
View the [ethers5Adapter](/references/typescript/v5/ethers5Adapter) reference for more details.
84150

85-
## viem
86-
87-
You can use an existing wallet client from viem with the thirdweb SDK by converting it using the `viemAdapter`:
88-
89-
```ts
90-
import { viemAdapter } from "thirdweb/adapters/viem";
91-
92-
// convert a viem wallet client to a thirdweb account
93-
const walletClient = createWalletClient(...);
94-
const account = await viemAdapter.walletClient.fromViem({
95-
walletClient,
96-
});
97-
98-
99-
// convert a thirdweb account to viem wallet client
100-
const viemClientWallet = viemAdapter.walletClient.toViem({
101-
client,
102-
chain,
103-
account,
104-
});
105-
```
106-
107-
You can also convert viem public clients and contracts from and to the thirdweb SDK.
108-
109-
View the [viemAdapter](/references/typescript/v5/viemAdapter) reference for more details.

0 commit comments

Comments
 (0)