chore: add AssetPicker fallback text

MetaMask · Sep 5, 2024 · 47e6a43 · 47e6a43
1 parent 124472b
commit 47e6a43
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 52 deletions.
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -184,63 +184,74 @@ export function AssetPicker({
         }}
         title={handleAssetPickerTitle()}
       >
-        <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
-          <Box display={Display.Flex}>
-            <BadgeWrapper
-              badge={
-                <AvatarNetwork
-                  size={AvatarNetworkSize.Xs}
-                  name={selectedNetwork?.nickname ?? ''}
-                  src={
-                    selectedNetwork?.rpcPrefs?.imageUrl ??
-                    (selectedNetwork?.chainId &&
-                      CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
-                        selectedNetwork.chainId
-                      ])
-                  }
-                  backgroundColor={
-                    Object.entries({
-                      [GOERLI_DISPLAY_NAME]: BackgroundColor.goerli,
-                      [SEPOLIA_DISPLAY_NAME]: BackgroundColor.sepolia,
-                    }).find(([tickerSubstring]) =>
-                      selectedNetwork?.ticker?.includes(tickerSubstring),
-                    )?.[1]
-                  }
-                  borderColor={
-                    primaryTokenImage
-                      ? BorderColor.borderMuted
-                      : BorderColor.borderDefault
-                  }
+        {asset ? (
+          <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
+            <Box display={Display.Flex}>
+              <BadgeWrapper
+                badge={
+                  <AvatarNetwork
+                    size={AvatarNetworkSize.Xs}
+                    name={selectedNetwork?.nickname ?? ''}
+                    src={
+                      selectedNetwork?.rpcPrefs?.imageUrl ??
+                      (selectedNetwork?.chainId &&
+                        CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+                          selectedNetwork.chainId
+                        ])
+                    }
+                    backgroundColor={
+                      Object.entries({
+                        [GOERLI_DISPLAY_NAME]: BackgroundColor.goerli,
+                        [SEPOLIA_DISPLAY_NAME]: BackgroundColor.sepolia,
+                      }).find(([tickerSubstring]) =>
+                        selectedNetwork?.ticker?.includes(tickerSubstring),
+                      )?.[1]
+                    }
+                    borderColor={
+                      primaryTokenImage
+                        ? BorderColor.borderMuted
+                        : BorderColor.borderDefault
+                    }
+                  />
+                }
+              >
+                <AvatarToken
+                  borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
+                  src={primaryTokenImage ?? undefined}
+                  size={AvatarTokenSize.Md}
+                  name={symbol}
+                  {...(isNFT && {
+                    backgroundColor: BackgroundColor.transparent,
+                  })}
                 />
-              }
-            >
-              <AvatarToken
-                borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
-                src={primaryTokenImage ?? undefined}
-                size={AvatarTokenSize.Md}
-                name={symbol}
-                {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
-              />
-            </BadgeWrapper>
-          </Box>
+              </BadgeWrapper>
+            </Box>
 
-          <Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
-            <Text className="asset-picker__symbol" variant={TextVariant.bodyMd}>
-              {formattedSymbol}
-            </Text>
-            {isNFT && asset?.tokenId && (
+            <Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
               <Text
-                variant={TextVariant.bodySm}
-                color={TextColor.textAlternative}
+                className="asset-picker__symbol"
+                variant={TextVariant.bodyMd}
               >
-                #
-                {String(asset.tokenId).length < ELLIPSIFY_LENGTH
-                  ? asset.tokenId
-                  : ellipsify(String(asset.tokenId), 6, 4)}
+                {formattedSymbol}
               </Text>
-            )}
-          </Tooltip>
-        </Box>
+              {isNFT && asset?.tokenId && (
+                <Text
+                  variant={TextVariant.bodySm}
+                  color={TextColor.textAlternative}
+                >
+                  #
+                  {String(asset.tokenId).length < ELLIPSIFY_LENGTH
+                    ? asset.tokenId
+                    : ellipsify(String(asset.tokenId), 6, 4)}
+                </Text>
+              )}
+            </Tooltip>
+          </Box>
+        ) : (
+          <Text className="asset-picker__fallback" variant={TextVariant.bodyMd}>
+            {t('swapSelectToken')}
+          </Text>
+        )}
       </Button>
     </>
   );

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/index.scss b/ui/components/multichain/asset-picker-amount/asset-picker/index.scss
@@ -25,4 +25,9 @@
     opacity: 1;
     cursor: not-allowed;
   }
+
+  &__fallback{
+    text-wrap: nowrap;
+    padding-left: 8px;
+  }
 }