add geo-block handling

Author: jeremy-babylonlabs

src/app/components/Delegations/Delegation.tsx

@@ -4,6 +4,7 @@ import { FaBitcoin } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { Tooltip } from "react-tooltip";
 
+import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { DelegationState, StakingTx } from "@/app/types/delegations";
 import { GlobalParamsVersion } from "@/app/types/globalParams";
 import { getNetworkConfig } from "@/config/network.config";
@@ -43,6 +44,7 @@ export const Delegation: React.FC<DelegationProps> = ({
 }) => {
   const { startTimestamp } = stakingTx;
   const [currentTime, setCurrentTime] = useState(Date.now());
+  const { isApiNormal, isGeoBlocked } = useHealthCheck();
 
   useEffect(() => {
     const timerId = setInterval(() => {
@@ -162,9 +164,11 @@ export const Delegation: React.FC<DelegationProps> = ({
             <Tooltip id={`tooltip-${stakingTxHash}`} className="tooltip-wrap" />
           </div>
         </div>
-        <div className="relative flex justify-end lg:justify-center order-5">
-          <DelegationPoints stakingTxHash={stakingTxHash} />
-        </div>
+        {!isApiNormal && !isGeoBlocked && (
+          <div className="relative flex justify-end lg:justify-center order-5">
+            <DelegationPoints stakingTxHash={stakingTxHash} />
+          </div>
+        )}
         <div className="order-6">{generateActionButton()}</div>
       </div>
     </div>

src/app/components/Points/DelegationPoints.tsx

@@ -11,7 +11,7 @@ export const DelegationPoints: React.FC<DelegationPointsProps> = ({
   stakingTxHash,
 }) => {
   const { delegationPoints, isLoading } = useDelegationsPoints();
-  const isMobile = useMediaQuery("(max-width:1023px)");
+  const isMobile = useMediaQuery("(max-width:1000px)");
 
   const points = delegationPoints.get(stakingTxHash);
 

src/app/components/Summary/Summary.tsx

@@ -5,6 +5,7 @@ import { Tooltip } from "react-tooltip";
 
 import { useGlobalParams } from "@/app/context/api/GlobalParamsProvider";
 import { useBtcHeight } from "@/app/context/mempool/BtcHeightProvider";
+import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
 import {
@@ -36,6 +37,7 @@ export const Summary: React.FC<SummaryProps> = ({
 
   const btcHeight = useBtcHeight();
   const globalParams = useGlobalParams();
+  const { isApiNormal, isGeoBlocked } = useHealthCheck();
 
   useMemo(() => {
     if (!btcHeight || !globalParams.data) {
@@ -76,23 +78,30 @@ export const Summary: React.FC<SummaryProps> = ({
               </p>
             </div>
           </div>
-          <div className="divider xl:divider-horizontal xl:mx-4 my-0" />
-          <div className="flex flex-1 flex-col gap-2 text-sm xl:items-center">
-            <div className="flex items-center gap-1">
-              <p className="dark:text-neutral-content">Total points</p>
-              <span
-                className="cursor-pointer text-xs"
-                data-tooltip-id={"tooltip-total-points"}
-                data-tooltip-content={`The points measure your staking activities based on your BTC public key. Please check FAQ for further info.`}
-              >
-                <AiOutlineInfoCircle />
-              </span>
-              <Tooltip id={"tooltip-total-points"} className="tooltip-wrap" />
-            </div>
-            <div className="flex items-center gap-1">
-              <StakerPoints publicKeyNoCoord={publicKeyNoCoord} />
-            </div>
-          </div>
+          {isApiNormal && !isGeoBlocked && (
+            <>
+              <div className="divider xl:divider-horizontal xl:mx-4 my-0" />
+              <div className="flex flex-1 flex-col gap-2 text-sm xl:items-center">
+                <div className="flex items-center gap-1">
+                  <p className="dark:text-neutral-content">Total points</p>
+                  <span
+                    className="cursor-pointer text-xs"
+                    data-tooltip-id={"tooltip-total-points"}
+                    data-tooltip-content={`The points measure your staking activities based on your BTC public key. Please check FAQ for further info.`}
+                  >
+                    <AiOutlineInfoCircle />
+                  </span>
+                  <Tooltip
+                    id={"tooltip-total-points"}
+                    className="tooltip-wrap"
+                  />
+                </div>
+                <div className="flex items-center gap-1">
+                  <StakerPoints publicKeyNoCoord={publicKeyNoCoord} />
+                </div>
+              </div>
+            </>
+          )}
           <div className="divider xl:divider-horizontal xl:mx-4 my-0" />
           <div className="flex flex-1 flex-col gap-1 text-sm xl:items-center">
             <div className="flex items-center gap-1">

src/app/context/api/DelegationsPointsProvider.tsx

@@ -5,6 +5,7 @@ import {
   getDelegationPointsByStakingTxHashHexes,
   PaginatedDelegationsPoints,
 } from "@/app/api/getDelegationPoints";
+import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { Delegation } from "@/app/types/delegations";
 
 interface PointsContextType {
@@ -40,6 +41,7 @@ export const DelegationsPointsProvider: React.FC<
   const [delegationPoints, setDelegationPoints] = useState<Map<string, number>>(
     new Map(),
   );
+  const { isApiNormal, isGeoBlocked } = useHealthCheck();
 
   const fetchAllPoints = async () => {
     let allPoints: PaginatedDelegationsPoints["data"] = [];
@@ -64,7 +66,11 @@ export const DelegationsPointsProvider: React.FC<
   const { data, isLoading, error } = useQuery({
     queryKey: ["delegationPoints", publicKeyNoCoord, delegationsAPI],
     queryFn: fetchAllPoints,
-    enabled: isWalletConnected && delegationsAPI.length > 0,
+    enabled:
+      isWalletConnected &&
+      delegationsAPI.length > 0 &&
+      isApiNormal &&
+      !isGeoBlocked,
     refetchInterval: 60000, // Refetch every 60 seconds
     refetchOnWindowFocus: false,
   });