feat: fetch shielded balances on transfer

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

@@ -1,6 +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 MainnetRoadmap from "App/Sidebars/MainnetRoadmap";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
@@ -55,6 +56,7 @@ export const AccountOverview = (): JSX.Element => {
       </div>
       <aside className="flex flex-col gap-2">
         <EpochInformation />
+        <ShieldedSyncProgress />
         <ShieldAllBanner />
         <MainnetRoadmap />
       </aside>

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

@@ -101,7 +101,8 @@ export const BalanceOverviewChart = (): JSX.Element => {
                 <div className="text-2xl">
                   {maspEnabled ?
                     <span>
-                      <FiatCurrency amount={totalAmountInDollars} />*
+                      <FiatCurrency amount={totalAmountInDollars} />
+                      {!namTransfersEnabled && "*"}
                     </span>
                   : <NamCurrency
                       amount={totalTransparentAmount}

apps/namadillo/src/App/Masp/MaspLayout.tsx

@@ -2,13 +2,23 @@ import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
 import { routes } from "App/routes";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
+import { shieldedBalanceAtom } from "atoms/balance";
 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();
   const location = useLocation();
 
+  const { refetch: refetchShieldedBalance } = useAtomValue(shieldedBalanceAtom);
+
+  useEffect(() => {
+    refetchShieldedBalance();
+  }, []);
+
   if (!userHasAccount && location.pathname !== routes.masp) {
     return <ConnectPanel actionText="To shield assets" />;
   }
@@ -17,6 +27,7 @@ export const MaspLayout: React.FC = () => {
     <PageWithSidebar>
       <Outlet />
       <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+        <ShieldedSyncProgress />
         <ShieldAllBanner />
       </aside>
     </PageWithSidebar>

apps/namadillo/src/App/Masp/ShieldedBalanceChart.tsx

@@ -1,91 +1,16 @@
-import { Heading, PieChart, SkeletonLoading } from "@namada/components";
-import { ProgressBarNames, SdkEvents } from "@namada/sdk/web";
+import { Heading, PieChart } from "@namada/components";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { FiatCurrency } from "App/Common/FiatCurrency";
-import { shieldedSyncAtom, shieldedTokensAtom } from "atoms/balance/atoms";
+import { shieldedTokensAtom } from "atoms/balance/atoms";
 import { getTotalDollar } from "atoms/balance/functions";
 import { applicationFeaturesAtom } from "atoms/settings";
-import { useAtom, useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
+import { useAtomValue } from "jotai";
 import { twMerge } from "tailwind-merge";
 import { colors } from "theme";
-import {
-  ProgressBarFinished,
-  ProgressBarIncremented,
-} from "workers/ShieldedSyncWorker";
 
 export const ShieldedBalanceChart = (): JSX.Element => {
   const { namTransfersEnabled } = useAtomValue(applicationFeaturesAtom);
   const shieldedTokensQuery = useAtomValue(shieldedTokensAtom);
-  const [{ data: shieldedSyncProgress, refetch: shieledSync }] =
-    useAtom(shieldedSyncAtom);
-  const [showSyncProgress, setShowSyncProgress] = useState(false);
-  const [progress, setProgress] = useState({
-    [ProgressBarNames.Scanned]: 0,
-    [ProgressBarNames.Fetched]: 0,
-    [ProgressBarNames.Applied]: 0,
-  });
-
-  useEffect(() => {
-    if (!shieldedSyncProgress) return;
-    const onProgressBarIncremented = ({
-      name,
-      current,
-      total,
-    }: ProgressBarIncremented): void => {
-      if (name === ProgressBarNames.Fetched) {
-        // TODO: this maybe can be improved by passing total in ProgressBarStarted event
-        // If total is more than one batch of 100, show progress
-        if (total > 100) {
-          setShowSyncProgress(true);
-        }
-
-        const perc =
-          total === 0 ? 0 : Math.min(Math.floor((current / total) * 100), 100);
-
-        setProgress((prev) => ({
-          ...prev,
-          [name]: perc,
-        }));
-      }
-    };
-
-    const onProgressBarFinished = ({ name }: ProgressBarFinished): void => {
-      if (name === ProgressBarNames.Fetched) {
-        setProgress((prev) => ({
-          ...prev,
-          [name]: 100,
-        }));
-
-        setShowSyncProgress(false);
-      }
-    };
-
-    shieldedSyncProgress.on(
-      SdkEvents.ProgressBarIncremented,
-      onProgressBarIncremented
-    );
-
-    shieldedSyncProgress.on(
-      SdkEvents.ProgressBarFinished,
-      onProgressBarFinished
-    );
-
-    return () => {
-      shieldedSyncProgress.off(
-        SdkEvents.ProgressBarIncremented,
-        onProgressBarIncremented
-      );
-      shieldedSyncProgress.off(
-        SdkEvents.ProgressBarFinished,
-        onProgressBarFinished
-      );
-    };
-  }, [shieldedSyncProgress]);
-
-  useEffect(() => {
-    shieledSync();
-  }, []);
 
   const shieldedDollars = getTotalDollar(shieldedTokensQuery.data);
 
@@ -96,49 +21,36 @@ export const ShieldedBalanceChart = (): JSX.Element => {
           result={shieldedTokensQuery}
           niceError="Unable to load balance"
         >
-          {shieldedTokensQuery.isPending || showSyncProgress ?
-            <SkeletonLoading
-              height="100%"
-              width="100%"
-              className={twMerge(
-                "rounded-full border-neutral-800 border-[24px] bg-transparent",
-                "flex items-center justify-center"
-              )}
-            >
-              {showSyncProgress && (
-                <div>{progress[ProgressBarNames.Fetched]}%</div>
-              )}
-            </SkeletonLoading>
-          : <>
-              <PieChart
-                id="balance-chart"
-                data={[{ value: 100, color: colors.shielded }]}
-                strokeWidth={24}
-                radius={125}
-                segmentMargin={0}
-              >
-                <div className="flex flex-col gap-1 items-center leading-tight max-w-[180px]">
-                  {!shieldedDollars ?
-                    "N/A"
-                  : <>
-                      <Heading className="text-sm" level="h3">
-                        Shielded Balance
-                      </Heading>
-                      <FiatCurrency
-                        className="text-2xl sm:text-3xl whitespace-nowrap after:content-['*']"
-                        amount={shieldedDollars}
-                      />
-                    </>
-                  }
-                </div>
-              </PieChart>
-              {!namTransfersEnabled && (
-                <div className="absolute -bottom-4 -left-2 text-[10px]">
-                  * Balances exclude NAM until phase 5
-                </div>
-              )}
-            </>
-          }
+          <PieChart
+            id="balance-chart"
+            data={[{ value: 100, color: colors.shielded }]}
+            strokeWidth={24}
+            radius={125}
+            segmentMargin={0}
+          >
+            <div className="flex flex-col gap-1 items-center leading-tight max-w-[180px]">
+              {!shieldedDollars ?
+                "N/A"
+              : <>
+                  <Heading className="text-sm" level="h3">
+                    Shielded Balance
+                  </Heading>
+                  <FiatCurrency
+                    className={twMerge(
+                      "text-2xl sm:text-3xl whitespace-nowrap",
+                      !namTransfersEnabled && "after:content-['*']"
+                    )}
+                    amount={shieldedDollars}
+                  />
+                </>
+              }
+            </div>
+          </PieChart>
+          {!namTransfersEnabled && (
+            <div className="absolute -bottom-4 -left-2 text-[10px]">
+              * Balances exclude NAM until phase 5
+            </div>
+          )}
         </AtomErrorBoundary>
       </div>
     </div>

apps/namadillo/src/App/Masp/ShieldedSyncProgress.tsx

@@ -0,0 +1,20 @@
+import { shieldedBalanceAtom, shieldedSyncProgress } from "atoms/balance/atoms";
+import { useAtomValue } from "jotai";
+
+export const ShieldedSyncProgress = (): JSX.Element => {
+  const syncProgress = useAtomValue(shieldedSyncProgress);
+  const { isFetching } = useAtomValue(shieldedBalanceAtom);
+
+  if (!isFetching) {
+    return <></>;
+  }
+
+  return (
+    <div className={"bg-yellow rounded-sm text-xs font-medium py-2 px-3"}>
+      Shielded sync{" "}
+      {syncProgress === 1 ?
+        "converting..."
+      : `progress: ${Math.min(Math.floor(syncProgress * 100), 100)}%`}
+    </div>
+  );
+};

apps/namadillo/src/App/Settings/SettingsMASP.tsx

@@ -1,19 +1,18 @@
 import { ActionButton, Stack } from "@namada/components";
 import { routes } from "App/routes";
-import { shieldedSyncAtom } from "atoms/balance";
+import { storageShieldedBalanceAtom } from "atoms/balance/atoms";
 import { clearShieldedContextAtom } from "atoms/settings";
-import { useAtom } from "jotai";
-import { useNavigate } from "react-router-dom";
+import { useAtom, useSetAtom } from "jotai";
+import { RESET } from "jotai/utils";
 
 export const SettingsMASP = (): JSX.Element => {
-  const navigate = useNavigate();
   const [clearShieldedContext] = useAtom(clearShieldedContextAtom);
-  const [{ refetch: shieldedSync }] = useAtom(shieldedSyncAtom);
+  const setStorageShieldedBalance = useSetAtom(storageShieldedBalanceAtom);
 
   const onInvalidateShieldedContext = async (): Promise<void> => {
     await clearShieldedContext.mutateAsync();
-    shieldedSync();
-    navigate(routes.masp);
+    setStorageShieldedBalance(RESET);
+    location.href = routes.root;
   };
 
   return (