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 action="/miniapp"/>]
    })
  })
  // or .composerAction
	.miniApp(
		"/miniapp",
		(c) => c.res({ title: "Mini-App", url: `${process.env.VERCEL_URL ?? 'http://localhost:3000'}/your-mini-app-page` }),
		{
			name: "Mini-App",
			description: "Mini-App",
			imageUrl: "",
			icon: "log",
		},
	);

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>
    </>
  )
}