feat: add banner in case of unsupported network selection

DLC-link · Sep 11, 2024 · d83f76d · d83f76d
1 parent 7e036da
commit d83f76d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/app/components/network/components/networks-menu.tsx b/src/app/components/network/components/networks-menu.tsx
@@ -3,16 +3,16 @@ import { useAccount, useConfig, useSwitchChain } from 'wagmi';
 
 export function NetworksMenu(): React.JSX.Element | null {
   const { chains } = useConfig();
-  const { chain } = useAccount();
+  const { chain, isConnected } = useAccount();
   const { switchChain } = useSwitchChain();
 
-  if (!chain) {
+  if (!isConnected) {
     return null;
   }
 
   return (
     <Menu variant={'networkChange'}>
-      <MenuButton disabled={!chain}>
+      <MenuButton>
         <HStack justifyContent={'space-evenly'}>
           <Text>{chain ? chain?.name : 'Not Connected'}</Text>
         </HStack>

diff --git a/src/app/components/proof-of-reserve/proof-of-reserve.tsx b/src/app/components/proof-of-reserve/proof-of-reserve.tsx
@@ -1,10 +1,11 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
-import { Divider, HStack, Text } from '@chakra-ui/react';
+import { Button, Divider, HStack, Text } from '@chakra-ui/react';
 import { ProtocolHistoryTable } from '@components/protocol-history-table/protocol-history-table';
 import { Merchant } from '@models/merchant';
 import { bitcoin, dlcBTC } from '@models/token';
 import { ProofOfReserveContext } from '@providers/proof-of-reserve-context-provider';
+import { useAccount } from 'wagmi';
 
 import { MerchantTableHeader } from './components/merchant-table/components/merchant-table-header';
 import { MerchantTableItem } from './components/merchant-table/components/merchant-table-item';
@@ -18,6 +19,8 @@ export function ProofOfReserve(): React.JSX.Element {
   const { proofOfReserve, totalSupply, bitcoinPrice, allMintBurnEvents } =
     useContext(ProofOfReserveContext);
 
+  const { chain, isConnected } = useAccount();
+
   const [proofOfReserveSum, merchantProofOfReserves] = proofOfReserve || [
     undefined,
     appConfiguration.merchants.map((merchant: Merchant) => {
@@ -28,8 +31,37 @@ export function ProofOfReserve(): React.JSX.Element {
     }),
   ];
 
+  const [showBanner, setShowBanner] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (isConnected && !chain) {
+      setShowBanner(true);
+    } else {
+      setShowBanner(false);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chain]);
+
   return (
     <ProofOfReserveLayout>
+      {showBanner && (
+        <HStack
+          w={'100%'}
+          justifyContent={'center'}
+          bg={'yellow.300'}
+          p={4}
+          borderRadius={'md'}
+          mb={4}
+        >
+          <Text fontSize={'lg'} fontWeight={600} color={'black'}>
+            Please select a network to continue.
+          </Text>
+          <Button onClick={() => setShowBanner(false)} colorScheme="red" size="sm">
+            Exit
+          </Button>
+        </HStack>
+      )}
       <Text w={'100%'} color={'white'} fontSize={'6xl'} fontWeight={500}>
         Proof of Reserve
       </Text>

diff --git a/src/app/providers/ethereum-network-configuration.provider.tsx b/src/app/providers/ethereum-network-configuration.provider.tsx
@@ -20,7 +20,7 @@ import {
   mainnet,
   sepolia,
 } from 'viem/chains';
-import { useAccount, useDisconnect } from 'wagmi';
+import { useAccount } from 'wagmi';
 
 import { SUPPORTED_VIEM_CHAINS } from '@shared/constants/ethereum.constants';
 
@@ -212,7 +212,6 @@ export function EthereumNetworkConfigurationContextProvider({
 }: HasChildren): React.JSX.Element {
   const dispatch = useDispatch();
   const { chain, isConnected } = useAccount();
-  const { disconnect } = useDisconnect();
   const [ethereumNetworkConfiguration, setEthereumNetworkConfiguration] =
     useState<EthereumNetworkConfiguration>(
       chain
@@ -223,9 +222,12 @@ export function EthereumNetworkConfigurationContextProvider({
     useState(false);
 
   useEffect(() => {
+    if (!isConnected) {
+      return;
+    }
     if (isConnected && !chain) {
-      disconnect();
       dispatch(mintUnmintActions.resetMintUnmintState());
+      //ilyenkor kell megmutatni a bannert
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chain]);