Skip to main content

​
Thirdweb Wallet

Thirdweb Wallet is a comprehensive wallet solution for React, enabling seamless wallet connection and transaction signing.

Sophon Account + Thirdweb Wallet example repository

Thirdweb Wallet Example

​
Installation

npm install @sophon-labs/account-eip6963 wagmi viem thirdweb @thirdweb-dev/wagmi-adapter @tanstack/react-query

​
Live demo

​
Sample configuration

"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>
  );
}
⌘I