feat(mfi-v2-ui): feature gates

apps/marginfi-v2-ui/src/components/Navbar/Navbar.tsx

@@ -13,6 +13,7 @@ import { Badge } from "@mui/material";
 import { useFirebaseAccount } from "../useFirebaseAccount";
 import { groupedNumberFormatterDyn, numeralFormatter } from "@mrgnlabs/mrgn-common";
 import { useWalletContext } from "../useWalletContext";
+import { Features, isActive } from "~/utils/featureGates";
 
 // @todo implement second pretty navbar row
 const Navbar: FC = () => {
@@ -143,7 +144,7 @@ const Navbar: FC = () => {
               </Link>
             </Badge>
 
-            <Badge
+            {isActive(Features.STAKE) && <Badge
               anchorOrigin={{
                 vertical: "bottom",
                 horizontal: "right",
@@ -163,7 +164,7 @@ const Navbar: FC = () => {
               >
                 stake
               </Link>
-            </Badge>
+            </Badge>}
 
             <Badge
               anchorOrigin={{

apps/marginfi-v2-ui/src/middleware.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 
 export const config = {
-  matcher: ["/", "/index"],
+  matcher: ["/", "/index", "/stake", "/swap", "/bridge", "/earn", "/points"],
 };
 
 export function middleware(req: NextRequest) {

apps/marginfi-v2-ui/src/pages/stake.tsx

@@ -1,20 +1,33 @@
 import { JupiterProvider } from "@jup-ag/react-hook";
 import { createJupiterStore } from "@mrgnlabs/marginfi-v2-ui-state";
 import { useConnection } from "@solana/wallet-adapter-react";
-import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import { PageHeader } from "~/components/PageHeader";
 import { StakingStats } from "~/components/Staking";
 import { StakingCard } from "~/components/Staking/StakingCard/StakingCard";
 import { useWalletContext } from "~/components/useWalletContext";
 import { createLstStore } from "~/store/lstStore";
 import { usePrevious } from "~/utils";
+import { Features, isActive } from "~/utils/featureGates";
 
 export const useLstStore = createLstStore();
 export const useJupiterStore = createJupiterStore();
 
 const StakePage = () => {
   const { wallet, walletAddress } = useWalletContext();
   const { connection } = useConnection();
+  const [mounted, setMounted] = useState(false);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.pathname.startsWith('/stake') && !isActive(Features.STAKE)) {
+      router.push('/');
+    } else {
+      setMounted(true);
+    }
+  }, [router]);
 
   const [fetchLstState, setIsRefreshingStore, userDataFetched, resetUserData] = useLstStore((state) => [
     state.fetchLstState,
@@ -48,6 +61,8 @@ const StakePage = () => {
     }
   }, [walletAddress, userDataFetched, resetUserData]);
 
+  if (!mounted) return null;
+
   return (
     <JupiterProvider connection={connection}>
       <PageHeader>stake</PageHeader>

apps/marginfi-v2-ui/src/utils/featureGates.ts

@@ -0,0 +1,14 @@
+enum Features {
+  STAKE = 'stake',
+}
+
+function isActive(feature: Features) {
+  const featureGatesRaw = process.env.NEXT_PUBLIC_FEATURE_GATES as string | undefined;
+  if (!featureGatesRaw) return false;
+
+  const featureGates = JSON.parse(featureGatesRaw) as Record<string, boolean>;
+
+  return !!featureGates[feature];
+}
+
+export { Features, isActive };

turbo.json

@@ -32,6 +32,7 @@
     "NEXT_PUBLIC_MARGINFI_FEATURES_CREATE_CAMPAIGN",
     "NEXT_PUBLIC_OMNI_TABLE_ID",
     "NEXT_PUBLIC_FIREBASE_PROJECT_ID",
+    "NEXT_PUBLIC_FEATURE_GATES",
     "FIREBASE_CLIENT_EMAIL",
     "FIREBASE_PRIVATE_KEY",
     "NEXT_PUBLIC_FIREBASE_DATABASE_URL",