mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { useMiniApp } from "@neynar/react";
|
|
|
|
/**
|
|
* ContextTab component displays the current mini app context in JSON format.
|
|
*
|
|
* This component provides a developer-friendly view of the Farcaster mini app context,
|
|
* including user information, client details, and other contextual data. It's useful
|
|
* for debugging and understanding what data is available to the mini app.
|
|
*
|
|
* The context includes:
|
|
* - User information (FID, username, display name, profile picture)
|
|
* - Client information (safe area insets, platform details)
|
|
* - Mini app configuration and state
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <ContextTab />
|
|
* ```
|
|
*/
|
|
export function ContextTab() {
|
|
const { context } = useMiniApp();
|
|
|
|
return (
|
|
<div className="mx-6">
|
|
<h2 className="text-lg font-semibold mb-2">Context</h2>
|
|
<div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
|
<pre className="font-mono text-xs whitespace-pre-wrap break-words w-full">
|
|
{JSON.stringify(context, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|