feat: conditionally highlight each phase on the roadmap (#1290)

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

@@ -2,35 +2,19 @@ import { ActionButton, Image, Panel } from "@namada/components";
 import { applicationFeaturesAtom } from "atoms/settings";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { FaCircleCheck } from "react-icons/fa6";
+import { RoadmapPhase } from "./RoadmapPhase";
 
 const MainnetRoadmap = (): JSX.Element => {
-  const { claimRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
+  const {
+    claimRewardsEnabled,
+    shieldingRewardsEnabled,
+    namTransfersEnabled,
+    maspEnabled,
+    ibcTransfersEnabled,
+  } = useAtomValue(applicationFeaturesAtom);
 
-  const renderPhase = (
-    phaseNumber: string,
-    name: React.ReactNode,
-    className: string,
-    done = false
-  ): JSX.Element => {
-    return (
-      <li
-        className={clsx(
-          "flex flex-col items-center text-center uppercase text-yellow my-2",
-          className
-        )}
-      >
-        <i className="w-0.5 h-3.5 bg-yellow mb-1.5" />
-        <span className="block text-[13px] mb-1">Phase {phaseNumber}</span>
-        <span className="leading-normal">{name}</span>
-        {done && (
-          <i className="my-1">
-            <FaCircleCheck />
-          </i>
-        )}
-      </li>
-    );
-  };
+  const getClassName = (enabled: boolean): string =>
+    clsx(!enabled && "opacity-25");
 
   return (
     <Panel>
@@ -40,33 +24,37 @@ const MainnetRoadmap = (): JSX.Element => {
           Namada Mainnet Roadmap
         </h2>
         <ul>
-          {renderPhase(
-            "1",
+          <RoadmapPhase phase="1" active={true}>
             <>
               Proof of Stake
               <br />
               Governance
-            </>,
-            "opacity-100",
-            true
-          )}
-          {renderPhase(
-            "2",
-            <>Staking Rewards</>,
-            claimRewardsEnabled ? "opacity-100" : "opacity-25",
-            claimRewardsEnabled
-          )}
-          {renderPhase(
-            "3",
+            </>
+          </RoadmapPhase>
+          <RoadmapPhase phase="2" active={claimRewardsEnabled}>
+            <span className={getClassName(claimRewardsEnabled)}>
+              Staking Rewards
+            </span>
+          </RoadmapPhase>
+          <RoadmapPhase phase="3" active={ibcTransfersEnabled || maspEnabled}>
             <>
-              IBC Transfers
+              <span className={getClassName(ibcTransfersEnabled)}>
+                IBC Transfers
+              </span>
               <br />
-              MASP Enabled
-            </>,
-            "opacity-25"
-          )}
-          {renderPhase("4", "Shielding Rewards", "opacity-25")}
-          {renderPhase("5", "NAM Transfers enabled", "opacity-25")}
+              <span className={getClassName(maspEnabled)}>MASP Enabled</span>
+            </>
+          </RoadmapPhase>
+          <RoadmapPhase phase="4" active={shieldingRewardsEnabled}>
+            <span className={getClassName(shieldingRewardsEnabled)}>
+              Shielding Rewards
+            </span>
+          </RoadmapPhase>
+          <RoadmapPhase phase="5" active={namTransfersEnabled}>
+            <span className={getClassName(namTransfersEnabled)}>
+              NAM Transfers enabled
+            </span>
+          </RoadmapPhase>
         </ul>
         <ActionButton
           className="max-w-40 mt-6"

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

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { FaCircleCheck } from "react-icons/fa6";
+
+type RoadmapPhaseProps = {
+  phase: string;
+  active?: boolean;
+  children: React.ReactNode;
+};
+
+export const RoadmapPhase = ({
+  phase,
+  active,
+  children,
+}: RoadmapPhaseProps): JSX.Element => {
+  const disabledClassName = !active && "opacity-25";
+  return (
+    <li
+      className={clsx(
+        "flex flex-col items-center text-center uppercase text-yellow my-2"
+      )}
+    >
+      <i className="w-0.5 h-3.5 bg-yellow mb-1.5" />
+      <span className={clsx("block text-[13px] mb-1", disabledClassName)}>
+        Phase {phase}
+      </span>
+      <div>{children}</div>
+      {active && (
+        <i className="my-1">
+          <FaCircleCheck />
+        </i>
+      )}
+    </li>
+  );
+};