feat(wallet-dashboard): add feature flags for migration & supply increase vesting

apps/apps-backend/src/features/features.controller.ts

@@ -64,6 +64,12 @@ export class FeaturesController {
                 [Feature.AccountFinder]: {
                     defaultValue: false,
                 },
+                [Feature.WalletDashboardMigration]: {
+                    defaultValue: false,
+                },
+                [Feature.WalletDashboardSupplyIncreaseVesting]: {
+                    defaultValue: false,
+                },
             },
             dateUpdated: new Date().toISOString(),
         };

apps/core/src/constants/features.enum.ts

@@ -18,4 +18,6 @@ export enum Feature {
     NetworkOutageOverride = 'network-outage-override',
     ModuleSourceVerification = 'module-source-verification',
     WalletEffectsOnlySharedTransaction = 'wallet-effects-only-shared-transaction',
+    WalletDashboardMigration = 'wallet-dashboard-migration',
+    WalletDashboardSupplyIncreaseVesting = 'wallet-dashboard-supply-increase-vesting',
 }

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

apps/wallet-dashboard/app/layout.tsx

@@ -5,14 +5,15 @@
 import { Inter } from 'next/font/google';
 
 import './globals.css';
-
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { IotaClientProvider, WalletProvider } from '@iota/dapp-kit';
 import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 
 import '@iota/dapp-kit/dist/index.css';
 import { Popup, PopupProvider } from '@/components/Popup';
+import { growthbook } from '@/lib/utils';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -26,19 +27,23 @@ export default function RootLayout({
     const allNetworks = getAllNetworks();
     const defaultNetwork = getDefaultNetwork();
 
+    growthbook.init();
+
     return (
         <html lang="en">
             <body className={inter.className}>
-                <QueryClientProvider client={queryClient}>
-                    <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
-                        <WalletProvider>
-                            <PopupProvider>
-                                {children}
-                                <Popup />
-                            </PopupProvider>
-                        </WalletProvider>
-                    </IotaClientProvider>
-                </QueryClientProvider>
+                <GrowthBookProvider growthbook={growthbook}>
+                    <QueryClientProvider client={queryClient}>
+                        <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
+                            <WalletProvider>
+                                <PopupProvider>
+                                    {children}
+                                    <Popup />
+                                </PopupProvider>
+                            </WalletProvider>
+                        </IotaClientProvider>
+                    </QueryClientProvider>
+                </GrowthBookProvider>
             </body>
         </html>
     );

apps/wallet-dashboard/lib/utils/growthbook.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { GrowthBook } from '@growthbook/growthbook';
+import { getAppsBackend } from '@iota/iota-sdk/client';
+
+export const growthbook = new GrowthBook({
+    // If you want to develop locally, you can set the API host to this:
+    apiHost: getAppsBackend(),
+    clientKey: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    enableDevMode: process.env.NODE_ENV === 'development',
+});

apps/wallet-dashboard/lib/utils/index.ts

@@ -6,3 +6,4 @@ export * from './vesting';
 export * from './time';
 export * from './timelock';
 export * from './transaction';
+export * from './growthbook';

apps/wallet-dashboard/package.json

@@ -15,6 +15,8 @@
         "node": ">= v18.17.0"
     },
     "dependencies": {
+        "@growthbook/growthbook": "^1.0.0",
+        "@growthbook/growthbook-react": "^1.0.0",
         "@iota/apps-ui-kit": "workspace:*",
         "@iota/core": "workspace:*",
         "@iota/dapp-kit": "workspace:*",