useFrame
Props
connectedAddress
- Type:
0x${string} | undefined
The connected wallet address of the user.
dangerousSkipSigning
- Type:
boolean
If true, the frame will not be signed before being sent to the frameActionProxy. This is useful for frames that don't verify signatures.
fetchFn
- Type:
typeof fetch
The custom fetch function to use instead of native fetch.
frameActionProxy
- Type:
string
The route used to POST frame actions. The post_url will be added as a the url query parameter.
frameGetProxy
- Type:
string
The route used to GET the initial frame via proxy.
signerState
- Type:
SignerStateInstance<T, B>
An signer state object used to determine what actions are possible.
homeframeUrl
- Type:
string | null
The url of the homeframe, if null won't load a frame.
frame
- Type:
Frame
The initial frame. if not specified will fetch it from the url prop.
onError
- Type:
(e: Error) => void
A function that can be used to customize how errors are reported to a user, by default it logs errors using console.error().
onLinkButtonClick
- Type:
(button: FrameButtonLink) => void
A function to handle link button presses by default it opens the link in new tab using window.open() if browser environment, otherwise it just logs the link.
onMint
- Type:
(t: onMintArgs) => void
A function to handle mint buttons.
onRedirect
- Type:
(url: string) => void
A function to handle redirect responses from the frame. This happens when you click a post_redirect button. By default it opens the link in new tab using window.open() if browser environment, otherwise it just logs the link.
onTransaction
- Type:
OnTransactionFunc
A function to handle transaction button presses, returns the transaction hash or null.
frameContext
- Type:
FrameContext
The context of this frame, used for generating Frame Action payloads.
extraButtonRequestPayload
- Type:
Record<string, unknown>
Extra data appended to the frame action payload.
Returns
- Type:
FrameState
fetchFrame
- Type:
(request: FrameRequest) => void
Fetches a frame from the frameGetProxy.
clearFrameStack
- Type:
() => void
Clears the frame stack.
frame
- Type:
Frame | null
The frame at the top of the stack (at index 0).
framesStack
- Type:
FramesStack
A stack of frames with additional context, with the most recent frame at index 0.
isLoading
- Type:
null | FrameStackPending
Whether the frame is loading.
inputText
- Type:
string
The input text.
setInputText
- Type:
(s: string) => void
Sets the input text.
onButtonPress
- Type:
(frame: Frame, frameButton: FrameButton, index: number) => void
Handles a button press on given Frame.
isFrameValid
- Type:
boolean | undefined
Whether the frame at the top of the stack has any frame validation errors. Undefined when the frame is not loaded or set.
frameValidationErrors
- Type:
Record<string, string[]> | undefined | null
The frame validation errors.
error
- Type:
null | unknown
Whether there was an error loading the frame.
homeframeUrl
- Type:
string | null
The url of the frame.
Usage
"use client";
import { FrameUI, fallbackFrameContext, FrameContext } from "@frames.js/render";
import { FrameImageNext } from "@frames.js/render/next";
import { FrameButton } from "frames.js";
import { useFrame } from "@frames.js/render/use-frame";
import {
mockFarcasterSigner,
createFrameActionMessageWithSignerKey,
} from "@frames.js/render/farcaster";
export default function Page() {
const frameState = useFrame({
// replace with your frame url
homeframeUrl:
"https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
// corresponds to the name of the route for POST in step 3
frameActionProxy: "/frames",
// corresponds to the name of the route for GET in step 3
frameGetProxy: "/frames",
frameContext: fallbackFrameContext,
// map to your identity if you have one
signerState: {
// TODO: replace with your signer
signer: mockFarcasterSigner,
hasSigner: true,
onSignerlessFramePress: () => {
// Implement me
alert("A frame button was pressed without a signer.");
},
signFrameAction: () => {
alert("implement me.");
},
},
});
return (
<FrameUI frameState={frameState} theme={{}} FrameImage={FrameImageNext} />
);
}