walletconnect-example-dapp VS appkit

I tried using Vercel but it just shows blank. I forked this repository

// context/index.tsx 'use client' import { wagmiAdapter, projectId } from '../config' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { createAppKit } from '@reown/appkit/react' import { mainnet, sepolia, mode, modeTestnet } from '@reown/appkit/networks' import React, { type ReactNode } from 'react' import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi' // Set up queryClient const queryClient = new QueryClient() if (!projectId) { throw new Error('Project ID is not defined') } // Set up metadata const metadata = { name: 'mode-chain', description: 'AppKit Example', url: 'https://reown.com/appkit', // origin must match your domain & subdomain icons: ['https://assets.reown.com/reown-profile-pic.png'] } // Create the modal const modal = createAppKit({ adapters: [wagmiAdapter], projectId, networks: [mainnet, sepolia, mode, modeTestnet], defaultNetwork: mainnet, metadata: metadata, features: { analytics: true, // Optional - defaults to your Cloud configuration } }) function ContextProvider({ children, cookies }: { children: ReactNode; cookies: string | null }) { const initialState = cookieToInitialState(wagmiAdapter.wagmiConfig as Config, cookies) return ( {children}QueryClientProvider> WagmiProvider> ) } export default ContextProvider

WalletConnect Web3 Modal (3700 GitHub Stars) https://github.com/WalletConnect/web3modal

Web3Modal

There are other several libraries to create a web3 enviroment as: Rainbowkit || Wagmi || Scaffold-eth || useDApp || web3modal || Web3-UI

It seems like a rare solution. There's this library which claims to help but on its demo site it has the same problem as what my code has.

Now lets install Web3Modal library(https://github.com/Web3Modal/web3modal). Web3Modal is an easy-to-use library to help developers add support for multiple providers in their apps with a simple customizable configuration. By default Web3Modal Library supports injected providers like (Metamask, Dapper, Gnosis Safe, Frame, Web3 Browsers, etc), You can also easily configure the library to support Portis, Fortmatic, Squarelink, Torus, Authereum, D'CENT Wallet and Arkane. Open up a terminal pointing atmy-app directory and execute this command

I've used web3modal in the past

The Web3Modal library is a simple Web3/Ethereum provider solution, which enables the addition of support for multiple providers in the application. The Web3Modal library supports the injected providers that we’ll rely on in this project, MetaMask and Tor.us.

I've asked in discord server, and a guy shared me that library : https://github.com/Web3Modal/web3modal