Fix merge conflict issues

src/components/ui/NeynarAuthButton/index.tsx

@@ -5,8 +5,8 @@ import { useSignIn, UseSignInData } from '@farcaster/auth-kit';
 import { useCallback, useEffect, useState, useRef } from 'react';
 import { cn } from '~/lib/utils';
 import { Button } from '~/components/ui/Button';
-import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
 import { ProfileButton } from '~/components/ui/NeynarAuthButton/ProfileButton';
+import { AuthDialog } from '~/components/ui/NeynarAuthButton/AuthDialog';
 import { getItem, removeItem, setItem } from '~/lib/localStorage';
 import { useMiniApp } from '@neynar/react';
 import {
@@ -141,7 +141,7 @@ export function NeynarAuthButton() {
   const updateSessionWithSigners = useCallback(
     async (
       signers: StoredAuthState['signers'],
-      user: StoredAuthState['user'],
+      user: StoredAuthState['user']
     ) => {
       if (!useBackendFlow) return;
 
@@ -384,146 +384,7 @@ export function NeynarAuthButton() {
     generateNonce();
   }, []);
 
-  // Backend flow using QuickAuth
+  // Load stored auth state on mount (only for frontend flow)
-  const handleBackendSignIn = useCallback(async () => {
-    if (!nonce) {
-      console.error('❌ No nonce available for backend sign-in');
-      return;
-    }
-
-    try {
-      setSignersLoading(true);
-      const result = await sdk.actions.signIn({ nonce });
-
-      setMessage(result.message);
-      setSignature(result.signature);
-      // Use QuickAuth to sign in
-      const signInResult = await quickAuthSignIn();
-      // Fetch user profile after sign in
-      if (quickAuthUser?.fid) {
-        const user = await fetchUserData(quickAuthUser.fid);
-        setBackendUserProfile({
-          username: user?.username || '',
-          pfpUrl: user?.pfp_url || '',
-        });
-      }
-    } catch (e) {
-      if (e instanceof SignInCore.RejectedByUser) {
-        console.log('ℹ️ Sign-in rejected by user');
-      } else {
-        console.error('❌ Backend sign-in error:', e);
-      }
-    }
-  }, [useBackendFlow]);
-
-  // Auth Kit data synchronization (only for browser flow)
-  useEffect(() => {
-    if (!useBackendFlow) {
-      setMessage(data?.message || null);
-      setSignature(data?.signature || null);
-      
-      // Reset the signer flow flag when message/signature change
-      if (data?.message && data?.signature) {
-        signerFlowStartedRef.current = false;
-      }
-    }
-  }, [useBackendFlow, data?.message, data?.signature]);
-
-  // Connect for frontend flow when nonce is available (only for browser flow)
-  useEffect(() => {
-    if (!useBackendFlow && nonce && !channelToken) {
-      connect();
-    }
-  }, [useBackendFlow, quickAuthUser?.fid, fetchUserData]);
-
-  const handleFrontEndSignIn = useCallback(async () => {
-    try {
-      setSignersLoading(true);
-      const result = await sdk.actions.signIn({ nonce: nonce || '' });
-      
-      setMessage(result.message);
-      setSignature(result.signature);
-      
-      // For frontend flow, we'll handle the signer flow in the useEffect
-    } catch (e) {
-      if (e instanceof SignInCore.RejectedByUser) {
-        console.log('ℹ️ Sign-in rejected by user');
-      } else {
-        console.error('❌ Frontend sign-in error:', e);
-      }
-    } finally {
-      setSignersLoading(false);
-    }
-  }, [nonce]);
-
-  const handleSignOut = useCallback(async () => {
-    try {
-      setSignersLoading(true);
-
-      if (useBackendFlow) {
-        // Use QuickAuth sign out
-        await quickAuthSignOut();
-      } else {
-        // Frontend flow sign out
-        setStoredAuth(null);
-      }
-
-      // Common cleanup for both flows
-      setShowDialog(false);
-      setDialogStep('signin');
-      setSignerApprovalUrl(null);
-      setMessage(null);
-      setSignature(null);
-
-      // Reset polling interval
-      if (pollingInterval) {
-        clearInterval(pollingInterval);
-        setPollingInterval(null);
-      }
-      
-      // Reset signer flow flag
-      signerFlowStartedRef.current = false;
-    } catch (error) {
-      console.error('❌ Error during sign out:', error);
-      // Optionally handle error state
-    } finally {
-      setSignersLoading(false);
-    }
-  }, [useBackendFlow, pollingInterval, quickAuthSignOut]);
-
-  // Backend flow using QuickAuth
-  const handleBackendSignIn = useCallback(async () => {
-    if (!nonce) {
-      console.error('❌ No nonce available for backend sign-in');
-      return;
-    }
-
-    try {
-      setSignersLoading(true);
-      const result = await sdk.actions.signIn({ nonce });
-
-      setMessage(result.message);
-      setSignature(result.signature);
-      // Use QuickAuth to sign in
-      const signInResult = await quickAuthSignIn();
-      // Fetch user profile after sign in
-      if (quickAuthUser?.fid) {
-        const user = await fetchUserData(quickAuthUser.fid);
-        setBackendUserProfile({
-          username: user?.username || '',
-          pfpUrl: user?.pfp_url || '',
-        });
-      }
-    } catch (e) {
-      if (e instanceof SignInCore.RejectedByUser) {
-        console.log('ℹ️ Sign-in rejected by user');
-      } else {
-        console.error('❌ Backend sign-in error:', e);
-      }
-    }
-  }, [nonce, quickAuthSignIn, quickAuthUser, fetchUserData]);
-
-  // Fetch user profile when quickAuthUser.fid changes (for backend flow)
   useEffect(() => {
     if (!useBackendFlow) {
       const stored = getItem<StoredAuthState>(STORAGE_KEY);
@@ -598,7 +459,12 @@ export function NeynarAuthButton() {
 
   // Handle fetching signers after successful authentication
   useEffect(() => {
-    if (message && signature && !isSignerFlowRunning && !signerFlowStartedRef.current) {
+    if (
+      message &&
+      signature &&
+      !isSignerFlowRunning &&
+      !signerFlowStartedRef.current
+    ) {
       signerFlowStartedRef.current = true;
 
       const handleSignerFlow = async () => {

src/components/ui/tabs/ActionsTab.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useCallback, useState } from "react";
+import { useCallback, useState } from 'react';
-import { useMiniApp } from "@neynar/react";
+import { useMiniApp } from '@neynar/react';
-import { ShareButton } from "../Share";
+import { ShareButton } from '../Share';
-import { Button } from "../Button";
+import { Button } from '../Button';
-import { SignIn } from "../wallet/SignIn";
+import { SignIn } from '../wallet/SignIn';
-import { type Haptics } from "@farcaster/miniapp-sdk";
+import { type Haptics } from '@farcaster/miniapp-sdk';
-import { APP_URL } from "~/lib/constants";
+import { APP_URL } from '~/lib/constants';
 import { NeynarAuthButton } from '../NeynarAuthButton/index';
 
 /**
@@ -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,14 +174,14 @@ 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'>
+      <div className="space-y-2">
-        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
           Haptic Intensity
         </label>
         <select
@@ -191,7 +191,7 @@ export function ActionsTab() {
               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>