Add forceAllowConnect so users can still connect on the `verify_sta…

…tus` page.

Remove the rest of the `geoblocked` prop drilling

src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx

@@ -1,12 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
-
 import { MobileMenuInner, MobileMenuWrapper, StyledMotion } from "./styled";
 import { EXTERNAL_LINK_PROPS, Link } from "components/link";
 import { MobileSocialLinks } from "./components/mobile-social-links";
 import { MobileMenuItem } from "../index";
-
 import { type MobileMenuProps } from "./types";
-
 import { slideVariants } from "./animations";
 import ButtonWithConnectWalletFallback from "components/header/wallet-button/ConnectWalletButton";
 import { useAptos } from "context/wallet-context/AptosContextProvider";
@@ -26,7 +23,6 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
   isOpen,
   setIsOpen,
   linksForCurrentPage,
-  geoblocked,
 }) => {
   const { wallet, account, disconnect } = useWallet();
   const { copyAddress } = useAptos();
@@ -96,7 +92,6 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
       <MobileMenuWrapper>
         <MobileMenuInner>
           <ButtonWithConnectWalletFallback
-            geoblocked={geoblocked}
             className="w-full"
             mobile={true}
             onClick={subMenuOnClick}

src/typescript/frontend/src/components/header/components/mobile-menu/types.ts

@@ -4,5 +4,4 @@ export interface MobileMenuProps {
   isOpen: boolean;
   setIsOpen: (arg: boolean) => void;
   linksForCurrentPage: (typeof NAVIGATE_LINKS)[number][];
-  geoblocked: boolean;
 }

src/typescript/frontend/src/components/header/index.tsx

@@ -20,13 +20,15 @@ import { useSearchParams } from "next/navigation";
 import Link, { type LinkProps } from "next/link";
 import { useEmojiPicker } from "context/emoji-picker-context";
 import { GeoblockedBanner } from "components/geoblocking";
+import useIsUserGeoblocked from "@hooks/use-is-user-geoblocked";
 
 const Header = ({ isOpen, setIsOpen }: HeaderProps) => {
   const { isDesktop } = useMatchBreakpoints();
   const { t } = translationFunction();
   const searchParams = useSearchParams();
   const linksForCurrentPage = NAVIGATE_LINKS;
   const clear = useEmojiPicker((s) => s.clear);
+  const geoblocked = useIsUserGeoblocked();
 
   const [offsetHeight, setOffsetHeight] = useState(0);
 
@@ -96,7 +98,7 @@ const Header = ({ isOpen, setIsOpen }: HeaderProps) => {
                   </Link>
                 );
               })}
-              <ButtonWithConnectWalletFallback geoblocked={geoblocked}>
+              <ButtonWithConnectWalletFallback>
                 <WalletDropdownMenu />
               </ButtonWithConnectWalletFallback>
             </FlexGap>
@@ -109,12 +111,7 @@ const Header = ({ isOpen, setIsOpen }: HeaderProps) => {
           )}
         </Flex>
       </Container>
-      <MobileMenu
-        geoblocked={geoblocked}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        linksForCurrentPage={linksForCurrentPage}
-      />
+      <MobileMenu isOpen={isOpen} setIsOpen={setIsOpen} linksForCurrentPage={linksForCurrentPage} />
       {geoblocked && <GeoblockedBanner />}
     </StyledContainer>
   );

src/typescript/frontend/src/components/header/wallet-button/ConnectWalletButton.tsx

@@ -16,6 +16,7 @@ export interface ConnectWalletProps extends PropsWithChildren<{ className?: stri
   mobile?: boolean;
   onClick?: () => void;
   arrow?: boolean;
+  forceAllowConnect?: boolean;
 }
 
 const CONNECT_WALLET = "Connect Wallet";
@@ -26,11 +27,18 @@ export const ButtonWithConnectWalletFallback: React.FC<ConnectWalletProps> = ({
   className,
   onClick,
   arrow = true,
+  forceAllowConnect,
 }) => {
   const { connected, account } = useWallet();
   const { openWalletModal } = useWalletModal();
   const { t } = translationFunction();
-  const geoblocked = useIsUserGeoblocked();
+  const _geoblocked = useIsUserGeoblocked();
+  const geoblocked = useMemo(() => {
+  // For letting the user connect on the `/verify_status` page when `forceAllowConnect` is `true`,
+  // by only returning `geoblocked = true` if we're not force allow connecting and they're
+  // geoblocked.
+    return !forceAllowConnect && _geoblocked;
+  }, [_geoblocked]);
 
   const [enabled, setEnabled] = useState(false);
 

src/typescript/frontend/src/components/pages/emojicoin/components/desktop-grid/index.tsx

@@ -44,15 +44,14 @@ const DesktopGrid = (props: GridProps) => {
             </StyledBlockWrapper>
           </StyledBlock>
           <StyledBlock width="43%">
-            <LiquidityButton geoblocked={props.geoblocked} data={props.data} />
+            <LiquidityButton data={props.data} />
 
             <StyledBlockWrapper>
               <SwapComponent
                 emojicoin={props.data.symbolData.symbol}
                 marketAddress={props.data.marketView.metadata.marketAddress}
                 marketEmojis={props.data.symbolEmojis}
                 initNumSwaps={props.data.swaps.length}
-                geoblocked={props.geoblocked}
               />
             </StyledBlockWrapper>
           </StyledBlock>
@@ -79,7 +78,7 @@ const DesktopGrid = (props: GridProps) => {
             </StyledContentHeader>
 
             <StyledBlockWrapper>
-              <ChatBox geoblocked={props.geoblocked} data={props.data} />
+              <ChatBox data={props.data} />
             </StyledBlockWrapper>
           </StyledBlock>
         </StyledContentColumn>

src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/LiquidityButton.tsx

@@ -33,7 +33,7 @@ export const LiquidityButton = (props: GridProps) => {
         </StyledContentHeader>
       ) : canTrade ? (
         <StyledContentHeader className="!p-0">
-          <AnimatedProgressBar geoblocked={props.geoblocked} data={props.data} />
+          <AnimatedProgressBar data={props.data} />
         </StyledContentHeader>
       ) : (
         <StyledContentHeader>

src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx

@@ -77,7 +77,6 @@ export const MemoizedLaunchAnimation = ({ loading }: { loading: boolean }) => {
           <div className="flex relative mb-1">
             <div className="flex flex-col grow relative w-full">
               <EmojiPickerWithInput
-                geoblocked={geoblocked}
                 handleClick={handleClick}
                 inputClassName="!border !border-solid !border-light-gray rounded-md !flex-row-reverse pl-3 pr-1.5"
                 inputGroupProps={{ label: "Select Emojis", scale: "xm" }}

src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx

@@ -298,7 +298,7 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
           mb={{ _: "17px", tablet: "37px" }}
           position="relative"
         >
-          <ButtonWithConnectWalletFallback geoblocked={geoblocked}>
+          <ButtonWithConnectWalletFallback>
             <Button
               scale="lg"
               disabled={!isActionPossible}

src/typescript/frontend/src/components/pages/verify_status/VerifyStatusPage.tsx

@@ -61,7 +61,7 @@ export const ClientVerifyPage = () => {
                 <span>Disconnect Wallet</span>
               </motion.div>
             )}
-            <ButtonWithConnectWalletFallback geoblocked={false} arrow={false}>
+            <ButtonWithConnectWalletFallback forceAllowConnect={true} arrow={false}>
               <div className="flex flex-col uppercase mt-[20ch] gap-1">
                 <div>
                   Wallet address:{" "}