feat: create shield all banner and page (#1116)

apps/namadillo/src/App/AccountOverview/AccountOverview.tsx

@@ -2,13 +2,14 @@ import { Panel, Stack } from "@namada/components";
 import { Intro } from "App/Common/Intro";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
 import MainnetRoadmap from "App/Sidebars/MainnetRoadmap";
+import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { StakingRewardsPanel } from "App/Staking/StakingRewardsPanel";
 import {
   applicationFeaturesAtom,
   namadaExtensionConnectedAtom,
 } from "atoms/settings";
-import clsx from "clsx";
 import { useAtomValue } from "jotai";
+import { twMerge } from "tailwind-merge";
 import { AccountBalanceContainer } from "./AccountBalanceContainer";
 import { NamBalanceContainer } from "./NamBalanceContainer";
 import { NavigationFooter } from "./NavigationFooter";
@@ -19,12 +20,11 @@ export const AccountOverview = (): JSX.Element => {
     applicationFeaturesAtom
   );
 
-  const fullView = claimRewardsEnabled || maspEnabled;
-  const fullWidthClassName = clsx({ "col-span-2": !isConnected });
+  const showSidebar = isConnected;
 
   return (
     <PageWithSidebar>
-      <div className={clsx("flex w-full", fullWidthClassName)}>
+      <div className={twMerge("flex w-full", !showSidebar && "col-span-2")}>
         {!isConnected && (
           <section className="flex rounded-sm items-center w-full bg-black">
             <div className="w-[420px] mx-auto">
@@ -33,7 +33,7 @@ export const AccountOverview = (): JSX.Element => {
           </section>
         )}
 
-        {isConnected && !fullView && (
+        {isConnected && !claimRewardsEnabled && (
           <section className="flex items-center bg-black rounded-sm w-full">
             <Stack gap={5} className="my-auto min-w-[365px] mx-auto py-12">
               <AccountBalanceContainer />
@@ -42,7 +42,7 @@ export const AccountOverview = (): JSX.Element => {
           </section>
         )}
 
-        {isConnected && fullView && (
+        {isConnected && claimRewardsEnabled && (
           <section className="flex flex-col w-full rounded-sm min-h-full gap-2">
             <div className="grid grid-cols-[1.25fr_1fr] gap-2">
               <Panel className="pl-4 pr-6 py-5">
@@ -58,11 +58,13 @@ export const AccountOverview = (): JSX.Element => {
           </section>
         )}
       </div>
-      {isConnected && (
-        <aside className="bg-black rounded-sm">
-          <MainnetRoadmap />
-        </aside>
-      )}
+
+      {showSidebar &&
+        (maspEnabled ?
+          <ShieldAllBanner />
+        : <aside className="bg-black rounded-sm">
+            <MainnetRoadmap />
+          </aside>)}
     </PageWithSidebar>
   );
 };

apps/namadillo/src/App/AppRoutes.tsx

@@ -22,6 +22,8 @@ import MessageRoutes from "./SignMessages/routes";
 import { StakingRewards } from "./Staking/StakingRewards";
 import StakingRoutes from "./Staking/routes";
 import SwitchAccountRoutes from "./SwitchAccount/routes";
+import { Transfer } from "./Transfer/Transfer";
+import TransferRoutes from "./Transfer/routes";
 
 export const MainRoutes = (): JSX.Element => {
   const location = useLocation();
@@ -43,6 +45,7 @@ export const MainRoutes = (): JSX.Element => {
             path={`${GovernanceRoutes.index()}/*`}
             element={<Governance />}
           />
+          <Route path={`${TransferRoutes.index()}/*`} element={<Transfer />} />
         </Route>
       </Routes>
       <Routes location={location} key={settingsAnimationKey}>

apps/namadillo/src/App/Sidebars/MainnetRoadmap.tsx

@@ -1,8 +1,12 @@
 import { ActionButton, Image } from "@namada/components";
+import { applicationFeaturesAtom } from "atoms/settings";
 import clsx from "clsx";
+import { useAtomValue } from "jotai";
 import { FaCircleCheck } from "react-icons/fa6";
 
 const MainnetRoadmap = (): JSX.Element => {
+  const { claimRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
+
   const renderPhase = (
     phaseNumber: string,
     name: React.ReactNode,
@@ -52,7 +56,8 @@ const MainnetRoadmap = (): JSX.Element => {
             <br />
             PGF Inflation
           </>,
-          "opacity-25"
+          claimRewardsEnabled ? "opacity-100" : "opacity-25",
+          claimRewardsEnabled
         )}
         {renderPhase(
           "3",

apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx

@@ -0,0 +1,27 @@
+import { ActionButton } from "@namada/components";
+import TransferRoutes from "App/Transfer/routes";
+import { twMerge } from "tailwind-merge";
+
+export const ShieldAllBanner = (): JSX.Element => {
+  return (
+    <div
+      className={twMerge(
+        "bg-yellow rounded-sm h-fit",
+        "flex flex-col items-center gap-2",
+        "p-3"
+      )}
+    >
+      <div className="w-[145px] h-[145px] bg-white">img</div>
+      <ActionButton
+        href={TransferRoutes.shieldAll().url}
+        className="max-w-[160px]"
+        size="sm"
+        backgroundColor="black"
+        textColor="yellow"
+        backgroundHoverColor="yellow"
+      >
+        Shield All Assets
+      </ActionButton>
+    </div>
+  );
+};

apps/namadillo/src/App/Transfer/ShieldAll.tsx

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

apps/namadillo/src/App/Transfer/Transfer.tsx

@@ -0,0 +1,14 @@
+import { Route, Routes } from "react-router-dom";
+import { ShieldAll } from "./ShieldAll";
+import TransferRoutes from "./routes";
+
+export const Transfer: React.FC = () => (
+  <main className="w-full">
+    <Routes>
+      <Route
+        path={TransferRoutes.shieldAll().toString()}
+        element={<ShieldAll />}
+      />
+    </Routes>
+  </main>
+);

apps/namadillo/src/App/Transfer/index.ts

@@ -0,0 +1 @@
+export { Transfer } from "./Transfer";

apps/namadillo/src/App/Transfer/routes.ts

@@ -0,0 +1,15 @@
+import { createRouteOutput, RouteOutput } from "utils/routes";
+
+export const index = (): string => `/transfer`;
+
+const routeOutput = createRouteOutput(index);
+
+export const overview = (): RouteOutput => routeOutput(`/`);
+
+export const shieldAll = (): RouteOutput => routeOutput(`/shield-all`);
+
+export default {
+  index,
+  overview,
+  shieldAll,
+};