Fix send-flow asset list formatting (asset code + Stellar Lumens)

extension/e2e-tests/integration-tests/sendIntegration.test.ts

@@ -421,7 +421,7 @@ test("Send token payment to C address", async ({
 
   await page
     .locator(".Send__step:not(.Send__step--hidden)")
-    .getByText("E2E")
+    .getByTestId(`SendRow-E2E:${TEST_TOKEN_ADDRESS}`)
     .click();
 
   await expect(page.getByTestId("send-amount-amount-input")).toBeVisible();

extension/src/popup/components/InternalTransaction/TokenList/index.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Icon } from "@stellar/design-system";
 import BigNumber from "bignumber.js";
 import classnames from "classnames";
 
@@ -53,7 +54,10 @@ export const TokenList = ({
       ) : (
         <>
           {isShowingHeader && (
-            <div className="TokenList__Assets__Header">{t("Your Tokens")}</div>
+            <div className="TokenList__Assets__Header">
+              <Icon.Coins03 />
+              {t("Tokens")}
+            </div>
           )}
           {sortedTokens
             .filter(
@@ -78,6 +82,8 @@ export const TokenList = ({
                   ? balance.token.issuer.key
                   : undefined;
               const isContract = "contractId" in balance;
+              const isNative =
+                "type" in balance.token && balance.token.type === "native";
               const canonical = getCanonicalFromAsset(code, issuerKey);
               const icon = icons[canonical];
               const availableBalance = getAvailableBalance({
@@ -107,13 +113,13 @@ export const TokenList = ({
                     />
                     <div className="TokenList__AssetRow__Title">
                       <div className="TokenList__AssetRow__Title__Heading">
-                        {title(balance)}
+                        {isNative ? t("Stellar Lumens") : title(balance)}
                       </div>
                       <div
                         className="TokenList__AssetRow__Title__Total"
                         data-testid={`${code}-balance`}
                       >
-                        {displayTotal}
+                        {displayTotal} {code}
                       </div>
                     </div>
                   </div>

extension/src/popup/components/InternalTransaction/TokenList/styles.scss

@@ -37,6 +37,10 @@
       display: flex;
       align-items: center;
       margin-bottom: pxToRem(12px);
+      font-size: pxToRem(14);
+      line-height: pxToRem(20);
+      font-weight: 600;
+      color: var(--sds-clr-gray-11);
 
       svg {
         margin-right: pxToRem(4px);

extension/src/popup/components/send/SendDestinationAsset/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Navigate, useLocation } from "react-router-dom";
-import { Loader, Notification } from "@stellar/design-system";
+import { Icon, Loader, Notification } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { AppDispatch } from "popup/App";
@@ -131,11 +131,12 @@ export const SendDestinationAsset = ({
               resetAmountForm();
               goToNext();
             }}
-            isShowingHeader={false}
+            isShowingHeader={true}
           />
           {destAssetDataState.data.collectibles.collections.length > 0 && (
             <div className="SendDestinationAsset__collectibles-section">
               <div className="SendDestinationAsset__collectibles-heading">
+                <Icon.Image01 />
                 {t("Collectibles")}
               </div>
               <CollectiblesList

extension/src/popup/components/send/SendDestinationAsset/styles.scss

@@ -9,10 +9,16 @@
   }
 
   &__collectibles-heading {
+    display: flex;
+    align-items: center;
     font-size: pxToRem(14);
     line-height: pxToRem(20);
     font-weight: 600;
     padding: pxToRem(8) 0;
     color: var(--sds-clr-gray-11);
+
+    svg {
+      margin-right: pxToRem(4px);
+    }
   }
 }

extension/src/popup/locales/en/translation.json

@@ -584,6 +584,7 @@
   "Status": "Status",
   "Stellar Development Foundation will never ask for your phrase": "Stellar Development Foundation will never ask for your phrase",
   "Stellar Logo": "Stellar Logo",
+  "Stellar Lumens": "Stellar Lumens",
   "Stellar Network": "Stellar Network",
   "Stellar requires this reserve to add {{tokenCode}}. You can get it back once your {{tokenCode}} balance is zero.": "Stellar requires this reserve to add {{tokenCode}}. You can get it back once your {{tokenCode}} balance is zero.",
   "Stellar token logo": "Stellar token logo",

extension/src/popup/locales/pt/translation.json

@@ -584,6 +584,7 @@
   "Status": "Status",
   "Stellar Development Foundation will never ask for your phrase": "A Stellar Development Foundation nunca pedirá sua frase",
   "Stellar Logo": "Logo Stellar",
+  "Stellar Lumens": "Stellar Lumens",
   "Stellar Network": "Rede Stellar",
   "Stellar requires this reserve to add {{tokenCode}}. You can get it back once your {{tokenCode}} balance is zero.": "A Stellar exige essa reserva para adicionar {{tokenCode}}. Você pode recuperá-la quando o saldo de {{tokenCode}} ficar zerado.",
   "Stellar token logo": "Logotipo do token Stellar",