feat: import and backup flow updates

src/app/components/CardButton/Group.tsx

@@ -3,5 +3,7 @@ export type Props = {
 };
 
 export default function CardButtonGroup({ children }: Props) {
-  return <div className="grid gap-5 grid-cols-2">{children}</div>;
+  return (
+    <div className="grid gap-5 grid-cols-1 sm:grid-cols-2">{children}</div>
+  );
 }

src/app/components/CardButton/index.tsx

@@ -3,34 +3,30 @@ import React from "react";
 export type Props = {
   title: string;
   description: string;
-  icon: IconType;
+  icon: React.ComponentType<{
+    className?: string;
+  }>;
   onClick: () => void;
 };
 
-interface IconTypeProps {
-  className: string;
-}
-
-type IconType = (props: IconTypeProps) => JSX.Element;
-
 export default function CardButton({
   title,
   description,
-  icon,
+  icon: Icon,
   onClick,
 }: Props) {
   return (
-    <div
-      className="flex flex-col gap-2 p-5 hover:bg-gray-50 dark:hover:bg-surface-08dp rounded-md border border-gray-200 dark:border-neutral-700 hover:border-gray-300 hover:dark:border-neutral-800 cursor-pointer"
+    <button
+      className="flex flex-col flex-1 text-left border border-gray-200 dark:border-neutral-700 rounded-md p-6 bg-white dark:bg-surface-01dp hover:bg-gray-100 dark:hover:bg-surface-02dp hover:border-gray-300 dark:hover:border-neutral-700 focus:bg-amber-50 dark:focus:bg-surface-02dp cursor-pointer focus:ring-primary focus:border-primary dark:focus:border-primary focus:ring-1 gap-2"
       onClick={onClick}
     >
-      {React.createElement(icon, {
-        className: "w-8 h-8 text-gray-700 dark:text-white",
-      })}
-      <h3 className="font-medium text-gray-700 dark:text-neutral-200">
+      <Icon className="w-8 h-8 text-gray-700 dark:text-white" />
+      <h3 className="font-medium leading-6 text-md text-gray-800 dark:text-neutral-200">
         {title}
       </h3>
-      <p className="text-gray-500 dark:text-neutral-500">{description}</p>
-    </div>
+      <p className="text-gray-600 dark:text-neutral-400 text-sm leading-5">
+        {description}
+      </p>
+    </button>
   );
 }

src/app/components/ContentBox/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function ContentBox({ children }: React.PropsWithChildren<object>) {
   return (
-    <div className="mt-6 bg-white rounded-2xl p-10 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-6">
+    <div className="mt-6 bg-white rounded-2xl p-10 border border-gray-200 dark:border-neutral-700 dark:bg-surface-01dp flex flex-col gap-8">
       {children}
     </div>
   );

src/app/components/mnemonic/MnemonicBackupDescription/index.tsx

@@ -3,7 +3,7 @@ import {
   PopiconsShieldLine,
   PopiconsTriangleExclamationLine,
 } from "@popicons/react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { classNames } from "~/app/utils";
 
 function MnemonicInstructions() {
@@ -16,7 +16,16 @@ function MnemonicInstructions() {
       <div className="flex flex-col gap-4">
         <ListItem
           icon={<PopiconsLifebuoyLine />}
-          title={t("description.recovery_phrase")}
+          title={
+            <Trans
+              i18nKey={"description.recovery_phrase"}
+              t={t}
+              components={[
+                // eslint-disable-next-line react/jsx-key
+                <b></b>,
+              ]}
+            />
+          }
           type="info"
         />
         <ListItem
@@ -26,7 +35,16 @@ function MnemonicInstructions() {
         />
         <ListItem
           icon={<PopiconsTriangleExclamationLine />}
-          title={t("description.warning")}
+          title={
+            <Trans
+              i18nKey={"description.warning"}
+              t={t}
+              components={[
+                // eslint-disable-next-line react/jsx-key
+                <b></b>,
+              ]}
+            />
+          }
           type="warn"
         />
       </div>
@@ -38,15 +56,15 @@ export default MnemonicInstructions;
 
 type ListItemProps = {
   icon: React.ReactNode;
-  title: string;
+  title: string | React.ReactNode;
   type: "warn" | "info";
 };
 
 function ListItem({ icon, title, type }: ListItemProps) {
   return (
     <div
       className={classNames(
-        type == "warn" && "text-orange-700 dark:text-orange-200",
+        type == "warn" && "text-orange-700 dark:text-orange-300",
         type == "info" && "text-gray-600 dark:text-neutral-400",
         "flex gap-2 items-center text-sm"
       )}

src/app/components/mnemonic/MnemonicDescription/index.tsx

@@ -1,6 +1,7 @@
-import { PopiconsDownloadLine, PopiconsKeyLine } from "@popicons/react";
-import { useTranslation } from "react-i18next";
+import { PopiconsKeyLine } from "@popicons/react";
+import { Trans, useTranslation } from "react-i18next";
 import FaceSurpriseIcon from "~/app/icons/FaceSurpriseIcon";
+import NostrIcon from "~/app/icons/NostrIcon";
 
 function MnemonicDescription() {
   const { t } = useTranslation("translation", {
@@ -10,20 +11,44 @@ function MnemonicDescription() {
   return (
     <>
       <div className="flex flex-col gap-4">
-        <ListItem icon={<PopiconsKeyLine />} title={t("new.items.keys")} />
-        <ListItem icon={<FaceSurpriseIcon />} title={t("new.items.usage")} />
         <ListItem
-          icon={<PopiconsDownloadLine />}
-          title={t("new.items.recovery_phrase")}
+          icon={<PopiconsKeyLine />}
+          title={
+            <Trans
+              i18nKey={"new.items.keys"}
+              t={t}
+              components={[
+                //eslint-disable-next-line react/jsx-key
+                <span className="font-semibold"></span>,
+              ]}
+            />
+          }
         />
+        <ListItem
+          icon={<FaceSurpriseIcon />}
+          title={
+            <Trans
+              i18nKey={"new.items.usage"}
+              t={t}
+              components={[
+                // eslint-disable-next-line react/jsx-key
+                <span className="font-semibold"></span>,
+              ]}
+            />
+          }
+        />
+        <ListItem icon={<NostrIcon />} title={t("new.items.nostr_key")} />
       </div>
     </>
   );
 }
 
 export default MnemonicDescription;
 
-type ListItemProps = { icon: React.ReactNode; title: string };
+type ListItemProps = {
+  icon: React.ReactNode;
+  title: string | React.ReactElement;
+};
 
 function ListItem({ icon, title }: ListItemProps) {
   return (

src/app/components/mnemonic/MnemonicInputs/index.tsx

@@ -36,17 +36,17 @@ export default function MnemonicInputs({
   }
 
   return (
-    <div className="border border-gray-200 dark:border-neutral-700 rounded-2xl p-6 flex flex-col gap-4 items-center justify-center">
+    <div className="border border-gray-200 dark:border-neutral-800 rounded-2xl p-6 flex flex-col gap-4 items-center justify-center">
       <h3 className="text-lg font-semibold dark:text-white">
         {t("inputs.title")}
       </h3>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-5 justify-center">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-4 justify-center">
         {words.map((word, i) => {
           const isRevealed = revealedIndex === i;
           const inputId = `mnemonic-word-${i}`;
           return (
-            <div key={i} className="flex justify-center items-center gap-2">
-              <span className="w-6 text-gray-600 dark:text-neutral-400">
+            <div key={i} className="flex justify-center items-center gap-0.5">
+              <span className="w-7 text-gray-600 dark:text-neutral-400">
                 {i + 1}.
               </span>
               <div className="w-full">

src/app/icons/NostrIcon.tsx

@@ -2,17 +2,18 @@ import { SVGProps } from "react";
 
 const NostrIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
     <path
-      d="M18.3588 1.13207C18.1367 1.23264 17.9104 1.50083 17.8182 1.7774C17.7763 1.90312 17.7344 2.17131 17.7218 2.42274C17.7092 2.77893 17.7176 2.90046 17.793 3.14351C17.9607 3.69665 18.3755 4.2037 19.1382 4.78199C19.8757 5.34351 20.102 5.67875 20.1355 6.25704C20.1816 7.04066 19.8967 7.56447 19.2513 7.88295C18.9077 8.05057 18.6647 8.0799 18.1367 8.00866C17.7805 7.96257 17.7008 7.96257 17.4955 8.02542C17.3656 8.06314 17.2148 8.09247 17.1603 8.09247C17.1016 8.09247 16.7622 7.91228 16.3976 7.69437C15.2494 7.00713 14.8723 6.90237 13.5439 6.89818C12.4837 6.89818 12.2113 6.94009 11.3397 7.23761C10.774 7.43037 10.598 7.5058 9.24863 8.1679C8.77511 8.39838 8.25549 8.62885 8.09625 8.67495C7.63529 8.82162 7.06539 8.88866 6.32786 8.88866C5.56519 8.88866 5.48138 8.91381 5.56519 9.13171C5.59034 9.19457 5.63224 9.27419 5.66158 9.30771C5.7831 9.45019 5.77891 9.47114 5.61548 9.42505C5.52748 9.40409 5.42691 9.358 5.39338 9.32866C5.21319 9.16943 4.53014 9.14009 4.02729 9.26581C3.17243 9.4879 2.38461 10.2212 2.07871 11.0929C1.97814 11.3736 1.97395 11.6041 2.06614 11.6418C2.10804 11.6544 2.26309 11.6041 2.4349 11.5203C2.59833 11.4407 2.79528 11.3569 2.86652 11.3443C3.03833 11.3066 3.04252 11.3317 2.90004 11.7633C2.77014 12.1656 2.76176 12.4422 2.88328 12.5931C2.92938 12.6517 2.99643 12.702 3.02995 12.702C3.06347 12.702 3.273 12.5302 3.49509 12.3249C3.77167 12.0651 3.9309 11.9477 3.99795 11.9477C4.065 11.9477 4.09433 11.9645 4.07757 11.998C3.91414 12.3919 3.88062 12.966 4.01471 13.0498C4.09014 13.0959 4.12367 13.0833 4.66005 12.7691C5.10843 12.5051 5.76215 12.3165 6.43262 12.2536C6.64215 12.2327 6.67148 12.2452 6.91453 12.4087C7.05701 12.5051 7.3252 12.6559 7.51377 12.7481C7.92444 12.9451 8.94692 13.2887 9.52101 13.4144C9.75149 13.4689 9.95683 13.5233 9.97359 13.5401C10.0239 13.5862 9.67187 14.0304 9.28635 14.4075C8.76254 14.9188 8.15492 15.3923 7.86996 15.5013C7.42577 15.6731 7.20367 15.9329 7.09053 16.4106C7.05282 16.5698 6.9271 16.7877 6.58767 17.2738C6.33624 17.63 5.93396 18.1999 5.6951 18.5477C4.59719 20.115 4.64329 20.0647 4.20748 20.1611C3.92252 20.2239 3.62919 20.3832 3.47414 20.555C3.31909 20.731 3.23947 20.974 3.30233 21.0872C3.34843 21.1794 3.41128 21.1836 3.57471 21.1249C3.72557 21.0662 3.74233 21.0956 3.63757 21.2422C3.4909 21.4517 3.26043 21.963 3.21433 22.1977C3.18081 22.3653 3.18081 22.4826 3.21433 22.6502C3.26043 22.8765 3.38195 23.0441 3.46157 22.9897C3.48671 22.9771 3.58309 22.8095 3.67947 22.6209C3.87224 22.2312 4.00633 22.0552 4.51757 21.523C4.71452 21.3135 4.97853 20.9866 5.10005 20.7896C5.47719 20.182 6.01358 19.4361 6.89777 18.2963C7.7191 17.2361 7.86158 17.0685 8.04596 16.9973C8.40215 16.8548 8.68292 16.5614 8.76254 16.2472C8.80863 16.0753 8.85892 16.0293 9.76406 15.3462L10.7237 14.6254L11.2475 14.4369C11.5366 14.3363 11.7881 14.2525 11.809 14.2525C11.8551 14.2525 11.7252 14.5542 11.6582 14.6087C11.6246 14.6296 11.5073 14.902 11.39 15.2079C11.1553 15.8197 11.1218 16.0753 11.2433 16.331C11.281 16.4064 11.3732 16.5112 11.4486 16.5573C11.6624 16.6914 11.8719 16.6662 12.1904 16.4734C12.3999 16.3477 12.7938 16.2053 13.8624 15.87C15.7816 15.2708 15.8487 15.2498 16.0498 15.2666L16.2258 15.2792L16.2719 15.539C16.3264 15.8407 16.4186 15.9999 16.5694 16.0586C16.7328 16.1214 16.7999 16.0418 16.7706 15.8072C16.7287 15.4719 16.7873 15.4719 17.1309 15.8155C17.4536 16.1382 17.7176 16.3058 17.902 16.3058C18.0445 16.3058 18.078 16.2053 17.99 16.0251C17.8308 15.6856 17.022 14.4913 16.8837 14.3866C16.7496 14.2818 16.7035 14.2734 16.3557 14.2734C15.9408 14.2734 16.1252 14.2232 13.3972 15.0864C12.8776 15.254 12.4166 15.3965 12.3747 15.4091C12.27 15.4426 12.2951 15.3797 12.534 15.0152C12.6765 14.8014 12.777 14.7009 12.9237 14.6171C13.2254 14.4536 13.481 14.2609 13.481 14.1938C13.481 14.1603 13.5271 14.0765 13.5858 14.0094L13.6864 13.8879L14.3904 13.8628C15.7816 13.8083 16.6407 13.5611 17.3447 13.0037C17.9565 12.526 18.2121 11.8974 18.2163 10.875C18.2163 10.5355 18.233 10.3511 18.2708 10.305C18.2959 10.2715 18.518 10.1207 18.761 9.974C19.8506 9.3119 20.3953 8.75876 20.8479 7.86199C21.158 7.2418 21.267 6.46237 21.1329 5.8338C20.9778 5.10046 20.6132 4.61018 19.6997 3.90617C19.1298 3.46617 19.0083 3.32789 18.9831 3.08903C18.958 2.86693 19.0125 2.82084 19.4525 2.69512C19.6829 2.63227 19.9009 2.61131 20.4372 2.60712C21.3005 2.59455 21.4136 2.53169 20.8647 2.37246C20.7222 2.33055 20.6174 2.28026 20.6342 2.2635C20.651 2.24674 20.7809 2.22579 20.9191 2.21741C21.1077 2.20903 21.1706 2.18807 21.1706 2.14198C21.1706 2.09588 20.9778 2.01626 20.521 1.86541C19.993 1.6936 19.8045 1.60979 19.5363 1.4296C18.9999 1.06502 18.6814 0.985403 18.3588 1.13207Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.7502 1.5C13.3359 1.5 13.0002 1.83579 13.0002 2.25C13.0002 2.44257 13.0717 2.61663 13.191 2.74981C13.2963 2.86751 13.4367 2.95067 13.5937 2.98382C13.6435 2.99433 13.6958 3 13.7502 3C14.1644 3 14.5002 2.66421 14.5002 2.25C14.5002 1.83579 14.1644 1.5 13.7502 1.5ZM11.5002 2.25C11.5002 1.00736 12.5075 0 13.7502 0C14.7298 0 15.5632 0.626106 15.8721 1.5H17.2502C17.6644 1.5 18.0002 1.83579 18.0002 2.25C18.0002 2.66421 17.6644 3 17.2502 3H15.8721C15.7646 3.30433 15.5934 3.5786 15.3746 3.80685C15.8823 4.15684 16.2746 4.56859 16.5559 5.03129C17.0977 5.92273 17.1689 6.90747 16.9843 7.79359C16.803 8.66356 16.4559 9.21659 16.076 9.55603C16.0407 9.58759 16.0055 9.61689 15.9707 9.64408C15.9901 9.86441 15.987 10.0911 15.961 10.3234C15.8963 11.095 15.7248 11.9737 14.9635 12.7682C14.447 13.3072 13.7758 13.6448 13.2782 13.8437C13.0474 13.936 12.8402 14.0039 12.6813 14.0508C12.5887 14.2176 12.4689 14.451 12.3551 14.7243C12.1564 15.2017 11.999 15.7473 12.0002 16.2484C12.0011 16.664 12.1111 17.3476 12.2365 17.9768C12.2743 18.1665 12.3122 18.3447 12.3464 18.5001H13.2502C13.6644 18.5001 14.0002 18.8359 14.0002 19.2501C14.0002 19.6643 13.6644 20.0001 13.2502 20.0001H9.50017C9.15558 20.0001 8.85533 19.7653 8.77228 19.4308L8.77052 19.4237C8.77228 19.4308 8.77228 19.4308 8.77228 19.4308L8.77052 19.4237L8.76601 19.4053L8.74947 19.337C8.73534 19.2781 8.71532 19.1935 8.69136 19.0891C8.64351 18.8806 8.5796 18.5917 8.51548 18.2701C8.39148 17.6482 8.25146 16.8318 8.25017 16.2518C8.24854 15.5227 8.455 14.8065 8.6849 14.2341C8.16639 14.1203 7.6883 13.9364 7.28499 13.7003C6.8511 13.4462 6.41419 13.0729 6.17829 12.5938H2.75029C2.4353 12.5938 2.15363 12.3969 2.04556 12.1011C1.93749 11.8052 2.0258 11.4733 2.26663 11.2703L3.18599 10.4953C2.80831 10.4564 2.51374 10.1372 2.51374 9.74926C2.51374 8.4257 3.50881 7.51335 4.62109 6.95581C5.76228 6.38377 7.24656 6.05918 8.72722 5.97699C10.2102 5.89468 11.7615 6.05149 13.0442 6.50251C13.9451 6.81927 14.793 7.31253 15.3456 8.03745C15.4073 7.89899 15.4675 7.71949 15.5158 7.48766C15.6401 6.89125 15.5786 6.31137 15.2741 5.81039C14.9722 5.31375 14.3741 4.8005 13.2451 4.44292C12.7831 4.33682 12.3768 4.0893 12.0732 3.75019C11.7174 3.35262 11.5002 2.82579 11.5002 2.25ZM4.8033 11.0938H6.75004C7.56531 11.0938 8.13291 11.0572 8.50423 10.8742C8.66077 10.797 8.76707 10.6992 8.8435 10.56C8.92539 10.4108 9.00004 10.1635 9.00004 9.75C9.00004 9.33579 9.33582 9 9.75004 9C10.1643 9 10.5 9.33579 10.5 9.75C10.5 10.3365 10.3949 10.8509 10.1584 11.2818C9.91642 11.7226 9.56562 12.0233 9.16741 12.2196C8.87737 12.3626 8.55734 12.4509 8.23036 12.5056C8.65453 12.7107 9.21505 12.8545 9.82839 12.8643C10.5744 12.8761 11.3449 12.8185 12.0337 12.6714L12.0349 12.6712L12.0403 12.67C12.047 12.6684 12.0586 12.6657 12.0745 12.6618C12.1065 12.6539 12.1557 12.6412 12.2185 12.6232C12.3445 12.5871 12.5219 12.5307 12.7213 12.451C13.1343 12.2858 13.5783 12.0457 13.8805 11.7303C14.2959 11.2968 14.4145 10.8252 14.4671 10.1883C14.4677 10.1802 14.4685 10.1722 14.4695 10.1642C14.5008 9.89228 14.4769 9.65948 14.416 9.45719C14.2302 8.83994 13.6178 8.29418 12.5467 7.91759C11.4962 7.54823 10.1516 7.40024 8.81035 7.47469C7.46679 7.54926 6.19855 7.84298 5.29327 8.29677C4.84236 8.52279 4.52863 8.7611 4.32472 8.99926H5.23453C5.54952 8.99926 5.83094 9.19607 5.93901 9.49194C6.04708 9.7878 5.95877 10.1197 5.71794 10.3227L4.8033 11.0938ZM10.8948 14.3362C10.6852 14.3506 10.4759 14.3595 10.2686 14.3634C10.0228 14.8666 9.74868 15.5834 9.75016 16.2484C9.75109 16.664 9.86108 17.3476 9.98652 17.9768C10.0243 18.1665 10.0622 18.3447 10.0964 18.5001H10.8124C10.7969 18.4258 10.7812 18.349 10.7655 18.2701C10.6415 17.6482 10.5015 16.8318 10.5002 16.2518C10.4986 15.5522 10.6874 14.8745 10.8948 14.3362Z"
       fill="currentColor"
-    />
+    ></path>
   </svg>
 );
 export default NostrIcon;

src/app/router/Options/Options.tsx

@@ -31,7 +31,6 @@ import GenerateMnemonic from "~/app/screens/Accounts/GenerateMnemonic";
 import NewMnemonic from "~/app/screens/Accounts/GenerateMnemonic/new";
 import ImportMnemonic from "~/app/screens/Accounts/ImportMnemonic";
 import NostrSettings from "~/app/screens/Accounts/NostrSettings";
-import NostrSetup from "~/app/screens/Accounts/NostrSetup/NostrSetup";
 
 import LNURLRedeem from "~/app/screens/LNURLRedeem";
 import OnChainReceive from "~/app/screens/OnChainReceive";
@@ -94,7 +93,6 @@ function Options() {
                 <Route path="secret-key/new" element={<NewMnemonic />} />
                 <Route path="secret-key/import" element={<ImportMnemonic />} />
                 <Route path="nostr/settings" element={<NostrSettings />} />
-                <Route path="nostr/setup" element={<NostrSetup />} />
               </Route>
 
               <Route

src/app/screens/Accounts/BackupMnemonic/index.tsx

@@ -58,7 +58,7 @@ function BackupMnemonic() {
     </div>
   ) : (
     <div>
-      <Container>
+      <Container maxWidth="md">
         <ContentBox>
           <h1 className="font-bold text-2xl dark:text-white">
             {t("backup.title")}
@@ -72,7 +72,7 @@ function BackupMnemonic() {
             }}
           />
 
-          <div className="flex justify-center mt-6 w-64 mx-auto">
+          <div className="flex justify-center w-64 mx-auto">
             <Button
               label={tCommon("actions.finish")}
               primary

src/app/screens/Accounts/Detail/index.tsx

@@ -337,7 +337,7 @@ function AccountDetail() {
               </div>
 
               <div className="flex-none sm:w-1/5 w-full pt-4 sm:pt-0">
-                <Link to={`secret-key/${hasMnemonic ? "backup" : "new"}`}>
+                <Link to={`secret-key/${hasMnemonic ? "backup" : "generate"}`}>
                   <Button
                     label={t(
                       hasMnemonic

src/app/screens/Accounts/GenerateMnemonic/index.tsx

@@ -18,7 +18,6 @@ function GenerateMnemonic() {
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view.mnemonic",
   });
-  const { t: tCommon } = useTranslation("common");
 
   const [hasConfirmedBackup, setHasConfirmedBackup] = useState(false);
   const [hasNostrPrivateKey, setHasNostrPrivateKey] = useState(false);
@@ -66,18 +65,13 @@ function GenerateMnemonic() {
     }
   }
 
-  function cancel() {
-    // go to account settings
-    navigate(`/accounts/${id}`);
-  }
-
   return !mnemonic ? (
     <div className="flex justify-center mt-5">
       <Loading />
     </div>
   ) : (
     <div>
-      <Container>
+      <Container maxWidth="md">
         <ContentBox>
           <h1 className="font-bold text-2xl dark:text-white">
             {t("generate.title")}
@@ -94,9 +88,7 @@ function GenerateMnemonic() {
               setHasConfirmedBackup(hasConfirmedBackup);
             }}
           ></MnemonicInputs>
-
-          <div className="flex justify-center mt-6 gap-4">
-            <Button label={tCommon("actions.cancel")} onClick={cancel} />
+          <div className="flex justify-center">
             <Button
               label={t("backup.save")}
               primary