Chain Badge consolidation & backend delivery

[walmat]

WHEN REVIEWING FILES, MAKE SURE YOU FILTER OUR .png / .json FILES

Blocked until #6344 lands as we currently rely on local ios imagesets for chain selectors.

What changed (plus any additional context for devs)

1. Badge System Refactoring

Changes to Chain Badge Implementation

• Removed the old badge system that used static image assets in ios/Images.xcassets/badges/
• Replaced ChainBadge component with new ChainImage component
• Switched from local image assets to remote image URLs for chain badges
• Added new getChainsBadge() method to backendNetworksStore to manage badge URLs

Component Updates

• Updated all components that previously used ChainBadge or EthCoinIcon to use the new ChainImage component, including:
  • WalletConnectApprovalSheet
  • TransactionDetailsValueAndFeeSection
  • MintSheet
  • ClaimCustomization
  • FastTransactionCoinRow
  • And many others

2. Image Caching Improvements

FastImage Integration

• Added FastImage cache clearing in multiple places:
  • Added to model migrations (v24)
  • Updated clearImageCache function in DevSection to clear both ImgixImage and FastImage caches

try {
  FastImage.clearDiskCache();
  FastImage.clearMemoryCache();
} catch (e) {
  logger.error(new RainbowError(`Error clearing FastImage cache: ${e}`));
}

3. Menu System Updates

Dropdown Menu Refactoring

• Renamed DropdownMenu to ClaimableMenu in claimables section
• Updated menu item interfaces to support remote icons
• Improved handling of menu actions and selections
• Added better TypeScript typing for menu configurations

4. UI/UX Improvements

Chain Badge Positioning

• Added explicit chain badge positioning through a new prop:

chainBadgePosition: {
  x: number;
  y: number;
}

• Improved consistency of badge placement across the app

Component Cleanup

• Removed unused imports and components
• Simplified component props
• Improved type safety across components

This PR represents a significant refactoring of the chain badge system, moving from static assets to remote images while improving the overall architecture and maintainability of the codebase.

Screen recordings / screenshots

// wip

What to test

TestFlight: 1.9.50 (3)
https://www.notion.so/rainbowdotme/App-Chain-Image-QA-Checklist-15fb001b85b480839cb1e0cf1665de12

[brunobar79]

Launch in simulator or device for 31c82d1

[brunobar79]

Launch in simulator or device for 5f8f028

[brunobar79]

Launch in simulator or device for a282bd6

[ibrahimtaveras00]

https://linear.app/rainbow/issue/APP-2216/chain-badge-consolidation-and-backend-delivery-6328-qa-bug-epic

[brunobar79]

Launch in simulator or device for c3048bc

[brunobar79]

Launch in simulator or device for a22001a

[derHowie]

Lgtm! Initially I was going to post the PoW screenshots here but it would probably clutter the thread. I have them if needed.

I checked 85% of the QA checklist and didn't see any issues other than zksync era missing an icon and the avaiable on other networks badges looking off in the image below:

[brunobar79]

Launch in simulator or device for d5615d1

[brunobar79]

Launch in simulator or device for d8624f2

[brunobar79]

Launch in simulator or device for 3719759

[brunobar79]

Launch in simulator or device for 62069b2

[brunobar79]

Launch in simulator or device for 9be06c7

[ibrahimtaveras00]

Bug fixes all look good on both OS's, QA Passed ✅

[brunobar79]

Launch in simulator or device for 108597d

[walmat]

Waiting to merge until @christianbaroni introduces a few positioning changes to the ChainImage component