fix: match Quick Buy token icon and chain badge styles to homepage token list (TSA-647) (MetaMask#31459)

## **Description**

<!-- mms-check: type=text required=true -->

The Quick Buy sheet rendered its token icon + chain badge differently
from the rest of the app: the network badge was the fixed-size,
square-cornered `BadgeNetwork` from the design system package, oversized
relative to the token avatar, and token artwork resolution missed the
homepage's checksummed-address CDN fallback (so tokens like CAKE showed
different artwork than the homepage token list).

Fix — reuse the homepage Token list pattern (`TokenListItem` /
`AssetLogo`) via a new shared `QuickBuyTokenIcon` component:

- Fully round design-system `AvatarToken`, wrapped in the
component-library `BadgeWrapper`/`Badge` (variant `Network`, circular,
scaled to half the avatar, bottom-right) — exactly what `TokenListItem`
uses.
- Same data sources: `getNetworkImageSource` for the badge; token image
→ `getBridgeTokenImageSource` (keeps natives working via SLIP-44 asset
ids) → `getFallbackAssetImageUrls` (lowercased + checksummed CDN
variants), cycled by the shared `useSmartImageFallback` hook.
- Adopted in the "Pay with / Receive" footer pill (size Sm) and the
token-select rows (size Md); removed the now-dead `BadgeNetwork`
plumbing.

Note: one expected `@typescript-eslint/no-deprecated` warning for the
component-library `Badge` — the homepage `TokenListItem` carries the
identical unsuppressed warning; matching it is intentional.

Jira: [TSA-647](https://consensyssoftware.atlassian.net/browse/TSA-647)

## **Changelog**

<!-- mms-check: type=changelog required=true -->

CHANGELOG entry: Fixed token icon and network badge styling in the Quick
Buy sheet to match the wallet token list

## **Related issues**

<!-- mms-check: type=issue-link required=true -->

Fixes: [TSA-647](https://consensyssoftware.atlassian.net/browse/TSA-647)

## **Manual testing steps**

<!-- mms-check: type=manual-testing required=true -->

```gherkin
Feature: Quick Buy token icon and chain badge styles

  Scenario: user compares Quick Buy icons with the homepage token list
    Given the user holds CAKE on BNB Chain

    When the user opens the Quick Buy sheet and the "Pay with" picker
    Then the token icon is fully round with the same artwork as the homepage token list
    And the network badge is circular, smaller than the token icon, anchored bottom-right
```

## **Screenshots/Recordings**

<!-- mms-check: type=screenshot required=true -->

### **Before**

NA

### **After**

Tokens view:
<img width="436" height="87" alt="Screenshot 2026-06-11 at 16 50 47"
src="https://github.com/user-attachments/assets/20168d22-81a5-4564-9bd2-55a2b4b053f7"
/>

Quickbuy view:
<img width="439" height="423" alt="Screenshot 2026-06-12 at 16 53 02"
src="https://github.com/user-attachments/assets/8f88c9b4-9162-462c-8592-bc4b2fdf6176"
/>
<img width="418" height="383" alt="Screenshot 2026-06-11 at 16 51 51"
src="https://github.com/user-attachments/assets/6f739090-579e-41ca-976e-941f1fc7c2b1"
/>


## **Pre-merge author checklist**

<!-- mms-check: type=checklist required=true -->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- Generated with the help of the pr-description AI skill -->


[TSA-647]:
https://consensyssoftware.atlassian.net/browse/TSA-647?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Scoped UI and image-resolution changes in Quick Buy plus a small,
tested adjustment to the shared image-fallback hook; no auth, payments,
or data-path changes.
> 
> **Overview**
> Aligns **Quick Buy** token icons and chain badges with the homepage
token list (TSA-647) by introducing **`QuickBuyTokenIcon`**, used in the
pay-with footer pill and pay-with rows instead of design-system
`BadgeNetwork` + ad hoc `AvatarToken` wiring.
> 
> The shared component uses component-library **`BadgeWrapper`/`Badge`
(Network)** for the circular bottom-right chain badge, and resolves
artwork like **`AssetLogo`**: token image → bridge/native source →
**`getFallbackAssetImageUrls`** (including checksummed CDN), with
**`useSmartImageFallback`** cycling on load errors.
> 
> **`useSmartImageFallback`** now **resets the fallback index when the
`sources` array changes**, so switching tokens after image errors does
not stick on a stale fallback index; coverage is added in hook and
component tests.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ad88e1f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Xavier Brochard <xavier-brochard@users.noreply.github.com>
Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>

Author: 4 people

app/components/UI/Assets/components/AssetLogo/AssetLogo.hook.test.tsx

@@ -135,6 +135,56 @@ describe('useSmartImageFallback', () => {
     expect(result.current.source).toStrictEqual(updatedSources[0]);
   });
 
+  it('resets fallback index when sources change after onError cycles', () => {
+    const initialSources = createSourcesFromUris([
+      'https://example.com/reset-token-a-primary.png',
+      'https://example.com/reset-token-a-fallback.png',
+    ]);
+    const newSources = createSourcesFromUris([
+      'https://example.com/reset-token-b-primary.png',
+      'https://example.com/reset-token-b-fallback.png',
+    ]);
+
+    const { result, rerender } = renderHook(
+      ({ hookSources }) => useSmartImageFallback(hookSources),
+      { initialProps: { hookSources: initialSources } },
+    );
+
+    act(() => {
+      result.current.onError();
+    });
+    expect(result.current.source).toStrictEqual(initialSources[1]);
+
+    rerender({ hookSources: newSources });
+
+    expect(result.current.source).toStrictEqual(newSources[0]);
+  });
+
+  it('preserves fallback index when sources reference changes but URIs stay the same', () => {
+    const makeSources = () =>
+      createSourcesFromUris([
+        'https://example.com/stable-ref-primary.png',
+        'https://example.com/stable-ref-fallback.png',
+      ]);
+
+    const { result, rerender } = renderHook(
+      ({ hookSources }) => useSmartImageFallback(hookSources),
+      { initialProps: { hookSources: makeSources() } },
+    );
+
+    act(() => {
+      result.current.onError();
+    });
+    const sourceAfterError = result.current.source;
+    expect(sourceAfterError).toStrictEqual({
+      uri: 'https://example.com/stable-ref-fallback.png',
+    });
+
+    rerender({ hookSources: makeSources() });
+
+    expect(result.current.source).toStrictEqual(sourceAfterError);
+  });
+
   it('persists dead images across hook instances', () => {
     const sources = createSourcesFromUris([
       'https://example.com/persist-primary.png',

app/components/UI/Assets/components/AssetLogo/AssetLogo.hook.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { ImageURISource } from 'react-native';
 import { createRotatingSet } from './AssetLogo.utils';
 
@@ -11,6 +11,12 @@ export function useSmartImageFallback(sources: ImageURISource[]) {
   const LAST_ITEM_INDEX = validSources.length - 1;
 
   const [index, setIndex] = useState(0);
+  const uriKey = sources.map((s) => s.uri ?? '').join('\0');
+  const prevUriKeyRef = useRef(uriKey);
+  if (prevUriKeyRef.current !== uriKey) {
+    prevUriKeyRef.current = uriKey;
+    setIndex(0);
+  }
   const currentSource: ImageURISource | undefined =
     validSources[index] || sources[sources.length - 1];
 

app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/components/QuickBuyActionFooter.tsx

@@ -7,24 +7,19 @@ import {
   Text,
   TextVariant,
   TextColor,
-  AvatarToken,
   AvatarTokenSize,
   Icon,
   IconColor,
   IconName,
   IconSize,
-  BadgeWrapper,
-  BadgeWrapperPosition,
-  BadgeNetwork,
 } from '@metamask/design-system-react-native';
 import { TouchableOpacity } from 'react-native';
 import { strings } from '../../../../../../../../locales/i18n';
 import QuickBuyConfirmButton from '../QuickBuyConfirmButton';
 import QuickBuyBanners from '../QuickBuyBanners';
 import { useQuickBuyContext } from '../useQuickBuyContext';
 import { QuickBuyPercentageSlider } from './QuickBuyPercentageSlider';
-import { getNetworkImageSource } from '../../../../../../../util/networks';
-import { getBridgeTokenImageSource } from '../getBridgeTokenImageSource';
+import QuickBuyTokenIcon from './QuickBuyTokenIcon';
 
 const QuickBuyActionFooter: React.FC = () => {
   const {
@@ -41,7 +36,6 @@ const QuickBuyActionFooter: React.FC = () => {
     isHardwareSolanaBlocked,
     tradeMode,
     sourceToken,
-    sourceChainId,
     sourceBalanceFiat,
     destBalanceFiat,
     destToken,
@@ -51,23 +45,9 @@ const QuickBuyActionFooter: React.FC = () => {
   } = useQuickBuyContext();
 
   const pickerToken = tradeMode === 'sell' ? selectedDestStable : sourceToken;
-  const pickerChainId =
-    tradeMode === 'sell'
-      ? (selectedDestStable?.chainId as
-          | import('@metamask/utils').Hex
-          | undefined)
-      : sourceChainId;
-  // Both balances are driven by live, selector-backed state (TSA-632):
-  // `sourceBalanceFiat` from `useLatestBalance` re-keyed off the live cached
-  // balance, and `destBalanceFiat` resynced from the reactive receive-token
-  // list. Either updates the pill the moment the underlying balance changes.
   const pickerBalanceFiat =
     tradeMode === 'sell' ? destBalanceFiat : sourceBalanceFiat;
 
-  const networkImage = pickerChainId
-    ? getNetworkImageSource({ chainId: pickerChainId })
-    : undefined;
-
   return (
     <Box twClassName="px-4 pb-4">
       {/* Slider — reduced top padding to tighten gap with the amount section */}
@@ -106,24 +86,10 @@ const QuickBuyActionFooter: React.FC = () => {
             gap={2}
           >
             {pickerToken ? (
-              networkImage ? (
-                <BadgeWrapper
-                  position={BadgeWrapperPosition.BottomRight}
-                  badge={<BadgeNetwork src={networkImage} />}
-                >
-                  <AvatarToken
-                    size={AvatarTokenSize.Sm}
-                    name={pickerToken.symbol}
-                    src={getBridgeTokenImageSource(pickerToken)}
-                  />
-                </BadgeWrapper>
-              ) : (
-                <AvatarToken
-                  size={AvatarTokenSize.Sm}
-                  name={pickerToken.symbol}
-                  src={getBridgeTokenImageSource(pickerToken)}
-                />
-              )
+              <QuickBuyTokenIcon
+                token={pickerToken}
+                size={AvatarTokenSize.Sm}
+              />
             ) : null}
             <Text variant={TextVariant.BodySm} color={TextColor.TextDefault}>
               {pickerToken

app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/components/QuickBuyPayWithRow.tsx

@@ -1,9 +1,5 @@
 import {
-  AvatarToken,
   AvatarTokenSize,
-  BadgeNetwork,
-  BadgeWrapper,
-  BadgeWrapperPosition,
   Box,
   BoxAlignItems,
   BoxFlexDirection,
@@ -17,10 +13,9 @@ import {
 } from '@metamask/design-system-react-native';
 import React, { useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { getNetworkImageSource } from '../../../../../../../util/networks';
 import type { BridgeToken } from '../../../../../../UI/Bridge/types';
-import { getBridgeTokenImageSource } from '../getBridgeTokenImageSource';
 import { getTokenKey } from '../tokenKey';
+import QuickBuyTokenIcon from './QuickBuyTokenIcon';
 
 interface QuickBuyPayWithRowProps {
   token: BridgeToken;
@@ -51,7 +46,6 @@ const QuickBuyPayWithRow: React.FC<QuickBuyPayWithRowProps> = ({
   isSelected,
   onPress,
 }) => {
-  const networkImage = getNetworkImageSource({ chainId: token.chainId });
   const tokenKey = getTokenKey(token);
   const cryptoBalanceLabel = useMemo(
     () => formatTokenBalance(token.balance, token.symbol),
@@ -71,24 +65,7 @@ const QuickBuyPayWithRow: React.FC<QuickBuyPayWithRowProps> = ({
         gap={4}
         twClassName={`px-4 py-2 ${isSelected ? 'bg-muted' : ''}`}
       >
-        {networkImage ? (
-          <BadgeWrapper
-            position={BadgeWrapperPosition.BottomRight}
-            badge={<BadgeNetwork src={networkImage} />}
-          >
-            <AvatarToken
-              size={AvatarTokenSize.Md}
-              name={token.symbol}
-              src={getBridgeTokenImageSource(token)}
-            />
-          </BadgeWrapper>
-        ) : (
-          <AvatarToken
-            size={AvatarTokenSize.Md}
-            name={token.symbol}
-            src={getBridgeTokenImageSource(token)}
-          />
-        )}
+        <QuickBuyTokenIcon token={token} size={AvatarTokenSize.Md} />
 
         <Box twClassName="flex-1" gap={1}>
           <Box

app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/components/QuickBuyTokenIcon.test.tsx

@@ -0,0 +1,104 @@
+import {
+  AvatarToken,
+  AvatarTokenSize,
+} from '@metamask/design-system-react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+import { BADGENETWORK_TEST_ID } from '../../../../../../../component-library/components/Badges/Badge/variants/BadgeNetwork/BadgeNetwork.constants';
+import { getFallbackAssetImageUrls } from '../../../../../../UI/Assets/components/AssetLogo/AssetLogo.utils';
+import type { BridgeToken } from '../../../../../../UI/Bridge/types';
+import QuickBuyTokenIcon, {
+  QUICK_BUY_TOKEN_ICON_AVATAR_TEST_ID,
+} from './QuickBuyTokenIcon';
+
+// CAKE (PancakeSwap) on BSC — a token whose static-CDN artwork lives under the
+// checksummed address, the case TSA-647 calls out.
+const CAKE_ADDRESS = '0x0E09FaBB73Bd3Ade0a17ECC321fD13a19e81cE82';
+const BSC_CHAIN_ID = '0x38';
+
+const createToken = (overrides: Partial<BridgeToken> = {}): BridgeToken => ({
+  symbol: 'CAKE',
+  name: 'PancakeSwap',
+  address: CAKE_ADDRESS,
+  decimals: 18,
+  chainId: BSC_CHAIN_ID,
+  ...overrides,
+});
+
+describe('QuickBuyTokenIcon', () => {
+  it('renders a round AvatarToken from the token image with the requested size', () => {
+    const token = createToken({ image: 'https://example.com/cake-own.png' });
+
+    render(<QuickBuyTokenIcon token={token} size={AvatarTokenSize.Sm} />);
+
+    const avatar = screen.UNSAFE_getByType(AvatarToken);
+    expect(avatar.props).toStrictEqual(
+      expect.objectContaining({
+        name: 'CAKE',
+        src: { uri: 'https://example.com/cake-own.png' },
+        size: AvatarTokenSize.Sm,
+      }),
+    );
+  });
+
+  it('renders the component-library network badge used by the homepage token list', () => {
+    const token = createToken({ image: 'https://example.com/cake-badge.png' });
+
+    render(<QuickBuyTokenIcon token={token} />);
+
+    expect(screen.getByTestId(BADGENETWORK_TEST_ID)).toBeOnTheScreen();
+  });
+
+  it('falls back to the shared static-CDN token icon when the token has no image', () => {
+    const token = createToken({ image: undefined });
+    const expectedFallbackUrl = getFallbackAssetImageUrls(
+      BSC_CHAIN_ID,
+      CAKE_ADDRESS,
+    )?.[0];
+
+    render(<QuickBuyTokenIcon token={token} />);
+
+    const avatar = screen.UNSAFE_getByType(AvatarToken);
+    expect(avatar.props.src).toStrictEqual({ uri: expectedFallbackUrl });
+  });
+
+  it('resolves the same fallback image list as the homepage token list', () => {
+    // The hook receives the token image first, then the static-CDN fallbacks
+    // (lowercased + checksummed address variants) used by AssetLogo.
+    const token = createToken({ image: 'https://example.com/cake-list.png' });
+    const fallbackUrls = getFallbackAssetImageUrls(BSC_CHAIN_ID, CAKE_ADDRESS);
+
+    render(<QuickBuyTokenIcon token={token} />);
+
+    fireEvent(
+      screen.getByTestId(QUICK_BUY_TOKEN_ICON_AVATAR_TEST_ID),
+      'error',
+      { nativeEvent: {} },
+    );
+
+    const avatar = screen.UNSAFE_getByType(AvatarToken);
+    expect(avatar.props.src).toStrictEqual({ uri: fallbackUrls?.[0] });
+  });
+
+  it('cycles through to the checksummed CDN variant when earlier images fail', () => {
+    const token = createToken({ image: 'https://example.com/cake-cycle.png' });
+    const fallbackUrls = getFallbackAssetImageUrls(BSC_CHAIN_ID, CAKE_ADDRESS);
+
+    render(<QuickBuyTokenIcon token={token} />);
+
+    // own image fails -> lowercase CDN fails -> checksummed CDN remains.
+    fireEvent(
+      screen.getByTestId(QUICK_BUY_TOKEN_ICON_AVATAR_TEST_ID),
+      'error',
+      { nativeEvent: {} },
+    );
+    fireEvent(
+      screen.getByTestId(QUICK_BUY_TOKEN_ICON_AVATAR_TEST_ID),
+      'error',
+      { nativeEvent: {} },
+    );
+
+    const avatar = screen.UNSAFE_getByType(AvatarToken);
+    expect(avatar.props.src).toStrictEqual({ uri: fallbackUrls?.[1] });
+  });
+});