feat: improve pie chart responsiveness

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

@@ -29,8 +29,8 @@ export const AccountOverview = (): JSX.Element => {
       <div className={twMerge("flex w-full")}>
         {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">
+            <div className="grid sm:grid-cols-[1.25fr_1fr] gap-2">
+              <Panel>
                 <NamBalanceContainer />
               </Panel>
               <Panel>

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

@@ -1,4 +1,4 @@
-import { Stack } from "@namada/components";
+import { SkeletonLoading, Stack } from "@namada/components";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { BalanceChart } from "App/Common/BalanceChart";
 import { NamCurrency } from "App/Common/NamCurrency";
@@ -12,12 +12,14 @@ type NamBalanceListItemProps = {
   title: string;
   color: string;
   amount: BigNumber;
+  isLoading: boolean;
 };
 
 const NamBalanceListItem = ({
   title,
   color,
   amount,
+  isLoading,
 }: NamBalanceListItemProps): JSX.Element => {
   return (
     <li
@@ -28,11 +30,14 @@ const NamBalanceListItem = ({
         <i className="w-2 h-2 rounded-full" style={{ background: color }} />
         {title}
       </span>
-      <NamCurrency
-        amount={amount}
-        className="text-lg pl-3.5"
-        currencySymbolClassName="hidden"
-      />
+      {isLoading ?
+        <SkeletonLoading height="22px" width="100px" />
+      : <NamCurrency
+          amount={amount}
+          className="text-lg pl-3.5"
+          currencySymbolClassName="hidden"
+        />
+      }
     </li>
   );
 };
@@ -43,7 +48,6 @@ export const NamBalanceContainer = (): JSX.Element => {
     balanceQuery,
     stakeQuery,
     isLoading,
-    isSuccess,
     availableAmount,
     bondedAmount,
     shieldedAmount,
@@ -53,16 +57,15 @@ export const NamBalanceContainer = (): JSX.Element => {
   } = useBalances();
 
   return (
-    <div className="flex gap-4 text-white pl-4 pr-6 py-5">
+    <div className="flex items-center justify-center h-full w-full">
       <AtomErrorBoundary
         result={[balanceQuery, stakeQuery]}
         niceError="Unable to load balances"
       >
-        <div className="flex items-center w-full">
+        <div className="flex flex-wrap md:flex-nowrap gap-4 items-center justify-center">
           <BalanceChart
             view="total"
             isLoading={isLoading}
-            isSuccess={isSuccess}
             availableAmount={availableAmount}
             bondedAmount={bondedAmount}
             shieldedAmount={shieldedAmount}
@@ -76,22 +79,26 @@ export const NamBalanceContainer = (): JSX.Element => {
                 title="Shielded Assets"
                 color={colors.shielded}
                 amount={shieldedAmount}
+                isLoading={isLoading}
               />
             )}
             <NamBalanceListItem
               title="Available NAM"
               color={colors.balance}
               amount={availableAmount}
+              isLoading={isLoading}
             />
             <NamBalanceListItem
               title="Staked NAM"
               color={colors.bond}
               amount={bondedAmount}
+              isLoading={isLoading}
             />
             <NamBalanceListItem
               title="Unbonded NAM"
               color={colors.unbond}
               amount={unbondedAmount.plus(withdrawableAmount)}
+              isLoading={isLoading}
             />
           </Stack>
         </div>

apps/namadillo/src/App/Common/BalanceChart.tsx

@@ -17,7 +17,6 @@ type BalanceChartProps = {
   shieldedAmount: BigNumber;
   totalAmount: BigNumber;
   isLoading: boolean;
-  isSuccess: boolean;
 };
 
 export const BalanceChart = ({
@@ -29,7 +28,6 @@ export const BalanceChart = ({
   shieldedAmount,
   totalAmount,
   isLoading,
-  isSuccess,
 }: BalanceChartProps): JSX.Element => {
   const getPiechartData = (): Array<PieChartData> => {
     if (isLoading) {
@@ -70,27 +68,25 @@ export const BalanceChart = ({
   };
 
   return (
-    <div className="flex-1 w-full h-full">
-      {isLoading && (
+    <div className="h-[250px] w-[250px]">
+      {isLoading ?
         <SkeletonLoading
-          height="auto"
-          width="80%"
-          className="rounded-full aspect-square mx-auto border-neutral-800 border-[22px] bg-transparent"
+          height="100%"
+          width="100%"
+          className="rounded-full border-neutral-800 border-[24px] bg-transparent"
         />
-      )}
-      {isSuccess && (
-        <PieChart
+      : <PieChart
           id="balance-chart"
-          className="xl:max-w-[85%] mx-auto"
           data={getPiechartData()}
-          strokeWidth={7}
+          strokeWidth={24}
+          radius={125}
           segmentMargin={0}
         >
           {view === "stake" &&
             renderTextSummary("Total Staked Balance", bondedAmount)}
           {view === "total" && renderTextSummary("Total Balance", totalAmount)}
         </PieChart>
-      )}
+      }
     </div>
   );
 };

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

@@ -11,7 +11,7 @@ export const MaspOverview: React.FC = () => {
   return (
     <div className="flex flex-col gap-2">
       {!userHasAccount && <ConnectBanner actionText="To shield assets" />}
-      <div className="flex flex-col sm:grid sm:grid-cols-[2fr_3fr] gap-2">
+      <div className="grid sm:grid-cols-[2fr_3fr] gap-2">
         <Panel>
           <ShieldedBalanceChart />
         </Panel>

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

@@ -17,35 +17,37 @@ export const ShieldedBalanceChart = (): JSX.Element => {
   const { data } = useAtomValue(totalShieldedBalanceAtom);
 
   return (
-    <AtomErrorBoundary
-      result={shieldedBalanceQuery}
-      niceError="Unable to load balance"
-    >
-      <div className="flex items-center justify-center w-full h-[260px]">
-        {data ?
-          <PieChart
-            id="balance-chart"
-            className="xl:max-w-[85%] mx-auto"
-            data={[{ value: 100, color: colors.shielded }]}
-            strokeWidth={7}
-            segmentMargin={0}
-          >
-            <div className="flex flex-col gap-1 items-center leading-tight">
-              <Heading className="text-sm" level="h3">
-                Shielded Balance
-              </Heading>
-              <div className="text-2xl sm:text-3xl">
-                <Currency currency={{ symbol: "$" }} amount={data} />
+    <div className="flex items-center justify-center h-full w-full">
+      <div className="h-[250px] w-[250px]">
+        <AtomErrorBoundary
+          result={shieldedBalanceQuery}
+          niceError="Unable to load balance"
+        >
+          {data !== undefined ?
+            <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">
+                <Heading className="text-sm" level="h3">
+                  Shielded Balance
+                </Heading>
+                <div className="text-2xl sm:text-3xl">
+                  <Currency currency={{ symbol: "$" }} amount={data} />
+                </div>
               </div>
-            </div>
-          </PieChart>
-        : <SkeletonLoading
-            height="80%"
-            width="80%"
-            className="rounded-full aspect-square mx-auto border-neutral-800 border-[14px] bg-transparent"
-          />
-        }
+            </PieChart>
+          : <SkeletonLoading
+              height="100%"
+              width="100%"
+              className="rounded-full border-neutral-800 border-[24px] bg-transparent"
+            />
+          }
+        </AtomErrorBoundary>
       </div>
-    </AtomErrorBoundary>
+    </div>
   );
 };

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

@@ -2,6 +2,7 @@ import { SkeletonLoading, Stack, Tooltip } from "@namada/components";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { namShieldedBalanceAtom, shieldedBalanceAtom } from "atoms/masp/atoms";
+import { applicationFeaturesAtom } from "atoms/settings/atoms";
 import BigNumber from "bignumber.js";
 import { useAtomValue } from "jotai";
 import { GoInfo } from "react-icons/go";
@@ -31,6 +32,7 @@ const AsyncNamCurrency = ({ amount }: { amount?: BigNumber }): JSX.Element => {
 export const ShieldedNamBalance = (): JSX.Element => {
   const shieldedBalanceQuery = useAtomValue(shieldedBalanceAtom);
   const { data: namAmount } = useAtomValue(namShieldedBalanceAtom);
+  const { shieldingRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
 
   return (
     <AtomErrorBoundary
@@ -73,7 +75,9 @@ export const ShieldedNamBalance = (): JSX.Element => {
           className={twMerge(
             "relative",
             "flex flex-col gap-4 justify-between",
-            "rounded-sm bg-neutral-900 p-4 "
+            "rounded-sm bg-neutral-900 p-4",
+            !shieldingRewardsEnabled &&
+              "opacity-25 pointer-events-none select-none"
           )}
         >
           <div className="absolute top-2 right-2 group/tooltip">
@@ -93,14 +97,18 @@ export const ShieldedNamBalance = (): JSX.Element => {
             <br />
             rewards per Epoch
           </div>
-          <AsyncNamCurrency amount={new BigNumber(9999)} />
+          {shieldingRewardsEnabled ?
+            <AsyncNamCurrency amount={new BigNumber(0)} />
+          : <div className="block text-center text-3xl">--</div>}
           <div
             className={twMerge(
               "border border-white rounded-md py-2 max-w-[200px] mx-auto mt-4",
               "text-white text-xs text-center"
             )}
           >
-            Shielding more assets will increase your rewards
+            {shieldingRewardsEnabled ?
+              "Shielding more assets will increase your rewards"
+            : "Shielding Rewards will be enabled in phase 4"}
           </div>
         </div>
       </div>

apps/namadillo/src/App/Staking/StakingSummary.tsx

@@ -16,7 +16,6 @@ export const StakingSummary = (): JSX.Element => {
     balanceQuery,
     stakeQuery,
     isLoading,
-    isSuccess,
     availableAmount,
     bondedAmount,
     shieldedAmount,
@@ -26,16 +25,15 @@ export const StakingSummary = (): JSX.Element => {
   } = useBalances();
 
   return (
-    <ul className="flex flex-col sm:grid sm:grid-cols-[1.25fr_1fr_1fr] gap-2">
-      <Panel as="li" className="flex items-center">
+    <ul className="grid sm:grid-cols-[1.25fr_1fr_1fr] gap-2">
+      <Panel as="li" className="flex items-center justify-center h-full w-full">
         <AtomErrorBoundary
           result={[balanceQuery, stakeQuery]}
           niceError="Unable to load balance"
         >
           <BalanceChart
             view="stake"
             isLoading={isLoading}
-            isSuccess={isSuccess}
             availableAmount={availableAmount}
             bondedAmount={bondedAmount}
             shieldedAmount={shieldedAmount}

apps/namadillo/src/atoms/masp/atoms.ts

@@ -52,7 +52,7 @@ export const totalShieldedBalanceAtom = atomWithQuery<BigNumber>((get) => {
     refetchInterval: enablePolling ? 1000 : false,
     queryKey: ["total-shielded-balance"],
     ...queryDependentFn(async () => {
-      if (!shieldedBalanceQuery.data) {
+      if (!shieldedBalanceQuery.data?.length) {
         return new BigNumber(0);
       }
       // TODO convert to fiat values
@@ -71,7 +71,7 @@ export const namShieldedBalanceAtom = atomWithQuery<BigNumber>((get) => {
     queryKey: ["nam-shielded-balance"],
     ...queryDependentFn(async () => {
       const namTokenAddress = namTokenAddressQuery.data;
-      if (!shieldedBalanceQuery.data || !namTokenAddress) {
+      if (!shieldedBalanceQuery.data?.length || !namTokenAddress) {
         return new BigNumber(0);
       }
       return BigNumber.sum(

apps/namadillo/src/hooks/useBalances.ts

@@ -35,11 +35,9 @@ export const useBalances = (): useBalancesOutput => {
     isSuccess: isStakedBalanceLoaded,
   } = totalStakedBalance;
 
-  const {
-    data: shieldedBalance,
-    isLoading: isFetchingShieldedBalance,
-    isSuccess: isShieldedBalanceLoaded,
-  } = totalShieldedBalance;
+  const { data: shieldedBalance } = totalShieldedBalance;
+  const isFetchingShieldedBalance = shieldedBalance === undefined;
+  const isShieldedBalanceLoaded = !isFetchingShieldedBalance;
 
   const availableAmount = new BigNumber(balance || 0);
   const bondedAmount = new BigNumber(stakeBalance?.totalBonded || 0);

packages/components/src/PieChart.tsx

@@ -35,7 +35,7 @@ export const PieChart = ({
   onMouseLeave,
   ...svgProps
 }: PieChartProps): JSX.Element => {
-  const length = 2 * Math.PI * (radius - strokeWidth);
+  const length = 2 * Math.PI * (radius - strokeWidth / 2);
   const indexedData = data.map((dataItem, index) => ({
     ...dataItem,
     originalIndex: index, // needed to preserve index when some values are 0
@@ -68,7 +68,7 @@ export const PieChart = ({
           strokeWidth={strokeWidth}
           strokeDashoffset={offset}
           strokeDasharray={`${segmentLength} ${length}`}
-          r={radius - strokeWidth}
+          r={radius - strokeWidth / 2}
           stroke={dataItem.color}
           aria-label={dataItem.label || ""}
           onMouseEnter={