fix: add mainnet, properly switch chain on connect

subsquid · Oct 23, 2024 · 4ffef7f · 4ffef7f
1 parent 7a39703
commit 4ffef7f
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,7 @@ import { queryClient } from '@api/client';
 import { Toaster } from '@components/Toaster';
 import { SquidHeightProvider } from '@hooks/useSquidNetworkHeightHooks';
 import { rainbowConfig } from '@network/config';
+import { getChainId, getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 import { AppRoutes } from './AppRoutes';
 import { useCreateRainbowKitTheme, useCreateTheme, useThemeState } from './theme';
@@ -18,13 +19,18 @@ function App() {
   const [themeName] = useThemeState();
   const theme = useCreateTheme(themeName);
   const rainbowkitTheme = useCreateRainbowKitTheme(themeName);
+  const network = getSubsquidNetwork();
 
   return (
     <>
-      <WagmiProvider config={rainbowConfig}>
+      <WagmiProvider config={rainbowConfig} reconnectOnMount>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
-            <RainbowKitProvider modalSize="compact" theme={rainbowkitTheme}>
+            <RainbowKitProvider
+              modalSize="compact"
+              theme={rainbowkitTheme}
+              initialChain={getChainId(network)}
+            >
               <SquidHeightProvider>
                 <CssBaseline />
                 <BrowserRouter>

diff --git a/src/components/Button/ConnectButton.tsx b/src/components/Button/ConnectButton.tsx
@@ -1,13 +1,22 @@
-import { MouseEventHandler } from 'react';
-
 import { LoginOutlined } from '@mui/icons-material';
-import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import { useConnectModal } from '@rainbow-me/rainbowkit';
+
+function ConnectButton() {
+  const { openConnectModal, connectModalOpen } = useConnectModal();
 
-function ConnectButton({ onClick }: { onClick?: MouseEventHandler }) {
   return (
-    <Button startIcon={<LoginOutlined />} onClick={onClick} variant="contained" color="info">
+    <LoadingButton
+      loading={connectModalOpen}
+      startIcon={<LoginOutlined />}
+      onClick={() => {
+        openConnectModal?.();
+      }}
+      variant="contained"
+      color="info"
+    >
       CONNECT WALLET
-    </Button>
+    </LoadingButton>
   );
 }
 

diff --git a/src/components/ContractCallDialog/ContractCallDialog.tsx b/src/components/ContractCallDialog/ContractCallDialog.tsx
@@ -1,7 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 
 import { Box } from '@mui/material';
-import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 
 import ConnectButton from '@components/Button/ConnectButton';
@@ -24,7 +23,6 @@ export function ContractCallDialog({
   onApprove,
 }: PropsWithChildren<ConfirmDialogProps>) {
   const { isConnected } = useAccount();
-  const { openConnectModal } = useConnectModal();
 
   if (!isConnected) {
     return (
@@ -54,7 +52,7 @@ export function ContractCallDialog({
         >
           <Box sx={{ textAlign: 'center' }}>
             <Box sx={{ mb: 2 }}>Connect your wallet to proceed</Box>
-            <ConnectButton onClick={openConnectModal} />
+            <ConnectButton />
           </Box>
         </Box>
       </ConfirmDialog>

diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx
@@ -269,7 +269,7 @@ export const NetworkLayout = ({
     if (chain?.id === getChainId(network)) return;
 
     disconnect();
-  }, [isConnected, chain, disconnect, walletClient, network]);
+  }, [isConnected, chain?.id, walletClient, network, disconnect]);
 
   const centeredSx = {
     alignSelf: stretchContent ? 'stretch' : 'flex-start',

diff --git a/src/layouts/NetworkLayout/UserMenu.tsx b/src/layouts/NetworkLayout/UserMenu.tsx
@@ -3,7 +3,6 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { addressFormatter } from '@lib/formatters/formatters';
 import { AccountBalanceWalletOutlined, ExpandMore } from '@mui/icons-material';
 import { Box, Button, Menu, styled, Typography } from '@mui/material';
-import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 
 import ConnectButton from '@components/Button/ConnectButton';
@@ -24,7 +23,6 @@ export const Dropdown = styled(Button)(({ theme }) => ({
 
 export function UserMenu() {
   const { address, isConnected } = useAccount();
-  const { openConnectModal } = useConnectModal();
   const ref = useRef<HTMLButtonElement | null>(null);
   const [open, setOpen] = useState(false);
 
@@ -40,7 +38,7 @@ export function UserMenu() {
   }, [address]);
 
   if (!address || !isConnected) {
-    return <ConnectButton onClick={openConnectModal} />;
+    return <ConnectButton />;
   }
 
   return (

diff --git a/src/network/ConnectedWalletRequired.tsx b/src/network/ConnectedWalletRequired.tsx
@@ -1,14 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 
 import { Box } from '@mui/material';
-import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 
 import ConnectButton from '@components/Button/ConnectButton';
 
 export function ConnectedWalletRequired({ children }: PropsWithChildren) {
   const { isConnected } = useAccount();
-  const { openConnectModal } = useConnectModal();
 
   if (!isConnected) {
     return (
@@ -22,7 +20,7 @@ export function ConnectedWalletRequired({ children }: PropsWithChildren) {
       >
         <Box sx={{ textAlign: 'center' }}>
           <Box sx={{ mb: 2 }}>Connect your wallet to proceed</Box>
-          <ConnectButton onClick={openConnectModal} />
+          <ConnectButton />
         </Box>
       </Box>
     );

diff --git a/src/network/config.ts b/src/network/config.ts
@@ -1,6 +1,6 @@
 import { getDefaultConfig } from '@rainbow-me/rainbowkit';
 import { upperFirst } from 'lodash-es';
-import { arbitrumSepolia, arbitrum, sepolia } from 'wagmi/chains';
+import { arbitrumSepolia, arbitrum, sepolia, mainnet } from 'wagmi/chains';
 
 import { getSubsquidNetwork, NetworkName } from './useSubsquidNetwork';
 
@@ -21,29 +21,6 @@ const network = getSubsquidNetwork();
 export const rainbowConfig = getDefaultConfig({
   appName: `Subsquid Network ${upperFirst(network)}`,
   projectId: process.env.WALLET_CONNECT_PROJECT_ID || '',
-  chains:
-    network === NetworkName.Mainnet
-      ? [
-          {
-            ...arbitrum,
-            // rpcUrls: {
-            //   default: {
-            //     http: ['https://arbitrum-one.public.blastapi.io'],
-            //     webSocket: ['wss://arbitrum-one.public.blastapi.io'],
-            //   },
-            // },
-          },
-        ]
-      : [
-          {
-            ...arbitrumSepolia,
-            // rpcUrls: {
-            //   default: {
-            //     http: ['https://arbitrum-sepolia.public.blastapi.io'],
-            //     webSocket: ['wss://arbitrum-sepolia.public.blastapi.io'],
-            //   },
-            // },
-          },
-          sepolia,
-        ],
+  chains: network === NetworkName.Mainnet ? [arbitrum, mainnet] : [arbitrumSepolia, sepolia],
+  syncConnectedChain: true,
 });