Skip to content

Commit

Permalink
feat: add the transfer buttons to top navigation (#1128)
Browse files Browse the repository at this point in the history
  • Loading branch information
euharrison authored Sep 20, 2024
1 parent 4eae232 commit 6bd1e33
Show file tree
Hide file tree
Showing 18 changed files with 221 additions and 141 deletions.
12 changes: 3 additions & 9 deletions apps/namadillo/src/App/App.tsx
Original file line number Diff line number Diff line change
@@ -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 });
Expand All @@ -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>
</>
);
}
66 changes: 0 additions & 66 deletions apps/namadillo/src/App/Common/AppContainer.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion apps/namadillo/src/App/Common/PageWithSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
62 changes: 0 additions & 62 deletions apps/namadillo/src/App/Common/TopNavigation.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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"
)}
>
Expand Down
36 changes: 36 additions & 0 deletions apps/namadillo/src/App/Layout/AppHeader.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
47 changes: 47 additions & 0 deletions apps/namadillo/src/App/Layout/AppLayout.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
File renamed without changes.
90 changes: 90 additions & 0 deletions apps/namadillo/src/App/Layout/TopNavigation.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
14 changes: 14 additions & 0 deletions apps/namadillo/src/App/Transfer/NamTransfer.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
14 changes: 14 additions & 0 deletions apps/namadillo/src/App/Transfer/Shield.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading

1 comment on commit 6bd1e33

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.