Setup Coin98 Adapter for Next.js

Setup for Next.js 13

// Configure blockchains, wallets then wrap app with WalletProvider, WalletModalProvider
"use client";

import {
  BLOCKCHAINS_DATA,
  WalletProvider,
} from "@coin98-com/wallet-adapter-react";
import { WalletModalProvider } from "@coin98-com/wallet-adapter-react-ui";
import { Coin98WalletAdapter } from "@coin98-com/wallet-adapter-coin98";
import { MetaMaskWalletAdapter } from "@coin98-com/wallet-adapter-metamask";

interface ContainerProps {
  children: React.ReactNode;
}

const Coin98AdapterProvider: React.FC<ContainerProps> = ({ children }) => {
  const enables = [BLOCKCHAINS_DATA.ethereum];
  const wallets = [Coin98WalletAdapter, MetaMaskWalletAdapter];
  return (
    <WalletProvider wallets={wallets} enables={enables} autoConnect>
      <WalletModalProvider>{children}</WalletModalProvider>
    </WalletProvider>
  );
};

export default Coin98AdapterProvider;

// modal.tsx
"use client";

import dynamic from "next/dynamic";
import { ChainInfo, evmChains } from "@coin98-com/wallet-adapter-react-ui";

const WalletModalC98 = dynamic(
  async () => (await import("@coin98-com/wallet-adapter-react-ui")).WalletModalC98,
  {
    ssr: false,
  }
);

const Coin98AdapterModal = () => {
  const defaultChains = [...evmChains]; // multi-chain
  // const defaultChains = [tomo,ether]; // single-chainds
  return <WalletModalC98 isC98Theme enableChains={defaultChains} />;
};

export default Coin98AdapterModal;

Common props:

className?: string;
container?: string;
enableChains?: ChainInfo[];
activeChainId?: string;
titleModal?: string | ReactNode;
titleWallets?: string | ReactNode;
titleNetworks?: string | ReactNode;
layoutClass?: string;
layoutStyle?: CSSProperties;
overlayStyle?: CSSProperties;
overlayClass?: string;
isC98Theme?: boolean;
renderListChains?: (chainData: ChainInfo, isActive: boolean) => ReactNode;
renderListWallets?: (walletIcon: string, walletName: string) => ReactNode;

Import modal UI CSS

// globals.css
@import '@coin98-com/wallet-adapter-react-ui/styles.css';

// layout.tsx
...

import "./globals.css";
import Coin98AdapterModal from "./modal";
import Coin98AdapterProvider from "./provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    ...
        <Coin98AdapterProvider>
          {children}
          <Coin98AdapterModal />
        </Coin98AdapterProvider>
    ...  
  );
}

Then use it in your dApp

// page.tsx
"use client";

import { useWallet } from "@coin98-com/wallet-adapter-react";
import { useWalletModal } from "@coin98-com/wallet-adapter-react-ui";

export default function Home() {
  const {
    address,
    selectedChainId,
    disconnect,
    selectedBlockChain,
    connected,
  } = useWallet();
  const { openWalletModal } = useWalletModal();

  return (
    <>
      <div>
        {!connected && <button onClick={openWalletModal}>Connect</button>}
        {connected && <button onClick={disconnect}>Disconnect</button>}
      </div>

      <div>
        {connected && (
          <div>
            <div>
              Address: <span>{address}</span>
            </div>

            <div>
              Network: <span>{selectedChainId}</span>
            </div>

            <div>
              Blockchain: <span>{selectedBlockChain}</span>
            </div>
          </div>
        )}
      </div>
    </>
  );
}