fix: asset picker touch ups (#23264)

## **Description**

Fixes some things with the asset picker.

1. Too tall.


Vertical padding was increased in
[4a930f9](4a930f9#diff-0c6f888c60276323462869ba5dbaf02088f5f06b37c2adb424f38caa8462608cR131-R13)
to support the NFT case, but this made native + erc20 too tall.

before:
<img width="345" alt="Screenshot 2024-02-29 at 11 39 32 PM"
src="https://github.com/MetaMask/metamask-extension/assets/3500406/bea36359-bc83-4cbe-ab17-898b3afcb68e">

after:
<img width="345" alt="Screenshot 2024-02-29 at 11 44 57 PM"
src="https://github.com/MetaMask/metamask-extension/assets/3500406/28028be7-f2fb-4758-a2fe-5208e99fa2a5">

[original figma
design](https://www.figma.com/file/LDlI7yjKBNIY60MtQv9QS0/Amon-Hen%2FV1?node-id=2385%3A169151&mode=dev):
<img width="317" alt="Screenshot 2024-02-29 at 11 32 53 PM"
src="https://github.com/MetaMask/metamask-extension/assets/3500406/5f20c6e0-08da-49bb-8346-5335286ee89e">

2. Token id not always right aligned during NFT case
3. Images missing from pill in NFT and some ERC20 cases
4. ERC721 balance had regressed - showing blank instead of # of NFTs you
own.

before:
<img width="344" alt="Screenshot 2024-03-05 at 12 14 20 PM"
src="https://github.com/MetaMask/metamask-extension/assets/3500406/b120518a-b875-4718-857c-d2a6f9615ce6">

after:
<img width="347" alt="Screenshot 2024-02-29 at 11 53 51 PM"
src="https://github.com/MetaMask/metamask-extension/assets/3500406/2180ab8f-5260-43cf-8250-592e5ce11c77">

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

## **Related issues**

Fixes:

## **Manual testing steps**

- Send an NFT in the new asset flow, verify the pill has the NFT's image

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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: bergeron

shared/constants/tokens.js

@@ -18,10 +18,12 @@ export const LISTED_CONTRACT_ADDRESSES = Object.keys(contractMap).map(
  * @property {number} [decimals] - The number of decimals of the selected
  *  'ERC20' asset.
  * @property {number} [tokenId] - The id of the selected 'NFT' asset.
+ * @property {string} [image] - A URL to the image of the NFT or ERC20 icon.
  * @property {TokenStandardStrings} [standard] - The standard of the selected
  *  asset.
  * @property {boolean} [isERC721] - True when the asset is a ERC721 token.
  */
+
 export const STATIC_MAINNET_TOKEN_LIST = Object.keys(contractMap).reduce(
   (acc, base) => {
     const { logo, ...tokenMetadata } = contractMap[base];

ui/components/multichain/asset-picker-amount/asset-picker-amount.tsx

@@ -82,13 +82,14 @@ const renderCurrencyInput = (asset: Asset, amount: Amount) => {
   ) {
     return (
       <>
-        <Box marginLeft={'auto'}>
+        <Box
+          marginLeft={'auto'}
+          textAlign={TextAlign.End}
+          paddingTop={2}
+          paddingBottom={2}
+        >
           <Text variant={TextVariant.bodySm}>{t('tokenId')}</Text>
-          <Text
-            variant={TextVariant.bodySm}
-            fontWeight={FontWeight.Bold}
-            marginLeft={10}
-          >
+          <Text variant={TextVariant.bodySm} fontWeight={FontWeight.Bold}>
             {asset?.details?.tokenId}
           </Text>
         </Box>
@@ -100,13 +101,7 @@ const renderCurrencyInput = (asset: Asset, amount: Amount) => {
     asset.details?.standard === TokenStandard.ERC1155
   ) {
     return (
-      <Box
-        marginLeft={'auto'}
-        textAlign={TextAlign.End}
-        paddingTop={2}
-        paddingBottom={2}
-        width={BlockSize.Max}
-      >
+      <Box marginLeft={'auto'} textAlign={TextAlign.End} width={BlockSize.Max}>
         <Text variant={TextVariant.bodyMd} ellipsis>
           {t('amount')}
         </Text>
@@ -163,7 +158,10 @@ export const AssetPickerAmount = () => {
         />
       );
     }
-    if (asset.details?.standard === TokenStandard.ERC20) {
+    if (
+      asset.details?.standard === TokenStandard.ERC20 ||
+      asset.details?.standard === TokenStandard.ERC721
+    ) {
       return (
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore: Details should be defined for token assets
@@ -214,13 +212,13 @@ export const AssetPickerAmount = () => {
         paddingRight={4}
         borderRadius={BorderRadius.LG}
         borderColor={
-          amount.error ? BorderColor.errorDefault : BorderColor.primaryDefault
+          error ? BorderColor.errorDefault : BorderColor.primaryDefault
         }
         borderStyle={BorderStyle.solid}
         borderWidth={2}
         marginTop={2}
-        paddingTop={3}
-        paddingBottom={3}
+        paddingTop={1}
+        paddingBottom={1}
       >
         <AssetPicker asset={asset} />
         {renderCurrencyInput(asset, amount)}
@@ -260,8 +258,10 @@ export const AssetPickerAmount = () => {
             alignItems={AlignItems.flexEnd}
           >
             <Text
-              variant={TextVariant.bodyMd}
+              variant={TextVariant.bodySm}
+              color={TextColor.textAlternative}
               width={BlockSize.ThreeFourths}
+              textAlign={TextAlign.End}
               ellipsis
             >
               ID: {`#${asset.details?.tokenId}`}

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

@@ -18,23 +18,35 @@ import {
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { AssetType } from '../../../../../shared/constants/transaction';
-import { getNativeCurrencyImage, getTokenList } from '../../../../selectors';
+import {
+  getIpfsGateway,
+  getNativeCurrencyImage,
+  getTokenList,
+} from '../../../../selectors';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { AssetPickerModal } from '../asset-picker-modal/asset-picker-modal';
+import { getAssetImageURL } from '../../../../helpers/utils/util';
 
 // A component that lets the user pick from a list of assets.
 export default function AssetPicker({ asset }: { asset: Asset }) {
   const nativeCurrency = useSelector(getNativeCurrency);
   const nativeCurrencyImage = useSelector(getNativeCurrencyImage);
   const tokenList = useSelector(getTokenList);
+  const ipfsGateway = useSelector(getIpfsGateway);
   const [showAssetPickerModal, setShowAssetPickerModal] = useState(false);
 
-  const image =
-    asset.type === AssetType.native
-      ? nativeCurrencyImage
-      : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore: type 'string' can't be used to index type '{}'
-        tokenList?.[asset.details?.address?.toLowerCase()]?.iconUrl;
+  let image: string | undefined;
+  if (asset.type === AssetType.native) {
+    image = nativeCurrencyImage;
+  } else if (asset.type === AssetType.token) {
+    image =
+      asset.details?.image ??
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore: type 'string' can't be used to index type '{}'
+      tokenList?.[asset.details?.address?.toLowerCase()]?.iconUrl;
+  } else if (asset.type === AssetType.NFT) {
+    image = getAssetImageURL(asset.details?.image, ipfsGateway);
+  }
 
   // TODO: Handle long symbols in the UI
   const symbol =