Skip to content

Commit 9627d76

Browse files
[Docs] Add guide for using ConnectButton with wagmi application
1 parent 6a7b556 commit 9627d76

File tree

1 file changed

+35
-1
lines changed
  • apps/portal/src/app/wallets/adapters

1 file changed

+35
-1
lines changed

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,43 @@ const onClick = () => {
7979
};
8080
```
8181

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+
} satisfies ConnectionOptions; // 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+
82116
### Converting a wagmi wallet client to a thirdweb wallet
83117

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.
85119

86120
```ts
87121
// Assumes you've wrapped your application in a `<ThirdwebProvider>`

0 commit comments

Comments
 (0)