Merge pull request #2538 from lujakob/feat/account-pages-profile-header

feat: add account detail pages header

src/app/components/AccountDetailLayout/index.tsx

@@ -0,0 +1,64 @@
+import { CaretLeftIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import Header from "@components/Header";
+import IconButton from "@components/IconButton";
+import { useTranslation } from "react-i18next";
+import { Outlet, useMatch, useNavigate, useParams } from "react-router-dom";
+import Avatar from "~/app/components/Avatar";
+import { useAccounts } from "~/app/context/AccountsContext";
+
+function AccountDetailLayout() {
+  const navigate = useNavigate();
+  const isRoot = useMatch("accounts/:id");
+  const { accounts } = useAccounts();
+  const { t } = useTranslation("translation", {
+    keyPrefix: "accounts.account_view",
+  });
+  const { id } = useParams() as { id: string };
+
+  function back() {
+    if (isRoot) {
+      navigate("/accounts");
+    } else {
+      navigate(`/accounts/${id}`);
+    }
+  }
+
+  const account = accounts[id];
+
+  return (
+    <>
+      <Header
+        title={t("title1")}
+        headerLeft={
+          <IconButton
+            onClick={back}
+            icon={<CaretLeftIcon className="w-4 h-4" />}
+          />
+        }
+      />
+      {account && (
+        <div className="border-b border-gray-200 dark:border-neutral-500 bg-white dark:bg-surface-02dp p-4">
+          <div className="flex-row justify-center  space-x-2 flex items-center">
+            <Avatar
+              size={32}
+              url={account?.avatarUrl}
+              name={account?.id || ""}
+            />
+            <h2
+              title={account.name}
+              className="text-xl font-semibold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap leading-1 my-2"
+            >
+              {account.name}
+            </h2>
+          </div>
+          <div className="flex-row justify-center flex items-center text-gray-500 text-sm dark:text-neutral-500">
+            {account.connector}
+          </div>
+        </div>
+      )}
+      <Outlet />
+    </>
+  );
+}
+
+export default AccountDetailLayout;

src/app/components/Hyperlink/index.tsx

@@ -4,9 +4,10 @@ import { classNames } from "~/app/utils";
 type Props = {
   href?: string;
   onClick?: () => void;
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
   target?: "_blank" | undefined;
+  rel?: string;
 };
 
 export default function Hyperlink({
@@ -15,6 +16,7 @@ export default function Hyperlink({
   href,
   className,
   target,
+  rel,
 }: Props) {
   return (
     <a
@@ -25,6 +27,7 @@ export default function Hyperlink({
       href={href}
       onClick={onClick}
       target={target}
+      rel={rel}
     >
       {children}
     </a>

src/app/components/form/TextField/index.tsx

@@ -25,6 +25,7 @@ const TextField = ({
   pattern,
   placeholder,
   required = false,
+  readOnly = false,
   suffix,
   title,
   type = "text",
@@ -59,6 +60,7 @@ const TextField = ({
         type={type}
         value={value}
         tabIndex={tabIndex}
+        readOnly={readOnly}
       />
 
       {hint && (

src/app/router/Options/Options.tsx

@@ -20,6 +20,7 @@ import Unlock from "@screens/Unlock";
 import { useTranslation } from "react-i18next";
 import { HashRouter, Navigate, Outlet, Route, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
+import AccountDetailLayout from "~/app/components/AccountDetailLayout";
 import ScrollToTop from "~/app/components/ScrollToTop";
 import Providers from "~/app/context/Providers";
 import RequireAuth from "~/app/router/RequireAuth";
@@ -84,20 +85,18 @@ function Options() {
             <Route path="settings" element={<Settings />} />
             <Route path="scanQRCode" element={<ScanQRCode />} />
             <Route path="accounts">
-              <Route path=":id" element={<AccountDetail />} />
-              <Route
-                path=":id/secret-key/backup"
-                element={<BackupSecretKey />}
-              />
-              <Route
-                path=":id/secret-key/generate"
-                element={<GenerateSecretKey />}
-              />
-              <Route
-                path=":id/secret-key/import"
-                element={<ImportSecretKey />}
-              />
-              <Route path=":id/nostr" element={<NostrSettings />} />
+              <Route index element={<Accounts />} />
+              <Route path=":id" element={<AccountDetailLayout />}>
+                <Route index element={<AccountDetail />} />
+                <Route path="secret-key/backup" element={<BackupSecretKey />} />
+                <Route
+                  path="secret-key/generate"
+                  element={<GenerateSecretKey />}
+                />
+                <Route path="secret-key/import" element={<ImportSecretKey />} />
+                <Route path="nostr" element={<NostrSettings />} />
+              </Route>
+
               <Route
                 path="new"
                 element={
@@ -125,7 +124,6 @@ function Options() {
                   {renderRoutes(connectorRoutes)}
                 </Route>
               </Route>
-              <Route index element={<Accounts />} />
             </Route>
             <Route
               path="test-connection"

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

@@ -10,17 +10,21 @@ import SecretKeyDescription from "~/app/components/mnemonic/SecretKeyDescription
 import api from "~/common/lib/api";
 
 function BackupSecretKey() {
-  const [mnemonic, setMnemonic] = useState<string | undefined>();
   const { t } = useTranslation("translation", {
     keyPrefix: "accounts.account_view.mnemonic",
   });
 
+  const [mnemonic, setMnemonic] = useState<string | undefined>();
+  const [loading, setLoading] = useState<boolean>(true);
+
   const { id } = useParams();
 
   const fetchData = useCallback(async () => {
     try {
+      setLoading(true);
       const accountMnemonic = await api.getMnemonic(id as string);
       setMnemonic(accountMnemonic);
+      setLoading(false);
     } catch (e) {
       console.error(e);
       if (e instanceof Error) toast.error(`Error: ${e.message}`);
@@ -31,7 +35,7 @@ function BackupSecretKey() {
     fetchData();
   }, [fetchData]);
 
-  return !mnemonic ? (
+  return loading ? (
     <div className="flex justify-center mt-5">
       <Loading />
     </div>
@@ -43,7 +47,6 @@ function BackupSecretKey() {
             {t("backup.title")}
           </h1>
           <SecretKeyDescription />
-
           <MnemonicInputs mnemonic={mnemonic} readOnly />
         </ContentBox>
       </Container>