From 4e5486025ac793762dfb915f8317df9e95296505 Mon Sep 17 00:00:00 2001 From: wjrjerome Date: Thu, 19 Dec 2024 14:18:32 +1100 Subject: [PATCH] chore: minor text updates --- src/app/components/Modals/InfoModal.tsx | 19 +++++------ .../PersonalBalance/PersonalBalance.tsx | 4 +-- .../FinalityProviderColumns.tsx | 20 +++++------ .../Form/States/WalletNotConnected.tsx | 4 +-- src/app/components/Stats/Stats.tsx | 2 +- src/utils/time.ts | 33 +++++++++++++++---- 6 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/app/components/Modals/InfoModal.tsx b/src/app/components/Modals/InfoModal.tsx index 4ca83cc0..49428514 100644 --- a/src/app/components/Modals/InfoModal.tsx +++ b/src/app/components/Modals/InfoModal.tsx @@ -22,23 +22,22 @@ export function InfoModal({ open, onClose }: InfoModalProps) { return (
- 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. - - There is also a build-in maximum staking period of 65 weeks. - - - 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. + + Note: Timeframes are approximate, based on an average Bitcoin block + time of 10 minutes.
diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx index b8d813db..bdfb22c1 100644 --- a/src/app/components/PersonalBalance/PersonalBalance.tsx +++ b/src/app/components/PersonalBalance/PersonalBalance.tsx @@ -60,7 +60,7 @@ export function PersonalBalance() { @@ -68,7 +68,7 @@ export function PersonalBalance() { diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx index 81781e30..15a27a3c 100644 --- a/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx +++ b/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); - }, - }, ]; diff --git a/src/app/components/Staking/Form/States/WalletNotConnected.tsx b/src/app/components/Staking/Form/States/WalletNotConnected.tsx index 282fcc52..1327ec10 100644 --- a/src/app/components/Staking/Form/States/WalletNotConnected.tsx +++ b/src/app/components/Staking/Form/States/WalletNotConnected.tsx @@ -18,7 +18,7 @@ export const WalletNotConnected = () => {
- Connect wallet to start staking + Connect wallets to start staking {
diff --git a/src/app/components/Stats/Stats.tsx b/src/app/components/Stats/Stats.tsx index f05451d6..15fed872 100644 --- a/src/app/components/Stats/Stats.tsx +++ b/src/app/components/Stats/Stats.tsx @@ -33,7 +33,7 @@ export const Stats = memo(() => { diff --git a/src/utils/time.ts b/src/utils/time.ts index 32a89f14..d7ec1cc4 100644 --- a/src/utils/time.ts +++ b/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 {