fix: wallet connect issues + sepolia | mobile view alert

src/components/Theme/index.ts

@@ -1,2 +1,3 @@
 export * from './rainbowTheme';
 export * from './theme';
+export * from './muiThemeConfig';

src/pages/layout.tsx

@@ -64,7 +64,9 @@ const ResponsiveDisclaimer = styled('div')(() => {
     textAlign: 'start',
     fontSize: '1.6rem',
     padding: '1rem 0.8rem 1rem',
-
+    '@media (max-width: 600px)': {
+      display: 'block',
+    },
     p: {
       padding: '1rem 0',
       margin: 0,

src/providers/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { getMuiThemeConfig } from '~/components/Theme/muiThemeConfig';
+import { getMuiThemeConfig } from '~/components';
 
 import { Theme, ThemeName } from '~/types';
 import { THEME_KEY, getTheme } from '~/utils';

src/providers/Web3ModalProvider.tsx

@@ -1,50 +1,20 @@
-import '@rainbow-me/rainbowkit/styles.css';
-
-import React from 'react';
+'use client';
+import type { ReactNode } from 'react';
 
-import { RainbowKitProvider, connectorsForWallets, darkTheme } from '@rainbow-me/rainbowkit';
+import '@rainbow-me/rainbowkit/styles.css';
+import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { rainbowWallet, walletConnectWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets';
-import { WagmiProvider, http, createConfig } from 'wagmi';
-import { localhost } from 'wagmi/chains';
+import { WagmiProvider } from 'wagmi';
 
-import { getConfig } from '../config';
+import { config } from '../utils';
 
-const { PROJECT_ID } = getConfig();
-
-const getWallets = () => {
-  if (PROJECT_ID) {
-    return [injectedWallet, rainbowWallet, walletConnectWallet];
-  } else {
-    return [injectedWallet];
-  }
+type Props = {
+  children: ReactNode;
 };
 
-const connectors = connectorsForWallets(
-  [
-    {
-      groupName: 'Recommended',
-      wallets: getWallets(),
-    },
-  ],
-  {
-    appName: 'Web3 React boilerplate',
-    projectId: PROJECT_ID,
-  },
-);
-
-const config = createConfig({
-  chains: [localhost],
-  transports: {
-    [localhost.id]: http(),
-  },
-  batch: { multicall: true },
-  connectors,
-});
-
 const queryClient = new QueryClient();
 
-export function Web3ModalProvider({ children }: { children: React.ReactElement }) {
+export function Web3ModalProvider({ children }: Props) {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

src/providers/index.tsx

@@ -1,8 +1,15 @@
+'use client';
+import type { ReactNode } from 'react';
+
 import { StateProvider } from './StateProvider';
 import { ThemeProvider } from './ThemeProvider';
 import { Web3ModalProvider } from './Web3ModalProvider';
 
-export const Providers = ({ children }: { children: React.ReactElement }) => {
+type Props = {
+  children: ReactNode;
+};
+
+export const Providers = ({ children }: Props) => {
   return (
     <ThemeProvider>
       <StateProvider>

src/utils/config.ts

@@ -0,0 +1,43 @@
+import { createConfig, http, cookieStorage, createStorage } from 'wagmi';
+import { localhost, sepolia } from 'wagmi/chains';
+import { rainbowWallet, walletConnectWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+
+import { getConfig } from '../config';
+
+const { PROJECT_ID } = getConfig();
+
+const getWallets = () => {
+  if (PROJECT_ID) {
+    return [injectedWallet, rainbowWallet, walletConnectWallet];
+  } else {
+    return [injectedWallet];
+  }
+};
+
+const connectors = connectorsForWallets(
+  [
+    {
+      groupName: 'Recommended',
+      wallets: getWallets(),
+    },
+  ],
+  {
+    appName: 'Web3 React boilerplate',
+    projectId: PROJECT_ID,
+  },
+);
+
+export const config = createConfig({
+  chains: [localhost, sepolia],
+  ssr: true,
+  storage: createStorage({
+    storage: cookieStorage,
+  }),
+  transports: {
+    [localhost.id]: http(),
+    [sepolia.id]: http(),
+  },
+  batch: { multicall: true },
+  connectors,
+});

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './getTheme';
 export * from './Variables';
+export * from './config';