update frog + update frames sdk

playground/src/index.tsx

@@ -9,6 +9,7 @@ import { app as initial } from './initial.js'
 import { app as middlewareApp } from './middleware.js'
 import { app as neynarApp } from './neynar.js'
 import { app as routingApp } from './routing.js'
+import { app as signatureApp } from './signature.js'
 import { app as todoApp } from './todos.js'
 import { app as transactionApp } from './transaction.js'
 import { app as uiSystemApp } from './ui-system.js'
@@ -199,6 +200,7 @@ export const app = new Frog({
   .route('/routing', routingApp)
   .route('/transaction', transactionApp)
   .route('/todos', todoApp)
+  .route('/signature', signatureApp)
   .frame('/:dynamic', (c) => {
     const dynamic = c.req.param('dynamic')
     return c.res({

playground/src/signature.tsx

@@ -0,0 +1,53 @@
+import { Button, Frog } from 'frog'
+
+export const app = new Frog({ verify: 'silent', title: 'Signature' })
+  .frame('/', (c) => {
+    const transactionId = c.transactionId
+    return c.res({
+      image: (
+        <div tw="flex flex-col items-center justify-center w-full h-full bg-black text-white font-bold text-5xl">
+          {transactionId
+            ? `${transactionId.slice(0, 6)}...${transactionId.slice(-6)}`
+            : 'Sign Typed Data'}
+        </div>
+      ),
+      intents: [
+        <Button.Signature target="/sign">Sign Typed Data</Button.Signature>,
+      ],
+    })
+  })
+  // Sign Typed Data
+  .signature('/sign', (c) =>
+    c.signTypedData({
+      chainId: 'eip155:84532',
+      domain: {
+        name: 'Ether Mail',
+        version: '1',
+        chainId: 1,
+        verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
+      },
+      types: {
+        Person: [
+          { name: 'name', type: 'string' },
+          { name: 'wallet', type: 'address' },
+        ],
+        Mail: [
+          { name: 'from', type: 'Person' },
+          { name: 'to', type: 'Person' },
+          { name: 'contents', type: 'string' },
+        ],
+      },
+      primaryType: 'Mail',
+      message: {
+        from: {
+          name: 'Cow',
+          wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
+        },
+        to: {
+          name: 'Bob',
+          wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
+        },
+        contents: 'Hello, Bob!',
+      },
+    }),
+  )