From c9c52f3914df62668543dc00f5a5599e8028d731 Mon Sep 17 00:00:00 2001 From: wjrjerome Date: Wed, 25 Sep 2024 15:04:47 +1000 Subject: [PATCH] feat: hide points if the config url is not present --- README.md | 2 +- package-lock.json | 4 +- package.json | 2 +- src/app/components/Delegations/Delegation.tsx | 11 ++--- .../components/Delegations/Delegations.tsx | 8 ++-- .../components/Points/DelegationPoints.tsx | 46 ++++++++++++------- src/app/components/Summary/Summary.tsx | 3 +- .../context/api/DelegationsPointsProvider.tsx | 4 +- src/config/index.ts | 6 +++ 9 files changed, 52 insertions(+), 34 deletions(-) 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..556a9766 100644 --- a/src/app/components/Delegations/Delegation.tsx +++ b/src/app/components/Delegations/Delegation.tsx @@ -4,7 +4,6 @@ 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"; @@ -44,7 +43,6 @@ export const Delegation: React.FC = ({ }) => { const { startTimestamp } = stakingTx; const [currentTime, setCurrentTime] = useState(Date.now()); - const { isApiNormal, isGeoBlocked } = useHealthCheck(); useEffect(() => { const timerId = setInterval(() => { @@ -164,11 +162,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..1679a850 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); @@ -284,9 +287,7 @@ const DelegationsContent: React.FC = ({

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