React setup & wallet adapters

npm install @inco/ctoken viem @inco/lightning-js react react-dom wagmi @tanstack/react-query
# Add motion when using @inco/ctoken/ui:
npm install motion

"use client";
import { useState, type ReactNode } from "react";
import { WagmiProvider, createConfig, usePublicClient, http } from "wagmi";
import { injected } from "wagmi/connectors";
import { baseSepolia } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { CTokenProvider } from "@inco/ctoken/react";
import { ConfidentialWallet } from "@inco/ctoken/ui";
import "@inco/ctoken/ui/styles.css";

const config = createConfig({
  chains: [baseSepolia],
  connectors: [injected()],
  transports: { [baseSepolia.id]: http("https://your-app.example/api/rpc") },
  ssr: true,
});

export function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <TokenProvider>{children}</TokenProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

// Replace the URL above with your paid read endpoint or application proxy.
function TokenProvider({ children }: { children: ReactNode }) {
  const publicClient = usePublicClient({ chainId: baseSepolia.id });
  if (!publicClient) throw new Error("Configure your read client.");
  return <CTokenProvider network="baseSepolia" publicClient={publicClient}>
    {children}
  </CTokenProvider>;
}

export function TokenWallet() {
  return <ConfidentialWallet triggerLabel="Open wallet" />;
}

import { useAccount, useConnect } from "wagmi";

export function ConnectWallet() {
  const { address } = useAccount();
  const { connect, connectors, isPending } = useConnect();
  if (address) return <span>{address}</span>;
  return (
    <button
      disabled={isPending || !connectors[0]}
      onClick={() => connect({ connector: connectors[0] })}
    >Connect wallet</button>
  );
}

import type { TokenConfig } from "@inco/ctoken";

const TOKENS: TokenConfig[] = [
  { erc20: "0x036CbD53842c5426634e7929541eC2318f3dCF7e", symbol: "USDC", icon: "/tokens/usdc.svg" },
  { erc20: "0x0a215D8ba66387DCA84B284D18c3B4ec3de6E54a", symbol: "USDT", icon: "/tokens/usdt.png" },
  { erc20: "0x808456652fdb597867f38412077A9182bf77359F", symbol: "EURC", icon: "/tokens/eurc.svg" },
];

<CTokenProvider network="baseSepolia" publicClient={publicClient} tokens={TOKENS}>
  {children}
</CTokenProvider>

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState, type ReactNode } from "react";
import { CTokenProvider, type CTokenProviderProps } from "@inco/ctoken/react";

export function AppProviders({ publicClient, walletClient, children }: {
  publicClient: CTokenProviderProps["publicClient"];
  walletClient: CTokenProviderProps["walletClient"];
  children: ReactNode;
}) {
  const [queryClient] = useState(() => new QueryClient());
  return <QueryClientProvider client={queryClient}>
    <CTokenProvider network="baseSepolia" publicClient={publicClient}
      walletClient={walletClient}>
      {children}
    </CTokenProvider>
  </QueryClientProvider>;
}

import type { BrowserProvider } from "ethers";
import { createWalletClient, custom, getAddress } from "viem";
import { baseSepolia } from "viem/chains";

// Call after the user's connect action; retain the result in app state.
export async function walletClientFromEthers(provider: BrowserProvider) {
  const signer = await provider.getSigner();
  return createWalletClient({
    account: getAddress(await signer.getAddress()),
    chain: baseSepolia,
    transport: custom({
      request: ({ method, params }) => provider.send(method, params ?? []),
    }),
  });
}

// Pass the result to <CTokenProvider walletClient={walletClient} ...>.