https://github.com/thirdweb-example/wagmi-thirdweb
thirdweb pay within a wagmi app
https://github.com/thirdweb-example/wagmi-thirdweb
Last synced: 10 months ago
JSON representation
thirdweb pay within a wagmi app
- Host: GitHub
- URL: https://github.com/thirdweb-example/wagmi-thirdweb
- Owner: thirdweb-example
- Created: 2024-05-11T00:43:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-20T20:48:17.000Z (over 1 year ago)
- Last Synced: 2025-03-25T21:15:53.694Z (11 months ago)
- Language: TypeScript
- Size: 134 KB
- Stars: 2
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Use thirdweb in a WAGMI application
This repo demonstrates how to use thirdweb Pay or any other thirdweb features within an existing WAGMI application.
## 1. Get an API key
Get yourself a [thirdweb API key](https://thirdweb.com/dashboard/settings/api-keys) and add it to the top of `page.tsx`. We recommend putting this in a .env file.
## 2. Setup the provider
To use the thirdweb react feature, you need to wrap your application with a `` like shown in `providers.tsx`.
## 3. Convert the wagmi wallet client
Once connected with a wagmi connector, you can get the wallet client and convert it to a thirdweb compatible wallet.
Once you have a thirdweb compatible wallet, you simply set it as 'active' and all the thirdweb components and hooks will then use this active wallet.
```tsx
// This is how to set a wagmi account in the thirdweb context to use with all the thirdweb components including Pay
const { data: walletClient } = useWalletClient(); // from wagmi
const { switchChainAsync } = useSwitchChain(); // from wagmi
const setActiveWallet = useSetActiveWallet(); // from thirdweb
useEffect(() => {
const setActive = async () => {
if (walletClient) {
const adaptedAccount = viemAdapter.walletClient.fromViem({
walletClient: walletClient as any, // accounts for wagmi/viem version mismatches
});
const w = createWalletAdapter({
adaptedAccount,
chain: defineChain(await walletClient.getChainId()),
client,
onDisconnect: async () => {
await disconnectAsync();
},
switchChain: async (chain) => {
await switchChainAsync({ chainId: chain.id as any });
},
});
setActiveWallet(w);
}
};
setActive();
}, [walletClient, disconnectAsync, switchChainAsync, setActiveWallet]);
```
View the full source code in `page.tsx`.
## 4. Use thirdweb normally
You can now use , or any other thirdweb component / hook and it will use the active connected wallet to perform transactions.