Limit geoblocked users to legacy withdraw page

TempleDAO · Nov 30, 2023 · 366809d · 366809d
1 parent 3a6d25f
commit 366809d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 26 deletions.
diff --git a/apps/dapp/src/components/Layouts/CoreLayout/Account.tsx b/apps/dapp/src/components/Layouts/CoreLayout/Account.tsx
@@ -21,16 +21,11 @@ export const Account = () => {
   const isSmallDesktop = useMediaQuery({
     query: queryVerySmallDesktop,
   });
-  const { isBlocked } = useGeoBlocked();
 
   if (connecting) {
     return <Loader />;
   }
 
-  if (isBlocked) {
-    return <ConnectButton disabled label="Restricted Jurisdiction" isSmall isActive isUppercase role="button" />;
-  }
-
   if (wallet) {
     const disconnectButton = (
       <ConnectButton

diff --git a/apps/dapp/src/components/Layouts/V2Layout/Nav/WalletNav.tsx b/apps/dapp/src/components/Layouts/V2Layout/Nav/WalletNav.tsx
@@ -15,7 +15,6 @@ import { useState } from 'react';
 import { useConnectWallet, useSetChain } from '@web3-onboard/react';
 import { useWallet } from 'providers/WalletProvider';
 import TruncatedAddress from 'components/TruncatedAddress';
-import { useGeoBlocked } from 'hooks/use-geo-blocked';
 
 type WalletNavProps = {
   isNavCollapsed: boolean;
@@ -26,7 +25,6 @@ export const WalletNav = (props: WalletNavProps) => {
   const { isNavCollapsed, onClickHandler } = props;
   const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
   const { walletAddress } = useWallet();
-  const { isBlocked } = useGeoBlocked();
 
   const [isWalletDropdownOpen, setIsWalletDropdownOpen] = useState(false);
   const [{ connectedChain }] = useSetChain();
@@ -46,8 +44,6 @@ export const WalletNav = (props: WalletNavProps) => {
   const explorerUrl = getChainExplorerURL(walletAddress || '', currentChainId);
 
   const connectWallet = async () => {
-    // TODO: What to do in this case?
-    if (isBlocked) return alert('Restricted Jurisdiction');
     if (onClickHandler) onClickHandler();
     await connect();
   };
@@ -60,7 +56,7 @@ export const WalletNav = (props: WalletNavProps) => {
   return (
     <WalletContainer onMouseLeave={() => setIsWalletDropdownOpen(false)}>
       {connecting && <Loader iconSize={24} />}
-      {!connecting && !isBlocked && wallet ? (
+      {!connecting && wallet ? (
         <FlexColumnContainer>
           <WalletConnectedContainer onClick={() => setIsWalletDropdownOpen(!isWalletDropdownOpen)}>
             <WalletIcon />
@@ -92,12 +88,6 @@ export const WalletNav = (props: WalletNavProps) => {
           {!isNavCollapsed && <NavLinkText style={{ cursor: 'pointer' }}>Connect</NavLinkText>}
         </div>
       )}
-      {!connecting && isBlocked && (
-        <>
-          <WalletIcon fill={theme.palette.grayOpaque} />
-          {!isNavCollapsed && <NavLinkText small>Blocked</NavLinkText>}
-        </>
-      )}
     </WalletContainer>
   );
 };

diff --git a/apps/dapp/src/components/Layouts/V2Layout/V2Account.tsx b/apps/dapp/src/components/Layouts/V2Layout/V2Account.tsx
@@ -18,21 +18,15 @@ export const V2Account = () => {
   const { walletAddress } = useWallet();
   const [{ connectedChain }] = useSetChain();
   const currentChainId = useMemo(() => parseInt(connectedChain?.id || '', 16), [connectedChain]);
-  const { isBlocked } = useGeoBlocked();
 
   const isSmallDesktop = useMediaQuery({
     query: queryVerySmallDesktop,
   });
 
-
   if (connecting) {
     return <Loader />;
   }
 
-  if (isBlocked) {
-    return <ConnectButton disabled label="Restricted Jurisdiction" isSmall isActive isUppercase role="button" />;
-  }
-
   if (wallet) {
     const disconnectButton = (
       <ConnectButton

diff --git a/apps/dapp/src/components/Layouts/V2Layout/index.tsx b/apps/dapp/src/components/Layouts/V2Layout/index.tsx
@@ -1,7 +1,7 @@
-import { FunctionComponent, SVGProps, useState } from 'react';
+import { FunctionComponent, SVGProps, useEffect, useState } from 'react';
 import * as breakpoints from 'styles/breakpoints';
 import { useMediaQuery } from 'react-responsive';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import styled from 'styled-components';
 import { queryMinTablet } from 'styles/breakpoints';
@@ -14,6 +14,7 @@ import CurrencyExchange from 'assets/icons/currency_exchange.svg?react';
 import Payments from 'assets/icons/payments.svg?react';
 import Candle from 'assets/icons/candle.svg?react';
 import Restore from 'assets/icons/restore.svg?react';
+import { useGeoBlocked } from 'hooks/use-geo-blocked';
 
 export type MenuNavItem = {
   label: string;
@@ -37,6 +38,8 @@ const V2Layout = () => {
     query: queryMinTablet,
   });
   const loc = useLocation();
+  const navigate = useNavigate();
+  const { isBlocked, loading } = useGeoBlocked();
   const [menuNavItems, setMenuNavItems] = useState<Array<MenuNavItem>>([
     {
       label: 'Trade',
@@ -71,6 +74,18 @@ const V2Layout = () => {
     },
   ]);
 
+  // Handle geoblocked users
+  useEffect(() => {
+    // Define all permitted paths
+    const permittedPaths = ['/dapp/legacy'];
+    if (loading || (!loading && !isBlocked)) return;
+    // Force redirect to permitted path
+    if (!permittedPaths.find((path) => path === loc.pathname)) navigate(permittedPaths[0]);
+    // Remove nav items that are not permitted
+    const newMenuNavItems = menuNavItems.filter((menuItem) => permittedPaths.find((path) => path === menuItem.linkTo));
+    setMenuNavItems(newMenuNavItems);
+  }, [loading, isBlocked, loc]);
+
   const onSelectMenuNavItems = async (selectedMenuItem: MenuNavItem) => {
     await setMenuNavItems((prevSelectedMenuNavItems) => {
       const newSelectedMenuNavItems = prevSelectedMenuNavItems.map((prevMenuItem) => {

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Legacy/ClaimFromVaults.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Legacy/ClaimFromVaults.tsx
@@ -10,13 +10,16 @@ import { VaultButton } from '../../VaultPages/VaultContent';
 import { useTokenContractAllowance } from 'hooks/core/use-token-contract-allowance';
 import env from 'constants/env';
 import _ from 'lodash';
+import { useConnectWallet } from '@web3-onboard/react';
+import { TradeButton } from '../../NewUI/Home';
 
 const EMPTY_CLAIM_STATE = {
   claimSubvaultAddress: '',
   claimAmount: '',
 };
 
 export const ClaimFromVaults = () => {
+  const [{ wallet }, connect] = useConnectWallet();
   const {
     balances: { balances, isLoading: balancesIsLoading },
     vaultGroups: { vaultGroups, isLoading: vaultGroupsIsLoading },
@@ -103,7 +106,14 @@ export const ClaimFromVaults = () => {
       )}
 
       <ButtonContainer>
-        {Number(claimState.claimAmount) === 0 ? (
+        {!wallet ? (
+          <TradeButton
+            label={`Connect`}
+            onClick={() => {
+              connect();
+            }}
+          />
+        ) : Number(claimState.claimAmount) === 0 ? (
           <ClaimButton
             label={`Nothing to Claim`}
             disabled={true}

diff --git a/apps/dapp/src/hooks/use-geo-blocked.tsx b/apps/dapp/src/hooks/use-geo-blocked.tsx
@@ -2,19 +2,22 @@ import { useEffect, useState } from 'react';
 
 export const useGeoBlocked = () => {
   const [isBlocked, setIsBlocked] = useState(false);
-
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     const checkBlocked = async () => {
       const blocked = await fetch(`${window.location.href}api/geoblock`)
         .then((res) => res.json())
         .then((res) => res.blocked)
         .catch(() => false);
       setIsBlocked(blocked);
+      setLoading(false);
     };
     checkBlocked();
   }, []);
 
   return {
     isBlocked,
+    loading,
   };
 };