diff --git a/packages/neuron-ui/src/components/AddressBook/index.tsx b/packages/neuron-ui/src/components/AddressBook/index.tsx index 5bcd15bd13..19c5e5d7c3 100644 --- a/packages/neuron-ui/src/components/AddressBook/index.tsx +++ b/packages/neuron-ui/src/components/AddressBook/index.tsx @@ -118,7 +118,7 @@ const AddressBook = ({ onClose }: { onClose?: () => void }) => { return `${HIDE_BALANCE} CKB` } return ( - + {`${shannonToCKBFormatter(balance)} CKB`} ) diff --git a/packages/neuron-ui/src/components/Balance/index.tsx b/packages/neuron-ui/src/components/Balance/index.tsx index dec27a4b9d..6a2b073e35 100644 --- a/packages/neuron-ui/src/components/Balance/index.tsx +++ b/packages/neuron-ui/src/components/Balance/index.tsx @@ -17,7 +17,7 @@ const Balance = ({ balance, connectionStatus, syncStatus }: BalanceProps) => { return ( <> {`${t('overview.balance')}:`} - + {shannonToCKBFormatter(balance)} diff --git a/packages/neuron-ui/src/components/DepositDialog/hooks.ts b/packages/neuron-ui/src/components/DepositDialog/hooks.ts index 41fa272d06..6465bd25a1 100644 --- a/packages/neuron-ui/src/components/DepositDialog/hooks.ts +++ b/packages/neuron-ui/src/components/DepositDialog/hooks.ts @@ -136,7 +136,7 @@ export const useGenerateDaoDepositTx = ({ payload: res, }) if (isDepositAll) { - setMaxDepositValue(shannonToCKBFormatter(res?.outputs[0]?.capacity ?? '0', false, '')) + setMaxDepositValue(shannonToCKBFormatter(res?.outputs[0]?.capacity ?? '0', false, false)) if (!isBalanceReserved) { setErrorMessage(t('messages.remain-ckb-for-withdraw')) } @@ -181,7 +181,7 @@ export const useDepositValue = (balance: string, showDepositDialog: boolean) => const amount = shannonToCKBFormatter( ((BigInt(percent) * BigInt(balance)) / BigInt(PERCENT_100)).toString(), false, - '' + false ) setDepositValue(padFractionDigitsIfDecimal(amount, 8)) }, diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx index c31269a8f0..5801fc1980 100644 --- a/packages/neuron-ui/src/components/NervosDAO/index.tsx +++ b/packages/neuron-ui/src/components/NervosDAO/index.tsx @@ -288,7 +288,7 @@ const NervosDAO = () => { ) : ( @@ -303,7 +303,7 @@ const NervosDAO = () => {
{onlineAndSynced && !isPrivacyMode ? ( diff --git a/packages/neuron-ui/src/components/NervosDAODetail/index.tsx b/packages/neuron-ui/src/components/NervosDAODetail/index.tsx index f4ed335c33..550999bc2a 100644 --- a/packages/neuron-ui/src/components/NervosDAODetail/index.tsx +++ b/packages/neuron-ui/src/components/NervosDAODetail/index.tsx @@ -99,7 +99,7 @@ const TabsVariantWithTxTypes = ({ {isIncomeShow ? (
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx index 36256afcdb..76316dbfa6 100644 --- a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx +++ b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx @@ -220,7 +220,7 @@ export const DAORecord = ({ ) : ( {`${shannonToCKBFormatter(capacity)} CKB`} diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index c9984eb15b..9ce1a0a94b 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -178,7 +178,7 @@ const Overview = () => { )} {showBalance ? ( - + {shannonToCKBFormatter(balance)} ) : ( @@ -191,7 +191,7 @@ const Overview = () => { {t('overview.locked-balance')} : {showBalance ? ( - + {shannonToCKBFormatter(lockedBalance)} ) : ( diff --git a/packages/neuron-ui/src/components/Send/hooks.ts b/packages/neuron-ui/src/components/Send/hooks.ts index b0dd76f996..d75947b0af 100644 --- a/packages/neuron-ui/src/components/Send/hooks.ts +++ b/packages/neuron-ui/src/components/Send/hooks.ts @@ -103,7 +103,7 @@ const updateTransactionWith = if (type === 'all') { const fmtItems = items.map((item, i) => ({ ...item, - amount: shannonToCKBFormatter(res.result.outputs[i].capacity, false, ''), + amount: shannonToCKBFormatter(res.result.outputs[i].capacity, false, false), })) const totalAmount = outputsToTotalAmount(fmtItems) setTotalAmount(totalAmount) diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts b/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts index e2463e3c31..b3fc8e71b6 100644 --- a/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts +++ b/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts @@ -189,7 +189,7 @@ export const useSendInfo = ({ ...v.slice(0, v.length - 1), { ...v[v.length - 1], - amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, ''), + amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, false), disabled: true, }, ]) diff --git a/packages/neuron-ui/src/utils/formatters.ts b/packages/neuron-ui/src/utils/formatters.ts index 45dc1f36e0..55273b9a7f 100644 --- a/packages/neuron-ui/src/utils/formatters.ts +++ b/packages/neuron-ui/src/utils/formatters.ts @@ -1,6 +1,6 @@ -import { formatUnit } from '@ckb-lumos/bi' import { molecule } from '@ckb-lumos/codec' import { blockchain } from '@ckb-lumos/base' +import { formatUnit, ckbDecimals } from '@ckb-lumos/bi' import { TFunction } from 'i18next' import { FailureFromController } from 'services/remote/remoteApiWrapper' import { CapacityUnit } from './enums' @@ -104,40 +104,16 @@ export const CKBToShannonFormatter = (amount: string = '0', unit: CapacityUnit = } } -export const shannonToCKBFormatter = (shannon: string, showPositiveSign?: boolean, delimiter: string = ',') => { +export const shannonToCKBFormatter = (shannon: string, showPositiveSign?: boolean, showCommaSeparator = true) => { if (Number.isNaN(+shannon)) { - console.warn(`Shannon is not a valid number`) + console.warn(`Invalid shannon value: ${shannon}`) return shannon } - if (shannon === null) { - return '0' - } - let sign = '' - if (shannon.startsWith('-')) { - sign = '-' - } else if (showPositiveSign) { - sign = '+' - } - const unsignedShannon = shannon.replace(/^-?0*/, '') - let unsignedCKB = '' - if (unsignedShannon.length <= 8) { - unsignedCKB = `0.${unsignedShannon.padStart(8, '0')}`.replace(/\.?0+$/, '') - } else { - const decimal = `.${unsignedShannon.slice(-8)}`.replace(/\.?0+$/, '') - const int = unsignedShannon.slice(0, -8).replace(/\^0+/, '') - unsignedCKB = `${( - int - .split('') - .reverse() - .join('') - .match(/\d{1,3}/g) || ['0'] - ) - .join(delimiter) - .split('') - .reverse() - .join('')}${decimal}` - } - return +unsignedCKB === 0 ? '0' : `${sign}${unsignedCKB}` + return new Intl.NumberFormat('en-US', { + useGrouping: showCommaSeparator, + signDisplay: showPositiveSign && +shannon > 0 ? 'always' : 'auto', + maximumFractionDigits: ckbDecimals, + }).format(formatUnit(BigInt(shannon ?? '0'), 'ckb') as any) } export const localNumberFormatter = (num: string | number | bigint = 0) => {