Fix geo blocking (#1450)

* fix: network env should come from a single source

* feat: geo block BABY staking

Author: jrwbabylonlab

.github/CODEOWNERS

@@ -1 +1 @@
-* @0xDazzer @jonybur @jeremy-babylonlabs @jrwbabylonlab @gbarkhatov
+* @jonybur @jeremy-babylonlabs @jrwbabylonlab @gbarkhatov

src/infrastructure/babylon.ts

@@ -1,12 +1,13 @@
 import { createLCDClient, txs, utils } from "@babylonlabs-io/babylon-proto-ts";
 
-import config from "./config";
+import { getNetworkConfigBBN } from "@/ui/common/config/network/bbn";
 
 let clientInstance: Awaited<ReturnType<typeof createLCDClient>> | null = null;
 
 export const getBabylonClient = async () => {
   if (!clientInstance) {
-    clientInstance = await createLCDClient({ url: config.babylon.lcdUrl });
+    const networkConfig = getNetworkConfigBBN();
+    clientInstance = await createLCDClient({ url: networkConfig.lcdUrl });
   }
   return clientInstance;
 };

src/infrastructure/config.ts

@@ -1,3 +1,5 @@
+// TODO: Below config is not in use yet.
+// This is a placeholder for future code refactoring purposes.
 export default {
   api: {
     baseUrl:

src/ui/baby/hooks/services/usePendingOperationsService.tsx

@@ -7,6 +7,7 @@ import {
   useState,
 } from "react";
 
+import { network } from "@/ui/common/config/network/bbn";
 import { useCosmosWallet } from "@/ui/common/context/wallet/CosmosWalletProvider";
 import { useLogger } from "@/ui/common/hooks/useLogger";
 
@@ -27,7 +28,7 @@ interface PendingOperationStorage {
 }
 
 const getPendingOperationsKey = (walletAddress: string) =>
-  `baby-pending-operations-${walletAddress}`;
+  `baby-pending-operations-${network}-${walletAddress}`;
 
 // Create the context
 const PendingOperationsContext = createContext<ReturnType<
@@ -167,13 +168,13 @@ function usePendingOperationsServiceInternal() {
   // Cleanup function to remove all pending operations from localStorage when epoch changes
   const cleanupAllPendingOperationsFromStorage = useCallback(() => {
     try {
-      // Get all localStorage keys that match our pattern
+      // Get all localStorage keys that match our pattern for the current network
       const allKeys = Object.keys(localStorage);
       const pendingOperationKeys = allKeys.filter((key) =>
-        key.startsWith("baby-pending-operations-"),
+        key.startsWith(`baby-pending-operations-${network}-`),
       );
 
-      // Remove all pending operations for all wallet addresses
+      // Remove all pending operations for all wallet addresses on the current network
       pendingOperationKeys.forEach((storageKey) => {
         localStorage.removeItem(storageKey);
       });

src/ui/baby/layout.tsx

@@ -23,41 +23,31 @@ import StakingForm from "./widgets/StakingForm";
 type TabId = "stake" | "activity" | "rewards";
 
 export default function BabyLayout() {
+  return (
+    <PendingOperationsProvider>
+      <BabyLayoutContent />
+    </PendingOperationsProvider>
+  );
+}
+
+function BabyLayoutContent() {
   const [activeTab, setActiveTab] = useState<TabId>("stake");
   const { connected } = useWalletConnect();
   const { isGeoBlocked, isLoading } = useHealthCheck();
   const { bech32Address } = useCosmosWallet();
   const isConnected = connected && !isGeoBlocked && !isLoading;
+  useEffect(() => {
+    if (!connected) {
+      setActiveTab("stake");
+    }
+  }, [connected]);
 
-  return (
-    <PendingOperationsProvider>
-      <BabyLayoutContent
-        activeTab={activeTab}
-        setActiveTab={setActiveTab}
-        isConnected={isConnected}
-        bech32Address={bech32Address}
-        connected={connected}
-        isGeoBlocked={isGeoBlocked}
-      />
-    </PendingOperationsProvider>
-  );
-}
+  useEffect(() => {
+    if (isGeoBlocked && (activeTab === "activity" || activeTab === "rewards")) {
+      setActiveTab("stake");
+    }
+  }, [isGeoBlocked, activeTab]);
 
-function BabyLayoutContent({
-  activeTab,
-  setActiveTab,
-  isConnected,
-  bech32Address,
-  connected,
-  isGeoBlocked,
-}: {
-  activeTab: TabId;
-  setActiveTab: (tab: TabId) => void;
-  isConnected: boolean;
-  bech32Address: string | undefined;
-  connected: boolean;
-  isGeoBlocked: boolean;
-}) {
   // Enable epoch polling to refetch delegations when epoch changes
   useEpochPolling(bech32Address);
 
@@ -89,23 +79,11 @@ function BabyLayoutContent({
     );
   };
 
-  useEffect(() => {
-    if (!connected) {
-      setActiveTab("stake");
-    }
-  }, [connected, setActiveTab]);
-
-  useEffect(() => {
-    if (isGeoBlocked && (activeTab === "activity" || activeTab === "rewards")) {
-      setActiveTab("stake");
-    }
-  }, [isGeoBlocked, activeTab, setActiveTab]);
-
   const tabItems = [
     {
       id: "stake",
       label: "Stake",
-      content: <StakingForm />,
+      content: <StakingForm isGeoBlocked={isGeoBlocked} />,
     },
     ...(isConnected
       ? [
@@ -131,7 +109,7 @@ function BabyLayoutContent({
     {
       id: "stake",
       label: "Stake",
-      content: <StakingForm />,
+      content: <StakingForm isGeoBlocked={isGeoBlocked} />,
     },
   ];
 
@@ -150,7 +128,7 @@ function BabyLayoutContent({
         <DelegationState>
           <RewardState>
             <Content>
-              <AuthGuard fallback={fallbackContent}>
+              <AuthGuard fallback={fallbackContent} geoBlocked={isGeoBlocked}>
                 <Container
                   as="main"
                   className="flex flex-col gap-[3rem] pb-16 max-w-[760px] mx-auto flex-1"

src/ui/baby/widgets/StakingForm/index.tsx

@@ -6,14 +6,21 @@ import { useStakingState } from "@/ui/baby/state/StakingState";
 import { StakingModal } from "@/ui/baby/widgets/StakingModal";
 import { SubmitButton } from "@/ui/baby/widgets/SubmitButton";
 import { ValidatorField } from "@/ui/baby/widgets/ValidatorField";
+import { FormAlert } from "@/ui/common/components/Multistaking/MultistakingForm/FormAlert";
 
 interface FormFields {
   amount: number;
   validatorAddresses: string[];
   feeAmount: number;
 }
 
-export default function StakingForm() {
+interface StakingFormProps {
+  isGeoBlocked?: boolean;
+}
+
+export default function StakingForm({
+  isGeoBlocked = false,
+}: StakingFormProps) {
   const {
     loading,
     formSchema,
@@ -41,8 +48,9 @@ export default function StakingForm() {
       <ValidatorField />
       <FeeField babyPrice={babyPrice} calculateFee={calculateFee} />
 
-      <SubmitButton disabled={loading} />
+      <SubmitButton disabled={loading} isGeoBlocked={isGeoBlocked} />
       <StakingModal />
+      <FormAlert address={undefined} isGeoBlocked={isGeoBlocked} />
     </Form>
   );
 }

src/ui/baby/widgets/SubmitButton/index.tsx

@@ -6,20 +6,28 @@ import { AuthGuard } from "@/ui/common/components/Common/AuthGuard";
 
 interface SubmitButton {
   disabled?: boolean;
+  isGeoBlocked?: boolean;
   onClick?: () => void;
 }
 
-export function SubmitButton({ disabled = false, onClick }: SubmitButton) {
+export function SubmitButton({
+  disabled = false,
+  isGeoBlocked = false,
+  onClick,
+}: SubmitButton) {
   const { isValid, errors } = useFormState();
   const { fields } = useStakingState();
   const errorField = fields.find((fieldName) => errors[fieldName]);
 
   return (
-    <AuthGuard fallback={<ConnectButton disabled={disabled} />}>
+    <AuthGuard
+      geoBlocked={isGeoBlocked}
+      fallback={<ConnectButton disabled={disabled || isGeoBlocked} />}
+    >
       <Button
         //@ts-expect-error - fix type issue in core-ui
         type="submit"
-        disabled={!isValid || disabled}
+        disabled={disabled || !isValid}
         className="w-full mt-2 capitalize disabled:!text-accent-primary disabled:!bg-accent-primary/10"
         onClick={onClick}
       >

src/ui/baby/widgets/ValidatorField/index.tsx

@@ -59,7 +59,7 @@ export function ValidatorField() {
   return (
     <>
       <ListSubsection
-        title="Selected Validator"
+        title="Select Validator"
         max={1}
         items={selectedValidators}
         renderItem={(item) => <ValidatorItem name={item.name} />}

src/ui/common/components/Common/AuthGuard/index.tsx

@@ -5,16 +5,18 @@ import { useAuthGuard } from "@/ui/common/hooks/useAuthGuard";
 interface AuthGuardProps {
   fallback?: ReactNode;
   spinner?: ReactNode;
+  geoBlocked?: boolean;
 }
 
 export function AuthGuard({
   children,
   fallback,
   spinner,
+  geoBlocked,
 }: PropsWithChildren<AuthGuardProps>) {
   const { connected, loading } = useAuthGuard();
 
-  if (!connected) {
+  if (!connected || geoBlocked) {
     return loading ? spinner : fallback;
   }
 

src/ui/common/components/Multistaking/MultistakingForm/FormAlert.tsx

@@ -2,21 +2,17 @@ import { MdErrorOutline } from "react-icons/md";
 
 import { Alert } from "@/ui/common/components/Alerts/Alert";
 import { STAKING_DISABLED } from "@/ui/common/constants";
+import { GEO_BLOCK_MESSAGE } from "@/ui/common/types/services/healthCheck";
 
 interface FormAlertProps {
   address: string | undefined;
   isGeoBlocked: boolean;
-  geoBlockMessage: string | undefined;
 }
 
-export const FormAlert = ({
-  address,
-  isGeoBlocked,
-  geoBlockMessage,
-}: FormAlertProps) => {
+export const FormAlert = ({ address, isGeoBlocked }: FormAlertProps) => {
   const stakingDisabledMessage = (
     <>
-      The Babylon network is temporarily halted. New stakes are paused until the
+      The Babylon network is under maintenance. New stakes are paused until the
       network resumes.
     </>
   );
@@ -39,7 +35,7 @@ export const FormAlert = ({
           )
         }
       >
-        {isGeoBlocked ? geoBlockMessage : stakingDisabledMessage}
+        {isGeoBlocked ? GEO_BLOCK_MESSAGE : stakingDisabledMessage}
       </Alert>
     </div>
   );