From 4ffef7f9bb14184acf48f5bb359261cb2440442e Mon Sep 17 00:00:00 2001 From: belopash Date: Thu, 24 Oct 2024 01:10:38 +0500 Subject: [PATCH] fix: add mainnet, properly switch chain on connect --- src/App.tsx | 10 +++++-- src/components/Button/ConnectButton.tsx | 21 ++++++++++---- .../ContractCallDialog/ContractCallDialog.tsx | 4 +-- src/layouts/NetworkLayout/NetworkLayout.tsx | 2 +- src/layouts/NetworkLayout/UserMenu.tsx | 4 +-- src/network/ConnectedWalletRequired.tsx | 4 +-- src/network/config.ts | 29 ++----------------- 7 files changed, 30 insertions(+), 44 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c84da10..a349af4 100644 --- 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 ( <> - + - + diff --git a/src/components/Button/ConnectButton.tsx b/src/components/Button/ConnectButton.tsx index 55208d3..6729f88 100644 --- 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 ( - + ); } diff --git a/src/components/ContractCallDialog/ContractCallDialog.tsx b/src/components/ContractCallDialog/ContractCallDialog.tsx index 2a91a0d..ba91f34 100644 --- 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) { const { isConnected } = useAccount(); - const { openConnectModal } = useConnectModal(); if (!isConnected) { return ( @@ -54,7 +52,7 @@ export function ContractCallDialog({ > Connect your wallet to proceed - + diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx index 609f203..57f9c81 100644 --- 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 index f9f5470..bb0084e 100644 --- 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(null); const [open, setOpen] = useState(false); @@ -40,7 +38,7 @@ export function UserMenu() { }, [address]); if (!address || !isConnected) { - return ; + return ; } return ( diff --git a/src/network/ConnectedWalletRequired.tsx b/src/network/ConnectedWalletRequired.tsx index 48cc013..a20cb79 100644 --- 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) { > Connect your wallet to proceed - + ); diff --git a/src/network/config.ts b/src/network/config.ts index eea0607..7105325 100644 --- 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, });