From 5b971e0093220825a0a66548aa9a53e5917c0ab4 Mon Sep 17 00:00:00 2001
From: Leonardo Zizzamia <leonardo.zizzamia@gmail.com>
Date: Tue, 6 Feb 2024 16:58:16 -0800
Subject: [PATCH] feat: added new `mint` and `link` Frame spec

---
 src/components/FrameMetadata.tsx | 11 ++++++++++-
 src/core/getFrameHtmlResponse.ts |  3 +++
 src/core/getFrameMetadata.ts     |  3 +++
 src/core/types.ts                |  3 ++-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx
index e8aba24fbc..893b685442 100644
--- a/src/components/FrameMetadata.tsx
+++ b/src/components/FrameMetadata.tsx
@@ -22,6 +22,11 @@ type FrameMetadataReact = FrameMetadataType & {
  *       label: 'Redirect to cute dog pictures',
  *       action: 'post_redirect',
  *     },
+ *     {
+ *      label: 'Mint',
+ *      action: 'mint',
+ *      target: 'https://zizzamia.xyz/api/frame/mint',
+ *    },
  *   ]}
  *   image="https://zizzamia.xyz/park-1.png"
  *   input={{
@@ -32,11 +37,11 @@ type FrameMetadataReact = FrameMetadataType & {
  * ```
  *
  * @param {FrameMetadataReact} props - The metadata for the frame.
+ * @param {Array<{ label: string, action?: string }>} props.buttons - The buttons.
  * @param {string} props.image - The image URL.
  * @param {string} props.input - The input text.
  * @param {string} props.post_url - The post URL.
  * @param {number} props.refresh_period - The refresh period.
- * @param {Array<{ label: string, action?: string }>} props.buttons - The buttons.
  * @param {React.ComponentType<any> | undefined} props.wrapper - The wrapper component meta tags are rendered in.
  * @returns {React.ReactElement} The FrameMetadata component.
  */
@@ -61,6 +66,10 @@ export function FrameMetadata({
             {!!button.action && (
               <meta name={`fc:frame:button:${index + 1}:action`} content={button.action} />
             )}
+            {!!button.target && (
+              <meta name={`fc:frame:button:${index + 1}:target`} content={button.target} />
+            )
+            }
           </>
         );
       })}
diff --git a/src/core/getFrameHtmlResponse.ts b/src/core/getFrameHtmlResponse.ts
index 6c6ba1909b..bea97e5cb7 100644
--- a/src/core/getFrameHtmlResponse.ts
+++ b/src/core/getFrameHtmlResponse.ts
@@ -32,6 +32,9 @@ function getFrameHtmlResponse({
         if (button.action) {
           buttonHtml += `<meta property="fc:frame:button:${index + 1}:action" content="${button.action}" />`;
         }
+        if (button.target) {
+          buttonHtml += `<meta property="fc:frame:button:${index + 1}:target" content="${button.target}" />`;
+        }
         return buttonHtml;
       })
       .join('');
diff --git a/src/core/getFrameMetadata.ts b/src/core/getFrameMetadata.ts
index bda1585d40..2f69765a6d 100644
--- a/src/core/getFrameMetadata.ts
+++ b/src/core/getFrameMetadata.ts
@@ -29,6 +29,9 @@ export const getFrameMetadata = function ({
       if (button.action) {
         metadata[`fc:frame:button:${index + 1}:action`] = button.action;
       }
+      if (button.target) {
+        metadata[`fc:frame:button:${index + 1}:target`] = button.target;
+      }
     });
   }
   if (post_url) {
diff --git a/src/core/types.ts b/src/core/types.ts
index 3b5dbf6cbf..3903a914e1 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -69,8 +69,9 @@ export function convertToFrame(json: any) {
 }
 
 export type FrameButtonMetadata = {
+  action?: 'link' | 'mint' | 'post' | 'post_redirect';
   label: string;
-  action?: 'post' | 'post_redirect';
+  target?: string;
 };
 
 export type FrameInputMetadata = {