XMTP Frame Post Validation

[neekolas]

What changed? Why?

Based on conversations with @Zizzamia I put together an alternate version of #116 with a more narrowly scoped method for validating XMTP post messages. This one does have runtime dependencies, but I've overhauled @xmtp/frames-validator so that it no longer depends on xmtp-js. That both shrinks the bundle size significantly and makes it work in RN and the browser out of the box. There are no more dependencies that rely on window.crypto or that call out to WASM code.

For RN, it will need a version that supports Bigints, either via polyfill or by using Hermes.

The way you would need to call into it would be something like this:

```ts
import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit';
import { isXmtpFrameRequest, getXmtpFrameMessage } from '@coinbase/onchainkit/xmtp';
import { NextRequest, NextResponse } from 'next/server';

async function getResponse(req: any): Promise<NextResponse> {
  // Step 2. Read the body from the Next Request
  const body: FrameRequest = await req.json();
  if (isXmtpFrameRequest(body)) {
    const { isValid, message } = await getXmtpFrameMessage(body);
    // ... do something with the message if isValid is true
  } else {
    const { isValid, message } = await getFrameMessage(body, {
      neynarApiKey,
    });
    // ... do something with the message if isValid is true
  }
}

export async function POST(req: NextRequest): Promise<Response> {
  return getResponse(req);
}

How has it been tested?

Unit tests and I've been trying it locally

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2024 6:22pm

[Zizzamia]

Where can I read this code?

[Zizzamia]

Also not sure if this should be a dependencies or peerDependencies 🤔

Our leaning is to be the second

[neekolas]

https://github.com/xmtp/xmtp-node-js-tools/tree/main/packages/frames-validator

[neekolas]

If it's a peerDependency then we're closer to the approach in #116 where we would want the caller to pass in some instance of the validator

[neekolas]

The developer experience is a little smoother if you only need to depend on onchainkit, but both are fine

[Zizzamia]

I think is about choice, on what API to use.

OnchainKit contains some code might need React, and other it doesn't. Some code it needs Viem, and other it doesn't.

That's why we referred that as peerDependency.

In the documentation we will create a section called XMTP, where we will write that all those function need

yarn add @xmtp/frames-validator

to be used.

And then after that folks can do

import { getXmtpFrameMessage }  from '@coinbae/onchainkit/xmtp'

What do you think?

[Zizzamia]

Our goal is to make sure that folks will need the PROTO dependencies https://bundlephobia.com/package/@xmtp/frames-validator@0.4.0 only when using XMTP.

[neekolas]

OK. You've sold me on a peer dependency approach. That seems fine as long as it's well documented.

Then we can add something like import { getOpenFramesMessage } from '@coinbase/onchainkit/open-frames' as soon as there is a 1.0 version of that spec. It can call into this code for the XMTP implementation of the spec. But no need to wait on that.

[Zizzamia]

Love that

[Zizzamia]

Let's have his one file for getXmtpFrameMessage, so we keep things clean.

[Zizzamia]

@neekolas, I think we have a clear direction. If you don't mind let's start polishing this PR so we can get this approved and merged by Monday.

[neekolas]

@Zizzamia I have updated this PR to move everything into a xmtp folder. I've made the Frames Validator a peerDependency, added some tests, and confirmed that the Frames validator works in both ESM and CommonJS environments.

Working on updating the README README is updated

[Zizzamia]

LFG

[Zizzamia]

@neekolas, I just realized there is a test failing

FAIL src/xmtp/validation.test.ts
  ● Console

    console.log
      0x3AB6F6426210b5F52B780a0508ff6543d80cF317 !== foo

      at validateFramesPost (node_modules/src/validation.ts:32:[13](https://github.com/coinbase/onchainkit/actions/runs/7935914530/job/21708541452#step:5:14))

  ● isXmtpFrameRequest › should return false for farcaster requests

    expect(received).toBe(expected) // Object.is equality

    Expected: false
    Received: undefined

      77 |         trustedData: {},
      78 |       }),
    > 79 |     ).toBe(false);
         |       ^
      80 |   });
      81 |
      82 |   it('should return false for other client protocols', () => {

      at Object.<anonymous> (src/xmtp/validation.test.ts:79:7)

thoughts on this?

[Zizzamia]

Also, would you mind move the docs into site/ folder please. So we avoid Merge Conflicts.

[neekolas]

@Zizzamia Moved the docs to the site/ folder. Not sure if I need to make any other changes to make it show up in the right places.

Also fixed that failing test

[Zizzamia]

@neekolas incredible work 👏

I am going to follow up with some more polishing from my side and cutting the release.