feat:add redirects if feature flag are disabled

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'} />

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>

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">