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 5fa4e8af80..0000000000 Binary files a/extension/src/popup/assets/ledger-logo.png and /dev/null differ diff --git a/extension/src/popup/assets/ledger-logo.svg b/extension/src/popup/assets/ledger-logo.svg new file mode 100644 index 0000000000..33dac39f4a --- /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/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 0858a72401..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(); @@ -33,12 +34,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 45eff4e2af..97ae77e53a 100644 --- a/extension/src/popup/views/AddAccount/connect/SelectHardwareWallet/styles.scss +++ b/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; } }