WIP: Improve token amount long to use same formatting used in Safe

.changeset/long-decimals-kill.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Shortening the TOKEN_AMOUNT_LONG formatting style and using it in AssetTransfer

src/core/utils/formatterUtils/formatterUtils.test.ts

@@ -121,12 +121,14 @@ describe('formatter utils', () => {
             test.each([
                 { value: -1234.5678, result: '-1,234.5678' },
                 { value: -1234.5678, result: '-1.234,5678', locale: 'de' },
-                { value: -0.0123456789012345678, result: '-0.012345678901234568' },
+                { value: -0.0123456789012345678, result: '-0.012346' },
+                { value: -0.0000001234, result: '-<0.000001' },
                 { value: 0, result: '0' },
+                { value: 0.0000001234, result: '<0.000001' },
                 { value: 0.0012, result: '0.0012' },
                 { value: 0.0012, result: '+0.0012', withSign: true },
-                { value: 0.0123456789012345678, result: '0.012345678901234568' },
-                { value: 0.12345678901234567, result: '0.12345678901234566' },
+                { value: 0.0123456789012345678, result: '0.012346' },
+                { value: 0.12345678901234567, result: '0.123457' },
                 { value: 123.4567, result: '123.4567' },
                 { value: 1234, result: '1,234' },
                 { value: 1234, result: '+1,234', withSign: true },

src/core/utils/formatterUtils/formatterUtils.ts

@@ -53,14 +53,16 @@ class FormatterUtils {
             isCurrency,
             isPercentage,
             withSign,
-            fallback = null,
+            fallback,
             displayFallback,
         } = mergedOptions;
 
         const parsedValue = typeof value === 'number' ? value : parseFloat(value ?? '');
 
+        const fallbackValue = this.getDynamicOption(parsedValue, fallback);
+
         if (Boolean(displayFallback?.(parsedValue)) || isNaN(parsedValue)) {
-            return fallback;
+            return fallbackValue ?? null;
         }
 
         let processedValue = isPercentage ? parsedValue * 100 : parsedValue;

src/core/utils/formatterUtils/formatterUtilsDefinitions.ts

@@ -39,9 +39,10 @@ export interface INumberFormat {
      */
     withSign?: boolean;
     /**
-     * Fallback to display in case the value is null.
+     * Fallback to display in case the value is null. Can be a string or a
+     * function returning a string based on the current value.
      */
-    fallback?: string;
+    fallback?: DynamicOption<number, string>;
     /**
      * Displays the specified fallback when this function returns true, by default the formatter will display
      * the fallback when the value is NaN.
@@ -84,7 +85,9 @@ export const numberFormats: Record<NumberFormat, INumberFormat> = {
         useBaseSymbol: true,
     },
     [NumberFormat.TOKEN_AMOUNT_LONG]: {
-        maxFractionDigits: 18,
+        maxFractionDigits: 6,
+        fallback: (value) => (value < 0 ? '-<0.000001' : '<0.000001'),
+        displayFallback: (value) => Math.abs(value) < 0.000001 && value !== 0,
     },
     [NumberFormat.TOKEN_PRICE]: {
         fixedFractionDigits: (value) => (Math.abs(value) >= 1 ? 2 : undefined),

src/modules/components/asset/assetTransfer/assetTransfer.test.tsx

@@ -39,11 +39,11 @@ describe('<AssetTransfer /> component', () => {
         expect(screen.getByText('$1.00K')).toBeInTheDocument();
     });
 
-    it('renders the signed asset amount and symbol', () => {
+    it('renders the asset amount and symbol', () => {
         const assetSymbol = 'ETH';
         const assetAmount = 10;
         render(createTestComponent({ assetSymbol, assetAmount }));
-        expect(screen.getByText('+10 ETH')).toBeInTheDocument();
+        expect(screen.getByText('10 ETH')).toBeInTheDocument();
     });
 
     it('renders both avatar elements for the from and to addresses', () => {

src/modules/components/asset/assetTransfer/assetTransfer.tsx

@@ -65,8 +65,7 @@ export const AssetTransfer: React.FC<IAssetTransferProps> = (props) => {
     const assetUrl = isNativeTransfer ? undefined : buildEntityUrl({ type: ChainEntityType.TOKEN, id: assetAddress });
 
     const formattedTokenValue = formatterUtils.formatNumber(assetAmount, {
-        format: NumberFormat.TOKEN_AMOUNT_SHORT,
-        withSign: true,
+        format: NumberFormat.TOKEN_AMOUNT_LONG,
         fallback: '-',
     })!;
     const formattedTokenAmount = `${formattedTokenValue} ${assetSymbol}`;