From ee05961b215674878ab91c8c2b04312082a4446b Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Fri, 25 Oct 2024 14:04:41 +0200
Subject: [PATCH] feat:add redirects if feature flag are disabled

---
 apps/wallet-dashboard/app/dashboard/layout.tsx    | 15 +++++++++++++--
 .../app/dashboard/migrations/page.tsx             | 15 +++++++++++++++
 .../app/dashboard/vesting/page.tsx                | 15 +++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/apps/wallet-dashboard/app/dashboard/layout.tsx b/apps/wallet-dashboard/app/dashboard/layout.tsx
index 7db89a819c7..22eec077aa3 100644
--- a/apps/wallet-dashboard/app/dashboard/layout.tsx
+++ b/apps/wallet-dashboard/app/dashboard/layout.tsx
@@ -7,6 +7,8 @@ import React, { useEffect, useState, type PropsWithChildren } from 'react';
 import { ConnectButton, useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit';
 import { Button } from '@iota/apps-ui-kit';
 import { useRouter } from 'next/navigation';
+import { useFeature } from '@growthbook/growthbook-react';
+import { Feature } from '@iota/core';
 
 const routes = [
     { title: 'Home', path: '/dashboard/home' },
@@ -22,8 +24,17 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
     const [isDarkMode, setIsDarkMode] = useState(false);
     const { connectionStatus } = useCurrentWallet();
     const account = useCurrentAccount();
-
     const router = useRouter();
+
+    const featureFlags = {
+        Migrations: useFeature<boolean>(Feature.WalletDashboardMigration).value,
+        Vesting: useFeature<boolean>(Feature.WalletDashboardSupplyIncreaseVesting).value,
+    };
+
+    const filteredRoutes = routes.filter(({ title }) => {
+        return title in featureFlags ? featureFlags[title as keyof typeof featureFlags] : true;
+    });
+
     const toggleDarkMode = () => {
         setIsDarkMode(!isDarkMode);
         if (isDarkMode) {
@@ -43,7 +54,7 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
         <>
             <section className="flex flex-row items-center justify-around pt-12">
                 <Notifications />
-                {routes.map((route) => {
+                {filteredRoutes.map((route) => {
                     return <RouteLink key={route.title} {...route} />;
                 })}
                 <Button onClick={toggleDarkMode} text={isDarkMode ? 'Light Mode' : 'Dark Mode'} />
diff --git a/apps/wallet-dashboard/app/dashboard/migrations/page.tsx b/apps/wallet-dashboard/app/dashboard/migrations/page.tsx
index b57170a8ed6..d41f6fe3c8e 100644
--- a/apps/wallet-dashboard/app/dashboard/migrations/page.tsx
+++ b/apps/wallet-dashboard/app/dashboard/migrations/page.tsx
@@ -1,7 +1,22 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
+'use client';
+
+import { useFeature } from '@growthbook/growthbook-react';
+import { Feature } from '@iota/core';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
 function MigrationDashboardPage(): JSX.Element {
+    const router = useRouter();
+    const migrationDisabled = useFeature<boolean>(Feature.WalletDashboardMigration).value;
+
+    useEffect(() => {
+        if (migrationDisabled) {
+            router.push('/');
+        }
+    }, [migrationDisabled, router]);
+
     return (
         <div className="flex items-center justify-center pt-12">
             <h1>MIGRATIONS</h1>
diff --git a/apps/wallet-dashboard/app/dashboard/vesting/page.tsx b/apps/wallet-dashboard/app/dashboard/vesting/page.tsx
index c83b89b7962..67080367066 100644
--- a/apps/wallet-dashboard/app/dashboard/vesting/page.tsx
+++ b/apps/wallet-dashboard/app/dashboard/vesting/page.tsx
@@ -14,7 +14,9 @@ import {
     TimelockedStakedObjectsGrouped,
 } from '@/lib/utils';
 import { NotificationType } from '@/stores/notificationStore';
+import { useFeature } from '@growthbook/growthbook-react';
 import {
+    Feature,
     TIMELOCK_IOTA_TYPE,
     useGetActiveValidatorsInfo,
     useGetAllOwnedObjects,
@@ -24,11 +26,14 @@ import {
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { IotaValidatorSummary } from '@iota/iota-sdk/client';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
 function VestingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
+    const router = useRouter();
     const { addNotification } = useNotifications();
     const { openPopup, closePopup } = usePopups();
     const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
@@ -39,6 +44,10 @@ function VestingDashboardPage(): JSX.Element {
     const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(account?.address || '');
     const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
+    const supplyIncreaseVestingDisabled = useFeature<boolean>(
+        Feature.WalletDashboardSupplyIncreaseVesting,
+    ).value;
+
     const timelockedMapped = mapTimelockObjects(timelockedObjects || []);
     const timelockedstakedMapped = formatDelegatedTimelockedStake(timelockedStakedObjects || []);
 
@@ -134,6 +143,12 @@ function VestingDashboardPage(): JSX.Element {
         );
     }
 
+    useEffect(() => {
+        if (supplyIncreaseVestingDisabled) {
+            router.push('/');
+        }
+    }, [router, supplyIncreaseVestingDisabled]);
+
     return (
         <div className="flex flex-row">
             <div className="flex w-1/2 flex-col items-center justify-center space-y-4 pt-12">