feat: hide points if the config url is not present (#168)

* feat: hide points if the config url is not present --------- Co-authored-by: jeremy-babylonchain <[email protected]>
babylonlabs-io · Sep 26, 2024 · e50d63e · e50d63e
1 parent 2c2c1a8
commit e50d63e
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ where,
 - `NEXT_PUBLIC_API_URL` specifies the back-end API to use for the staking
   system queries
 - `NEXT_PUBLIC_POINTS_API_URL` specifies the Points API to use for the points
-  system
+  system (Optional)
 - `NEXT_PUBLIC_NETWORK` specifies the BTC network environment
 - `NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES` boolean value to indicate whether display 
 testing network related message. Default to true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
@@ -7,6 +7,7 @@ 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 { shouldDisplayPoints } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
 import { durationTillNow } from "@/utils/formatTime";
@@ -45,6 +46,8 @@ export const Delegation: React.FC<DelegationProps> = ({
   const { startTimestamp } = stakingTx;
   const [currentTime, setCurrentTime] = useState(Date.now());
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
+  const shouldShowPoints =
+    isApiNormal && !isGeoBlocked && shouldDisplayPoints();
 
   useEffect(() => {
     const timerId = setInterval(() => {
@@ -126,7 +129,9 @@ export const Delegation: React.FC<DelegationProps> = ({
           <p>overflow</p>
         </div>
       )}
-      <div className="grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row lg:grid-cols-6 lg:grid-rows-1">
+      <div
+        className={`grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row ${shouldShowPoints ? "lg:grid-cols-6" : "lg:grid-cols-5"} lg:grid-rows-1`}
+      >
         <div className="flex gap-1 items-center order-1">
           <FaBitcoin className="text-primary" />
           <p>
@@ -164,11 +169,10 @@ export const Delegation: React.FC<DelegationProps> = ({
             <Tooltip id={`tooltip-${stakingTxHash}`} className="tooltip-wrap" />
           </div>
         </div>
-        {isApiNormal && !isGeoBlocked && (
-          <div className="relative flex justify-end lg:justify-center order-5">
-            <DelegationPoints stakingTxHash={stakingTxHash} />
-          </div>
-        )}
+        <DelegationPoints
+          stakingTxHash={stakingTxHash}
+          className="relative flex justify-end lg:justify-center order-5"
+        />
         <div className="order-6">{generateActionButton()}</div>
       </div>
     </div>

diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/app/types/delegations";
 import { ErrorState } from "@/app/types/errors";
 import { GlobalParamsVersion } from "@/app/types/globalParams";
+import { shouldDisplayPoints } from "@/config";
 import { signUnbondingTx } from "@/utils/delegations/signUnbondingTx";
 import { signWithdrawalTx } from "@/utils/delegations/signWithdrawalTx";
 import { getIntermediateDelegationsLocalStorageKey } from "@/utils/local_storage/getIntermediateDelegationsLocalStorageKey";
@@ -100,6 +101,8 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);
 
+  const shouldShowPoints =
+    isApiNormal && !isGeoBlocked && shouldDisplayPoints();
   // Local storage state for intermediate delegations (withdrawing, unbonding)
   const intermediateDelegationsLocalStorageKey =
     getIntermediateDelegationsLocalStorageKey(publicKeyNoCoord);
@@ -279,14 +282,14 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
         </div>
       ) : (
         <>
-          <div className="hidden grid-cols-6 gap-2 px-4 lg:grid">
+          <div
+            className={`hidden ${shouldShowPoints ? "grid-cols-6" : "grid-cols-5"} gap-2 px-4 lg:grid`}
+          >
             <p>Amount</p>
             <p>Inception</p>
             <p className="text-center">Transaction hash</p>
             <p className="text-center">Status</p>
-            {isApiNormal && !isGeoBlocked && (
-              <p className="text-center">Points</p>
-            )}
+            {shouldShowPoints && <p className="text-center">Points</p>}
             <p>Action</p>
           </div>
           <div
@@ -307,7 +310,6 @@ const DelegationsContent: React.FC<DelegationsProps> = ({
                   stakingValueSat,
                   stakingTx,
                   stakingTxHashHex,
-                  finalityProviderPkHex,
                   state,
                   isOverflow,
                 } = delegation;

diff --git a/src/app/components/Points/DelegationPoints.tsx b/src/app/components/Points/DelegationPoints.tsx
@@ -2,41 +2,53 @@ import React from "react";
 import { NumericFormat } from "react-number-format";
 
 import { useDelegationsPoints } from "@/app/context/api/DelegationsPointsProvider";
+import { useHealthCheck } from "@/app/hooks/useHealthCheck";
+import { shouldDisplayPoints } from "@/config";
 
 interface DelegationPointsProps {
   stakingTxHash: string;
+  className?: string;
 }
 
 export const DelegationPoints: React.FC<DelegationPointsProps> = ({
   stakingTxHash,
+  className,
 }) => {
+  const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const { delegationPoints, isLoading } = useDelegationsPoints();
+  // Early return if the API is not normal or the user is geo-blocked
+  if (!isApiNormal || isGeoBlocked || !shouldDisplayPoints()) {
+    return null;
+  }
 
   const points = delegationPoints.get(stakingTxHash);
-
   if (isLoading) {
     return (
-      <div className="flex items-center justify-end gap-1">
-        <div className="h-5 w-12 animate-pulse rounded bg-gray-300 dark:bg-gray-700"></div>
+      <div className={className}>
+        <div className="flex items-center justify-end gap-1">
+          <div className="h-5 w-12 animate-pulse rounded bg-gray-300 dark:bg-gray-700"></div>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="flex items-center justify-end gap-1">
-      <p className="whitespace-nowrap">
-        <span className="lg:hidden">Points: </span>
-        {points !== undefined ? (
-          <NumericFormat
-            value={points.toFixed(3)}
-            displayType="text"
-            thousandSeparator=","
-            decimalSeparator="."
-          />
-        ) : (
-          "n.a."
-        )}
-      </p>
+    <div className={className}>
+      <div className="flex items-center justify-end gap-1">
+        <p className="whitespace-nowrap">
+          <span className="lg:hidden">Points: </span>
+          {points !== undefined ? (
+            <NumericFormat
+              value={points.toFixed(3)}
+              displayType="text"
+              thousandSeparator=","
+              decimalSeparator="."
+            />
+          ) : (
+            "n.a."
+          )}
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx
@@ -6,6 +6,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 { shouldDisplayPoints } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
 import {
@@ -79,7 +80,7 @@ export const Summary: React.FC<SummaryProps> = ({
                 </p>
               </div>
             </div>
-            {isApiNormal && !isGeoBlocked && (
+            {isApiNormal && !isGeoBlocked && shouldDisplayPoints() && (
               <>
                 <div className="divider xl:divider-horizontal xl:mx-4 my-0" />
                 <div className="flex flex-1 gap-2 text-sm flex-col xl:flex-row xl:items-center justify-start xl:justify-between">

diff --git a/src/app/context/api/DelegationsPointsProvider.tsx b/src/app/context/api/DelegationsPointsProvider.tsx
@@ -4,6 +4,7 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 import { getDelegationPointsByStakingTxHashHexes } from "@/app/api/getPoints";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { Delegation } from "@/app/types/delegations";
+import { shouldDisplayPoints } from "@/config";
 
 interface PointsContextType {
   delegationPoints: Map<string, number>;
@@ -78,7 +79,8 @@ export const DelegationsPointsProvider: React.FC<
       isWalletConnected &&
       delegationsAPI.length > 0 &&
       isApiNormal &&
-      !isGeoBlocked,
+      !isGeoBlocked &&
+      shouldDisplayPoints(),
     refetchInterval: 300000, // Refetch every 5 minutes
     refetchOnWindowFocus: false,
     retry: 1,

diff --git a/src/config/index.ts b/src/config/index.ts
@@ -12,3 +12,9 @@ export const getNetworkAppUrl = (): string => {
     ? "https://btcstaking.testnet.babylonchain.io"
     : "https://btcstaking.babylonlabs.io";
 };
+
+// shouldDisplayPoints function is used to check if the application should
+// display points or not based on the existence of the environment variable.
+export const shouldDisplayPoints = (): boolean => {
+  return !!process.env.NEXT_PUBLIC_POINTS_API_URL;
+};