From fdba474c7f139e238f26c1cc2375fc2efdfd0f08 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Nov 2026 18:28:37 +0000 Subject: [PATCH 1/4] fix(hardware-wallet): make Ledger option visible in light theme The wallet logo is a white PNG drawn for the dark theme, so it vanished on the light background. Invert it under .sds-theme-light, and use the standard gray-06 border token instead of gray-01, which was nearly invisible in light mode. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ --- .../AddAccount/connect/SelectHardwareWallet/styles.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss index 45eff4e2af..1a805fe8a4 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss +++ b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss @@ -16,7 +16,7 @@ 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; @@ -38,3 +38,9 @@ margin-top: auto; } } + +// Wallet logos are single-color white PNGs (drawn for the dark theme), so +// they vanish on the light background. Invert them to black in light mode. +.sds-theme-light .SelectHardwareWallet__option img { + filter: invert(1); +} From a6903ece675f5c0437b14e270eb9543d107df33c Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Nov 2026 18:39:22 +0000 Subject: [PATCH 2/4] fix(hardware-wallet): render Ledger logo as a theme-aware SVG Replace the white ledger-logo.png and the light-theme invert() filter with Ledger's official wordmark as an inline SVG (fill=currentColor), colored with --sds-clr-gray-12 so it follows the theme. walletAssets logos are now SVG React components, and the integration guide says so. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ --- extension/INTEGRATING_HARDWARE_WALLET.MD | 12 +++++++----- extension/src/popup/assets/ledger-logo.png | Bin 3107 -> 0 bytes extension/src/popup/assets/ledger-logo.svg | 1 + extension/src/popup/helpers/hardwareConnect.ts | 8 +++++--- .../connect/SelectHardwareWallet/index.tsx | 4 +++- .../connect/SelectHardwareWallet/styles.scss | 10 +++------- 6 files changed, 19 insertions(+), 16 deletions(-) delete mode 100644 extension/src/popup/assets/ledger-logo.png create mode 100644 extension/src/popup/assets/ledger-logo.svg diff --git a/extension/INTEGRATING_HARDWARE_WALLET.MD b/extension/INTEGRATING_HARDWARE_WALLET.MD index 80f87192a6..c4bd73a807 100644 --- a/extension/INTEGRATING_HARDWARE_WALLET.MD +++ b/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 `` 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 diff --git a/extension/src/popup/assets/ledger-logo.png b/extension/src/popup/assets/ledger-logo.png deleted file mode 100644 index 5fa4e8af806e9d66b39d9531705895bb87f7f493..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3107 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 diff --git a/extension/src/popup/assets/ledger-logo.svg b/extension/src/popup/assets/ledger-logo.svg new file mode 100644 index 0000000000..7c8155c137 --- /dev/null +++ b/extension/src/popup/assets/ledger-logo.svg @@ -0,0 +1 @@ + diff --git a/extension/src/popup/helpers/hardwareConnect.ts b/extension/src/popup/helpers/hardwareConnect.ts index d9d050468b..9f09b0a065 100644 --- a/extension/src/popup/helpers/hardwareConnect.ts +++ b/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>; }; }; diff --git a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx index 0858a72401..c8f4b8d010 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx +++ b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx @@ -33,12 +33,14 @@ const WalletOption = ({ ); }; + const Logo = walletAssets[walletType].logo; + return (
  • handleContinue(walletType)} > - {`${walletType} +
    • ); }; diff --git a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss index 1a805fe8a4..2120a6aaa0 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss +++ b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss @@ -20,9 +20,11 @@ display: flex; align-items: center; justify-content: center; + color: var(--sds-clr-gray-12); - img { + svg { width: 5rem; + height: auto; } } @@ -38,9 +40,3 @@ margin-top: auto; } } - -// Wallet logos are single-color white PNGs (drawn for the dark theme), so -// they vanish on the light background. Invert them to black in light mode. -.sds-theme-light .SelectHardwareWallet__option img { - filter: invert(1); -} From 8ba852ff75e3b0d50efaa924027918b366d7f306 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Nov 2026 20:28:45 +0000 Subject: [PATCH 3/4] fix(hardware-wallet): translate the wallet logo's accessible name Address review feedback: the inline SVG's aria-label was a hard-coded English string. Get it through t() with interpolation and add the English and Portuguese keys. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ --- extension/src/popup/locales/en/translation.json | 1 + extension/src/popup/locales/pt/translation.json | 1 + .../views/AddAccount/connect/SelectHardwareWallet/index.tsx | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index 77c1501390..45fc6b4ac5 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/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", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index c5d4d0c4b4..34b51ea54c 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/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", diff --git a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx index c8f4b8d010..2f42da4fe1 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/index.tsx +++ b/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(); @@ -40,7 +41,7 @@ const WalletOption = ({ className="SelectHardwareWallet__option" onClick={() => handleContinue(walletType)} > - + ); }; From 81bda7cbc20f340c884b431e2721181b1cec9326 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Nov 2026 21:16:37 +0000 Subject: [PATCH 4/4] fix(hardware-wallet): pixel-align the Ledger logo so brackets match At 80px wide the logo was 26.77px tall, so its edges sat between pixels and the bottom brackets antialiased to look thinner than the top ones. Pad the viewBox symmetrically to exactly 3:1 and size the logo to 84x28px so opposite strokes land on the pixel grid the same way. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01R8cp43FyfJUF4nMEeZJBEJ --- extension/src/popup/assets/ledger-logo.svg | 2 +- .../AddAccount/connect/SelectHardwareWallet/styles.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/extension/src/popup/assets/ledger-logo.svg b/extension/src/popup/assets/ledger-logo.svg index 7c8155c137..33dac39f4a 100644 --- a/extension/src/popup/assets/ledger-logo.svg +++ b/extension/src/popup/assets/ledger-logo.svg @@ -1 +1 @@ - + diff --git a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss index 2120a6aaa0..97ae77e53a 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss +++ b/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss @@ -22,9 +22,12 @@ justify-content: center; color: var(--sds-clr-gray-12); + // 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: 5rem; - height: auto; + width: 5.25rem; + height: 1.75rem; } }