\n \n

Mini App Store

\n {context && }\n

\n {/*

Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town

*/}\n\n \n

\n );\n}\n\nfunction MiniApps() {\n const { data: miniapps } = useQuery([\"miniapps\"], async () => {\n // return await fetch(`/api/miniapps`).then(r => r.json()).then(r => r);\n // return await fetchNeynarGet(`frame/catalog?limit=100`).then(r => r.frames);\n return await fetchNeynarGetPages(`frame/catalog?limit=100`, 4, \"frames\").then(r => r.frames);\n });\n\n const [context, setContext] = useState();\n useEffect(() => {\n fcsdk.context.then(setContext);\n }, []);\n\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const byUser = searchParams.get(\"by\");\n\n const [search, setSearch] = useState(() => {\n const params = new URLSearchParams(window.location.search);\n return params.get(\"s\") || \"\";\n });\n\n const shownMiniapps = useMemo(() => {\n return miniapps\n ?.filter((miniapp: any) => !byUser || byUser == miniapp.author?.username)\n .filter((miniapp: any) => {\n return search == \"\" || miniapp.manifest?.frame?.name?.toLowerCase().includes(search.toLowerCase())\n || miniappHost(miniapp)?.toLowerCase().includes(search.toLowerCase())\n || miniapp?.author?.username.toLowerCase().includes(search.toLowerCase());\n });\n }, [miniapps, search, byUser]);\n\n console.log(miniapps, byUser, search, shownMiniapps);\n\n if (!miniapps) {\n return (\n

\n \n

\n );\n }\n\n if (miniapps.length == 0) {\n return (\n

No miniapps

\n );\n }\n\n return (\n

\n {byUser && (\n

\n Mini Apps by {byUser}\n navigate(\"?\")} />\n

\n )}\n

\n setSearch(e.target.value)}\n placeholder=\"Search...\"\n autoCapitalize=\"on\"\n autoCorrect=\"on\"\n type=\"text\"\n value={search}\n className=\"grow shrink w-[50]\"\n />\n {context && !byUser && (\n navigate(`?by=${context?.user?.username}`)}\n className=\"border-0 text-nowrap \"\n >\n My Mini Apps\n \n )}\n

\n {shownMiniapps?.length == 0 && (\n

\n No miniapps\n

\n )}\n {shownMiniapps?.map((miniapp: any, i) => )}\n

\n );\n}\n\nfunction MiniApp({ miniapp }) {\n const navigate = useNavigate();\n // console.log(miniapp.manifest?.frame?.name);\n\n const author = miniapp?.author;\n\n const open = () => {\n fcsdk?.actions?.openUrl(`https://warpcast.com/~/frames/launch?domain=${miniappHost(miniapp)}`);\n };\n\n return (\n

\n \n

{miniapp.manifest?.frame?.name}

{miniappHost(miniapp)}

{author?.username}

\n \n

\n );\n}\n\nconst miniappHost = miniapp => new URL(miniapp.manifest?.frame?.home_url).hostname;","deleted","label",[171,172,155],"frontend","screens","permalink","https://www.val.town/x/dimdimablock/A/code/frontend/screens/Home.tsx","extension","actionData","errors"]