From 9628e440aab8e6324bc5a889faf89f593704c83a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ca=CC=81ssio=20Marcos=20Goulart?= Date: Tue, 4 Aug 2026 01:08:29 -0300 Subject: [PATCH 1/4] feat(wallets): refresh the add wallet sheet Restyle AddWallet to match frame 9585-24653: the icon badge moves above the title, all three icons resolve to one purple treatment via SDS tokens (--sds-clr-lilac-03/06/11), and the header becomes "Add wallet" with an X close instead of a back arrow. Card copy follows the frame's wording. The hardware-wallet card is not in the Figma frame -- built from the same template per the owner's instruction, keeping the existing shield glyph recoloured purple, since it is the only entry point Ledger users have. Each card is now a single Link instead of a div wrapping an inner anchor, so the whole card (including its padding) is clickable and the undefined .AddWallet__row-link class is no longer rendered. Hand-added the new/changed copy keys to the en and pt locale files since yarn build:extension:translations is broken on master (pre-existing, unrelated to this change). Updated the two e2e tests that click through this sheet by literal copy ("Create new wallet") to match the new wording ("Create a new wallet"): allowList.test.ts and loadAccount.test.ts. Routes (ROUTES.addAccount / importAccount / connectWallet) and analytics (none emitted) are unchanged. --- extension/e2e-tests/allowList.test.ts | 2 +- extension/e2e-tests/loadAccount.test.ts | 2 +- .../components/account/AddWallet/index.tsx | 52 ++++++++----------- .../components/account/AddWallet/styles.scss | 46 ++++++++-------- .../src/popup/locales/en/translation.json | 6 +++ .../src/popup/locales/pt/translation.json | 6 +++ 6 files changed, 58 insertions(+), 56 deletions(-) diff --git a/extension/e2e-tests/allowList.test.ts b/extension/e2e-tests/allowList.test.ts index 7962286471..0c4cf2e521 100644 --- a/extension/e2e-tests/allowList.test.ts +++ b/extension/e2e-tests/allowList.test.ts @@ -58,7 +58,7 @@ test("View Allow List selector", async ({ page, extensionId, context }) => { await page.getByTestId("account-view-account-name").click(); await page.getByTestId("add-wallet").click(); - await page.getByText("Create new wallet").click(); + await page.getByText("Create a new wallet").click(); await page.locator("#password-input").fill(PASSWORD); await page.getByText("Create New Address").click(); diff --git a/extension/e2e-tests/loadAccount.test.ts b/extension/e2e-tests/loadAccount.test.ts index 7b38f8501e..652c73c708 100644 --- a/extension/e2e-tests/loadAccount.test.ts +++ b/extension/e2e-tests/loadAccount.test.ts @@ -607,7 +607,7 @@ test("Loads wallets data and token prices on Mainnet in batches", async ({ await expect(page.getByText("Wallets")).toBeVisible(); await page.getByText("Add a wallet").click(); - await page.getByText("Create new wallet").click(); + await page.getByText("Create a new wallet").click(); await page.locator("#password-input").fill(PASSWORD); await page.getByRole("button", { name: "Create New Address" }).click(); await expect(page.getByTestId("account-assets")).toContainText("XLM"); diff --git a/extension/src/popup/components/account/AddWallet/index.tsx b/extension/src/popup/components/account/AddWallet/index.tsx index 20242fbfff..1f7c3eb715 100644 --- a/extension/src/popup/components/account/AddWallet/index.tsx +++ b/extension/src/popup/components/account/AddWallet/index.tsx @@ -2,7 +2,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { Icon } from "@stellar/design-system"; -import classNames from "classnames"; import { ROUTES } from "popup/constants/routes"; import { SubviewHeader } from "popup/components/SubviewHeader"; @@ -18,53 +17,46 @@ export const AddWallet = ({ onBack }: AddWalletProps) => { const { t } = useTranslation(); const actions = [ { - icon: , - color: "lime", - title: t("Create new wallet"), - description: t("Create a wallet from your seed phrase."), + icon: , + title: t("Create a new wallet"), + description: t("Create a wallet on your seed phrase"), link: ROUTES.addAccount, }, { - icon: , - color: "purple", - title: t("Import Stellar Secret Key"), - description: t("Add a wallet using a secret key."), + icon: , + title: t("Import a Stellar secret key"), + description: t("Add a wallet using a secret key"), link: ROUTES.importAccount, }, { - icon: , - color: "blue", + icon: , title: t("Connect a hardware wallet"), - description: t("Add a wallet from a hardware wallet."), + description: t("Add a wallet from a hardware wallet"), link: ROUTES.connectWallet, }, ]; return ( <> } + customBackIcon={} />
- {actions.map((action) => { - const iconClasses = classNames( - "AddWallet__row__icon", - action.color, - ); - return ( -
- -
{action.icon}
-
{action.title}
-
- {action.description} -
- + {actions.map((action) => ( + +
{action.icon}
+
{action.title}
+
+ {action.description}
- ); - })} + + ))}
diff --git a/extension/src/popup/components/account/AddWallet/styles.scss b/extension/src/popup/components/account/AddWallet/styles.scss index a480640392..f2a13d0188 100644 --- a/extension/src/popup/components/account/AddWallet/styles.scss +++ b/extension/src/popup/components/account/AddWallet/styles.scss @@ -3,50 +3,48 @@ .AddWallet { display: flex; flex-direction: column; + gap: pxToRem(24px); &__row { + display: flex; + flex-direction: column; background-color: var(--sds-clr-gray-03); - border-radius: 6px; - margin-bottom: #{pxToRem(12px)}; - padding: #{pxToRem(12px)} #{pxToRem(16px)}; + border-radius: pxToRem(12px); + padding: pxToRem(16px); + text-decoration: none; cursor: pointer; &__icon { display: flex; justify-content: center; align-items: center; - width: 30px; - height: 30px; + width: pxToRem(24px); + height: pxToRem(24px); + margin-bottom: pxToRem(12px); border-radius: 50%; - border-width: 1px; - padding: #{pxToRem(8px)}; - margin-bottom: #{pxToRem(24px)}; + border: 1px solid var(--sds-clr-lilac-06); + background-color: var(--sds-clr-lilac-03); + color: var(--sds-clr-lilac-11); - &.lime { - background-color: var(--sds-clr-lime-06); - border-color: var(--sds-clr-lime-09); - } - - &.purple { - background-color: var(--sds-clr-pink-06); - border-color: var(--sds-clr-pink-09); - } - - &.blue { - background-color: var(--sds-clr-navy-06); - border-color: var(--sds-clr-navy-09); + svg { + width: pxToRem(20px); + height: pxToRem(20px); } } &__title { - color: var(--sds-clr-white); + color: var(--sds-clr-gray-12); + font-size: pxToRem(14px); + line-height: pxToRem(20px); + font-weight: var(--font-weight-medium); } &__description { + margin-top: pxToRem(4px); color: var(--sds-clr-gray-11); + font-size: pxToRem(12px); + line-height: pxToRem(18px); font-weight: var(--font-weight-medium); - margin-bottom: #{pxToRem(8px)}; - margin-top: #{pxToRem(6px)}; } } } diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index 19493c7d32..d377378e70 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -21,7 +21,9 @@ "Add": "Add", "Add a token": "Add a token", "Add a wallet": "Add a wallet", + "Add a wallet from a hardware wallet": "Add a wallet from a hardware wallet", "Add a wallet from a hardware wallet.": "Add a wallet from a hardware wallet.", + "Add a wallet using a secret key": "Add a wallet using a secret key", "Add a wallet using a secret key.": "Add a wallet using a secret key.", "Add an asset": "Add an asset", "Add another wallet": "Add another wallet", @@ -41,6 +43,7 @@ "Add token logo": "Add token logo", "Add Trustline": "Add Trustline", "Add trustline icon": "Add trustline icon", + "Add wallet": "Add wallet", "Add XLM": "Add XLM", "Adding a trustline locks a one-time 0.5 XLM reserve in your account. You can recover it later by removing the trustline.": "Adding a trustline locks a one-time 0.5 XLM reserve in your account. You can recover it later by removing the trustline.", "Adding a trustline to {{code}}": "Adding a trustline to {{code}}", @@ -163,9 +166,11 @@ "Cost to migrate": "Cost to migrate", "Couldn’t clear recent dApps": "Couldn’t clear recent dApps", "Couldn’t open this dApp": "Couldn’t open this dApp", + "Create a new wallet": "Create a new wallet", "Create a Password": "Create a Password", "Create a wallet": "Create a wallet", "Create a wallet from your seed phrase.": "Create a wallet from your seed phrase.", + "Create a wallet on your seed phrase": "Create a wallet on your seed phrase", "Create Account": "Create Account", "Create Contract": "Create Contract", "Create New Address": "Create New Address", @@ -319,6 +324,7 @@ "If you forget your password, you can use the recovery phrase to access your wallet": "If you forget your password, you can use the recovery phrase to access your wallet", "If you have accounts that were not merged, keep and use your old backup phrase to access them.": "If you have accounts that were not merged, keep and use your old backup phrase to access them.", "Import": "Import", + "Import a Stellar secret key": "Import a Stellar secret key", "Import Stellar Secret Key": "Import Stellar Secret Key", "Import using account seed phrase": "Import using account seed phrase", "Import wallet from recovery phrase": "Import wallet from recovery phrase", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index f373153af7..a2b46bcba5 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -21,7 +21,9 @@ "Add": "Adicionar", "Add a token": "Adicionar um token", "Add a wallet": "Adicionar uma carteira", + "Add a wallet from a hardware wallet": "Adicionar uma carteira de uma carteira de hardware", "Add a wallet from a hardware wallet.": "Adicionar uma carteira de uma carteira de hardware.", + "Add a wallet using a secret key": "Adicionar uma carteira usando uma chave secreta", "Add a wallet using a secret key.": "Adicionar uma carteira usando uma chave secreta.", "Add an asset": "Adicionar um ativo", "Add another wallet": "Adicionar outra carteira", @@ -41,6 +43,7 @@ "Add token logo": "Adicionar logotipo do token", "Add Trustline": "Adicionar Trustline", "Add trustline icon": "Ícone adicionar trustline", + "Add wallet": "Adicionar carteira", "Add XLM": "Adicionar XLM", "Adding a trustline locks a one-time 0.5 XLM reserve in your account. You can recover it later by removing the trustline.": "Adding a trustline locks a one-time 0.5 XLM reserve in your account. You can recover it later by removing the trustline.", "Adding a trustline to {{code}}": "Adicionando uma linha de confiança para {{code}}", @@ -163,9 +166,11 @@ "Cost to migrate": "Custo para migrar", "Couldn’t clear recent dApps": "Não foi possível limpar os dApps recentes", "Couldn’t open this dApp": "Não foi possível abrir este dApp", + "Create a new wallet": "Criar uma nova carteira", "Create a Password": "Criar uma Senha", "Create a wallet": "Criar uma carteira", "Create a wallet from your seed phrase.": "Criar uma carteira a partir da sua frase seed.", + "Create a wallet on your seed phrase": "Criar uma carteira a partir da sua frase seed", "Create Account": "Criar Conta", "Create Contract": "Criar Contrato", "Create New Address": "Criar Novo Endereço", @@ -319,6 +324,7 @@ "If you forget your password, you can use the recovery phrase to access your wallet": "Se você esquecer sua senha, pode usar a frase de recuperação para acessar sua carteira", "If you have accounts that were not merged, keep and use your old backup phrase to access them.": "Se você tiver contas que não foram mescladas, mantenha e use sua frase de backup antiga para acessá-las.", "Import": "Importar", + "Import a Stellar secret key": "Importar uma chave secreta Stellar", "Import Stellar Secret Key": "Importar Stellar Secret Key", "Import using account seed phrase": "Importar usando seed phrase da conta", "Import wallet from recovery phrase": "Importar carteira da frase de recuperação", From e5464462a931a69e0f01bb31c5dd65304c2bfa10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ca=CC=81ssio=20Marcos=20Goulart?= Date: Thu, 6 Aug 2026 15:56:05 -0700 Subject: [PATCH 2/4] fix(wallets): match add wallet card icon to Figma Use lilac-09 (Brand/Foreground/Primary) for the glyph instead of lilac-11, and size the svg to 16px to match the icon instance in the 24px circle. Co-Authored-By: Claude Opus 5 (1M context) --- .../src/popup/components/account/AddWallet/styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extension/src/popup/components/account/AddWallet/styles.scss b/extension/src/popup/components/account/AddWallet/styles.scss index f2a13d0188..34c37cc474 100644 --- a/extension/src/popup/components/account/AddWallet/styles.scss +++ b/extension/src/popup/components/account/AddWallet/styles.scss @@ -24,11 +24,11 @@ border-radius: 50%; border: 1px solid var(--sds-clr-lilac-06); background-color: var(--sds-clr-lilac-03); - color: var(--sds-clr-lilac-11); + color: var(--sds-clr-lilac-09); svg { - width: pxToRem(20px); - height: pxToRem(20px); + width: pxToRem(16px); + height: pxToRem(16px); } } From a01c3450a1435d86f0d37b88af0473f64656906b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ca=CC=81ssio=20Marcos=20Goulart?= Date: Fri, 7 Aug 2026 11:18:55 -0700 Subject: [PATCH 3/4] fix(wallets): correct add wallet seed phrase copy Reword "Create a wallet on your seed phrase" to "from your seed phrase", and drop the unused trailing-period variant of the string that no longer had any callers. Co-Authored-By: Claude Opus 5 (1M context) --- extension/src/popup/components/account/AddWallet/index.tsx | 2 +- extension/src/popup/locales/en/translation.json | 3 +-- extension/src/popup/locales/pt/translation.json | 3 +-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/extension/src/popup/components/account/AddWallet/index.tsx b/extension/src/popup/components/account/AddWallet/index.tsx index 1f7c3eb715..3398fb1019 100644 --- a/extension/src/popup/components/account/AddWallet/index.tsx +++ b/extension/src/popup/components/account/AddWallet/index.tsx @@ -19,7 +19,7 @@ export const AddWallet = ({ onBack }: AddWalletProps) => { { icon: , title: t("Create a new wallet"), - description: t("Create a wallet on your seed phrase"), + description: t("Create a wallet from your seed phrase"), link: ROUTES.addAccount, }, { diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index 57979e0ff4..7fd3c52350 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -172,8 +172,7 @@ "Create a new wallet": "Create a new wallet", "Create a Password": "Create a Password", "Create a wallet": "Create a wallet", - "Create a wallet from your seed phrase.": "Create a wallet from your seed phrase.", - "Create a wallet on your seed phrase": "Create a wallet on your seed phrase", + "Create a wallet from your seed phrase": "Create a wallet from your seed phrase", "Create Account": "Create Account", "Create Contract": "Create Contract", "Create New Address": "Create New Address", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index d0b445539c..913f1bcb4d 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -172,8 +172,7 @@ "Create a new wallet": "Criar uma nova carteira", "Create a Password": "Criar uma Senha", "Create a wallet": "Criar uma carteira", - "Create a wallet from your seed phrase.": "Criar uma carteira a partir da sua frase seed.", - "Create a wallet on your seed phrase": "Criar uma carteira a partir da sua frase seed", + "Create a wallet from your seed phrase": "Criar uma carteira a partir da sua frase seed", "Create Account": "Criar Conta", "Create Contract": "Criar Contrato", "Create New Address": "Criar Novo Endereço", From 4bd8e3c102f1a99f43fa26434adced768d3f4be2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ca=CC=81ssio=20Marcos=20Goulart?= Date: Fri, 7 Aug 2026 11:22:11 -0700 Subject: [PATCH 4/4] =?UTF-8?q?fix(i18n):=20use=20"frase=20de=20recupera?= =?UTF-8?q?=C3=A7=C3=A3o"=20in=20pt=20seed=20phrase=20copy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Matches the term already used by every other recovery phrase string in the pt locale; "frase seed" is now unused. Co-Authored-By: Claude Opus 5 (1M context) --- extension/src/popup/locales/pt/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index 913f1bcb4d..cef6e37e58 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -172,7 +172,7 @@ "Create a new wallet": "Criar uma nova carteira", "Create a Password": "Criar uma Senha", "Create a wallet": "Criar uma carteira", - "Create a wallet from your seed phrase": "Criar uma carteira a partir da sua frase seed", + "Create a wallet from your seed phrase": "Criar uma carteira a partir da sua frase de recuperação", "Create Account": "Criar Conta", "Create Contract": "Criar Contrato", "Create New Address": "Criar Novo Endereço",