Sync from main to dev (#179)

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

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>

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;

src/app/components/FAQ/data/questions.ts

@@ -1,4 +1,4 @@
-import { shouldDisplayTestingMsg } from "@/config";
+import { shouldDisplayPoints, shouldDisplayTestingMsg } from "@/config";
 
 export interface Question {
   title: string;
@@ -94,11 +94,13 @@ export const questions = (
       title: "Are hardware wallets supported?",
       content: `<p>Keystone via QR code is the only hardware wallet supporting Bitcoin Staking. Using any other hardware wallet through any means (such as connection to a software/extension/mobile wallet) can lead to permanent inability to withdraw the stake.</p>`,
     },
-    {
-      title: "What are the points?",
-      content: `<p>We use points to track staking activity. Points are not blockchain tokens. Points do not, and may never, convert to, accrue to, be used as a basis to calculate, or become tokens, other digital assets, or distributions thereof. Points are virtual calculations with no monetary value. Points do not constitute any currency or property of any type and are not redeemable, refundable, or transferable.</p>`,
-    },
   ];
+  if (shouldDisplayPoints()) {
+    questionList.push({
+      title: "What are the points for?",
+      content: `<p>We use points to track staking activity. Points are not blockchain tokens. Points do not, and may never, convert to, accrue to, be used as a basis to calculate, or become tokens, other digital assets, or distributions thereof. Points are virtual calculations with no monetary value. Points do not constitute any currency or property of any type and are not redeemable, refundable, or transferable.</p>`,
+    });
+  }
   if (shouldDisplayTestingMsg()) {
     questionList.push({
       title: "What is the goal of this testnet?",

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>
   );
 };

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 {
@@ -81,7 +82,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">

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,

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;
+};