mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-11-18 17:09:47 -05:00
refactor: restructure for better ai comprehension
This commit is contained in:
veganbeef
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> {
|
||||
children: React.ReactNode;
|
||||
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 (
|
||||
<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}
|
||||
>
|
||||
{isLoading ? (
|
||||
<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>
|
||||
) : (
|
||||
children
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import type { Tab } from "~/components/Demo";
|
||||
import { Tab } from "~/components/App";
|
||||
|
||||
interface FooterProps {
|
||||
activeTab: Tab;
|
||||
@@ -8,30 +8,30 @@ interface FooterProps {
|
||||
}
|
||||
|
||||
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">
|
||||
<button
|
||||
onClick={() => setActiveTab('home')}
|
||||
onClick={() => setActiveTab(Tab.Home)}
|
||||
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-xs mt-1">Home</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('actions')}
|
||||
onClick={() => setActiveTab(Tab.Actions)}
|
||||
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-xs mt-1">Actions</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('context')}
|
||||
onClick={() => setActiveTab(Tab.Context)}
|
||||
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>
|
||||
@@ -39,9 +39,9 @@ export const Footer: React.FC<FooterProps> = ({ activeTab, setActiveTab, showWal
|
||||
</button>
|
||||
{showWallet && (
|
||||
<button
|
||||
onClick={() => setActiveTab('wallet')}
|
||||
onClick={() => setActiveTab(Tab.Wallet)}
|
||||
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>
|
||||
|
||||
@@ -15,12 +15,11 @@ type HeaderProps = {
|
||||
export function Header({ neynarUser }: HeaderProps) {
|
||||
const { context } = useMiniApp();
|
||||
const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
|
||||
const [hasClickedPfp, setHasClickedPfp] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<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">
|
||||
Welcome to {APP_NAME}!
|
||||
@@ -30,29 +29,22 @@ export function Header({ neynarUser }: HeaderProps) {
|
||||
className="cursor-pointer"
|
||||
onClick={() => {
|
||||
setIsUserDropdownOpen(!isUserDropdownOpen);
|
||||
setHasClickedPfp(true);
|
||||
}}
|
||||
>
|
||||
{context.user.pfpUrl && (
|
||||
<img
|
||||
src={context.user.pfpUrl}
|
||||
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>
|
||||
{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 && (
|
||||
<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="text-right">
|
||||
<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';
|
||||
Reference in New Issue
Block a user