Thirdweb Wallet
Thirdweb Wallet is a comprehensive wallet solution for React, enabling seamless wallet connection and transaction signing.Installation
Copy
Ask AI
npm install @sophon-labs/account-eip6963 wagmi viem thirdweb @thirdweb-dev/wagmi-adapter @tanstack/react-query
Live demo
Sample configuration
Copy
Ask AI
"use client";
import React, { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { State, WagmiProvider } from "wagmi";
import { ThirdwebProvider } from "thirdweb/react";
import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
import { createThirdwebClient, defineChain } from "thirdweb";
import { http } from "viem";
import { sophonTestnet } from "viem/chains";
import { createConfig, injected } from "wagmi";
import "@sophon-labs/account-eip6963/testnet";
// Get your project ID from https://thirdweb.com
export const projectId = process.env.NEXT_PUBLIC_THIRDWEB_PROJECT_ID;
if (!projectId) throw new Error("Project ID is not defined");
export const client = createThirdwebClient({
clientId: projectId,
});
export const config = createConfig({
chains: [sophonTestnet],
multiInjectedProviderDiscovery: false,
ssr: true,
transports: {
[sophonTestnet.id]: http(),
},
connectors: [injected()],
});
declare module "wagmi" {
interface Register {
config: typeof config;
}
}
const queryClient = new QueryClient();
export default function Web3ModalProvider({
children,
initialState,
}: {
children: ReactNode;
initialState?: State;
}) {
return (
<ThirdwebProvider>
<WagmiProvider config={config} initialState={initialState}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
</ThirdwebProvider>
);
}