From 95492d27eae21e2922eb8722c4f4bc54eddf60ea Mon Sep 17 00:00:00 2001
From: Christopher Nascone <chris@nasc.one>
Date: Wed, 6 Mar 2024 21:18:19 -0500
Subject: [PATCH] fix: state handling

---
 framegear/components/Frame/Frame.tsx          | 13 ++++++-------
 framegear/utils/frameResultToFrameMetadata.ts |  8 ++++----
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
index 6ed8b5356f..7d426acd28 100644
--- a/framegear/components/Frame/Frame.tsx
+++ b/framegear/components/Frame/Frame.tsx
@@ -15,10 +15,6 @@ export function Frame() {
 
   const latestFrame = results[results.length - 1];
 
-  if (!latestFrame.isValid) {
-    return <ErrorFrame />;
-  }
-
   return <ValidFrame metadata={latestFrame.metadata} />;
 }
 
@@ -58,6 +54,7 @@ function ValidFrame({ metadata }: { metadata: FrameMetadataWithImageObject }) {
                 key={button.label}
                 index={index + 1}
                 button={button}
+                state={metadata.state}
               >
                 {button.label}
               </FrameButton>
@@ -81,7 +78,7 @@ function PlaceholderFrame() {
     <div className="flex flex-col">
       <div className="bg-farcaster flex aspect-[1.91/1] w-full rounded-t-xl"></div>
       <div className="bg-button-gutter-light dark:bg-content-light flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
-        <FrameButton index={1} inputText="">
+        <FrameButton state={{}} index={1} inputText="">
           Get Started
         </FrameButton>
       </div>
@@ -94,10 +91,12 @@ function FrameButton({
   button,
   index,
   inputText,
+  state,
 }: PropsWithChildren<{
   button?: NonNullable<FrameMetadataWithImageObject['buttons']>[0];
   index: number;
   inputText: string;
+  state: any;
 }>) {
   const { openModal } = useRedirectModal();
   const [isLoading, setIsLoading] = useState(false);
@@ -110,6 +109,7 @@ function FrameButton({
         const result = await postFrame({
           buttonIndex: index,
           url: button.target!,
+          state: JSON.stringify(state),
           // TODO: make these user-input-driven
           castId: {
             fid: 0,
@@ -120,7 +120,6 @@ function FrameButton({
           messageHash: '0xthisisnotreal',
           network: 0,
           timestamp: 0,
-          state: '',
         });
         // TODO: handle when result is not defined
         if (result) {
@@ -140,7 +139,7 @@ function FrameButton({
       openModal(onConfirm);
     }
     // TODO: implement other actions (mint, etc.)
-  }, [button?.action, button?.target, index, inputText, openModal, setResults]);
+  }, [button, index, inputText, openModal, setResults, state]);
 
   const buttonIcon = useMemo(() => {
     switch (button?.action) {
diff --git a/framegear/utils/frameResultToFrameMetadata.ts b/framegear/utils/frameResultToFrameMetadata.ts
index 5a5d1d15f5..0389dad84c 100644
--- a/framegear/utils/frameResultToFrameMetadata.ts
+++ b/framegear/utils/frameResultToFrameMetadata.ts
@@ -7,12 +7,13 @@ export type FrameMetadataWithImageObject = FrameMetadataType & {
 export function frameResultToFrameMetadata(
   result: Record<string, string>,
 ): FrameMetadataWithImageObject {
+  const postUrl = result['fc:frame:post_url'];
   const buttons = [1, 2, 3, 4].map((idx) =>
     result[`fc:frame:button:${idx}`]
       ? {
-          action: result[`fc:frame:button:${idx}:action`],
+          action: result[`fc:frame:button:${idx}:action`] || 'post',
           label: result[`fc:frame:button:${idx}`],
-          target: result[`fc:frame:button:${idx}:target`],
+          target: result[`fc:frame:button:${idx}:target`] || postUrl,
         }
       : undefined,
   );
@@ -20,11 +21,10 @@ export function frameResultToFrameMetadata(
   const imageAspectRatio = result['fc:frame:image:aspect_ratio'];
   const inputText = result['fc:frame:input'];
   const input = inputText ? { text: inputText } : undefined;
-  const postUrl = result['fc:frame:post_url'];
   const rawState = result['fc:frame:state'];
   const rawRefreshPeriod = result['fc:frame:refresh_period'];
   const refreshPeriod = rawRefreshPeriod ? parseInt(rawRefreshPeriod, 10) : undefined;
-  const state = rawState ? JSON.parse(result['fc:frame:state']) : undefined;
+  const state = rawState ? JSON.parse(decodeURIComponent(result['fc:frame:state'])) : undefined;
 
   return {
     buttons: buttons as any,