Merge pull request #520 from us3r-network/F-frameText-ttang

feat: frame text support
degencast · Feb 3, 2024 · 8014f8b · 8014f8b
2 parents 9ae8e18 + 73e6c5a
commit 8014f8b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/apps/u3/src/components/social/Embed.tsx b/apps/u3/src/components/social/Embed.tsx
@@ -176,6 +176,7 @@ function EmbedCastFrame({
   const castId: CastId = useFarcasterCastId({ cast });
   const { encryptedSigner, isConnected, currFid } = useFarcasterCtx();
 
+  const [frameText, setFrameText] = useState('');
   const [frameRedirect, setFrameRedirect] = useState('');
   const [frameData, setFrameData] = useState<FarCastEmbedMeta>(data);
 
@@ -196,7 +197,7 @@ function EmbedCastFrame({
           url: Buffer.from(data.url),
           buttonIndex: index,
           castId,
-          inputText: Buffer.from(''),
+          inputText: Buffer.from(frameText),
         },
         {
           fid: currFid,
@@ -215,6 +216,7 @@ function EmbedCastFrame({
         messageHash: toHex(trustedDataValue.hash),
         network: FARCASTER_NETWORK,
         buttonIndex: index,
+        inputText: frameText,
         castId: {
           fid: castId.fid,
           hash: toHex(castId.hash),
@@ -248,16 +250,29 @@ function EmbedCastFrame({
         setFrameRedirect(resp.data.data?.redirectUrl || '');
       }
     },
-    [frameData, currFid, encryptedSigner, castId]
+    [frameData, currFid, encryptedSigner, castId, frameText]
   );
   return (
     <>
       <div className="border rounded-xl overflow-hidden border-[#39424c]">
         <div className="h-80 overflow-hidden flex items-center">
           <img src={frameData.fcFrameImage} alt="" />
         </div>
+        {frameData.fcFrameInputText && (
+          <div className="p-3">
+            <input
+              type="text"
+              className="w-full p-3 rounded-xl bg-[#39424c] border-[#39424c] text-[#fff] placeholder-[#718096] focus:outline-none"
+              placeholder={frameData.fcFrameInputText}
+              value={frameText}
+              onChange={(e) => {
+                setFrameText(e.target.value);
+              }}
+            />
+          </div>
+        )}
         {isConnected && (
-          <div className="flex items-center justify-around gap-3 mt-3">
+          <div className="flex items-center justify-around gap-3 mt-1">
             {[
               frameData.fcFrameButton1,
               frameData.fcFrameButton2,

diff --git a/apps/u3/src/services/social/types/index.ts b/apps/u3/src/services/social/types/index.ts
@@ -35,6 +35,7 @@ export type FarCastEmbedMeta = {
   fcFrameButton4?: string;
   fcFrameImage?: string;
   fcFramePostUrl?: string;
+  fcFrameInputText?: string;
 };
 
 export type FarCast = {