feat(wallets): refresh the rename wallet modal

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

extension/src/popup/components/account/RenameWallet/index.tsx

@@ -1,15 +1,15 @@
 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";
 
 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 (
     <View.Content hasNoTopPadding>
       <div className="RenameWallet">
-        <Card>
-          <p>{t("Rename Wallet")}</p>
-          <Formik
-            initialValues={initialValues}
-            onSubmit={handleSubmit}
-            validationSchema={YupObject().shape({
-              accountName: YupString().max(
-                24,
-                t("max of 24 characters allowed"),
-              ),
-            })}
-          >
-            {({ errors }) => (
-              <>
-                <Form className="RenameWallet__form">
-                  <Field name="accountName">
-                    {({ field }: FieldProps) => (
-                      <Input
-                        data-testid="rename-wallet-input"
-                        autoFocus
-                        fieldSize="md"
-                        autoComplete="off"
-                        id="accountName"
-                        placeholder={accountName}
-                        maxLength={24}
-                        {...field}
-                        error={errors.accountName}
-                      />
-                    )}
-                  </Field>
-                  <div className="RenameWallet__short-address">
-                    {t("Address")}: {shortPublicKey}
-                  </div>
-                  <div className="RenameWallet__actions">
-                    <Button
-                      type="button"
-                      size="md"
-                      isRounded
-                      variant="tertiary"
-                      onClick={onClose}
-                    >
-                      {t("Cancel")}
-                    </Button>
-                    <Button
-                      type="submit"
-                      size="md"
-                      isRounded
-                      variant="secondary"
-                    >
-                      {t("Save")}
-                    </Button>
-                  </div>
-                </Form>
-              </>
-            )}
-          </Formik>
-        </Card>
+        <button
+          className="RenameWallet__close"
+          onClick={onClose}
+          data-testid="rename-wallet-close"
+          aria-label={t("Close")}
+        >
+          <Icon.X />
+        </button>
+
+        <div className="RenameWallet__identicon">
+          <IdenticonImg publicKey={publicKey} />
+        </div>
+
+        <Formik
+          initialValues={initialValues}
+          onSubmit={handleSubmit}
+          validationSchema={YupObject().shape({
+            accountName: YupString().max(24, t("max of 24 characters allowed")),
+          })}
+        >
+          {({ errors }) => (
+            <Form className="RenameWallet__form">
+              <Field name="accountName">
+                {({ field }: FieldProps) => (
+                  <Input
+                    data-testid="rename-wallet-input"
+                    autoFocus
+                    fieldSize="md"
+                    autoComplete="off"
+                    id="accountName"
+                    placeholder={accountName}
+                    maxLength={24}
+                    {...field}
+                    error={errors.accountName}
+                  />
+                )}
+              </Field>
+              <div className="RenameWallet__actions">
+                <Button
+                  type="button"
+                  size="md"
+                  isRounded
+                  variant="tertiary"
+                  onClick={onClose}
+                >
+                  {t("Cancel")}
+                </Button>
+                <Button type="submit" size="md" isRounded variant="secondary">
+                  {t("Set name")}
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
       </div>
     </View.Content>
   );

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

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",

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",

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 {