Abbreviate huge numbers (#214)

* abbreviate huge numbers

* abbreviate lengthy values

* Update app/ts/library/utilities.ts

Co-authored-by: KillariDev <[email protected]>

* Update app/ts/library/utilities.ts

Co-authored-by: KillariDev <[email protected]>

* remove window debug lines

* fix unused import

---------

Co-authored-by: KillariDev <[email protected]>

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.<small>{'0'.repeat(leadingZeros)}</small>{coefficient}</>
+	}
+
+	const prefixes = ['', 'k', 'M', 'G']
+	const prefix = prefixes[Math.floor(exponent/3)]
+	const displayValue = coefficient.toFixed(3)
+
+	return <>{displayValue}{prefix}</>
+}

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<HTMLDialogElement | null>(null)
@@ -178,13 +179,11 @@ const AssetBalance = ({ token }: { token?: ERC20Token }) => {
 		case 'rejected':
 			return <div>error</div>
 		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}
-				</>
+				<><AbbreviatedValue floatValue={numericValue} /> {symbol}</>
 			)
 	}
 }

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 }
+}