always show phase2 modal and banner (#541)

src/app/components/Banner/Banner.tsx

@@ -0,0 +1,33 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+import { useState } from "react";
+import { IoMdClose } from "react-icons/io";
+import { PiWarningOctagonFill } from "react-icons/pi";
+
+interface Props {}
+
+export const Banner = ({}: Props) => {
+  const [show, setShow] = useState(true);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-row gap-2 px-4 py-3 bg-[#D5FCE8] text-primary-main items-center justify-between">
+      <div className="flex flex-row gap-2 items-center">
+        <PiWarningOctagonFill />
+        <Text variant="body1">
+          Phase 2 is here! The second phase of Babylon mainnet has been
+          launched.
+          <a className="text-secondary-main"> Learn more</a>
+        </Text>
+      </div>
+      <button
+        className="border border-primary-light rounded-sm text-primary-light"
+        onClick={() => setShow(false)}
+      >
+        <IoMdClose size={24} />
+      </button>
+    </div>
+  );
+};

src/app/components/Delegations/Delegations.tsx

@@ -19,7 +19,6 @@ import { ErrorState } from "@/app/types/errors";
 import { getIntermediateDelegationsLocalStorageKey } from "@/utils/local_storage/getIntermediateDelegationsLocalStorageKey";
 import { toLocalStorageIntermediateDelegation } from "@/utils/local_storage/toLocalStorageIntermediateDelegation";
 
-import { Phase2HereModal } from "../Modals/Phase2Here";
 import { UnbondModal } from "../Modals/UnbondModal";
 
 import { Delegation } from "./Delegation";
@@ -32,7 +31,6 @@ type MODE = typeof MODE_TRANSITION | typeof MODE_WITHDRAW | typeof MODE_UNBOND;
 export const Delegations = ({}) => {
   const { publicKeyNoCoord, connected, network } = useBTCWallet();
   const [modalOpen, setModalOpen] = useState(false);
-  const [showPhase2HereModal, setShowPhase2HereModal] = useState(true);
   const [txID, setTxID] = useState("");
   const [modalMode, setModalMode] = useState<MODE>();
   const { showError } = useError();
@@ -310,10 +308,6 @@ export const Delegations = ({}) => {
           </InfiniteScroll>
         </div>
       </div>
-      <Phase2HereModal
-        open={showPhase2HereModal}
-        onClose={() => setShowPhase2HereModal(false)}
-      />
       {modalMode && txID && selectedDelegation && (
         <WithdrawModal
           open={modalOpen}

src/app/page.tsx

@@ -1,12 +1,14 @@
 "use client";
 
 import { initBTCCurve } from "@babylonlabs-io/btc-staking-ts";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
+import { Banner } from "./components/Banner/Banner";
 import { Activity } from "./components/Delegations/Activity";
 import { FAQ } from "./components/FAQ/FAQ";
 import { Footer } from "./components/Footer/Footer";
 import { Header } from "./components/Header/Header";
+import { Phase2HereModal } from "./components/Modals/Phase2Here";
 import { NetworkBadge } from "./components/NetworkBadge/NetworkBadge";
 import { PersonalBalance } from "./components/PersonalBalance/PersonalBalance";
 import { Staking } from "./components/Staking/Staking";
@@ -17,9 +19,12 @@ const Home = () => {
     initBTCCurve();
   }, []);
 
+  const [showPhase2HereModal, setShowPhase2HereModal] = useState(true);
+
   return (
     <>
       <NetworkBadge />
+      <Banner />
       <Header />
       <div className="container mx-auto flex justify-center p-6">
         <div className="container flex flex-col gap-6">
@@ -31,6 +36,10 @@ const Home = () => {
       </div>
       <FAQ />
       <Footer />
+      <Phase2HereModal
+        open={showPhase2HereModal}
+        onClose={() => setShowPhase2HereModal(false)}
+      />
     </>
   );
 };