editor bug-fixes

packages/nextjs/app/api/frame/[id]/route.ts

@@ -24,7 +24,6 @@ export async function PUT(req: NextRequest, { params }: { params: { id: string }
   return new NextResponse(JSON.stringify(frame));
 }
 
-// delete frame
 export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
   await connectDB();
   const frame_id = params.id;

packages/nextjs/app/api/frog/[...routes]/route.tsx

@@ -1,10 +1,11 @@
 /** @jsxImportSource frog/jsx */
+import { error } from "console";
 import { Button, Frog, TextInput, parseEther } from "frog";
 import { FrameData } from "frog/_lib/types/frame";
 import { devtools } from "frog/dev";
 import { handle } from "frog/next";
 import { serveStatic } from "frog/serve-static";
-import { ABI } from "~~/constants";
+import { ABI, htmlErrorImageTemplate } from "~~/constants";
 import Analytics from "~~/model/analytics";
 import { getFrameAtServer } from "~~/services/frames";
 import { Frame } from "~~/types/commontypes";
@@ -154,19 +155,28 @@ app.image("/:journeyId/:frameId/img", async c => {
   if (!match || match.length < 3) {
     throw new Error("Invalid journey or frame ID");
   }
-
-  const [, , frameId] = match;
-  const data: Frame = await getFrameAtServer(frameId);
-  const frame = makeFrogFrame(data.frameJson);
-  const parsedHTML = parseHtmlToJsxNode(frame.image.content as string);
-  return c.res({
-    headers: {
-      "Cache-Control": "max-age=0",
-      "cache-control": "max-age=0",
-    },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    image: parsedHTML as any,
-  });
+  try {
+    const [, , frameId] = match;
+    const data: Frame = await getFrameAtServer(frameId);
+    const frame = makeFrogFrame(data.frameJson);
+    const parsedHTML = parseHtmlToJsxNode(frame.image.content as string);
+    const res = c.res({
+      headers: {
+        "Cache-Control": "max-age=0",
+        "cache-control": "max-age=0",
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      image: parsedHTML as any,
+    });
+    return res;
+  } catch (error) {
+    console.log("Error encountered:", error);
+    const htmlErrorImage = htmlErrorImageTemplate.replace("$$ErrorString$$", error.toString());
+    const errorImage = parseHtmlToJsxNode(htmlErrorImage);
+    return c.res({
+      image: errorImage as any,
+    });
+  }
 });
 
 devtools(app, { serveStatic });

packages/nextjs/app/api/journey/route.ts

@@ -3,16 +3,18 @@ import Journey from "~~/model/journey";
 import connectDB from "~~/services/connectDB";
 
 export async function GET(req: NextRequest) {
-  const { searchParams } = new URL(req.url);
-  const walletAddress = searchParams.get("walletAddress") as string;
+  // const { searchParams } = new URL(req.url);
+  // const walletAddress = searchParams.get("walletAddress") as string;
 
-  console.log(walletAddress);
+  // console.log(walletAddress);
   await connectDB();
 
   const journeys = await Journey.find({
-    walletAddress,
+    // TODO: uncomment
+    // walletAddress,
   });
 
+  console.log("yabba", journeys);
   return NextResponse.json(journeys);
 }
 

packages/nextjs/app/dashboard/page.tsx

@@ -15,6 +15,7 @@ import { Skeleton } from "~~/~/components/ui/skeleton";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~~/~/components/ui/tabs";
 
 const MyFrames = ({ frames }: { frames: Journey[] }) => {
+  console.log("Chammma", frames)
   const [showAll, setShowAll] = useState(false);
   const displayedFrames = showAll ? frames : frames.slice(0, 4);
 
@@ -25,9 +26,9 @@ const MyFrames = ({ frames }: { frames: Journey[] }) => {
           <div className="rounded-full bg-purple-900 p-3">
             <Plus className="h-6 w-6 text-purple-300" />
           </div>
-          <h3 className="mt-4 text-lg font-semibold text-black">No frames yet</h3>
-          <p className="mt-2 text-sm text-purple-200">Pick a system template</p>
-          <Button className="mt-4 bg-purple-600 hover:bg-purple-700 text-white">Create Frame</Button>
+          <h3 className="mt-4 text-lg font-semibold text-purple-300">No journeys yet</h3>
+          <p className="mt-2 text-sm text-purple-200">Get started by using a precreated template ⚡</p>
+          <Button className="mt-4 bg-purple-600 hover:bg-purple-700 text-white">Create Frame Journey</Button>
         </CardContent>
       </Card>
     );
@@ -36,7 +37,7 @@ const MyFrames = ({ frames }: { frames: Journey[] }) => {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-black">My Frames</h2>
+        <h2 className="text-2xl font-bold text-purple-300">My Frame Journeys</h2>
         {frames.length > 4 && (
           <Button
             variant="outline"
@@ -117,10 +118,9 @@ export default function Dashboard() {
   const myFrames = useQuery({
     queryKey: ["myFrames", address],
     queryFn: async () => {
-      if (!address) throw new Error("No address provided");
+      // if (!address) throw new Error("No address provided");
       return getAllTemplates(address as `0x${string}`);
     },
-    enabled: !!address,
   });
 
   if (!address) {
@@ -148,7 +148,7 @@ export default function Dashboard() {
               value="my-frames"
               className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 transition-all data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm"
             >
-              My Frames
+              My Frame Journeys
             </TabsTrigger>
             <TabsTrigger
               value="templates"

packages/nextjs/components/ButtonEditor.tsx

@@ -74,18 +74,33 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
       </Select>
       {button.type === "Button" && (
         <>
+          <label htmlFor="buttonType" className="block text-sm font-medium text-gray-700 mb-1">
+            Button Value
+          </label>
+          <TextField
+            id="buttonValue"
+            size="small"
+            value={button.props?.value || ""} // Default to an empty string if no value
+            onChange={e => {
+              onSave({ ...button, props: { ...button.props, value: e.target.value } });
+            }}
+          />
+
           <label htmlFor="buttonType" className="block text-sm font-medium text-gray-700 mb-1">
             Next Frame
           </label>
           <Select
             id="post"
             size="small"
-            value={removeUrl(button.props.action as string, productID)}
+            value={removeUrl(button.props?.action || "", productID)} // Default to an empty string if no action
             variant="outlined"
             onChange={e =>
               onSave({
                 ...button,
-                props: { ...button.props, action: `${APP_URL}/api/frog/${productID}/` + e.target.value },
+                props: {
+                  ...button.props,
+                  action: `${APP_URL}/api/frog/${productID}/` + e.target.value,
+                },
               })
             }
           >
@@ -108,13 +123,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonHref"
             size="small"
-            value={button.props.href as string}
+            value={button.props?.href || ""} // Default to empty string if href is undefined
             onChange={e => {
-              onSave({ ...button, props: { ...button.props, href: e.target.value as string } });
+              onSave({ ...button, props: { ...button.props, href: e.target.value } });
             }}
           />
         </>
       )}
+
       {button.type === "Button.Mint" && (
         <>
           <label htmlFor="buttonMint" className="block text-sm font-medium text-gray-700 mb-1">
@@ -123,13 +139,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonMint"
             size="small"
-            value={button.props.target as string}
+            value={button.props?.target || ""} // Default to empty string if target is undefined
             onChange={e => {
-              onSave({ ...button, props: { ...button.props, target: e.target.value as string } });
+              onSave({ ...button, props: { ...button.props, target: e.target.value } });
             }}
           />
         </>
       )}
+
       {button.type === "Button.Location" && (
         <>
           <label htmlFor="buttonLocation" className="block text-sm font-medium text-gray-700 mb-1">
@@ -138,7 +155,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonLocation"
             size="small"
-            value={button.props.location as string}
+            value={button.props?.location || ""} // Default to empty string if location is undefined
             onChange={e =>
               onSave({
                 ...button,
@@ -148,6 +165,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           />
         </>
       )}
+
       {button.type === "Button.Transaction" && (
         <>
           <label htmlFor="buttonTx" className="block text-sm font-medium text-gray-700 mb-1">
@@ -160,7 +178,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <Select
             id="post"
             size="small"
-            value={removeTxUrl(button.props.target as string, productID, frame?._id)}
+            value={removeTxUrl(button.props?.target || "", productID, frame?._id)} // Default to empty string if target is undefined
             variant="outlined"
             onChange={e =>
               onSave({
@@ -175,13 +193,14 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
             <MenuItem value="send-contract">Contract interaction</MenuItem>
             <MenuItem value="send-ether">P2P transfer</MenuItem>
           </Select>
+
           <label htmlFor="buttonTx" className="block text-sm font-medium text-gray-700 mb-1">
             Tx Success
           </label>
           <Select
             id="post"
             size="small"
-            value={removeUrl(button.props.action as string, productID)}
+            value={removeUrl(button.props?.action || "", productID)} // Default to empty string if action is undefined
             variant="outlined"
             onChange={e =>
               onSave({
@@ -199,15 +218,16 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                 ),
             )}
           </Select>
-          {button.props.target?.includes("send-ether") && (
+
+          {button.props?.target?.includes("send-ether") && (
             <>
               <label htmlFor="chainId" className="block text-sm font-medium text-gray-700 mb-1">
                 Chain ID
               </label>
               <Select
                 id="chainId"
                 size="small"
-                value=""
+                value={frameTxConfig.chainId || ""} // Default to empty string for chain ID if undefined
                 variant="outlined"
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, chainId: e.target.value });
@@ -219,39 +239,42 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                   </MenuItem>
                 ))}
               </Select>
+
               <label htmlFor="toAddress" className="block text-sm font-medium text-gray-700 mb-1">
                 To Address
               </label>
               <TextField
                 id="toAddress"
                 size="small"
-                value=""
+                value={frameTxConfig.toAddress || ""} // Default to empty string for toAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, toAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
                 Value
               </label>
               <TextField
                 id="value"
                 size="small"
-                value=""
+                value={frameTxConfig.value || ""} // Default to empty string for value if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, value: e.target.value });
                 }}
               />
             </>
           )}
-          {button.props.target?.includes("send-contract") && (
+
+          {button.props?.target?.includes("send-contract") && (
             <>
               <label htmlFor="chainId" className="block text-sm font-medium text-gray-700 mb-1">
                 Chain ID
               </label>
               <Select
                 id="chainId"
                 size="small"
-                value=""
+                value={frameTxConfig.chainId || ""} // Default to empty string for chain ID if undefined
                 variant="outlined"
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, chainId: e.target.value });
@@ -263,35 +286,38 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
                   </MenuItem>
                 ))}
               </Select>
+
               <label htmlFor="toAddress" className="block text-sm font-medium text-gray-700 mb-1">
                 To Address
               </label>
               <TextField
                 id="toAddress"
                 size="small"
-                value=""
+                value={frameTxConfig.toAddress || ""} // Default to empty string for toAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, toAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="value" className="block text-sm font-medium text-gray-700 mb-1">
                 Contract Address (fetch ABI)
               </label>
               <TextField
                 id="value"
                 size="small"
-                value=""
+                value={frameTxConfig.contractAddress || ""} // Default to empty string for contractAddress if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, contractAddress: e.target.value });
                 }}
               />
+
               <label htmlFor="functionName" className="block text-sm font-medium text-gray-700 mb-1">
                 Function Name
               </label>
               <TextField
                 id="functionName"
                 size="small"
-                value=""
+                value={frameTxConfig.functionName || ""} // Default to empty string for functionName if undefined
                 onChange={e => {
                   setFrameTxConfig({ ...frameTxConfig, functionName: e.target.value });
                 }}