add block phase 1 banner and modal

.env.example

@@ -2,4 +2,5 @@ NEXT_PUBLIC_MEMPOOL_API=https://mempool.space
 NEXT_PUBLIC_API_URL=https://staking-api.testnet.babylonchain.io
 NEXT_PUBLIC_POINTS_API_URL=https://points.testnet.babylonchain.io
 NEXT_PUBLIC_NETWORK=signet
-NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=true
+NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=true
+NEXT_PUBLIC_DISABLE_UNBONDING=false

.github/workflows/publish.yaml

@@ -40,6 +40,7 @@ jobs:
             NEXT_PUBLIC_POINTS_API_URL=${{ vars.NEXT_PUBLIC_POINTS_API_URL }}
             NEXT_PUBLIC_NETWORK=${{ vars.NEXT_PUBLIC_NETWORK }}
             NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=${{ vars.NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES }}
+            NEXT_PUBLIC_DISABLE_UNBONDING=${{ vars.NEXT_PUBLIC_DISABLE_UNBONDING }}
 
       - name: Upload Docker image to workspace
         uses: actions/upload-artifact@v4

Dockerfile

@@ -29,6 +29,9 @@ ENV NEXT_PUBLIC_NETWORK=${NEXT_PUBLIC_NETWORK}
 ARG NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES
 ENV NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES=${NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES}
 
+ARG NEXT_PUBLIC_DISABLE_UNBONDING
+ENV NEXT_PUBLIC_DISABLE_UNBONDING=${NEXT_PUBLIC_DISABLE_UNBONDING}
+
 RUN npm run build
 
 # Step 2. Production image, copy all the files and run next

README.md

@@ -25,6 +25,7 @@ where,
 - `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
+- `NEXT_PUBLIC_DISABLE_UNBONDING` boolean value to indicate whether disable unbonding. Default to false
 
 Then, to start a development server:
 

src/app/components/Delegations/Delegation.tsx

@@ -7,7 +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 { shouldDisableUnbonding, shouldDisplayPoints } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btcConversions";
 import { durationTillNow } from "@/utils/formatTime";
@@ -65,15 +65,32 @@ export const Delegation: React.FC<DelegationProps> = ({
     if (state === DelegationState.ACTIVE) {
       return (
         <div className="flex justify-end lg:justify-start">
-          <button
-            className="btn btn-outline btn-xs inline-flex text-sm font-normal text-primary"
-            onClick={() => onUnbond(stakingTxHash)}
-            disabled={
-              intermediateState === DelegationState.INTERMEDIATE_UNBONDING
+          <div
+            data-tooltip-id="tooltip-unbonding"
+            data-tooltip-content={
+              shouldDisableUnbonding()
+                ? "Unbonding is temporarily disabled"
+                : ""
             }
+            data-tooltip-place="left"
           >
-            Unbond
-          </button>
+            <button
+              className="btn btn-outline btn-xs inline-flex text-sm font-normal text-primary"
+              onClick={() => onUnbond(stakingTxHash)}
+              disabled={
+                intermediateState === DelegationState.INTERMEDIATE_UNBONDING ||
+                shouldDisableUnbonding()
+              }
+            >
+              Unbond
+            </button>
+          </div>
+          <Tooltip
+            id="tooltip-unbonding"
+            className="tooltip-wrap"
+            place="left"
+            clickable={true}
+          />
         </div>
       );
     } else if (state === DelegationState.UNBONDED) {

src/app/components/Modals/UnbondingDisabledModal.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { IoMdClose } from "react-icons/io";
+import { useLocalStorage } from "usehooks-ts";
+
+import { shouldDisableUnbonding } from "@/config";
+
+import { GeneralModal } from "./GeneralModal";
+
+const Title: React.FC = () => {
+  return (
+    <h3 className="font-bold">Unbonding disabled during Phase-2 Transition</h3>
+  );
+};
+
+const Content: React.FC = () => {
+  return (
+    <div className="text-text-black dark:text-white">
+      <div className="mt-6 flex flex-col gap-4">
+        <p>
+          In preparation for the upcoming Phase-2 testnet launch in DATE,
+          on-demand stake unbonding is disabled.
+          <br />
+          Once the Phase-2 testnet is launched, you will be able to transit your
+          Signet BTC stake to Phase-2 and then unbond.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const UnbondingDisabledModal: React.FC = () => {
+  const [unbondingDisabledModalOpened, setUnbondingDisabledModalOpened] =
+    useLocalStorage<boolean>("bbn-unbonding-disabled-modal-opened", false);
+
+  const [unbondingDisabledModalOpen, setUnbondingDisabledModalOpen] = useState(
+    !unbondingDisabledModalOpened && shouldDisableUnbonding(),
+  );
+
+  const onClose = () => {
+    setUnbondingDisabledModalOpen(false);
+    setUnbondingDisabledModalOpened(true);
+  };
+
+  return (
+    <GeneralModal open={unbondingDisabledModalOpen} onClose={onClose}>
+      <div className="mb-4 flex items-center justify-between">
+        <Title />
+        <button className="btn btn-circle btn-ghost btn-sm" onClick={onClose}>
+          <IoMdClose size={24} />
+        </button>
+      </div>
+      <Content />
+    </GeneralModal>
+  );
+};

src/app/components/UnbondingDisabledBanner/UnbondingDisabledBanner.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import { FC } from "react";
+
+import BannerWarningIcon from "@/app/assets/banner-warning.svg";
+import { shouldDisableUnbonding } from "@/config";
+
+interface UnbondingDisabledBannerProps {}
+
+export const UnbondingDisabledBanner: FC<UnbondingDisabledBannerProps> = () => {
+  if (!shouldDisableUnbonding()) return null;
+  return (
+    <div className="w-full bg-[#FDF2EC] min-h-[50px] p-2 lg:min-h-[40px] flex items-center justify-center">
+      <div className="flex items-center">
+        <Image
+          src={BannerWarningIcon}
+          alt="Warning Icon"
+          className="mr-2 text-sm"
+        />
+        <p className="text-xs md:text-sm text-black text-center flex flex-col md:block">
+          <strong className="block mb-1 md:mb-0 md:inline">
+            Unbonding disabled during Phase-2 Transition
+            <span className="hidden md:inline">:</span>
+          </strong>{" "}
+          <span className="block text-xs md:text-sm md:inline">
+            To support a smooth transition of the testnet to Phase-2, on-demand
+            unbonding has been disabled until the phase-2 testnet launch.
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};

src/app/page.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 
 import { useTermsAcceptance } from "@/app/hooks/useAcceptTerms";
+import { shouldDisableUnbonding } from "@/config";
 import { network } from "@/config/network.config";
 import { getCurrentGlobalParamsVersion } from "@/utils/globalParams";
 import { calculateDelegationsDiff } from "@/utils/local_storage/calculateDelegationsDiff";
@@ -31,10 +32,12 @@ import { Header } from "./components/Header/Header";
 import { ConnectModal } from "./components/Modals/ConnectModal";
 import { ErrorModal } from "./components/Modals/ErrorModal";
 import { FilterOrdinalsModal } from "./components/Modals/FilterOrdinalsModal";
+import { UnbondingDisabledModal } from "./components/Modals/UnbondingDisabledModal";
 import { NetworkBadge } from "./components/NetworkBadge/NetworkBadge";
 import { Staking } from "./components/Staking/Staking";
 import { Stats } from "./components/Stats/Stats";
 import { Summary } from "./components/Summary/Summary";
+import { UnbondingDisabledBanner } from "./components/UnbondingDisabledBanner/UnbondingDisabledBanner";
 import { useError } from "./context/Error/ErrorContext";
 import { Delegation, DelegationState } from "./types/delegations";
 import { ErrorState } from "./types/errors";
@@ -356,6 +359,7 @@ const Home: React.FC<HomeProps> = () => {
       className={`relative h-full min-h-svh w-full ${network === Network.MAINNET ? "main-app-mainnet" : "main-app-testnet"}`}
     >
       <NetworkBadge isWalletConnected={!!btcWallet} />
+      {shouldDisableUnbonding() && <UnbondingDisabledBanner />}
       <Header
         onConnect={handleConnectModal}
         onDisconnect={handleDisconnectBTC}
@@ -441,6 +445,7 @@ const Home: React.FC<HomeProps> = () => {
         onRetry={retryErrorAction}
         noCancel={noCancel}
       />
+      <UnbondingDisabledModal />
     </main>
   );
 };

src/config/index.ts

@@ -18,3 +18,9 @@ export const getNetworkAppUrl = (): string => {
 export const shouldDisplayPoints = (): boolean => {
   return !!process.env.NEXT_PUBLIC_POINTS_API_URL;
 };
+
+// shouldEnableUnbonding function is used to check if the application should
+// enable unbonding or not based on the existence of the environment variable.
+export const shouldDisableUnbonding = (): boolean => {
+  return process.env.NEXT_PUBLIC_DISABLE_UNBONDING?.toString() === "true";
+};