Merge remote-tracking branch 'origin/master' into hs-ltv-graph

earn/src/App.tsx

@@ -10,7 +10,7 @@ import WagmiProvider from 'shared/lib/components/WagmiProvider';
 import { AccountRiskResult } from 'shared/lib/data/AccountRisk';
 import { screenAddress } from 'shared/lib/data/AccountRisk';
 import { DEFAULT_CHAIN, PRIVACY_POLICY_URL, TERMS_OF_SERVICE_URL } from 'shared/lib/data/constants/Values';
-import { fetchGeoFencing, GeoFencingResponse } from 'shared/lib/data/GeoFencing';
+import { fetchGeoFencing, GeoFencingInfo } from 'shared/lib/data/GeoFencing';
 import { AccountRiskContext, useAccountRisk } from 'shared/lib/data/hooks/UseAccountRisk';
 import { useChainDependentState } from 'shared/lib/data/hooks/UseChainDependentState';
 import useEffectOnce from 'shared/lib/data/hooks/UseEffectOnce';
@@ -168,7 +168,10 @@ function AppBodyWrapper() {
 function App() {
   const [activeChain, setActiveChain] = React.useState<Chain>(DEFAULT_CHAIN);
   const [accountRisk, setAccountRisk] = useSafeState<AccountRiskResult>({ isBlocked: false, isLoading: true });
-  const [geoFencingResponse, setGeoFencingResponse] = React.useState<GeoFencingResponse | null>(null);
+  const [geoFencingInfo, setGeoFencingInfo] = useSafeState<GeoFencingInfo>({
+    isAllowed: false,
+    isLoading: true,
+  });
   const [lendingPairs, setLendingPairs] = useChainDependentState<LendingPair[] | null>(null, activeChain.id);
 
   const { address: userAddress } = useAccount();
@@ -177,16 +180,13 @@ function App() {
   const value = { activeChain, setActiveChain };
 
   useEffectOnce(() => {
-    let mounted = true;
     (async () => {
       const result = await fetchGeoFencing();
-      if (mounted) {
-        setGeoFencingResponse(result);
-      }
+      setGeoFencingInfo({
+        isAllowed: result.isAllowed,
+        isLoading: false,
+      });
     })();
-    return () => {
-      mounted = false;
-    };
   });
 
   useEffect(() => {
@@ -220,7 +220,7 @@ function App() {
       <Suspense fallback={null}>
         <WagmiProvider>
           <AccountRiskContext.Provider value={accountRisk}>
-            <GeoFencingContext.Provider value={geoFencingResponse}>
+            <GeoFencingContext.Provider value={geoFencingInfo}>
               <ChainContext.Provider value={value}>
                 <LendingPairsContext.Provider value={lendingPairs}>
                   <ScrollToTop />

earn/src/data/hooks/UseAvailablePools.ts

@@ -46,7 +46,7 @@ export default function useAvailablePools() {
           const poolContract = new ethers.Contract(addr, uniswapV3PoolAbi, provider);
           return Promise.all([poolContract.token0(), poolContract.token1(), poolContract.fee()]);
         })
-      );
+      ); // TODO: multicall
 
       const poolInfoMap = new Map<string, UniswapPoolInfo>();
       poolAddresses.forEach((addr, i) => {

prime/src/App.tsx

@@ -10,7 +10,7 @@ import WagmiProvider from 'shared/lib/components/WagmiProvider';
 import { AccountRiskResult } from 'shared/lib/data/AccountRisk';
 import { screenAddress } from 'shared/lib/data/AccountRisk';
 import { DEFAULT_CHAIN, PRIVACY_POLICY_URL, TERMS_OF_SERVICE_URL } from 'shared/lib/data/constants/Values';
-import { fetchGeoFencing, GeoFencingResponse } from 'shared/lib/data/GeoFencing';
+import { fetchGeoFencing, GeoFencingInfo } from 'shared/lib/data/GeoFencing';
 import { AccountRiskContext, useAccountRisk } from 'shared/lib/data/hooks/UseAccountRisk';
 import useEffectOnce from 'shared/lib/data/hooks/UseEffectOnce';
 import { GeoFencingContext } from 'shared/lib/data/hooks/UseGeoFencing';
@@ -163,20 +163,20 @@ function App() {
   const [isChainLoading, setIsChainLoading] = React.useState(true);
   const [blockNumber, setBlockNumber] = React.useState<string | null>(null);
   const [accountRisk, setAccountRisk] = useSafeState<AccountRiskResult>({ isBlocked: false, isLoading: true });
-  const [geoFencingResponse, setGeoFencingResponse] = React.useState<GeoFencingResponse | null>(null);
+  const [geoFencingInfo, setGeoFencingInfo] = useSafeState<GeoFencingInfo>({
+    isAllowed: false,
+    isLoading: true,
+  });
   const { address: userAddress } = useAccount();
 
   useEffectOnce(() => {
-    let mounted = true;
     (async () => {
       const result = await fetchGeoFencing();
-      if (mounted) {
-        setGeoFencingResponse(result);
-      }
+      setGeoFencingInfo({
+        isAllowed: result.isAllowed,
+        isLoading: false,
+      });
     })();
-    return () => {
-      mounted = false;
-    };
   });
 
   useEffect(() => {
@@ -233,7 +233,7 @@ function App() {
       <Suspense fallback={null}>
         <WagmiProvider>
           <AccountRiskContext.Provider value={accountRisk}>
-            <GeoFencingContext.Provider value={geoFencingResponse}>
+            <GeoFencingContext.Provider value={geoFencingInfo}>
               <ChainContext.Provider value={value}>
                 <ScrollToTop />
                 <AppBodyWrapper />

prime/src/components/header/Header.tsx

@@ -44,7 +44,7 @@ export default function Header(props: HeaderProps) {
         activeChain={activeChain}
         checkboxes={checkboxes}
         setActiveChain={setActiveChain}
-        isAllowedToInteract={isAllowedToInteract}
+        isAllowedToInteract={isAllowedToInteract.isAllowed}
       />
     </Nav>
   );

prime/src/pages/BorrowAccountsPage.tsx

@@ -31,7 +31,7 @@ import { fetchMarginAccountPreviews, MarginAccountPreview, UniswapPoolInfo } fro
 
 export default function BorrowAccountsPage() {
   const { activeChain } = useContext(ChainContext);
-  const isAllowedToInteract = useGeoFencing(activeChain);
+  const { isAllowed: isAllowedToInteract, isLoading: isLoadingGeoFencing } = useGeoFencing(activeChain);
   // MARK: component state
   // --> transaction modals
   const [showConfirmModal, setShowConfirmModal] = useState(false);
@@ -228,6 +228,12 @@ export default function BorrowAccountsPage() {
     })
     .filter((opt) => opt !== null) as DropdownOption<string>[];
 
+  const loadingElement: JSX.Element = isAllowedToInteract ? (
+    <AltSpinner size='M' />
+  ) : (
+    <Display>Functionality unavailable in your jurisdiction</Display>
+  );
+
   return (
     <AppPage>
       <div className='flex gap-8 items-center mb-4'>
@@ -248,10 +254,8 @@ export default function BorrowAccountsPage() {
         </FilledGradientButtonWithIcon>
       </div>
       <div className='flex items-center justify-start flex-wrap gap-4'>
-        {isLoadingMarginAccounts ? (
-          <div className='flex items-center justify-center w-full'>
-            <AltSpinner size='M' />
-          </div>
+        {isLoadingMarginAccounts || isLoadingGeoFencing || !isAllowedToInteract ? (
+          <div className='flex items-center justify-center w-full'>{loadingElement}</div>
         ) : (
           <ActiveMarginAccounts marginAccounts={marginAccounts} accountAddress={accountAddress} />
         )}

prime/src/pages/BorrowActionsPage.tsx

@@ -167,7 +167,7 @@ type AccountParams = {
 
 export default function BorrowActionsPage() {
   const { activeChain } = useContext(ChainContext);
-  const isAllowedToInteract = useGeoFencing(activeChain);
+  const { isAllowed: isAllowedToInteract } = useGeoFencing(activeChain);
 
   const navigate = useNavigate();
   const params = useParams<AccountParams>();

shared/src/data/GeoFencing.ts

@@ -6,6 +6,10 @@ export type GeoFencingResponse = {
   isAllowed: boolean;
 };
 
+export type GeoFencingInfo = GeoFencingResponse & {
+  isLoading: boolean;
+};
+
 export async function fetchGeoFencing(): Promise<GeoFencingResponse> {
   if (isDappnet()) {
     return {

shared/src/data/hooks/UseGeoFencing.ts

@@ -1,12 +1,15 @@
 import { createContext, useContext } from 'react';
 import { isDevelopment } from '../../util/Utils';
 import { Chain } from 'wagmi';
-import { GeoFencingResponse } from '../GeoFencing';
+import { GeoFencingInfo } from '../GeoFencing';
 
-export const GeoFencingContext = createContext<GeoFencingResponse | null>(null);
+export const GeoFencingContext = createContext<GeoFencingInfo>({
+  isAllowed: false,
+  isLoading: true,
+});
 
 export function useGeoFencing(activeChain: Chain) {
   const ctxt = useContext(GeoFencingContext);
   const isDev = isDevelopment();
-  return isDev || ctxt?.isAllowed || Boolean(activeChain.testnet);
+  return { isAllowed: isDev || ctxt.isAllowed || Boolean(activeChain.testnet), isLoading: ctxt.isLoading };
 }