From 6bd1e3347dc5972302cce99cd8530603e637a8db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harrison=20Mendon=C3=A7a?= Date: Fri, 20 Sep 2024 11:39:21 -0300 Subject: [PATCH] feat: add the transfer buttons to top navigation (#1128) --- apps/namadillo/src/App/App.tsx | 12 +-- .../namadillo/src/App/Common/AppContainer.tsx | 66 -------------- .../src/App/Common/PageWithSidebar.tsx | 2 +- .../src/App/Common/TopNavigation.tsx | 62 ------------- .../App/{Common => Layout}/ActiveAccount.tsx | 2 +- apps/namadillo/src/App/Layout/AppHeader.tsx | 36 ++++++++ apps/namadillo/src/App/Layout/AppLayout.tsx | 47 ++++++++++ .../App/{Common => Layout}/BurgerButton.tsx | 0 .../DisconnectAccountIcon.tsx | 0 .../src/App/{Common => Layout}/Logo.tsx | 0 .../src/App/{Common => Layout}/Navigation.tsx | 0 .../{Common => Layout}/SwitchAccountIcon.tsx | 0 .../App/{Common => Layout}/SyncIndicator.tsx | 0 .../src/App/Layout/TopNavigation.tsx | 90 +++++++++++++++++++ .../src/App/Transfer/NamTransfer.tsx | 14 +++ apps/namadillo/src/App/Transfer/Shield.tsx | 14 +++ apps/namadillo/src/App/Transfer/Transfer.tsx | 7 ++ apps/namadillo/src/App/Transfer/routes.ts | 10 ++- 18 files changed, 221 insertions(+), 141 deletions(-) delete mode 100644 apps/namadillo/src/App/Common/AppContainer.tsx delete mode 100644 apps/namadillo/src/App/Common/TopNavigation.tsx rename apps/namadillo/src/App/{Common => Layout}/ActiveAccount.tsx (96%) create mode 100644 apps/namadillo/src/App/Layout/AppHeader.tsx create mode 100644 apps/namadillo/src/App/Layout/AppLayout.tsx rename apps/namadillo/src/App/{Common => Layout}/BurgerButton.tsx (100%) rename apps/namadillo/src/App/{Common => Layout}/DisconnectAccountIcon.tsx (100%) rename apps/namadillo/src/App/{Common => Layout}/Logo.tsx (100%) rename apps/namadillo/src/App/{Common => Layout}/Navigation.tsx (100%) rename apps/namadillo/src/App/{Common => Layout}/SwitchAccountIcon.tsx (100%) rename apps/namadillo/src/App/{Common => Layout}/SyncIndicator.tsx (100%) create mode 100644 apps/namadillo/src/App/Layout/TopNavigation.tsx create mode 100644 apps/namadillo/src/App/Transfer/NamTransfer.tsx create mode 100644 apps/namadillo/src/App/Transfer/Shield.tsx diff --git a/apps/namadillo/src/App/App.tsx b/apps/namadillo/src/App/App.tsx index e4ee8a626..2cea14d3f 100644 --- a/apps/namadillo/src/App/App.tsx +++ b/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 ( <> - } - header={} - > + - + ); } diff --git a/apps/namadillo/src/App/Common/AppContainer.tsx b/apps/namadillo/src/App/Common/AppContainer.tsx deleted file mode 100644 index f74761c04..000000000 --- a/apps/namadillo/src/App/Common/AppContainer.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import clsx from "clsx"; -import { useState } from "react"; -import { Link } from "react-router-dom"; -import { BurgerButton } from "./BurgerButton"; -import { Logo } from "./Logo"; - -type ContainerProps = { - header: JSX.Element; - navigation: JSX.Element; - children: JSX.Element; -} & React.ComponentPropsWithoutRef<"div">; - -export const AppContainer = ({ - header, - navigation, - children, - ...props -}: ContainerProps): JSX.Element => { - const [displayNavigation, setDisplayNavigation] = useState(false); - - return ( -
-
-
- - setDisplayNavigation(!displayNavigation)} - /> - - - - - - Namadillo - -
-
{header}
-
-
- -
{children}
-
-
- ); -}; diff --git a/apps/namadillo/src/App/Common/PageWithSidebar.tsx b/apps/namadillo/src/App/Common/PageWithSidebar.tsx index c5eadc80c..a6fde0350 100644 --- a/apps/namadillo/src/App/Common/PageWithSidebar.tsx +++ b/apps/namadillo/src/App/Common/PageWithSidebar.tsx @@ -7,7 +7,7 @@ type PageWithSidebar = { export const PageWithSidebar = ({ children }: PageWithSidebar): JSX.Element => { return (
{children}
diff --git a/apps/namadillo/src/App/Common/TopNavigation.tsx b/apps/namadillo/src/App/Common/TopNavigation.tsx deleted file mode 100644 index a0bbde22d..000000000 --- a/apps/namadillo/src/App/Common/TopNavigation.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { ConnectExtensionButton } from "App/Common/ConnectExtensionButton"; -import SettingsRoutes from "App/Settings/routes"; -import MessageRoutes from "App/SignMessages/routes"; -import { - 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 { ActiveAccount } from "./ActiveAccount"; -import { SyncIndicator } from "./SyncIndicator"; - -export const TopNavigation = (): JSX.Element => { - const isExtensionConnected = useAtomValue(namadaExtensionConnectedAtom); - const signArbitraryEnabled = useAtomValue(signArbitraryEnabledAtom); - const location = useLocation(); - const navigate = useNavigate(); - - return ( - <> - {!isExtensionConnected && ( - - - - )} - - {isExtensionConnected && ( -
- - {signArbitraryEnabled && ( - - )} -
- - -
- )} - - ); -}; diff --git a/apps/namadillo/src/App/Common/ActiveAccount.tsx b/apps/namadillo/src/App/Layout/ActiveAccount.tsx similarity index 96% rename from apps/namadillo/src/App/Common/ActiveAccount.tsx rename to apps/namadillo/src/App/Layout/ActiveAccount.tsx index 9ae511cc0..125b0b5df 100644 --- a/apps/namadillo/src/App/Common/ActiveAccount.tsx +++ b/apps/namadillo/src/App/Layout/ActiveAccount.tsx @@ -23,7 +23,7 @@ export const ActiveAccount = (): JSX.Element => {
diff --git a/apps/namadillo/src/App/Layout/AppHeader.tsx b/apps/namadillo/src/App/Layout/AppHeader.tsx new file mode 100644 index 000000000..3eb156ed8 --- /dev/null +++ b/apps/namadillo/src/App/Layout/AppHeader.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 ( +
+
+ {burger} + + + + + Namadillo + +
+ + +
+ ); +}; diff --git a/apps/namadillo/src/App/Layout/AppLayout.tsx b/apps/namadillo/src/App/Layout/AppLayout.tsx new file mode 100644 index 000000000..6217648a7 --- /dev/null +++ b/apps/namadillo/src/App/Layout/AppLayout.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 ( +
+ + setDisplayNavigation(!displayNavigation)} + /> + + } + /> +
+ +
{children}
+
+
+ ); +}; diff --git a/apps/namadillo/src/App/Common/BurgerButton.tsx b/apps/namadillo/src/App/Layout/BurgerButton.tsx similarity index 100% rename from apps/namadillo/src/App/Common/BurgerButton.tsx rename to apps/namadillo/src/App/Layout/BurgerButton.tsx diff --git a/apps/namadillo/src/App/Common/DisconnectAccountIcon.tsx b/apps/namadillo/src/App/Layout/DisconnectAccountIcon.tsx similarity index 100% rename from apps/namadillo/src/App/Common/DisconnectAccountIcon.tsx rename to apps/namadillo/src/App/Layout/DisconnectAccountIcon.tsx diff --git a/apps/namadillo/src/App/Common/Logo.tsx b/apps/namadillo/src/App/Layout/Logo.tsx similarity index 100% rename from apps/namadillo/src/App/Common/Logo.tsx rename to apps/namadillo/src/App/Layout/Logo.tsx diff --git a/apps/namadillo/src/App/Common/Navigation.tsx b/apps/namadillo/src/App/Layout/Navigation.tsx similarity index 100% rename from apps/namadillo/src/App/Common/Navigation.tsx rename to apps/namadillo/src/App/Layout/Navigation.tsx diff --git a/apps/namadillo/src/App/Common/SwitchAccountIcon.tsx b/apps/namadillo/src/App/Layout/SwitchAccountIcon.tsx similarity index 100% rename from apps/namadillo/src/App/Common/SwitchAccountIcon.tsx rename to apps/namadillo/src/App/Layout/SwitchAccountIcon.tsx diff --git a/apps/namadillo/src/App/Common/SyncIndicator.tsx b/apps/namadillo/src/App/Layout/SyncIndicator.tsx similarity index 100% rename from apps/namadillo/src/App/Common/SyncIndicator.tsx rename to apps/namadillo/src/App/Layout/SyncIndicator.tsx diff --git a/apps/namadillo/src/App/Layout/TopNavigation.tsx b/apps/namadillo/src/App/Layout/TopNavigation.tsx new file mode 100644 index 000000000..c9b9ef455 --- /dev/null +++ b/apps/namadillo/src/App/Layout/TopNavigation.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 ( +
+ +
+ ); + } + + return ( +
+
+ {maspEnabled && ( + + Shield assets + + )} + {namTransfersEnabled && ( + + Transfer + + )} +
+ +
+ + + {signArbitraryEnabled && ( + + )} + + + + +
+ ); +}; diff --git a/apps/namadillo/src/App/Transfer/NamTransfer.tsx b/apps/namadillo/src/App/Transfer/NamTransfer.tsx new file mode 100644 index 000000000..f202a3aa9 --- /dev/null +++ b/apps/namadillo/src/App/Transfer/NamTransfer.tsx @@ -0,0 +1,14 @@ +import { PageWithSidebar } from "App/Common/PageWithSidebar"; + +export const NamTransfer: React.FC = () => { + return ( + +
+
Internal Transfer (WIP)
+
+ + + ); +}; diff --git a/apps/namadillo/src/App/Transfer/Shield.tsx b/apps/namadillo/src/App/Transfer/Shield.tsx new file mode 100644 index 000000000..a89e791b8 --- /dev/null +++ b/apps/namadillo/src/App/Transfer/Shield.tsx @@ -0,0 +1,14 @@ +import { PageWithSidebar } from "App/Common/PageWithSidebar"; + +export const Shield: React.FC = () => { + return ( + +
+
Shield (WIP)
+
+ + + ); +}; diff --git a/apps/namadillo/src/App/Transfer/Transfer.tsx b/apps/namadillo/src/App/Transfer/Transfer.tsx index 836b5c9f6..26bc34d25 100644 --- a/apps/namadillo/src/App/Transfer/Transfer.tsx +++ b/apps/namadillo/src/App/Transfer/Transfer.tsx @@ -1,11 +1,18 @@ import { Route, Routes } from "react-router-dom"; import { IBCTransfers } from "./IBCTransfers"; +import { NamTransfer } from "./NamTransfer"; +import { Shield } from "./Shield"; import { ShieldAll } from "./ShieldAll"; import TransferRoutes from "./routes"; export const Transfer: React.FC = () => (
+ } + /> + } /> } diff --git a/apps/namadillo/src/App/Transfer/routes.ts b/apps/namadillo/src/App/Transfer/routes.ts index 49d772d99..524459c38 100644 --- a/apps/namadillo/src/App/Transfer/routes.ts +++ b/apps/namadillo/src/App/Transfer/routes.ts @@ -4,15 +4,21 @@ export const index = (): string => `/transfer`; const routeOutput = createRouteOutput(index); -export const overview = (): RouteOutput => routeOutput(`/`); +export const overview = (): RouteOutput => routeOutput("/"); -export const ibcTransfer = (): RouteOutput => routeOutput(`/ibc`); +export const namTransfer = (): RouteOutput => routeOutput("/nam"); + +export const shield = (): RouteOutput => routeOutput("/shield"); export const shieldAll = (): RouteOutput => routeOutput(`/shield-all`); +export const ibcTransfer = (): RouteOutput => routeOutput(`/ibc`); + export default { index, overview, + namTransfer, + shield, shieldAll, ibcTransfer, };