diff --git a/playground/src/index.tsx b/playground/src/index.tsx
index 440bb00d..ddea4f93 100644
--- a/playground/src/index.tsx
+++ b/playground/src/index.tsx
@@ -1,8 +1,8 @@
 import { Button, Frog, TextInput } from 'frog'
 
-import { wagmiExampleAbi } from '../constants/abi.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,52 +225,6 @@ app.frame('/redirect-buttons', (c) => {
   })
 })
 
-app.frame('/transaction', () => {
-  return {
-    image: (
-      <div style={{ backgroundColor: 'red', width: '100%', height: '100%' }}>
-        Example
-      </div>
-    ),
-    intents: [
-      <Button.Transaction location="/tx">/tx</Button.Transaction>,
-      <Button.Transaction location="/tx-contract">
-        /tx-contract
-      </Button.Transaction>,
-    ],
-  }
-})
-
-// Raw transaction
-app.transaction('/tx', (c) => {
-  return c.res({
-    chainId: 'eip155:1',
-    method: 'eth_sendTransaction',
-    params: {
-      to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
-      value: 1n,
-    },
-  })
-})
-
-// Send transaction
-app.transaction('/tx-send', (c) => {
-  return c.send({
-    chainId: 'eip155:1',
-    to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
-    value: 1n,
-  })
-})
-
-// Contract transaction
-app.transaction('/tx-contract', (c) => {
-  return c.contract({
-    abi: wagmiExampleAbi,
-    chainId: 'eip155:1',
-    functionName: 'mint',
-    to: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
-  })
-})
-
-app.route('/todos', todoApp)
 app.route('/routing', routingApp)
+app.route('/transaction', transactionApp)
+app.route('/todos', todoApp)
diff --git a/playground/src/transaction.tsx b/playground/src/transaction.tsx
new file mode 100644
index 00000000..a6dc8e35
--- /dev/null
+++ b/playground/src/transaction.tsx
@@ -0,0 +1,255 @@
+import { Button, Frog } from 'frog'
+
+export const app = new Frog({
+  hubApiUrl: 'https://api.hub.wevm.dev',
+  verify: 'silent',
+})
+
+app.frame('/', () => {
+  return {
+    image: (
+      <div style={{ backgroundColor: 'red', width: '100%', height: '100%' }}>
+        Example
+      </div>
+    ),
+    intents: [
+      <Button.Transaction location="/raw-send">Raw</Button.Transaction>,
+      <Button.Transaction location="/send">
+        Send Transaction
+      </Button.Transaction>,
+      <Button.Transaction location="/mint">Mint</Button.Transaction>,
+    ],
+  }
+})
+
+// Raw transaction
+app.transaction('/raw-send', (c) => {
+  return c.res({
+    chainId: 'eip155:1',
+    method: 'eth_sendTransaction',
+    params: {
+      to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
+      value: 1n,
+    },
+  })
+})
+
+// Send transaction
+app.transaction('/send', (c) => {
+  return c.send({
+    chainId: 'eip155:1',
+    to: '0xd2135CfB216b74109775236E36d4b433F1DF507B',
+    value: 1n,
+  })
+})
+
+// Contract transaction
+app.transaction('/mint', (c) => {
+  return c.contract({
+    abi: wagmiExampleAbi,
+    chainId: 'eip155:1',
+    functionName: 'mint',
+    to: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
+  })
+})
+
+/////////////////////////////////////////////////////////////////////
+// Constants
+
+export const wagmiExampleAbi = [
+  { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'owner',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'approved',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'uint256',
+        name: 'tokenId',
+        type: 'uint256',
+      },
+    ],
+    name: 'Approval',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'owner',
+        type: 'address',
+      },
+      {
+        indexed: true,
+        internalType: 'address',
+        name: 'operator',
+        type: 'address',
+      },
+      { indexed: false, internalType: 'bool', name: 'approved', type: 'bool' },
+    ],
+    name: 'ApprovalForAll',
+    type: 'event',
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: 'address', name: 'from', type: 'address' },
+      { indexed: true, internalType: 'address', name: 'to', type: 'address' },
+      {
+        indexed: true,
+        internalType: 'uint256',
+        name: 'tokenId',
+        type: 'uint256',
+      },
+    ],
+    name: 'Transfer',
+    type: 'event',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'to', type: 'address' },
+      { internalType: 'uint256', name: 'tokenId', type: 'uint256' },
+    ],
+    name: 'approve',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'address', name: 'owner', type: 'address' }],
+    name: 'balanceOf',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+    name: 'getApproved',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'owner', type: 'address' },
+      { internalType: 'address', name: 'operator', type: 'address' },
+    ],
+    name: 'isApprovedForAll',
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'mint',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+    name: 'mint',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'name',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+    name: 'ownerOf',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'from', type: 'address' },
+      { internalType: 'address', name: 'to', type: 'address' },
+      { internalType: 'uint256', name: 'tokenId', type: 'uint256' },
+    ],
+    name: 'safeTransferFrom',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'from', type: 'address' },
+      { internalType: 'address', name: 'to', type: 'address' },
+      { internalType: 'uint256', name: 'tokenId', type: 'uint256' },
+      { internalType: 'bytes', name: '_data', type: 'bytes' },
+    ],
+    name: 'safeTransferFrom',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'operator', type: 'address' },
+      { internalType: 'bool', name: 'approved', type: 'bool' },
+    ],
+    name: 'setApprovalForAll',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'bytes4', name: 'interfaceId', type: 'bytes4' }],
+    name: 'supportsInterface',
+    outputs: [{ internalType: 'bool', name: '', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'symbol',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [{ internalType: 'uint256', name: 'tokenId', type: 'uint256' }],
+    name: 'tokenURI',
+    outputs: [{ internalType: 'string', name: '', type: 'string' }],
+    stateMutability: 'pure',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'totalSupply',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'address', name: 'from', type: 'address' },
+      { internalType: 'address', name: 'to', type: 'address' },
+      { internalType: 'uint256', name: 'tokenId', type: 'uint256' },
+    ],
+    name: 'transferFrom',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function',
+  },
+] as const