Fix token gate to use community-config tokens with systemConfig fallback

scripts/seed-data/communities/nouns.ts

@@ -106,10 +106,10 @@ export function createNounsCommunityConfig(
         ],
         nftTokens: [
           {
-            address: '0x9C8fF314C9Bc7F6e59A9d9225Fb22946427eDC03',
-            symbol: 'Nouns',
+            address: '0xD094D5D45c06c1581f5f429462eE7cCe72215616',
+            symbol: 'nOGs',
             type: 'erc721',
-            network: 'eth',
+            network: 'base',
           },
         ],
       },
@@ -188,4 +188,3 @@ export function createNounsCommunityConfig(
     },
   };
 }
-

src/app/layout.tsx

@@ -152,7 +152,7 @@ export default async function RootLayout({
         }
       >
         <SpeedInsights />
-        <Providers>
+        <Providers systemConfig={systemConfig}>
           {sidebarLayout(children, systemConfig)}
           <ContextDebugger />
         </Providers>

src/common/components/organisms/NogsGateButton.tsx

@@ -12,6 +12,7 @@ import { isUndefined } from "lodash";
 import { mapNetworkToAlchemy } from "@/common/lib/utils/tokenGates";
 import { getNftTokens } from "@/common/lib/utils/tokenGates";
 import { useTokenGate } from "@/common/lib/hooks/useTokenGate";
+import { useSystemConfigContext } from "@/common/providers/SystemConfigProvider";
 import { type SystemConfig } from "@/config";
 
 type NogsGateButtonProps = ButtonProps & {
@@ -49,12 +50,14 @@ const NogsGateButton = ({ systemConfig, ...props }: NogsGateButtonProps) => {
 
   const [modalOpen, setModalOpen] = useState(false);
   const { user } = usePrivy();
+  const contextConfig = useSystemConfigContext();
+  const effectiveConfig = systemConfig ?? contextConfig ?? undefined;
 
   // Use token gate hook for ERC20 token gating
-  const { erc20Token, gatingSatisfied, walletAddress } = useTokenGate(systemConfig);
+  const { erc20Token, gatingSatisfied, walletAddress } = useTokenGate(effectiveConfig);
 
   // Extract NFT tokens from config - memoize to prevent infinite re-renders
-  const nftTokens = useMemo(() => getNftTokens(systemConfig), [systemConfig]);
+  const nftTokens = useMemo(() => getNftTokens(effectiveConfig), [effectiveConfig]);
 
   // Optional debug logs
   useEffect(() => {

src/common/lib/hooks/useTokenGate.ts

@@ -4,6 +4,7 @@ import { zeroAddress, type Address } from "viem";
 import { useAppStore } from "@/common/data/stores/app";
 import { getPrimaryErc20Token, getChainForNetwork, formatTokenBalance } from "@/common/lib/utils/tokenGates";
 import { MIN_SPACE_TOKENS_FOR_UNLOCK } from "@/common/constants/gates";
+import { useSystemConfigContext } from "@/common/providers/SystemConfigProvider";
 import type { SystemConfig } from "@/config";
 
 /**
@@ -15,7 +16,9 @@ import type { SystemConfig } from "@/config";
  */
 export function useTokenGate(systemConfig?: SystemConfig) {
   const { user } = usePrivy();
-  const erc20Token = getPrimaryErc20Token(systemConfig);
+  const contextConfig = useSystemConfigContext();
+  const effectiveConfig = systemConfig ?? contextConfig ?? undefined;
+  const erc20Token = getPrimaryErc20Token(effectiveConfig);
   const walletAddress = user?.wallet?.address as Address | undefined;
 
   const { data: balanceData, isLoading, isFetching } = useBalance({
@@ -44,4 +47,3 @@ export function useTokenGate(systemConfig?: SystemConfig) {
     hasNogs,
   };
 }
-

src/common/providers/SystemConfigProvider.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import type { SystemConfig } from "@/config";
+
+const SystemConfigContext = createContext<SystemConfig | null>(null);
+
+type SystemConfigProviderProps = {
+  children: React.ReactNode;
+  systemConfig: SystemConfig;
+};
+
+export function SystemConfigProvider({
+  children,
+  systemConfig,
+}: SystemConfigProviderProps) {
+  return (
+    <SystemConfigContext.Provider value={systemConfig}>
+      {children}
+    </SystemConfigContext.Provider>
+  );
+}
+
+export function useSystemConfigContext(): SystemConfig | null {
+  return useContext(SystemConfigContext);
+}

src/common/providers/index.tsx

@@ -17,6 +17,8 @@ import MobilePreviewProvider from "./MobilePreviewProvider";
 import { SharedDataProvider } from "./SharedDataProvider";
 import { MiniKitContextProvider } from "./MiniKitProvider";
 import { GlobalErrorHandler } from "./GlobalErrorHandler";
+import { SystemConfigProvider } from "./SystemConfigProvider";
+import type { SystemConfig } from "@/config";
 
 const RarelyUpdatedProviders = React.memo(
   function RarelyUpdatedProviders({
@@ -38,9 +40,15 @@ const RarelyUpdatedProviders = React.memo(
   },
 );
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+export default function Providers({
+  children,
+  systemConfig,
+}: {
+  children: React.ReactNode;
+  systemConfig: SystemConfig;
+}) {
   return (
-    <>
+    <SystemConfigProvider systemConfig={systemConfig}>
       <GlobalErrorHandler />
       <VersionCheckProivder>
         <Privy>
@@ -65,6 +73,6 @@ export default function Providers({ children }: { children: React.ReactNode }) {
           </Query>
         </Privy>
       </VersionCheckProivder>
-    </>
+    </SystemConfigProvider>
   );
 }