From e830233e6301f7285a9afbf4f8298a85cdc3167c Mon Sep 17 00:00:00 2001
From: Ishaan Shah <70190533+ishaan812@users.noreply.github.com>
Date: Wed, 30 Oct 2024 03:26:51 +0530
Subject: [PATCH] editor bug-fixes

---
 packages/nextjs/app/api/frame/[id]/route.ts   |  1 -
 .../nextjs/app/api/frog/[...routes]/route.tsx | 38 +++++++-----
 packages/nextjs/app/api/journey/route.ts      | 10 ++--
 packages/nextjs/app/dashboard/layout.tsx      | 12 ++--
 packages/nextjs/app/dashboard/page.tsx        | 49 ++++++++-------
 packages/nextjs/components/ButtonEditor.tsx   | 55 ++++++++++-------
 packages/nextjs/components/FrameRenderer.tsx  | 59 ++++++++++++++-----
 packages/nextjs/constants/index.ts            |  2 +
 8 files changed, 142 insertions(+), 84 deletions(-)

diff --git a/packages/nextjs/app/api/frame/[id]/route.ts b/packages/nextjs/app/api/frame/[id]/route.ts
index 9d8a5be..f158a22 100644
--- a/packages/nextjs/app/api/frame/[id]/route.ts
+++ b/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;
diff --git a/packages/nextjs/app/api/frog/[...routes]/route.tsx b/packages/nextjs/app/api/frog/[...routes]/route.tsx
index 84fd369..04d6fe4 100644
--- a/packages/nextjs/app/api/frog/[...routes]/route.tsx
+++ b/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 });
diff --git a/packages/nextjs/app/api/journey/route.ts b/packages/nextjs/app/api/journey/route.ts
index 063dec5..ea15e55 100644
--- a/packages/nextjs/app/api/journey/route.ts
+++ b/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);
 }
 
diff --git a/packages/nextjs/app/dashboard/layout.tsx b/packages/nextjs/app/dashboard/layout.tsx
index 0987b97..c64ce16 100644
--- a/packages/nextjs/app/dashboard/layout.tsx
+++ b/packages/nextjs/app/dashboard/layout.tsx
@@ -21,12 +21,12 @@ const DashboardLayout = ({ children }: LayoutProps) => {
     },
   });
 
-  useEffect(() => {
-    if (!address) {
-      notification.error(`You need to connect your wallet to access this page`);
-      redirect("/");
-    }
-  }, [address]);
+  // useEffect(() => {
+  //   if (!address) {
+  //     notification.error(`You need to connect your wallet to access this page`);
+  //     redirect("/");
+  //   }
+  // }, [address]);
   const dehydratedState = dehydrate(queryClient);
   return <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>;
 };
diff --git a/packages/nextjs/app/dashboard/page.tsx b/packages/nextjs/app/dashboard/page.tsx
index 8501136..3c9dee2 100644
--- a/packages/nextjs/app/dashboard/page.tsx
+++ b/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,11 +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-purple-300">No frames yet</h3>
-          <p className="mt-2 text-sm text-purple-200">
-            Get started by creating your first frame or 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>
     );
@@ -38,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-purple-300">My Frames</h2>
+        <h2 className="text-2xl font-bold text-purple-300">My Frame Journeys</h2>
         {frames.length > 4 && (
           <Button
             variant="outline"
@@ -124,27 +123,27 @@ 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) {
-    return (
-      <div className="flex h-[calc(100vh-4rem)] items-center justify-center bg-gradient-to-br from-gray-900 via-purple-900 to-black">
-        <Card className="w-full max-w-md bg-gray-800 border-purple-500">
-          <CardContent className="flex flex-col items-center justify-center p-6 text-center">
-            <div className="rounded-full bg-purple-900 p-3">
-              <Loader2 className="h-6 w-6 animate-spin text-purple-300" />
-            </div>
-            <h3 className="mt-4 text-lg font-semibold text-purple-300">Connecting Wallet</h3>
-            <p className="mt-2 text-sm text-purple-200">Please connect your wallet to view your dashboard.</p>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
+  console.log(myFrames.data);
+  // TODO: Uncomment
+  // if (!address) {
+  //   return (
+  //     <div className="flex h-[calc(100vh-4rem)] items-center justify-center bg-gradient-to-br from-gray-900 via-purple-900 to-black">
+  //       <Card className="w-full max-w-md bg-gray-800 border-purple-500">
+  //         <CardContent className="flex flex-col items-center justify-center p-6 text-center">
+  //           <div className="rounded-full bg-purple-900 p-3">
+  //             <Loader2 className="h-6 w-6 animate-spin text-purple-300" />
+  //           </div>
+  //           <h3 className="mt-4 text-lg font-semibold text-purple-300">Connecting Wallet</h3>
+  //           <p className="mt-2 text-sm text-purple-200">Please connect your wallet to view your dashboard.</p>
+  //         </CardContent>
+  //       </Card>
+  //     </div>
+  //   );
+  // }
 
   return (
     <ScrollArea className="h-[calc(100vh-4rem)] bg-gradient-to-br from-gray-900 via-purple-900 to-black">
@@ -155,7 +154,7 @@ export default function Dashboard() {
               value="my-frames"
               className="p-2 text-purple-200 data-[state=active]:bg-purple-700 data-[state=active]:text-white"
             >
-              My Frames
+              My Frame Journeys
             </TabsTrigger>
             <TabsTrigger
               value="templates"
diff --git a/packages/nextjs/components/ButtonEditor.tsx b/packages/nextjs/components/ButtonEditor.tsx
index 77ab69e..5d2e43b 100644
--- a/packages/nextjs/components/ButtonEditor.tsx
+++ b/packages/nextjs/components/ButtonEditor.tsx
@@ -80,23 +80,27 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
           <TextField
             id="buttonValue"
             size="small"
-            value={button.props.value as string}
+            value={button.props?.value || ""} // Default to an empty string if no value
             onChange={e => {
-              onSave({ ...button, props: { ...button.props, value: e.target.value as string } });
+              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,
+                },
               })
             }
           >
@@ -119,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">
@@ -134,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">
@@ -149,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,
@@ -159,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">
@@ -167,7 +174,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({
@@ -182,13 +189,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({
@@ -206,7 +214,8 @@ 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
@@ -214,7 +223,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
               <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 });
@@ -226,31 +235,34 @@ 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
@@ -258,7 +270,7 @@ const ButtonEditor = ({ button, onSave, onDelete }: ButtonEditorProps) => {
               <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 });
@@ -270,35 +282,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 });
                 }}
diff --git a/packages/nextjs/components/FrameRenderer.tsx b/packages/nextjs/components/FrameRenderer.tsx
index 4bfa14c..f4e8e31 100644
--- a/packages/nextjs/components/FrameRenderer.tsx
+++ b/packages/nextjs/components/FrameRenderer.tsx
@@ -46,6 +46,7 @@ const theme = {
 function FrameRender() {
   const { currentFrame, buttons, textInput, currentFrameId, productID } = useProductJourney();
   const [imageLoaded, setImageLoaded] = useState(false); // State to track image loading
+  const [imageError, setImageError] = useState(false);
 
   if (!currentFrame) return null;
 
@@ -55,21 +56,51 @@ function FrameRender() {
       <div className={theme.ImageContainer.className} style={theme.ImageContainer.style}>
         {!imageLoaded && <div className={theme.Skeleton.className} />} {/* Show skeleton while loading */}
         {/* Rendering the image based on its type using the components defined in the theme */}
-        {currentFrame.image.type === "html" && (
-          <img
-            src={`${APP_URL}/api/frog/${productID}/${currentFrameId}/img`}
-            alt="Frame HTML Image"
+        {!imageError ? (
+          // Display the image based on its type, and show error fallback on failure
+          <>
+            {currentFrame.image.type === "html" && (
+              <img
+                src={`${APP_URL}/api/frog/${productID}/${currentFrameId}/img`}
+                alt="Frame HTML Image"
+                className={theme.Image.className}
+                onLoad={() => setImageLoaded(true)} // Set loaded state on image load
+                onError={() => setImageError(true)} // Set error state on image load failure
+              />
+            )}
+            {currentFrame.image.type === "src" && (
+              <img
+                src={currentFrame.image.src}
+                alt="Frame image"
+                className={theme.Image.className}
+                onLoad={() => setImageLoaded(true)}
+              />
+            )}
+          </>
+        ) : (
+          // Render fallback content when image fails to load
+          <div
             className={theme.Image.className}
-            onLoad={() => setImageLoaded(true)} // Set loaded state on image load
-          />
-        )}
-        {currentFrame.image.type === "src" && (
-          <img
-            src={currentFrame.image.src}
-            alt="Frame image"
-            className={theme.Image.className}
-            onLoad={() => setImageLoaded(true)} // Set loaded state on image load
-          />
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              textAlign: "center",
+              padding: "20px", // Optional for spacing
+              wordWrap: "break-word", // Ensures long text wraps within the container
+            }}
+          >
+            <p>
+              Image failed to load since error in HTML
+              <br />
+              <br />
+              <br />
+              - if using HTML try using a Satori Playground to make sure image renders correct <br />
+              - Make sure if a div has more than two child elements use display: flex <br />
+              - Make sure your css supports the satori standards <br />
+            </p>
+          </div>
         )}
       </div>
 
diff --git a/packages/nextjs/constants/index.ts b/packages/nextjs/constants/index.ts
index 154372f..f7a1090 100644
--- a/packages/nextjs/constants/index.ts
+++ b/packages/nextjs/constants/index.ts
@@ -607,3 +607,5 @@ export const ABI: Abi = [
 
 export const contract = "0xf8dB9d751088FAb0f7a57b973b5289A5fDA8dB24";
 export const myAddress = "0x4CbEe7aD42d33e9D3B41e8b6FAcA2f6f173C8A94";
+
+export const htmlErrorImageTemplate = `<div style="font-size:36px;background-color:light-red;color:#fff;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:2px solid #ccc;border-radius:10px;padding:20px;box-shadow:0 4px 20px rgba(0,0,0,.1)">Error<div style=display:flex;font-size:20px;margin-top:40px>$$ErrorString$$</div></div>`;