Add Custom Address Label Mapping with File Upload

[lempira]

Description:

Lora currently uses Non-Fungible Domains (NFDs) from https://docs.nf.domains/ to create human-readable labels for addresses throughout the application.

About NFDs: NFDs are unique, digital identities built on Algorand that provide human-readable names for blockchain addresses (e.g., staci.algo ➡️ DC7K77...EK3Qv). They use reverse resolution to convert long, confusing addresses into readable names, making blockchain interactions more user-friendly. NFDs can also store additional metadata like social media profiles and contact information.

The Need: While NFDs provide excellent decentralized identity resolution, users often need custom labeling for addresses that don't have NFDs or want organization-specific labels (e.g., "Treasury Wallet", "Dev Team Multisig", "Marketing Budget").

The Solution: We need to add functionality that allows users to load a custom label mapping file that will take precedence over NFD labels when displaying addresses. This will enable users to define their own custom labels for specific addresses that will be displayed anywhere an address appears in Lora, while maintaining all existing NFD functionality.

Acceptance Criteria:

Primary Requirements:

1. ✅ Users can upload a custom label mapping file through the Settings page
2. ✅ Custom labels take precedence over NFD labels when both exist for the same address
3. ✅ Custom labels are displayed anywhere addresses are currently shown in the application
4. ✅ Existing NFD functionality remains completely unchanged
5. ✅ Custom labels persist across application sessions
6. ✅ Users can update/replace their custom label mapping file
7. ✅ Users can clear/remove custom label mappings

File Format Requirements:

1. ✅ Support JSON file format with address-to-label mapping
2. ✅ File validation to ensure proper format
3. ✅ Clear error messages for invalid file formats or addresses

Display Requirements:

1. ✅ Custom labels appear in all components that currently display addresses:
   • Account links and address displays
   • Transaction details (sender, receiver, etc.)
   • Asset details (creator, manager, etc.)
   • Application details
   • Transaction graphs
   • ABI method arguments
   • All other address display locations
2. ✅ (Suggestion) Custom labels should have visual indication they are custom (subtle styling difference)

User Experience:

1. ✅ Clear UI in Settings page for managing custom labels
2. ✅ File upload with drag-and-drop support
3. ✅ Preview/validation of loaded labels before applying
4. ✅ Status indicators showing when custom labels are active

Technical Details:

Suggested Implementation Plan:

1. Data Storage (Priority 1)

• Create a new atom for storing custom label mappings using atomWithStorage
• Location: src/features/settings/data/custom-labels.ts
• Storage key: 'custom-address-labels'
• Type: Record<Address, string> (address -> label mapping)

2. Settings UI Integration (Priority 1)

• Add custom label management section to src/features/settings/components/settings.tsx
• Create new component: src/features/settings/components/custom-labels-manager.tsx
• Utilize existing file upload components:
  • src/features/forms/components/file-form-item.tsx
  • src/features/forms/components/file-input.tsx
• Add file validation to make sure the file conforms to the format you specify.

3. Address Display Logic Enhancement (Priority 2)

• Modify src/features/accounts/components/account-link.tsx to check custom labels first
• Update src/features/accounts/components/address-or-nfd-link.tsx to accept custom labels
• Create new hook: src/features/settings/data/use-custom-label.ts for label resolution
• Priority order: Custom Label > NFD > Ellipsed Address

4. Integration Points (Priority 3)

• Update all 30+ components identified in grep search that use AccountLink or AddressOrNfdLink
• Ensure consistent label display across:
  • Transaction components
  • Asset components
  • Application components
  • Transaction graph components
  • ABI method displays

File Format Specification:

{
  "DHMCHBN4W5MBO72C3L3ZP6GGJHQ4OR6SW2EP3VDEJ5VHT4MERQLCTVW6PU": "Treasury Wallet",
  "ANOTHER-VALID-ALGORAND-ADDRESS": "Dev Team Multisig",
  "YET-ANOTHER-ADDRESS": "Marketing Budget"
}

Key Files to Modify:

• src/features/settings/components/settings.tsx - Add custom labels section
• src/features/settings/data/custom-labels.ts - New data management
• src/features/accounts/components/account-link.tsx - Label resolution logic
• src/features/accounts/components/address-or-nfd-link.tsx - Display logic

Testing Considerations:

• Unit tests for label resolution priority
• Integration tests for file upload and validation
• UI tests for settings page functionality
• Update existing tests to show that custom labels are shown in existing components.

Performance Considerations:

• Use existing atom caching patterns similar to NFD implementation
• Leverage atomWithStorage for persistence similar to network configs
• Check to see if there are any noticeable performance impacts.

[mr-nobody-7]

Hi! @lempira 👋 I'd love to work on this issue. Could you please assign this issue to me ?