Merge pull request #24 from HausDAO/fix-deploy

fix: add key prop to Link component in DaoList

src/app/dao/[chainid]/[daoid]/page.tsx

@@ -1,10 +1,10 @@
 import { Metadata } from "next";
 import DaoHome from "./dao-home";
 
+export const runtime = "edge"; // Required for Cloudflare Pages
 const appUrl = process.env.NEXT_PUBLIC_URL;
 
 export const revalidate = 300;
-export const runtime = "edge";
 
 type Props = {
   params: Promise<{ chainid: string; daoid: string }>;

src/app/layout.tsx

@@ -1,37 +1,37 @@
-import './globals.css';
+import "./globals.css";
 
-import type { Metadata } from 'next';
+import type { Metadata } from "next";
 
-import { Header } from '@/components/ui/header';
-import { Providers } from '@/providers/Providers';
+import { Header } from "@/components/ui/header";
+import { Providers } from "@/providers/Providers";
 
 const frame = {
-  version: 'next',
+  version: "next",
   imageUrl: `https://proposals.farcastle.net/image.png`,
   button: {
-    title: 'Make Proposal',
+    title: "Make Proposal",
     action: {
-      type: 'launch_frame',
-      name: 'Proposals',
-      url: 'https://proposals.farcastle.net',
+      type: "launch_frame",
+      name: "Proposals",
+      url: "https://proposals.farcastle.net",
       iconImageUrl: `https://proposals.farcastle.net/icon.png`,
       splashImageUrl: `https://proposals.farcastle.net/splash.png`,
-      splashBackgroundColor: '#341A34',
+      splashBackgroundColor: "#341A34",
     },
   },
 };
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
-    metadataBase: new URL('https://proposals.farcastle.net'),
-    title: 'Proposals',
+    metadataBase: new URL("https://proposals.farcastle.net"),
+    title: "Proposals",
     openGraph: {
-      title: 'Farcastle Proposals',
-      description: 'the actions of organizations',
+      title: "Farcastle Proposals",
+      description: "the actions of organizations",
       images: `https://proposals.farcastle.net/image.png`,
     },
     other: {
-      'fc:frame': JSON.stringify(frame),
+      "fc:frame": JSON.stringify(frame),
     },
   };
 }

src/app/page.tsx

@@ -1,14 +1,22 @@
 "use client";
 
-import { DaoList } from "@/components/app/DaoList";
 import { Button } from "@/components/ui/button";
 import { DAO_CONFIG, HOLLOW_SERVANTS_DAO_ID } from "@/lib/constants";
+import { default as dynamicImport } from "next/dynamic";
 import Link from "next/link";
-import React from "react";
+
+const DaoList = dynamicImport(
+  () => import("@/components/app/DaoList").then(mod => mod.DaoList),
+  {
+    ssr: false,
+  }
+);
 
 const { DAO_ID, DAO_CHAIN } = DAO_CONFIG[HOLLOW_SERVANTS_DAO_ID];
 
-export default function Home() {
+export const dynamic = "force-dynamic";
+
+export default function Page() {
   return (
     <div className="w-full h-full space-y-4 pb-4 px-4">
       <div className="p-4 gap-2 flex flex-col items-center justify-center w-full relative text-primary">

src/components/app/DaoList.tsx

@@ -1,12 +1,20 @@
-import { useFrameSDK } from "@/providers/FramesSDKProvider";
-import { Button } from "../ui/button";
-import { useAccount, useConnect } from "wagmi";
-import { useDaosForAddress } from "@/hooks/useDaosForAddress";
+"use client";
 
-import { toHex } from "viem";
+import { useDaosForAddress } from "@/hooks/useDaosForAddress";
+import { useFrameSDK } from "@/providers/FramesSDKProvider";
 import Link from "next/link";
+import { useEffect, useState } from "react";
+import { toHex } from "viem";
+import { useAccount, useConnect } from "wagmi";
+import { Button } from "../ui/button";
 
 export const DaoList = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const { connector } = useFrameSDK();
   const { connect } = useConnect();
   const { address, isConnected, chain } = useAccount();
@@ -16,6 +24,8 @@ export const DaoList = () => {
     address,
   });
 
+  if (!mounted) return null;
+
   return (
     <>
       {!isConnected && (
@@ -35,9 +45,12 @@ export const DaoList = () => {
 
           <div className="flex flex-row flex-wrap items-center justify-center gap-2 w-96">
             {isFetched &&
-              daos?.map((dao) => {
+              daos?.map(dao => {
                 return (
-                  <Link href={`/dao/${toHex(chain?.id || "0")}/${dao.id}`}>
+                  <Link
+                    key={dao.id}
+                    href={`/dao/${toHex(chain?.id || "0")}/${dao.id}`}
+                  >
                     <Button size="sm" variant="secondary">
                       {dao.name}
                     </Button>

src/providers/DaoHooksProvider.tsx

@@ -20,11 +20,14 @@ export const DaoHooksProvider = (
   parameters: React.PropsWithChildren<DaoHooksProviderProps>
 ) => {
   const { children, keyConfig } = parameters;
-
   const [config, setConfig] = useState<DaoHooksConfig>(keyConfig);
-
   const value = useMemo(() => ({ config, setConfig }), [config]);
 
+  // Skip provider during SSR if no key is available
+  if (typeof window === "undefined" && !keyConfig.graphKey) {
+    return <>{children}</>;
+  }
+
   return (
     <DaoHooksContext.Provider value={value}>
       {children}

src/providers/Providers.tsx

@@ -1,22 +1,22 @@
 "use client";
 
+import farcasterFrame from "@farcaster/frame-wagmi-connector";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createConfig, http, WagmiProvider } from "wagmi";
 import {
+  arbitrum,
   base,
-  sepolia,
-  mainnet,
-  polygon,
   gnosis,
+  mainnet,
   optimism,
-  arbitrum,
+  polygon,
+  sepolia,
 } from "wagmi/chains";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import farcasterFrame from "@farcaster/frame-wagmi-connector";
 
 import { injected } from "wagmi/connectors";
-import { FrameSDKProvider } from "./FramesSDKProvider";
-import { DaoRecordProvider } from "./DaoRecordProvider";
 import { DaoHooksProvider } from "./DaoHooksProvider";
+import { DaoRecordProvider } from "./DaoRecordProvider";
+import { FrameSDKProvider } from "./FramesSDKProvider";
 
 // import { AuthedPrefetchesProvider } from "./AuthedPrefetchesProvider";
 

wrangler.toml

@@ -1,4 +1,9 @@
 name = "farcastle-proposals-frame"
 compatibility_date = "2024-07-29"
 compatibility_flags = ["nodejs_compat"]
-pages_build_output_dir = ".vercel/output/static"
+pages_build_output_dir = ".vercel/output/static"
+
+[vars]
+NEXT_PUBLIC_GRAPH_KEY = ""
+NEXT_PUBLIC_DAO_ID = ""
+NEXT_PUBLIC_URL = ""