From 47c1d25415f3284a2b1b101a141a1cc49c466783 Mon Sep 17 00:00:00 2001
From: dylsteck <dylancsteck@gmail.com>
Date: Fri, 16 Aug 2024 20:00:14 -0400
Subject: [PATCH 1/3] wip: editing styling to match new designs for
 `NeynarFrameCard`

---
 package.json                                  |  2 +-
 .../atoms/icons/ExternalLinkIcon.tsx          | 35 +-------
 src/components/atoms/icons/LightningIcon.tsx  |  7 ++
 src/components/molecules/FrameCard.tsx        | 88 +++++++++++--------
 .../organisms/NeynarFrameCard/index.tsx       |  3 +-
 .../stories/NeynarFrameCard.stories.tsx       |  8 +-
 6 files changed, 70 insertions(+), 73 deletions(-)
 create mode 100644 src/components/atoms/icons/LightningIcon.tsx

diff --git a/package.json b/package.json
index 8e07dfa..875941f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",
diff --git a/src/components/atoms/icons/ExternalLinkIcon.tsx b/src/components/atoms/icons/ExternalLinkIcon.tsx
index c1921bd..7fa2248 100644
--- a/src/components/atoms/icons/ExternalLinkIcon.tsx
+++ b/src/components/atoms/icons/ExternalLinkIcon.tsx
@@ -1,37 +1,10 @@
 import React from 'react';
 
-interface ExternalLinkIconProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const ExternalLinkIcon: React.FC<ExternalLinkIconProps> = ({
-  width = 12,
-  height = 12,
-  className = 'ml-1 text-faint',
-  style = {},
-}) => {
+const ExternalLinkIcon = () => {
   return (
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      role="img"
-      viewBox="0 0 16 16"
-      width={width}
-      height={height}
-      fill="currentColor"
-      className={className}
-      style={{
-        display: 'inline-block',
-        userSelect: 'none',
-        verticalAlign: 'text-bottom',
-        overflow: 'visible',
-        ...style,
-      }}
-    >
-      <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.85855 0.555664H8.31281M8.31281 0.555664V2.73754M8.31281 0.555664L4.31445 4.11122" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.31445 1H1.31445C0.762168 1 0.314453 1.44772 0.314453 2V8C0.314453 8.55228 0.762168 9 1.31445 9H7.31445C7.86674 9 8.31445 8.55228 8.31445 8V6H7.31445V8H1.31445V2H3.31445V1Z" fill="#FFFFFF"/>
     </svg>
   );
 };
diff --git a/src/components/atoms/icons/LightningIcon.tsx b/src/components/atoms/icons/LightningIcon.tsx
new file mode 100644
index 0000000..da43248
--- /dev/null
+++ b/src/components/atoms/icons/LightningIcon.tsx
@@ -0,0 +1,7 @@
+export const LightningIcon = () => {
+    return(
+        <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.01451 12.5187L4.96833 12.5174L4.93914 12.522C4.93113 12.516 4.92402 12.5087 4.91808 12.5005L4.51231 12.7926L4.91808 12.5005C4.9049 12.4822 4.89824 12.46 4.89913 12.4375L4.89953 12.4275V12.4176V8.81194V8.31194H4.39953H1.8876H1.88753C1.76188 8.31196 1.63853 8.27825 1.53036 8.21433C1.42218 8.1504 1.33315 8.05862 1.27256 7.94854C1.21196 7.83847 1.18203 7.71415 1.18588 7.58856C1.18973 7.46301 1.2272 7.34079 1.29438 7.23466C1.2944 7.23463 1.29442 7.23459 1.29444 7.23456L4.90001 1.54377L4.90567 1.53483L4.91095 1.52567C4.92227 1.50601 4.93988 1.49074 4.96094 1.48232C4.982 1.47389 5.00528 1.47281 5.02703 1.47924L5.02912 1.47985C5.05077 1.48614 5.06969 1.4995 5.08286 1.5178C5.09603 1.53609 5.1027 1.55827 5.1018 1.58079L5.10141 1.59073V1.60067V5.20631V5.70631H5.60141H8.11333H8.1134C8.23905 5.70629 8.3624 5.74 8.47058 5.80392C8.57875 5.86784 8.66778 5.95963 8.72838 6.06971C8.78897 6.17978 8.81891 6.3041 8.81506 6.42969C8.81121 6.55528 8.77371 6.67753 8.70649 6.78369L5.10232 12.4723C5.10219 12.4725 5.10205 12.4727 5.10191 12.4729C5.09255 12.4873 5.07969 12.499 5.06452 12.507C5.04914 12.5152 5.03191 12.5192 5.01451 12.5187Z" stroke="#FFFFFF"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/components/molecules/FrameCard.tsx b/src/components/molecules/FrameCard.tsx
index 8b292bc..79193b6 100644
--- a/src/components/molecules/FrameCard.tsx
+++ b/src/components/molecules/FrameCard.tsx
@@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { styled } from "@pigment-css/react";
 import ExternalLinkIcon from "../atoms/icons/ExternalLinkIcon";
 import { NeynarFrame } from "../organisms/NeynarFrameCard";
+import { LightningIcon } from "../atoms/icons/LightningIcon";
 
 export type FrameCardProps = {
-  frames: NeynarFrame[];
+  frame: NeynarFrame | null;
   onFrameBtnPress: (
     btnIndex: number,
     localFrame: NeynarFrame,
@@ -14,76 +15,82 @@ export type FrameCardProps = {
 };
 
 const FrameButton = styled.button({
-  border: "1px solid rgba(0, 0, 0, 0.75)",
-  borderRadius: "12px",
-  padding: "4px 16px",
-  fontSize: "12px",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: "8px",
+  padding: "8px 16px",
+  fontSize: "14px",
   display: "flex",
   alignItems: "center",
+  justifyContent: "center",
   gap: "8px",
-  '@media (min-width: 768px)': {
-    fontSize: "16px",
-  },
-  cursor: 'pointer'
+  cursor: 'pointer',
+  backgroundColor: "#1E1E1E",
+  color: "white",
+  flex: "1 1 0",
+  minWidth: "0",
+  '&:hover': {
+    backgroundColor: "#2E2E2E",
+  }
 });
 
 const FrameContainer = styled.div({
-  border: "0.5px solid rgba(128, 128, 128, 0.7)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
   margin: "8px 0",
-  padding: "16px",
-  backgroundColor: "transparent",
+  backgroundColor: "#121212",
   borderRadius: "12px",
   display: "flex",
   flexDirection: "column",
-  alignItems: "center",
+  alignItems: "right",
+  width: "100%",
+  maxWidth: "400px",
 });
 
 const ButtonContainer = styled.div({
   margin: "8px 0",
   display: "flex",
-  flexDirection: "row",
+  flexWrap: "wrap",
   gap: "8px",
-  justifyContent: "center",
+  width: "100%",
 });
 
 const FrameImage = styled.img({
   width: "100%",
-  height: "auto",
-  borderRadius: "8px",
+  borderTopLeftRadius: "8px",
+  borderTopRightRadius: "8px",
 });
 
 const FrameDomain = styled.div({
   fontSize: "12px",
-  color: "#aaa",
-  marginTop: "4px",
-  textAlign: "right",
+  color: "#888",
+  marginTop: "auto",
   width: "100%",
+  padding: "4px 0"
 });
 
 const FlexContainer = styled.div({
   display: "flex",
   flexDirection: "column",
   gap: "4px",
+  width: "100%",
 });
 
 const InputField = styled.input({
-  border: "1px solid rgba(0, 0, 0, 0.75)",
-  borderRadius: "12px",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: "8px",
   padding: "8px",
   marginTop: "8px",
-  width: "80%",
-  fontSize: "16px",
-  '@media (min-width: 768px)': {
-    fontSize: "16px",
-  },
+  width: "100%",
+  fontSize: "14px",
+  backgroundColor: "#1E1E1E",
+  color: "white",
 });
 
 function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClick }: any) {
-
   return (
     <FrameButton onClick={() => handleOnClick(number)}>
       {text}
       {(actionType === "link" || actionType === "post_redirect" || actionType === "mint") && <ExternalLinkIcon />}
+      {actionType === "tx" && <LightningIcon />}
     </FrameButton>
   )
 }
@@ -119,13 +126,24 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
     }
   };
 
+  const getImageStyle = () => {
+    switch (localFrame.image_aspect_ratio) {
+      case "1:1":
+        return { aspectRatio: "1 / 1" };
+      case "1.91:1":
+        return { aspectRatio: "1.91 / 1" };
+      default:
+        return {};
+    }
+  };
+
   return (
     <>
       <FrameContainer>
         {localFrame.frames_url && (
           <>
-            <a href={localFrame.frames_url} target="_blank" rel="noopener noreferrer">
-              <FrameImage src={localFrame.image} alt={`Frame image for ${localFrame.frames_url}`} />
+            <a href={localFrame.frames_url} target="_blank" rel="noopener noreferrer" style={{ width: '100%' }}>
+              <FrameImage src={localFrame.image} alt={`Frame image for ${localFrame.frames_url}`} style={getImageStyle()} />
             </a>
             {localFrame.input?.text && (
               <InputField
@@ -139,17 +157,17 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
           </>
         )}
       </FrameContainer>
-      <FrameDomain>{extractDomain(localFrame.frames_url)}</FrameDomain>
+      {localFrame.frames_url && <FrameDomain>{extractDomain(localFrame.frames_url)}</FrameDomain>}
     </>
   );
 }
 
-export const FrameCard: React.FC<FrameCardProps> = ({ frames, onFrameBtnPress }) => {
+export const FrameCard: React.FC<FrameCardProps> = ({ frame, onFrameBtnPress }) => {
   return (
     <FlexContainer>
-      {frames.map((frame: NeynarFrame, index: number) => (
-        <CastFrame key={`cast-frame-${index}`} frame={frame} onFrameBtnPress={onFrameBtnPress} />
-      ))}
+      {frame ? 
+        <CastFrame frame={frame} onFrameBtnPress={onFrameBtnPress} />
+      : <></>}
     </FlexContainer>
   );
 };
diff --git a/src/components/organisms/NeynarFrameCard/index.tsx b/src/components/organisms/NeynarFrameCard/index.tsx
index 9008e5f..5aeccde 100644
--- a/src/components/organisms/NeynarFrameCard/index.tsx
+++ b/src/components/organisms/NeynarFrameCard/index.tsx
@@ -12,6 +12,7 @@ export type NeynarFrame = {
   version: string;
   title: string;
   image: string;
+  image_aspect_ratio: string;
   buttons: {
     index: number;
     title: string;
@@ -158,7 +159,7 @@ export const NeynarFrameCard: React.FC<NeynarFrameCardProps> = ({ url, onFrameBt
 
   return (
     <FrameCard
-      frames={frame ? [frame] : []}
+      frame={frame}
       onFrameBtnPress={handleFrameBtnPress}
     />
   );
diff --git a/src/components/stories/NeynarFrameCard.stories.tsx b/src/components/stories/NeynarFrameCard.stories.tsx
index 4f9be91..19ec90e 100644
--- a/src/components/stories/NeynarFrameCard.stories.tsx
+++ b/src/components/stories/NeynarFrameCard.stories.tsx
@@ -24,7 +24,7 @@ const TemplateWithInteractions: StoryFn<NeynarFrameCardProps> = (args) => (
 
 export const Primary = Template.bind({});
 Primary.args = {
-  frames: [
+  frame:
     {
       version: "vNext",
       title: "Introducing Smart Wallets on Paragraph",
@@ -59,12 +59,11 @@ Primary.args = {
       state: {},
       frames_url: "https://paragraph.xyz/@blog/introducing-smart-wallets",
     },
-  ],
 };
 
 Primary.argTypes = {
   hash: { table: { disable: true } },
-  frames: { table: { disable: true } },
+  frame: { table: { disable: true } },
 };
 
 export const EventsFrame = TemplateWithInteractions.bind({});
@@ -87,8 +86,7 @@ ZoraFrame.args = {
   url: "https://zora.co/collect/base:0xcf6e80defd9be067f5adda2924b55c2186d3e930/5"
 };
 
-
 ParagraphFrame.argTypes = {
   hash: { table: { disable: true } },
-  frames: { table: { disable: true } },
+  frame: { table: { disable: true } },
 };
\ No newline at end of file

From b91e2fa0390a16cf9f68483dbb217de807bd6872 Mon Sep 17 00:00:00 2001
From: dylsteck <dylancsteck@gmail.com>
Date: Fri, 16 Aug 2024 20:08:08 -0400
Subject: [PATCH 2/3] fix: make sure the buttons stay within the container

---
 src/components/molecules/FrameCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/FrameCard.tsx b/src/components/molecules/FrameCard.tsx
index 79193b6..3d9fc7b 100644
--- a/src/components/molecules/FrameCard.tsx
+++ b/src/components/molecules/FrameCard.tsx
@@ -17,7 +17,7 @@ export type FrameCardProps = {
 const FrameButton = styled.button({
   border: "1px solid rgba(255, 255, 255, 0.2)",
   borderRadius: "8px",
-  padding: "8px 16px",
+  padding: "6px 16px",
   fontSize: "14px",
   display: "flex",
   alignItems: "center",
@@ -46,11 +46,11 @@ const FrameContainer = styled.div({
 });
 
 const ButtonContainer = styled.div({
-  margin: "8px 0",
+  margin: "7px",
   display: "flex",
   flexWrap: "wrap",
   gap: "8px",
-  width: "100%",
+  width: "97%",
 });
 
 const FrameImage = styled.img({

From 8f9c8ffd78aa8d3a742a984554216745bf5b0f7b Mon Sep 17 00:00:00 2001
From: dylsteck <dylancsteck@gmail.com>
Date: Fri, 16 Aug 2024 20:25:38 -0400
Subject: [PATCH 3/3] fix: update so a spinner svg shows while waiting for
 `onFrameBtnPress` to resolve

---
 src/components/molecules/FrameCard.tsx | 62 ++++++++++++++++++++++++--
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/FrameCard.tsx b/src/components/molecules/FrameCard.tsx
index 3d9fc7b..508e0d9 100644
--- a/src/components/molecules/FrameCard.tsx
+++ b/src/components/molecules/FrameCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { styled } from "@pigment-css/react";
 import ExternalLinkIcon from "../atoms/icons/ExternalLinkIcon";
 import { NeynarFrame } from "../organisms/NeynarFrameCard";
@@ -11,7 +11,7 @@ export type FrameCardProps = {
     localFrame: NeynarFrame,
     setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
     inputValue?: string
-  ) => void;
+  ) => Promise<void>;
 };
 
 const FrameButton = styled.button({
@@ -43,6 +43,7 @@ const FrameContainer = styled.div({
   alignItems: "right",
   width: "100%",
   maxWidth: "400px",
+  position: "relative",
 });
 
 const ButtonContainer = styled.div({
@@ -85,6 +86,53 @@ const InputField = styled.input({
   color: "white",
 });
 
+const SpinnerOverlay = styled.div({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  borderRadius: "12px",
+  zIndex: 10,
+});
+
+const FrameSpinnerSVG = () => {
+  const spinnerRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (spinnerRef.current) {
+      let rotation = 0;
+      const animate = () => {
+        rotation += 6;
+        if (spinnerRef.current) {
+          spinnerRef.current.style.transform = `rotate(${rotation}deg)`;
+        }
+        requestAnimationFrame(animate);
+      };
+      requestAnimationFrame(animate);
+    }
+  }, []);
+
+  return (
+    <svg
+      ref={spinnerRef}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className="size-6 text-white"
+      style={{ width: '24px', height: '24px' }}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
+  );
+};
+
 function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClick }: any) {
   return (
     <FrameButton onClick={() => handleOnClick(number)}>
@@ -98,6 +146,7 @@ function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClic
 function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnPress: FrameCardProps['onFrameBtnPress'] }) {
   const [localFrame, setLocalFrame] = useState<NeynarFrame>(frame);
   const [inputValue, setInputValue] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
 
   const renderFrameButtons = () => {
     const buttons = localFrame.buttons.map((btn) => (
@@ -108,7 +157,11 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
         actionType={btn.action_type}
         target={btn.target}
         frameUrl={frame.frames_url}
-        handleOnClick={(btnIndex: number) => onFrameBtnPress(btnIndex, localFrame, setLocalFrame, inputValue)}
+        handleOnClick={(btnIndex: number) => {
+          setLoading(true);
+          onFrameBtnPress(btnIndex, localFrame, setLocalFrame, inputValue)
+            .finally(() => setLoading(false));
+        }}
       />
     ));
     return <ButtonContainer>{buttons}</ButtonContainer>;
@@ -140,6 +193,9 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
   return (
     <>
       <FrameContainer>
+        {loading && (
+          <SpinnerOverlay><FrameSpinnerSVG /></SpinnerOverlay>
+        )}
         {localFrame.frames_url && (
           <>
             <a href={localFrame.frames_url} target="_blank" rel="noopener noreferrer" style={{ width: '100%' }}>