refactor: drop RouteOptions for composer action, add state

wevm · Jul 17, 2024 · 23f4ce2 · 23f4ce2
1 parent 2ab4355
commit 23f4ce2
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 221 deletions.
diff --git a/playground/src/composerAction.tsx b/playground/src/composerAction.tsx
@@ -1,67 +1,19 @@
-import { Button, Frog } from 'frog'
+import { Frog } from 'frog'
 
 import { vars } from './ui.js'
 
 export const app = new Frog({
   ui: { vars },
   title: 'Composer Action',
-})
-  .frame('/', (c) =>
-    c.res({
-      image: (
-        <div
-          tw="flex"
-          style={{
-            alignItems: 'center',
-            background: 'linear-gradient(to right, #432889, #17101F)',
-            backgroundSize: '100% 100%',
-            flexDirection: 'column',
-            flexWrap: 'nowrap',
-            height: '100%',
-            justifyContent: 'center',
-            textAlign: 'center',
-            width: '100%',
-          }}
-        >
-          <div
-            style={{
-              color: 'white',
-              fontSize: 60,
-              fontStyle: 'normal',
-              letterSpacing: '-0.025em',
-              lineHeight: 1.4,
-              marginTop: 30,
-              padding: '0 120px',
-              whiteSpace: 'pre-wrap',
-            }}
-          >
-            Add Composer Action
-          </div>
-        </div>
-      ),
-      intents: [
-        <Button.AddComposerAction action="/action">
-          Add Action
-        </Button.AddComposerAction>,
-      ],
-    }),
-  )
-  .composerAction(
-    '/action',
-    async (c) => {
-      console.log(
-        `Composer Action to ${JSON.stringify(c.actionData.castId)} from ${
-          c.actionData.fid
-        }`,
-      )
-      if (Math.random() > 0.5) return c.error({ message: 'Action failed :(' })
-      return c.res({
-        url: 'https://somewhere.com/some-form',
-      })
-    },
-    {
-      name: 'Super Form',
-      icon: 'log',
-      description: 'This composer action will do something with the cast!',
-    },
+}).composerAction('/', async (c) => {
+  console.log(
+    `Composer Action call ${JSON.stringify(c.actionData, null, 2)} from ${
+      c.actionData.fid
+    }`,
   )
+  if (Math.random() > 0.5) return c.error({ message: 'Action failed :(' })
+  return c.res({
+    title: 'Some Composer Action',
+    url: 'https://somewhere.com/some-form',
+  })
+})
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -68,32 +68,6 @@ export function ButtonAddCastAction({
   ] as unknown as HtmlEscapedString
 }
 
-export type ButtonAddComposerActionProps = ButtonProps & {
-  /** Action path */
-  action: string
-}
-
-ButtonAddComposerAction.__type = 'button'
-export function ButtonAddComposerAction({
-  action,
-  children,
-  // @ts-ignore - private
-  index = 1,
-}: ButtonAddComposerActionProps) {
-  return [
-    <meta
-      property={`fc:frame:button:${index}`}
-      content={normalizeChildren(children)}
-      data-value={buttonPrefix.addComposerAction}
-    />,
-    <meta property={`fc:frame:button:${index}:action`} content="link" />,
-    <meta
-      property={`fc:frame:button:${index}:target`}
-      content={`https://warpcast.com/~/add-cast-action?url=${action}`}
-    />,
-  ] as unknown as HtmlEscapedString
-}
-
 export type ButtonLinkProps = ButtonProps & {
   href: string
 }
@@ -239,7 +213,6 @@ export function ButtonSignature({
 
 export const Button = Object.assign(ButtonRoot, {
   AddCastAction: ButtonAddCastAction,
-  AddComposerAction: ButtonAddComposerAction,
   Link: ButtonLink,
   Mint: ButtonMint,
   Redirect: ButtonRedirect,

diff --git a/src/frog-base.tsx b/src/frog-base.tsx
@@ -209,19 +209,7 @@ export type RouteOptions<
                 c: Context<E, P, I>,
               ) => Promise<CastActionOptions> | CastActionOptions
             }
-      : method extends 'composerAction'
-        ?
-            | ComposerActionOptions
-            | {
-                /**
-                 * Custom handler for Composer Action `GET` response.
-                 * One can use that if something needs to be derived from the `Context`.
-                 */
-                handler: (
-                  c: Context<E, P, I>,
-                ) => Promise<ComposerActionOptions> | ComposerActionOptions
-              }
-        : {})
+      : {})
 
 /**
  * A Frog instance.

diff --git a/src/types/composerAction.ts b/src/types/composerAction.ts
@@ -1,38 +1,10 @@
-import type { Octicon } from './octicon.js'
 import type { TypedResponse } from './response.js'
 
-export type ComposerActionOptions = {
-  /**
-   * An action name up to 30 characters.
-   *
-   * @example `'My action.'`
-   */
-  name: string
-  /**
-   * An icon ID.
-   *
-   * @see https://warpcast.notion.site/Spec-Farcaster-Actions-84d5a85d479a43139ea883f6823d8caa
-   * @example `'log'`
-   */
-  icon: Octicon
-  /**
-   * A short description up to 80 characters.
-   *
-   * @example `'My awesome action description.'`
-   */
-  description?: string
+export type ComposerActionResponse = {
   /**
-   * Optional external link to an "about" page.
-   * You should only include this if you can't fully describe your
-   * action using the `description` field.
-   * Must be http or https protocol.
-   *
-   * @example `'My awesome action description.'`
+   * Title of the action.
    */
-  aboutUrl?: string
-}
-
-export type ComposerActionResponse = {
+  title: string
   /**
    * URL of the form.
    *
@@ -53,6 +25,11 @@ export type ComposerActionData = {
   network: number
   timestamp: number
   url: string
+  state: {
+    parent?: string | undefined
+    text: string
+    embeds: string[]
+  }
 }
 
 export type TrustedData = {

diff --git a/src/types/routes.ts b/src/types/routes.ts
@@ -142,15 +142,8 @@ export type HandlerInterface<
   >(
     path: P,
     handler: H<E2, MergedPath, I, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -171,15 +164,8 @@ export type HandlerInterface<
     path: P,
     middleware: MiddlewareHandler<E2, MergedPath, I>,
     handler: H<E3, MergedPath, I2, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -204,15 +190,8 @@ export type HandlerInterface<
     middleware: MiddlewareHandler<E2, MergedPath, I>,
     middleware_2: MiddlewareHandler<E3, MergedPath, I2>,
     handler: H<E4, MergedPath, I3, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -240,15 +219,8 @@ export type HandlerInterface<
     middleware_2: MiddlewareHandler<E3, MergedPath, I2>,
     middleware_3: MiddlewareHandler<E4, MergedPath, I3>,
     handler: H<E5, MergedPath, I4, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -279,15 +251,8 @@ export type HandlerInterface<
     middleware_3: MiddlewareHandler<E4, MergedPath, I3>,
     middleware_4: MiddlewareHandler<E5, MergedPath, I4>,
     handler: H<E6, MergedPath, I5, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -321,15 +286,8 @@ export type HandlerInterface<
     middleware_4: MiddlewareHandler<E5, MergedPath, I4>,
     middleware_5: MiddlewareHandler<E6, MergedPath, I5>,
     handler: H<E7, MergedPath, I6, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -366,15 +324,8 @@ export type HandlerInterface<
     middleware_5: MiddlewareHandler<E6, MergedPath, I5>,
     middleware_6: MiddlewareHandler<E7, MergedPath, I6>,
     handler: H<E8, MergedPath, I7, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -414,15 +365,8 @@ export type HandlerInterface<
     middleware_6: MiddlewareHandler<E7, MergedPath, I6>,
     middleware_7: MiddlewareHandler<E8, MergedPath, I7>,
     handler: H<E9, MergedPath, I8, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -465,15 +409,8 @@ export type HandlerInterface<
     middleware_7: MiddlewareHandler<E8, MergedPath, I7>,
     middleware_8: MiddlewareHandler<E9, MergedPath, I8>,
     handler: H<E10, MergedPath, I9, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,
@@ -521,15 +458,8 @@ export type HandlerInterface<
     middleware_8: MiddlewareHandler<E9, MergedPath, I8>,
     middleware_9: MiddlewareHandler<E10, MergedPath, I9>,
     handler: H<E11, MergedPath, I10, R, M>,
-    ...rest: M extends 'castAction' | 'composerAction'
-      ? [
-          options: RouteOptions<
-            'castAction' | 'composerAction',
-            E2,
-            MergedPath,
-            I
-          >,
-        ]
+    ...rest: M extends 'castAction'
+      ? [options: RouteOptions<'castAction', E2, MergedPath, I>]
       : [options?: RouteOptions<M>]
   ): FrogBase<
     E,

diff --git a/src/utils/getComposerActionContext.ts b/src/utils/getComposerActionContext.ts
@@ -30,6 +30,8 @@ export function getComposerActionContext<
 
   if (!frameData)
     throw new Error('Frame data must be present for action handlers.')
+  if (!frameData.state)
+    throw new Error('State must be present for composer action handler.')
 
   return {
     context: {
@@ -40,6 +42,7 @@ export function getComposerActionContext<
         network: frameData.network,
         messageHash: frameData.messageHash,
         timestamp: frameData.timestamp,
+        state: JSON.parse(decodeURIComponent(frameData.state)),
         url: frameData.url,
       },
       env,