chore: minor text updates (#527)

src/app/components/Modals/InfoModal.tsx

@@ -22,23 +22,22 @@ export function InfoModal({ open, onClose }: InfoModalProps) {
   return (
     <DialogComponent open={open} onClose={onClose}>
       <DialogHeader
-        title="Info"
+        title="Stake Timelock and On-Demand Unbonding"
         onClose={onClose}
         className="text-primary-dark"
       />
       <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4">
         <div className="py-4 flex flex-col items-start gap-4">
           <Text variant="body1">
-            You can unbond and withdraw your stake anytime with an unbonding
-            time of 7 days.
+            Stakes made through this dashboard are locked for up to 65 weeks.
+            You can on-demand unbond at any time, with withdrawal available
+            after a 7-day unbonding period. If the maximum staking period
+            expires, your stake becomes withdrawable automatically, with no need
+            for prior unbonding.
           </Text>
-          <Text variant="body1">
-            There is also a build-in maximum staking period of 65 weeks.
-          </Text>
-          <Text variant="body1">
-            If the stake is not unbonded before the end of this period, it will
-            automatically become withdrawable by you anytime afterwards. The
-            above times are approximates based on average BTC block time.
+          <Text variant="body1" className="text-gray-500 italic">
+            Note: Timeframes are approximate, based on an average Bitcoin block
+            time of 10 minutes.
           </Text>
         </div>
       </DialogBody>

src/app/components/PersonalBalance/PersonalBalance.tsx

@@ -60,15 +60,15 @@ export function PersonalBalance() {
 
         <StatItem
           loading={cosmosBalanceLoading}
-          title={`Stakable ${coinName}`}
+          title={"Stakable Balance"}
           value={`${satoshiToBtc(btcBalance ?? 0)} ${coinSymbol}`}
         />
 
         <div className="divider mx-0 my-2 md:divider-horizontal" />
 
         <StatItem
           loading={cosmosBalanceLoading}
-          title="Babylon Balance"
+          title="Babylon Chain Balance"
           value={`${ubbnToBbn(cosmosBalance ?? 0)} BBN`}
         />
 

src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx

@@ -10,7 +10,7 @@ import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btc";
 import { maxDecimals } from "@/utils/maxDecimals";
 
-const { coinName } = getNetworkConfig();
+const { coinSymbol } = getNetworkConfig();
 
 const mapStatus = (value: FinalityProviderState): string => {
   return FinalityProviderStateLabels[value] || "Unknown";
@@ -43,6 +43,14 @@ export const finalityProviderColumns = [
       return monikerA.localeCompare(monikerB);
     },
   },
+  {
+    key: "state",
+    header: "Status",
+    render: (value: unknown) => {
+      if (value == null) return "Unknown";
+      return mapStatus(value as FinalityProviderState);
+    },
+  },
   {
     key: "btcPk",
     header: "BTC PK",
@@ -57,7 +65,7 @@ export const finalityProviderColumns = [
     render: (value: unknown) => {
       const amount = Number(value);
       if (isNaN(amount)) return "-";
-      return `${maxDecimals(satoshiToBtc(amount), 8)} ${coinName}`;
+      return `${maxDecimals(satoshiToBtc(amount), 8)} ${coinSymbol}`;
     },
     sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
       const valueA = a?.activeTVLSat ?? 0;
@@ -79,12 +87,4 @@ export const finalityProviderColumns = [
       return commissionA - commissionB;
     },
   },
-  {
-    key: "state",
-    header: "Status",
-    render: (value: unknown) => {
-      if (value == null) return "Unknown";
-      return mapStatus(value as FinalityProviderState);
-    },
-  },
 ];

src/app/components/Staking/Form/States/WalletNotConnected.tsx

@@ -18,7 +18,7 @@ export const WalletNotConnected = () => {
         </div>
         <div className="flex flex-col gap-2 justify-center items-center self-stretch">
           <Heading variant="h5" className="text-primary-dark text-2xl">
-            Connect wallet to start staking
+            Connect wallets to start staking
           </Heading>
           <Text
             variant="body1"
@@ -29,7 +29,7 @@ export const WalletNotConnected = () => {
           </Text>
         </div>
         <Button variant="outlined" onClick={open} className="text-primary-dark">
-          Connect wallet
+          Connect Wallets
         </Button>
       </div>
     </div>

src/app/components/Stats/Stats.tsx

@@ -33,7 +33,7 @@ export const Stats = memo(() => {
         <StatItem
           loading={isLoading}
           title="Confirmed TVL"
-          value={`${maxDecimals(satoshiToBtc(activeTvl), 8)} ${coinName}`}
+          value={`${satoshiToBtc(activeTvl) >= 1 ? maxDecimals(satoshiToBtc(activeTvl), 2) : maxDecimals(satoshiToBtc(activeTvl), 8)} ${coinName}`}
           tooltip="Total number of active bitcoins staked"
         />
 

src/utils/time.ts

@@ -65,23 +65,42 @@ interface Duration {
   seconds?: number;
 }
 
-export const durationTillNow = (time: string, currentTime: number) => {
-  if (!time || time.startsWith("000")) return "Ongoing";
+/**
+ * Returns the duration between the start timestamp and the current time
+ *
+ * @param {string} startTimestamp - The start timestamp.
+ * @param {number} currentTime - The current time.
+ * @returns {string} - The duration between the start timestamp and the current time.
+ */
+export const durationTillNow = (
+  startTimestamp: string,
+  currentTime: number,
+) => {
+  if (!startTimestamp || startTimestamp.startsWith("000")) return "Ongoing";
 
   const duration = intervalToDuration({
     end: currentTime,
-    start: new Date(time),
+    start: new Date(startTimestamp),
   });
-  let format: (keyof Duration)[] = ["days", "hours", "minutes"];
 
-  if (!duration.days && !duration.hours && !duration.minutes) {
-    format.push("seconds");
+  let format: (keyof Duration)[] = [];
+
+  // If there are months or years, only show months and days
+  if (duration.months || duration.years) {
+    format = ["years", "months", "days"];
+  }
+  // If only days or less, show more detailed time
+  else {
+    format = ["days", "hours", "minutes"];
+    // Add seconds only if less than a minute
+    if (!duration.days && !duration.hours && !duration.minutes) {
+      format.push("seconds");
+    }
   }
 
   const formattedTime = formatDuration(duration, {
     format,
   });
-
   if (formattedTime) {
     return `${formattedTime} ago`;
   } else {