Frog.transaction Context

The c object is the parameter of the route handlers. It contains context for the transaction route.

import { Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  return c.send({/* ... */})
})

address

Type: string | undefined

The address of the wallet connected by the user after pressing the button to do the transaction.

This is the wallet address the user executes the transaction with.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { address } = c
  return c.send({/* ... */})
})

buttonIndex

Type: number

The index of the button that was previously clicked.

For example, if the user clicked "Banana", then buttonIndex will be 2.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a fruit.
      </div>
    ),
    intents: [
      <Button.Transaction
        target="/send-ether"
        value="apple"
      >
        Apple
      </Button.Transaction>,
      <Button.Transaction
        target="/send-ether"
        value="banana"
      >
        Banana
      </Button.Transaction>,
    ]
  })
})
 
app.transaction('/send-ether', (c) => {
  const { buttonIndex } = c
  return c.send({/* ... */})
})

buttonValue

Type: string

The value of the button that was previously clicked.

For example, if the user clicked "Banana", then buttonValue will be "banana".

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select a fruit.
      </div>
    ),
    intents: [
      <Button.Transaction
        target="/send-ether"
        value="apple"
      >
        Apple
      </Button.Transaction>,
      <Button.Transaction
        target="/send-ether"
        value="banana"
      >
        Banana
      </Button.Transaction>,
    ]
  })
})
 
app.transaction('/send-ether', (c) => {
  const { buttonValue } = c
  return c.send({/* ... */})
})

contract

Type: TransactionResponseFn<ContractTransactionParameters>

Contract transaction response. See more.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/mint', (c) => {
  return c.contract({/* ... */})
})

error

Type: (error: BaseError) => TypedResponse

Error response.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/', (c) => {
  return c.error({/* ... */})
})

frameData

Type: FrameData

Data from the frame that was passed via the POST body from a Farcaster Client. See more.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { frameData } = c
  const { castId, fid, messageHash, network, timestamp, url } = frameData
  return c.send({/* ... */})
})

initialPath

Type: string

Initial/start path of the frame set.

If the user clicks <Button.Reset>, they will be directed to this URL.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { initialPath } = c
  return c.send({/* ... */})
})

inputText

Type: string

The value of the input that was previously interacted with.

For example, if the user typed "Banana", then inputText will be "Banana".

import { Button, Frog, TextInput } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Send Ether
      </div>
    ),
    intents: [
      <TextInput placeholder="Value (ETH)" />,
      <Button target="/send-ether">Send</Button>,
    ]
  })
})
 
app.transaction('/send-ether', (c) => {
  const { inputText } = c
  return c.send({/* ... */})
})

previousButtonValues

Type: string[]

The data of the previous intents.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select your fruit
      </div>
    ),
    intents: [
      <Button.Transaction
        target="/send-ether"
        value="apple"
      >
        Apple
      </Button.Transaction>,
      <Button.Transaction
        target="/send-ether"
        value="banana"
      >
        Banana
      </Button.Transaction>,
    ]
  })
})
 
app.transaction('/send-ether', (c) => {
  const { buttonValue, previousButtonValues } = c
  console.log(previousButtonValues)
  ['apple', 'banana']
  return c.send({/* ... */})})

previousState

Type: State

The state of the previous frame.

import { Button, Frog } from 'frog'
 
type State = {     
  values: string[] 
} 
 
export const app = new Frog<{ State: State }>({ 
  initialState: { 
    values: [] 
  } 
}) 
 
app.frame('/', (c) => {
  const { buttonValue, deriveState } = c
  const state = deriveState(previousState => { 
    if (buttonValue) previousState.values.push(buttonValue)
  })
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        {values.map(value => <div>{value}</div>)}
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>, 
      <Button value="banana">Banana</Button>,
      <Button.Transaction target="/send-ether">Send</Button.Transaction>,
    ]
  })
})
 
app.transaction('/send-ether', (c) => {
  const { previousState } = c
  return c.send({/* ... */})
})

req

Type: Request

Hono request object.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { req } = c
  return c.res({/* ... */})
})

res

Type: TransactionResponseFn<TransactionParameters>

Raw transaction response. See more.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  return c.res({/* ... */})
})

send

Type: TransactionResponseFn<SendTransactionParameters>

Send transaction response. See more.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  return c.send({/* ... */})
})

var

Type: HonoContext['var']

Extract a context value that was previously set via set in Middleware.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.use(async (c, next) => {
  c.set('message', 'Frog is cool!!')
  await next()
})
 
app.transaction('/send-ether', (c) => {
  const message = c.var.message
  return c.send({/* ... */})
})

verified

Type: boolean

Whether or not the frameData (and buttonIndex, buttonValue, inputText) was verified by the Farcaster Hub API.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { verified } = c
  return c.send({/* ... */})
})

url

Type: string

Current URL.

import { Button, Frog } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.transaction('/send-ether', (c) => {
  const { url } = c
  return c.send({/* ... */})
})