diff --git a/extension/e2e-tests/loadAccount.test.ts b/extension/e2e-tests/loadAccount.test.ts index 7b38f8501e..54decf7ee4 100644 --- a/extension/e2e-tests/loadAccount.test.ts +++ b/extension/e2e-tests/loadAccount.test.ts @@ -635,7 +635,7 @@ test("Renames wallets", async ({ page, extensionId, context }) => { await walletRowOptions[0].click(); await page.getByText("Rename wallet").click(); await page.getByTestId("rename-wallet-input").fill("New Wallet"); - await page.getByText("Save").click(); + await page.getByText("Set name").click(); await expect(page.getByText("New Wallet")).toBeVisible(); }); diff --git a/extension/src/popup/components/account/RenameWallet/index.tsx b/extension/src/popup/components/account/RenameWallet/index.tsx index 248e794bbd..04453b8af7 100644 --- a/extension/src/popup/components/account/RenameWallet/index.tsx +++ b/extension/src/popup/components/account/RenameWallet/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { useDispatch } from "react-redux"; -import { Button, Card, Input } from "@stellar/design-system"; +import { Button, Icon, Input } from "@stellar/design-system"; import { Field, FieldProps, Form, Formik } from "formik"; import { object as YupObject, string as YupString } from "yup"; @@ -9,7 +9,7 @@ import { AppDispatch } from "popup/App"; import { Account } from "@shared/api/types"; import { View } from "popup/basics/layout/View"; import { updateAccountName } from "popup/ducks/accountServices"; -import { truncatedPublicKey } from "helpers/stellar"; +import { IdenticonImg } from "popup/components/identicons/IdenticonImg"; import { METRIC_NAMES } from "popup/constants/metricsNames"; import { emitMetric } from "helpers/metrics"; @@ -38,7 +38,6 @@ export const RenameWallet = ({ (account) => account.publicKey === publicKey, )!; const accountName = account.name; - const shortPublicKey = truncatedPublicKey(publicKey); const initialValues: FormValue = { accountName, }; @@ -57,63 +56,60 @@ export const RenameWallet = ({ return (
- -

{t("Rename Wallet")}

- - {({ errors }) => ( - <> -
- - {({ field }: FieldProps) => ( - - )} - -
- {t("Address")}: {shortPublicKey} -
-
- - -
-
- - )} -
-
+ + +
+ +
+ + + {({ errors }) => ( +
+ + {({ field }: FieldProps) => ( + + )} + +
+ + +
+
+ )} +
); diff --git a/extension/src/popup/components/account/RenameWallet/styles.scss b/extension/src/popup/components/account/RenameWallet/styles.scss index e82d450371..dfe0318335 100644 --- a/extension/src/popup/components/account/RenameWallet/styles.scss +++ b/extension/src/popup/components/account/RenameWallet/styles.scss @@ -3,21 +3,65 @@ .RenameWallet { z-index: var(--z-index--banner); position: relative; + display: flex; + flex-direction: column; + gap: #{pxToRem(24px)}; + width: #{pxToRem(312px)}; + margin: 0 auto; + padding: #{pxToRem(24px)}; + background-color: var(--sds-clr-gray-01); + border-radius: #{pxToRem(32px)}; - &__short-address { - font-size: 14px; - color: var(--sds-clr-gray-10); - margin: #{pxToRem(12px)} 0 #{pxToRem(18px)} 0; + &__close { + position: absolute; + top: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + width: #{pxToRem(34px)}; + height: #{pxToRem(34px)}; + padding: 0; + border: 0; + border-radius: 50%; + background-color: var(--sds-clr-gray-03); + color: var(--sds-clr-gray-11); + cursor: pointer; + + svg { + width: #{pxToRem(14px)}; + height: #{pxToRem(14px)}; + } + } + + &__identicon { + display: flex; + align-items: center; + justify-content: center; + width: #{pxToRem(48px)}; + height: #{pxToRem(48px)}; + margin: 0 auto; + border-radius: 50%; + background-color: var(--sds-clr-gray-03); + + .IdenticonImg { + width: #{pxToRem(20.8px)}; + height: #{pxToRem(20.8px)}; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: #{pxToRem(24px)}; } &__actions { display: flex; + gap: #{pxToRem(8px)}; button { flex: 1; } - button:not(:first-child) { - margin-left: #{pxToRem(10px)}; - } } } diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index 19493c7d32..80d8ec8edb 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -556,6 +556,7 @@ "Set default": "Set default", "Set Flags": "Set Flags", "Set Max": "Set Max", + "Set name": "Set name", "Set recommended": "Set recommended", "Settings": "Settings", "Share feedback": "Share feedback", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index f373153af7..de74775589 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -556,6 +556,7 @@ "Set default": "Definir padrão", "Set Flags": "Definir Flags", "Set Max": "Definir Maximo", + "Set name": "Set name", "Set recommended": "Definir recomendado", "Settings": "Configurações", "Share feedback": "Compartilhar feedback", diff --git a/extension/src/popup/views/Wallets/styles.scss b/extension/src/popup/views/Wallets/styles.scss index 0f8f2321d4..02ca9fd318 100644 --- a/extension/src/popup/views/Wallets/styles.scss +++ b/extension/src/popup/views/Wallets/styles.scss @@ -2,8 +2,11 @@ .RenameWalletWrapper { position: absolute; + z-index: var(--z-index--banner); + top: 50%; + left: 0; width: 100%; - top: 30%; + transform: translateY(-50%); } .AddWalletWrapper {