This repo demonstrates how to use thirdweb Pay or any other thirdweb features within an existing WAGMI application.
Get yourself a thirdweb API key and add it to the top of page.tsx. We recommend putting this in a .env file.
To use the thirdweb react feature, you need to wrap your application with a <ThirdwebProvider> like shown in providers.tsx.
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.
// 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.
You can now use , or any other thirdweb component / hook and it will use the active connected wallet to perform transactions.
