From 85562f5fc9face5afafc89c9b2b68d790ba22e91 Mon Sep 17 00:00:00 2001 From: Misieq01 Date: Tue, 19 Nov 2024 14:25:50 +0100 Subject: [PATCH 1/4] unify formatters --- .../Settings/sections/connections/Network.tsx | 2 +- .../ShareRewardModal/ShareRewardModal.tsx | 4 +- .../sections/ProtectIntro/ProtectIntro.tsx | 4 +- .../segments/Flare/BonusGems/BonusGems.tsx | 6 +- .../MiningView/components/Earnings.tsx | 4 +- src/containers/main/SideBar/Miner/Miner.tsx | 9 ++- .../main/SideBar/Miner/components/Tile.tsx | 4 +- .../SideBar/components/Wallet/HistoryItem.tsx | 4 +- .../main/SideBar/components/Wallet/Wallet.tsx | 4 +- src/hooks/useFormatNumber.ts | 9 --- src/utils/formatBalance.ts | 20 ------ src/utils/formatHashrate.ts | 15 ----- src/utils/formatNumber.ts | 12 ---- src/utils/formatters.ts | 61 +++++++++++++++++++ 14 files changed, 81 insertions(+), 77 deletions(-) delete mode 100644 src/hooks/useFormatNumber.ts delete mode 100644 src/utils/formatBalance.ts delete mode 100644 src/utils/formatHashrate.ts delete mode 100644 src/utils/formatNumber.ts create mode 100644 src/utils/formatters.ts diff --git a/src/containers/floating/Settings/sections/connections/Network.tsx b/src/containers/floating/Settings/sections/connections/Network.tsx index 34dac736d..fd70a7763 100644 --- a/src/containers/floating/Settings/sections/connections/Network.tsx +++ b/src/containers/floating/Settings/sections/connections/Network.tsx @@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'; import { Typography } from '@app/components/elements/Typography.tsx'; import { Stack } from '@app/components/elements/Stack.tsx'; -import { formatHashrate } from '@app/utils/formatHashrate.ts'; import { useMiningStore } from '@app/store/useMiningStore.ts'; import ConnectionStatus from '../connections/ConnectionStatus.tsx'; @@ -12,6 +11,7 @@ import { SettingsGroupTitle, SettingsGroupWrapper, } from '../../components/SettingsGroup.styles.ts'; +import { formatHashrate } from '@app/utils/formatters.ts'; export default function Network() { const { t } = useTranslation('settings'); diff --git a/src/containers/floating/ShareRewardModal/ShareRewardModal.tsx b/src/containers/floating/ShareRewardModal/ShareRewardModal.tsx index 91c70d621..bd3bbf566 100644 --- a/src/containers/floating/ShareRewardModal/ShareRewardModal.tsx +++ b/src/containers/floating/ShareRewardModal/ShareRewardModal.tsx @@ -21,7 +21,7 @@ import gemImage from '../../main/Airdrop/AirdropGiftTracker/images/gem.png'; import { useEffect, useMemo, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { GIFT_GEMS, useAirdropStore } from '@app/store/useAirdropStore'; -import formatBalance from '@app/utils/formatBalance'; +import { formatNumber, FormatPreset } from '@app/utils/formatters'; export type PaperWalletModalSectionType = 'Connect' | 'QRCode'; @@ -54,7 +54,7 @@ export default function ShareRewardModal() { const gemsValue = (referralQuestPoints?.pointsForClaimingReferral || GIFT_GEMS).toLocaleString(); const block = item?.blockHeight || 0; const reward = item?.amount || 0; - const earningsFormatted = useMemo(() => formatBalance(reward).toLowerCase(), [reward]); + const earningsFormatted = useMemo(() => formatNumber(reward, FormatPreset.TXTM_COMPACT).toLowerCase(), [reward]); const shareUrl = `${airdropUrl}/download/${referralCode}?bh=${block}`; diff --git a/src/containers/floating/StagedSecurity/sections/ProtectIntro/ProtectIntro.tsx b/src/containers/floating/StagedSecurity/sections/ProtectIntro/ProtectIntro.tsx index 0d5c04a5c..4d301bed6 100644 --- a/src/containers/floating/StagedSecurity/sections/ProtectIntro/ProtectIntro.tsx +++ b/src/containers/floating/StagedSecurity/sections/ProtectIntro/ProtectIntro.tsx @@ -1,9 +1,9 @@ import { useWalletStore } from '@app/store/useWalletStore'; import { BlackButton, Text, Title } from '../../styles'; import { WalletText, Warning, Wrapper } from './styles'; -import { useFormatBalance } from '@app/utils/formatBalance'; import { Trans, useTranslation } from 'react-i18next'; import LoadingSvg from '@app/components/svgs/LoadingSvg'; +import { formatNumber, FormatPreset } from '@app/utils/formatters'; interface Props { onButtonClick: () => void; @@ -14,7 +14,7 @@ export default function ProtectIntro({ onButtonClick, isLoading }: Props) { const { t } = useTranslation(['staged-security'], { useSuspense: false }); const balance = useWalletStore((state) => state.balance); - const formatted = useFormatBalance(balance || 0); + const formatted = formatNumber(balance || 0, FormatPreset.TXTM_COMPACT); return ( diff --git a/src/containers/main/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Flare/BonusGems/BonusGems.tsx b/src/containers/main/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Flare/BonusGems/BonusGems.tsx index e1af95764..217c4099f 100644 --- a/src/containers/main/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Flare/BonusGems/BonusGems.tsx +++ b/src/containers/main/Airdrop/AirdropGiftTracker/sections/LoggedIn/segments/Flare/BonusGems/BonusGems.tsx @@ -3,7 +3,7 @@ import GemsAnimation from '../GemsAnimation/GemsAnimation'; import { Background, Wrapper } from './styles'; import { Number, Text, TextBottom, TextBottomPosition } from '../styles'; import { useTranslation } from 'react-i18next'; -import { useFormatNumber } from '@app/hooks/useFormatNumber'; +import { formatNumber, FormatPreset } from '@app/utils/formatters'; interface Props { gems: number; @@ -12,7 +12,7 @@ interface Props { export default function BonusGems({ gems, onAnimationComplete }: Props) { const { t } = useTranslation('airdrop', { useSuspense: false }); - const formatNumber = useFormatNumber(); + const formattedNumber = formatNumber(gems, FormatPreset.DECIMAL_COMPACT); useEffect(() => { const timer = setTimeout(() => { @@ -30,7 +30,7 @@ export default function BonusGems({ gems, onAnimationComplete }: Props) { exit={{ opacity: 0, y: -20 }} transition={{ delay: 0.5 }} > - {formatNumber(gems, 1)} + {formattedNumber} diff --git a/src/containers/main/SideBar/Miner/Miner.tsx b/src/containers/main/SideBar/Miner/Miner.tsx index 7f5241748..745e2ef03 100644 --- a/src/containers/main/SideBar/Miner/Miner.tsx +++ b/src/containers/main/SideBar/Miner/Miner.tsx @@ -2,10 +2,8 @@ import Tile from './components/Tile.tsx'; import { MinerContainer, TileContainer, Unit } from './styles.ts'; import ModeSelect from './components/ModeSelect.tsx'; -import { formatHashrate } from '@app/utils/formatHashrate.ts'; import { useMiningStore } from '@app/store/useMiningStore.ts'; -import { useFormatBalance } from '@app/utils/formatBalance.ts'; import { Typography } from '@app/components/elements/Typography.tsx'; import { useAppConfigStore } from '@app/store/useAppConfigStore.ts'; @@ -17,6 +15,7 @@ import { ExpandableTileItem, ExpandedContentTile, } from '@app/containers/main/SideBar/Miner/components/ExpandableTile.styles.ts'; +import { formatHashrate, formatNumber, FormatPreset } from '@app/utils/formatters.ts'; export default function Miner() { const theme = useTheme(); @@ -46,9 +45,9 @@ export default function Miner() { const totalEarnings = cpu_estimated_earnings + gpu_estimated_earnings; const earningsLoading = totalEarnings <= 0 && (isWaitingForCPUHashRate || isWaitingForGPUHashRate); - const totalEarningsFormatted = useFormatBalance(totalEarnings); - const estimatedBalanceFormatted = useFormatBalance(cpu_estimated_earnings); - const gpuEstimatedEarnings = useFormatBalance(gpu_estimated_earnings); + const totalEarningsFormatted = formatNumber(totalEarnings, FormatPreset.TXTM_COMPACT); + const estimatedBalanceFormatted = formatNumber(cpu_estimated_earnings, FormatPreset.TXTM_COMPACT); + const gpuEstimatedEarnings = formatNumber(gpu_estimated_earnings, FormatPreset.TXTM_COMPACT); return ( diff --git a/src/containers/main/SideBar/Miner/components/Tile.tsx b/src/containers/main/SideBar/Miner/components/Tile.tsx index 1a75d310d..2d3d80558 100644 --- a/src/containers/main/SideBar/Miner/components/Tile.tsx +++ b/src/containers/main/SideBar/Miner/components/Tile.tsx @@ -2,9 +2,9 @@ import { StatWrapper, TileItem, TileTop, Unit } from '../styles'; import truncateString from '@app/utils/truncateString.ts'; import { Typography } from '@app/components/elements/Typography.tsx'; import { Chip } from '@app/components/elements/Chip.tsx'; -import { formatPercent } from '@app/utils/formatNumber.ts'; import { colorsAll } from '@app/theme/palettes/colors.ts'; import { SpinnerIcon } from '@app/components/elements/loaders/SpinnerIcon.tsx'; +import { formatNumber, FormatPreset } from '@app/utils/formatters'; export interface TileProps { title: string; @@ -18,7 +18,7 @@ export interface TileProps { function Tile({ title, stats, chipValue = 0, unit, isLoading = false, useLowerCase = false }: TileProps) { const chipRange = Math.ceil(chipValue / 10); const chipColor = colorsAll.ramp[chipRange]; - const chipText = formatPercent(chipValue); + const chipText = formatNumber(chipValue, FormatPreset.PERCENT); return ( diff --git a/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx b/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx index cbaab31c3..4ad4025ce 100644 --- a/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx +++ b/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx @@ -13,7 +13,6 @@ import { Typography } from '@app/components/elements/Typography.tsx'; import { useTheme } from 'styled-components'; import { TariSvg } from '@app/assets/icons/tari.tsx'; -import { useFormatBalance } from '@app/utils/formatBalance.ts'; import { useTranslation } from 'react-i18next'; import { useMemo, useState } from 'react'; import { AnimatePresence } from 'framer-motion'; @@ -22,6 +21,7 @@ import { useShareRewardStore } from '@app/store/useShareRewardStore.ts'; import { Transaction } from '@app/types/wallet.ts'; import { GIFT_GEMS, useAirdropStore } from '@app/store/useAirdropStore.ts'; import { useAppConfigStore } from '@app/store/useAppConfigStore.ts'; +import { formatNumber, FormatPreset } from '@app/utils/formatters.ts'; interface HistoryItemProps { item: Transaction; } @@ -49,7 +49,7 @@ export default function HistoryItem({ item }: HistoryItemProps) { const sharingEnabled = useAppConfigStore((s) => s.sharing_enabled); const { t } = useTranslation('sidebar', { useSuspense: false }); - const earningsFormatted = useFormatBalance(item.amount).toLowerCase(); + const earningsFormatted = formatNumber(item.amount, FormatPreset.TXTM_COMPACT).toLowerCase(); const referralQuestPoints = useAirdropStore((s) => s.referralQuestPoints); const airdropTokens = useAirdropStore((s) => s.airdropTokens); diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.tsx b/src/containers/main/SideBar/components/Wallet/Wallet.tsx index 293a7319d..2384640e5 100644 --- a/src/containers/main/SideBar/components/Wallet/Wallet.tsx +++ b/src/containers/main/SideBar/components/Wallet/Wallet.tsx @@ -1,5 +1,4 @@ import { useCallback, useState } from 'react'; -import { useFormatBalance } from '@app/utils/formatBalance.ts'; import CharSpinner from '@app/components/CharSpinner/CharSpinner.tsx'; import { BalanceVisibilityButton, @@ -22,6 +21,7 @@ import useFetchTx from '@app/hooks/mining/useTransactions.ts'; import { usePaperWalletStore } from '@app/store/usePaperWalletStore.ts'; import { useAppConfigStore } from '@app/store/useAppConfigStore.ts'; import SyncTooltip from './SyncTooltip/SyncTooltip.tsx'; +import { formatNumber, FormatPreset } from '@app/utils/formatters.ts'; export default function Wallet() { const { t } = useTranslation('sidebar', { useSuspense: false }); @@ -33,7 +33,7 @@ export default function Wallet() { const paperWalletEnabled = useAppConfigStore((s) => s.paper_wallet_enabled); const fetchTx = useFetchTx(); - const formatted = useFormatBalance(balance || 0); + const formatted = formatNumber(balance || 0, FormatPreset.TXTM_COMPACT); const sizing = formatted.length <= 6 ? 50 : formatted.length <= 8 ? 44 : 32; const [showBalance, setShowBalance] = useState(true); diff --git a/src/hooks/useFormatNumber.ts b/src/hooks/useFormatNumber.ts deleted file mode 100644 index bb2cd801d..000000000 --- a/src/hooks/useFormatNumber.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useAppConfigStore } from '@app/store/useAppConfigStore'; -import { formatNumber } from '@app/utils/formatNumber'; - -export const useFormatNumber = () => { - const locale = useAppConfigStore((s) => s.application_language); - const systemLang = useAppConfigStore((s) => s.should_always_use_system_language); - - return (value: number, maxDigits = 3) => formatNumber(value, maxDigits, systemLang ? undefined : locale); -}; diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts deleted file mode 100644 index 064686a3a..000000000 --- a/src/utils/formatBalance.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useAppConfigStore } from '@app/store/useAppConfigStore'; -import { formatNumber } from '@app/utils/formatNumber.ts'; -import { useCallback } from 'react'; - -export default function formatBalance(value: number, locale?: string, maxDigitsArg?: number) { - const balance = value / 1_000_000; - const maxDigits = balance > 1_000_000 ? 2 : balance < 10 ? 3 : 1; - return formatNumber(balance, maxDigitsArg || maxDigits, locale); -} - -export const useFormatBalance = (value: number, maxDigitsArg?: number) => { - const locale = useAppConfigStore((s) => s.application_language); - const systemLang = useAppConfigStore((s) => s.should_always_use_system_language); - const handler = useCallback( - () => formatBalance(value, systemLang ? undefined : locale, maxDigitsArg), - [locale, maxDigitsArg, value, systemLang] - ); - - return handler(); -}; diff --git a/src/utils/formatHashrate.ts b/src/utils/formatHashrate.ts deleted file mode 100644 index d266559f6..000000000 --- a/src/utils/formatHashrate.ts +++ /dev/null @@ -1,15 +0,0 @@ -export function formatHashrate(hashrate: number, joinUnit = true): string { - if (hashrate < 1000) { - return joinUnit ? hashrate + ' H/s' : hashrate.toFixed(2); - } else if (hashrate < 1000000) { - return (hashrate / 1000).toFixed(2) + (joinUnit ? ' kH/s' : 'k'); - } else if (hashrate < 1000000000) { - return (hashrate / 1000000).toFixed(2) + (joinUnit ? ' MH/s' : 'M'); - } else if (hashrate < 1000000000000) { - return (hashrate / 1000000000).toFixed(2) + (joinUnit ? ' GH/s' : 'G'); - } else if (hashrate < 1000000000000000) { - return (hashrate / 1000000000000).toFixed(2) + (joinUnit ? ' TH/s' : 'T'); - } else { - return (hashrate / 1000000000000000).toFixed(2) + (joinUnit ? ' PH/s' : 'P'); - } -} diff --git a/src/utils/formatNumber.ts b/src/utils/formatNumber.ts deleted file mode 100644 index 75b08c3b4..000000000 --- a/src/utils/formatNumber.ts +++ /dev/null @@ -1,12 +0,0 @@ -export function formatNumber(value: number, maxDigits = 3, locale?: string): string { - //TODO: add props for customisation - return Intl.NumberFormat(locale, { - notation: 'compact', - maximumFractionDigits: maxDigits, - style: 'decimal', - }).format(value); -} -export function formatPercent(value = 0) { - const p = Math.floor(value || 0).toLocaleString(); - return value > 0 ? `${p}%` : undefined; -} diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts new file mode 100644 index 000000000..01300271f --- /dev/null +++ b/src/utils/formatters.ts @@ -0,0 +1,61 @@ +import i18n from 'i18next'; + +export enum FormatPreset { + PERCENT = 'percent', + TXTM_COMPACT = 'txtm-compact', + TXTM_LONG = 'txtm-crypto', + DECIMAL_COMPACT = 'decimal-compact', +} + +const removeDecimals = (value: number, decimals: number) => { + return value / Math.pow(10, decimals); +}; + +const removeTXTMCryptoDecimals = (value: number) => { + return removeDecimals(value, 6); +}; + +const formatValue = (value: number, options: Intl.NumberFormatOptions = {}): string => + Intl.NumberFormat(i18n.language, options).format(value); + +const formatPercent = (value = 0) => formatValue(value, { style: 'percent', maximumFractionDigits: 2 }); + +const formatTXTMCompact = (value: number) => + formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 2, notation: 'compact', style: 'decimal' }); + +const formatTXTMLong = (value: number) => + formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 2, notation: 'standard', style: 'decimal' }); + +const formatDecimalCompact = (value: number) => formatValue(value, { maximumFractionDigits: 2, style: 'decimal' }); + +export function formatNumber(value: number, preset: FormatPreset): string { + switch (preset) { + case FormatPreset.PERCENT: + return formatPercent(value); + case FormatPreset.TXTM_COMPACT: + return formatTXTMCompact(value); + case FormatPreset.TXTM_LONG: + return formatTXTMLong(value); + case FormatPreset.DECIMAL_COMPACT: + return formatDecimalCompact(value); + default: + console.error('Unknown format preset:', preset); + return '-'; + } +} + +export function formatHashrate(hashrate: number, joinUnit = true): string { + if (hashrate < 1000) { + return joinUnit ? hashrate + ' H/s' : hashrate.toFixed(2); + } else if (hashrate < 1000000) { + return (hashrate / 1000).toFixed(2) + (joinUnit ? ' kH/s' : 'k'); + } else if (hashrate < 1000000000) { + return (hashrate / 1000000).toFixed(2) + (joinUnit ? ' MH/s' : 'M'); + } else if (hashrate < 1000000000000) { + return (hashrate / 1000000000).toFixed(2) + (joinUnit ? ' GH/s' : 'G'); + } else if (hashrate < 1000000000000000) { + return (hashrate / 1000000000000).toFixed(2) + (joinUnit ? ' TH/s' : 'T'); + } else { + return (hashrate / 1000000000000000).toFixed(2) + (joinUnit ? ' PH/s' : 'P'); + } +} From ca2f9162c5d8036c575aadaefe7c96e5540b3a07 Mon Sep 17 00:00:00 2001 From: Misieq01 Date: Tue, 19 Nov 2024 14:41:24 +0100 Subject: [PATCH 2/4] save --- src-tauri/binaries_versions_esmeralda.json | 2 +- src-tauri/binaries_versions_nextnet.json | 2 +- src/utils/formatters.ts | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src-tauri/binaries_versions_esmeralda.json b/src-tauri/binaries_versions_esmeralda.json index 249bc3aac..9674927e8 100644 --- a/src-tauri/binaries_versions_esmeralda.json +++ b/src-tauri/binaries_versions_esmeralda.json @@ -5,7 +5,7 @@ "minotari_node": "=1.8.0-pre.0", "wallet": "=1.8.0-pre.0", "sha-p2pool": "=0.8.0", - "xtrgpuminer": "=0.1.17", + "xtrgpuminer": "=0.1.22", "tor": "=13.5.7" } } \ No newline at end of file diff --git a/src-tauri/binaries_versions_nextnet.json b/src-tauri/binaries_versions_nextnet.json index bbebc7e23..f88c1d06c 100644 --- a/src-tauri/binaries_versions_nextnet.json +++ b/src-tauri/binaries_versions_nextnet.json @@ -5,7 +5,7 @@ "minotari_node": "=1.8.0-rc.0", "wallet": "=1.8.0-rc.0", "sha-p2pool": "=0.8.0", - "xtrgpuminer": "=0.1.17", + "xtrgpuminer": "=0.1.22", "tor": "=13.5.7" } } \ No newline at end of file diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index 01300271f..b00ec2458 100644 --- a/src/utils/formatters.ts +++ b/src/utils/formatters.ts @@ -21,10 +21,15 @@ const formatValue = (value: number, options: Intl.NumberFormatOptions = {}): str const formatPercent = (value = 0) => formatValue(value, { style: 'percent', maximumFractionDigits: 2 }); const formatTXTMCompact = (value: number) => - formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 2, notation: 'compact', style: 'decimal' }); + formatValue(removeTXTMCryptoDecimals(value), { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + notation: 'compact', + style: 'decimal', + }); const formatTXTMLong = (value: number) => - formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 2, notation: 'standard', style: 'decimal' }); + formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 6, notation: 'standard', style: 'decimal' }); const formatDecimalCompact = (value: number) => formatValue(value, { maximumFractionDigits: 2, style: 'decimal' }); From 1eeea8039997dc39411edceec3634fb1a687145e Mon Sep 17 00:00:00 2001 From: Misieq01 Date: Tue, 19 Nov 2024 14:54:01 +0100 Subject: [PATCH 3/4] mvp --- src-tauri/binaries_versions_esmeralda.json | 2 +- src-tauri/binaries_versions_nextnet.json | 2 +- .../main/SideBar/components/Wallet/Wallet.tsx | 14 +++++++++----- src/utils/formatters.ts | 2 +- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src-tauri/binaries_versions_esmeralda.json b/src-tauri/binaries_versions_esmeralda.json index 9674927e8..249bc3aac 100644 --- a/src-tauri/binaries_versions_esmeralda.json +++ b/src-tauri/binaries_versions_esmeralda.json @@ -5,7 +5,7 @@ "minotari_node": "=1.8.0-pre.0", "wallet": "=1.8.0-pre.0", "sha-p2pool": "=0.8.0", - "xtrgpuminer": "=0.1.22", + "xtrgpuminer": "=0.1.17", "tor": "=13.5.7" } } \ No newline at end of file diff --git a/src-tauri/binaries_versions_nextnet.json b/src-tauri/binaries_versions_nextnet.json index f88c1d06c..bbebc7e23 100644 --- a/src-tauri/binaries_versions_nextnet.json +++ b/src-tauri/binaries_versions_nextnet.json @@ -5,7 +5,7 @@ "minotari_node": "=1.8.0-rc.0", "wallet": "=1.8.0-rc.0", "sha-p2pool": "=0.8.0", - "xtrgpuminer": "=0.1.22", + "xtrgpuminer": "=0.1.17", "tor": "=13.5.7" } } \ No newline at end of file diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.tsx b/src/containers/main/SideBar/components/Wallet/Wallet.tsx index 2384640e5..97a887443 100644 --- a/src/containers/main/SideBar/components/Wallet/Wallet.tsx +++ b/src/containers/main/SideBar/components/Wallet/Wallet.tsx @@ -32,12 +32,13 @@ export default function Wallet() { const setShowPaperWalletModal = usePaperWalletStore((s) => s.setShowModal); const paperWalletEnabled = useAppConfigStore((s) => s.paper_wallet_enabled); - const fetchTx = useFetchTx(); - const formatted = formatNumber(balance || 0, FormatPreset.TXTM_COMPACT); - const sizing = formatted.length <= 6 ? 50 : formatted.length <= 8 ? 44 : 32; - const [showBalance, setShowBalance] = useState(true); const [showHistory, setShowHistory] = useState(false); + const [showLongBalance, setShowLongBalance] = useState(false); + + const fetchTx = useFetchTx(); + const formatted = formatNumber(balance || 0, showLongBalance ? FormatPreset.TXTM_LONG : FormatPreset.TXTM_COMPACT); + const sizing = formatted.length <= 6 ? 50 : formatted.length <= 8 ? 44 : 32; const toggleBalanceVisibility = () => setShowBalance((prev) => !prev); const displayValue = balance === null ? '-' : showBalance ? formatted : '*****'; @@ -56,7 +57,10 @@ export default function Wallet() { }; const balanceMarkup = ( - + setShowLongBalance(true)} + onMouseOut={() => setShowLongBalance(false)} + > {t('wallet-balance')} diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index b00ec2458..776abf349 100644 --- a/src/utils/formatters.ts +++ b/src/utils/formatters.ts @@ -29,7 +29,7 @@ const formatTXTMCompact = (value: number) => }); const formatTXTMLong = (value: number) => - formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 6, notation: 'standard', style: 'decimal' }); + formatValue(removeTXTMCryptoDecimals(value), { maximumFractionDigits: 2, notation: 'standard', style: 'decimal' }); const formatDecimalCompact = (value: number) => formatValue(value, { maximumFractionDigits: 2, style: 'decimal' }); From 40e8579ee579927856e4615f445d784e5aad468d Mon Sep 17 00:00:00 2001 From: brianp Date: Fri, 22 Nov 2024 14:43:31 +0100 Subject: [PATCH 4/4] Fix broken merge I made --- src/containers/main/SideBar/components/Wallet/Wallet.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.tsx b/src/containers/main/SideBar/components/Wallet/Wallet.tsx index 1700cbdd3..77ffa4ba3 100644 --- a/src/containers/main/SideBar/components/Wallet/Wallet.tsx +++ b/src/containers/main/SideBar/components/Wallet/Wallet.tsx @@ -1,6 +1,5 @@ import { useCallback, useState } from 'react'; import { useBlockchainVisualisationStore } from '@app/store/useBlockchainVisualisationStore'; -import { useFormatBalance } from '@app/utils/formatBalance.ts'; import CharSpinner from '@app/components/CharSpinner/CharSpinner.tsx'; import { BalanceVisibilityButton, @@ -38,10 +37,6 @@ export default function Wallet() { const recapCount = useBlockchainVisualisationStore((s) => s.recapCount); const setRecapCount = useBlockchainVisualisationStore((s) => s.setRecapCount); - const fetchTx = useFetchTx(); - const formatted = useFormatBalance(balance || 0); - const sizing = formatted.length <= 6 ? 50 : formatted.length <= 8 ? 44 : 32; - const [showBalance, setShowBalance] = useState(true); const [showHistory, setShowHistory] = useState(false); const [showLongBalance, setShowLongBalance] = useState(false);