feat: update all text to match spec

src/app/components/Banner/Banner.tsx

@@ -19,7 +19,7 @@ export const Banner = ({}: Props) => {
           <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.
+          not carry any monetary value and the testnet is not incentivized.
         </Text>
       </div>
     </div>

src/app/components/Delegations/DelegationActions.tsx

@@ -80,7 +80,7 @@ export const DelegationActions: React.FC<DelegationActionsProps> = ({
             }
             className="text-sm font-normal border-primary-main/20 bg-white"
           >
-            Transition
+            Register
           </Button>
           <Tooltip id="tooltip-transition" className="tooltip-wrap" />
         </div>

src/app/components/Delegations/Delegations.tsx

@@ -262,7 +262,7 @@ export const Delegations = ({}) => {
     <>
       <div className="bg-secondary-contrast p-6">
         <Heading variant="h6" className="text-primary-light py-2 mb-6">
-          Pending Transitions / Withdrawal (Phase 1)
+          Pending Registration
         </Heading>
 
         <div className="hidden lg:grid grid-cols-[1.5fr_1fr_1fr_1fr_1fr_1fr] gap-2 p-4 text-primary-light text-xs">

src/app/components/Modals/ClaimRewardModal.tsx

@@ -1,6 +1,8 @@
 import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { PropsWithChildren, useEffect, useState } from "react";
 
+import { shouldDisplayTestingMsg } from "@/config";
+
 import { LoadingSmall } from "../Loading/Loading";
 
 import { ConfirmationModal } from "./ConfirmationModal";
@@ -14,6 +16,8 @@ interface ConfirmationModalProps {
   getTransactionFee: () => Promise<number>;
 }
 
+const bbnTokenName = shouldDisplayTestingMsg() ? "tBABY" : "BABY";
+
 export const ClaimRewardModal = ({
   open,
   onClose,
@@ -36,7 +40,7 @@ export const ClaimRewardModal = ({
     <ConfirmationModal
       open={open}
       processing={false}
-      title="Claim tBABY Reward"
+      title="Claim tBABY"
       onClose={onClose}
       onSubmit={onSubmit}
     >
@@ -46,19 +50,25 @@ export const ClaimRewardModal = ({
             <Text variant="body1" className="text-center">
               Receiving
             </Text>
-            <Text variant="body1">{receivingValue} tBABY</Text>
+            <Text variant="body1">
+              {receivingValue} {bbnTokenName}
+            </Text>
           </div>
 
           <div className="flex flex-row items-center justify-between pt-4">
-            <Text variant="body1">Babylon Test ChainAddress</Text>
+            <Text variant="body1">
+              Babylon {shouldDisplayTestingMsg() ? "Test" : ""} Chain Address
+            </Text>
             <Text variant="body1">{address}</Text>
           </div>
           <div className="flex flex-row items-center justify-between pt-4">
             <Text variant="body1">Transaction Fees</Text>
             {transactionFee === 0 ? (
               <LoadingSmall />
             ) : (
-              <Text variant="body1">{transactionFee} tBABY</Text>
+              <Text variant="body1">
+                {transactionFee} {bbnTokenName}
+              </Text>
             )}
           </div>
         </div>
@@ -67,6 +77,11 @@ export const ClaimRewardModal = ({
           <Text variant="body2">
             Processing your claim will take approximately 2 blocks to complete.
           </Text>
+          {shouldDisplayTestingMsg() && (
+            <Text variant="body2">
+              {bbnTokenName} is a test token without any real world value.
+            </Text>
+          )}
         </div>
       </div>
     </ConfirmationModal>

src/app/components/Modals/EOIModal/EOIModal.tsx

@@ -8,6 +8,8 @@ import {
 } from "@babylonlabs-io/bbn-core-ui";
 
 import { ResponsiveDialog } from "@/app/components/Modals/ResponsiveDialog";
+import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfig } from "@/config/network.config";
 
 import { Step } from "./Step";
 
@@ -32,6 +34,9 @@ interface EOIModalProps {
   onSubmit?: () => void;
 }
 
+const { coinSymbol } = getNetworkConfig();
+const bbnTokenName = shouldDisplayTestingMsg() ? "tBABY" : "BABY";
+
 const STEP_STATES = {
   [EOIStepStatus.UNSIGNED]: "upcoming",
   [EOIStepStatus.SIGNED]: "completed",
@@ -74,7 +79,8 @@ export function EOIModal({
             Consent to slashing during unbonding
           </Step>
           <Step index={3} state={STEP_STATES[statuses.reward]}>
-            BTC-BBN address binding for receiving staking rewards
+            {coinSymbol}-{bbnTokenName} address binding for receiving staking
+            rewards
           </Step>
           <Step index={4} state={STEP_STATES[statuses.eoi]}>
             Staking transaction registration

src/app/components/Modals/FeedbackModal.tsx

@@ -9,7 +9,10 @@ import {
 import { LuPartyPopper } from "react-icons/lu";
 import { MdFeedback } from "react-icons/md";
 
+import { useNetworkInfo } from "@/app/hooks/client/api/useNetworkInfo";
 import { useIsMobileView } from "@/app/hooks/useBreakpoint";
+import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfig } from "@/config/network.config";
 
 interface FeedbackModalProps {
   open: boolean;
@@ -18,16 +21,27 @@ interface FeedbackModalProps {
 }
 
 interface ContentProps {}
+const { networkName, coinName } = getNetworkConfig();
 
 const SuccessContent: React.FC<ContentProps> = () => {
+  const { data: networkInfo } = useNetworkInfo();
+  const confirmationDepth =
+    networkInfo?.params.btcEpochCheckParams?.latestParam
+      ?.btcConfirmationDepth || 10;
+
   return (
     <div className="py-4 flex flex-col items-center gap-4">
       <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
         <LuPartyPopper className="text-5xl" />
       </div>
-      <Heading variant="h4">Conratulations</Heading>
+      <Heading variant="h4">Staking Submitted on {networkName}</Heading>
       <p className="text-base text-center">
-        Share feedback or report issues on our{" "}
+        Congratulations! Your stake has been successfully submitted to
+        {networkName}. When it receives {confirmationDepth} {coinName} {""}
+        transaction confirmations your stake will become active on the Babylon
+        {shouldDisplayTestingMsg() ? "Test" : ""} Chain.
+        <br />
+        Your opinion matters! Share feedback or report issues on our{" "}
         <a
           href="https://forum.babylonlabs.io/"
           target="_blank"

src/app/components/Modals/Phase2Here.tsx

@@ -8,6 +8,9 @@ import { PropsWithChildren } from "react";
 import { MdLooksTwo } from "react-icons/md";
 import { twMerge } from "tailwind-merge";
 
+import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfig } from "@/config/network.config";
+
 import { ResponsiveDialog } from "./ResponsiveDialog";
 
 interface Phase2HereModalProps {
@@ -16,6 +19,8 @@ interface Phase2HereModalProps {
   onClose: () => void;
 }
 
+const { networkName } = getNetworkConfig();
+
 export const Phase2HereModal = ({
   className,
   open,
@@ -30,29 +35,28 @@ export const Phase2HereModal = ({
       <div className="bg-primary-contrast h-20 w-20 flex items-center justify-center">
         <MdLooksTwo className="text-5xl" />
       </div>
-      <Heading variant="h4">Transition to Phase 2</Heading>
+      <Heading variant="h4">
+        Babylon {shouldDisplayTestingMsg() ? "Test" : ""} Chain is here!
+      </Heading>
+      <p className="text-base text-center">
+        The Babylon blockchain has launched, signalling the start of the new
+        phase of the Babylon {shouldDisplayTestingMsg() ? "testnet" : ""}.{" "}
+        {networkName} stakers can now register on the
+        {shouldDisplayTestingMsg() ? "test" : ""} Babylon blockchain to enhance
+        security and earn {shouldDisplayTestingMsg() ? "test" : ""} tokens.
+      </p>
       <p className="text-base text-center">
-        The second phase of the Babylon mainnet has been launched, enabling the
-        Bitcoin stakes to provide security and liquidity to a Babylon PoS
-        blockchain. If you staked during the first phase, you will need to
-        transition your stakes. Head over to the activity tab to identify all
-        your stakes that can transition. Criteria for your transitioning:
+        During the initial phase of the Babylon chain launch, eligibility
+        criteria will be in place for stake registration. Over time, access will
+        gradually expand to allow the registration of all existing stakers and
+        the creation of new ones. Learn more here
       </p>
-      <ul className="list-disc pl-4 text-base">
-        <li>
-          <p>
-            The finality provider you delegated to during phase-1 has
-            transitioned to the phase-2 Babylon chain.
-          </p>
-        </li>
-        <li>
-          <p>
-            Your stake was created on the first cap of the phase-1 mainnet.
-            Currently only cap-1 stakes are allowed to transition to slowly
-            onboard the stakes to the phase-2 system in a secure manner.
-          </p>
-        </li>
-      </ul>
+      {shouldDisplayTestingMsg() && (
+        <p className="text-base text-center">
+          <br />
+          Note: This testnet is not incentivized.
+        </p>
+      )}
     </DialogBody>
 
     <DialogFooter className="flex gap-4">

src/app/components/Modals/PreviewModal.tsx

@@ -12,6 +12,7 @@ import { Fragment } from "react";
 
 import { useNetworkInfo } from "@/app/hooks/client/api/useNetworkInfo";
 import { useIsMobileView } from "@/app/hooks/useBreakpoint";
+import { shouldDisplayTestingMsg } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btc";
 import { maxDecimals } from "@/utils/maxDecimals";
@@ -47,7 +48,7 @@ export const PreviewModal = ({
   awaitingWalletResponse,
 }: PreviewModalProps) => {
   const isMobileView = useIsMobileView();
-  const { coinName } = getNetworkConfig();
+  const { coinSymbol, networkName } = getNetworkConfig();
 
   const { data: networkInfo } = useNetworkInfo();
   const confirmationDepth =
@@ -83,7 +84,7 @@ export const PreviewModal = ({
       key: "Stake Amount",
       value: (
         <Text variant="body1">
-          {maxDecimals(satoshiToBtc(stakingAmountSat), 8)} {coinName}
+          {maxDecimals(satoshiToBtc(stakingAmountSat), 8)} {coinSymbol}
         </Text>
       ),
     },
@@ -95,27 +96,32 @@ export const PreviewModal = ({
       key: "Transaction fee",
       value: (
         <Text variant="body1">
-          {maxDecimals(satoshiToBtc(stakingFeeSat), 8)} {coinName}
+          {maxDecimals(satoshiToBtc(stakingFeeSat), 8)} {coinSymbol}
         </Text>
       ),
     },
     {
       key: "Term",
       value: (
-        <Text variant="body1">{blocksToDisplayTime(stakingTimelock)}</Text>
+        <Text variant="body1">
+          {stakingTimelock} blocks
+          <Text variant="body2" className="text-gray-500">
+            ~ {blocksToDisplayTime(stakingTimelock)}
+          </Text>
+        </Text>
       ),
     },
     {
       key: "On Demand Unbonding",
       value: (
-        <Text variant="body1">Enabled ({unbondingTime} unbonding time)</Text>
+        <Text variant="body1">Enabled (~ {unbondingTime} unbonding time)</Text>
       ),
     },
     {
       key: "Unbonding fee",
       value: (
         <Text variant="body1">
-          {maxDecimals(satoshiToBtc(unbondingFeeSat), 8)} {coinName}
+          {maxDecimals(satoshiToBtc(unbondingFeeSat), 8)} {coinSymbol}
         </Text>
       ),
     },
@@ -142,17 +148,19 @@ export const PreviewModal = ({
             </Fragment>
           ))}
         </div>
+        <br />
         <div className="flex flex-col gap-2">
           <Heading variant="h6">Attention!</Heading>
           <Text variant="body2">
-            1. No third party possesses your staked {coinName}. You are the only
-            one who can unbond and withdraw your stake.
+            1. No third party possesses your staked {coinSymbol}. You are the
+            only one who can unbond and withdraw your stake.
           </Text>
           <Text variant="body2">
-            2. Your stake will initially have the status of &quot;Pending&quot;
-            until it receives {confirmationDepth} Bitcoin confirmations.
-            &quot;Pending&quot; stake is only accessible through the device it
-            was created.
+            2. Your stake will first be sent to Babylon {""}
+            {shouldDisplayTestingMsg() ? "Testnet" : ""} Chain for verification
+            (~20 seconds), then you will be prompted to submit it to the{" "}
+            {networkName} ledger. It will be marked as &quot;Pending&quot; until
+            it receives {confirmationDepth} Bitcoin confirmations.
           </Text>
         </div>
       </DialogBody>