From 3905208621de9e6989da52bda0087ea2df27aefa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Harrison=20Mendon=C3=A7a?= <harrisonmendonca@gmail.com>
Date: Fri, 31 Jan 2025 18:52:41 -0300
Subject: [PATCH 1/3] feat: create sidebar

---
 .../src/App/AccountOverview/AccountOverview.tsx     |  9 +++------
 .../src/App/Governance/GovernanceOverview.tsx       |  7 +++----
 apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx   |  7 +++----
 apps/namadillo/src/App/Layout/Sidebar.tsx           | 13 +++++++++++++
 apps/namadillo/src/App/Masp/MaspLayout.tsx          |  7 +++----
 apps/namadillo/src/App/Staking/StakingOverview.tsx  |  7 +++----
 apps/namadillo/src/App/Transfer/TransferLayout.tsx  |  5 +++--
 7 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 apps/namadillo/src/App/Layout/Sidebar.tsx

diff --git a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
index 5d3cee7adc..d071ce8ca9 100644
--- a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
+++ b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
@@ -1,8 +1,7 @@
 import { Panel } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { ShieldedSyncProgress } from "App/Masp/ShieldedSyncProgress";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import MainnetRoadmap from "App/Sidebars/MainnetRoadmap";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { StakingRewardsPanel } from "App/Staking/StakingRewardsPanel";
@@ -54,12 +53,10 @@ export const AccountOverview = (): JSX.Element => {
           </Panel>
         </section>
       </div>
-      <aside className="flex flex-col gap-2">
-        <EpochInformation />
-        <ShieldedSyncProgress />
+      <Sidebar>
         <ShieldAllBanner />
         <MainnetRoadmap />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };
diff --git a/apps/namadillo/src/App/Governance/GovernanceOverview.tsx b/apps/namadillo/src/App/Governance/GovernanceOverview.tsx
index 3bdf323bf5..a5e56893e1 100644
--- a/apps/namadillo/src/App/Governance/GovernanceOverview.tsx
+++ b/apps/namadillo/src/App/Governance/GovernanceOverview.tsx
@@ -1,7 +1,7 @@
 import { Panel, SkeletonLoading } from "@namada/components";
 import { ConnectBanner } from "App/Common/ConnectBanner";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import { allProposalsAtom, votedProposalsAtom } from "atoms/proposals";
 import {
   atomsAreFetching,
@@ -76,8 +76,7 @@ export const GovernanceOverview: React.FC = () => {
           />
         </ProposalListPanel>
       </div>
-      <aside className="flex flex-col gap-2 mt-1.5 lg:mt-0">
-        <EpochInformation />
+      <Sidebar>
         <Panel>
           {atomsAreFetching(allProposals) && (
             <SkeletonLoading height="150px" width="100%" />
@@ -86,7 +85,7 @@ export const GovernanceOverview: React.FC = () => {
             <ProposalsSummary allProposals={allProposals.data!} />
           )}
         </Panel>
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };
diff --git a/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx b/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx
index 1fd0e002be..0be591e420 100644
--- a/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx
+++ b/apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx
@@ -1,8 +1,8 @@
 import { Panel, TabContainer } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { routes } from "App/routes";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
@@ -44,10 +44,9 @@ export const IbcTransfersLayout = (): JSX.Element => {
           ]}
         />
       </div>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <EpochInformation />
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };
diff --git a/apps/namadillo/src/App/Layout/Sidebar.tsx b/apps/namadillo/src/App/Layout/Sidebar.tsx
new file mode 100644
index 0000000000..536856ef78
--- /dev/null
+++ b/apps/namadillo/src/App/Layout/Sidebar.tsx
@@ -0,0 +1,13 @@
+import { ShieldedSyncProgress } from "App/Masp/ShieldedSyncProgress";
+import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { ReactNode } from "react";
+
+export const Sidebar = ({ children }: { children: ReactNode }): JSX.Element => {
+  return (
+    <aside className="flex flex-col gap-2 mt-1.5 lg:mt-0">
+      <EpochInformation />
+      <ShieldedSyncProgress />
+      {children}
+    </aside>
+  );
+};
diff --git a/apps/namadillo/src/App/Masp/MaspLayout.tsx b/apps/namadillo/src/App/Masp/MaspLayout.tsx
index b7f0bd306d..f78ec7ac4f 100644
--- a/apps/namadillo/src/App/Masp/MaspLayout.tsx
+++ b/apps/namadillo/src/App/Masp/MaspLayout.tsx
@@ -1,6 +1,7 @@
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { MaspContainer } from "App/Common/MaspContainer";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { routes } from "App/routes";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { shieldedBalanceAtom } from "atoms/balance";
@@ -8,7 +9,6 @@ import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { useAtomValue } from "jotai";
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { ShieldedSyncProgress } from "./ShieldedSyncProgress";
 
 export const MaspLayout: React.FC = () => {
   const userHasAccount = useUserHasAccount();
@@ -29,10 +29,9 @@ export const MaspLayout: React.FC = () => {
       <MaspContainer>
         <Outlet />
       </MaspContainer>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <ShieldedSyncProgress />
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };
diff --git a/apps/namadillo/src/App/Staking/StakingOverview.tsx b/apps/namadillo/src/App/Staking/StakingOverview.tsx
index d68ee1ef0a..756e04650a 100644
--- a/apps/namadillo/src/App/Staking/StakingOverview.tsx
+++ b/apps/namadillo/src/App/Staking/StakingOverview.tsx
@@ -1,7 +1,7 @@
 import { Panel } from "@namada/components";
 import { ConnectBanner } from "App/Common/ConnectBanner";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import { ValidatorDiversification } from "App/Sidebars/ValidatorDiversification";
 import { YourStakingDistribution } from "App/Sidebars/YourStakingDistribution";
 import { myValidatorsAtom } from "atoms/validators";
@@ -40,8 +40,7 @@ export const StakingOverview = (): JSX.Element => {
           <AllValidatorsTable />
         </Panel>
       </div>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <EpochInformation />
+      <Sidebar>
         {hasStaking && myValidators.isSuccess && (
           <Panel className="w-full @container">
             <YourStakingDistribution myValidators={myValidators.data!} />
@@ -50,7 +49,7 @@ export const StakingOverview = (): JSX.Element => {
         <Panel>
           <ValidatorDiversification />
         </Panel>
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };
diff --git a/apps/namadillo/src/App/Transfer/TransferLayout.tsx b/apps/namadillo/src/App/Transfer/TransferLayout.tsx
index 3ada080969..daafd87140 100644
--- a/apps/namadillo/src/App/Transfer/TransferLayout.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferLayout.tsx
@@ -1,5 +1,6 @@
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { Outlet } from "react-router-dom";
@@ -14,9 +15,9 @@ export const TransferLayout: React.FC = () => {
   return (
     <PageWithSidebar>
       <Outlet />
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

From 8b7d3c2182ab6440e4a3468b8818b24b17461d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Harrison=20Mendon=C3=A7a?= <harrisonmendonca@gmail.com>
Date: Fri, 31 Jan 2025 18:53:35 -0300
Subject: [PATCH 2/3] feat: update indicator

---
 apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx b/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
index 313c77949a..4b4b208ea1 100644
--- a/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
+++ b/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
@@ -10,11 +10,15 @@ export const ShieldedSyncProgress = (): JSX.Element => {
   }
 
   return (
-    <div className={"bg-yellow rounded-sm text-xs font-medium py-2 px-3"}>
+    <div className="relative bg-black text-yellow rounded-sm overflow-hidden text-xs font-medium py-2 px-3">
       Shielded sync{" "}
       {syncProgress === 1 ?
         "converting..."
       : `progress: ${Math.min(Math.floor(syncProgress * 100), 100)}%`}
+      <div
+        className="absolute bg-yellow top-0 left-0 w-full h-full mix-blend-difference origin-left transition-all"
+        style={{ transform: `scaleX(${syncProgress * 100}%)` }}
+      />
     </div>
   );
 };

From cc46cabf8f05ddc707a1ce86eb7fe88a26ce5d17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Harrison=20Mendon=C3=A7a?= <harrisonmendonca@gmail.com>
Date: Mon, 3 Feb 2025 15:18:43 -0300
Subject: [PATCH 3/3] feat: remove transition when goes to zero

---
 apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx b/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
index 4b4b208ea1..9df5dd1957 100644
--- a/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
+++ b/apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx
@@ -1,5 +1,6 @@
 import { shieldedBalanceAtom, shieldedSyncProgress } from "atoms/balance/atoms";
 import { useAtomValue } from "jotai";
+import { twMerge } from "tailwind-merge";
 
 export const ShieldedSyncProgress = (): JSX.Element => {
   const syncProgress = useAtomValue(shieldedSyncProgress);
@@ -16,7 +17,10 @@ export const ShieldedSyncProgress = (): JSX.Element => {
         "converting..."
       : `progress: ${Math.min(Math.floor(syncProgress * 100), 100)}%`}
       <div
-        className="absolute bg-yellow top-0 left-0 w-full h-full mix-blend-difference origin-left transition-all"
+        className={twMerge(
+          "absolute bg-yellow top-0 left-0 w-full h-full mix-blend-difference origin-left",
+          syncProgress > 0 && "transition-all"
+        )}
         style={{ transform: `scaleX(${syncProgress * 100}%)` }}
       />
     </div>