example.ts

// File: package.json
"dependencies": {
    "@web3modal/ethereum": "^2.0.0-rc.1",
    "@web3modal/react": "^2.0.0-rc.1",
    "axios": "^1.1.3",
    "ethers": "^5.7.2",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "swr": "^1.3.0",
    "wagmi": "^0.10.1",
    "web3.storage": "^4.4.0"
  },

// File: _app.tsx
import type { AppProps } from "next/app";

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import {
  arbitrum,
  mainnet,
  goerli,
  arbitrumGoerli,
} from "wagmi/chains";

import "@styles/globals.css";
import { ChildProps } from "@components/types";
import type { Page } from "../types/page";
import Config from "@config";

const SUPPORTED_CHAINS = [
  arbitrum,
  arbitrumGoerli,
  mainnet,
  goerli
];

// - START
// Wagmi client
const { provider } = configureChains(SUPPORTED_CHAINS, [
  walletConnectProvider({
    projectId: Config.walletConnectProjectId,
  }),
]);

const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({
    appName: "app",
    chains: SUPPORTED_CHAINS,
  }),
  provider,
});

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, SUPPORTED_CHAINS);
// - END

type Props = AppProps & {
  Component: Page;
};

const MyApp = ({ Component, pageProps }: Props) => {
  const Layout = Component.Layout

  return (
    <Layout>
      <WagmiConfig client={wagmiClient} />
      <Web3Modal
        projectId={Config.walletConnectProjectId}
        ethereumClient={ethereumClient}
        enableNetworkView={true}
      />
      <Component {...pageProps} />
    </Layout>
  );
};

export default MyApp;


// File: pay.tsx
const Pay: NextPageWithLayout = () => {
  return (
    <div className="md:w-1/2 w-1/3 mr-4">
      <ConnectWallet />
    </div>

  );
};
export default Pay;



// File: connectWallet.tsx
import { useWeb3Modal } from "@web3modal/react";

const ConnectWallet = () => {
  const { open } = useWeb3Modal();

  return (
    <>
        <button onClick={() => open()}>
          Connect Wallet
        </button>
    </>
  );
};

export default ConnectWallet;