CopyBot/create-farcaster-mini-app
1
0
Fork 0
mirror of https://github.com/neynarxyz/create-farcaster-mini-app.git synced 2025-12-13 12:52:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Merge pull request #15 from neynarxyz/shreyas-formatting"

Browse Source 
This reverts commit b1fdfc19a9, reversing
changes made to b9e2087bd8.
This commit is contained in:
Shreyaschorge
2025-07-16 17:21:12 +05:30
parent 349cdea489
commit 0d43b35c28
72 changed files with 1065 additions and 6257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/ui/tabs/ActionsTab.tsx
View File

@@ -1,13 +1,13 @@
'use client';
import { useCallback, useState } from 'react';
import { type Haptics } from '@farcaster/miniapp-sdk';
import { useMiniApp } from '@neynar/react';
import { APP_URL } from '~/lib/constants';
import { Button } from '../Button';
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/miniapp-sdk";
import { APP_URL } from "~/lib/constants";
import { NeynarAuthButton } from '../NeynarAuthButton/index';
import { ShareButton } from '../Share';
import { SignIn } from '../wallet/SignIn';
/**
* ActionsTab component handles mini app actions like sharing, notifications, and haptic feedback.
@@ -52,7 +52,7 @@ export function ActionsTab() {
* @returns Promise that resolves when the notification is sent or fails
*/
const sendFarcasterNotification = useCallback(async () => {
setNotificationState(prev => ({ ...prev, sendStatus: '' }));
setNotificationState((prev) => ({ ...prev, sendStatus: '' }));
if (!notificationDetails || !context) {
return;
}
@@ -67,22 +67,22 @@ export function ActionsTab() {
}),
});
if (response.status === 200) {
setNotificationState(prev => ({ ...prev, sendStatus: 'Success' }));
setNotificationState((prev) => ({ ...prev, sendStatus: 'Success' }));
return;
} else if (response.status === 429) {
setNotificationState(prev => ({
setNotificationState((prev) => ({
...prev,
sendStatus: 'Rate limited',
}));
return;
}
const responseText = await response.text();
setNotificationState(prev => ({
setNotificationState((prev) => ({
...prev,
sendStatus: `Error: ${responseText}`,
}));
} catch (error) {
setNotificationState(prev => ({
setNotificationState((prev) => ({
...prev,
sendStatus: `Error: ${error}`,
}));
@@ -99,11 +99,11 @@ export function ActionsTab() {
if (context?.user?.fid) {
const userShareUrl = `${APP_URL}/share/${context.user.fid}`;
await navigator.clipboard.writeText(userShareUrl);
setNotificationState(prev => ({ ...prev, shareUrlCopied: true }));
setNotificationState((prev) => ({ ...prev, shareUrlCopied: true }));
setTimeout(
() =>
setNotificationState(prev => ({ ...prev, shareUrlCopied: false })),
2000,
setNotificationState((prev) => ({ ...prev, shareUrlCopied: false })),
2000
);
}
}, [context?.user?.fid]);
@@ -124,16 +124,16 @@ export function ActionsTab() {
// --- Render ---
return (
<div className="space-y-3 px-6 w-full max-w-md mx-auto">
<div className='space-y-3 px-6 w-full max-w-md mx-auto'>
{/* Share functionality */}
<ShareButton
buttonText="Share Mini App"
buttonText='Share Mini App'
cast={{
text: 'Check out this awesome frame @1 @2 @3! 🚀🪐',
bestFriends: true,
embeds: [`${APP_URL}/share/${context?.user?.fid || ''}`],
embeds: [`${APP_URL}/share/${context?.user?.fid || ''}`]
}}
className="w-full"
className='w-full'
/>
{/* Authentication */}
@@ -147,25 +147,25 @@ export function ActionsTab() {
onClick={() =>
actions.openUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
}
className="w-full"
className='w-full'
>
Open Link
</Button>
<Button onClick={actions.addMiniApp} disabled={added} className="w-full">
<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">
<div className='text-sm w-full'>
Send notification result: {notificationState.sendStatus}
</div>
)}
<Button
onClick={sendFarcasterNotification}
disabled={!notificationDetails}
className="w-full"
className='w-full'
>
Send notification
</Button>
@@ -174,24 +174,24 @@ export function ActionsTab() {
<Button
onClick={copyUserShareUrl}
disabled={!context?.user?.fid}
className="w-full"
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">
<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 =>
onChange={(e) =>
setSelectedHapticIntensity(
e.target.value as Haptics.ImpactOccurredType,
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"
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>
@@ -199,7 +199,7 @@ export function ActionsTab() {
<option value={'soft'}>Soft</option>
<option value={'rigid'}>Rigid</option>
</select>
<Button onClick={triggerHapticFeedback} className="w-full">
<Button onClick={triggerHapticFeedback} className='w-full'>
Trigger Haptic Feedback
</Button>
</div>

14
src/components/ui/tabs/ContextTab.tsx
View File

@@ -1,19 +1,19 @@
'use client';
"use client";
import { useMiniApp } from '@neynar/react';
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 />
@@ -21,7 +21,7 @@ import { useMiniApp } from '@neynar/react';
*/
export function ContextTab() {
const { context } = useMiniApp();
return (
<div className="mx-6">
<h2 className="text-lg font-semibold mb-2">Context</h2>
@@ -32,4 +32,4 @@ export function ContextTab() {
</div>
</div>
);
}
}

12
src/components/ui/tabs/HomeTab.tsx
View File

@@ -1,12 +1,12 @@
'use client';
"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 />
@@ -17,10 +17,8 @@ export function HomeTab() {
<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 dark:text-gray-400">
Powered by Neynar 🪐
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">Powered by Neynar 🪐</p>
</div>
</div>
);
}
}

142
src/components/ui/tabs/WalletTab.tsx
View File

@@ -1,32 +1,22 @@
'use client';
"use client";
import { useCallback, useMemo, useState, useEffect } from 'react';
import { useMiniApp } from '@neynar/react';
import { useCallback, useMemo, useState, useEffect } from "react";
import { useAccount, useSendTransaction, useSignTypedData, useWaitForTransactionReceipt, useDisconnect, useConnect, useSwitchChain, useChainId, type Connector } from "wagmi";
import { useWallet as useSolanaWallet } from '@solana/wallet-adapter-react';
import {
useAccount,
useSendTransaction,
useSignTypedData,
useWaitForTransactionReceipt,
useDisconnect,
useConnect,
useSwitchChain,
useChainId,
type Connector,
} from 'wagmi';
import { base, degen, mainnet, optimism, unichain } from 'wagmi/chains';
import { USE_WALLET, APP_NAME } from '../../../lib/constants';
import { renderError } from '../../../lib/errorUtils';
import { truncateAddress } from '../../../lib/truncateAddress';
import { Button } from '../Button';
import { SendEth } from '../wallet/SendEth';
import { SendSolana } from '../wallet/SendSolana';
import { SignEvmMessage } from '../wallet/SignEvmMessage';
import { SignSolanaMessage } from '../wallet/SignSolanaMessage';
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
@@ -34,10 +24,10 @@ import { SignSolanaMessage } from '../wallet/SignSolanaMessage';
* - 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 />
@@ -57,8 +47,7 @@ function WalletStatus({ address, chainId }: WalletStatusProps) {
<>
{address && (
<div className="text-xs w-full">
Address:{' '}
<pre className="inline w-full">{truncateAddress(address)}</pre>
Address: <pre className="inline w-full">{truncateAddress(address)}</pre>
</div>
)}
{chainId && (
@@ -101,14 +90,13 @@ function ConnectionControls({
if (context) {
return (
<div className="space-y-2 w-full">
<Button
onClick={() => connect({ connector: connectors[0] })}
className="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"
@@ -120,16 +108,10 @@ function ConnectionControls({
}
return (
<div className="space-y-3 w-full">
<Button
onClick={() => connect({ connector: connectors[1] })}
className="w-full"
>
<Button onClick={() => connect({ connector: connectors[1] })} className="w-full">
Connect Coinbase Wallet
</Button>
<Button
onClick={() => connect({ connector: connectors[2] })}
className="w-full"
>
<Button onClick={() => connect({ connector: connectors[2] })} className="w-full">
Connect MetaMask
</Button>
</div>
@@ -138,10 +120,8 @@ function ConnectionControls({
export function WalletTab() {
// --- State ---
const [evmContractTransactionHash, setEvmContractTransactionHash] = useState<
string | null
>(null);
const [evmContractTransactionHash, setEvmContractTransactionHash] = useState<string | null>(null);
// --- Hooks ---
const { context } = useMiniApp();
const { address, isConnected } = useAccount();
@@ -157,12 +137,10 @@ export function WalletTab() {
isPending: isEvmTransactionPending,
} = useSendTransaction();
const {
isLoading: isEvmTransactionConfirming,
isSuccess: isEvmTransactionConfirmed,
} = useWaitForTransactionReceipt({
hash: evmContractTransactionHash as `0x${string}`,
});
const { isLoading: isEvmTransactionConfirming, isSuccess: isEvmTransactionConfirmed } =
useWaitForTransactionReceipt({
hash: evmContractTransactionHash as `0x${string}`,
});
const {
signTypedData,
@@ -184,32 +162,38 @@ export function WalletTab() {
// --- Effects ---
/**
* 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
) {
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);
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]);
@@ -243,7 +227,7 @@ export function WalletTab() {
/**
* 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.
*/
@@ -251,20 +235,20 @@ export function WalletTab() {
sendTransaction(
{
// call yoink() on Yoink contract
to: '0x4bBFD120d9f352A0BEd7a014bd67913a2007a878',
data: '0x9846cd9efc000023c0',
to: "0x4bBFD120d9f352A0BEd7a014bd67913a2007a878",
data: "0x9846cd9efc000023c0",
},
{
onSuccess: hash => {
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.
*/
@@ -272,16 +256,16 @@ export function WalletTab() {
signTypedData({
domain: {
name: APP_NAME,
version: '1',
version: "1",
chainId,
},
types: {
Message: [{ name: 'content', type: 'string' }],
Message: [{ name: "content", type: "string" }],
},
message: {
content: `Hello from ${APP_NAME}!`,
},
primaryType: 'Message',
primaryType: "Message",
});
}, [chainId, signTypedData]);
@@ -324,12 +308,12 @@ export function WalletTab() {
<div className="text-xs w-full">
<div>Hash: {truncateAddress(evmContractTransactionHash)}</div>
<div>
Status:{' '}
Status:{" "}
{isEvmTransactionConfirming
? 'Confirming...'
? "Confirming..."
: isEvmTransactionConfirmed
? 'Confirmed!'
: 'Pending'}
? "Confirmed!"
: "Pending"}
</div>
</div>
)}
@@ -363,4 +347,4 @@ export function WalletTab() {
)}
</div>
);
}
}

2
src/components/ui/tabs/index.ts
View File

@@ -1,4 +1,4 @@
export { HomeTab } from './HomeTab';
export { ActionsTab } from './ActionsTab';
export { ContextTab } from './ContextTab';
export { WalletTab } from './WalletTab';
export { WalletTab } from './WalletTab';