diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx index 87ae208ce2..22e082f898 100644 --- a/framegear/components/Frame/Frame.tsx +++ b/framegear/components/Frame/Frame.tsx @@ -1,7 +1,7 @@ import { postFrame } from '@/utils/postFrame'; import { frameResultsAtom } from '@/utils/store'; import { useAtom } from 'jotai'; -import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; +import { ChangeEvent, PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { ArrowTopRightIcon } from '@radix-ui/react-icons'; import { useRedirectModal } from '@/components/RedirectModalContext/RedirectModalContext'; @@ -22,6 +22,7 @@ export function Frame() { } function ValidFrame({ tags }: { tags: Record }) { + const [inputText, setInputText] = useState(''); const { image, imageAspectRatioClassname, input, buttons } = useMemo(() => { const image = tags['fc:frame:image']; const imageAspectRatioClassname = @@ -48,6 +49,11 @@ function ValidFrame({ tags }: { tags: Record }) { }; }, [tags]); + const handleInputChange = useCallback( + (e: ChangeEvent) => setInputText(e.target.value), + [], + ); + return (
{/* eslint-disable-next-line @next/next/no-img-element */} @@ -62,12 +68,13 @@ function ValidFrame({ tags }: { tags: Record }) { className="bg-input-light border-light rounded-lg border p-2 text-black" type="text" placeholder={input} + onChange={handleInputChange} /> )}
{buttons.map((button) => button ? ( - + {button.value} ) : null, @@ -90,7 +97,7 @@ function PlaceholderFrame() {
- Get Started + Get Started
); @@ -99,9 +106,11 @@ function PlaceholderFrame() { function FrameButton({ children, button, + inputText, }: PropsWithChildren<{ // TODO: this type should probably be extracted button?: { key: string; value: string; action: string; target: string; index: number }; + inputText: string; }>) { const { openModal } = useRedirectModal(); const [isLoading, setIsLoading] = useState(false); @@ -119,13 +128,16 @@ function FrameButton({ fid: 0, hash: '0xthisisnotreal', }, - inputText: '', + inputText, fid: 0, messageHash: '0xthisisnotreal', network: 0, timestamp: 0, }); - setResults((prev) => [...prev, result]); + // TODO: handle when result is not defined + if (result) { + setResults((prev) => [...prev, result]); + } }; setIsLoading(true); if (button?.action === 'post_redirect') { @@ -140,7 +152,7 @@ function FrameButton({ openModal(onConfirm); } // TODO: implement other actions (mint, etc.) - }, [button, setResults]); + }, [button?.action, button?.index, button?.target, inputText, openModal, setResults]); return (