Merge pull request #67 from HausDAO/deeplinking

more dynamic launch meta and fixes proposal type

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

@@ -1,26 +1,28 @@
 import { Metadata } from "next";
 import Proposal from "./proposal";
+import { FORM_CONFIGS } from "@/lib/form-configs";
 
 const appUrl = process.env.NEXT_PUBLIC_URL;
 
-export const revalidate = 300;
-export const runtime = "edge";
-
 type Props = {
   params: Promise<{ chainid: string; daoid: string; proposaltype: string }>;
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { chainid, daoid, proposaltype } = await params;
 
+  const proposalTitle = FORM_CONFIGS[proposaltype]
+    ? `Make ${FORM_CONFIGS[proposaltype].title} Proposal`
+    : "Make Proposal";
+
   const frame = {
     version: "next",
-    imageUrl: `${appUrl}/opengraph-image`,
+    imageUrl: `${appUrl}/image.png`,
     button: {
-      title: "Launch",
+      title: proposalTitle,
       action: {
         type: "launch_frame",
-        name: "Farcastle DAO Proposals",
+        name: "Farcastle Proposals",
         url: `${appUrl}/dao/${chainid}/${daoid}/${proposaltype}`,
         splashImageUrl: `${appUrl}/splash.png`,
         splashBackgroundColor: "#17151F",

src/app/dao/[chainid]/[daoid]/opengraph-image.tsx

@@ -0,0 +1,46 @@
+import { getGraphUrl } from "@/lib/endpoints";
+import { FIND_DAO_LITE } from "@/lib/graph-queries";
+import { DaoItem } from "@/lib/types";
+import { GraphQLClient } from "graphql-request";
+import { ImageResponse } from "next/og";
+
+export const alt = "Farcastle Proposals";
+export const size = {
+  width: 600,
+  height: 400,
+};
+
+export const contentType = "image/png";
+
+export default async function Image({
+  params,
+}: {
+  params: { chainid: string; daoid: string };
+}) {
+  const { chainid, daoid } = await params;
+
+  const dhUrl = getGraphUrl({
+    chainid,
+    graphKey: process.env.NEXT_PUBLIC_GRAPH_KEY || "",
+    subgraphKey: "DAOHAUS",
+  });
+  const graphQLClient = new GraphQLClient(dhUrl);
+  const daores = (await graphQLClient.request(FIND_DAO_LITE, { daoid })) as {
+    dao: DaoItem;
+  };
+
+  const frameText = daores?.dao?.name
+    ? `Make ${daores.dao.name} Proposal`
+    : `Make Proposal`;
+
+  return new ImageResponse(
+    (
+      <div tw="h-full w-full flex flex-col justify-center items-center relative text-[#00B1CC] bg-[#341A34]">
+        <h1 tw="text-4xl">{frameText}</h1>
+      </div>
+    ),
+    {
+      ...size,
+    }
+  );
+}

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

@@ -2,47 +2,45 @@ import { Card } from "@/components/ui/card";
 import { Metadata } from "next";
 import DaoHome from "./dao-home";
 
+const appUrl = process.env.NEXT_PUBLIC_URL;
+
 type Props = {
   params: Promise<{ chainid: string; daoid: string }>;
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  console.log("meta params", params);
-
   const { chainid, daoid } = await params;
 
   const frame = {
     version: "next",
-    imageUrl: `https://proposals.farcastle.net/image.png`,
+    imageUrl: `${appUrl}/opengraph-image`,
     button: {
-      title: "Make Proposal (DAO)",
+      title: "Make Proposal",
       action: {
         type: "launch_frame",
-        name: "Proposals (DAO)",
-        url: `https://proposals.farcastle.net/dao/${chainid}/${daoid}`,
-        iconImageUrl: `https://proposals.farcastle.net/icon.png`,
-        splashImageUrl: `https://proposals.farcastle.net/splash.png`,
+        name: "Proposals",
+        url: `${appUrl}/dao/${chainid}/${daoid}`,
+        iconImageUrl: `${appUrl}/icon.png`,
+        splashImageUrl: `${appUrl}/splash.png`,
         splashBackgroundColor: "#341A34",
       },
     },
   };
   return {
-    metadataBase: new URL("https://proposals.farcastle.net"),
-    title: "Proposals (DAO)",
+    metadataBase: new URL(`${appUrl}`),
+    title: "Proposals",
     openGraph: {
-      title: "Farcastle Proposals (DAO)",
+      title: "Farcastle Proposals",
       description: "the actions of organizations",
-      images: `https://proposals.farcastle.net/image.png`,
+      images: `${appUrl}/image.png`,
     },
     other: {
       "fc:frame": JSON.stringify(frame),
     },
   };
 }
 
-export default function Page({ params }: Props) {
-  console.log("page params", params);
-
+export default function Page() {
   return (
     <div className="w-full h-full pb-4 px-4">
       <Card className="flex flex-col items-center pt-4 pb-8 rounded-none">

src/app/layout.tsx

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

src/lib/graph-queries.ts

@@ -204,6 +204,15 @@ export const FIND_DAO = gql`
   }
 `;
 
+export const FIND_DAO_LITE = gql`
+  query dao($daoid: String!) {
+    dao(id: $daoid) {
+      id
+      name
+    }
+  }
+`;
+
 export const LIST_ALL_DAOS = gql`
   query dao(
     $skip: Int!