Initializing Nexus with RainbowKit

pnpmnpmyarnbun
Copy
pnpm add @avail-project/nexus-core @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

Copyimport { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { arbitrum, base, mainnet, optimism, polygon } from "wagmi/chains";
 
export const wagmiConfig = getDefaultConfig({
  appName: "My App",
  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
  chains: [mainnet, arbitrum, base, optimism, polygon],
});

Copy"use client";
 
import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import { useAccount } from "wagmi";
import {
  createNexusClient,
  type EthereumProvider,
  type NexusClient,
} from "@avail-project/nexus-core";
 
const NexusContext = createContext<NexusClient | null>(null);
 
export function NexusProvider({ children }: { children: ReactNode }) {
  const { address, connector, status } = useAccount();
  const [client, setClient] = useState<NexusClient | null>(null);
 
  useEffect(() => {
    if (status === "connecting" || status === "reconnecting") return;
 
    let cancelled = false;
    const next = createNexusClient({ clientId: "my-app", network: "mainnet" });
 
    (async () => {
      await next.initialize();
      if (cancelled) return;
      if (status === "connected" && connector) {
        const provider = (await connector.getProvider()) as EthereumProvider;
        if (cancelled) return;
        await next.setEVMProvider(provider);
      }
      if (!cancelled) setClient(next);
    })().catch((error) => console.error("Nexus setup failed", error));
 
    return () => {
      cancelled = true;
      setClient(null);
      next.destroy();
    };
  }, [address, connector, status]);
 
  return <NexusContext.Provider value={client}>{children}</NexusContext.Provider>;
}
 
export const useNexus = () => useContext(NexusContext);

Copy"use client";
 
import "@rainbow-me/rainbowkit/styles.css";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { ReactNode } from "react";
import { WagmiProvider } from "wagmi";
import { wagmiConfig } from "@/lib/wagmi";
import { NexusProvider } from "./nexus-provider";
 
const queryClient = new QueryClient();
 
export function Providers({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <NexusProvider>{children}</NexusProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Copy"use client";
 
import { formatUnits } from "@avail-project/nexus-core/utils";
import { useNexus } from "./nexus-provider";
 
export function Balances() {
  const client = useNexus();
 
  async function load() {
    if (!client?.hasEvmProvider) return;
    const balances = await client.getBalances();
    for (const b of balances) {
      console.log(b.symbol, b.chainId, formatUnits(b.usableBalanceRaw, b.decimals));
    }
  }
 
  return <button onClick={load} disabled={!client?.hasEvmProvider}>Load balances</button>;
}