CopyBot/create-farcaster-mini-app
1
0
Fork 0
mirror of https://github.com/neynarxyz/create-farcaster-mini-app.git synced 2025-12-05 08: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

54
src/components/ui/wallet/SendEth.tsx
View File

@@ -1,29 +1,25 @@
'use client';
"use client";
import { useCallback, useMemo } from 'react';
import {
useAccount,
useSendTransaction,
useWaitForTransactionReceipt,
} from 'wagmi';
import { base } from 'wagmi/chains';
import { renderError } from '../../../lib/errorUtils';
import { truncateAddress } from '../../../lib/truncateAddress';
import { Button } from '../Button';
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 />
@@ -40,34 +36,32 @@ export function SendEth() {
isPending: isEthTransactionPending,
} = useSendTransaction();
const {
isLoading: isEthTransactionConfirming,
isSuccess: isEthTransactionConfirmed,
} = useWaitForTransactionReceipt({
hash: ethTransactionHash,
});
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';
? "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.
@@ -94,15 +88,15 @@ export function SendEth() {
<div className="mt-2 text-xs">
<div>Hash: {truncateAddress(ethTransactionHash)}</div>
<div>
Status:{' '}
Status:{" "}
{isEthTransactionConfirming
? 'Confirming...'
? "Confirming..."
: isEthTransactionConfirmed
? 'Confirmed!'
: 'Pending'}
? "Confirmed!"
: "Pending"}
</div>
</div>
)}
</>
);
}
}

34
src/components/ui/wallet/SendSolana.tsx
View File

@@ -1,32 +1,29 @@
'use client';
"use client";
import { useCallback, useState } from 'react';
import {
useConnection as useSolanaConnection,
useWallet as useSolanaWallet,
} from '@solana/wallet-adapter-react';
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 { renderError } from '../../../lib/errorUtils';
import { truncateAddress } from '../../../lib/truncateAddress';
import { Button } from '../Button';
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 />
@@ -45,8 +42,7 @@ export function SendSolana() {
// 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 ashoatsPhantomSolanaWallet = 'Ao3gLNZAsbrmnusWVqQCPMrcqNi6jdYgu8T6NCoXXQu1';
/**
* Handles sending the Solana transaction
@@ -76,8 +72,7 @@ export function SendSolana() {
transaction.recentBlockhash = blockhash;
transaction.feePayer = new PublicKey(fromPubkeyStr);
const simulation =
await solanaConnection.simulateTransaction(transaction);
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';
@@ -105,8 +100,7 @@ export function SendSolana() {
>
Send Transaction (sol)
</Button>
{solanaTransactionState.status === 'error' &&
renderError(solanaTransactionState.error)}
{solanaTransactionState.status === 'error' && renderError(solanaTransactionState.error)}
{solanaTransactionState.status === 'success' && (
<div className="mt-2 text-xs">
<div>Hash: {truncateAddress(solanaTransactionState.signature)}</div>
@@ -114,4 +108,4 @@ export function SendSolana() {
)}
</>
);
}
}

28
src/components/ui/wallet/SignEvmMessage.tsx
View File

@@ -1,26 +1,26 @@
'use client';
"use client";
import { useCallback } from 'react';
import { useAccount, useConnect, useSignMessage } from 'wagmi';
import { base } from 'wagmi/chains';
import { APP_NAME } from '../../../lib/constants';
import { renderError } from '../../../lib/errorUtils';
import { config } from '../../providers/WagmiProvider';
import { Button } from '../Button';
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 />
@@ -41,12 +41,12 @@ export function SignEvmMessage() {
// --- 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 () => {
@@ -78,4 +78,4 @@ export function SignEvmMessage() {
)}
</>
);
}
}

32
src/components/ui/wallet/SignIn.tsx
View File

@@ -1,9 +1,9 @@
'use client';
import { useCallback, useState } from 'react';
import { SignIn as SignInCore } from '@farcaster/miniapp-sdk';
import { useQuickAuth } from '~/hooks/useQuickAuth';
import { Button } from '../Button';
import { useCallback, useState } from "react";
import sdk, { SignIn as SignInCore } from "@farcaster/miniapp-sdk";
import { Button } from "../Button";
import { useQuickAuth } from "~/hooks/useQuickAuth";
/**
* SignIn component handles Farcaster authentication using QuickAuth.
@@ -52,11 +52,11 @@ export function SignIn() {
*/
const handleSignIn = useCallback(async () => {
try {
setAuthState(prev => ({ ...prev, signingIn: true }));
setAuthState((prev) => ({ ...prev, signingIn: true }));
setSignInFailure(undefined);
const success = await signIn();
if (!success) {
setSignInFailure('Authentication failed');
}
@@ -67,7 +67,7 @@ export function SignIn() {
}
setSignInFailure('Unknown error');
} finally {
setAuthState(prev => ({ ...prev, signingIn: false }));
setAuthState((prev) => ({ ...prev, signingIn: false }));
}
}, [signIn]);
@@ -80,10 +80,10 @@ export function SignIn() {
*/
const handleSignOut = useCallback(async () => {
try {
setAuthState(prev => ({ ...prev, signingOut: true }));
setAuthState((prev) => ({ ...prev, signingOut: true }));
await signOut();
} finally {
setAuthState(prev => ({ ...prev, signingOut: false }));
setAuthState((prev) => ({ ...prev, signingOut: false }));
}
}, [signOut]);
@@ -105,9 +105,7 @@ export function SignIn() {
{/* Session Information */}
{authenticatedUser && (
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-900 rounded-lg font-mono">
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
Authenticated User
</div>
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">Authenticated User</div>
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
{JSON.stringify(authenticatedUser, null, 2)}
</div>
@@ -117,12 +115,8 @@ export function SignIn() {
{/* Error Display */}
{signInFailure && !authState.signingIn && (
<div className="my-2 p-2 text-xs overflow-x-scroll bg-gray-100 dark:bg-gray-900 rounded-lg font-mono">
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">
Authentication Error
</div>
<div className="whitespace-pre text-gray-700 dark:text-gray-200">
{signInFailure}
</div>
<div className="font-semibold text-gray-500 dark:text-gray-300 mb-1">Authentication Error</div>
<div className="whitespace-pre text-gray-700 dark:text-gray-200">{signInFailure}</div>
</div>
)}
</>

24
src/components/ui/wallet/SignSolanaMessage.tsx
View File

@@ -1,8 +1,8 @@
'use client';
"use client";
import { useCallback, useState } from 'react';
import { renderError } from '../../../lib/errorUtils';
import { Button } from '../Button';
import { useCallback, useState } from "react";
import { Button } from "../Button";
import { renderError } from "../../../lib/errorUtils";
interface SignSolanaMessageProps {
signMessage?: (message: Uint8Array) => Promise<Uint8Array>;
@@ -10,20 +10,20 @@ interface SignSolanaMessageProps {
/**
* 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} />
@@ -38,11 +38,11 @@ export function SignSolanaMessage({ signMessage }: SignSolanaMessageProps) {
// --- 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 () => {
@@ -51,7 +51,7 @@ export function SignSolanaMessage({ signMessage }: SignSolanaMessageProps) {
if (!signMessage) {
throw new Error('no Solana signMessage');
}
const input = new TextEncoder().encode('Hello from Solana!');
const input = new TextEncoder().encode("Hello from Solana!");
const signatureBytes = await signMessage(input);
const signature = btoa(String.fromCharCode(...signatureBytes));
setSignature(signature);
@@ -84,4 +84,4 @@ export function SignSolanaMessage({ signMessage }: SignSolanaMessageProps) {
)}
</>
);
}
}

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

@@ -2,4 +2,4 @@ export { SignIn } from './SignIn';
export { SignEvmMessage } from './SignEvmMessage';
export { SendEth } from './SendEth';
export { SignSolanaMessage } from './SignSolanaMessage';
export { SendSolana } from './SendSolana';
export { SendSolana } from './SendSolana';