NextJS dynamic urls in root breaking transaction button

[Seranged]

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

[christopherwxyz]

+1, have had the same issue.

[chuckstock]

+1 dynamic routes aren't working with nextjs

[ggomaeng]

Maybe this PR #184 fixed this? I cloned your repo @Seranged with the latest version of frog (0.7.13), deployed it on vercel, but I couldn't reproduce it.

Here is the link: https://warpcast.com/~/developers/frames?url=https%3A%2F%2Fminimal-reproduction-frog-pearl.vercel.app%2Fapi%2F1

Didn't change the code much but here it is:

/** @jsxImportSource frog/jsx */

import { Button, Frog, TextInput, parseEther } from "frog";
import { pinata } from "frog/hubs";
import { handle } from "frog/next";
import { serveStatic } from "frog/serve-static";
import { devtools } from "frog/dev";

const app = new Frog({
  verify: false,
  basePath: "/api",
  hub: pinata(),
  browserLocation: "/",
});

app.transaction("/transaction", async (c) => {
  return c.send({
    chainId: "eip155:8453",
    to: "0x6f6bEeA71BF5dbF95e3EaB51b7e87209b06f8Daf",
    value: parseEther("0.001"),
  });
});

app.frame("/:dynamicUrl", (c) => {
  const dynamicUrl = c.req.param("dynamicUrl");
  return c.res({
    image: (
      <div
        style={{
          height: "100vh",
          width: "100vw",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#000000",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            color: "white",
            fontSize: 60,
          }}
        >
          Test Minimal Dynamic Url ID: {dynamicUrl}
        </div>
      </div>
    ),
    intents: [
      <Button.Transaction target="/transaction">10</Button.Transaction>,
    ],
  });
});

devtools(app, { serveStatic });
export const GET = handle(app);
export const POST = handle(app);

[Seranged]

Hi @ggomaeng, thanks for having a look into this issue

From the looks of things via your example, that PR you linked seems to have fixed the issue regarding the transaction frame breaking via dynamic root URLs, I cant seem to replicate this as my local environment isn't loading when there is a dynamic root url anymore.

is your local environment working via http://localhost:3000/api/1/dev ?

I've tried replicating in 2 repos, one of them being a new repo using npm init frog -- -t next (so will be the newest version of frog, I even double checked explicitly defining it rather than latest) then copy pasting the route.tsx you wrote above.

[ggomaeng]

Hi @ggomaeng, thanks for having a look into this issue

From the looks of things via your example, that PR you linked seems to have fixed the issue regarding the transaction frame breaking via dynamic root URLs, I cant seem to replicate this as my local environment isn't loading when there is a dynamic root url anymore.

is your local environment working via http://localhost:3000/api/1/dev ?

I've tried replicating in 2 repos, one of them being a new repo using npm init frog -- -t next (so will be the newest version of frog, I even double checked explicitly defining it rather than latest) then copy pasting the route.tsx you wrote above.

Hey, it seems like I'm getting a 404 on my local server as well via http://localhost:3000/api/1/dev, but doing npx frog and running a standalone devtool and visiting http://localhost:3000/api/1 seems to work.

Let me investigate why http://localhost:3000/api/1/dev is showing a 404.

[ggomaeng]

@Seranged It seems like the issue is due to Hono's route priority.

If you put devtools on top of the dynamic route, the devtools will work properly at http://localhost:3000/api/dev. Either the documentation needs to be fixed, or frog has to handle this internally so that devtools has the highest priority. Let me investigate more and keep you updated.

Below is the updated route.tsx

/** @jsxImportSource frog/jsx */

import { Button, Frog, parseEther } from "frog";
import { devtools } from "frog/dev";
import { pinata } from "frog/hubs";
import { handle } from "frog/next";
import { serveStatic } from "frog/serve-static";

const app = new Frog({
  verify: false,
  assetsPath: "/",
  basePath: "/api",
  hub: pinata(),
  browserLocation: "/",
});

app.transaction("/transaction", async (c) => {
  return c.send({
    chainId: "eip155:8453",
    to: "0x6f6bEeA71BF5dbF95e3EaB51b7e87209b06f8Daf",
    value: parseEther("0.001"),
  });
});

app.frame("/hello", (c) => {
  return c.res({
    image: "https://example.com",
    intents: [
      <Button.Transaction target="/transaction">10</Button.Transaction>,
    ],
  });
});

devtools(app, { serveStatic });

app.frame("/:dynamicUrl", (c) => {
  const dynamicUrl = c.req.param("dynamicUrl");
  return c.res({
    image: (
      <div
        style={{
          height: "100vh",
          width: "100vw",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#000000",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            color: "white",
            fontSize: 60,
          }}
        >
          Test Minimal Dynamic Url ID: {dynamicUrl}
        </div>
      </div>
    ),
    intents: [
      <Button.Transaction target="/transaction">10</Button.Transaction>,
    ],
  });
});

export const GET = handle(app);
export const POST = handle(app);

[Seranged]

Thanks @ggomaeng ! Appreciate the work you're putting into this <3

[ggomaeng]

Thanks @ggomaeng ! Appreciate the work you're putting into this <3

However note that putting the devtools above the dynamic route is only a temporary fix. It will not show the dynamic route properly in the url tab.

[chuckstock]

thanks @ggomaeng! this is helpful for us, so we appreciate the work!