# Speedball Frame

[dh-edu-token-defi / frames](https://github.com/dh-edu-token-defi/frames) repo

- Tried to start from scratch with updated Frog version and new design
- Ran into all kind of errors once I started adding the functional logic
- Primarily [431 Request Header Fields Too Large](https://vitejs.dev/guide/troubleshooting#_431-request-header-fields-too-large)
- Had same error with both Cloudflare Workers and Vercel
- Completely started over with a fresh fork of the [YEET from Frames](https://github.com/yeet-haus/frames) repo
- Think I got all changed from Sam's [speedball](https://github.com/yeet-haus/frames/tree/sk/speedball) branch added
- Could not tell if there are changes from the [graph-updates](https://github.com/yeet-haus/frames/tree/sk/graph-updates) that need to be made (the diff shows all the changes to quotes)
- Got the updated design added to the `/yeeter/:yeeterid` route
- I think we are going to need to update to the most recent [0.12.0](https://github.com/wevm/frog/blob/main/src/CHANGELOG.md#0120) Frog version. Farcaster is requiring a title now and there have been some breaking changes.
- Will need to add:

title: 'Speedball',

- Vlad recommended decomposing the image rendering into the [image handler](https://frog.fm/concepts/image-handler#image-handle) in this [cast](https://warpcast.com/dalechyn.eth/0x475a48ca).
- G

## Questions

- Can we add the token symbol to replace `{mission}`?

## Todo

- [x] Verify frame is working with an active Speedball project
- [x] Update design for `!isActive`
- [x] Update design for `!metaRes.data.records[0]`
- [x] Update design for `c.res`
- [x] Test transaction
- [ ] Fix link (`daoid` may need to be in `Button.Transaction`)
- [ ] Why is "YEET FROM FRAMES" still in the Transaction Request tab in the Frog dev console?
- [ ] Remove `console.log`
- [ ] Deploy
- [ ] Configure subdomain

### Once Deployed to subdomain

- [ ] Update `Button.Link`
- [ ] Update URL of `success.png`
- `origin: 'https://frames.yeet.haus',`
- `browserLocation: 'https://app.yeet.haus/',`

## Campaign

https://dh-edu-token-defi.github.io/sb-app/#/molochv3/0x2105/0x4fd7645e971669b621a9ae26bcce8789c0682606/0x925418a92b2eea1402732027c20b0d56e8069d42

- daoid: 0x4fd7645e971669b621a9ae26bcce8789c0682606
- yeeterid: 0x925418a92b2eea1402732027c20b0d56e8069d42

## Frame

http://localhost:5173/api/yeeter/0x925418a92b2eea1402732027c20b0d56e8069d42

The transactions are going through. But it is not showing the success view with a link back to the project.

It gets hung up with a spinner on Transaction Pending:


But if you go to the View link you can see the transaction [success](https://basescan.org/tx/0x9154f16ff715f5414e621e28845e045208c79af51e7a99c66c464dd59d8136e7)

I thought maybe it is getting getting hung up on the `yeeterid` because that is the what is new from the Yeeter frame that is working properly.

## `Button.Link` Bug

`yeeterid` does not seem to be being passed properly

So it appear the error is somewhere in the code above `app.frame(`/success/:daoid/:yeeterid`,`

The console logs earlier in the code work. But the following error occurs before getting to `app.frame(`/success/:daoid/:yeeterid``

TypeError: Failed to parse URL from undefined

### From Yeet From Frames

This is the working code in the Yeeter frames

https://github.com/yeet-haus/frames/blob/main/api/index.tsx

#### 7 Instances of `daoid`

In these snippets the working Yeeter code is first. The Speedball code where we are trying to also pass `yeeterid` is second:

const daoid = yeetData.data.yeeter.dao.id;

const yeeterid = c.req.param('yeeterid');

- console.log('Declare daoid:', daoid);
- console.log('Declare yeeterid:', yeeterid);

---

const metaRes = await postData(DH_GRAPH_ENDPOINT, {
    query: `{records(where: { dao: "${daoid.toLowerCase()}", table: "yeetDetails" }, orderBy: createdAt, orderDirection: desc) {id content dao { name } }}`,
  });

const metaRes = await postData(DH_GRAPH_ENDPOINT, {
    query: `{records(where: { dao: "${daoid.toLowerCase()}", table: "yeetDetails" }, orderBy: createdAt, orderDirection: desc) {id content dao { name } }}`,
  });

These appear identical. Does `yeeterid` need to be included here?

---

These appear correct

action: `/success/${daoid}`,

action: `/success/${daoid}/${yeeterid}`,

- console.log('Return daoid:', daoid);
- console.log('Return yeeterid:', yeeterid);

---

These console logs are not showing:

const daoid = c.req.param('daoid');

const yeeterid = c.req.param('yeeterid');

- console.log('daoid on success:', daoid);
- console.log('yeeterid on success:', yeeterid);

This is the error:

TypeError: Failed to parse URL from undefined
    at Object.fetch (node:internal/deps/undici/undici:11404:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getImageSize (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/frog@0.8.6_@types+node@20.12.7_hono@4.2.6_typescript@5.4.5/node_modules/frog/_lib/dev/utils/getImageSize.js:2:22)
    at async Promise.all (index 1)
    at async file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/frog@0.8.6_@types+node@20.12.7_hono@4.2.6_typescript@5.4.5/node_modules/frog/_lib/dev/api.js:56:23
    at async dispatch (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/hono@4.2.6/node_modules/hono/dist/compose.js:29:17)
    at async /Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/hono@4.2.6/node_modules/hono/dist/cjs/validator/validator.js:90:5
    at async dispatch (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/hono@4.2.6/node_modules/hono/dist/compose.js:29:17)
    at async file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/frog@0.8.6_@types+node@20.12.7_hono@4.2.6_typescript@5.4.5/node_modules/frog/_lib/dev/api.js:28:9
    at async dispatch (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/hono@4.2.6/node_modules/hono/dist/compose.js:29:17) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:399:5)
      at URL.onParseError (node:internal/url:565:9)
      at new URL (node:internal/url:645:5)
      at new Request (node:internal/deps/undici/undici:6996:25)
      at fetch2 (node:internal/deps/undici/undici:10545:25)
      at Object.fetch (node:internal/deps/undici/undici:11402:18)
      at fetch (node:internal/process/pre_execution:241:25)
      at global.fetch (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/@hono+node-server@1.11.0/node_modules/@hono/node-server/dist/index.mjs:278:10)
      at getImageSize (file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/frog@0.8.6_@types+node@20.12.7_hono@4.2.6_typescript@5.4.5/node_modules/frog/_lib/dev/utils/getImageSize.js:2:28)
      at file:///Users/earth/Sites/crypto/DAO/speedball/frames/node_modules/.pnpm/frog@0.8.6_@types+node@20.12.7_hono@4.2.6_typescript@5.4.5/node_modules/frog/_lib/dev/api.js:58:13 {
    input: 'undefined',
    code: 'ERR_INVALID_URL'
  }
}

---

href={`https://app.yeet.haus/#/molochV3/0x2105/${daoid.toLowerCase()}`}

href={`https://dh-edu-token-defi.github.io/sb-app/#/molochv3/0x2105/${daoid.toLowerCase()}/${yeeterid.toLowerCase()}`}

## validateFrameEmbed 400 Error

Working locally:

http://localhost:5173/api/yeeter/0x925418a92b2eea1402732027c20b0d56e8069d42

When trying to add this to the [Frame Validator](https://warpcast.com/~/developers/frames)

https://speed-frame.vercel.app/api/yeeter/0x925418a92b2eea1402732027c20b0d56e8069d42

Get the error: validateFrameEmbed 400 - Missing image URL

This is a common issue on the wevm Discord server. From what I can tell Frog is encouraging the use of [Image Handler](https://frog.fm/concepts/image-handler) to solve the problem.

I am unsure what code need to be moved out of `app.frame` and into `app.image`

---

There are currently two instances of `app.frame`

app.frame("/yeeter/:yeeterid",

app.frame(`/success/:daoid/:yeeterid`