fix(hardware-wallet): make the Ledger option visible in light mode

extension/INTEGRATING_HARDWARE_WALLET.MD

@@ -79,11 +79,13 @@ export const createWalletConnection: CreateWalletConnection = {
    wallet. Next, we'll tell Freighter how to show information about your wallet.
    Scroll down to `walletAssets`. Here we'll set the key `logo` with your
    hardware wallet's logo. This will appear in a button when Freighter lists all
-   possible hardware wallets to connect with. Drop your assets into the
-   [src/popup/assets/](src/popup/assets/) folder. You can use almost any image
-   type, though SVG's are recommended. You can import image paths at the top of
-   file like you would any other TS file. Image dimensions are listed in the
-   `WalletAssets` type.
+   possible hardware wallets to connect with. Drop a single-color SVG into the
+   [src/popup/assets/](src/popup/assets/) folder with `fill="currentColor"` on
+   its root `<svg>` element, and import it as a React component with the
+   `?react` suffix (e.g.
+   `import MyWalletLogo from "popup/assets/my-wallet-logo.svg?react"`). The
+   logo then takes the theme's text color, so it stays visible in both light and
+   dark mode.
 
 7. Next we'll set a method on `pluginWalletInfo`. This will be general
    information that users will see when they choose to connect to your hardware

extension/src/popup/helpers/hardwareConnect.ts

@@ -1,5 +1,6 @@
 import { FeeBumpTransaction, Transaction, StrKey } from "stellar-sdk";
 import semver from "semver";
+import type { FC, SVGProps } from "react";
 import {
   ConfigurableWalletType,
   WalletType,
@@ -10,7 +11,7 @@ import i18n from "popup/helpers/localizationConfig";
 import TransportWebHID from "@ledgerhq/hw-transport-webhid";
 import LedgerApi from "@ledgerhq/hw-app-str";
 
-import LedgerLogo from "popup/assets/ledger-logo.png";
+import LedgerLogo from "popup/assets/ledger-logo.svg?react";
 /* end Ledger imports */
 
 // SEP-53 message signing (APDU 0x0C) landed in the Ledger Stellar app v6.0.0.
@@ -458,8 +459,9 @@ export const hardwareSignMessage: HardwareSignMessage = {
 
 type WalletAssets = {
   [key in ConfigurableWalletType]: {
-    // hardware wallet's logo. Recommended size: 223 x 60
-    logo: string;
+    // hardware wallet's logo as an inline SVG component. Paint it with
+    // fill="currentColor" so it follows the theme's text color.
+    logo: FC<SVGProps<SVGSVGElement>>;
   };
 };
 

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

@@ -5,6 +5,7 @@
   "{{date}} at {{time}}": "{{date}} at {{time}}",
   "{{domain}} is not currently connected to Freighter": "{{domain}} is not currently connected to Freighter",
   "{{domain}} is not currently connected to Varial": "{{domain}} is not currently connected to Varial",
+  "{{walletType}} logo": "{{walletType}} logo",
   "* All Stellar accounts must maintain a minimum balance of lumens.": "* All Stellar accounts must maintain a minimum balance of lumens.",
   "0.5 XLM required": "0.5 XLM required",
   "1:1 backed, unified liquidity": "1:1 backed, unified liquidity",

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

@@ -5,6 +5,7 @@
   "{{date}} at {{time}}": "{{date}} às {{time}}",
   "{{domain}} is not currently connected to Freighter": "{{domain}} não está atualmente conectado ao Freighter",
   "{{domain}} is not currently connected to Varial": "{{domain}} não está atualmente conectado ao Varial",
+  "{{walletType}} logo": "Logo {{walletType}}",
   "* All Stellar accounts must maintain a minimum balance of lumens.": "* Todas as contas Stellar devem manter um saldo mínimo de lumens.",
   "0.5 XLM required": "0,5 XLM necessários",
   "1:1 backed, unified liquidity": "Lastro 1:1, liquidez unificada",

extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx

@@ -21,6 +21,7 @@ const WalletOption = ({
 }: {
   walletType: ConfigurableWalletType;
 }) => {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -33,12 +34,14 @@ const WalletOption = ({
     );
   };
 
+  const Logo = walletAssets[walletType].logo;
+
   return (
     <li
       className="SelectHardwareWallet__option"
       onClick={() => handleContinue(walletType)}
     >
-      <img src={walletAssets[walletType].logo} alt={`${walletType} logo`} />
+      <Logo role="img" aria-label={t("{{walletType}} logo", { walletType })} />
     </li>
   );
 };

extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss

@@ -16,13 +16,18 @@
     width: 19.5rem;
     height: 3.5rem;
     border-radius: 0.5rem;
-    border: 1px solid var(--sds-clr-gray-01);
+    border: 1px solid var(--sds-clr-gray-06);
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--sds-clr-gray-12);
 
-    img {
-      width: 5rem;
+    // Whole-pixel box (the SVG's viewBox is exactly 3:1) so the logo lands
+    // on the pixel grid and opposite bracket strokes antialias identically.
+    // Fractional sizes made the bottom brackets look thinner than the top.
+    svg {
+      width: 5.25rem;
+      height: 1.75rem;
     }
   }