feat(wallets): refresh the add wallet sheet

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();

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");

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: <Icon.Activity stroke="#99D52A" />,
-      color: "lime",
-      title: t("Create new wallet"),
-      description: t("Create a wallet from your seed phrase."),
+      icon: <Icon.PlusCircle />,
+      title: t("Create a new wallet"),
+      description: t("Create a wallet from your seed phrase"),
       link: ROUTES.addAccount,
     },
     {
-      icon: <Icon.Activity stroke="#D6409F" />,
-      color: "purple",
-      title: t("Import Stellar Secret Key"),
-      description: t("Add a wallet using a secret key."),
+      icon: <Icon.Download01 />,
+      title: t("Import a Stellar secret key"),
+      description: t("Add a wallet using a secret key"),
       link: ROUTES.importAccount,
     },
     {
-      icon: <Icon.ShieldPlus stroke="#3E63DD" />,
-      color: "blue",
+      icon: <Icon.ShieldPlus />,
       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 (
     <>
       <SubviewHeader
-        title={t("Add another wallet")}
+        title={t("Add wallet")}
         customBackAction={onBack}
-        customBackIcon={<Icon.ArrowLeft />}
+        customBackIcon={<Icon.X />}
       />
       <View.Content hasNoTopPadding>
         <div className="AddWallet">
-          {actions.map((action) => {
-            const iconClasses = classNames(
-              "AddWallet__row__icon",
-              action.color,
-            );
-            return (
-              <div key={action.title} className="AddWallet__row">
-                <Link className="AddWallet__row-link" to={action.link}>
-                  <div className={iconClasses}>{action.icon}</div>
-                  <div className="AddWallet__row__title">{action.title}</div>
-                  <div className="AddWallet__row__description">
-                    {action.description}
-                  </div>
-                </Link>
+          {actions.map((action) => (
+            <Link
+              className="AddWallet__row"
+              key={action.title}
+              to={action.link}
+            >
+              <div className="AddWallet__row__icon">{action.icon}</div>
+              <div className="AddWallet__row__title">{action.title}</div>
+              <div className="AddWallet__row__description">
+                {action.description}
               </div>
-            );
-          })}
+            </Link>
+          ))}
         </div>
       </View.Content>
     </>

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-09);
 
-      &.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(16px);
+        height: pxToRem(16px);
       }
     }
 
     &__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)};
     }
   }
 }

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}}",
@@ -166,9 +169,10 @@
   "Couldn’t clear recent dApps": "Couldn’t clear recent dApps",
   "Couldn’t copy your wallet address": "Couldn’t copy your wallet address",
   "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 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",
@@ -323,6 +327,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",

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}}",
@@ -166,9 +169,10 @@
   "Couldn’t clear recent dApps": "Não foi possível limpar os dApps recentes",
   "Couldn’t copy your wallet address": "Não foi possível copiar o endereço da sua carteira",
   "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 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",
@@ -323,6 +327,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",