feat: Overview Dashboard v2 (#1951)

Co-authored-by: neocybereth <sean@arrowburn.co.nz>

Author: pedrorezende

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

@@ -1,24 +1,17 @@
-import { Panel } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
 import { Sidebar } from "App/Layout/Sidebar";
 import MainnetRoadmap from "App/Sidebars/MainnetRoadmap";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
-import { StakingRewardsPanel } from "App/Staking/StakingRewardsPanel";
-import { applicationFeaturesAtom } from "atoms/settings";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
-import { useAtomValue } from "jotai";
 import { twMerge } from "tailwind-merge";
-import { BalanceOverviewChart } from "./BalanceOverviewChart";
-import { MaspBanner } from "./MaspBanner";
-import { NamBalanceContainer } from "./NamBalanceContainer";
+import { AssetsOverviewPanel } from "./AssetsOverviewPanel";
 import { NavigationFooter } from "./NavigationFooter";
-import { TransparentOverviewPanel } from "./TransparentOverviewPanel";
+import { StakeSidebar } from "./StakeSidebar";
+import { TotalBalanceBanner } from "./TotalBalanceBanner";
 
 export const AccountOverview = (): JSX.Element => {
   const userHasAccount = useUserHasAccount();
-  const { maspEnabled } = useAtomValue(applicationFeaturesAtom);
-
   if (!userHasAccount) {
     return (
       <ConnectPanel>
@@ -31,27 +24,15 @@ export const AccountOverview = (): JSX.Element => {
     <PageWithSidebar>
       <div className={twMerge("flex w-full")}>
         <section className="flex flex-col w-full rounded-sm min-h-full gap-2">
-          <div className="grid sm:grid-cols-[0.8fr_1.25fr_0.66fr] gap-2">
-            <Panel>
-              <BalanceOverviewChart />
-            </Panel>
-            <Panel>
-              <NamBalanceContainer />
-            </Panel>
-            <Panel>
-              <StakingRewardsPanel />
-            </Panel>
+          <TotalBalanceBanner />
+          <AssetsOverviewPanel />
+          <div>
+            <NavigationFooter />
           </div>
-          {maspEnabled && (
-            <>
-              <MaspBanner />
-              <TransparentOverviewPanel />
-            </>
-          )}
-          <NavigationFooter />
         </section>
       </div>
       <Sidebar>
+        <StakeSidebar />
         <ShieldAllBanner />
         <MainnetRoadmap />
       </Sidebar>

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

@@ -0,0 +1,37 @@
+import { TabContainer } from "@namada/components";
+import clsx from "clsx";
+import { useRequiresNewShieldedSync } from "hooks/useRequiresNewShieldedSync";
+import { useState } from "react";
+import { ShieldedAssetsOverview } from "./ShieldedAssetsOverview";
+import { UnshieldedAssetsOverview } from "./UnshieldedAssetsOverview";
+
+export const AssetsOverviewPanel = (): JSX.Element => {
+  const requiresNewShieldedSync = useRequiresNewShieldedSync();
+
+  // Always select the unshielded tab as default if shielded sync is required
+  const [currentTab, setCurrentTab] = useState(requiresNewShieldedSync ? 1 : 0);
+  const shieldedPanelSelected = currentTab === 0;
+
+  return (
+    <TabContainer
+      id="ibc-transfer"
+      title="IBC Transfer"
+      activeTabIndex={currentTab}
+      onChangeActiveTab={setCurrentTab}
+      className={clsx(
+        "transition-colors border-solid border border-transparent",
+        "duration-0",
+        "[&[aria-selected='true']]:z-20 [&[aria-selected='true']]:!border-b-neutral-950",
+        shieldedPanelSelected &&
+          "[&[aria-selected='true']]:text-yellow [&[aria-selected='true']]:border-yellow"
+      )}
+      tabs={[
+        {
+          title: "Shielded Assets (MASP)",
+          children: <ShieldedAssetsOverview />,
+        },
+        { title: "Unshielded Assets", children: <UnshieldedAssetsOverview /> },
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,35 @@
+import { NamCurrency } from "App/Common/NamCurrency";
+import { cachedShieldedRewardsAtom } from "atoms/balance";
+import clsx from "clsx";
+import { useAtomValue } from "jotai";
+
+export const EstimateShieldingRewardsCard = (): JSX.Element => {
+  const shieldedRewards = useAtomValue(cachedShieldedRewardsAtom);
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-between gap-12 text-sm text-yellow bg-neutral-900 rounded-sm px-6",
+        "py-4"
+      )}
+    >
+      <span className="max-w-[15ch] text-center leading-tight">
+        Your Est. Shielding rewards per 24hrs
+      </span>
+      <span className="text-3xl text-center leading-7 relative top-1">
+        {shieldedRewards.amount === undefined ?
+          <span>
+            --<i className="block text-sm not-italic">NAM</i>
+          </span>
+        : <div className="flex flex-col items-center">
+            <NamCurrency
+              amount={shieldedRewards.amount}
+              currencySymbolClassName="text-xs block"
+              decimalPlaces={2}
+            />
+          </div>
+        }
+      </span>
+    </div>
+  );
+};