diff --git a/README.md b/README.md index 03db1c9d..9b97fce3 100644 --- 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 index a54c9859..e92f5988 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "simple-staking", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "simple-staking", - "version": "0.3.0", + "version": "0.3.1", "dependencies": { "@babylonlabs-io/btc-staking-ts": "0.3.0", "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3", diff --git a/package.json b/package.json index 8b8a1e0c..b35f0c10 100644 --- 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 index 310a8724..05e7fb81 100644 --- 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 = ({ 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 = ({

overflow

)} -
+

@@ -164,11 +169,10 @@ export const Delegation: React.FC = ({

- {isApiNormal && !isGeoBlocked && ( -
- -
- )} +
{generateActionButton()}
diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx index f2282ac4..17a31e3b 100644 --- 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 = ({ 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 = ({ ) : ( <> -
+

Amount

Inception

Transaction hash

Status

- {isApiNormal && !isGeoBlocked && ( -

Points

- )} + {shouldShowPoints &&

Points

}

Action

= ({ stakingValueSat, stakingTx, stakingTxHashHex, - finalityProviderPkHex, state, isOverflow, } = delegation; diff --git a/src/app/components/Points/DelegationPoints.tsx b/src/app/components/Points/DelegationPoints.tsx index e9b1cc39..43c7b78c 100644 --- 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 = ({ 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 ( -
-
+
+
+
+
); } return ( -
-

- Points: - {points !== undefined ? ( - - ) : ( - "n.a." - )} -

+
+
+

+ Points: + {points !== undefined ? ( + + ) : ( + "n.a." + )} +

+
); }; diff --git a/src/app/components/Summary/Summary.tsx b/src/app/components/Summary/Summary.tsx index ce878803..3a8d193a 100644 --- 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 = ({

- {isApiNormal && !isGeoBlocked && ( + {isApiNormal && !isGeoBlocked && shouldDisplayPoints() && ( <>
diff --git a/src/app/context/api/DelegationsPointsProvider.tsx b/src/app/context/api/DelegationsPointsProvider.tsx index 816f3493..40a906eb 100644 --- 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; @@ -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 index ec639445..e8670507 100644 --- 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; +};