Merge pull request #368 from oyingrace/fix/farcaster-miniapp-environment-detection

Fix/farcaster miniapp environment detection

Author: GigaHierz

templates/base/apps/web/src/app/page.tsx.hbs

@@ -22,20 +22,24 @@ export default function Home() {
   const { address, isConnected, isConnecting } = useAccount();
   const { connect, connectors } = useConnect();
 
-  // Auto-connect wallet when miniapp is ready
+  // Extract user data from context
+  const user = context?.user;
+  
+  // Check if we're in a Farcaster miniapp environment
+  // We're in a miniapp if we have user data from the Farcaster SDK
+  const isInMiniappEnvironment = !!user;
+  
+  // Auto-connect wallet when miniapp is ready (only in miniapp environment)
   useEffect(() => {
-    if (isMiniAppReady && !isConnected && !isConnecting && connectors.length > 0) {
+    if (isMiniAppReady && isInMiniappEnvironment && !isConnected && !isConnecting && connectors.length > 0) {
       const farcasterConnector = connectors.find(c => c.id === 'farcaster');
       if (farcasterConnector) {
         connect({ connector: farcasterConnector });
       }
     }
-  }, [isMiniAppReady, isConnected, isConnecting, connectors, connect]);
-  
-  // Extract user data from context
-  const user = context?.user;
-  // Use connected wallet address if available, otherwise fall back to user custody/verification
-  const walletAddress = address || user?.custody || user?.verifications?.[0] || "0x1e4B...605B";
+  }, [isMiniAppReady, isInMiniappEnvironment, isConnected, isConnecting, connectors, connect]);
+  // Use connected wallet address if available, otherwise show not connected
+  const walletAddress = address || user?.custody || user?.verifications?.[0] || null;
   const displayName = user?.displayName || user?.username || "User";
   const username = user?.username || "@user";
   const pfpUrl = user?.pfpUrl;
@@ -70,7 +74,7 @@ export default function Home() {
 
           {/* Status Message */}
           <p className="text-lg text-gray-600 mb-6">
-            You are signed in!
+            {user ? "You are signed in!" : "You are not signed in"}
           </p>
 
           {/* User Wallet Address */}
@@ -84,11 +88,11 @@ export default function Home() {
                   <div className={`w-2 h-2 rounded-full ${
                     isConnected ? 'bg-green-500' : isConnecting ? 'bg-yellow-500' : 'bg-gray-400'
                   }`}></div>
-                  {isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Disconnected'}
+                  {isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Not Connected'}
                 </div>
               </div>
               <p className="text-sm text-gray-700 font-mono">
-                {formatAddress(walletAddress)}
+                {walletAddress ? formatAddress(walletAddress) : 'No wallet connected'}
               </p>
             </div>
           </div>
@@ -132,7 +136,7 @@ export default function Home() {
 
                 try {
                   const result = await sdk.actions.addMiniApp();
-                  if (result.added) {
+                  if (result) {
                     setAddMiniAppMessage("✅ Miniapp added successfully!");
                   } else {
                     setAddMiniAppMessage("ℹ️ Miniapp was not added (user declined or already exists)");