feat: bridge solana pumpfun fetch (#14699)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR will fetch asset metadata from the Token API when the user
searches for a token's address but it isn't in the current token list.
Works for both Solana and EVM.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to Solana bridge
2. Open source token picker
3. Paste in a token from
https://pump.fun/board?coins_sort=created_timestamp
4. Observe fetching

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/8d914d06-6f43-49c1-aa59-cb308471eb6f



## **Pre-merge author checklist**

- [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.

## **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.

Author: infiniteflower

CHANGELOG.md

@@ -21,7 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - feat: add AppMetadataController controller ([#14513](https://github.com/MetaMask/metamask-mobile/pull/14513))
 - feat(bridge): implement bridge quote fetching ([#14413](https://github.com/MetaMask/metamask-mobile/pull/14413))
 - feat(multi-srp): add e2e tests ([#14583](https://github.com/MetaMask/metamask-mobile/pull/14583))
-
+- feat(bridge): fetch token metadata for Bridge token pickers if not already available ([#14699](https://github.com/MetaMask/metamask-mobile/pull/14699))
 
 ### Changed
 

app/components/UI/Bridge/components/BridgeDestTokenSelector/BridgeDestTokenSelector.test.tsx

@@ -230,6 +230,7 @@ describe('BridgeDestTokenSelector', () => {
   });
 
   it('displays empty state when no tokens match search', async () => {
+    jest.useFakeTimers();
     const { getByTestId, getByText } = renderScreen(
       BridgeDestTokenSelector,
       {

app/components/UI/Bridge/components/BridgeDestTokenSelector/index.tsx

@@ -36,8 +36,8 @@ export const BridgeDestTokenSelector: React.FC = () => {
   const selectedDestChainId = useSelector(selectSelectedDestChainId);
   const selectedSourceToken = useSelector(selectSourceToken);
   const { tokens: tokensList, pending } = useTokens({
-    topTokensChainId: selectedDestChainId as Hex,
-    balanceChainIds: [selectedDestChainId as Hex],
+    topTokensChainId: selectedDestChainId,
+    balanceChainIds: selectedDestChainId ? [selectedDestChainId] : [],
     tokensToExclude: selectedSourceToken ? [selectedSourceToken] : [],
   });
   const handleTokenPress = useCallback(
@@ -92,6 +92,7 @@ export const BridgeDestTokenSelector: React.FC = () => {
       renderTokenItem={renderToken}
       tokensList={tokensList}
       pending={pending}
+      chainIdToFetchMetadata={selectedDestChainId}
     />
   );
 };

app/components/UI/Bridge/components/BridgeSourceTokenSelector/BridgeSourceTokenSelector.test.tsx

@@ -193,6 +193,7 @@ describe('BridgeSourceTokenSelector', () => {
   });
 
   it('displays empty state when no tokens match search', async () => {
+    jest.useFakeTimers();
     const { getByTestId, getByText } = renderScreen(
       BridgeSourceTokenSelector,
       {

app/components/UI/Bridge/components/BridgeSourceTokenSelector/index.tsx

@@ -8,6 +8,7 @@ import {
   ///: END:ONLY_INCLUDE_IF
 } from '@metamask/utils';
 import {
+  selectChainId,
   selectEvmNetworkConfigurationsByChainId,
   selectNetworkConfigurations,
 } from '../../../../../selectors/networkController';
@@ -53,6 +54,7 @@ export const BridgeSourceTokenSelector: React.FC = () => {
   const { sortedSourceNetworks } = useSortedSourceNetworks();
   const selectedSourceToken = useSelector(selectSourceToken);
   const selectedDestToken = useSelector(selectDestToken);
+  const selectedChainId = useSelector(selectChainId);
 
   const {
     chainId: selectedEvmChainId, // Will be the most recently selected EVM chain if you are on Solana
@@ -158,6 +160,7 @@ export const BridgeSourceTokenSelector: React.FC = () => {
       renderTokenItem={renderItem}
       tokensList={tokensList}
       pending={pending}
+      chainIdToFetchMetadata={selectedChainId}
     />
   );
 };

app/components/UI/Bridge/components/BridgeTokenSelectorBase.tsx

@@ -21,6 +21,8 @@ import { useTokenSearch } from '../hooks/useTokenSearch';
 import TextFieldSearch from '../../../../component-library/components/Form/TextFieldSearch';
 import { BridgeToken } from '../types';
 import { Skeleton } from '../../../../component-library/components/Skeleton';
+import { useAssetMetadata } from '../hooks/useAssetMetadata';
+import { CaipChainId, Hex } from '@metamask/utils';
 
 const createStyles = (params: { theme: Theme }) => {
   const { theme } = params;
@@ -60,7 +62,7 @@ const createStyles = (params: { theme: Theme }) => {
     // Need the flex 1 to make sure this doesn't disappear when FlexDirection.Row is used
     skeletonItem: {
       flex: 1,
-    }
+    },
   });
 };
 
@@ -75,13 +77,13 @@ const SkeletonItem = () => {
     >
       <Skeleton height={30} width={30} style={styles.skeletonCircle} />
 
-    <Box gap={4} style={styles.skeletonItem}>
-      <Skeleton height={24} width={'96%'} />
-      <Skeleton height={24} width={'37%'} />
-    </Box>
+      <Box gap={4} style={styles.skeletonItem}>
+        <Skeleton height={24} width={'96%'} />
+        <Skeleton height={24} width={'37%'} />
+      </Box>
 
-    <Icon name={IconName.Info} />
-  </Box>
+      <Icon name={IconName.Info} />
+    </Box>
   );
 };
 
@@ -109,20 +111,49 @@ interface BridgeTokenSelectorBaseProps {
   renderTokenItem: ({ item }: { item: BridgeToken }) => React.JSX.Element;
   tokensList: BridgeToken[];
   pending?: boolean;
+  chainIdToFetchMetadata?: Hex | CaipChainId;
 }
 
 export const BridgeTokenSelectorBase: React.FC<
   BridgeTokenSelectorBaseProps
-> = ({ networksBar, renderTokenItem, tokensList, pending }) => {
+> = ({
+  networksBar,
+  renderTokenItem,
+  tokensList,
+  pending,
+  chainIdToFetchMetadata: chainId,
+}) => {
   const { styles, theme } = useStyles(createStyles, {});
-  const { searchString, setSearchString, searchResults } = useTokenSearch({
+  const {
+    searchString,
+    setSearchString,
+    searchResults,
+    debouncedSearchString,
+  } = useTokenSearch({
     tokens: tokensList || [],
   });
-  const tokensToRender = useMemo(
-    () => (searchString ? searchResults : tokensList),
-    [searchString, searchResults, tokensList],
+
+  const {
+    assetMetadata: unlistedAssetMetadata,
+    pending: unlistedAssetMetadataPending,
+  } = useAssetMetadata(
+    debouncedSearchString,
+    Boolean(debouncedSearchString && searchResults.length === 0),
+    chainId,
   );
 
+  const tokensToRender = useMemo(() => {
+    if (!searchString) {
+      return tokensList;
+    }
+
+    if (searchResults.length > 0) {
+      return searchResults;
+    }
+
+    return unlistedAssetMetadata ? [unlistedAssetMetadata] : [];
+  }, [searchString, searchResults, tokensList, unlistedAssetMetadata]);
+
   const keyExtractor = useCallback(
     (token: BridgeToken) => `${token.chainId}-${token.address}`,
     [],
@@ -139,18 +170,23 @@ export const BridgeTokenSelectorBase: React.FC<
     () => (
       <Box style={styles.emptyList}>
         <Text color={TextColor.Alternative}>
-          {strings('swaps.no_tokens_result', { searchString })}
+          {strings('swaps.no_tokens_result', { searchString: debouncedSearchString })}
         </Text>
       </Box>
     ),
-    [searchString, styles],
+    [debouncedSearchString, styles],
   );
 
   const modalRef = useRef<BottomSheetRef>(null);
   const dismissModal = (): void => {
     modalRef.current?.onCloseBottomSheet();
   };
 
+  const shouldRenderLoading = useMemo(
+    () => pending || unlistedAssetMetadataPending,
+    [pending, unlistedAssetMetadataPending],
+  );
+
   return (
     <BottomSheet isFullscreen ref={modalRef}>
       <Box style={styles.content}>
@@ -192,10 +228,14 @@ export const BridgeTokenSelectorBase: React.FC<
         </Box>
 
         <FlatList
-          data={pending ? [] : tokensToRender}
+          data={shouldRenderLoading ? [] : tokensToRender}
           renderItem={renderTokenItem}
           keyExtractor={keyExtractor}
-          ListEmptyComponent={searchString ? renderEmptyList : LoadingSkeleton}
+          ListEmptyComponent={
+            debouncedSearchString && !shouldRenderLoading
+              ? renderEmptyList
+              : LoadingSkeleton
+          }
         />
       </Box>
     </BottomSheet>

app/components/UI/Bridge/hooks/useAssetMetadata/index.ts

@@ -0,0 +1,83 @@
+import { CaipAssetType, CaipChainId, Hex } from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import { fetchAssetMetadata, getAssetImageUrl } from './utils';
+import { useAsyncResult } from '../../../../hooks/useAsyncResult';
+import { selectBasicFunctionalityEnabled } from '../../../../../selectors/settings';
+import { isAddress as isSolanaAddress } from '@solana/addresses';
+import { isAddress as isEvmAddress } from 'ethers/lib/utils';
+
+export enum AssetType {
+  /** The native asset for the current network, such as ETH */
+  native = 'NATIVE',
+  /** An ERC20 token */
+  token = 'TOKEN',
+  /** An ERC721 or ERC1155 token. */
+  NFT = 'NFT',
+  /**
+   * A transaction interacting with a contract that isn't a token method
+   * interaction will be marked as dealing with an unknown asset type.
+   */
+  unknown = 'UNKNOWN',
+}
+
+/**
+ * Fetches token metadata for a single token if searchQuery is defined but filteredTokenList is empty
+ * There is no minimum age of token that can be queried for. The Token API has a fallback mechanism that will look up tokens it does not have saved.
+ *
+ * @param searchQuery - The search query to fetch metadata for
+ * @param shouldFetchMetadata - Whether to fetch metadata
+ * @param chainId - The chain id to fetch metadata for
+ * @returns The asset metadata
+ */
+export const useAssetMetadata = (
+  searchQuery: string,
+  shouldFetchMetadata: boolean,
+  chainId?: Hex | CaipChainId,
+) => {
+  const isBasicFunctionalityEnabled = useSelector(
+    selectBasicFunctionalityEnabled,
+  );
+
+  const { value: assetMetadata, pending } = useAsyncResult<
+    | {
+        address: Hex | CaipAssetType | string;
+        symbol: string;
+        decimals: number;
+        image: string;
+        chainId: Hex | CaipChainId;
+        isNative: boolean;
+        type: AssetType.token;
+        balance: string;
+        string: string;
+      }
+    | undefined
+  >(async () => {
+    if (!chainId || !searchQuery) {
+      return undefined;
+    }
+
+    const trimmedSearchQuery = searchQuery.trim();
+    const isAddress =
+      isSolanaAddress(trimmedSearchQuery) || isEvmAddress(trimmedSearchQuery);
+
+    if (isBasicFunctionalityEnabled && shouldFetchMetadata && isAddress) {
+      const metadata = await fetchAssetMetadata(trimmedSearchQuery, chainId);
+
+      if (metadata) {
+        return {
+          ...metadata,
+          chainId,
+          isNative: false,
+          type: AssetType.token,
+          image: getAssetImageUrl(metadata.assetId, chainId) ?? '',
+          balance: '',
+          string: '',
+        } as const;
+      }
+      return undefined;
+    }
+    return undefined;
+  }, [shouldFetchMetadata, searchQuery]);
+
+  return { assetMetadata, pending };
+};