wevm · ggomaeng · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/site/pages/concepts/middleware.mdx b/site/pages/concepts/middleware.mdx
@@ -160,6 +160,61 @@ app.frame('/foo', (c) => {/* ... */})
 app.frame('/foo/bar', (c) => {/* ... */})
 ```
 
+### Example: TransactionResponse
+
+You can also write a custom middleware to add additional params to Frog's TransactionResponse (mimics [`Transaction Specs API`](https://warpcast.notion.site/Frame-Transactions-Public-9d9f9f4f527249519a41bd8d16165f73#8235c261091e4499b417e71dd1753e05)).
+
+```tsx twoslash
+// @noErrors
+import { Frog } from 'frog'
+
+export const app = new Frog()
+
+app.transaction( // [!code focus]
+  '/mint', // [!code focus]
+  async (c, next) => { // [!code focus]
+    await next(); // [!code focus]
+    const txParams = await c.res.json(); // [!code focus]
+    txParams.attribution = false; // [!code focus]
+    c.res = new Response(JSON.stringify(txParams), { // [!code focus]
+      headers: { // [!code focus]
+        'Content-Type': 'application/json', // [!code focus]
+      }, // [!code focus]
+    }); // [!code focus]
+  }, // [!code focus]
+  (c) => {/* ... */} // [!code focus]
+); // [!code focus]
+```
+
+### Example: Modifying the FrameResponse
+
+You can write a custom middleware to modify the response to add extra [open-frames metadata](https://github.com/open-frames/standard) to fit your needs.
+
+> Since the Frames Spec is still new (launched on 1/26/24) and hasn't hit a stable v1 yet (current vNext), we don't want to introduce additional standards to Frog that might conflict with or diverge from what the Farcaster team and community has planned. In addition, the vast majority of Frame usage at the moment is via Warpcast (and Farcaster) so we want to make sure Frog serves that main audience first.
+
+```tsx twoslash
+// @noErrors
+import { Frog } from 'frog'
+
+export const app = new Frog()
+
+app.use(async (c, next) => { // [!code focus]
+  await next(); // [!code focus]
+  const isFrame = c.res.headers.get('content-type')?.includes('html'); // [!code focus]
+  if (isFrame) { // [!code focus]
+    let html = await c.res.text(); // [!code focus]
+    const metaTag = '<meta property="of:accepts:xmtp" content="2024-02-01" />'; // [!code focus]
+    html = html.replace(/(<head>)/i, `$1${metaTag}`); // [!code focus]
+    c.res = new Response(html, { // [!code focus]
+      headers: { // [!code focus]
+        'content-type': 'text/html', // [!code focus]
+      }, // [!code focus]
+    }); // [!code focus]
+  } // [!code focus]
+}); // [!code focus]
+```
+
+
 ## Community Middleware
 
 Middleware is one of the most powerful pieces of Frog. This section showcases community-built middleware that you can use in your Frog apps.

diff --git a/site/pages/reference/frog-transaction-response.mdx b/site/pages/reference/frog-transaction-response.mdx
@@ -8,6 +8,8 @@ There are three types of responses:
 - [Contract Transaction (`c.contract`)](#contract-transaction-ccontract): Convinience method to **invoke a contract function** (with inferred types & automatic encoding).
 - [Raw Transaction (`c.res`)](#raw-transaction-cres): Low-level method to **send raw transaction** (mimics the [Transaction Spec API](https://warpcast.notion.site/Frame-Transactions-Public-Draft-v2-9d9f9f4f527249519a41bd8d16165f73?pvs=4)).
 
+If you want to pass additional parameters to the `TransactionResponse`, refer to the [example of transaction middleware](/concepts/middleware#example-transactionresponse).
+
 ```tsx twoslash
 // @noErrors
 import { Frog, parseEther } from 'frog'
@@ -375,4 +377,5 @@ app.transaction('/raw-send', (c) => {
     }, // [!code focus] 
   }) 
 })
-```
+```
+import { request } from "http"