chore: move testing app msg to the banner (#548)

babylonlabs-io · Dec 23, 2024 · da1cef9 · da1cef9
1 parent 3299275
commit da1cef9
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 72 deletions.
diff --git a/src/app/components/Banner/Banner.tsx b/src/app/components/Banner/Banner.tsx
@@ -1,14 +1,12 @@
 import { Text } from "@babylonlabs-io/bbn-core-ui";
-import { useState } from "react";
-import { IoMdClose } from "react-icons/io";
 import { PiWarningOctagonFill } from "react-icons/pi";
 
+import { shouldDisplayTestingMsg } from "@/config";
+
 interface Props {}
 
 export const Banner = ({}: Props) => {
-  const [show, setShow] = useState(true);
-
-  if (!show) {
+  if (!shouldDisplayTestingMsg()) {
     return null;
   }
 
@@ -17,17 +15,13 @@ export const Banner = ({}: Props) => {
       <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>
+          <strong>This is a testing app</strong>
+          <br />
+          The app may contain bugs. Use it after conducting your own research
+          and making an informed decision. Tokens are for testing only and do
+          not carry any monetary value.
         </Text>
       </div>
-      <button
-        className="border border-primary-light rounded-sm text-primary-light"
-        onClick={() => setShow(false)}
-      >
-        <IoMdClose size={24} />
-      </button>
     </div>
   );
 };
diff --git a/src/app/components/Header/Header.tsx b/src/app/components/Header/Header.tsx
@@ -1,10 +1,8 @@
 import { useWalletConnect } from "@babylonlabs-io/bbn-wallet-connect";
 
 import { useAppState } from "@/app/state";
-import { shouldDisplayTestingMsg } from "@/config";
 
 import { Logo } from "../Logo/Logo";
-import { TestingInfo } from "../TestingInfo/TestingInfo";
 import { Connect } from "../Wallet/Connect";
 
 export const Header = () => {
@@ -16,24 +14,11 @@ export const Header = () => {
       <section className="bg-primary-main h-[300px] -mb-[250px] md:-mb-[188px]">
         <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
-          <div className="flex flex-1">
-            {shouldDisplayTestingMsg() && (
-              <div className="hidden flex-1 xl:flex">
-                <TestingInfo />
-              </div>
-            )}
-          </div>
           <div className="flex items-center gap-4">
             <Connect loading={loading} onConnect={open} />
           </div>
         </div>
       </section>
-
-      {shouldDisplayTestingMsg() && (
-        <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">
-          <TestingInfo />
-        </div>
-      )}
     </nav>
   );
 };
diff --git a/src/app/components/Header/SimplifiedHeader.tsx b/src/app/components/Header/SimplifiedHeader.tsx
@@ -1,9 +1,6 @@
 import { twJoin } from "tailwind-merge";
 
-import { shouldDisplayTestingMsg } from "@/config";
-
 import { Logo } from "../Logo/Logo";
-import { TestingInfo } from "../TestingInfo/TestingInfo";
 
 export const SimplifiedHeader = ({
   isMinimal = false,
@@ -20,19 +17,7 @@ export const SimplifiedHeader = ({
       >
         <div className="container h-20 py-6 px-6 mx-auto flex items-center justify-between">
           <Logo />
-          <div className="flex flex-1">
-            {shouldDisplayTestingMsg() && (
-              <div className="hidden flex-1 xl:flex">
-                <TestingInfo />
-              </div>
-            )}
-          </div>
         </div>
-        {shouldDisplayTestingMsg() && (
-          <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">
-            <TestingInfo />
-          </div>
-        )}
       </section>
     </nav>
   );

diff --git a/src/app/components/TestingInfo/TestingInfo.tsx b/src/app/components/TestingInfo/TestingInfo.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,7 +9,6 @@ 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";
 import { Stats } from "./components/Stats/Stats";
@@ -23,7 +22,6 @@ const Home = () => {
 
   return (
     <>
-      <NetworkBadge />
       <Banner />
       <Header />
       <div className="container mx-auto flex justify-center p-6">