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

This reverts commit b1fdfc19a9, reversing changes made to b9e2087bd8.
2025-12-05 17:02:33 -05:00 · 2025-07-16 17:21:12 +05:30
parent 349cdea489
commit 0d43b35c28
72 changed files with 1065 additions and 6257 deletions
--- a/src/components/ui/tabs/WalletTab.tsx
+++ b/src/components/ui/tabs/WalletTab.tsx
@@ -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>
  );
-}
+}