wallet-connect-provider.ts

"use client";

import { useMemo } from "react";
import { useSearchParams } from "next/navigation";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { TipLinkWalletAutoConnectV2 } from "@tiplink/wallet-adapter-react-ui";
import { TipLinkWalletAdapter } from "@tiplink/wallet-adapter";

import { CoinbaseWalletAdapter } from "@solana/wallet-adapter-coinbase";
import { WalletConnectWalletAdapter } from "@solana/wallet-adapter-walletconnect";

import { TipLinkWalletModalProvider } from "@/components/tiplink/tiplink-wallet-modal-provider";

import { env } from "@/env.mjs";

interface WalletConnectProviderProps {
  autoConnect?: boolean;
  children: React.ReactNode;
}

export function WalletConnectProvider({
  autoConnect,
  children,
}: WalletConnectProviderProps) {
  const searchParams = useSearchParams();
  const endpoint = env.NEXT_PUBLIC_SOLANA_RPC_ENDPOINT;
  const network = env.NEXT_PUBLIC_SOLANA_NETWORK;
  console.log(`Connecting to ${endpoint} network ${network}.`);
  const wallets = useMemo(
    () => [
      new TipLinkWalletAdapter({
        clientId: "55b3ab2b-8dfb-4b58-949e-9237c60700db",
        title: "Access Protocol",
        theme: "system",
      }),
      new CoinbaseWalletAdapter({
        network: network,
        options: {
          appName: "Access Protocol",
          appLogo: `${env.NEXT_PUBLIC_APP_URL}/favicon.ico`,
          darkMode: false,
        },
      }),
      new WalletConnectWalletAdapter({
        network: network,
        options: {
          relayUrl: "wss://relay.walletconnect.com",
          projectId: env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
          metadata: {
            name: "Access Protocol",
            description: "Access Protocol",
            url: env.NEXT_PUBLIC_APP_URL,
            icons: [`${env.NEXT_PUBLIC_APP_URL}/favicon.ico`],
          },
        },
      }),
    ],
    [network],
  );
  return (
    <ConnectionProvider endpoint={endpoint}>
      <TipLinkWalletAutoConnectV2 isReady query={searchParams}>
        <WalletProvider wallets={wallets} autoConnect={autoConnect || false}>
          <TipLinkWalletModalProvider>{children}</TipLinkWalletModalProvider>
        </WalletProvider>
      </TipLinkWalletAutoConnectV2>
    </ConnectionProvider>
  );
}