Implement Locale-Specific Number Formatting for Amount Display

[lempira]

Updated Jira Ticket

Title: Implement Locale-Specific Number Formatting for Amount Display

Description

Currently, AlgoKit Lora displays all numerical amounts (ALGO balances, asset amounts, transaction values, etc.) using a hardcoded US English format. This creates a suboptimal user experience for international users who are accustomed to their local number formatting conventions.

This ticket involves implementing locale-aware number formatting throughout the application to display amounts according to the user's locale preferences, improving accessibility and user experience for our global user base.

Examples of locale-specific formatting:

• US: 100,000,000
• Germany: 100.000.000
• France: 100 000 000
• India: 10,00,00,000
• Switzerland: 100'000'000

Acceptance Criteria

Must Have:

1. ✅ All amount displays should respect user's browser locale by default
2. ✅ Large numbers (1000+) should be formatted with appropriate thousand separators for the locale
3. ✅ Decimal numbers should use the correct decimal separator for the locale
4. ✅ Form inputs should accept numbers in the user's locale format
5. ✅ The implementation should work for both ALGO amounts and custom asset amounts
6. ✅ Compact number formatting (e.g., "1.2M") should respect locale conventions

Should Have:

7. ✅ Consistent formatting across all number display components

Testing:

8. ✅ Unit tests covering different locale scenarios
9. ✅ Manual testing with at least 3 different locales (US, DE, FR)

Technical Details

Implementation Plan

Phase 1: Create Locale-Aware Formatting Utilities

1. Create new utility file: src/utils/number-format.ts

   // New utility functions to be created
   export const formatNumber = (value: number | Decimal, locale?: string) => { ... }
   export const formatAmount = (value: number | Decimal, options?: NumberFormatOptions) => { ... }
   export const getLocale = () => { ... } // Get user's locale from browser

2. Extend existing format utility: Update src/utils/format.ts to include number formatting alongside date formatting

Phase 2: Update Core Display Components

Files to modify:

1. src/utils/compact-amount.ts - Replace hardcoded 'en-US' with dynamic locale:

   // Current: numberAmount.toLocaleString('en-US', { notation: 'compact' })
   // New: numberAmount.toLocaleString(getLocale(), { notation: 'compact' })

2. src/features/common/components/display-algo.tsx - Update amount display:

   // Current: amount.algos.toString()
   // New: formatNumber(amount.algos)

3. src/features/common/components/display-asset-amount.tsx - Update the asAssetDisplayAmount function:

   // Current: displayAmount.toString()
   // New: formatNumber(displayAmount)

Phase 3: Update Form Components

4. src/features/forms/components/number-form-item.tsx - Enhance react-number-format configuration:

   // Add locale-specific thousand and decimal separators
   thousandSeparator={getThousandSeparator(locale)}
   decimalSeparator={getDecimalSeparator(locale)}

Phase 4: Update Transaction and Asset Display

Key components to update:

• src/features/transactions/components/transactions-table-columns.tsx
• src/features/assets/components/asset-details.tsx
• src/features/applications/components/application-global-state-table.tsx
• All transaction wizard form components that display amounts

Phase 5: Testing & Documentation

5. Add tests in src/tests/utils/ for the new formatting utilities
6. Update existing tests that expect hardcoded US formatting

Technical Considerations

• Backward Compatibility: Ensure existing functionality isn't broken
• Fallback Strategy: Default to 'en-US' if locale detection fails

Libraries & Dependencies

• Current: Already using react-number-format (no additional dependencies needed)
• Browser API: Intl.NumberFormat and navigator.language for locale detection
• Testing: Vitest with locale mocking capabilities

[mr-nobody-7]

Hi @lempira. I would like to work on this issue. Could you please assign this to me ?

[lempira]

@mr-nobody-7, thanks for the interest! I saw that you also requested to be assigned to #442. Can we start with 1 issue first and go from there? We are planning to put out more suggested first issues like this. Do you have a preference for an issue?

[mr-nobody-7]

@lempira I would like to work on this issue first.

[lempira]

Great! Let me know if you have any questions.

[mr-nobody-7]

@lempira I'm new to contributions. I need to go through the repo. I'll get back to you surely, if I have any questions.