chore: docs mini-apps, helpers (#512)

Author: dalechyn

site/pages/concepts/client-side-helpers.mdx

@@ -0,0 +1,98 @@
+# Client-Side Helpers
+
+As you may know, Frog was initially built as a backend-only library.
+With the recent features in Farcaster, Composer Actions and Mini Apps were introduced.
+
+To keep up with the changes, Frog adds helpers for your web application to communicate with the parent iFrame.
+
+[See the spec](https://warpcast.notion.site/Miniapp-Transactions-1216a6c0c10180b7b9f4eec58ec51e55)
+
+## Creating a Cast (Composer Actions)
+
+```tsx twoslash
+// @noErrors
+import { createCast } from 'frog/web'
+ 
+export function App() {
+  return (
+    <button
+      onClick={() =>
+        createCast({
+          text: 'Hi!',
+          embeds: []
+        })
+      }
+    >
+      create cast
+    </button>
+  )
+}
+```
+
+## Requesting a transaction
+
+```tsx twoslash
+// @noErrors
+import { contractTransaction, sendTransaction } from 'frog/web'
+import { erc20Abi } from 'viem'
+ 
+export function ContractTransactionApp() {
+  return (
+    <button
+      onClick={() =>
+        contractTransaction({
+          abi: erc20Abi,
+          functionName: 'approve',
+          args: ['0x0000000000000000000000000000000000000000', 1n],
+          address: '0x0000000000000000000000000000000000000000'
+        })
+      }
+    >
+      contract tx
+    </button>
+  )
+}
+
+export function SendTransactionApp() {
+  return (
+    <button
+      onClick={() =>
+        sendTransaction({
+          to: '0x0000000000000000000000000000000000000000',
+          value: 1n
+        })
+      }
+    >
+      send tx
+    </button>
+  )
+}
+```
+
+## Requesting a signature
+
+```tsx twoslash
+// @noErrors
+import { signTypedData } from 'frog/web'
+ 
+export function SignTypedDataApp() {
+  return (
+    <button
+      onClick={() =>
+        signTypedData({
+          chainId: 'eip155:84532',
+          types: {
+            Swamp: [{ name: 'frog', type: 'string' }],
+          },
+          primaryType: 'Swamp',
+          message: {
+            frog: 'Robert',
+          },
+        })
+      }
+    >
+      sign data
+    </button>
+  )
+}
+```

site/pages/concepts/composer-actions.mdx

@@ -54,6 +54,8 @@ app.composerAction(
 ### Client-Side Helpers
 Frog exports `createCast` helper to post the message to the `window.parent`.
 
+Check other helpers [here](/concepts/client-side-helpers).
+
 ```tsx twoslash [src/index.tsx]
 // @noErrors
 import { createCast } from 'frog/web'

site/pages/concepts/mini-apps.mdx

@@ -0,0 +1,66 @@
+# Mini-Apps
+
+Mini-Apps act the same as [Composer Actions](/concepts/composer-actions), with a difference
+that such can be linked in a frame via deeplink.
+
+## Overview
+
+At a glance:
+
+1. User sees a frame in the App client's feed or direct message.
+2. The frame has a deeplink button that shows the Mini-App on click.
+
+:::warning
+Since Frog is not a Client-Side Framework, we recommend using a separate Frontend for the actual Mini-App.
+
+If you want to keep both Frog and Mini-App in one project, we recommend starting with [Next.JS](/platforms/next).
+:::
+
+## Example
+
+Here is a trivial example of how to expose a Mini-App with a frame. We will break it down below.
+
+```tsx twoslash [src/index.tsx]
+// @noErrors
+/** @jsxImportSource hono/jsx */
+// ---cut---
+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](/concepts/client-side-helpers).
+
+```tsx twoslash [src/index.tsx]
+// @noErrors
+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>
+    </>
+  )
+}
+```

site/vocs.config.tsx

@@ -153,6 +153,10 @@ export default defineConfig({
             text: 'Cast Actions',
             link: '/concepts/cast-actions',
           },
+          {
+            text: 'Client-Side Helpers',
+            link: '/concepts/client-side-helpers',
+          },
           {
             text: 'Composer Actions',
             link: '/concepts/composer-actions',
@@ -161,6 +165,10 @@ export default defineConfig({
             text: 'Multi-step Cast Actions',
             link: '/concepts/multi-step-cast-actions',
           },
+          {
+            text: 'Mini-Apps',
+            link: '/concepts/mini-apps',
+          },
           {
             text: 'Error Handling',
             link: '/concepts/error-handling',