Created
June 19, 2024 01:27
-
-
Save i001962/68c51ed72823bd3f2e397c4b989aed6d to your computer and use it in GitHub Desktop.
framepagetest.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import type { InferGetServerSidePropsType, GetServerSideProps } from "next"; | |
| import Head from "next/head"; | |
| import { | |
| fetchMetadata, | |
| metadataToMetaTags, | |
| } from "frames.js/next/pages-router/client"; | |
| import { | |
| FrameUI, | |
| fallbackFrameContext, | |
| FrameContext, | |
| } from "@frames.js/render"; | |
| import { signFrameAction, FarcasterSigner } from '@frames.js/render/farcaster' | |
| import { FrameImageNext } from "@frames.js/render/next"; | |
| import { FrameButton } from "frames.js"; | |
| import { useFrame } from "@frames.js/render/use-frame"; | |
| export const getServerSideProps: GetServerSideProps = async () => { | |
| const baseUrl = process.env.VERCEL_URL | |
| ? "http://localhost:3000" | |
| : "http://localhost:3000"; | |
| const metadata = await fetchMetadata(new URL("/api/frames", baseUrl).toString()); | |
| return { | |
| props: { | |
| metadata, | |
| }, | |
| }; | |
| }; | |
| export default function Page({ | |
| metadata, | |
| }: InferGetServerSidePropsType<typeof getServerSideProps>) { | |
| const farcasterSigner: FarcasterSigner = { | |
| fid: 1, | |
| status: 'approved', | |
| publicKey: | |
| "0x00000000000000000000000000000000000000000000000000000000000000000", | |
| privateKey: | |
| "0x00000000000000000000000000000000000000000000000000000000000000000", | |
| }; | |
| const frameState = useFrame({ | |
| homeframeUrl: | |
| "https://mint.farcaster.xyz/", | |
| // corresponds to the name of the route for POST in step 3 | |
| frameActionProxy: "/api/frames", | |
| connectedAddress: undefined, | |
| // corresponds to the name of the route for GET in step 3 | |
| frameGetProxy: "/api/frames", | |
| frameContext: fallbackFrameContext, | |
| // map to your identity if you have one | |
| signerState: { | |
| hasSigner: farcasterSigner !== undefined, | |
| signer: farcasterSigner, | |
| onSignerlessFramePress: () => { | |
| // Only run if `hasSigner` is set to `false` | |
| // This is a good place to throw an error or prompt the user to login | |
| alert("A frame button was pressed without a signer. Perhaps you want to prompt a login"); | |
| }, | |
| signFrameAction: signFrameAction, | |
| }, | |
| }); | |
| console.log(frameState); | |
| return ( | |
| <> | |
| <Head> | |
| <title>Frames.js app</title> | |
| {metadataToMetaTags(metadata)} | |
| </Head> | |
| <div className="w-[400px]"> | |
| <FrameUI frameState={frameState} theme={{}} FrameImage={FrameImageNext} /> | |
| </div> | |
| </> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment