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