You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/portal/src/app/wallets/adapters/page.mdx
+35-1Lines changed: 35 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -79,9 +79,43 @@ const onClick = () => {
79
79
};
80
80
```
81
81
82
+
### Using the ConnectButton or ConnectEmbed with a wagmi application
83
+
84
+
You can use the thirdweb react connection components and hooks like ConnectButton, ConnectEmbed, useConnectModal, etc, but still keep using wagmi for the rest of the application.
85
+
86
+
To do so, you will need to connect the `inAppWalletConnector` connector from the `@thirdweb-dev/wagmi-adapter` package with the connected thirdweb wallet.
87
+
88
+
You can do this at any time after connecting the thirdweb wallet, a convenient place to do this is in the `onConnect` callback of the ConnectButton or ConnectEmbed.
89
+
90
+
```tsx
91
+
const { connectors, connect } =useConnect(); // from wagmi
92
+
93
+
<ConnectButton
94
+
client={client}
95
+
onConnect={(wallet) => {
96
+
// connect the wagmi connector with the connected thirdweb wallet
97
+
const twConnector =connectors.find(
98
+
(c) =>c.id==="in-app-wallet",
99
+
);
100
+
if (twConnector) {
101
+
const options = {
102
+
wallet, // pass the connected wallet
103
+
} satisfiesConnectionOptions; // for type safety
104
+
connect({
105
+
connector: twConnector,
106
+
chainId: chain.id,
107
+
...options,
108
+
});
109
+
}
110
+
}}
111
+
/>
112
+
```
113
+
114
+
Make sure your app is wrapped in a `<ThirdwebProvider>` as well as a `<WagmiProvider>` since both contexts will be used here. From there, the wallet state will be in sync between the 2 libraries.
115
+
82
116
### Converting a wagmi wallet client to a thirdweb wallet
83
117
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.
118
+
You can also 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
119
86
120
```ts
87
121
// Assumes you've wrapped your application in a `<ThirdwebProvider>`
0 commit comments