chore: merge

.github/workflows/prune-tags.yml

@@ -0,0 +1,23 @@
+name: Prune NPM tags
+on:
+  workflow_dispatch:
+  schedule:
+    - cron:  '0 0 * * *'
+
+jobs:
+  prune:
+    name: Prune NPM tags
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Setup .npmrc file
+        uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Prune tags
+        run: cd src && npm view --json | jq -r '.["dist-tags"] | to_entries | .[] | select(.key != "latest") | .key' | xargs -I % npm dist-tag rm frog %
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

create-frog/CHANGELOG.md

@@ -1,5 +1,11 @@
 # create-frog
 
+## 0.1.4
+
+### Patch Changes
+
+- [`e657a0c`](https://github.com/wevm/frog/commit/e657a0cb07299f730e016818768df9218c747c94) Thanks [@jxom](https://github.com/jxom)! - Updated templates.
+
 ## 0.1.3
 
 ### Patch Changes

create-frog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-frog",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "bin": {
     "create-frog": "./_lib/bin.js"

playground/src/index.tsx

@@ -1,8 +1,11 @@
 import { Button, Frog, TextInput } from 'frog'
 import * as hubs from 'frog/hubs'
 
+import { app as middlewareApp } from './middleware.js'
+import { app as neynarApp } from './neynar.js'
 import { app as routingApp } from './routing.js'
 import { app as todoApp } from './todos.js'
+import { app as transactionApp } from './transaction.js'
 
 export const app = new Frog({
   browserLocation: '/:path/dev',
@@ -225,5 +228,8 @@ app.frame('/redirect-buttons', (c) => {
   })
 })
 
-app.route('/todos', todoApp)
+app.route('/middleware', middlewareApp)
+app.route('/neynar', neynarApp)
 app.route('/routing', routingApp)
+app.route('/transaction', transactionApp)
+app.route('/todos', todoApp)

playground/src/middleware.tsx

@@ -0,0 +1,29 @@
+import { Frog } from 'frog'
+import type { MiddlewareHandler } from 'hono'
+
+type EchoMiddlewareVariables = {
+  echo: (str: string) => string
+}
+
+const echoMiddleware: MiddlewareHandler<{
+  Variables: EchoMiddlewareVariables
+}> = async (c, next) => {
+  c.set('echo', (str) => str)
+  await next()
+}
+
+export const app = new Frog<{
+  Variables: EchoMiddlewareVariables
+}>()
+
+app.use(echoMiddleware)
+
+app.frame('/', (c) => {
+  return c.res({
+    image: (
+      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
+        {c.var.echo('hello world!')}
+      </div>
+    ),
+  })
+})

playground/src/neynar.tsx

@@ -0,0 +1,58 @@
+import { Button, Frog } from 'frog'
+import { type NeynarVariables, neynar } from 'frog/middlewares'
+
+export const app = new Frog<{
+  Variables: NeynarVariables
+}>()
+
+app.use(
+  neynar({
+    apiKey: 'NEYNAR_FROG_FM',
+    features: ['interactor', 'cast'],
+  }),
+)
+
+app.frame('/', (c) => {
+  return c.res({
+    action: '/guess',
+    image: (
+      <div
+        style={{
+          alignItems: 'center',
+          color: 'white',
+          display: 'flex',
+          justifyContent: 'center',
+          fontSize: 48,
+          height: '100%',
+          width: '100%',
+        }}
+      >
+        I can guess your name and follower count.
+      </div>
+    ),
+    intents: [<Button>Go on</Button>],
+  })
+})
+
+app.frame('/guess', (c) => {
+  const { displayName, followerCount } = c.var.interactor || {}
+  console.log('interactor: ', c.var.interactor)
+  console.log('cast: ', c.var.cast)
+  return c.res({
+    image: (
+      <div
+        style={{
+          alignItems: 'center',
+          color: 'white',
+          display: 'flex',
+          justifyContent: 'center',
+          fontSize: 48,
+          height: '100%',
+          width: '100%',
+        }}
+      >
+        Greetings {displayName}, you have {followerCount} followers.
+      </div>
+    ),
+  })
+})

playground/src/todos.tsx

@@ -1,8 +1,10 @@
 import { Button, Frog, TextInput } from 'frog'
 
 export const app = new Frog<{
-  index: number
-  todos: { completed: boolean; name: string }[]
+  State: {
+    index: number
+    todos: { completed: boolean; name: string }[]
+  }
 }>({
   initialState: {
     index: -1,