Chain Badge consolidation & backend delivery #6328

walmat · 2024-12-12T18:12:54Z

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

src/components/expanded-state/AvailableNetworksv2.tsx

…ainnet sizing

brunobar79 · 2024-12-17T20:08:42Z

Launch in simulator or device for 31c82d1

brunobar79 · 2024-12-18T19:14:15Z

Launch in simulator or device for 5f8f028

brunobar79 · 2024-12-19T22:04:47Z

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 · 2025-01-17T12:07:53Z

Launch in simulator or device for d8afaab

src/components/expanded-state/asset/ChartExpandedState.js

…nbow-me/rainbow into @matthew/backend-chain-badge

derHowie

2nd round lgtm

* start work on backend driven chain badge * Update src/components/expanded-state/AvailableNetworksv2.tsx * consolidate SwapCoinIcon into RainbowCoinIcon * replace ChainBadge with ChainImage and consolidate + cleanup * fix missing native asset icon URL from swaps * more badge sizing fixes * add migration and clearing of FastImage cache in dev section to fix mainnet sizing * fix lint * fix up swaps * address more swaps nuances * more sizing issues fixed * remove size={40} from RainbowCoinIcon as it's default * Convert Chain Selection DropdownMenu to Backend Networks (#6344) * start work on converting existing chain selection dropdowns to Zeego * available networks v2 convert * add token icons to claim dropdown and fix but with AvailableNetworks not showing ever * latest changes to try to get hitslop to work * refactor trending tokens to remove SwapCoinIcon and fix APP-2217 * fix APP-2218 * chain badge sizing fix on sign transaction sheet * remove debug layouts * fixes * remove hitslop prop and bake it into children * remove hitslop prop from claimable menu * port over Kane's work for dropdown menu * fix instances of menu item being checkbox * Fix most chain badge issues * Remove unrelated change * Update src/components/expanded-state/asset/ChartExpandedState.js * fix radial gradient color issue + spacing fix * Fix network switcher badges * Remove unused RainbowCoinIcon styles * Fix EthCard mainnet icon * Fix MintSheet chain badge * Fix GasSpeedButton legacy network chain badge * fix ClaimCustomization badge invalid size and position * Fix MintsSheet chain badges * Fix L2Disclaimer network name casing * fix transaction details row size change * fix SignTransactionSheet size change * fix WalletConnectApprovalSheet position relative * revert animated coin icon changes * revert changes * revert collectible send row position change * fix WalletConnectV2ListItem * remove change to useWallets * fix AddCash ProviderCard * cleanup unused vars in ClaimCustomization * fix two coin icons sizing and position on transaction details row --------- Co-authored-by: Ibrahim Taveras <[email protected]> Co-authored-by: Christian Baroni <[email protected]>

start work on backend driven chain badge

3c5ec4f

walmat commented Dec 12, 2024

View reviewed changes

src/components/expanded-state/AvailableNetworksv2.tsx Outdated Show resolved Hide resolved

Update src/components/expanded-state/AvailableNetworksv2.tsx

a339e99

brunobar79 added the release for release blockers and release candidate branches label Dec 12, 2024

consolidate SwapCoinIcon into RainbowCoinIcon

0fae303

walmat removed the release for release blockers and release candidate branches label Dec 13, 2024

walmat added 10 commits December 16, 2024 10:30

Merge branch 'develop' into @matthew/backend-chain-badge

909d8fd

replace ChainBadge with ChainImage and consolidate + cleanup

2e0dca6

fix missing native asset icon URL from swaps

ef79118

more badge sizing fixes

e9f7542

add migration and clearing of FastImage cache in dev section to fix m…

ab5192b

…ainnet sizing

fix lint

17c5282

fix up swaps

df53969

address more swaps nuances

7903783

more sizing issues fixed

9615017

remove size={40} from RainbowCoinIcon as it's default

2b110f5

walmat marked this pull request as ready for review December 17, 2024 18:42

walmat requested review from derHowie, benisgold and ibrahimtaveras00 December 17, 2024 18:42

Merge branch 'develop' into @matthew/backend-chain-badge

a672fea

walmat added the blocked Blocked by anything (design, UI work, other task, etc) label Dec 17, 2024

merge migrations

854663a

walmat added 2 commits December 19, 2024 13:22

chore: merge

5647e22

chore: merge

f367641

ibrahimtaveras00 requested changes Dec 20, 2024

View reviewed changes

merge develop

2a3d313

walmat commented Jan 17, 2025

View reviewed changes

src/components/expanded-state/asset/ChartExpandedState.js Outdated Show resolved Hide resolved

walmat and others added 23 commits January 17, 2025 13:43

Update src/components/expanded-state/asset/ChartExpandedState.js

b042ab2

fix radial gradient color issue + spacing fix

7bfdc90

Fix network switcher badges

979ecb9

Remove unused RainbowCoinIcon styles

ea6c8d3

Fix EthCard mainnet icon

c948cff

Fix MintSheet chain badge

59bf0d7

Fix GasSpeedButton legacy network chain badge

dadaeec

fix ClaimCustomization badge invalid size and position

ba55644

Merge branch '@matthew/backend-chain-badge' of https://github.com/rai…

9861046

…nbow-me/rainbow into @matthew/backend-chain-badge

Fix MintsSheet chain badges

47e8895

Fix L2Disclaimer network name casing

618465c

fix transaction details row size change

a08b8d9

fix SignTransactionSheet size change

93787ff

fix WalletConnectApprovalSheet position relative

07e22bd

Merge branch '@matthew/backend-chain-badge' of https://github.com/rai…

df27bc0

…nbow-me/rainbow into @matthew/backend-chain-badge

revert animated coin icon changes

8150ec0

revert changes

f17f103

revert collectible send row position change

3fa81e5

fix WalletConnectV2ListItem

3077858

remove change to useWallets

ef0ca65

fix AddCash ProviderCard

35c97d2

cleanup unused vars in ClaimCustomization

a3256eb

fix two coin icons sizing and position on transaction details row

f74398b

derHowie self-requested a review January 17, 2025 22:08

derHowie approved these changes Jan 17, 2025

View reviewed changes

derHowie merged commit 6249021 into develop Jan 17, 2025
6 of 8 checks passed

derHowie deleted the @matthew/backend-chain-badge branch January 17, 2025 22:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chain Badge consolidation & backend delivery #6328

Chain Badge consolidation & backend delivery #6328

walmat commented Dec 12, 2024 •

edited

Loading

brunobar79 commented Dec 17, 2024

brunobar79 commented Dec 18, 2024

brunobar79 commented Dec 19, 2024

ibrahimtaveras00 left a comment

brunobar79 commented Jan 17, 2025

derHowie left a comment

Chain Badge consolidation & backend delivery #6328

Chain Badge consolidation & backend delivery #6328

Conversation

walmat commented Dec 12, 2024 • edited Loading

What changed (plus any additional context for devs)

1. Badge System Refactoring

Changes to Chain Badge Implementation

Component Updates

2. Image Caching Improvements

FastImage Integration

3. Menu System Updates

Dropdown Menu Refactoring

4. UI/UX Improvements

Chain Badge Positioning

Component Cleanup

Screen recordings / screenshots

What to test

brunobar79 commented Dec 17, 2024

brunobar79 commented Dec 18, 2024

brunobar79 commented Dec 19, 2024

ibrahimtaveras00 left a comment

Choose a reason for hiding this comment

brunobar79 commented Jan 17, 2025

derHowie left a comment

Choose a reason for hiding this comment

walmat commented Dec 12, 2024 •

edited

Loading