Mini-Apps

Mini-Apps act the same as Composer Actions, with a difference that such can be linked in a frame via deeplink.

Overview

At a glance:

User sees a frame in the App client's feed or direct message.
The frame has a deeplink button that shows the Mini-App on click.

Example

Here is a trivial example of how to expose a Mini-App with a frame. We will break it down below.

src/index.tsx

import { Frog, Button } from 'frog'
 
export const app = new Frog({ title: 'Frog Frame' })
 
app.frame((c) => {
  return c.res({
    image: '...',
    intents: [<Button.MiniApp href="https://link-to-my-mini-app"/>]
  })
})

You can also add prompt param to the props to hint the App Client to render the Mini-App without opening it in full-scren in-app browser, but as a drawer.

Client-Side Helpers

Frog exports various helper to post the message to the window.parent.

Check other helpers here.

src/index.tsx

import { sendTransaction, contractTransaction, signTypedData } from 'frog/web'
 
function App() {
  return (
    <>
      <button onClick={() => sendTransaction({/**/})}>
        Send Tx
      </button>
      <button onClick={() => contractTransaction({/**/})}>
        Contract Tx
      </button>
      <button onClick={() => signTypedData({/**/})}>
        Sign typed data
      </button>
    </>
  )
}