fix: Use correct selector to pull name from non-popular networks (#29121

)

## **Description**

On token-list-item, we were using the wrong selector to select the
network configuration, which included the network name needed for the
fallback icon of non-popular networks.

`getNetworkConfigurationsByChainId` returns chainId =>
networkConfiguration mapping, while `getNetworkConfigurationIdByChainId`
returns a chainId => string mapping, which could be a networkId (random
UUID string)

This broke the fallback behavior, as we would render the first letter of
the uuid, rather than the first letter of the network name.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29121?quickstart=1)

## **Related issues**

Fixes: Incorrect network logo fallback letter

## **Manual testing steps**

1. Add Base Sepolia as custom network: https://chainlist.org/chain/84532
2. Verify that the fallback image on main token-list and token-detail
page is `B` and matches the network picker.

## **Screenshots/Recordings**

Before
<img width="359" alt="Screenshot 2024-12-11 at 5 29 02 PM"
src="https://github.com/user-attachments/assets/9c1cc5ec-cd32-40d5-aa71-ccc19265fb68"
/>

After
<img width="359" alt="Screenshot 2024-12-11 at 5 28 21 PM"
src="https://github.com/user-attachments/assets/9ed50aae-1482-47ce-950f-99b7dafd28c6"
/>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.

ui/components/app/assets/asset-list/network-filter/network-filter.tsx

@@ -203,7 +203,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
           </Box>
           <AvatarNetwork
             size={AvatarNetworkSize.Sm}
-            name="Current"
+            name={currentNetwork?.nickname || ''}
             src={currentNetwork?.rpcPrefs?.imageUrl}
           />
         </Box>

ui/components/multichain/token-list-item/token-list-item.tsx

@@ -44,7 +44,6 @@ import {
   getParticipateInMetaMetrics,
   getDataCollectionForMarketing,
   getMarketData,
-  getNetworkConfigurationIdByChainId,
   getCurrencyRates,
 } from '../../../selectors';
 import { getMultichainIsEvm } from '../../../selectors/multichain';
@@ -69,6 +68,7 @@ import {
   useSafeChains,
 } from '../../../pages/settings/networks-tab/networks-form/use-safe-chains';
 import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../../../shared/constants/bridge';
+import { getNetworkConfigurationsByChainId } from '../../../../shared/modules/selectors/networks';
 import { PercentageChange } from './price/percentage-change/percentage-change';
 
 type TokenListItemProps = {
@@ -227,9 +227,7 @@ export const TokenListItem = ({
     </Box>
   );
   // Used for badge icon
-  const allNetworks: Record<string, string> = useSelector(
-    getNetworkConfigurationIdByChainId,
-  );
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
   const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
 
   return (
@@ -285,7 +283,7 @@ export const TokenListItem = ({
           badge={
             <AvatarNetwork
               size={AvatarNetworkSize.Xs}
-              name={allNetworks?.[chainId] || ''}
+              name={allNetworks?.[chainId as Hex]?.name}
               src={tokenChainImage || undefined}
               backgroundColor={testNetworkBackgroundColor}
               className="multichain-token-list-item__badge__avatar-network"