feat: add the transfer buttons to top navigation (#1128)

Author: euharrison

apps/namadillo/src/App/App.tsx

@@ -1,13 +1,11 @@
-import { AppContainer } from "App/Common/AppContainer";
 import { Toasts } from "App/Common/Toast";
-import { TopNavigation } from "App/Common/TopNavigation";
+import { AppLayout } from "App/Layout/AppLayout";
 import { createBrowserHistory } from "history";
 import { useExtensionEvents } from "hooks/useExtensionEvents";
 import { useOnNamadaExtensionAttached } from "hooks/useOnNamadaExtensionAttached";
 import { useTransactionCallback } from "hooks/useTransactionCallbacks";
 import { useTransactionNotifications } from "hooks/useTransactionNotifications";
 import { Outlet } from "react-router-dom";
-import { Navigation } from "./Common/Navigation";
 import { ChainLoader } from "./Setup/ChainLoader";
 
 export const history = createBrowserHistory({ window });
@@ -21,15 +19,11 @@ export function App(): JSX.Element {
   return (
     <>
       <Toasts />
-      <AppContainer
-        data-testid="AppContainer"
-        navigation={<Navigation />}
-        header={<TopNavigation />}
-      >
+      <AppLayout>
         <ChainLoader>
           <Outlet />
         </ChainLoader>
-      </AppContainer>
+      </AppLayout>
     </>
   );
 }

apps/namadillo/src/App/Common/AppContainer.tsx

@@ -7,7 +7,7 @@ type PageWithSidebar = {
 export const PageWithSidebar = ({ children }: PageWithSidebar): JSX.Element => {
   return (
     <div
-      className={clsx("w-full min-h-full grid lg:grid-cols-[auto_240px] gap-2")}
+      className={clsx("w-full min-h-full grid xl:grid-cols-[auto_240px] gap-2")}
     >
       {children}
     </div>

apps/namadillo/src/App/Common/PageWithSidebar.tsx

@@ -23,7 +23,7 @@ export const ActiveAccount = (): JSX.Element => {
     <div>
       <span
         className={clsx(
-          "px-4 py-2.5 flex items-center text-xs rounded-[2px]",
+          "px-4 py-2.5 flex items-center text-xs rounded-sm",
           "text-white bg-black rounded-xs"
         )}
       >

apps/namadillo/src/App/Common/TopNavigation.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
+import { Logo } from "./Logo";
+import { TopNavigation } from "./TopNavigation";
+
+export const AppHeader = ({ burger }: { burger: ReactNode }): JSX.Element => {
+  return (
+    <header
+      className={twMerge(
+        "grid gap-2",
+        "grid-cols-[auto_auto] lg:grid-cols-[220px_auto]",
+        "h-[80px] items-center",
+        "px-6 sm:px-0"
+      )}
+    >
+      <div className="flex items-center gap-4">
+        <span className="sm:px-0 lg:hidden">{burger}</span>
+        <Link
+          to={"/"}
+          className={twMerge(
+            "flex items-center gap-3",
+            "text-yellow text-xl font-medium uppercase"
+          )}
+        >
+          <span className="w-[40px]">
+            <Logo eyeOpen={true} />
+          </span>
+          <span className="hidden sm:block">Namadillo</span>
+        </Link>
+      </div>
+
+      <TopNavigation />
+    </header>
+  );
+};

apps/namadillo/src/App/Common/ActiveAccount.tsx renamed to apps/namadillo/src/App/Layout/ActiveAccount.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { AppHeader } from "./AppHeader";
+import { BurgerButton } from "./BurgerButton";
+import { Navigation } from "./Navigation";
+
+export const AppLayout = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const [displayNavigation, setDisplayNavigation] = useState(false);
+
+  return (
+    <div className="custom-container pb-2">
+      <AppHeader
+        burger={
+          <span className="sm:px-0 lg:hidden">
+            <BurgerButton
+              open={displayNavigation}
+              onClick={() => setDisplayNavigation(!displayNavigation)}
+            />
+          </span>
+        }
+      />
+      <div
+        className={twMerge(
+          "grid lg:grid-cols-[220px_auto] lg:gap-2 min-h-[calc(100svh-95px)]"
+        )}
+      >
+        <aside
+          onClick={(e) => e.stopPropagation()}
+          className={twMerge(
+            "transition-transform duration-500 ease-out-expo",
+            "pt-10 bg-black rounded-sm fixed top-0 z-[9999] w-[240px]",
+            "h-svh lg:h-[calc(100svh-90px)] left-0 lg:z-0 lg:transition-none",
+            "lg:pt-0 lg:w-auto lg:relative",
+            !displayNavigation && "-translate-x-full lg:translate-x-0"
+          )}
+        >
+          <Navigation />
+        </aside>
+        <main className="min-h-full">{children}</main>
+      </div>
+    </div>
+  );
+};

apps/namadillo/src/App/Layout/AppHeader.tsx

@@ -0,0 +1,90 @@
+import { ActionButton } from "@namada/components";
+import { ConnectExtensionButton } from "App/Common/ConnectExtensionButton";
+import SettingsRoutes from "App/Settings/routes";
+import MessageRoutes from "App/SignMessages/routes";
+import {
+  applicationFeaturesAtom,
+  namadaExtensionConnectedAtom,
+  signArbitraryEnabledAtom,
+} from "atoms/settings";
+import { useAtomValue } from "jotai";
+import { AiOutlineMessage } from "react-icons/ai";
+import { IoSettingsOutline } from "react-icons/io5";
+import { useLocation, useNavigate } from "react-router-dom";
+import TransferRoutes from "../Transfer/routes";
+import { ActiveAccount } from "./ActiveAccount";
+import { SyncIndicator } from "./SyncIndicator";
+
+export const TopNavigation = (): JSX.Element => {
+  const isExtensionConnected = useAtomValue(namadaExtensionConnectedAtom);
+  const signArbitraryEnabled = useAtomValue(signArbitraryEnabledAtom);
+  const { maspEnabled, namTransfersEnabled } = useAtomValue(
+    applicationFeaturesAtom
+  );
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  if (!isExtensionConnected) {
+    return (
+      <div className="w-fit justify-self-end">
+        <ConnectExtensionButton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex items-center gap-4 sm:gap-6">
+      <div className="hidden lg:flex gap-2">
+        {maspEnabled && (
+          <ActionButton
+            href={TransferRoutes.shield().url}
+            size="sm"
+            className="w-[140px]"
+          >
+            Shield assets
+          </ActionButton>
+        )}
+        {namTransfersEnabled && (
+          <ActionButton
+            href={TransferRoutes.namTransfer().url}
+            size="sm"
+            backgroundColor="white"
+            className="w-[140px]"
+          >
+            Transfer
+          </ActionButton>
+        )}
+      </div>
+
+      <div className="flex-1" />
+
+      <button
+        className="text-2xl text-yellow hover:text-cyan"
+        onClick={() =>
+          navigate(SettingsRoutes.index(), {
+            state: { backgroundLocation: location },
+          })
+        }
+      >
+        <IoSettingsOutline />
+      </button>
+      {signArbitraryEnabled && (
+        <button
+          className="text-2xl text-yellow hover:text-cyan"
+          title="Sign Message"
+          onClick={() =>
+            navigate(MessageRoutes.index(), {
+              state: { backgroundLocation: location },
+            })
+          }
+        >
+          <AiOutlineMessage />
+        </button>
+      )}
+
+      <SyncIndicator />
+
+      <ActiveAccount />
+    </div>
+  );
+};

apps/namadillo/src/App/Layout/AppLayout.tsx

@@ -0,0 +1,14 @@
+import { PageWithSidebar } from "App/Common/PageWithSidebar";
+
+export const NamTransfer: React.FC = () => {
+  return (
+    <PageWithSidebar>
+      <div className="flex flex-col gap-2 text-yellow">
+        <div>Internal Transfer (WIP)</div>
+      </div>
+      <aside className="flex flex-col gap-2 text-yellow">
+        <div>Sidebar (WIP)</div>
+      </aside>
+    </PageWithSidebar>
+  );
+};

apps/namadillo/src/App/Common/BurgerButton.tsx renamed to apps/namadillo/src/App/Layout/BurgerButton.tsx

@@ -0,0 +1,14 @@
+import { PageWithSidebar } from "App/Common/PageWithSidebar";
+
+export const Shield: React.FC = () => {
+  return (
+    <PageWithSidebar>
+      <div className="flex flex-col gap-2 text-yellow">
+        <div>Shield (WIP)</div>
+      </div>
+      <aside className="flex flex-col gap-2 text-yellow">
+        <div>Sidebar (WIP)</div>
+      </aside>
+    </PageWithSidebar>
+  );
+};