Skip to content

Commit df7bb10

Browse files
michalkvasnicakmichalkvasnicak
committed
chore: add two more examples based on starters
1 parent fdd9406 commit df7bb10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2192
-11
lines changed

‎templates/next-starter-with-examples/.env.sample

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Example: FARCASTER_DEVELOPER_MNEMONIC="candy gibraltar foxtrot kilo barnacles foxes ..."
2+
# (OPTIONAL) Needed for the debugger to create a real Farcaster signer. Get this by exporting your seed phrase from the Warpcast app. Don't share that seed phrase with anyone.
3+
FARCASTER_DEVELOPER_MNEMONIC=
4+
# (OPTIONAL) Only needed for the debugger to create a real Farcaster signer. Get this by visiting your Warpccast profile, pressing the kebab (three dots) menu and then "About" and then your fid should be there.
5+
# Example: FARCASTER_DEVELOPER_FID=1214
6+
FARCASTER_DEVELOPER_FID=
7+
# (OPTIONAL) Hub URL to use for the debugger. If not set, the debugger will use the default hub URL.
8+
DEBUG_HUB_HTTP_URL=
9+
10+
NEXT_PUBLIC_HOST="http://localhost:3000"
11+
12+
# OPTIONAL EXAMPLE KEYS
13+
# Optional, if you use this example
14+
KV_REST_API_URL=""
15+
KV_REST_API_TOKEN=""
16+
# Optional
17+
DEBUGGER_URL=""

‎templates/next-starter-with-examples/.eslintrc.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @type {import("eslint").Linter.Config} */
2+
module.exports = {
3+
root: true,
4+
extends: ["next"],
5+
};

‎templates/next-starter-with-examples/.gitignore

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
.env
10+
# testing
11+
/coverage
12+
13+
# next.js
14+
/.next/
15+
/out/
16+
17+
# production
18+
/build
19+
20+
# misc
21+
.DS_Store
22+
*.pem
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
29+
# local env files
30+
.env*.local
31+
32+
# vercel
33+
.vercel
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts
38+
39+
mocks.json

‎templates/next-starter-with-examples/CHANGELOG.md

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# framesjs-starter
2+
3+
## 0.2.2
4+
5+
### Patch Changes
6+
7+
- 72e6617: feat: tx support
8+
- Updated dependencies [72e6617]
9+
- Updated dependencies [7ccc562]
10+
- frames.js@0.8.0
11+
12+
## 0.2.1
13+
14+
### Patch Changes
15+
16+
- Updated dependencies [01fc5fe]
17+
- Updated dependencies [60c6e56]
18+
- Updated dependencies [e335829]
19+
- Updated dependencies [eee74a9]
20+
- frames.js@0.7.0
21+
22+
## 0.2.0
23+
24+
### Minor Changes
25+
26+
- 845b30c: refactor: make frame validation errors arbitraty, remove unnecessary validateFrame function
27+
28+
### Patch Changes
29+
30+
- Updated dependencies [845b30c]
31+
- Updated dependencies [ce1cec6]
32+
- Updated dependencies [845b30c]
33+
- frames.js@0.6.0
34+
35+
## 0.1.12
36+
37+
### Patch Changes
38+
39+
- 99b998f: fix: debugger build
40+
- 108280c: feat: add mock hub state to debugger
41+
- 1707ea4: feat: `DEBUG_HUB_HTTP_URL` env var
42+
- Updated dependencies [18c887d]
43+
- Updated dependencies [0ba4b88]
44+
- Updated dependencies [f9d4356]
45+
- frames.js@0.5.2
46+
47+
## 0.1.11
48+
49+
### Patch Changes
50+
51+
- 157ec44: chore: update fallback neynar hub api url
52+
- 548a9c3: feat: multi-page example
53+
- 426d5eb: feat: validate frame image data uri length in debugger
54+
- 8317894: fix: reset input state on submit, waiting state buttons styling
55+
- Updated dependencies [157ec44]
56+
- Updated dependencies [426d5eb]
57+
- Updated dependencies [70a0ff6]
58+
- Updated dependencies [d1596ac]
59+
- Updated dependencies [62be50d]
60+
- frames.js@0.5.1
61+
62+
## 0.1.10
63+
64+
### Patch Changes
65+
66+
- Updated dependencies [40d2662]
67+
- frames.js@0.5.0
68+
69+
## 0.1.9
70+
71+
### Patch Changes
72+
73+
- d861fb9: fix: url validation and smoother navigation
74+
- Updated dependencies [e54b9ad]
75+
- Updated dependencies [a09c555]
76+
- frames.js@0.4.3
77+
78+
## 0.1.8
79+
80+
### Patch Changes
81+
82+
- 2150e11: chore(debugger): remove mint spec warning
83+
- Updated dependencies [ccb8317]
84+
- frames.js@0.4.2
85+
86+
## 0.1.7
87+
88+
### Patch Changes
89+
90+
- 8112f6f: fix: use neynar hubs as fallback
91+
- Updated dependencies [800d887]
92+
- Updated dependencies [8112f6f]
93+
- Updated dependencies [fd70614]
94+
- Updated dependencies [b71f05b]
95+
- Updated dependencies [8112f6f]
96+
- frames.js@0.4.1
97+
98+
## 0.1.6
99+
100+
### Patch Changes
101+
102+
- ccd3302: feat: JSX-based frame image rendering
103+
- Updated dependencies [ccd3302]
104+
- frames.js@0.4.0
105+
106+
## 0.1.5
107+
108+
### Patch Changes
109+
110+
- 03d041e: feat: mint action
111+
- Updated dependencies [03d041e]
112+
- frames.js@0.3.0
113+
114+
## 0.1.4
115+
116+
### Patch Changes
117+
118+
- 3ed2cef: fix: generate correct image data in `generateImage` example
119+
- Updated dependencies [0d9cfaf]
120+
- frames.js@0.2.1
121+
122+
## 0.1.3
123+
124+
### Patch Changes
125+
126+
- Updated dependencies [608bac9]
127+
- frames.js@0.2.0
128+
129+
## 0.1.2
130+
131+
### Patch Changes
132+
133+
- 40d0ad7: feat: Add `getFrameMessage`, which parse frame action payloads and optionally fetches additional context from hubs.
134+
135+
feat(debugger): Forward unmocked hub requests to an actual hub.
136+
137+
- Updated dependencies [40d0ad7]
138+
- Updated dependencies [57649be]
139+
- Updated dependencies [518ada3]
140+
- frames.js@0.1.1
141+
142+
## 0.1.1
143+
144+
### Patch Changes
145+
146+
- 05af691: feat: adds an option to impersonate an FID as an alternative to creating a new onchain signer
147+
- fb3cfaa: fix(debug): untrusted data url now uses original frame url
148+
- 99536fb: fix: frame action message creation to not include inputText if inputText was not requested by the frame
149+
- Updated dependencies [1a73918]
150+
- Updated dependencies [99536fb]
151+
- Updated dependencies [501861d]
152+
- Updated dependencies [1598cb6]
153+
- frames.js@0.1.0

‎templates/next-starter-with-examples/README.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Frames.js Starter Kit with examples
2+
3+
This is a boilerplate template to get started quickly with `frames.js`
4+
5+
## Quickstart
6+
7+
If running from the frames.js repository itself:
8+
9+
- Run `yarn` from the repository root
10+
- Run `cd templates/next-starter-with-examples`
11+
12+
1. Install dependencies `yarn install`
13+
14+
2. Run `yarn dev` to run the server and debugger, this will also open the debugger automatically in your browser.
15+
16+
3. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
17+
18+
4. Edit `app/page.tsx`
19+
20+
5. Visit [http://localhost:3000/examples](http://localhost:3000/examples) to see the list of examples.
21+
22+
6. (Optional) To use a real signer (costs warps), copy `.env.sample` to `.env` and fill in the env variables following the comments provided
23+
24+
## Docs, Questions and Help
25+
26+
- [Frames.js Documentation](https://framesjs.org)
27+
- [Awesome frames](https://github.com/davidfurlong/awesome-frames?tab=readme-ov-file)
28+
- Join the [/frames-dev](https://warpcast.com/~/channel/frames-devs) channel on Farcaster to ask questions
29+
30+
## If you get stuck or have feedback, [Message @df please!](https://warpcast.com/df)
31+
32+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33+
34+
## Deploy
35+
36+
```bash
37+
vercel
38+
```
39+
40+
more deployment links coming soon, PRs welcome!

‎templates/next-starter-with-examples/app/debug.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const DEFAULT_DEBUGGER_URL =
2+
process.env.DEBUGGER_URL ?? "http://localhost:3010/";
3+
4+
export const DEFAULT_DEBUGGER_HUB_URL = new URL(
5+
"/hub",
6+
DEFAULT_DEBUGGER_URL
7+
).toString();
8+
9+
export function createDebugUrl(frameURL: string | URL): string {
10+
const url = new URL("/", DEFAULT_DEBUGGER_URL);
11+
12+
url.searchParams.set("url", frameURL.toString());
13+
14+
return url.toString();
15+
}

‎templates/next-starter-with-examples/app/examples/custom-hub/frames/route.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { POST } from "frames.js/next/server";

‎templates/next-starter-with-examples/app/examples/custom-hub/page.tsx

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import {
2+
FrameButton,
3+
FrameContainer,
4+
FrameImage,
5+
FrameInput,
6+
FrameReducer,
7+
NextServerPageProps,
8+
getPreviousFrame,
9+
useFramesReducer,
10+
getFrameMessage,
11+
} from "frames.js/next/server";
12+
import Link from "next/link";
13+
import { getTokenUrl } from "frames.js";
14+
import { createDebugUrl } from "../../debug";
15+
import { currentURL } from "../../utils";
16+
17+
type State = {
18+
active: string;
19+
total_button_presses: number;
20+
};
21+
22+
const initialState = { active: "1", total_button_presses: 0 };
23+
24+
const reducer: FrameReducer<State> = (state, action) => {
25+
return {
26+
total_button_presses: state.total_button_presses + 1,
27+
active: action.postBody?.untrustedData.buttonIndex
28+
? String(action.postBody?.untrustedData.buttonIndex)
29+
: "1",
30+
};
31+
};
32+
33+
// This is a react server component only
34+
export default async function Home({ searchParams }: NextServerPageProps) {
35+
const url = currentURL("/examples/custom-hub");
36+
const previousFrame = getPreviousFrame<State>(searchParams);
37+
38+
const frameMessage = await getFrameMessage(previousFrame.postBody, {
39+
hubHttpUrl: "https://hub.freefarcasterhub.com:3281",
40+
fetchHubContext: true,
41+
});
42+
43+
if (frameMessage && !frameMessage?.isValid) {
44+
throw new Error("Invalid frame payload");
45+
}
46+
47+
const [state, dispatch] = useFramesReducer<State>(
48+
reducer,
49+
initialState,
50+
previousFrame
51+
);
52+
53+
// Here: do a server side side effect either sync or async (using await), such as minting an NFT if you want.
54+
// example: load the users credentials & check they have an NFT
55+
56+
console.log("info: state is:", state);
57+
58+
if (frameMessage) {
59+
const {
60+
isValid,
61+
buttonIndex,
62+
inputText,
63+
castId,
64+
requesterFid,
65+
casterFollowsRequester,
66+
requesterFollowsCaster,
67+
likedCast,
68+
recastedCast,
69+
requesterVerifiedAddresses,
70+
requesterUserData,
71+
} = frameMessage;
72+
73+
console.log("info: frameMessage is:", frameMessage);
74+
}
75+
76+
// then, when done, return next frame
77+
return (
78+
<div className="p-4">
79+
frames.js starter kit.{" "}
80+
<Link href={createDebugUrl(url)} className="underline">
81+
Debug
82+
</Link>
83+
<FrameContainer
84+
postUrl="/frames"
85+
state={state}
86+
previousFrame={previousFrame}
87+
>
88+
{/* <FrameImage src="https://framesjs.org/og.png" /> */}
89+
<FrameImage>
90+
<div tw="w-full h-full bg-slate-700 text-white justify-center items-center">
91+
{frameMessage?.inputText ? frameMessage.inputText : "Hello world"}
92+
</div>
93+
</FrameImage>
94+
<FrameInput text="put some text here" />
95+
<FrameButton>
96+
{state?.active === "1" ? "Active" : "Inactive"}
97+
</FrameButton>
98+
<FrameButton>
99+
{state?.active === "2" ? "Active" : "Inactive"}
100+
</FrameButton>
101+
<FrameButton
102+
action="mint"
103+
target={getTokenUrl({
104+
address: "0x060f3edd18c47f59bd23d063bbeb9aa4a8fec6df",
105+
tokenId: "123",
106+
chainId: 7777777,
107+
})}
108+
>
109+
Mint
110+
</FrameButton>
111+
<FrameButton action="link" target={`https://www.google.com`}>
112+
External
113+
</FrameButton>
114+
</FrameContainer>
115+
</div>
116+
);
117+
}

‎templates/next-starter-with-examples/app/examples/mint-button/frames/route.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { POST } from "frames.js/next/server";

0 commit comments

Comments
 (0)