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',
+    StardustMigration = 'wallet-dashboard-migration',
+    SupplyIncreaseVesting = 'wallet-dashboard-supply-increase-vesting',
 }

apps/wallet-dashboard/app/(protected)/components/sidebar/Sidebar.tsx

@@ -4,13 +4,24 @@
 import { PROTECTED_ROUTES } from '@/lib/constants/routes.constants';
 import { IotaLogoMark } from '@iota/ui-icons';
 import { SidebarItem } from './SidebarItem';
+import { Feature } from '@iota/core';
+import { useFeature } from '@growthbook/growthbook-react';
 
 export function Sidebar() {
+    const featureFlags = {
+        Migrations: useFeature<boolean>(Feature.StardustMigration).value,
+        Vesting: useFeature<boolean>(Feature.SupplyIncreaseVesting).value,
+    };
+
+    const filteredRoutes = PROTECTED_ROUTES.filter(({ title }) => {
+        return title in featureFlags ? featureFlags[title as keyof typeof featureFlags] : true;
+    });
+
     return (
         <nav className="flex h-screen flex-col items-center gap-y-2xl bg-neutral-100 py-xl dark:bg-neutral-6">
             <IotaLogoMark className="h-10 w-10 text-neutral-10 dark:text-neutral-92" />
             <div className="flex flex-col gap-y-xs">
-                {PROTECTED_ROUTES.map((route) => (
+                {filteredRoutes.map((route) => (
                     <SidebarItem key={route.path} {...route} />
                 ))}
             </div>

apps/wallet-dashboard/app/(protected)/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 stardustMigrationEnabled = useFeature<boolean>(Feature.StardustMigration).value;
+
+    useEffect(() => {
+        if (stardustMigrationEnabled) {
+            router.push('/');
+        }
+    }, [stardustMigrationEnabled, router]);
+
     return (
         <div className="flex items-center justify-center pt-12">
             <h1>MIGRATIONS</h1>

apps/wallet-dashboard/app/(protected)/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,8 @@ function VestingDashboardPage(): JSX.Element {
     const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(account?.address || '');
     const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
+    const supplyIncreaseVestingEnabled = useFeature<boolean>(Feature.SupplyIncreaseVesting).value;
+
     const timelockedMapped = mapTimelockObjects(timelockedObjects || []);
     const timelockedstakedMapped = formatDelegatedTimelockedStake(timelockedStakedObjects || []);
 
@@ -134,6 +141,12 @@ function VestingDashboardPage(): JSX.Element {
         );
     }
 
+    useEffect(() => {
+        if (supplyIncreaseVestingEnabled) {
+            router.push('/');
+        }
+    }, [router, supplyIncreaseVestingEnabled]);
+
     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,16 +5,18 @@
 import { Inter } from 'next/font/google';
 
 import './globals.css';
-
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { IotaClientProvider, lightTheme, darkTheme, 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'] });
+growthbook.init();
 
 export default function RootLayout({
     children,
@@ -30,26 +32,28 @@ export default function RootLayout({
     return (
         <html lang="en">
             <body className={inter.className} ref={bodyRef}>
-                <QueryClientProvider client={queryClient}>
-                    <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
-                        <WalletProvider
-                            theme={[
-                                {
-                                    variables: lightTheme,
-                                },
-                                {
-                                    selector: '.dark',
-                                    variables: darkTheme,
-                                },
-                            ]}
-                        >
-                            <PopupProvider>
-                                {children}
-                                <Popup />
-                            </PopupProvider>
-                        </WalletProvider>
-                    </IotaClientProvider>
-                </QueryClientProvider>
+                <GrowthBookProvider growthbook={growthbook}>
+                    <QueryClientProvider client={queryClient}>
+                        <IotaClientProvider networks={allNetworks} defaultNetwork={defaultNetwork}>
+                            <WalletProvider
+                                theme={[
+                                    {
+                                        variables: lightTheme,
+                                    },
+                                    {
+                                        selector: '.dark',
+                                        variables: darkTheme,
+                                    },
+                                ]}
+                            >
+                                <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:*",