From 70c3adbd09fc0abd2cf72093165805f4309cebb1 Mon Sep 17 00:00:00 2001
From: Siddesh <siddeshsankhya@gmail.com>
Date: Fri, 5 Apr 2024 17:11:13 +0530
Subject: [PATCH] feat(uiweb): handle different frame spec

---
 .../chat/ChatViewBubble/ChatViewBubble.tsx    | 185 ++++++++-----
 .../lib/components/chat/reusables/Button.tsx  |   3 +
 packages/uiweb/src/lib/helpers/chat/pgp.ts    |   6 +-
 packages/uiweb/src/lib/types/index.ts         |  27 +-
 .../src/lib/utilities/getFormattedMetadata.ts | 242 ++++++++++++------
 5 files changed, 307 insertions(+), 156 deletions(-)

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
index 7f25a877b..6b2fa5d0c 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx
@@ -17,7 +17,12 @@ import { ChatDataContext } from '../../../context';
 import { useAccount, useChatData } from '../../../hooks';
 import { ThemeContext } from '../theme/ThemeProvider';
 
-import { FileMessageContent, FrameDetails } from '../../../types';
+import {
+  FileMessageContent,
+  FrameButton,
+  FrameDetails,
+  IFrame,
+} from '../../../types';
 import { IMessagePayload, TwitterFeedReturnType } from '../exportedTypes';
 import { allowedNetworks, ENV, FILE_ICON } from '../../../config';
 import {
@@ -142,14 +147,9 @@ const FrameRenderer = ({
     useContext<ChatMainStateContextType>(ChatMainStateContext);
   const frameRenderer = useToast();
   const proxyServer = 'https://cors-m0l8.onrender.com';
-  const [metaTags, setMetaTags] = useState<FrameDetails>({
-    image: '',
-    siteURL: '',
-    postURL: '',
-    buttons: [],
-    input: { name: '', content: '' },
-  });
+  const [FrameData, setFrameData] = useState<IFrame>({} as IFrame);
   const [inputText, setInputText] = useState<undefined | string>(undefined);
+  const [imageLoadingError, setImageLoadingError] = useState<boolean>(false);
   // Fetches the metadata for the URL to fetch the Frame
 
   useEffect(() => {
@@ -165,9 +165,9 @@ const FrameRenderer = ({
 
         const htmlText = await response.text();
 
-        const frameDetails: FrameDetails = getFormattedMetadata(url, htmlText);
+        const frameDetails: IFrame = getFormattedMetadata(url, htmlText);
 
-        setMetaTags(frameDetails);
+        setFrameData(frameDetails);
       } catch (err) {
         console.error('Error fetching meta tags for rendering frame:', err);
       }
@@ -177,11 +177,8 @@ const FrameRenderer = ({
       fetchMetaTags(url);
     }
   }, [url]);
-  const getButtonIconContent = (
-    buttonAction: string,
-    buttonContent: string
-  ) => {
-    switch (buttonAction) {
+  const getButtonIconContent = (button: FrameButton) => {
+    switch (button.action) {
       case 'link':
         return (
           <span
@@ -191,9 +188,14 @@ const FrameRenderer = ({
               gap: '4px',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: '0 4px',
+              width: '90%',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}
           >
-            {buttonContent} <FaLink />
+            <FaLink /> {button.content}
           </span>
         );
 
@@ -206,9 +208,14 @@ const FrameRenderer = ({
               gap: '4px',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: '0 4px',
+              width: '90%',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}
           >
-            {buttonContent} <MdOpenInNew />
+            <MdOpenInNew /> {button.content}
           </span>
         );
       case 'tx':
@@ -220,13 +227,18 @@ const FrameRenderer = ({
               gap: '4px',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: '0 4px',
+              width: '90%',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}
           >
-            {buttonContent} <BsLightning />
+            <BsLightning /> {button.content}
           </span>
         );
 
-      case buttonAction.includes('subscribe') && 'subscribe':
+      case button?.action?.includes('subscribe') && 'subscribe':
         return (
           <span
             style={{
@@ -235,9 +247,14 @@ const FrameRenderer = ({
               gap: '4px',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: '0 4px',
+              width: '90%',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}
           >
-            {buttonContent} <FaBell />
+            <FaBell /> {button.content}
           </span>
         );
       default:
@@ -249,9 +266,14 @@ const FrameRenderer = ({
               gap: '4px',
               alignItems: 'center',
               justifyContent: 'center',
+              padding: '0 4px',
+              width: '100%',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
             }}
           >
-            {buttonContent}
+            {button.content}
           </span>
         );
     }
@@ -346,33 +368,37 @@ const FrameRenderer = ({
   };
 
   // Function to handle button click on a frame button
-  const onButtonClick = async (button: {
-    index: string;
-    action?: string;
-    target?: string;
-  }) => {
-    if (button.action === 'mint') return;
+  const onButtonClick = async (button: FrameButton) => {
+    if (!FrameData.isValidFrame) return;
+    if (button.action === 'mint') {
+      frameRenderer.showMessageToast({
+        toastTitle: 'Error',
+        toastMessage: 'Mint Action is not supported',
+        toastType: 'ERROR',
+        getToastIcon: (size: any) => <MdError size={size} color="red" />,
+      });
+      return;
+    }
     let hash;
 
     const serializedProtoMessage = await toSerialisedHexString({
       url: url,
-      unixTimestamp: Date.now(),
+      unixTimestamp: Date.now().toString(),
       buttonIndex: Number(button.index),
       inputText: inputText ?? 'undefined',
-      state: metaTags.state ?? 'undefined',
+      state: FrameData.frameDetails?.state ?? 'undefined',
       transactionId: hash ?? 'undefined',
       address: account,
       messageId: messageId,
       chatId: window.location.href.split('/').pop() ?? 'null',
       clientProtocol: 'push',
+      env: env,
     });
     const signedMessage = await sign({
       message: serializedProtoMessage,
       signingKey: pgpPrivateKey!,
     });
 
-    console.log(signedMessage);
-
     // If the button action is post_redirect or link, opens the link in a new tab
     if (button.action === 'post_redirect' || button.action === 'link') {
       window.open(button.target!, '_blank');
@@ -404,7 +430,7 @@ const FrameRenderer = ({
             unixTimestamp: Date.now(),
             buttonIndex: Number(button.index),
             inputText: inputText ?? 'undefined',
-            state: metaTags.state ?? 'undefined',
+            state: FrameData.frameDetails?.state ?? 'undefined',
             transactionId: hash ?? 'undefined',
             address: account,
             messageId: messageId,
@@ -425,12 +451,16 @@ const FrameRenderer = ({
     }
 
     // Makes a POST call to the Frame server after the action has been performed
-    const post_url =
-      button.action === 'tx'
-        ? metaTags.postURL
-        : button?.target!.startsWith('http')
-        ? button.target
-        : metaTags.postURL;
+
+    let post_url = button.post_url ?? FrameData.frameDetails?.postURL ?? url;
+
+    if (button.action === 'post') {
+      post_url =
+        button.target ??
+        button.post_url ??
+        FrameData.frameDetails?.postURL ??
+        url;
+    }
     if (!post_url) return;
     const response = await fetch(`${proxyServer}/${post_url}`, {
       method: 'POST',
@@ -445,7 +475,7 @@ const FrameRenderer = ({
           unixTimestamp: Date.now(),
           buttonIndex: Number(button.index),
           inputText: inputText ?? 'undefined',
-          state: metaTags.state ?? 'undefined',
+          state: FrameData.frameDetails?.state ?? 'undefined',
           transactionId: hash ?? 'undefined',
           address: account,
           messageId: messageId,
@@ -460,14 +490,14 @@ const FrameRenderer = ({
 
     const data = await response.text();
 
-    const frameDetails: FrameDetails = getFormattedMetadata(url, data);
+    const frameDetails: IFrame = getFormattedMetadata(url, data);
     setInputText('');
 
-    setMetaTags(frameDetails);
+    setFrameData(frameDetails);
   };
   return (
     <div>
-      {metaTags.image && (
+      {FrameData.isValidFrame && (
         <div
           style={{
             width: '32rem',
@@ -486,22 +516,43 @@ const FrameRenderer = ({
         >
           <a href={url} target="blank">
             <img
-              src={metaTags.image}
-              alt="frame"
+              src={
+                FrameData.frameDetails?.image ?? FrameData.frameDetails?.ogImage
+              }
+              alt="Frame Fallback"
               style={{
                 borderRadius: '12px 12px 0px 0px',
                 width: '100%',
               }}
+              onError={() => {
+                setImageLoadingError(true);
+              }}
             />
+            {imageLoadingError && (
+              <div
+                style={{
+                  borderRadius: '12px 12px 0px 0px',
+                  width: '100%',
+                  height: '300px', // Set the height to match the image height
+                  backgroundColor: '#f0f0f0', // Background color for the div
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  color: '#333', // Text color for the message
+                }}
+              >
+                Image cannot be loaded
+              </div>
+            )}
           </a>
-          {metaTags?.input?.name && metaTags?.input?.content.length > 0 && (
+          {FrameData.frameDetails?.inputText && (
             <div style={{ width: '95%', margin: 'auto', color: 'black' }}>
               <TextInput
                 onInputChange={(e: any) => {
                   setInputText(e.target.value);
                 }}
                 inputValue={inputText as string}
-                placeholder={metaTags.input.content}
+                placeholder={FrameData.frameDetails?.inputText}
               />
             </div>
           )}
@@ -515,27 +566,31 @@ const FrameRenderer = ({
               margin: 'auto',
             }}
           >
-            {metaTags.buttons.map((button) => (
-              <div
-                style={{
-                  width: '100%',
-                }}
-              >
-                <Button
-                  width="98%"
-                  customStyle={{
-                    maxHeight: '12px',
-                    padding: '12px 6px',
-                  }}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onButtonClick(button);
+            {FrameData.frameDetails &&
+              FrameData.frameDetails.buttons.map((button) => (
+                <div
+                  style={{
+                    width: '100%',
                   }}
                 >
-                  {getButtonIconContent(button.action!, button.content)}
-                </Button>
-              </div>
-            ))}
+                  <Button
+                    width="98%"
+                    customStyle={{
+                      maxHeight: '12px',
+                      padding: '12px 6px',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onButtonClick(button);
+                    }}
+                  >
+                    {getButtonIconContent(button)}
+                  </Button>
+                </div>
+              ))}
           </div>
           <div
             style={{
diff --git a/packages/uiweb/src/lib/components/chat/reusables/Button.tsx b/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
index cc290fe24..b5b3feb0b 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/Button.tsx
@@ -34,6 +34,9 @@ type CustomStyleParamsType = {
   borderRadius?: string;
   height?: string;
   maxHeight?: string;
+  whiteSpace?: string;
+  overflow?: string;
+  textOverflow?: string;
 };
 
 /**
diff --git a/packages/uiweb/src/lib/helpers/chat/pgp.ts b/packages/uiweb/src/lib/helpers/chat/pgp.ts
index 288a890f2..115ff785b 100644
--- a/packages/uiweb/src/lib/helpers/chat/pgp.ts
+++ b/packages/uiweb/src/lib/helpers/chat/pgp.ts
@@ -2,7 +2,7 @@ import * as openpgp from 'openpgp';
 import * as protobuf from 'protobufjs';
 export const toSerialisedHexString = async (data: {
   url: string;
-  unixTimestamp: number;
+  unixTimestamp: string;
   buttonIndex: number;
   inputText: string;
   state: string;
@@ -11,13 +11,14 @@ export const toSerialisedHexString = async (data: {
   messageId: string;
   chatId: string;
   clientProtocol: string;
+  env: string;
 }) => {
   const protoDefinition = `
             syntax = "proto3";
 
             message ChatMessage {
               string url = 1;
-              int64 unixTimestamp = 2;
+              string unixTimestamp = 2;
               int32 buttonIndex = 3;
               string inputText = 4;
               string state = 5;
@@ -26,6 +27,7 @@ export const toSerialisedHexString = async (data: {
               string messageId = 8;
               string chatId = 9;
               string clientProtocol = 10;
+              string env = 11;
             }
         `;
 
diff --git a/packages/uiweb/src/lib/types/index.ts b/packages/uiweb/src/lib/types/index.ts
index ac707e115..ed3488ef8 100644
--- a/packages/uiweb/src/lib/types/index.ts
+++ b/packages/uiweb/src/lib/types/index.ts
@@ -201,17 +201,28 @@ export const MODAL_POSITION_TYPE = {
 } as const;
 
 export type ModalPositionType = keyof typeof MODAL_POSITION_TYPE;
-
+export interface FrameButton {
+  index: string;
+  content: string;
+  action?: string;
+  target?: string;
+  post_url?: string;
+}
 export interface FrameDetails {
+  version: string;
   image: string;
+  ogImage: string;
   siteURL: string;
   postURL: string;
-  buttons: {
-    index: string;
-    content: string;
-    action?: string;
-    target?: string;
-  }[];
-  input?: { name: string; content: string };
+  buttons: FrameButton[];
+  inputText?: string;
   state?: string;
+  ofProtocolIdentifier?: string;
+}
+
+export interface IFrame {
+  isValidFrame: boolean;
+  frameType: string;
+  frameDetails?: FrameDetails;
+  message?: string;
 }
diff --git a/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts b/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts
index 3503e6cbc..af9dea35c 100644
--- a/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts
+++ b/packages/uiweb/src/lib/utilities/getFormattedMetadata.ts
@@ -1,13 +1,17 @@
 import { FrameDetails } from '../types';
 
 export function getFormattedMetadata(URL: string, data: any) {
+  let frameType: string;
   const frameDetails: FrameDetails = {
+    version: '',
     image: '',
     siteURL: URL,
     postURL: '',
     buttons: [],
-    input: { name: '', content: '' },
-    state: '',
+    inputText: undefined,
+    ogImage: '',
+    state: undefined,
+    ofProtocolIdentifier: undefined,
   };
 
   const parser = new DOMParser();
@@ -15,92 +19,168 @@ export function getFormattedMetadata(URL: string, data: any) {
 
   const metaElements: NodeListOf<HTMLMetaElement> =
     doc.head.querySelectorAll('meta');
-
-  metaElements.forEach((element, index) => {
+  const fcTags: string[] = [];
+  const ofTags: string[] = [];
+  metaElements.forEach((element) => {
     const name =
-      element.getAttribute('name') || element.getAttribute('property');
-    const content = element.getAttribute('content');
-
-    if (name && content) {
-      if (name === 'fc:frame:image' || name === 'of:image') {
-        frameDetails.image = content;
-      } else if (name === 'fc:frame:post_url' || name === 'of:post_url') {
-        frameDetails.postURL = content;
-      } else if (name === 'fc:frame:state' || name === 'of:state') {
-        frameDetails.state = content;
-      } else if (
-        (name.includes('fc:frame:button') || name.includes('of:button')) &&
-        !name.includes('action') &&
-        !name.includes('target')
-      ) {
-        const index = name.split(':')[3];
-        const indexZeroExists = frameDetails.buttons.some(
-          (button: any) => button.index === index
-        );
-        if (!indexZeroExists) {
-          frameDetails.buttons.push({
-            index: index,
-            content: content,
-            action: '',
-            target: '',
-          });
-        } else {
-          const indexToUpdate = frameDetails.buttons.findIndex(
-            (button: any) => button.index === String(index)
-          );
-          frameDetails.buttons[indexToUpdate].content = content;
-          frameDetails.buttons[indexToUpdate].index = index;
+      element.getAttribute('name') ?? element.getAttribute('property');
+    switch (name) {
+      case 'fc:frame':
+      case 'fc:frame:image':
+        fcTags.push(name);
+        break;
+      case 'of:version':
+      case 'of:accepts:push':
+      case 'of:image':
+        ofTags.push(name);
+        break;
+      case 'og:image':
+        if (!ofTags.some((tag) => tag === 'og:image')) {
+          ofTags.push(name);
         }
-      } else if (name === 'fc:frame:input:text' || name === 'of:input:text') {
-        frameDetails.input = { name, content };
-      } else if (
-        (name.includes('fc:frame:button') || name.includes('of:button')) &&
-        name.includes(':action')
-      ) {
-        const number = name.split(':')[3];
-        const indexZeroExists = frameDetails.buttons.some(
-          (button: any) => button.index === number
-        );
-        if (!indexZeroExists) {
-          frameDetails.buttons.push({
-            index: number,
-            content: '',
-            action: content,
-            target: '',
-          });
-        } else {
-          const indexToUpdate = frameDetails.buttons.findIndex(
-            (button: any) => button.index === number
-          );
-          frameDetails.buttons[indexToUpdate].action = content;
+        if (!fcTags.some((tag) => tag === 'og:image')) {
+          fcTags.push(name);
         }
-      } else if (
-        (name.includes('fc:frame:button') || name.includes('of:button')) &&
-        name.includes(':target')
-      ) {
-        const number = name.split(':')[3];
+        break;
+      default:
+        break;
+    }
+  });
+
+  if (
+    ofTags.includes('of:version') &&
+    ofTags.includes('og:image') &&
+    ofTags.includes('of:image') &&
+    ofTags.includes('of:accepts:push')
+  ) {
+    frameType = 'of';
+    metaElements.forEach((element) => {
+      const name =
+        element.getAttribute('name') || element.getAttribute('property');
+      const content = element.getAttribute('content');
+      if (name === 'og:image') {
+        frameDetails.ogImage = content as string;
+      }
+      if (name && content && name.startsWith('of:')) {
+        const index = name.split(':')[2];
+        switch (name) {
+          case 'of:version':
+            frameDetails.version = content;
+            break;
+          case 'of:image':
+            frameDetails.image = content;
+            break;
+          case 'of:post_url':
+            frameDetails.postURL = content;
+            break;
+          case 'of:input:text':
+            frameDetails.inputText = content;
+            break;
+          case 'of:state':
+            frameDetails.state = content;
+            break;
+          case `of:button:${index}`:
+          case `of:button:${index}:action`:
+          case `of:button:${index}:target`: {
+            let type: 'action' | 'target' | 'content' = name
+              .split(':')
+              .pop() as 'action' | 'target' | 'content';
 
-        const indexZeroExists = frameDetails.buttons.some(
-          (button: any) => button.index === number
-        );
+            const buttonIndex = frameDetails.buttons.findIndex(
+              (button) => button.index === index
+            );
+            if (buttonIndex !== -1) {
+              if (type === index) type = 'content';
+              frameDetails.buttons[buttonIndex][type] = content;
+            } else {
+              frameDetails.buttons.push({
+                index,
+                content: '',
+                action: '',
+                target: '',
+              });
+              if (type === index) type = 'content';
+              frameDetails.buttons[frameDetails.buttons.length - 1][type] =
+                content;
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+    });
+  } else if (
+    fcTags.includes('fc:frame') &&
+    fcTags.includes('fc:frame:image') &&
+    fcTags.includes('og:image')
+  ) {
+    frameType = 'fc';
+    metaElements.forEach((element) => {
+      const name =
+        element.getAttribute('name') || element.getAttribute('property');
+      const content = element.getAttribute('content');
+      if (name === 'og:image') {
+        frameDetails.ogImage = content as string;
+      }
+      if (name && content && name.startsWith('fc:frame')) {
+        const index = name.split(':')[3];
 
-        if (!indexZeroExists) {
-          frameDetails.buttons.push({
-            index: number,
-            content: '',
-            action: '',
-            target: content,
-          });
-        } else {
-          const indexToUpdate = frameDetails.buttons.findIndex(
-            (button: any) => button.index === number
-          );
+        switch (name) {
+          case 'fc:frame':
+            frameDetails.version = content;
+            break;
+          case 'fc:frame:image':
+            frameDetails.image = content;
+            break;
+          case 'fc:frame:post_url':
+            frameDetails.postURL = content;
+            break;
+          case 'fc:frame:input:text':
+            frameDetails.inputText = content;
+            break;
+          case 'fc:frame:state':
+            frameDetails.state = content;
+            break;
+          case `fc:frame:button:${index}`:
+          case `fc:frame:button:${index}:action`:
+          case `fc:frame:button:${index}:target`:
+          case `fc:frame:button:${index}:post_url`: {
+            let type: 'action' | 'target' | 'content' | 'post_url' = name
+              .split(':')
+              .pop() as 'action' | 'target' | 'content';
+            const buttonIndex = frameDetails.buttons.findIndex(
+              (button) => button.index === index
+            );
+            if (buttonIndex !== -1) {
+              if (type === index) type = 'content';
+              frameDetails.buttons[buttonIndex][type] = content;
+            } else {
+              frameDetails.buttons.push({
+                index,
+                content: '',
+                action: '',
+                target: '',
+                post_url: undefined,
+              });
 
-          frameDetails.buttons[indexToUpdate].target = content;
+              if (type === index) type = 'content';
+              frameDetails.buttons[frameDetails.buttons.length - 1][type] =
+                content;
+            }
+            break;
+          }
+          default:
+            break;
         }
       }
-    }
-  });
+    });
+  } else {
+    frameType = 'unsupported';
+
+    return { isValidFrame: false, frameType, message: 'Not a valid Frame' };
+  }
+  frameDetails.buttons.sort((a, b) => parseInt(a.index) - parseInt(b.index));
 
-  return frameDetails;
+  return { isValidFrame: true, frameType, frameDetails };
 }