mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-16 08:08:56 -05:00
refactor: restructure for better ai comprehension
This commit is contained in:
veganbeef
parent
3a9f2cf8b8
commit
bef42eddd4
@ -4,3 +4,8 @@ KV_REST_API_TOKEN=''
|
|||||||
KV_REST_API_URL=''
|
KV_REST_API_URL=''
|
||||||
NEXT_PUBLIC_URL='http://localhost:3000'
|
NEXT_PUBLIC_URL='http://localhost:3000'
|
||||||
NEXTAUTH_URL='http://localhost:3000'
|
NEXTAUTH_URL='http://localhost:3000'
|
||||||
|
|
||||||
|
NEXTAUTH_SECRET=""
|
||||||
|
NEYNAR_API_KEY=""
|
||||||
|
NEYNAR_CLIENT_ID=""
|
||||||
|
USE_TUNNEL="false"
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export async function GET(request: NextRequest) {
|
|||||||
|
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
(
|
(
|
||||||
<div tw="flex h-full w-full flex-col justify-center items-center relative bg-purple-600">
|
<div tw="flex h-full w-full flex-col justify-center items-center relative bg-primary">
|
||||||
{user?.pfp_url && (
|
{user?.pfp_url && (
|
||||||
<div tw="flex w-96 h-96 rounded-full overflow-hidden mb-8 border-8 border-white">
|
<div tw="flex w-96 h-96 rounded-full overflow-hidden mb-8 border-8 border-white">
|
||||||
<img src={user.pfp_url} alt="Profile" tw="w-full h-full object-cover" />
|
<img src={user.pfp_url} alt="Profile" tw="w-full h-full object-cover" />
|
||||||
|
|||||||
@ -4,12 +4,12 @@ import dynamic from "next/dynamic";
|
|||||||
import { APP_NAME } from "~/lib/constants";
|
import { APP_NAME } from "~/lib/constants";
|
||||||
|
|
||||||
// note: dynamic import is required for components that use the Frame SDK
|
// note: dynamic import is required for components that use the Frame SDK
|
||||||
const Demo = dynamic(() => import("~/components/Demo"), {
|
const AppComponent = dynamic(() => import("~/components/App"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function App(
|
export default function App(
|
||||||
{ title }: { title?: string } = { title: APP_NAME }
|
{ title }: { title?: string } = { title: APP_NAME }
|
||||||
) {
|
) {
|
||||||
return <Demo title={title} />;
|
return <AppComponent title={title} />;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,25 @@
|
|||||||
|
/**
|
||||||
|
* DESIGN SYSTEM - DO NOT EDIT UNLESS NECESSARY
|
||||||
|
*
|
||||||
|
* This file contains the centralized design system for the mini app.
|
||||||
|
* These component classes establish the visual consistency across all components.
|
||||||
|
*
|
||||||
|
* ⚠️ AI SHOULD NOT NORMALLY EDIT THIS FILE ⚠️
|
||||||
|
*
|
||||||
|
* Instead of modifying these classes, AI should:
|
||||||
|
* 1. Use existing component classes (e.g., .btn, .card, .input)
|
||||||
|
* 2. Use Tailwind utilities for one-off styling
|
||||||
|
* 3. Create new React components rather than new CSS classes
|
||||||
|
* 4. Only edit this file for specific bug fixes or accessibility improvements
|
||||||
|
*
|
||||||
|
* When AI needs to style something:
|
||||||
|
* ✅ Good: <button className="btn btn-primary">Click me</button>
|
||||||
|
* ✅ Good: <div className="bg-primary text-white px-4 py-2 rounded">Custom</div>
|
||||||
|
* ❌ Bad: Adding new CSS classes here for component-specific styling
|
||||||
|
*
|
||||||
|
* This design system is intentionally minimal to prevent bloat and maintain consistency.
|
||||||
|
*/
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@ -34,3 +56,63 @@ body {
|
|||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
/* Global container styles for consistent layout */
|
||||||
|
.container {
|
||||||
|
@apply mx-auto max-w-md px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-wide {
|
||||||
|
@apply mx-auto max-w-lg px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-narrow {
|
||||||
|
@apply mx-auto max-w-sm px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global card styles */
|
||||||
|
.card {
|
||||||
|
@apply bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-primary {
|
||||||
|
@apply bg-primary/10 border-primary/20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global button styles */
|
||||||
|
.btn {
|
||||||
|
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-primary text-white hover:bg-primary-dark focus:ring-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply bg-secondary text-gray-900 hover:bg-gray-200 focus:ring-gray-500 dark:bg-secondary-dark dark:text-gray-100 dark:hover:bg-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
@apply border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:hover:bg-gray-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global input styles */
|
||||||
|
.input {
|
||||||
|
@apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global loading spinner */
|
||||||
|
.spinner {
|
||||||
|
@apply animate-spin rounded-full border-2 border-gray-300 border-t-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-primary {
|
||||||
|
@apply animate-spin rounded-full border-2 border-white border-t-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Global focus styles */
|
||||||
|
.focus-ring {
|
||||||
|
@apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
123
src/components/App.tsx
Normal file
123
src/components/App.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { useMiniApp } from "@neynar/react";
|
||||||
|
import { Header } from "~/components/ui/Header";
|
||||||
|
import { Footer } from "~/components/ui/Footer";
|
||||||
|
import { HomeTab, ActionsTab, ContextTab, WalletTab } from "~/components/ui/tabs";
|
||||||
|
import { USE_WALLET } from "~/lib/constants";
|
||||||
|
import { useNeynarUser } from "../hooks/useNeynarUser";
|
||||||
|
|
||||||
|
// --- Types ---
|
||||||
|
export enum Tab {
|
||||||
|
Home = "home",
|
||||||
|
Actions = "actions",
|
||||||
|
Context = "context",
|
||||||
|
Wallet = "wallet",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AppProps {
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* App component serves as the main container for the mini app interface.
|
||||||
|
*
|
||||||
|
* This component orchestrates the overall mini app experience by:
|
||||||
|
* - Managing tab navigation and state
|
||||||
|
* - Handling Farcaster mini app initialization
|
||||||
|
* - Coordinating wallet and context state
|
||||||
|
* - Providing error handling and loading states
|
||||||
|
* - Rendering the appropriate tab content based on user selection
|
||||||
|
*
|
||||||
|
* The component integrates with the Neynar SDK for Farcaster functionality
|
||||||
|
* and Wagmi for wallet management. It provides a complete mini app
|
||||||
|
* experience with multiple tabs for different functionality areas.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Tab-based navigation (Home, Actions, Context, Wallet)
|
||||||
|
* - Farcaster mini app integration
|
||||||
|
* - Wallet connection management
|
||||||
|
* - Error handling and display
|
||||||
|
* - Loading states for async operations
|
||||||
|
*
|
||||||
|
* @param props - Component props
|
||||||
|
* @param props.title - Optional title for the mini app (defaults to "Neynar Starter Kit")
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <App title="My Mini App" />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export default function App(
|
||||||
|
{ title }: AppProps = { title: "Neynar Starter Kit" }
|
||||||
|
) {
|
||||||
|
// --- Hooks ---
|
||||||
|
const {
|
||||||
|
isSDKLoaded,
|
||||||
|
context,
|
||||||
|
setInitialTab,
|
||||||
|
setActiveTab,
|
||||||
|
currentTab,
|
||||||
|
} = useMiniApp();
|
||||||
|
|
||||||
|
// --- Neynar user hook ---
|
||||||
|
const { user: neynarUser } = useNeynarUser(context || undefined);
|
||||||
|
|
||||||
|
// --- Effects ---
|
||||||
|
/**
|
||||||
|
* Sets the initial tab to "home" when the SDK is loaded.
|
||||||
|
*
|
||||||
|
* This effect ensures that users start on the home tab when they first
|
||||||
|
* load the mini app. It only runs when the SDK is fully loaded to
|
||||||
|
* prevent errors during initialization.
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
if (isSDKLoaded) {
|
||||||
|
setInitialTab(Tab.Home);
|
||||||
|
}
|
||||||
|
}, [isSDKLoaded, setInitialTab]);
|
||||||
|
|
||||||
|
// --- Early Returns ---
|
||||||
|
if (!isSDKLoaded) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-screen">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="spinner h-8 w-8 mx-auto mb-4"></div>
|
||||||
|
<p>Loading SDK...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
paddingTop: context?.client.safeAreaInsets?.top ?? 0,
|
||||||
|
paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
|
||||||
|
paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
|
||||||
|
paddingRight: context?.client.safeAreaInsets?.right ?? 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header should be full width */}
|
||||||
|
<Header neynarUser={neynarUser} />
|
||||||
|
|
||||||
|
{/* Main content and footer should be centered */}
|
||||||
|
<div className="container py-2 pb-20">
|
||||||
|
{/* Main title */}
|
||||||
|
<h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
|
||||||
|
|
||||||
|
{/* Tab content rendering */}
|
||||||
|
{currentTab === Tab.Home && <HomeTab />}
|
||||||
|
{currentTab === Tab.Actions && <ActionsTab />}
|
||||||
|
{currentTab === Tab.Context && <ContextTab />}
|
||||||
|
{currentTab === Tab.Wallet && <WalletTab />}
|
||||||
|
|
||||||
|
{/* Footer with navigation */}
|
||||||
|
<Footer activeTab={currentTab as Tab} setActiveTab={setActiveTab} showWallet={USE_WALLET} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,759 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
||||||
import { signIn, signOut, getCsrfToken } from "next-auth/react";
|
|
||||||
import sdk, {
|
|
||||||
SignIn as SignInCore,
|
|
||||||
type Haptics,
|
|
||||||
} from "@farcaster/frame-sdk";
|
|
||||||
import {
|
|
||||||
useAccount,
|
|
||||||
useSendTransaction,
|
|
||||||
useSignMessage,
|
|
||||||
useSignTypedData,
|
|
||||||
useWaitForTransactionReceipt,
|
|
||||||
useDisconnect,
|
|
||||||
useConnect,
|
|
||||||
useSwitchChain,
|
|
||||||
useChainId,
|
|
||||||
} from "wagmi";
|
|
||||||
import {
|
|
||||||
useConnection as useSolanaConnection,
|
|
||||||
useWallet as useSolanaWallet,
|
|
||||||
} from '@solana/wallet-adapter-react';
|
|
||||||
import { useHasSolanaProvider } from "./providers/SafeFarcasterSolanaProvider";
|
|
||||||
import { ShareButton } from "./ui/Share";
|
|
||||||
|
|
||||||
import { config } from "~/components/providers/WagmiProvider";
|
|
||||||
import { Button } from "~/components/ui/Button";
|
|
||||||
import { truncateAddress } from "~/lib/truncateAddress";
|
|
||||||
import { base, degen, mainnet, optimism, unichain } from "wagmi/chains";
|
|
||||||
import { BaseError, UserRejectedRequestError } from "viem";
|
|
||||||
import { useSession } from "next-auth/react";
|
|
||||||
import { useMiniApp } from "@neynar/react";
|
|
||||||
import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';
|
|
||||||
import { Header } from "~/components/ui/Header";
|
|
||||||
import { Footer } from "~/components/ui/Footer";
|
|
||||||
import { USE_WALLET, APP_NAME } from "~/lib/constants";
|
|
||||||
|
|
||||||
export type Tab = 'home' | 'actions' | 'context' | 'wallet';
|
|
||||||
|
|
||||||
interface NeynarUser {
|
|
||||||
fid: number;
|
|
||||||
score: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Demo(
|
|
||||||
{ title }: { title?: string } = { title: "Neynar Starter Kit" }
|
|
||||||
) {
|
|
||||||
const {
|
|
||||||
isSDKLoaded,
|
|
||||||
context,
|
|
||||||
added,
|
|
||||||
notificationDetails,
|
|
||||||
actions,
|
|
||||||
setInitialTab,
|
|
||||||
setActiveTab,
|
|
||||||
currentTab,
|
|
||||||
haptics,
|
|
||||||
} = useMiniApp();
|
|
||||||
const [isContextOpen, setIsContextOpen] = useState(false);
|
|
||||||
const [txHash, setTxHash] = useState<string | null>(null);
|
|
||||||
const [sendNotificationResult, setSendNotificationResult] = useState("");
|
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
const [neynarUser, setNeynarUser] = useState<NeynarUser | null>(null);
|
|
||||||
const [hapticIntensity, setHapticIntensity] = useState<Haptics.ImpactOccurredType>('medium');
|
|
||||||
|
|
||||||
const { address, isConnected } = useAccount();
|
|
||||||
const chainId = useChainId();
|
|
||||||
const hasSolanaProvider = useHasSolanaProvider();
|
|
||||||
const solanaWallet = useSolanaWallet();
|
|
||||||
const { publicKey: solanaPublicKey } = solanaWallet;
|
|
||||||
|
|
||||||
// Set initial tab to home on page load
|
|
||||||
useEffect(() => {
|
|
||||||
if (isSDKLoaded) {
|
|
||||||
setInitialTab('home');
|
|
||||||
}
|
|
||||||
}, [isSDKLoaded, setInitialTab]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("isSDKLoaded", isSDKLoaded);
|
|
||||||
console.log("context", context);
|
|
||||||
console.log("address", address);
|
|
||||||
console.log("isConnected", isConnected);
|
|
||||||
console.log("chainId", chainId);
|
|
||||||
}, [context, address, isConnected, chainId, isSDKLoaded]);
|
|
||||||
|
|
||||||
// Fetch Neynar user object when context is available
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchNeynarUserObject = async () => {
|
|
||||||
if (context?.user?.fid) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/users?fids=${context.user.fid}`);
|
|
||||||
const data = await response.json();
|
|
||||||
if (data.users?.[0]) {
|
|
||||||
setNeynarUser(data.users[0]);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to fetch Neynar user object:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchNeynarUserObject();
|
|
||||||
}, [context?.user?.fid]);
|
|
||||||
|
|
||||||
const {
|
|
||||||
sendTransaction,
|
|
||||||
error: sendTxError,
|
|
||||||
isError: isSendTxError,
|
|
||||||
isPending: isSendTxPending,
|
|
||||||
} = useSendTransaction();
|
|
||||||
|
|
||||||
const { isLoading: isConfirming, isSuccess: isConfirmed } =
|
|
||||||
useWaitForTransactionReceipt({
|
|
||||||
hash: txHash as `0x${string}`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
signTypedData,
|
|
||||||
error: signTypedError,
|
|
||||||
isError: isSignTypedError,
|
|
||||||
isPending: isSignTypedPending,
|
|
||||||
} = useSignTypedData();
|
|
||||||
|
|
||||||
const { disconnect } = useDisconnect();
|
|
||||||
const { connect, connectors } = useConnect();
|
|
||||||
|
|
||||||
const {
|
|
||||||
switchChain,
|
|
||||||
error: switchChainError,
|
|
||||||
isError: isSwitchChainError,
|
|
||||||
isPending: isSwitchChainPending,
|
|
||||||
} = useSwitchChain();
|
|
||||||
|
|
||||||
const nextChain = useMemo(() => {
|
|
||||||
if (chainId === base.id) {
|
|
||||||
return optimism;
|
|
||||||
} else if (chainId === optimism.id) {
|
|
||||||
return degen;
|
|
||||||
} else if (chainId === degen.id) {
|
|
||||||
return mainnet;
|
|
||||||
} else if (chainId === mainnet.id) {
|
|
||||||
return unichain;
|
|
||||||
} else {
|
|
||||||
return base;
|
|
||||||
}
|
|
||||||
}, [chainId]);
|
|
||||||
|
|
||||||
const handleSwitchChain = useCallback(() => {
|
|
||||||
switchChain({ chainId: nextChain.id });
|
|
||||||
}, [switchChain, nextChain.id]);
|
|
||||||
|
|
||||||
const sendNotification = useCallback(async () => {
|
|
||||||
setSendNotificationResult("");
|
|
||||||
if (!notificationDetails || !context) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/send-notification", {
|
|
||||||
method: "POST",
|
|
||||||
mode: "same-origin",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
fid: context.user.fid,
|
|
||||||
notificationDetails,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.status === 200) {
|
|
||||||
setSendNotificationResult("Success");
|
|
||||||
return;
|
|
||||||
} else if (response.status === 429) {
|
|
||||||
setSendNotificationResult("Rate limited");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.text();
|
|
||||||
setSendNotificationResult(`Error: ${data}`);
|
|
||||||
} catch (error) {
|
|
||||||
setSendNotificationResult(`Error: ${error}`);
|
|
||||||
}
|
|
||||||
}, [context, notificationDetails]);
|
|
||||||
|
|
||||||
const sendTx = useCallback(() => {
|
|
||||||
sendTransaction(
|
|
||||||
{
|
|
||||||
// call yoink() on Yoink contract
|
|
||||||
to: "0x4bBFD120d9f352A0BEd7a014bd67913a2007a878",
|
|
||||||
data: "0x9846cd9efc000023c0",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: (hash) => {
|
|
||||||
setTxHash(hash);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}, [sendTransaction]);
|
|
||||||
|
|
||||||
const signTyped = useCallback(() => {
|
|
||||||
signTypedData({
|
|
||||||
domain: {
|
|
||||||
name: APP_NAME,
|
|
||||||
version: "1",
|
|
||||||
chainId,
|
|
||||||
},
|
|
||||||
types: {
|
|
||||||
Message: [{ name: "content", type: "string" }],
|
|
||||||
},
|
|
||||||
message: {
|
|
||||||
content: `Hello from ${APP_NAME}!`,
|
|
||||||
},
|
|
||||||
primaryType: "Message",
|
|
||||||
});
|
|
||||||
}, [chainId, signTypedData]);
|
|
||||||
|
|
||||||
const toggleContext = useCallback(() => {
|
|
||||||
setIsContextOpen((prev) => !prev);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (!isSDKLoaded) {
|
|
||||||
return <div>Loading...</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
paddingTop: context?.client.safeAreaInsets?.top ?? 0,
|
|
||||||
paddingBottom: context?.client.safeAreaInsets?.bottom ?? 0,
|
|
||||||
paddingLeft: context?.client.safeAreaInsets?.left ?? 0,
|
|
||||||
paddingRight: context?.client.safeAreaInsets?.right ?? 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="mx-auto py-2 px-4 pb-20">
|
|
||||||
<Header neynarUser={neynarUser} />
|
|
||||||
|
|
||||||
<h1 className="text-2xl font-bold text-center mb-4">{title}</h1>
|
|
||||||
|
|
||||||
{currentTab === 'home' && (
|
|
||||||
<div className="flex items-center justify-center h-[calc(100vh-200px)] px-6">
|
|
||||||
<div className="text-center w-full max-w-md mx-auto">
|
|
||||||
<p className="text-lg mb-2">Put your content here!</p>
|
|
||||||
<p className="text-sm text-gray-500">Powered by Neynar 🪐</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentTab === 'actions' && (
|
|
||||||
<div className="space-y-3 px-6 w-full max-w-md mx-auto">
|
|
||||||
<ShareButton
|
|
||||||
buttonText="Share Mini App"
|
|
||||||
cast={{
|
|
||||||
text: "Check out this awesome frame @1 @2 @3! 🚀🪐",
|
|
||||||
bestFriends: true,
|
|
||||||
embeds: [`${process.env.NEXT_PUBLIC_URL}/share/${context?.user?.fid || ''}`]
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<SignIn />
|
|
||||||
|
|
||||||
<Button onClick={() => actions.openUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")} className="w-full">Open Link</Button>
|
|
||||||
|
|
||||||
<Button onClick={actions.addMiniApp} disabled={added} className="w-full">
|
|
||||||
Add Mini App to Client
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{sendNotificationResult && (
|
|
||||||
<div className="text-sm w-full">
|
|
||||||
Send notification result: {sendNotificationResult}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Button onClick={sendNotification} disabled={!notificationDetails} className="w-full">
|
|
||||||
Send notification
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onClick={async () => {
|
|
||||||
if (context?.user?.fid) {
|
|
||||||
const shareUrl = `${process.env.NEXT_PUBLIC_URL}/share/${context.user.fid}`;
|
|
||||||
await navigator.clipboard.writeText(shareUrl);
|
|
||||||
setCopied(true);
|
|
||||||
setTimeout(() => setCopied(false), 2000);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={!context?.user?.fid}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{copied ? "Copied!" : "Copy share URL"}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
||||||
Haptic Intensity
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
value={hapticIntensity}
|
|
||||||
onChange={(e) => setHapticIntensity(e.target.value as typeof hapticIntensity)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
||||||
>
|
|
||||||
<option value="light">Light</option>
|
|
||||||
<option value="medium">Medium</option>
|
|
||||||
<option value="heavy">Heavy</option>
|
|
||||||
<option value="soft">Soft</option>
|
|
||||||
<option value="rigid">Rigid</option>
|
|
||||||
</select>
|
|
||||||
<Button
|
|
||||||
onClick={async () => {
|
|
||||||
try {
|
|
||||||
await haptics.impactOccurred(hapticIntensity);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Haptic feedback failed:', error);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Trigger Haptic Feedback
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentTab === 'context' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{currentTab === 'wallet' && USE_WALLET && (
|
|
||||||
<div className="space-y-3 px-6 w-full max-w-md mx-auto">
|
|
||||||
{address && (
|
|
||||||
<div className="text-xs w-full">
|
|
||||||
Address: <pre className="inline w-full">{truncateAddress(address)}</pre>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{chainId && (
|
|
||||||
<div className="text-xs w-full">
|
|
||||||
Chain ID: <pre className="inline w-full">{chainId}</pre>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isConnected ? (
|
|
||||||
<Button
|
|
||||||
onClick={() => disconnect()}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Disconnect
|
|
||||||
</Button>
|
|
||||||
) : context ? (
|
|
||||||
<Button
|
|
||||||
onClick={() => connect({ connector: connectors[0] })}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Connect
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3 w-full">
|
|
||||||
<Button
|
|
||||||
onClick={() => connect({ connector: connectors[1] })}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Connect Coinbase Wallet
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => connect({ connector: connectors[2] })}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Connect MetaMask
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<SignEvmMessage />
|
|
||||||
|
|
||||||
{isConnected && (
|
|
||||||
<>
|
|
||||||
<SendEth />
|
|
||||||
<Button
|
|
||||||
onClick={sendTx}
|
|
||||||
disabled={!isConnected || isSendTxPending}
|
|
||||||
isLoading={isSendTxPending}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Send Transaction (contract)
|
|
||||||
</Button>
|
|
||||||
{isSendTxError && renderError(sendTxError)}
|
|
||||||
{txHash && (
|
|
||||||
<div className="text-xs w-full">
|
|
||||||
<div>Hash: {truncateAddress(txHash)}</div>
|
|
||||||
<div>
|
|
||||||
Status:{" "}
|
|
||||||
{isConfirming
|
|
||||||
? "Confirming..."
|
|
||||||
: isConfirmed
|
|
||||||
? "Confirmed!"
|
|
||||||
: "Pending"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
onClick={signTyped}
|
|
||||||
disabled={!isConnected || isSignTypedPending}
|
|
||||||
isLoading={isSignTypedPending}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Sign Typed Data
|
|
||||||
</Button>
|
|
||||||
{isSignTypedError && renderError(signTypedError)}
|
|
||||||
<Button
|
|
||||||
onClick={handleSwitchChain}
|
|
||||||
disabled={isSwitchChainPending}
|
|
||||||
isLoading={isSwitchChainPending}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
Switch to {nextChain.name}
|
|
||||||
</Button>
|
|
||||||
{isSwitchChainError && renderError(switchChainError)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Footer activeTab={currentTab as Tab} setActiveTab={setActiveTab} showWallet={USE_WALLET} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Solana functions inspired by farcaster demo
|
|
||||||
// https://github.com/farcasterxyz/frames-v2-demo/blob/main/src/components/Demo.tsx
|
|
||||||
function SignSolanaMessage({ signMessage }: { signMessage?: (message: Uint8Array) => Promise<Uint8Array> }) {
|
|
||||||
const [signature, setSignature] = useState<string | undefined>();
|
|
||||||
const [signError, setSignError] = useState<Error | undefined>();
|
|
||||||
const [signPending, setSignPending] = useState(false);
|
|
||||||
|
|
||||||
const handleSignMessage = useCallback(async () => {
|
|
||||||
setSignPending(true);
|
|
||||||
try {
|
|
||||||
if (!signMessage) {
|
|
||||||
throw new Error('no Solana signMessage');
|
|
||||||
}
|
|
||||||
const input = new TextEncoder().encode("Hello from Solana!");
|
|
||||||
const signatureBytes = await signMessage(input);
|
|
||||||
const signature = btoa(String.fromCharCode(...signatureBytes));
|
|
||||||
setSignature(signature);
|
|
||||||
setSignError(undefined);
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
setSignError(e);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
setSignPending(false);
|
|
||||||
}
|
|
||||||
}, [signMessage]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
onClick={handleSignMessage}
|
|
||||||
disabled={signPending}
|
|
||||||
isLoading={signPending}
|
|
||||||
className="mb-4"
|
|
||||||
>
|
|
||||||
Sign Message
|
|
||||||
</Button>
|
|
||||||
{signError && renderError(signError)}
|
|
||||||
{signature && (
|
|
||||||
<div className="mt-2 text-xs">
|
|
||||||
<div>Signature: {signature}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SendSolana() {
|
|
||||||
const [state, setState] = useState<
|
|
||||||
| { status: 'none' }
|
|
||||||
| { status: 'pending' }
|
|
||||||
| { status: 'error'; error: Error }
|
|
||||||
| { status: 'success'; signature: string }
|
|
||||||
>({ status: 'none' });
|
|
||||||
|
|
||||||
const { connection: solanaConnection } = useSolanaConnection();
|
|
||||||
const { sendTransaction, publicKey } = useSolanaWallet();
|
|
||||||
|
|
||||||
// This should be replaced but including it from the original demo
|
|
||||||
// https://github.com/farcasterxyz/frames-v2-demo/blob/main/src/components/Demo.tsx#L718
|
|
||||||
const ashoatsPhantomSolanaWallet = 'Ao3gLNZAsbrmnusWVqQCPMrcqNi6jdYgu8T6NCoXXQu1';
|
|
||||||
|
|
||||||
const handleSend = useCallback(async () => {
|
|
||||||
setState({ status: 'pending' });
|
|
||||||
try {
|
|
||||||
if (!publicKey) {
|
|
||||||
throw new Error('no Solana publicKey');
|
|
||||||
}
|
|
||||||
|
|
||||||
const { blockhash } = await solanaConnection.getLatestBlockhash();
|
|
||||||
if (!blockhash) {
|
|
||||||
throw new Error('failed to fetch latest Solana blockhash');
|
|
||||||
}
|
|
||||||
|
|
||||||
const fromPubkeyStr = publicKey.toBase58();
|
|
||||||
const toPubkeyStr = ashoatsPhantomSolanaWallet;
|
|
||||||
const transaction = new Transaction();
|
|
||||||
transaction.add(
|
|
||||||
SystemProgram.transfer({
|
|
||||||
fromPubkey: new PublicKey(fromPubkeyStr),
|
|
||||||
toPubkey: new PublicKey(toPubkeyStr),
|
|
||||||
lamports: 0n,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
transaction.recentBlockhash = blockhash;
|
|
||||||
transaction.feePayer = new PublicKey(fromPubkeyStr);
|
|
||||||
|
|
||||||
const simulation = await solanaConnection.simulateTransaction(transaction);
|
|
||||||
if (simulation.value.err) {
|
|
||||||
// Gather logs and error details for debugging
|
|
||||||
const logs = simulation.value.logs?.join('\n') ?? 'No logs';
|
|
||||||
const errDetail = JSON.stringify(simulation.value.err);
|
|
||||||
throw new Error(`Simulation failed: ${errDetail}\nLogs:\n${logs}`);
|
|
||||||
}
|
|
||||||
const signature = await sendTransaction(transaction, solanaConnection);
|
|
||||||
setState({ status: 'success', signature });
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
setState({ status: 'error', error: e });
|
|
||||||
} else {
|
|
||||||
setState({ status: 'none' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [sendTransaction, publicKey, solanaConnection]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
onClick={handleSend}
|
|
||||||
disabled={state.status === 'pending'}
|
|
||||||
isLoading={state.status === 'pending'}
|
|
||||||
className="mb-4"
|
|
||||||
>
|
|
||||||
Send Transaction (sol)
|
|
||||||
</Button>
|
|
||||||
{state.status === 'error' && renderError(state.error)}
|
|
||||||
{state.status === 'success' && (
|
|
||||||
<div className="mt-2 text-xs">
|
|
||||||
<div>Hash: {truncateAddress(state.signature)}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SignEvmMessage() {
|
|
||||||
const { isConnected } = useAccount();
|
|
||||||
const { connectAsync } = useConnect();
|
|
||||||
const {
|
|
||||||
signMessage,
|
|
||||||
data: signature,
|
|
||||||
error: signError,
|
|
||||||
isError: isSignError,
|
|
||||||
isPending: isSignPending,
|
|
||||||
} = useSignMessage();
|
|
||||||
|
|
||||||
const handleSignMessage = useCallback(async () => {
|
|
||||||
if (!isConnected) {
|
|
||||||
await connectAsync({
|
|
||||||
chainId: base.id,
|
|
||||||
connector: config.connectors[0],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
signMessage({ message: `Hello from ${APP_NAME}!` });
|
|
||||||
}, [connectAsync, isConnected, signMessage]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
onClick={handleSignMessage}
|
|
||||||
disabled={isSignPending}
|
|
||||||
isLoading={isSignPending}
|
|
||||||
>
|
|
||||||
Sign Message
|
|
||||||
</Button>
|
|
||||||
{isSignError && renderError(signError)}
|
|
||||||
{signature && (
|
|
||||||
<div className="mt-2 text-xs">
|
|
||||||
<div>Signature: {signature}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SendEth() {
|
|
||||||
const { isConnected, chainId } = useAccount();
|
|
||||||
const {
|
|
||||||
sendTransaction,
|
|
||||||
data,
|
|
||||||
error: sendTxError,
|
|
||||||
isError: isSendTxError,
|
|
||||||
isPending: isSendTxPending,
|
|
||||||
} = useSendTransaction();
|
|
||||||
|
|
||||||
const { isLoading: isConfirming, isSuccess: isConfirmed } =
|
|
||||||
useWaitForTransactionReceipt({
|
|
||||||
hash: data,
|
|
||||||
});
|
|
||||||
|
|
||||||
const toAddr = useMemo(() => {
|
|
||||||
// Protocol guild address
|
|
||||||
return chainId === base.id
|
|
||||||
? "0x32e3C7fD24e175701A35c224f2238d18439C7dBC"
|
|
||||||
: "0xB3d8d7887693a9852734b4D25e9C0Bb35Ba8a830";
|
|
||||||
}, [chainId]);
|
|
||||||
|
|
||||||
const handleSend = useCallback(() => {
|
|
||||||
sendTransaction({
|
|
||||||
to: toAddr,
|
|
||||||
value: 1n,
|
|
||||||
});
|
|
||||||
}, [toAddr, sendTransaction]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
onClick={handleSend}
|
|
||||||
disabled={!isConnected || isSendTxPending}
|
|
||||||
isLoading={isSendTxPending}
|
|
||||||
>
|
|
||||||
Send Transaction (eth)
|
|
||||||
</Button>
|
|
||||||
{isSendTxError && renderError(sendTxError)}
|
|
||||||
{data && (
|
|
||||||
<div className="mt-2 text-xs">
|
|
||||||
<div>Hash: {truncateAddress(data)}</div>
|
|
||||||
<div>
|
|
||||||
Status:{" "}
|
|
||||||
{isConfirming
|
|
||||||
? "Confirming..."
|
|
||||||
: isConfirmed
|
|
||||||
? "Confirmed!"
|
|
||||||
: "Pending"}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SignIn() {
|
|
||||||
const [signingIn, setSigningIn] = useState(false);
|
|
||||||
const [signingOut, setSigningOut] = useState(false);
|
|
||||||
const [signInResult, setSignInResult] = useState<SignInCore.SignInResult>();
|
|
||||||
const [signInFailure, setSignInFailure] = useState<string>();
|
|
||||||
const { data: session, status } = useSession();
|
|
||||||
|
|
||||||
const getNonce = useCallback(async () => {
|
|
||||||
const nonce = await getCsrfToken();
|
|
||||||
if (!nonce) throw new Error("Unable to generate nonce");
|
|
||||||
return nonce;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleSignIn = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
setSigningIn(true);
|
|
||||||
setSignInFailure(undefined);
|
|
||||||
const nonce = await getNonce();
|
|
||||||
const result = await sdk.actions.signIn({ nonce });
|
|
||||||
setSignInResult(result);
|
|
||||||
|
|
||||||
await signIn("credentials", {
|
|
||||||
message: result.message,
|
|
||||||
signature: result.signature,
|
|
||||||
redirect: false,
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof SignInCore.RejectedByUser) {
|
|
||||||
setSignInFailure("Rejected by user");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSignInFailure("Unknown error");
|
|
||||||
} finally {
|
|
||||||
setSigningIn(false);
|
|
||||||
}
|
|
||||||
}, [getNonce]);
|
|
||||||
|
|
||||||
const handleSignOut = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
setSigningOut(true);
|
|
||||||
await signOut({ redirect: false });
|
|
||||||
setSignInResult(undefined);
|
|
||||||
} finally {
|
|
||||||
setSigningOut(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{status !== "authenticated" && (
|
|
||||||
<Button onClick={handleSignIn} disabled={signingIn}>
|
|
||||||
Sign In with Farcaster
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{status === "authenticated" && (
|
|
||||||
<Button onClick={handleSignOut} disabled={signingOut}>
|
|
||||||
Sign out
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{session && (
|
|
||||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
|
||||||
<div className="font-semibold text-gray-500 mb-1">Session</div>
|
|
||||||
<div className="whitespace-pre">
|
|
||||||
{JSON.stringify(session, null, 2)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{signInFailure && !signingIn && (
|
|
||||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
|
||||||
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
|
|
||||||
<div className="whitespace-pre">{signInFailure}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{signInResult && !signingIn && (
|
|
||||||
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
|
||||||
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
|
|
||||||
<div className="whitespace-pre">
|
|
||||||
{JSON.stringify(signInResult, null, 2)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderError = (error: Error | null) => {
|
|
||||||
if (!error) return null;
|
|
||||||
if (error instanceof BaseError) {
|
|
||||||
const isUserRejection = error.walk(
|
|
||||||
(e) => e instanceof UserRejectedRequestError
|
|
||||||
);
|
|
||||||
|
|
||||||
if (isUserRejection) {
|
|
||||||
return <div className="text-red-500 text-xs mt-1">Rejected by user.</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="text-red-500 text-xs mt-1">{error.message}</div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
@ -1,17 +1,50 @@
|
|||||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
isLoading?: boolean;
|
isLoading?: boolean;
|
||||||
|
variant?: 'primary' | 'secondary' | 'outline';
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Button({ children, className = "", isLoading = false, ...props }: ButtonProps) {
|
export function Button({
|
||||||
|
children,
|
||||||
|
className = "",
|
||||||
|
isLoading = false,
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
...props
|
||||||
|
}: ButtonProps) {
|
||||||
|
const baseClasses = "btn";
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
primary: "btn-primary",
|
||||||
|
secondary: "btn-secondary",
|
||||||
|
outline: "btn-outline"
|
||||||
|
};
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: "px-3 py-1.5 text-xs",
|
||||||
|
md: "px-4 py-2 text-sm",
|
||||||
|
lg: "px-6 py-3 text-base"
|
||||||
|
};
|
||||||
|
|
||||||
|
const fullWidthClasses = "w-full max-w-xs mx-auto block";
|
||||||
|
|
||||||
|
const combinedClasses = [
|
||||||
|
baseClasses,
|
||||||
|
variantClasses[variant],
|
||||||
|
sizeClasses[size],
|
||||||
|
fullWidthClasses,
|
||||||
|
className
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className={`w-full max-w-xs mx-auto block bg-[#7C65C1] text-white py-3 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#7C65C1] hover:bg-[#6952A3] ${className}`}
|
className={combinedClasses}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center">
|
<div className="flex items-center justify-center">
|
||||||
<div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full" />
|
<div className="spinner-primary h-5 w-5" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
children
|
children
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import type { Tab } from "~/components/Demo";
|
import { Tab } from "~/components/App";
|
||||||
|
|
||||||
interface FooterProps {
|
interface FooterProps {
|
||||||
activeTab: Tab;
|
activeTab: Tab;
|
||||||
@ -8,30 +8,30 @@ interface FooterProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Footer: React.FC<FooterProps> = ({ activeTab, setActiveTab, showWallet = false }) => (
|
export const Footer: React.FC<FooterProps> = ({ activeTab, setActiveTab, showWallet = false }) => (
|
||||||
<div className="fixed bottom-0 left-0 right-0 mx-4 mb-4 bg-gray-100 dark:bg-gray-800 border-[3px] border-double border-purple-500 px-2 py-2 rounded-lg z-50">
|
<div className="fixed bottom-0 left-0 right-0 mx-4 mb-4 bg-gray-100 dark:bg-gray-800 border-[3px] border-double border-primary px-2 py-2 rounded-lg z-50">
|
||||||
<div className="flex justify-around items-center h-14">
|
<div className="flex justify-around items-center h-14">
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('home')}
|
onClick={() => setActiveTab(Tab.Home)}
|
||||||
className={`flex flex-col items-center justify-center w-full h-full ${
|
className={`flex flex-col items-center justify-center w-full h-full ${
|
||||||
activeTab === 'home' ? 'text-purple-500 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400'
|
activeTab === Tab.Home ? 'text-primary dark:text-primary-light' : 'text-gray-500 dark:text-gray-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-xl">🏠</span>
|
<span className="text-xl">🏠</span>
|
||||||
<span className="text-xs mt-1">Home</span>
|
<span className="text-xs mt-1">Home</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('actions')}
|
onClick={() => setActiveTab(Tab.Actions)}
|
||||||
className={`flex flex-col items-center justify-center w-full h-full ${
|
className={`flex flex-col items-center justify-center w-full h-full ${
|
||||||
activeTab === 'actions' ? 'text-purple-500 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400'
|
activeTab === Tab.Actions ? 'text-primary dark:text-primary-light' : 'text-gray-500 dark:text-gray-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-xl">⚡</span>
|
<span className="text-xl">⚡</span>
|
||||||
<span className="text-xs mt-1">Actions</span>
|
<span className="text-xs mt-1">Actions</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('context')}
|
onClick={() => setActiveTab(Tab.Context)}
|
||||||
className={`flex flex-col items-center justify-center w-full h-full ${
|
className={`flex flex-col items-center justify-center w-full h-full ${
|
||||||
activeTab === 'context' ? 'text-purple-500 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400'
|
activeTab === Tab.Context ? 'text-primary dark:text-primary-light' : 'text-gray-500 dark:text-gray-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-xl">📋</span>
|
<span className="text-xl">📋</span>
|
||||||
@ -39,9 +39,9 @@ export const Footer: React.FC<FooterProps> = ({ activeTab, setActiveTab, showWal
|
|||||||
</button>
|
</button>
|
||||||
{showWallet && (
|
{showWallet && (
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('wallet')}
|
onClick={() => setActiveTab(Tab.Wallet)}
|
||||||
className={`flex flex-col items-center justify-center w-full h-full ${
|
className={`flex flex-col items-center justify-center w-full h-full ${
|
||||||
activeTab === 'wallet' ? 'text-purple-500 dark:text-purple-400' : 'text-gray-500 dark:text-gray-400'
|
activeTab === Tab.Wallet ? 'text-primary dark:text-primary-light' : 'text-gray-500 dark:text-gray-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span className="text-xl">👛</span>
|
<span className="text-xl">👛</span>
|
||||||
|
|||||||
@ -15,12 +15,11 @@ type HeaderProps = {
|
|||||||
export function Header({ neynarUser }: HeaderProps) {
|
export function Header({ neynarUser }: HeaderProps) {
|
||||||
const { context } = useMiniApp();
|
const { context } = useMiniApp();
|
||||||
const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
|
const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
|
||||||
const [hasClickedPfp, setHasClickedPfp] = useState(false);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div
|
<div
|
||||||
className="mb-1 py-2 px-3 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-between border-[3px] border-double border-purple-500"
|
className="mt-4 mb-4 mx-4 px-2 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-between border-[3px] border-double border-primary"
|
||||||
>
|
>
|
||||||
<div className="text-lg font-light">
|
<div className="text-lg font-light">
|
||||||
Welcome to {APP_NAME}!
|
Welcome to {APP_NAME}!
|
||||||
@ -30,14 +29,13 @@ export function Header({ neynarUser }: HeaderProps) {
|
|||||||
className="cursor-pointer"
|
className="cursor-pointer"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsUserDropdownOpen(!isUserDropdownOpen);
|
setIsUserDropdownOpen(!isUserDropdownOpen);
|
||||||
setHasClickedPfp(true);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{context.user.pfpUrl && (
|
{context.user.pfpUrl && (
|
||||||
<img
|
<img
|
||||||
src={context.user.pfpUrl}
|
src={context.user.pfpUrl}
|
||||||
alt="Profile"
|
alt="Profile"
|
||||||
className="w-10 h-10 rounded-full border-2 border-purple-500"
|
className="w-10 h-10 rounded-full border-2 border-primary"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -45,14 +43,8 @@ export function Header({ neynarUser }: HeaderProps) {
|
|||||||
</div>
|
</div>
|
||||||
{context?.user && (
|
{context?.user && (
|
||||||
<>
|
<>
|
||||||
{!hasClickedPfp && (
|
|
||||||
<div className="absolute right-0 -bottom-6 text-xs text-purple-500 flex items-center justify-end gap-1 pr-2">
|
|
||||||
<span className="text-[10px]">↑</span> Click PFP! <span className="text-[10px]">↑</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isUserDropdownOpen && (
|
{isUserDropdownOpen && (
|
||||||
<div className="absolute top-full right-0 z-50 w-fit mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
|
<div className="absolute top-full right-0 z-50 w-fit mt-1 mx-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
|
||||||
<div className="p-3 space-y-2">
|
<div className="p-3 space-y-2">
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<h3
|
<h3
|
||||||
|
|||||||
182
src/components/ui/tabs/ActionsTab.tsx
Normal file
182
src/components/ui/tabs/ActionsTab.tsx
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { useMiniApp } from "@neynar/react";
|
||||||
|
import { ShareButton } from "../Share";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { SignIn } from "../wallet/SignIn";
|
||||||
|
import { type Haptics } from "@farcaster/frame-sdk";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ActionsTab component handles mini app actions like sharing, notifications, and haptic feedback.
|
||||||
|
*
|
||||||
|
* This component provides the main interaction interface for users to:
|
||||||
|
* - Share the mini app with others
|
||||||
|
* - Sign in with Farcaster
|
||||||
|
* - Send notifications to their account
|
||||||
|
* - Trigger haptic feedback
|
||||||
|
* - Add the mini app to their client
|
||||||
|
* - Copy share URLs
|
||||||
|
*
|
||||||
|
* The component uses the useMiniApp hook to access Farcaster context and actions.
|
||||||
|
* All state is managed locally within this component.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <ActionsTab />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function ActionsTab() {
|
||||||
|
// --- Hooks ---
|
||||||
|
const {
|
||||||
|
actions,
|
||||||
|
added,
|
||||||
|
notificationDetails,
|
||||||
|
haptics,
|
||||||
|
context,
|
||||||
|
} = useMiniApp();
|
||||||
|
|
||||||
|
// --- State ---
|
||||||
|
const [notificationState, setNotificationState] = useState({
|
||||||
|
sendStatus: "",
|
||||||
|
shareUrlCopied: false,
|
||||||
|
});
|
||||||
|
const [selectedHapticIntensity, setSelectedHapticIntensity] = useState<Haptics.ImpactOccurredType>('medium');
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Sends a notification to the current user's Farcaster account.
|
||||||
|
*
|
||||||
|
* This function makes a POST request to the /api/send-notification endpoint
|
||||||
|
* with the user's FID and notification details. It handles different response
|
||||||
|
* statuses including success (200), rate limiting (429), and errors.
|
||||||
|
*
|
||||||
|
* @returns Promise that resolves when the notification is sent or fails
|
||||||
|
*/
|
||||||
|
const sendFarcasterNotification = useCallback(async () => {
|
||||||
|
setNotificationState((prev) => ({ ...prev, sendStatus: "" }));
|
||||||
|
if (!notificationDetails || !context) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/send-notification", {
|
||||||
|
method: "POST",
|
||||||
|
mode: "same-origin",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
fid: context.user.fid,
|
||||||
|
notificationDetails,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (response.status === 200) {
|
||||||
|
setNotificationState((prev) => ({ ...prev, sendStatus: "Success" }));
|
||||||
|
return;
|
||||||
|
} else if (response.status === 429) {
|
||||||
|
setNotificationState((prev) => ({ ...prev, sendStatus: "Rate limited" }));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const responseText = await response.text();
|
||||||
|
setNotificationState((prev) => ({ ...prev, sendStatus: `Error: ${responseText}` }));
|
||||||
|
} catch (error) {
|
||||||
|
setNotificationState((prev) => ({ ...prev, sendStatus: `Error: ${error}` }));
|
||||||
|
}
|
||||||
|
}, [context, notificationDetails]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Copies the share URL for the current user to the clipboard.
|
||||||
|
*
|
||||||
|
* This function generates a share URL using the user's FID and copies it
|
||||||
|
* to the clipboard. It shows a temporary "Copied!" message for 2 seconds.
|
||||||
|
*/
|
||||||
|
const copyUserShareUrl = useCallback(async () => {
|
||||||
|
if (context?.user?.fid) {
|
||||||
|
const userShareUrl = `${process.env.NEXT_PUBLIC_URL}/share/${context.user.fid}`;
|
||||||
|
await navigator.clipboard.writeText(userShareUrl);
|
||||||
|
setNotificationState((prev) => ({ ...prev, shareUrlCopied: true }));
|
||||||
|
setTimeout(() => setNotificationState((prev) => ({ ...prev, shareUrlCopied: false })), 2000);
|
||||||
|
}
|
||||||
|
}, [context?.user?.fid]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Triggers haptic feedback with the selected intensity.
|
||||||
|
*
|
||||||
|
* This function calls the haptics.impactOccurred method with the current
|
||||||
|
* selectedHapticIntensity setting. It handles errors gracefully by logging them.
|
||||||
|
*/
|
||||||
|
const triggerHapticFeedback = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
await haptics.impactOccurred(selectedHapticIntensity);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Haptic feedback failed:', error);
|
||||||
|
}
|
||||||
|
}, [haptics, selectedHapticIntensity]);
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<div className="space-y-3 px-6 w-full max-w-md mx-auto">
|
||||||
|
{/* Share functionality */}
|
||||||
|
<ShareButton
|
||||||
|
buttonText="Share Mini App"
|
||||||
|
cast={{
|
||||||
|
text: "Check out this awesome frame @1 @2 @3! 🚀🪐",
|
||||||
|
bestFriends: true,
|
||||||
|
embeds: [`${process.env.NEXT_PUBLIC_URL}/share/${context?.user?.fid || ''}`]
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Authentication */}
|
||||||
|
<SignIn />
|
||||||
|
|
||||||
|
{/* Mini app actions */}
|
||||||
|
<Button onClick={() => actions.openUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ")} className="w-full">Open Link</Button>
|
||||||
|
|
||||||
|
<Button onClick={actions.addMiniApp} disabled={added} className="w-full">
|
||||||
|
Add Mini App to Client
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Notification functionality */}
|
||||||
|
{notificationState.sendStatus && (
|
||||||
|
<div className="text-sm w-full">
|
||||||
|
Send notification result: {notificationState.sendStatus}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Button onClick={sendFarcasterNotification} disabled={!notificationDetails} className="w-full">
|
||||||
|
Send notification
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Share URL copying */}
|
||||||
|
<Button
|
||||||
|
onClick={copyUserShareUrl}
|
||||||
|
disabled={!context?.user?.fid}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
{notificationState.shareUrlCopied ? "Copied!" : "Copy share URL"}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Haptic feedback controls */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
Haptic Intensity
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={selectedHapticIntensity}
|
||||||
|
onChange={(e) => setSelectedHapticIntensity(e.target.value as Haptics.ImpactOccurredType)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
|
>
|
||||||
|
<option value={'light'}>Light</option>
|
||||||
|
<option value={'medium'}>Medium</option>
|
||||||
|
<option value={'heavy'}>Heavy</option>
|
||||||
|
<option value={'soft'}>Soft</option>
|
||||||
|
<option value={'rigid'}>Rigid</option>
|
||||||
|
</select>
|
||||||
|
<Button
|
||||||
|
onClick={triggerHapticFeedback}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Trigger Haptic Feedback
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/components/ui/tabs/ContextTab.tsx
Normal file
35
src/components/ui/tabs/ContextTab.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
src/components/ui/tabs/HomeTab.tsx
Normal file
24
src/components/ui/tabs/HomeTab.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* HomeTab component displays the main landing content for the mini app.
|
||||||
|
*
|
||||||
|
* This is the default tab that users see when they first open the mini app.
|
||||||
|
* It provides a simple welcome message and placeholder content that can be
|
||||||
|
* customized for specific use cases.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <HomeTab />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function HomeTab() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-[calc(100vh-200px)] px-6">
|
||||||
|
<div className="text-center w-full max-w-md mx-auto">
|
||||||
|
<p className="text-lg mb-2">Put your content here!</p>
|
||||||
|
<p className="text-sm text-gray-500">Powered by Neynar 🪐</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
360
src/components/ui/tabs/WalletTab.tsx
Normal file
360
src/components/ui/tabs/WalletTab.tsx
Normal file
@ -0,0 +1,360 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useMemo, useState, useEffect } from "react";
|
||||||
|
import { useAccount, useSendTransaction, useSignTypedData, useWaitForTransactionReceipt, useDisconnect, useConnect, useSwitchChain, useChainId } from "wagmi";
|
||||||
|
import { useWallet as useSolanaWallet } from '@solana/wallet-adapter-react';
|
||||||
|
import { base, degen, mainnet, optimism, unichain } from "wagmi/chains";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { truncateAddress } from "../../../lib/truncateAddress";
|
||||||
|
import { renderError } from "../../../lib/errorUtils";
|
||||||
|
import { SignEvmMessage } from "../wallet/SignEvmMessage";
|
||||||
|
import { SendEth } from "../wallet/SendEth";
|
||||||
|
import { SignSolanaMessage } from "../wallet/SignSolanaMessage";
|
||||||
|
import { SendSolana } from "../wallet/SendSolana";
|
||||||
|
import { USE_WALLET, APP_NAME } from "../../../lib/constants";
|
||||||
|
import { useMiniApp } from "@neynar/react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WalletTab component manages wallet-related UI for both EVM and Solana chains.
|
||||||
|
*
|
||||||
|
* This component provides a comprehensive wallet interface that supports:
|
||||||
|
* - EVM wallet connections (Farcaster Frame, Coinbase Wallet, MetaMask)
|
||||||
|
* - Solana wallet integration
|
||||||
|
* - Message signing for both chains
|
||||||
|
* - Transaction sending for both chains
|
||||||
|
* - Chain switching for EVM chains
|
||||||
|
* - Auto-connection in Farcaster clients
|
||||||
|
*
|
||||||
|
* The component automatically detects when running in a Farcaster client
|
||||||
|
* and attempts to auto-connect using the Farcaster Frame connector.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <WalletTab />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface WalletStatusProps {
|
||||||
|
address?: string;
|
||||||
|
chainId?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays the current wallet address and chain ID.
|
||||||
|
*/
|
||||||
|
function WalletStatus({ address, chainId }: WalletStatusProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{address && (
|
||||||
|
<div className="text-xs w-full">
|
||||||
|
Address: <pre className="inline w-full">{truncateAddress(address)}</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{chainId && (
|
||||||
|
<div className="text-xs w-full">
|
||||||
|
Chain ID: <pre className="inline w-full">{chainId}</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ConnectionControlsProps {
|
||||||
|
isConnected: boolean;
|
||||||
|
context: any;
|
||||||
|
connect: any;
|
||||||
|
connectors: readonly any[];
|
||||||
|
disconnect: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders wallet connection controls based on connection state and context.
|
||||||
|
*/
|
||||||
|
function ConnectionControls({
|
||||||
|
isConnected,
|
||||||
|
context,
|
||||||
|
connect,
|
||||||
|
connectors,
|
||||||
|
disconnect,
|
||||||
|
}: ConnectionControlsProps) {
|
||||||
|
if (isConnected) {
|
||||||
|
return (
|
||||||
|
<Button onClick={() => disconnect()} className="w-full">
|
||||||
|
Disconnect
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (context) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2 w-full">
|
||||||
|
<Button onClick={() => connect({ connector: connectors[0] })} className="w-full">
|
||||||
|
Connect (Auto)
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
console.log("Manual Farcaster connection attempt");
|
||||||
|
console.log("Connectors:", connectors.map((c, i) => `${i}: ${c.name}`));
|
||||||
|
connect({ connector: connectors[0] });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Connect Farcaster (Manual)
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="space-y-3 w-full">
|
||||||
|
<Button onClick={() => connect({ connector: connectors[1] })} className="w-full">
|
||||||
|
Connect Coinbase Wallet
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => connect({ connector: connectors[2] })} className="w-full">
|
||||||
|
Connect MetaMask
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WalletTab() {
|
||||||
|
// --- State ---
|
||||||
|
const [evmContractTransactionHash, setEvmContractTransactionHash] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// --- Hooks ---
|
||||||
|
const { context } = useMiniApp();
|
||||||
|
const { address, isConnected } = useAccount();
|
||||||
|
const chainId = useChainId();
|
||||||
|
const solanaWallet = useSolanaWallet();
|
||||||
|
const { publicKey: solanaPublicKey } = solanaWallet;
|
||||||
|
|
||||||
|
// --- Wagmi Hooks ---
|
||||||
|
const {
|
||||||
|
sendTransaction,
|
||||||
|
error: evmTransactionError,
|
||||||
|
isError: isEvmTransactionError,
|
||||||
|
isPending: isEvmTransactionPending,
|
||||||
|
} = useSendTransaction();
|
||||||
|
|
||||||
|
const { isLoading: isEvmTransactionConfirming, isSuccess: isEvmTransactionConfirmed } =
|
||||||
|
useWaitForTransactionReceipt({
|
||||||
|
hash: evmContractTransactionHash as `0x${string}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
signTypedData,
|
||||||
|
error: evmSignTypedDataError,
|
||||||
|
isError: isEvmSignTypedDataError,
|
||||||
|
isPending: isEvmSignTypedDataPending,
|
||||||
|
} = useSignTypedData();
|
||||||
|
|
||||||
|
const { disconnect } = useDisconnect();
|
||||||
|
const { connect, connectors } = useConnect();
|
||||||
|
|
||||||
|
const {
|
||||||
|
switchChain,
|
||||||
|
error: chainSwitchError,
|
||||||
|
isError: isChainSwitchError,
|
||||||
|
isPending: isChainSwitchPending,
|
||||||
|
} = useSwitchChain();
|
||||||
|
|
||||||
|
// --- Effects ---
|
||||||
|
/**
|
||||||
|
* Debug logging for wallet auto-connection and state changes.
|
||||||
|
* Logs context, connection status, address, and available connectors.
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
console.log("WalletTab Debug Info:");
|
||||||
|
console.log("- context:", context);
|
||||||
|
console.log("- isConnected:", isConnected);
|
||||||
|
console.log("- address:", address);
|
||||||
|
console.log("- connectors:", connectors);
|
||||||
|
console.log("- context?.user:", context?.user);
|
||||||
|
}, [context, isConnected, address, connectors]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auto-connect when Farcaster context is available.
|
||||||
|
*
|
||||||
|
* This effect detects when the app is running in a Farcaster client
|
||||||
|
* and automatically attempts to connect using the Farcaster Frame connector.
|
||||||
|
* It includes comprehensive logging for debugging connection issues.
|
||||||
|
*/
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if we're in a Farcaster client environment
|
||||||
|
const isInFarcasterClient = typeof window !== 'undefined' &&
|
||||||
|
(window.location.href.includes('warpcast.com') ||
|
||||||
|
window.location.href.includes('farcaster') ||
|
||||||
|
window.ethereum?.isFarcaster ||
|
||||||
|
context?.client);
|
||||||
|
|
||||||
|
if (context?.user?.fid && !isConnected && connectors.length > 0 && isInFarcasterClient) {
|
||||||
|
console.log("Attempting auto-connection with Farcaster context...");
|
||||||
|
console.log("- User FID:", context.user.fid);
|
||||||
|
console.log("- Available connectors:", connectors.map((c, i) => `${i}: ${c.name}`));
|
||||||
|
console.log("- Using connector:", connectors[0].name);
|
||||||
|
console.log("- In Farcaster client:", isInFarcasterClient);
|
||||||
|
|
||||||
|
// Use the first connector (farcasterFrame) for auto-connection
|
||||||
|
try {
|
||||||
|
connect({ connector: connectors[0] });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Auto-connection failed:", error);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("Auto-connection conditions not met:");
|
||||||
|
console.log("- Has context:", !!context?.user?.fid);
|
||||||
|
console.log("- Is connected:", isConnected);
|
||||||
|
console.log("- Has connectors:", connectors.length > 0);
|
||||||
|
console.log("- In Farcaster client:", isInFarcasterClient);
|
||||||
|
}
|
||||||
|
}, [context?.user?.fid, isConnected, connectors, connect, context?.client]);
|
||||||
|
|
||||||
|
// --- Computed Values ---
|
||||||
|
/**
|
||||||
|
* Determines the next chain to switch to based on the current chain.
|
||||||
|
* Cycles through: Base → Optimism → Degen → Mainnet → Unichain → Base
|
||||||
|
*/
|
||||||
|
const nextChain = useMemo(() => {
|
||||||
|
if (chainId === base.id) {
|
||||||
|
return optimism;
|
||||||
|
} else if (chainId === optimism.id) {
|
||||||
|
return degen;
|
||||||
|
} else if (chainId === degen.id) {
|
||||||
|
return mainnet;
|
||||||
|
} else if (chainId === mainnet.id) {
|
||||||
|
return unichain;
|
||||||
|
} else {
|
||||||
|
return base;
|
||||||
|
}
|
||||||
|
}, [chainId]);
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Handles switching to the next chain in the rotation.
|
||||||
|
* Uses the switchChain function from wagmi to change the active chain.
|
||||||
|
*/
|
||||||
|
const handleSwitchChain = useCallback(() => {
|
||||||
|
switchChain({ chainId: nextChain.id });
|
||||||
|
}, [switchChain, nextChain.id]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sends a transaction to call the yoink() function on the Yoink contract.
|
||||||
|
*
|
||||||
|
* This function sends a transaction to a specific contract address with
|
||||||
|
* the encoded function call data for the yoink() function.
|
||||||
|
*/
|
||||||
|
const sendEvmContractTransaction = useCallback(() => {
|
||||||
|
sendTransaction(
|
||||||
|
{
|
||||||
|
// call yoink() on Yoink contract
|
||||||
|
to: "0x4bBFD120d9f352A0BEd7a014bd67913a2007a878",
|
||||||
|
data: "0x9846cd9efc000023c0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onSuccess: (hash) => {
|
||||||
|
setEvmContractTransactionHash(hash);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}, [sendTransaction]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Signs typed data using EIP-712 standard.
|
||||||
|
*
|
||||||
|
* This function creates a typed data structure with the app name, version,
|
||||||
|
* and chain ID, then requests the user to sign it.
|
||||||
|
*/
|
||||||
|
const signTyped = useCallback(() => {
|
||||||
|
signTypedData({
|
||||||
|
domain: {
|
||||||
|
name: APP_NAME,
|
||||||
|
version: "1",
|
||||||
|
chainId,
|
||||||
|
},
|
||||||
|
types: {
|
||||||
|
Message: [{ name: "content", type: "string" }],
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
content: `Hello from ${APP_NAME}!`,
|
||||||
|
},
|
||||||
|
primaryType: "Message",
|
||||||
|
});
|
||||||
|
}, [chainId, signTypedData]);
|
||||||
|
|
||||||
|
// --- Early Return ---
|
||||||
|
if (!USE_WALLET) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<div className="space-y-3 px-6 w-full max-w-md mx-auto">
|
||||||
|
{/* Wallet Information Display */}
|
||||||
|
<WalletStatus address={address} chainId={chainId} />
|
||||||
|
|
||||||
|
{/* Connection Controls */}
|
||||||
|
<ConnectionControls
|
||||||
|
isConnected={isConnected}
|
||||||
|
context={context}
|
||||||
|
connect={connect}
|
||||||
|
connectors={connectors}
|
||||||
|
disconnect={disconnect}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* EVM Wallet Components */}
|
||||||
|
<SignEvmMessage />
|
||||||
|
|
||||||
|
{isConnected && (
|
||||||
|
<>
|
||||||
|
<SendEth />
|
||||||
|
<Button
|
||||||
|
onClick={sendEvmContractTransaction}
|
||||||
|
disabled={!isConnected || isEvmTransactionPending}
|
||||||
|
isLoading={isEvmTransactionPending}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Send Transaction (contract)
|
||||||
|
</Button>
|
||||||
|
{isEvmTransactionError && renderError(evmTransactionError)}
|
||||||
|
{evmContractTransactionHash && (
|
||||||
|
<div className="text-xs w-full">
|
||||||
|
<div>Hash: {truncateAddress(evmContractTransactionHash)}</div>
|
||||||
|
<div>
|
||||||
|
Status:{" "}
|
||||||
|
{isEvmTransactionConfirming
|
||||||
|
? "Confirming..."
|
||||||
|
: isEvmTransactionConfirmed
|
||||||
|
? "Confirmed!"
|
||||||
|
: "Pending"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
onClick={signTyped}
|
||||||
|
disabled={!isConnected || isEvmSignTypedDataPending}
|
||||||
|
isLoading={isEvmSignTypedDataPending}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Sign Typed Data
|
||||||
|
</Button>
|
||||||
|
{isEvmSignTypedDataError && renderError(evmSignTypedDataError)}
|
||||||
|
<Button
|
||||||
|
onClick={handleSwitchChain}
|
||||||
|
disabled={isChainSwitchPending}
|
||||||
|
isLoading={isChainSwitchPending}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Switch to {nextChain.name}
|
||||||
|
</Button>
|
||||||
|
{isChainSwitchError && renderError(chainSwitchError)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Solana Wallet Components */}
|
||||||
|
{solanaPublicKey && (
|
||||||
|
<>
|
||||||
|
<SignSolanaMessage signMessage={solanaWallet.signMessage} />
|
||||||
|
<SendSolana />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
4
src/components/ui/tabs/index.ts
Normal file
4
src/components/ui/tabs/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export { HomeTab } from './HomeTab';
|
||||||
|
export { ActionsTab } from './ActionsTab';
|
||||||
|
export { ContextTab } from './ContextTab';
|
||||||
|
export { WalletTab } from './WalletTab';
|
||||||
102
src/components/ui/wallet/SendEth.tsx
Normal file
102
src/components/ui/wallet/SendEth.tsx
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useMemo } from "react";
|
||||||
|
import { useAccount, useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
|
||||||
|
import { base } from "wagmi/chains";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { truncateAddress } from "../../../lib/truncateAddress";
|
||||||
|
import { renderError } from "../../../lib/errorUtils";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SendEth component handles sending ETH transactions to protocol guild addresses.
|
||||||
|
*
|
||||||
|
* This component provides a simple interface for users to send small amounts
|
||||||
|
* of ETH to protocol guild addresses. It automatically selects the appropriate
|
||||||
|
* recipient address based on the current chain and displays transaction status.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Chain-specific recipient addresses
|
||||||
|
* - Transaction status tracking
|
||||||
|
* - Error handling and display
|
||||||
|
* - Transaction hash display
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <SendEth />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function SendEth() {
|
||||||
|
// --- Hooks ---
|
||||||
|
const { isConnected, chainId } = useAccount();
|
||||||
|
const {
|
||||||
|
sendTransaction,
|
||||||
|
data: ethTransactionHash,
|
||||||
|
error: ethTransactionError,
|
||||||
|
isError: isEthTransactionError,
|
||||||
|
isPending: isEthTransactionPending,
|
||||||
|
} = useSendTransaction();
|
||||||
|
|
||||||
|
const { isLoading: isEthTransactionConfirming, isSuccess: isEthTransactionConfirmed } =
|
||||||
|
useWaitForTransactionReceipt({
|
||||||
|
hash: ethTransactionHash,
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Computed Values ---
|
||||||
|
/**
|
||||||
|
* Determines the recipient address based on the current chain.
|
||||||
|
*
|
||||||
|
* Uses different protocol guild addresses for different chains:
|
||||||
|
* - Base: 0x32e3C7fD24e175701A35c224f2238d18439C7dBC
|
||||||
|
* - Other chains: 0xB3d8d7887693a9852734b4D25e9C0Bb35Ba8a830
|
||||||
|
*
|
||||||
|
* @returns string - The recipient address for the current chain
|
||||||
|
*/
|
||||||
|
const protocolGuildRecipientAddress = useMemo(() => {
|
||||||
|
// Protocol guild address
|
||||||
|
return chainId === base.id
|
||||||
|
? "0x32e3C7fD24e175701A35c224f2238d18439C7dBC"
|
||||||
|
: "0xB3d8d7887693a9852734b4D25e9C0Bb35Ba8a830";
|
||||||
|
}, [chainId]);
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Handles sending the ETH transaction.
|
||||||
|
*
|
||||||
|
* This function sends a small amount of ETH (1 wei) to the protocol guild
|
||||||
|
* address for the current chain. The transaction is sent using the wagmi
|
||||||
|
* sendTransaction hook.
|
||||||
|
*/
|
||||||
|
const sendEthTransaction = useCallback(() => {
|
||||||
|
sendTransaction({
|
||||||
|
to: protocolGuildRecipientAddress,
|
||||||
|
value: 1n,
|
||||||
|
});
|
||||||
|
}, [protocolGuildRecipientAddress, sendTransaction]);
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={sendEthTransaction}
|
||||||
|
disabled={!isConnected || isEthTransactionPending}
|
||||||
|
isLoading={isEthTransactionPending}
|
||||||
|
>
|
||||||
|
Send Transaction (eth)
|
||||||
|
</Button>
|
||||||
|
{isEthTransactionError && renderError(ethTransactionError)}
|
||||||
|
{ethTransactionHash && (
|
||||||
|
<div className="mt-2 text-xs">
|
||||||
|
<div>Hash: {truncateAddress(ethTransactionHash)}</div>
|
||||||
|
<div>
|
||||||
|
Status:{" "}
|
||||||
|
{isEthTransactionConfirming
|
||||||
|
? "Confirming..."
|
||||||
|
: isEthTransactionConfirmed
|
||||||
|
? "Confirmed!"
|
||||||
|
: "Pending"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
src/components/ui/wallet/SendSolana.tsx
Normal file
111
src/components/ui/wallet/SendSolana.tsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { useConnection as useSolanaConnection, useWallet as useSolanaWallet } from '@solana/wallet-adapter-react';
|
||||||
|
import { PublicKey, SystemProgram, Transaction } from '@solana/web3.js';
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { truncateAddress } from "../../../lib/truncateAddress";
|
||||||
|
import { renderError } from "../../../lib/errorUtils";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SendSolana component handles sending SOL transactions on Solana.
|
||||||
|
*
|
||||||
|
* This component provides a simple interface for users to send SOL transactions
|
||||||
|
* using their connected Solana wallet. It includes transaction status tracking
|
||||||
|
* and error handling.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - SOL transaction sending
|
||||||
|
* - Transaction status tracking
|
||||||
|
* - Error handling and display
|
||||||
|
* - Loading state management
|
||||||
|
*
|
||||||
|
* Note: This component is a placeholder implementation. In a real application,
|
||||||
|
* you would integrate with a Solana wallet adapter and transaction library
|
||||||
|
* like @solana/web3.js to handle actual transactions.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <SendSolana />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function SendSolana() {
|
||||||
|
const [solanaTransactionState, setSolanaTransactionState] = useState<
|
||||||
|
| { status: 'none' }
|
||||||
|
| { status: 'pending' }
|
||||||
|
| { status: 'error'; error: Error }
|
||||||
|
| { status: 'success'; signature: string }
|
||||||
|
>({ status: 'none' });
|
||||||
|
|
||||||
|
const { connection: solanaConnection } = useSolanaConnection();
|
||||||
|
const { sendTransaction, publicKey } = useSolanaWallet();
|
||||||
|
|
||||||
|
// This should be replaced but including it from the original demo
|
||||||
|
// https://github.com/farcasterxyz/frames-v2-demo/blob/main/src/components/Demo.tsx#L718
|
||||||
|
const ashoatsPhantomSolanaWallet = 'Ao3gLNZAsbrmnusWVqQCPMrcqNi6jdYgu8T6NCoXXQu1';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles sending the Solana transaction
|
||||||
|
*/
|
||||||
|
const sendSolanaTransaction = useCallback(async () => {
|
||||||
|
setSolanaTransactionState({ status: 'pending' });
|
||||||
|
try {
|
||||||
|
if (!publicKey) {
|
||||||
|
throw new Error('no Solana publicKey');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { blockhash } = await solanaConnection.getLatestBlockhash();
|
||||||
|
if (!blockhash) {
|
||||||
|
throw new Error('failed to fetch latest Solana blockhash');
|
||||||
|
}
|
||||||
|
|
||||||
|
const fromPubkeyStr = publicKey.toBase58();
|
||||||
|
const toPubkeyStr = ashoatsPhantomSolanaWallet;
|
||||||
|
const transaction = new Transaction();
|
||||||
|
transaction.add(
|
||||||
|
SystemProgram.transfer({
|
||||||
|
fromPubkey: new PublicKey(fromPubkeyStr),
|
||||||
|
toPubkey: new PublicKey(toPubkeyStr),
|
||||||
|
lamports: 0n,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
transaction.recentBlockhash = blockhash;
|
||||||
|
transaction.feePayer = new PublicKey(fromPubkeyStr);
|
||||||
|
|
||||||
|
const simulation = await solanaConnection.simulateTransaction(transaction);
|
||||||
|
if (simulation.value.err) {
|
||||||
|
// Gather logs and error details for debugging
|
||||||
|
const logs = simulation.value.logs?.join('\n') ?? 'No logs';
|
||||||
|
const errDetail = JSON.stringify(simulation.value.err);
|
||||||
|
throw new Error(`Simulation failed: ${errDetail}\nLogs:\n${logs}`);
|
||||||
|
}
|
||||||
|
const signature = await sendTransaction(transaction, solanaConnection);
|
||||||
|
setSolanaTransactionState({ status: 'success', signature });
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof Error) {
|
||||||
|
setSolanaTransactionState({ status: 'error', error: e });
|
||||||
|
} else {
|
||||||
|
setSolanaTransactionState({ status: 'none' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [sendTransaction, publicKey, solanaConnection]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={sendSolanaTransaction}
|
||||||
|
disabled={solanaTransactionState.status === 'pending'}
|
||||||
|
isLoading={solanaTransactionState.status === 'pending'}
|
||||||
|
className="mb-4"
|
||||||
|
>
|
||||||
|
Send Transaction (sol)
|
||||||
|
</Button>
|
||||||
|
{solanaTransactionState.status === 'error' && renderError(solanaTransactionState.error)}
|
||||||
|
{solanaTransactionState.status === 'success' && (
|
||||||
|
<div className="mt-2 text-xs">
|
||||||
|
<div>Hash: {truncateAddress(solanaTransactionState.signature)}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
src/components/ui/wallet/SignEvmMessage.tsx
Normal file
81
src/components/ui/wallet/SignEvmMessage.tsx
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback } from "react";
|
||||||
|
import { useAccount, useConnect, useSignMessage } from "wagmi";
|
||||||
|
import { base } from "wagmi/chains";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { config } from "../../providers/WagmiProvider";
|
||||||
|
import { APP_NAME } from "../../../lib/constants";
|
||||||
|
import { renderError } from "../../../lib/errorUtils";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SignEvmMessage component handles signing messages on EVM-compatible chains.
|
||||||
|
*
|
||||||
|
* This component provides a simple interface for users to sign messages using
|
||||||
|
* their connected EVM wallet. It automatically handles wallet connection if
|
||||||
|
* the user is not already connected, and displays the signature result.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Automatic wallet connection if needed
|
||||||
|
* - Message signing with app name
|
||||||
|
* - Error handling and display
|
||||||
|
* - Signature result display
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <SignEvmMessage />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function SignEvmMessage() {
|
||||||
|
// --- Hooks ---
|
||||||
|
const { isConnected } = useAccount();
|
||||||
|
const { connectAsync } = useConnect();
|
||||||
|
const {
|
||||||
|
signMessage,
|
||||||
|
data: evmMessageSignature,
|
||||||
|
error: evmSignMessageError,
|
||||||
|
isError: isEvmSignMessageError,
|
||||||
|
isPending: isEvmSignMessagePending,
|
||||||
|
} = useSignMessage();
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Handles the message signing process.
|
||||||
|
*
|
||||||
|
* This function first ensures the user is connected to an EVM wallet,
|
||||||
|
* then requests them to sign a message containing the app name.
|
||||||
|
* If the user is not connected, it automatically connects using the
|
||||||
|
* Farcaster Frame connector.
|
||||||
|
*
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
const signEvmMessage = useCallback(async () => {
|
||||||
|
if (!isConnected) {
|
||||||
|
await connectAsync({
|
||||||
|
chainId: base.id,
|
||||||
|
connector: config.connectors[0],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
signMessage({ message: `Hello from ${APP_NAME}!` });
|
||||||
|
}, [connectAsync, isConnected, signMessage]);
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={signEvmMessage}
|
||||||
|
disabled={isEvmSignMessagePending}
|
||||||
|
isLoading={isEvmSignMessagePending}
|
||||||
|
>
|
||||||
|
Sign Message
|
||||||
|
</Button>
|
||||||
|
{isEvmSignMessageError && renderError(evmSignMessageError)}
|
||||||
|
{evmMessageSignature && (
|
||||||
|
<div className="mt-2 text-xs">
|
||||||
|
<div>Signature: {evmMessageSignature}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
158
src/components/ui/wallet/SignIn.tsx
Normal file
158
src/components/ui/wallet/SignIn.tsx
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { signIn, signOut, getCsrfToken } from "next-auth/react";
|
||||||
|
import sdk, { SignIn as SignInCore } from "@farcaster/frame-sdk";
|
||||||
|
import { useSession } from "next-auth/react";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SignIn component handles Farcaster authentication using Sign-In with Farcaster (SIWF).
|
||||||
|
*
|
||||||
|
* This component provides a complete authentication flow for Farcaster users:
|
||||||
|
* - Generates nonces for secure authentication
|
||||||
|
* - Handles the SIWF flow using the Farcaster SDK
|
||||||
|
* - Manages NextAuth session state
|
||||||
|
* - Provides sign-out functionality
|
||||||
|
* - Displays authentication status and results
|
||||||
|
*
|
||||||
|
* The component integrates with both the Farcaster Frame SDK and NextAuth
|
||||||
|
* to provide seamless authentication within mini apps.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <SignIn />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
interface AuthState {
|
||||||
|
signingIn: boolean;
|
||||||
|
signingOut: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SignIn() {
|
||||||
|
// --- State ---
|
||||||
|
const [authState, setAuthState] = useState<AuthState>({
|
||||||
|
signingIn: false,
|
||||||
|
signingOut: false,
|
||||||
|
});
|
||||||
|
const [signInResult, setSignInResult] = useState<SignInCore.SignInResult>();
|
||||||
|
const [signInFailure, setSignInFailure] = useState<string>();
|
||||||
|
|
||||||
|
// --- Hooks ---
|
||||||
|
const { data: session, status } = useSession();
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Generates a nonce for the sign-in process.
|
||||||
|
*
|
||||||
|
* This function retrieves a CSRF token from NextAuth to use as a nonce
|
||||||
|
* for the SIWF authentication flow. The nonce ensures the authentication
|
||||||
|
* request is fresh and prevents replay attacks.
|
||||||
|
*
|
||||||
|
* @returns Promise<string> - The generated nonce token
|
||||||
|
* @throws Error if unable to generate nonce
|
||||||
|
*/
|
||||||
|
const getNonce = useCallback(async () => {
|
||||||
|
const nonce = await getCsrfToken();
|
||||||
|
if (!nonce) throw new Error("Unable to generate nonce");
|
||||||
|
return nonce;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the sign-in process using Farcaster SDK.
|
||||||
|
*
|
||||||
|
* This function orchestrates the complete SIWF flow:
|
||||||
|
* 1. Generates a nonce for security
|
||||||
|
* 2. Calls the Farcaster SDK to initiate sign-in
|
||||||
|
* 3. Submits the result to NextAuth for session management
|
||||||
|
* 4. Handles various error conditions including user rejection
|
||||||
|
*
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
const handleSignIn = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setAuthState((prev) => ({ ...prev, signingIn: true }));
|
||||||
|
setSignInFailure(undefined);
|
||||||
|
const nonce = await getNonce();
|
||||||
|
const result = await sdk.actions.signIn({ nonce });
|
||||||
|
setSignInResult(result);
|
||||||
|
await signIn("credentials", {
|
||||||
|
message: result.message,
|
||||||
|
signature: result.signature,
|
||||||
|
redirect: false,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof SignInCore.RejectedByUser) {
|
||||||
|
setSignInFailure("Rejected by user");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSignInFailure("Unknown error");
|
||||||
|
} finally {
|
||||||
|
setAuthState((prev) => ({ ...prev, signingIn: false }));
|
||||||
|
}
|
||||||
|
}, [getNonce]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles the sign-out process.
|
||||||
|
*
|
||||||
|
* This function clears the NextAuth session and resets the local
|
||||||
|
* sign-in result state to complete the sign-out flow.
|
||||||
|
*
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
const handleSignOut = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setAuthState((prev) => ({ ...prev, signingOut: true }));
|
||||||
|
await signOut({ redirect: false });
|
||||||
|
setSignInResult(undefined);
|
||||||
|
} finally {
|
||||||
|
setAuthState((prev) => ({ ...prev, signingOut: false }));
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Authentication Buttons */}
|
||||||
|
{status !== "authenticated" && (
|
||||||
|
<Button onClick={handleSignIn} disabled={authState.signingIn}>
|
||||||
|
Sign In with Farcaster
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{status === "authenticated" && (
|
||||||
|
<Button onClick={handleSignOut} disabled={authState.signingOut}>
|
||||||
|
Sign out
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Session Information */}
|
||||||
|
{session && (
|
||||||
|
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
||||||
|
<div className="font-semibold text-gray-500 mb-1">Session</div>
|
||||||
|
<div className="whitespace-pre">
|
||||||
|
{JSON.stringify(session, null, 2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error Display */}
|
||||||
|
{signInFailure && !authState.signingIn && (
|
||||||
|
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
||||||
|
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
|
||||||
|
<div className="whitespace-pre">{signInFailure}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Result Display */}
|
||||||
|
{signInResult && !authState.signingIn && (
|
||||||
|
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 rounded-lg font-mono">
|
||||||
|
<div className="font-semibold text-gray-500 mb-1">SIWF Result</div>
|
||||||
|
<div className="whitespace-pre">
|
||||||
|
{JSON.stringify(signInResult, null, 2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
87
src/components/ui/wallet/SignSolanaMessage.tsx
Normal file
87
src/components/ui/wallet/SignSolanaMessage.tsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { renderError } from "../../../lib/errorUtils";
|
||||||
|
|
||||||
|
interface SignSolanaMessageProps {
|
||||||
|
signMessage?: (message: Uint8Array) => Promise<Uint8Array>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SignSolanaMessage component handles signing messages on Solana.
|
||||||
|
*
|
||||||
|
* This component provides a simple interface for users to sign messages using
|
||||||
|
* their connected Solana wallet. It accepts a signMessage function as a prop
|
||||||
|
* and handles the complete signing flow including error handling.
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Message signing with Solana wallet
|
||||||
|
* - Error handling and display
|
||||||
|
* - Signature result display (base64 encoded)
|
||||||
|
* - Loading state management
|
||||||
|
*
|
||||||
|
* @param props - Component props
|
||||||
|
* @param props.signMessage - Function to sign messages with Solana wallet
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* <SignSolanaMessage signMessage={solanaWallet.signMessage} />
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function SignSolanaMessage({ signMessage }: SignSolanaMessageProps) {
|
||||||
|
// --- State ---
|
||||||
|
const [signature, setSignature] = useState<string | undefined>();
|
||||||
|
const [signError, setSignError] = useState<Error | undefined>();
|
||||||
|
const [signPending, setSignPending] = useState(false);
|
||||||
|
|
||||||
|
// --- Handlers ---
|
||||||
|
/**
|
||||||
|
* Handles the Solana message signing process.
|
||||||
|
*
|
||||||
|
* This function encodes a message as UTF-8 bytes, signs it using the provided
|
||||||
|
* signMessage function, and displays the base64-encoded signature result.
|
||||||
|
* It includes comprehensive error handling and loading state management.
|
||||||
|
*
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
const handleSignMessage = useCallback(async () => {
|
||||||
|
setSignPending(true);
|
||||||
|
try {
|
||||||
|
if (!signMessage) {
|
||||||
|
throw new Error('no Solana signMessage');
|
||||||
|
}
|
||||||
|
const input = new TextEncoder().encode("Hello from Solana!");
|
||||||
|
const signatureBytes = await signMessage(input);
|
||||||
|
const signature = btoa(String.fromCharCode(...signatureBytes));
|
||||||
|
setSignature(signature);
|
||||||
|
setSignError(undefined);
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof Error) {
|
||||||
|
setSignError(e);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setSignPending(false);
|
||||||
|
}
|
||||||
|
}, [signMessage]);
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
onClick={handleSignMessage}
|
||||||
|
disabled={signPending}
|
||||||
|
isLoading={signPending}
|
||||||
|
className="mb-4"
|
||||||
|
>
|
||||||
|
Sign Message
|
||||||
|
</Button>
|
||||||
|
{signError && renderError(signError)}
|
||||||
|
{signature && (
|
||||||
|
<div className="mt-2 text-xs">
|
||||||
|
<div>Signature: {signature}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/components/ui/wallet/index.ts
Normal file
5
src/components/ui/wallet/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export { SignIn } from './SignIn';
|
||||||
|
export { SignEvmMessage } from './SignEvmMessage';
|
||||||
|
export { SendEth } from './SendEth';
|
||||||
|
export { SignSolanaMessage } from './SignSolanaMessage';
|
||||||
|
export { SendSolana } from './SendSolana';
|
||||||
38
src/hooks/useNeynarUser.ts
Normal file
38
src/hooks/useNeynarUser.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export interface NeynarUser {
|
||||||
|
fid: number;
|
||||||
|
score: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useNeynarUser(context?: { user?: { fid?: number } }) {
|
||||||
|
const [user, setUser] = useState<NeynarUser | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!context?.user?.fid) {
|
||||||
|
setUser(null);
|
||||||
|
setError(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
fetch(`/api/users?fids=${context.user.fid}`)
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
if (data.users?.[0]) {
|
||||||
|
setUser(data.users[0]);
|
||||||
|
} else {
|
||||||
|
setUser(null);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => setError(err.message))
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [context?.user?.fid]);
|
||||||
|
|
||||||
|
return { user, loading, error };
|
||||||
|
}
|
||||||
@ -1,14 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* Application constants and configuration values.
|
||||||
|
*
|
||||||
|
* This file contains all the configuration constants used throughout the mini app.
|
||||||
|
* These values are either sourced from environment variables or hardcoded and provide
|
||||||
|
* configuration for the app's appearance, behavior, and integration settings.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// --- App Configuration ---
|
||||||
|
/**
|
||||||
|
* The base URL of the application.
|
||||||
|
* Used for generating absolute URLs for assets and API endpoints.
|
||||||
|
*/
|
||||||
export const APP_URL = process.env.NEXT_PUBLIC_URL!;
|
export const APP_URL = process.env.NEXT_PUBLIC_URL!;
|
||||||
export const APP_NAME = process.env.NEXT_PUBLIC_MINI_APP_NAME;
|
|
||||||
export const APP_DESCRIPTION = process.env.NEXT_PUBLIC_MINI_APP_DESCRIPTION;
|
/**
|
||||||
export const APP_PRIMARY_CATEGORY = process.env.NEXT_PUBLIC_MINI_APP_PRIMARY_CATEGORY;
|
* The name of the mini app as displayed to users.
|
||||||
export const APP_TAGS = process.env.NEXT_PUBLIC_MINI_APP_TAGS?.split(',');
|
* Used in titles, headers, and app store listings.
|
||||||
|
*/
|
||||||
|
export const APP_NAME = 'Starter Kit';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A brief description of the mini app's functionality.
|
||||||
|
* Used in app store listings and metadata.
|
||||||
|
*/
|
||||||
|
export const APP_DESCRIPTION = 'A demo of the Neynar Starter Kit';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The primary category for the mini app.
|
||||||
|
* Used for app store categorization and discovery.
|
||||||
|
*/
|
||||||
|
export const APP_PRIMARY_CATEGORY = 'developer-tools';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tags associated with the mini app.
|
||||||
|
* Used for search and discovery in app stores.
|
||||||
|
* Parsed from comma-separated environment variable.
|
||||||
|
*/
|
||||||
|
export const APP_TAGS = ['neynar', 'starter-kit', 'demo'];
|
||||||
|
|
||||||
|
// --- Asset URLs ---
|
||||||
|
/**
|
||||||
|
* URL for the app's icon image.
|
||||||
|
* Used in app store listings and UI elements.
|
||||||
|
*/
|
||||||
export const APP_ICON_URL = `${APP_URL}/icon.png`;
|
export const APP_ICON_URL = `${APP_URL}/icon.png`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* URL for the app's Open Graph image.
|
||||||
|
* Used for social media sharing and previews.
|
||||||
|
*/
|
||||||
export const APP_OG_IMAGE_URL = `${APP_URL}/api/opengraph-image`;
|
export const APP_OG_IMAGE_URL = `${APP_URL}/api/opengraph-image`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* URL for the app's splash screen image.
|
||||||
|
* Displayed during app loading.
|
||||||
|
*/
|
||||||
export const APP_SPLASH_URL = `${APP_URL}/splash.png`;
|
export const APP_SPLASH_URL = `${APP_URL}/splash.png`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Background color for the splash screen.
|
||||||
|
* Used as fallback when splash image is loading.
|
||||||
|
*/
|
||||||
export const APP_SPLASH_BACKGROUND_COLOR = "#f7f7f7";
|
export const APP_SPLASH_BACKGROUND_COLOR = "#f7f7f7";
|
||||||
export const APP_BUTTON_TEXT = process.env.NEXT_PUBLIC_MINI_APP_BUTTON_TEXT;
|
|
||||||
|
// --- UI Configuration ---
|
||||||
|
/**
|
||||||
|
* Text displayed on the main action button.
|
||||||
|
* Used for the primary call-to-action in the mini app.
|
||||||
|
*/
|
||||||
|
export const APP_BUTTON_TEXT = 'Launch NSK';
|
||||||
|
|
||||||
|
// --- Integration Configuration ---
|
||||||
|
/**
|
||||||
|
* Webhook URL for receiving events from Neynar.
|
||||||
|
*
|
||||||
|
* If Neynar API key and client ID are configured, uses the official
|
||||||
|
* Neynar webhook endpoint. Otherwise, falls back to a local webhook
|
||||||
|
* endpoint for development and testing.
|
||||||
|
*/
|
||||||
export const APP_WEBHOOK_URL = process.env.NEYNAR_API_KEY && process.env.NEYNAR_CLIENT_ID
|
export const APP_WEBHOOK_URL = process.env.NEYNAR_API_KEY && process.env.NEYNAR_CLIENT_ID
|
||||||
? `https://api.neynar.com/f/app/${process.env.NEYNAR_CLIENT_ID}/event`
|
? `https://api.neynar.com/f/app/${process.env.NEYNAR_CLIENT_ID}/event`
|
||||||
: `${APP_URL}/api/webhook`;
|
: `${APP_URL}/api/webhook`;
|
||||||
export const USE_WALLET = process.env.NEXT_PUBLIC_USE_WALLET === 'true';
|
|
||||||
|
/**
|
||||||
|
* Flag to enable/disable wallet functionality.
|
||||||
|
*
|
||||||
|
* When true, wallet-related components and features are rendered.
|
||||||
|
* When false, wallet functionality is completely hidden from the UI.
|
||||||
|
* Useful for mini apps that don't require wallet integration.
|
||||||
|
*/
|
||||||
|
export const USE_WALLET = true;
|
||||||
|
|||||||
66
src/lib/errorUtils.tsx
Normal file
66
src/lib/errorUtils.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import { type ReactElement } from "react";
|
||||||
|
import { BaseError, UserRejectedRequestError } from "viem";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders an error object in a user-friendly format.
|
||||||
|
*
|
||||||
|
* This utility function takes an error object and renders it as a React element
|
||||||
|
* with consistent styling. It handles different types of errors including:
|
||||||
|
* - Error objects with message properties
|
||||||
|
* - Objects with error properties
|
||||||
|
* - String errors
|
||||||
|
* - Unknown error types
|
||||||
|
* - User rejection errors (special handling for wallet rejections)
|
||||||
|
*
|
||||||
|
* The rendered error is displayed in a gray container with monospace font
|
||||||
|
* for better readability of technical error details. User rejections are
|
||||||
|
* displayed with a simpler, more user-friendly message.
|
||||||
|
*
|
||||||
|
* @param error - The error object to render
|
||||||
|
* @returns ReactElement - A styled error display component, or null if no error
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```tsx
|
||||||
|
* {isError && renderError(error)}
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
export function renderError(error: unknown): ReactElement | null {
|
||||||
|
// Handle null/undefined errors
|
||||||
|
if (!error) return null;
|
||||||
|
|
||||||
|
// Special handling for user rejections in wallet operations
|
||||||
|
if (error instanceof BaseError) {
|
||||||
|
const isUserRejection = error.walk(
|
||||||
|
(e) => e instanceof UserRejectedRequestError
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isUserRejection) {
|
||||||
|
return (
|
||||||
|
<div className="mt-2 p-2 text-xs bg-gray-100 dark:bg-gray-800 rounded-lg">
|
||||||
|
<div className="font-semibold text-red-500 mb-1">User Rejection</div>
|
||||||
|
<div>Transaction was rejected by user.</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extract error message from different error types
|
||||||
|
let errorMessage: string;
|
||||||
|
|
||||||
|
if (error instanceof Error) {
|
||||||
|
errorMessage = error.message;
|
||||||
|
} else if (typeof error === 'object' && error !== null && 'error' in error) {
|
||||||
|
errorMessage = String(error.error);
|
||||||
|
} else if (typeof error === 'string') {
|
||||||
|
errorMessage = error;
|
||||||
|
} else {
|
||||||
|
errorMessage = 'Unknown error occurred';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-800 rounded-lg font-mono">
|
||||||
|
<div className="font-semibold text-red-500 mb-1">Error</div>
|
||||||
|
<div className="whitespace-pre-wrap break-words">{errorMessage}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,5 +1,17 @@
|
|||||||
import type { Config } from "tailwindcss";
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tailwind CSS Configuration
|
||||||
|
*
|
||||||
|
* This configuration centralizes all theme colors for the mini app.
|
||||||
|
* To change the app's color scheme, simply update the 'primary' color value below.
|
||||||
|
*
|
||||||
|
* Example theme changes:
|
||||||
|
* - Blue theme: primary: "#3182CE"
|
||||||
|
* - Green theme: primary: "#059669"
|
||||||
|
* - Red theme: primary: "#DC2626"
|
||||||
|
* - Orange theme: primary: "#EA580C"
|
||||||
|
*/
|
||||||
export default {
|
export default {
|
||||||
darkMode: "media",
|
darkMode: "media",
|
||||||
content: [
|
content: [
|
||||||
@ -10,6 +22,16 @@ export default {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
// Main theme color - change this to update the entire app's color scheme
|
||||||
|
primary: "#8b5cf6", // Main brand color
|
||||||
|
"primary-light": "#a78bfa", // For hover states
|
||||||
|
"primary-dark": "#7c3aed", // For active states
|
||||||
|
|
||||||
|
// Secondary colors for backgrounds and text
|
||||||
|
secondary: "#f8fafc", // Light backgrounds
|
||||||
|
"secondary-dark": "#334155", // Dark backgrounds
|
||||||
|
|
||||||
|
// Legacy CSS variables for backward compatibility
|
||||||
background: 'var(--background)',
|
background: 'var(--background)',
|
||||||
foreground: 'var(--foreground)'
|
foreground: 'var(--foreground)'
|
||||||
},
|
},
|
||||||
@ -17,6 +39,20 @@ export default {
|
|||||||
lg: 'var(--radius)',
|
lg: 'var(--radius)',
|
||||||
md: 'calc(var(--radius) - 2px)',
|
md: 'calc(var(--radius) - 2px)',
|
||||||
sm: 'calc(var(--radius) - 4px)'
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
|
},
|
||||||
|
// Custom spacing for consistent layout
|
||||||
|
spacing: {
|
||||||
|
'18': '4.5rem',
|
||||||
|
'88': '22rem',
|
||||||
|
},
|
||||||
|
// Custom container sizes
|
||||||
|
maxWidth: {
|
||||||
|
'xs': '20rem',
|
||||||
|
'sm': '24rem',
|
||||||
|
'md': '28rem',
|
||||||
|
'lg': '32rem',
|
||||||
|
'xl': '36rem',
|
||||||
|
'2xl': '42rem',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user