wevm / frog Goto Github PK

Describe the bug

Although not explicitly defined in the spec, the frame payload is a JSON object. However, when Frog is debugging a frame app, it sends the POST request with Content-Type: text/plain. This breaks some servers that expect the payload to be application/json

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.7.7

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I wanted to build a frame that would dynamically generate text from the query params, I did and it's neat. Thanks for your framework, it's awesome.

However in the process of doing this, I noticed that your dev tools don't allow entering a custom URL.

Link to Minimal Reproducible Example

https://banner-frame.vercel.app/api/dev

Steps To Reproduce

Basically, my frame relies on query params. Here is an example of it working properly: https://warpcast.com/maurelian.eth/0x6ad5f98a

But I was unable to test using the frog dev tools because of the limitation.

Frog Version

0.5.7

TypeScript Version

5.4.2

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

https://frog.fm/platforms/bun

Instructions for scaffolding a Bun app seem to fail out of the box due to an import issue with @hono/node-server

"TypeError: Class extends value undefined is not a constructor or null
at /node_modules/@hono/node-server/dist/index.mjs:8:15"

Link to Minimal Reproducible Example

https://frog.fm/platforms/bun

Steps To Reproduce

1. bunx create-frog -t bun
2. Create "hello"
3. cd ./hello
4. bun install
5. Note "warn: incorrect peer dependency "[email protected]"
6. bun run dev

Frog Version

0.7.7

TypeScript Version

5.4.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

When setting imageOptions to have values that result in a 1:1 ratio, the debugger doesn't display correctly and still shows a 1.91:1 ratio.

Some example code (from a project that's initialized as Vercel project through Frog

export const app = new Frog({
  basePath: "/api",
  // Supply a Hub API URL to enable frame verification.
  // hubApiUrl: 'https://api.hub.wevm.dev',
  imageOptions: {
    width: 1140,
    height: 1140,
  },
});

Describe the bug

In warpcast when adding a url e.g caststorage.com without the protocol it converts it to http://caststorage.com. When a frame shares that same url, it throws an error similar to #180 because the protocol differs.

Link to Minimal Reproducible Example

https://warpcast.com/~/developers/frames?url=http://caststorage.com

Steps To Reproduce

Got to url above, click tx button and see error

Frog Version

0.7.13

TypeScript Version

^5.4.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

I created a minimal reproducible example.

This repository was started by running bunx create-frog -t vercel. Then the only change I did was extract the actual rendering of the frame into a separate file.

This all works fine when running bun run dev locally.

However, after deploying to Vercel (by running bun run deploy), the serverless function is crashing.

This is the full error log from Vercel

Error: Cannot find module '/var/task/api/Frame.js' imported from /var/task/api/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:332:11)
    at moduleResolve (node:internal/modules/esm/resolve:1029:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:876:12)
    at defaultResolve (node:internal/modules/esm/resolve:1242:79)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///var/task/api/Frame.js',
  code: 'ERR_MODULE_NOT_FOUND'
}
INIT_REPORT Init Duration: 284.92 ms	Phase: init	Status: error	Error Type: Runtime.ExitError
Error: Cannot find module '/var/task/api/Frame.js' imported from /var/task/api/index.js
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:332:11)
    at moduleResolve (node:internal/modules/esm/resolve:1029:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:876:12)
    at defaultResolve (node:internal/modules/esm/resolve:1242:79)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///var/task/api/Frame.js',
  code: 'ERR_MODULE_NOT_FOUND'
}
INIT_REPORT Init Duration: 359.00 ms	Phase: invoke	Status: error	Error Type: Runtime.ExitError
Error: Runtime exited with error: exit status 1

Docs currently say nothing about how frog code can be split, yet code splitting is leveraged in the internal playground.

That needs to be documented properly as I've seen many frames implementing unoptimal code-splitting, sometimes even breaking the build (#30), and which can unintentionally cause cyclic dependency issues.

Other refs: https://discord.com/channels/1156791276818157609/1212219334370529370/1225708808484032562

Describe the bug

broke recently, only matches on src starting with /

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

when satori is used, frame is rerended 3 times #35.

calling await c.req.json() yields the expected result only on the first render. on subsequent ones there is no request body, and thus execution reverts due to SyntaxError: Unexpected end of JSON input. this breaks the debugger.

note that this error is only triggered when satori is used. if a url is passed in image there is a single rerender and everything works as expected.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

• call await c.req.json()
• return a JSX element inside image

Frog Version

0.2.1

TypeScript Version

5.3.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

/**
 * Current supported chain IDs:
 * - 10: Optimism
 * - 8543: Base
 * - 7777777: Zora
 */
export type ChainIdEip155 = 10 | 8543 | 7777777

Base chainId listed as 8543 when it should be 8453.
ref: https://docs.base.org/network-information/#base-mainnet

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.4.7

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

imageAspectRatio is not documented in the docs.

It would be awesome for someone to document it properly!

Ref: https://discord.com/channels/1156791276818157609/1225764752093876264/1225777752720805898

Describe the bug

I've uncommented the export const runtime = 'edge' line and the frog debugger crashed.

Link to Minimal Reproducible Example

https://github.com/dalechyn/mini-repros/tree/main/frog-edge-issue

Steps To Reproduce

1. Fork the repro.
2. cd frog-edge-issue && pnpm dev
3. Navigate to localhost:3000/api/dev

Frog Version

0.2.1

TypeScript Version

5.0.4

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

Reproducible video:

Describe the bug

Will copy paste alot of stuff from the wevm discord thread https://discord.com/channels/1156791276818157609/1220449473575260232:

What i'm trying to create is a dynamic frame where I can pull in a variable from the URL and change the frame as I see fit. e.g. localhost:3000/api/variable

it loads the metadata and dev environment e.g. localhost:3000/api/variable/dev

but when i try and send a transaction to a contract i get a error code 400 (invalid url). the transaction works fine if i have the root url as '/' rather than '/:variable', so the issue isn't the transaction frame.

Here is a Warpcast dev tool link that showcases the issue in action:

https://warpcast.com/~/developers/frames?url=https%3A%2F%2Fminimal-reproduction-frog.vercel.app%2Fapi%2F5

@ dalechyn in the wevm discord suggested it might be hono routehandling/priority, so I swapped out the root frame and the transaction frame, but that didn't seem to fix the issue.
https://github.com/Seranged/minimal-reproduction-frog/blob/main/app/api/%5B%5B...routes%5D%5D/route.tsx

Thanks for your guys' help 🫡

Link to Minimal Reproducible Example

https://github.com/Seranged/minimal-reproduction-frog

Steps To Reproduce

Create a nextjs application that has a dynamic url in the root frame e.g.

app.frame('/:dynamicUrl', (c) => {

Create a transaction frame

app.transaction('/transaction', async (c) => {

Try perform the transaction on a deployed build

Frog Version

0.7.4

TypeScript Version

^5

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I'm using Vercel -> https://frog.fm/platforms/vercel and use Button.Mint -> https://frog.fm/intents/button-mint to create mint button using Warps. I tested on local it's work, it's showing the button.

But, if I tested it on dev frames (https://warpcast.com/~/developers/frames) it's not mint using Warps and the button changed into Button.Link (like action link).

Link to Minimal Reproducible Example

https://github.com/Mr94t3z/minters-leaderboard-frame

Steps To Reproduce

app.frame('/', (c) => {
  currentPage = 1; // Reset currentPage when navigating to the initial frame
  return c.res({
    action: '/leaderboard',
    image: '/nouns_film.jpg',
    intents: [
      <Button action="/leaderboard" value="leaderboard page">Leaderboard 📊</Button>,
      <Button.Mint
        target="eip155:7777777:0x060f3edd18c47f59bd23d063bbeb9aa4a8fec6df:69420"
      >
        Mint
      </Button.Mint>
    ],
  });
});

Frog Version

[email protected]

TypeScript Version

5.4.2

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I've encountered an issue where similar pieces of code produce different behaviors when rendering components. The direct usage of a custom component works as expected, but when the custom component is wrapped it doesn't render.

Link to Minimal Reproducible Example

https://github.com/Dom-Mac/minimal-repro-frame-components-issue/blob/main/src/index.tsx

Steps To Reproduce

Let's say there is a custom component as

function FrameContainer({ children }: { children?: JSX.Element | string }) {
  return (
    <div style={{...}}>
      {children}
    </div>
  )
}

Using it in this way works as expected

...
image: <FrameContainer>It works!</FrameContainer>,
...

Let's define a new component as

function Issue() {
  return <FrameContainer>Issue here!</FrameContainer>
}

The following renders a black image

...
image: <Issue/>,
...

Full code in the repo

Frog Version

0.6.0

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Reproducible example: https://github.com/dalechyn/mini-repros/tree/main/frog-request-spam
Video:

frog version: 0.2.1

Hey there! We are just about finished with our first plugin that can be used with frog and we were curious if there could be a new page or section in the docs to list those as a reference?

Describe the bug

Hi,

We have a problem where frog generated image is not shown when trying to post frame into warpcast. however image gets renrered when using frame validator.

I suspect that the problem is because og:image is incorrectly set to http://..., and it should be https://... in our case.

It seems that context.url is always set to http for some reason. How to force context.url to be correctly set to https, if server is running behind https proxy?

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.6.4

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

When i use the fetch data in image props,it's response the error:failed to pipe response.
My code like this:

app.frame("/", async (c) => {
  const { buttonValue, inputText, status } = c;
  console.log(buttonValue, inputText, status);
  const { data } = await getMyLiveGame(
    "0xa6ECB6dAf9Ed05764230Bf118B0705d85508f48c"
  );

  console.log(data, "data");
  return c.res({
    // action: "/result",
    image: (
      <div
        style={{
          width: "100%",
          height: "100%",
          background: "#000",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "column",
          color: "#fff",
          padding: "1rem",
          fontSize: "2rem",
        }}
      >
        <div>0000</div>
        <div>{data?.end || "8888"}</div>
      </div>
    ),
    intents: [
      // <TextInput placeholder="Enter custom fruit..." />,
      <Button.Transaction target="/play/left">Support Left</Button.Transaction>,
      <Button.Transaction target="/play/right">
        Support Right
      </Button.Transaction>,
      <Button>Refresh</Button>,
    ],
  });
});

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

latest

TypeScript Version

^5

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

use nextjs 14.1.0

Describe the bug

Used to be able to connect my Farcaster, but now I am unable to.
Warpcast side looks working, but getting an error on frame server

Link to Minimal Reproducible Example

No response

Steps To Reproduce

1. Hit connect farcaster in top right of local debugger
2. Scan with phone
3. Confirm and pay $2 to connect from warpcast
4. Wait for broadcast, says success from warpcast side\
5. See error on console, and local debugger just stays with QR code up

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Install Frog and Hono using latest Next.js 14 -- bun run dev runs fine without a Hub URL. However, when I provide any URL, it will fail with a type error.

Link to Minimal Reproducible Example

bun run dev

Steps To Reproduce

bun run dev, navigate to http://localhost:3000/api/dev, click any button, error is thrown.

Frog Version

0.2.4

TypeScript Version

^5

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Link to Minimal Reproducible Example

No response

Steps To Reproduce

1. Start local debugger
2. Connect farcaster with mobile:
   

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Im including dynamic data in the Buttons like this
<Button value={someVariable}>test {'1'} {'2'}</Button>
Seems to work but I'm getting commas rendered in the buttons.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Just include this button
<Button value={someVariable}>test {'1'} {'2'}</Button>

Frog Version

latest

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Frame verification doesn't work in local dev debugger.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

1. yarn create frog -t next
2. Add the hub api:
   
3. Run the app, open dev server, and connect farcaster account
4. Interact with the frame
5. See error in console with verification:
   

Frog Version

0.2.14

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I'm trying to use the default template with deno. Given that hono runs perfectly on deno, i figured this library would also work but unfortunately that wasn't the case for actions.

Link to Minimal Reproducible Example

https://github.com/waptik/frog-frame-example/tree/8aba2bb45b54e5456995ee6c5888ea606c91cff9

Steps To Reproduce

1. Make sure you have deno installed
2. clone the repo
3. cd inside the cloned repo
4. run deno task dev and visit http://localhost:8000/dev
5. click on any action button and see error logs inside your terminal

Frog Version

0.8.1

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

I love for this library to have full support for deno without BYONM

Getting serveral issues with nextjs

running create from docs bunx create-frog -t next results in:

node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "paths[0]" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:405:5)
    at validateString (node:internal/validators:162:11)
    at resolve (node:path:1097:7)
    at getTemplates (file:///private/tmp/bunx-501-create-frog@latest/node_modules/create-frog/_lib/utils/getTemplates.js:4:27)
    at file:///private/tmp/bunx-501-create-frog@latest/node_modules/create-frog/_lib/bin.js:9:19
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async loadESM (node:internal/process/esm_loader:34:7)
    at async handleMainPromise (node:internal/modules/run_main:106:12) {
  code: 'ERR_INVALID_ARG_TYPE'
}

then when i do a manual install and just copy the exact docs from nextjs page i get this error

TypeError: Cannot read properties of undefined (reading '__type')
    at eval (webpack-internal:///(rsc)/./node_modules/frog/_lib/utils/parseIntents.js:34:22)
    at parseIntent (webpack-internal:///(rsc)/./node_modules/frog/_lib/utils/parseIntents.js:45:7)
    at eval (webpack-internal:///(rsc)/./node_modules/frog/_lib/utils/parseIntents.js:16:57)
    at Array.map (<anonymous>)
    at eval (webpack-internal:///(rsc)/./node_modules/frog/_lib/utils/parseIntents.js:16:48)
    at parseIntents (webpack-internal:///(rsc)/./node_modules/frog/_lib/utils/parseIntents.js:21:7)
    at eval (webpack-internal:///(rsc)/./node_modules/frog/_lib/frog-base.js:208:177)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async dispatch (webpack-internal:///(rsc)/./node_modules/hono/dist/compose.js:34:27)
    at async eval (webpack-internal:///(rsc)/./node_modules/hono/dist/hono-base.js:246:33)
    at async /Users/charlieblackstock/repos/farworld/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:63809
    at async eU.execute (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:53964)
    at async eU.handle (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:65062)
    at async doRender (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:1333:42)
    at async cacheEntry.responseCache.get.routeKind (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:1543:40)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:1463:28)
    at async DevServer.renderPageComponent (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:1856:24)
    at async DevServer.renderToResponseImpl (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:1894:32)
    at async DevServer.pipeImpl (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:911:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/next-server.js:271:17)
    at async DevServer.handleRequestImpl (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/base-server.js:807:17)
    at async /Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/dev/next-dev-server.js:331:20
    at async Span.traceAsyncFn (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/trace/trace.js:151:20)
    at async DevServer.handleRequest (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/dev/next-dev-server.js:328:24)
    at async invokeRender (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/lib/router-server.js:163:21)
    at async handleRequest (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/lib/router-server.js:342:24)
    at async requestHandlerImpl (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/lib/router-server.js:366:13)
    at async Server.requestListener (/Users/charlieblackstock/repos/farworld/node_modules/next/dist/server/lib/start-server.js:140:13)
    ```

Describe the bug

Hi,

I'm currently experiencing an issue where i'm trying to deploy a frame with a post_url that has a one or more dynamic parameters in the URL. Current issue is, that post_url is expecting it to be less than 256 bytes

I was talking on discord today with one of the frog mods and they even casted on warpcast for asking a possible solution ( see here ), which seems to be to use state that allows up to 4096 bytes.

The last point here is, whether or not frog supports states. That is, how can we utilise frog to use dynamic parameters if the current limit for post_url is 256 bytes, and is there a plan of implementing this in the near future?

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.8.1

TypeScript Version

5.0.4

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

When using NodeJS, starting the app give the following error:

TypeError: Response body object should not be disturbed or locked
    at extractBody (node:internal/deps/undici/undici:5676:17)
    at new Request (node:internal/deps/undici/undici:6673:48)
    at new Request (file:///app/node_modules/@hono/node-server/dist/index.mjs:17:5)
    at file:///app/src/index.tsx:1:1247
     at dispatch (file:///app/node_modules/hono/dist/compose.js:29:23)
    at file:///app/node_modules/hono/dist/compose.js:30:20
    at logger2 (file:///app/node_modules/hono/dist/middleware/logger/index.js:35:11)
    at dispatch (file:///app/node_modules/hono/dist/compose.js:29:23)
    at file:///app/node_modules/hono/dist/compose.js:30:20
    at file:///app/node_modules/frog/_lib/middlewares/neynar.js:33:15

Describe the bug

when working locally I don't have access to the bindings defined in wrangler.toml. If frog dev I get
console.log('env', c.env); // {}
If I run "wrangler dev src/index.tsx"
console.log('env', c.env); // {ENV_VAR: 'test', FRAMES_BUCKET: R2Bucket}... etc, all the bindings

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Receiving Cloudflare error workers.api.error.script_too_large [code: 10027] after adding FrogUI

Link to Minimal Reproducible Example

TypeScript Playground

Steps To Reproduce

Trying to get 🐸 working with Cloudflare Workers

pnpm create frog -t cloudflare-worker

In index.tsx changed:

const manifest = await import('__STATIC_CONTENT_MANIFEST')
const serveStaticOptions = { manifest, root: './' }

to:

const serveStaticOptions = { root: './', manifest: {} };

Added the top level main field to workers.toml:

main = "workers-site/index.js"

pnpm wrangler deploy --minify src/index.tsx

And it successfully deployed:

Total Upload: 2334.26 KiB / gzip: 831.76 KiB

Then I added ui.tsx, imported it, and added some styles in index.tsx

import { Box, Heading, VStack, vars } from './ui.js';

Attempted to deploy the updates:

pnpm wrangler deploy --minify src/index.tsx

And it is failing with the following:

▲ [WARNING] We recommend keeping your script less than 1MiB (1024 KiB) after gzip. Exceeding this can affect cold start time. Consider using Wrangler's `--minify` option to reduce your bundle size.

▲ [WARNING] Here are the 5 largest dependencies included in your script:

- node_modules/.pnpm/[email protected][email protected]/node_modules/frog/_lib/ui/icons.js - 1841.18 KiB
- node_modules/.pnpm/[email protected]/node_modules/workers-og/dist/resvg-LFIOYO65.wasm - 1341.69 KiB
- node_modules/.pnpm/[email protected]/node_modules/workers-og/dist/index.js - 400.18 KiB
- node_modules/.pnpm/[email protected]/node_modules/workers-og/dist/yoga-ZMNYPE6Z.wasm - 86.58 KiB
- node_modules/.pnpm/@[email protected]/node_modules/@scure/bip39/esm/wordlists/korean.js - 71.91 KiB

If these are unnecessary, consider removing them

✘ [ERROR] A request to the Cloudflare API (/accounts/4e1a03d9fee3ff0defb22eb9feb2c42e/workers/scripts/frog-template) failed.

workers.api.error.script_too_large [code: 10027]

Total Upload: 4185.50 KiB / gzip: 1082.08 KiB

Frog Version

0.8.1

TypeScript Version

5.4.5

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

What: I get a JSX type errors when nesting Frog UI elements.
When: using Frog + Next js

package.json

  "dependencies": {
    "frog": "latest",
    "hono": "^4",
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "vercel": "^32.4.1"
  }

Link to Minimal Reproducible Example

https://github.com/colinnielsen/frog-type-error

Steps To Reproduce

1. git clone https://github.com/colinnielsen/frog-type-error.git
2. cd frog-type-error
3. npm i
4. code .
5. hover app/api/[[...routes]]/route.tsx

Frog Version

0.8.0

TypeScript Version

5.4.2

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

This breaks frame composition with button level actions (can only compose with frames in the same server)

This pic describes the issue:

https://github.com/wevm/frog/blob/main/src/utils/parseIntents.ts#L50

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Maybe this isn't possible but I wanted to create shared components for rendering images, which i was able to do without frog but now i just get internal server errors.

You can see how horsefacts does it in the floor sweep repo:
Shared Component
https://github.com/horsefacts/floor-sweep-frame/blob/main/src/app/components/Card.tsx
Using component
https://github.com/horsefacts/floor-sweep-frame/blob/main/src/app/api/images/bestListing/route.tsx

However if I do this same thing, it won't work. Might have to do with how hono processes these routes, but just wanted to see if there was a potential fix for this.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.6.1

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

What I expect is deriveState to log hello in the console. However, it doesn't get logged.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

app.frame('/', async (c) => {
  c.deriveState(() => {
    console.log('hello!'); // this doesn't get called
  });
  return c.res({
    imageAspectRatio: '1:1',
    browserLocation: 'https://mint.club',
    image: 'https://i.imgur.com/7Sww7lT.gif',
    intents: [
      <Button action="/erc20">🪙 Deploy ERC-20</Button>,
      <Button action="/erc1155">🖼️ Deploy ERC-1155</Button>,
    ],
  });
});

Frog Version

0.7.4

TypeScript Version

5.3.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

The FrameContext.res({ {image, ... }) function param incorrectly sanitizes "image" URL inputs as HTML.

e.g. If you pass in a URL with an image URL with &-separated query params, the &'s will be replaced with "&" as would be expected for HTML input.

Steps To Reproduce

FrameContext.res({ image: "example.com?hello=world&foo=bar" }) results in an image url exposed by the Frog debugger as
"example.com?hello=world&foo=bar"

Frog Version

latest

TypeScript Version

n/a

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

I saw some sanitized ampersands in this issue as well, not sure if related

Describe the bug

According to the spec, fc:frame:post_url is an optional property. If not set, the current frame URL should be used.

When debugging a non-Frog-based frame app in Frog devtools, devtools are trying to send a request to undefined/action if fc:frame:post_url is not set.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Use a simple frame response that doesn't have fc:frame:post_url

Frog Version

0.7.7

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

frame.js offers getAddressForFid and getUserDataForFid.

Would it make sense to have similar in frog? Or is this rather not frog's responsibility to provide hub helpers?

Describe the bug

I'm loading an image from IPFS but when i try to test the frame within the Warpcast validator i get this error:

validateFrameEmbed 400 - Frame image error: Invalid ContentType: 'text/html; charset=UTF-8'.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.8.0

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

README file of this repository links to the landing page website instead of docs page

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.7.13

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Cannot read properties of undefined (reading 'startsWith')

Although it's unclear why the image is not defined here (the imageUrl though is present)

Even if it's a problem with the frame server, it shouldn't take down the debugger UI. Currently, when this happens, the debugger UI gets into a permanently broken state.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.7.7

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

In the documentation for Frog it says that value is one of the props for Button.Transaction: https://frog.fm/intents/button-transaction#value-optional

However in the current source code it is not there: https://frog.fm/intents/button-transaction#value-optional

I think having this prop would be really beneficial for handling transaction amounts via Button values that can be handled in app.transaction routes!

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.6.0

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I run npx frog --proxy ngrok expecting it to log the ngrok URL but instead it throws the following error:

Error: Ngrok Error: Error: failed to connect session: Usage of ngrok requires a verified account and authtoken.

When I run npx frog dev, then ngrok http 5173 in another terminal window, I get the expected result.

To verify a valid configuration of ngrok, I ran ngrok config check and get the response Valid configuration file at /Users/Greg/.ngrok2/ngrok.yml.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.4.4

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I have 2 frames one is at the root url (https://caststorage-git-staging-sammdec.vercel.app/), it uses pages and frame co-location in the next.js app it resides in this works fine when testing in the warpcast frame validator.

However, I have created a new frame in the same app at a non root page (https://caststorage-git-staging-sammdec.vercel.app/bot), the frame validator can see the frame on page load and displays it correct however on pressing the subscibe button to trigger a tx request I receive a 500 error from frog with the following error message

Error: Invalid frame url: https://caststorage-git-staging-sammdec.vercel.app/bot. Expected: https://caststorage-git-staging-sammdec.vercel.app/api/bot-frame/subscribe.

Link to Minimal Reproducible Example

https://caststorage-git-staging-sammdec.vercel.app/bot

Steps To Reproduce

• Go to https://warpcast.com/~/developers/frames?url=https://caststorage-git-staging-sammdec.vercel.app/bot
• Click subscribe
• See spinner and error shown

Frog Version

0.7.4

TypeScript Version

5.4.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Using await c.req.json() in any route will yield the following error.

Possibly related to this issue: #120

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Currently, the mode depends on the system default. It would be cool to have a switch to change it manually.

Describe the bug

I am attempting to use a Button.Transaction in a frame. The expected behavior is that the transaction button will be rendered in Frog's Frame Preview. The observed behavior is that no button is visible in the Frame Preview, although fc:frame:button: with its associated values does appear in the Dev Panel. The button is visible when the same frame is viewed in the Farcaster Frame Validator.

Link to Minimal Reproducible Example

https://gist.github.com/etherik/41450fff77957b1d5ecf0e71770a1111

Steps To Reproduce

1. Scaffold a new project with yarn create frog
2. Replace index.tsx with the the code from this gist
3. Run the frog dev server with yarn dev.
4. Navigate to the Frame Preview at the dev server URL, e.g. http://localhost:5173/api
5. Observe that the Button.Transaction button is not visible.

Frog Version

0.3.0

TypeScript Version

5.3.3

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

Screen A has a transaction button with target and action props.
After the transaction is completed, I'm expecting to get pushed to the screen specified in action, Screen B.
Instead, Screen A is reloaded.

(the above works as expected in the Warpcast Frame debugger)

Link to Minimal Reproducible Example

https://github.com/gskril/frog-action-debug

Steps To Reproduce

Clone the above example, bun install, bun dev, then visit http://localhost:5173/dev

Press "Send 0.00001 ETH". I used metamask.

Watch the frame reload on the "start" screen rather than redirect to the "end" screen as expected.

Frog Version

0.7.13

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

This seems to happen mostly when an emoji is present in the string but not only.

Here is an example error message:

Failed to load dynamic font for ₿◨ . Error: Error: Failed to download dynamic font. Status: 400

Here ₿◨ shows up even though it's not present in the original JSX.

I've tried using gzip instead and it fixes the issue but produce a too large URL for proper browser support

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Frog Version

0.5.5

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

I have defined a new route on "/" while the frame is on "/api". I want the "/" to render normal HTML while leaving the "/api" route to render the frame.

This works locally and on stackblitz but does not work when I deploy to vercel. It fails in two ways:

1. The "/" route returns "not-found" when I try to get on the browser. The get('/') path apparently doesn't get built
2. The imported jsx is not built so it is unable to find the "../images/welcome.jsx

Both work locally but when deployed on vercel, it breaks

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/Complexlity/frog-init

Steps To Reproduce

No response

Frog Version

0.21.0

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

Describe the bug

when running frog dev outside the project directory, the terminal will cause permissions to flag as devtools works its way down the disk. eventually this will fail as it exhausts memory.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

run frog dev in a user home directory

Frog Version

0.7.6+

TypeScript Version

No response

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response