chore: update stats and wallet balance BBN text (#564)

* chore: update stats and wallet balance BBN text
babylonlabs-io · Dec 26, 2024 · 49ac8d7 · 49ac8d7
1 parent 993e257
commit 49ac8d7
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.5",
-    "@babylonlabs-io/bbn-core-ui": "^0.6.3",
-    "@babylonlabs-io/bbn-wallet-connect": "0.1.29",
+    "@babylonlabs-io/bbn-core-ui": "^0.6.6",
+    "@babylonlabs-io/bbn-wallet-connect": "0.1.30",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.5",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",

diff --git a/src/app/components/Modals/ClaimRewardModal.tsx b/src/app/components/Modals/ClaimRewardModal.tsx
@@ -2,6 +2,7 @@ import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import { PropsWithChildren, useEffect, useState } from "react";
 
 import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 
 import { LoadingSmall } from "../Loading/Loading";
 
@@ -16,7 +17,7 @@ interface ConfirmationModalProps {
   getTransactionFee: () => Promise<number>;
 }
 
-const bbnTokenName = shouldDisplayTestingMsg() ? "tBABY" : "BABY";
+const { coinSymbol } = getNetworkConfigBBN();
 
 export const ClaimRewardModal = ({
   open,
@@ -51,7 +52,7 @@ export const ClaimRewardModal = ({
               Receiving
             </Text>
             <Text variant="body1">
-              {receivingValue} {bbnTokenName}
+              {receivingValue} {coinSymbol}
             </Text>
           </div>
 
@@ -67,7 +68,7 @@ export const ClaimRewardModal = ({
               <LoadingSmall />
             ) : (
               <Text variant="body1">
-                {transactionFee} {bbnTokenName}
+                {transactionFee} {coinSymbol}
               </Text>
             )}
           </div>
@@ -79,7 +80,7 @@ export const ClaimRewardModal = ({
           </Text>
           {shouldDisplayTestingMsg() && (
             <Text variant="body2">
-              {bbnTokenName} is a test token without any real world value.
+              {coinSymbol} is a test token without any real world value.
             </Text>
           )}
         </div>

diff --git a/src/app/components/Modals/EOIModal/EOIModal.tsx b/src/app/components/Modals/EOIModal/EOIModal.tsx
@@ -8,7 +8,7 @@ import {
 } from "@babylonlabs-io/bbn-core-ui";
 
 import { ResponsiveDialog } from "@/app/components/Modals/ResponsiveDialog";
-import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 
 import { Step } from "./Step";
@@ -35,7 +35,7 @@ interface EOIModalProps {
 }
 
 const { coinSymbol } = getNetworkConfigBTC();
-const bbnTokenName = shouldDisplayTestingMsg() ? "tBABY" : "BABY";
+const { coinSymbol: bbnCoinSymbol } = getNetworkConfigBBN();
 
 const STEP_STATES = {
   [EOIStepStatus.UNSIGNED]: "upcoming",
@@ -79,7 +79,7 @@ export function EOIModal({
             Consent to slashing during unbonding
           </Step>
           <Step index={3} state={STEP_STATES[statuses.reward]}>
-            {coinSymbol}-{bbnTokenName} address binding for receiving staking
+            {coinSymbol}-{bbnCoinSymbol} address binding for receiving staking
             rewards
           </Step>
           <Step index={4} state={STEP_STATES[statuses.eoi]}>

diff --git a/src/app/components/Modals/FeedbackModal.tsx b/src/app/components/Modals/FeedbackModal.tsx
@@ -11,7 +11,7 @@ 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 { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 
 interface FeedbackModalProps {
@@ -22,6 +22,7 @@ interface FeedbackModalProps {
 
 interface ContentProps {}
 const { networkName, coinName } = getNetworkConfigBTC();
+const { networkFullName: bbnNetworkFullName } = getNetworkConfigBBN();
 
 const SuccessContent: React.FC<ContentProps> = () => {
   const { data: networkInfo } = useNetworkInfo();
@@ -38,8 +39,8 @@ const SuccessContent: React.FC<ContentProps> = () => {
       <p className="text-base text-center">
         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.
+        transaction confirmations your stake will become active on the{" "}
+        {bbnNetworkFullName}.
         <br />
         Your opinion matters! Share feedback or report issues on our{" "}
         <a

diff --git a/src/app/components/Modals/Phase2Here.tsx b/src/app/components/Modals/Phase2Here.tsx
@@ -9,6 +9,7 @@ import { MdLooksTwo } from "react-icons/md";
 import { twMerge } from "tailwind-merge";
 
 import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 
 import { ResponsiveDialog } from "./ResponsiveDialog";
@@ -20,6 +21,8 @@ interface Phase2HereModalProps {
 }
 
 const { networkName } = getNetworkConfigBTC();
+const { networkFullName: bbnNetworkFullName, coinSymbol: bbnCoinSymbol } =
+  getNetworkConfigBBN();
 
 export const Phase2HereModal = ({
   className,
@@ -35,18 +38,15 @@ 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">
-        Babylon {shouldDisplayTestingMsg() ? "Test" : ""} Chain is here!
-      </Heading>
+      <Heading variant="h4">{bbnNetworkFullName} 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.
+        The {bbnNetworkFullName} blockchain has launched, signalling the start
+        of the new phase of the Babylon. {networkName} stakers can now register
+        on the {bbnNetworkFullName} blockchain to enhance security and earn{" "}
+        {bbnCoinSymbol}.
       </p>
       <p className="text-base text-center">
-        During the initial phase of the Babylon chain launch, eligibility
+        During the initial phase of the {bbnNetworkFullName} 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

diff --git a/src/app/components/Modals/PreviewModal.tsx b/src/app/components/Modals/PreviewModal.tsx
@@ -12,7 +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 { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { satoshiToBtc } from "@/utils/btc";
 import { maxDecimals } from "@/utils/maxDecimals";
@@ -34,6 +34,8 @@ interface PreviewModalProps {
   awaitingWalletResponse: boolean;
 }
 
+const { networkFullName: bbnNetworkFullName } = getNetworkConfigBBN();
+
 export const PreviewModal = ({
   isOpen,
   onClose,
@@ -156,11 +158,11 @@ export const PreviewModal = ({
             only one who can unbond and withdraw your stake.
           </Text>
           <Text variant="body2">
-            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.
+            2. Your stake will first be sent to {bbnNetworkFullName} 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>

diff --git a/src/app/components/Modals/WalletDisconnectModal.tsx b/src/app/components/Modals/WalletDisconnectModal.tsx
@@ -8,7 +8,7 @@ import {
 import Image from "next/image";
 
 import cancelCircle from "@/app/assets/cancel-circle.svg";
-import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 
 import { ResponsiveDialog } from "./ResponsiveDialog";
@@ -20,6 +20,7 @@ interface WalletDisconnectModalProps {
 }
 
 const { networkName } = getNetworkConfigBTC();
+const { networkFullName: bbnNetworkFullName } = getNetworkConfigBBN();
 
 export const WalletDisconnectModal = ({
   isOpen,
@@ -38,10 +39,9 @@ export const WalletDisconnectModal = ({
           Disconnect Wallets
         </Heading>
         <Text variant="body1" className="text-center">
-          Disconnecting will log you out of both your Babylon
-          {shouldDisplayTestingMsg() ? "Test" : ""} Chain and {networkName} {""}
-          wallets. You&apos;ll need to reconnect them to access your staking
-          account.
+          Disconnecting will log you out of both your {bbnNetworkFullName} Chain
+          and {networkName} wallets. You&apos;ll need to reconnect them to
+          access your staking account.
         </Text>
       </DialogBody>
 

diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx
@@ -6,7 +6,7 @@ import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useCosmosWallet } from "@/app/context/wallet/CosmosWalletProvider";
 import { useBbnQuery } from "@/app/hooks/client/rpc/queries/useBbnQuery";
 import { useRewardsService } from "@/app/hooks/services/useRewardsService";
-import { shouldDisplayTestingMsg } from "@/config";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { ubbnToBbn } from "@/utils/bbn";
 import { satoshiToBtc } from "@/utils/btc";
@@ -19,8 +19,8 @@ const QUERY_KEYS = {
   BTC_BALANCE: ["BTC_BALANCE"],
   COSMOS_BALANCE: ["COSMOS_BALANCE"],
 };
-
-const bbnTokenName = shouldDisplayTestingMsg() ? "tBABY" : "BABY";
+const { networkName: bbnNetworkName, coinSymbol: bbnCoinSymbol } =
+  getNetworkConfigBBN();
 const { coinName, coinSymbol } = getNetworkConfigBTC();
 
 export function PersonalBalance() {
@@ -81,20 +81,20 @@ export function PersonalBalance() {
 
         <StatItem
           loading={cosmosBalanceLoading}
-          title={`Babylon ${shouldDisplayTestingMsg() ? "Test" : ""} Chain Balance`}
-          value={`${ubbnToBbn(cosmosBalance ?? 0)} ${bbnTokenName}`}
+          title={`${bbnNetworkName} Balance`}
+          value={`${ubbnToBbn(cosmosBalance ?? 0)} ${bbnCoinSymbol}`}
         />
 
         <div className="divider mx-0 my-2 md:divider-horizontal" />
 
         <StatItem
           loading={rewardsQuery.isLoading}
-          title={`${shouldDisplayTestingMsg() ? "Test" : ""} BABY Rewards`}
-          value={`${rewardBalance} ${bbnTokenName}`}
+          title={`${bbnNetworkName} Rewards`}
+          value={`${rewardBalance} ${bbnCoinSymbol}`}
           actionComponent={{
             title: "Claim",
             onAction: () => setShowClaimRewardModal(true),
-            isDisabled: rewardBalance === 0,
+            isDisabled: !rewardBalance,
           }}
         />
       </div>

diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx
@@ -8,7 +8,7 @@ import { maxDecimals } from "@/utils/maxDecimals";
 
 import { StatItem } from "./StatItem";
 
-const { coinName } = getNetworkConfigBTC();
+const { coinName, coinSymbol } = getNetworkConfigBTC();
 
 const formatter = Intl.NumberFormat("en", {
   notation: "compact",
@@ -27,13 +27,13 @@ export const Stats = memo(() => {
   return (
     <div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
       <Heading variant="h4" className="text-primary-contrast md:text-4xl">
-        Babylon Stats
+        Babylon Bitcoin Staking Stats
       </Heading>
       <div className="flex flex-col justify-between bg-secondary-contrast rounded p-6 text-base md:flex-row">
         <StatItem
           loading={isLoading}
-          title="Confirmed TVL"
-          value={`${satoshiToBtc(activeTvl) >= 1 ? maxDecimals(satoshiToBtc(activeTvl), 2) : maxDecimals(satoshiToBtc(activeTvl), 8)} ${coinName}`}
+          title={`Confirmed ${coinSymbol} TVL`}
+          value={`${satoshiToBtc(activeTvl) >= 1 ? maxDecimals(satoshiToBtc(activeTvl), 2) : maxDecimals(satoshiToBtc(activeTvl), 8)} ${coinSymbol}`}
           tooltip="Total number of active bitcoins staked"
         />
 

diff --git a/src/app/components/Wallet/Connect.tsx b/src/app/components/Wallet/Connect.tsx
@@ -24,6 +24,7 @@ import { useCosmosWallet } from "@/app/context/wallet/CosmosWalletProvider";
 import { useIsMobileView } from "@/app/hooks/useBreakpoint";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { useAppState } from "@/app/state";
+import { getNetworkConfigBBN } from "@/config/network/bbn";
 
 import { Hash } from "../Hash/Hash";
 import { WalletDisconnectModal } from "../Modals/WalletDisconnectModal";
@@ -34,6 +35,8 @@ interface ConnectProps {
   onConnect: () => void;
 }
 
+const { networkFullName: bbnNetworkFullName } = getNetworkConfigBBN();
+
 export const Connect: React.FC<ConnectProps> = ({
   loading = false,
   onConnect,
@@ -151,7 +154,7 @@ export const Connect: React.FC<ConnectProps> = ({
         </div>
         <div className="flex flex-col">
           <Text variant="body1" className="text-primary-dark text-base">
-            Babylon Chain
+            {bbnNetworkFullName}
           </Text>
           <Hash value={bech32Address} address noFade fullWidth symbols={12} />
         </div>

diff --git a/src/app/hooks/client/rpc/queries/useBbnQuery.ts b/src/app/hooks/client/rpc/queries/useBbnQuery.ts
@@ -43,7 +43,7 @@ export const useBbnQuery = () => {
           address: bech32Address,
         });
 
-      let rewards;
+      let rewards: incentivequery.QueryRewardGaugesResponse;
       try {
         rewards = await incentive.RewardGauges(req);
       } catch (error) {