diff --git a/app/ts/components/AbbreviatedValue.tsx b/app/ts/components/AbbreviatedValue.tsx new file mode 100644 index 00000000..6ddcf0a3 --- /dev/null +++ b/app/ts/components/AbbreviatedValue.tsx @@ -0,0 +1,16 @@ +import { parseNumericTerm } from '../library/utilities.js' + +export const AbbreviatedValue = ({ floatValue }: { floatValue: number }) => { + const { coefficient, exponent } = parseNumericTerm(floatValue) + + if (exponent < 0) { + const leadingZeros = Math.abs(exponent) - 1 + return <>0.{'0'.repeat(leadingZeros)}{coefficient} + } + + const prefixes = ['', 'k', 'M', 'G'] + const prefix = prefixes[Math.floor(exponent/3)] + const displayValue = coefficient.toFixed(3) + + return <>{displayValue}{prefix} +} diff --git a/app/ts/components/TokenPicker.tsx b/app/ts/components/TokenPicker.tsx index 900c9ffa..7799cab3 100644 --- a/app/ts/components/TokenPicker.tsx +++ b/app/ts/components/TokenPicker.tsx @@ -11,6 +11,7 @@ import { ERC20Token, HexString } from '../schema.js' import { AsyncText } from './AsyncText.js' import * as Icon from './Icon/index.js' import { useWallet } from '../context/Wallet.js' +import { AbbreviatedValue } from './AbbreviatedValue.js' export const TokenPicker = () => { const { ref, signal: dialogRef } = useSignalRef(null) @@ -178,13 +179,11 @@ const AssetBalance = ({ token }: { token?: ERC20Token }) => { case 'rejected': return
error
case 'resolved': - if (!token) return <>{formatEther(query.value.value)} - - const displayValue = formatUnits(query.value.value, token.decimals) + const stringValue = token ? formatUnits(query.value.value, token.decimals) : formatEther(query.value.value) + const symbol = token ? token.symbol : 'ETH' + const numericValue = parseFloat(stringValue) return ( - <> - {displayValue} {token.symbol} - + <> {symbol} ) } } diff --git a/app/ts/library/utilities.ts b/app/ts/library/utilities.ts index 1ec2419b..0d7f8542 100644 --- a/app/ts/library/utilities.ts +++ b/app/ts/library/utilities.ts @@ -64,3 +64,9 @@ export function areEqualStrings(a: string, b: string, caseSensitive?: true) { if (caseSensitive) return a === b return a.toLowerCase() === b.toLowerCase() } + +export function parseNumericTerm(num: number): { coefficient: number, exponent: number } { + const [c, e] = num.toExponential().split('e') + const exponent = parseInt(e) + return { coefficient: parseFloat(c), exponent } +}