mobile wallet attempt

app/components/Header.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
 import { useWallet } from '@solana/wallet-adapter-react';
-import { WalletName } from '@solana/wallet-adapter-base';
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
 import { Connection, PublicKey } from '@solana/web3.js';
 import Image from 'next/image';
 import '@solana/wallet-adapter-react-ui/styles.css';
@@ -13,92 +13,38 @@ export interface HeaderRef {
   refreshBalance: () => Promise<void>;
 }
 
-// Custom Wallet Button Component
-const CustomWalletButton = () => {
-  const { publicKey, disconnect, select, wallets } = useWallet();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  const handleWalletSelect = (walletName: WalletName) => {
-    select(walletName);
-    setIsDropdownOpen(false);
-  };
-
-  const handleDisconnect = () => {
-    disconnect();
-    setIsDropdownOpen(false);
-  };
-
-  if (publicKey) {
-    return (
-      <div className="relative">
-        <button
-          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-          className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white rounded-xl px-4 py-2 md:px-6 md:py-3 text-xs md:text-sm font-semibold shadow-lg shadow-green-500/25 hover:shadow-xl hover:shadow-green-500/30 transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 flex items-center space-x-2"
-        >
-          <div className="w-2 h-2 bg-green-300 rounded-full"></div>
-          <span className="truncate max-w-[80px] md:max-w-[120px]">
-            {publicKey.toString().slice(0, 4)}...{publicKey.toString().slice(-4)}
-          </span>
-          <svg className="w-3 h-3 md:w-4 md:h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        
-        {isDropdownOpen && (
-          <div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-50">
-            <button
-              onClick={handleDisconnect}
-              className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200"
-            >
-              Disconnect
-            </button>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative">
-      <button
-        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-        className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white rounded-xl px-4 py-2 md:px-6 md:py-3 text-xs md:text-sm font-semibold shadow-lg shadow-green-500/25 hover:shadow-xl hover:shadow-green-500/30 transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 flex items-center space-x-2"
-      >
-        <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
-        </svg>
-        <span className="whitespace-nowrap">Select Wallet</span>
-        <svg className="w-3 h-3 md:w-4 md:h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-      
-      {isDropdownOpen && (
-        <div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-50">
-          {wallets.map((wallet) => (
-            <button
-              key={wallet.adapter.name}
-              onClick={() => handleWalletSelect(wallet.adapter.name)}
-              className="w-full text-left px-4 py-2 text-gray-700 hover:bg-gray-50 transition-colors duration-200 flex items-center space-x-3"
-            >
-              {wallet.adapter.icon && (
-                <img src={wallet.adapter.icon} alt={wallet.adapter.name} className="w-6 h-6" />
-              )}
-              <span>{wallet.adapter.name}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
 const Header = forwardRef<HeaderRef>((props, ref) => {
   const { publicKey } = useWallet();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [dinoBalance, setDinoBalance] = useState<number | null>(null);
   const [isLoadingBalance, setIsLoadingBalance] = useState(false);
+  const [showMobileWalletHelp, setShowMobileWalletHelp] = useState(false);
+  const [mobileWalletReady, setMobileWalletReady] = useState(false);
+
+  // Check if we're on mobile
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    typeof window !== 'undefined' ? navigator.userAgent : ''
+  );
+
+  // Custom styling for WalletMultiButton
+  const walletButtonStyle = {
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: '12px',
+    padding: '8px 16px',
+    fontSize: '14px',
+    fontWeight: '600',
+    transition: 'all 0.3s ease',
+    boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+  };
+
+  // Mobile-specific wallet button styling
+  const mobileWalletButtonStyle = {
+    ...walletButtonStyle,
+    fontSize: '12px',
+    padding: '6px 12px',
+  };
 
   const fetchDinoBalance = async () => {
     if (!publicKey) {
@@ -149,6 +95,48 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
     fetchDinoBalance();
   }, [publicKey]);
 
+  // Check mobile wallet readiness
+  useEffect(() => {
+    if (isMobile && typeof window !== 'undefined') {
+      const checkWalletReadiness = () => {
+        const phantom = (window as { phantom?: { solana?: { isConnected?: boolean } } }).phantom;
+        if (phantom && phantom.solana) {
+          console.log('Mobile Phantom wallet is ready');
+          setMobileWalletReady(true);
+        } else {
+          console.log('Mobile Phantom wallet not ready yet');
+          setMobileWalletReady(false);
+        }
+      };
+
+      // Check immediately
+      checkWalletReadiness();
+      
+      // Check periodically
+      const interval = setInterval(checkWalletReadiness, 2000);
+      
+      // Check when page becomes visible/focused
+      const handleVisibilityChange = () => {
+        if (!document.hidden) {
+          checkWalletReadiness();
+        }
+      };
+      
+      const handleFocus = () => {
+        checkWalletReadiness();
+      };
+      
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+      window.addEventListener('focus', handleFocus);
+      
+      return () => {
+        clearInterval(interval);
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+        window.removeEventListener('focus', handleFocus);
+      };
+    }
+  }, [isMobile]);
+
   const handleBuyDino = () => {
     // Redirect to DexScreener - you can update this URL to the actual $DINO token page
     window.open('https://dexscreener.com/solana', '_blank');
@@ -162,6 +150,7 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
   };
 
   return (
+    <>
       <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
         isScrolled 
           ? 'bg-white/95 backdrop-blur-xl shadow-xl shadow-gray-200/50 border-b border-gray-200/40' 
@@ -258,16 +247,47 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
                     </div>
                   </div>
                   
-                <CustomWalletButton />
+                  <WalletMultiButton />
                 </div>
               ) : (
-              <CustomWalletButton />
+                <WalletMultiButton />
               )}
             </div>
 
             {/* Mobile Menu Button */}
             <div className="md:hidden flex items-center space-x-3">
-            <CustomWalletButton />
+              <WalletMultiButton />
+              
+              {/* Mobile wallet help message */}
+              {!publicKey && (
+                <div className="text-xs text-gray-500 max-w-[120px]">
+                  Tap to connect your wallet
+                </div>
+              )}
+              
+              {/* Mobile wallet readiness indicator */}
+              {isMobile && !publicKey && (
+                <div className="flex items-center space-x-2">
+                  <div className={`w-2 h-2 rounded-full ${mobileWalletReady ? 'bg-green-500' : 'bg-yellow-500'}`}></div>
+                  <span className="text-xs text-gray-500">
+                    {mobileWalletReady ? 'Wallet Ready' : 'Checking Wallet...'}
+                  </span>
+                </div>
+              )}
+              
+              {/* Mobile wallet help button */}
+              {isMobile && !publicKey && (
+                <button
+                  onClick={() => setShowMobileWalletHelp(!showMobileWalletHelp)}
+                  className="w-8 h-8 bg-blue-100 hover:bg-blue-200 rounded-lg flex items-center justify-center transition-all duration-300"
+                  title="Mobile Wallet Help"
+                >
+                  <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </button>
+              )}
+              
               <button
                 onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                 className="w-10 h-10 bg-gray-100 hover:bg-green-100 rounded-lg flex items-center justify-center transition-all duration-300 hover:scale-105"
@@ -281,7 +301,6 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
                 </svg>
               </button>
             </div>
-        </div>
 
             {/* Mobile Menu */}
             {isMobileMenuOpen && (
@@ -345,7 +364,63 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
               </div>
             )}
           </div>
+        </div>
       </header>
+      
+      {/* Mobile Wallet Help Modal */}
+      {showMobileWalletHelp && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-xl p-6 max-w-sm w-full">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-bold text-gray-900">Mobile Wallet Help</h3>
+              <button
+                onClick={() => setShowMobileWalletHelp(false)}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            
+            <div className="space-y-4">
+              <div>
+                <h4 className="font-semibold text-gray-800 mb-2">If you get "Wallet not ready" error:</h4>
+                <ol className="list-decimal list-inside space-y-2 text-sm text-gray-600">
+                  <li>Install Phantom from App Store (iOS) or Play Store (Android)</li>
+                  <li>Open the Phantom app and create/import a wallet</li>
+                  <li>Return to this page and refresh</li>
+                  <li>Try connecting again</li>
+                </ol>
+              </div>
+              
+              <div className="flex space-x-3">
+                <a
+                  href="https://phantom.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex-1 bg-purple-600 hover:bg-purple-700 text-white text-center py-2 px-4 rounded-lg font-medium transition-colors"
+                >
+                  Get Phantom
+                </a>
+                <a
+                  href="https://solflare.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex-1 bg-orange-600 hover:bg-orange-700 text-white text-center py-2 px-4 rounded-lg font-medium transition-colors"
+                >
+                  Get Solflare
+                </a>
+              </div>
+              
+              <div className="text-xs text-gray-500 text-center">
+                Make sure your wallet app is open before connecting
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 });
 

app/components/WalletProvider.tsx

@@ -3,16 +3,9 @@
 import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
 import { ConnectionProvider, WalletProvider as SolanaWalletProvider } from '@solana/wallet-adapter-react';
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
-import { 
+import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
-  PhantomWalletAdapter, 
-  SolflareWalletAdapter,
-  AlphaWalletAdapter,
-  BitKeepWalletAdapter,
-  BitpieWalletAdapter,
-  CloverWalletAdapter
-} from '@solana/wallet-adapter-wallets';
 import { clusterApiUrl } from '@solana/web3.js';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 
 // Import wallet adapter CSS
 import '@solana/wallet-adapter-react-ui/styles.css';
@@ -29,28 +22,151 @@ export default function WalletProvider({ children }: WalletProviderProps) {
   const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 
   const wallets = useMemo(
-    () => [
+    () => {
-      new PhantomWalletAdapter(),
+      // Check if we're on mobile
-      new SolflareWalletAdapter(),
+      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      new AlphaWalletAdapter(),
+        typeof window !== 'undefined' ? navigator.userAgent : ''
-      new BitKeepWalletAdapter(),
+      );
-      new BitpieWalletAdapter(),
+
-      new CloverWalletAdapter(),
+      if (isMobile) {
-    ],
+        console.log('Mobile device detected - configuring mobile-optimized wallets');
+        
+        // Mobile-optimized wallet configuration - focus on Phantom which has the best mobile support
+        return [
+          new PhantomWalletAdapter({
+            // Mobile-specific options for better compatibility
+            appIdentity: {
+              name: 'DINO Game',
+              uri: window.location.origin,
+              icon: `${window.location.origin}/dino_icon.jpg`
+            }
+          })
+        ];
+      } else {
+        console.log('Desktop device detected - configuring standard wallets');
+        
+        // Standard desktop wallet configuration
+        return [
+          new PhantomWalletAdapter()
+        ];
+      }
+    },
     []
   );
 
+  // Mobile wallet detection and setup
+  useEffect(() => {
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      typeof window !== 'undefined' ? navigator.userAgent : ''
+    );
+
+    if (isMobile) {
+      console.log('Mobile wallet setup initiated');
+      
+      // Check for installed mobile wallets
+      if (typeof window !== 'undefined') {
+        // Wait for wallet objects to be available
+        const checkWallets = () => {
+          if ('phantom' in window) {
+            console.log('Phantom wallet detected on mobile');
+            
+            // Check if Phantom is actually ready
+            const phantom = (window as { phantom?: { solana?: { isConnected?: boolean } } }).phantom;
+            if (phantom && phantom.solana) {
+              console.log('Phantom Solana provider is ready');
+              
+              // Check if wallet is connected
+              if (phantom.solana.isConnected) {
+                console.log('Phantom wallet is already connected');
+              } else {
+                console.log('Phantom wallet is available but not connected');
+              }
+            } else {
+              console.log('Phantom Solana provider not ready yet');
+            }
+          } else {
+            console.log('No Phantom wallet detected - user may need to install it');
+          }
+        };
+
+        // Check immediately
+        checkWallets();
+        
+        // Check again after a short delay to catch late-loading wallets
+        setTimeout(checkWallets, 1000);
+        
+        // Check when window becomes visible (user returns to app)
+        const handleVisibilityChange = () => {
+          if (!document.hidden) {
+            console.log('App became visible, checking wallets...');
+            checkWallets();
+          }
+        };
+        
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        
+        // Also check when the page becomes focused
+        const handleFocus = () => {
+          console.log('Page focused, checking wallets...');
+          checkWallets();
+        };
+        
+        window.addEventListener('focus', handleFocus);
+        
+        return () => {
+          document.removeEventListener('visibilitychange', handleVisibilityChange);
+          window.removeEventListener('focus', handleFocus);
+        };
+      }
+    }
+  }, []);
+
   return (
     <ConnectionProvider endpoint={endpoint}>
       <SolanaWalletProvider 
         wallets={wallets} 
-        autoConnect
+        autoConnect={false} // Disable autoConnect on mobile to prevent "not ready" errors
         onError={(error) => {
           console.error('Wallet adapter error:', error);
+          
           // Handle mobile-specific wallet errors
           if (error.message.includes('signature verification failed')) {
             console.warn('Mobile wallet signature verification issue detected');
           }
+          
+          // Handle mobile connection issues
+          if (error.message.includes('User rejected')) {
+            console.warn('User rejected wallet connection');
+          }
+          
+          // Handle deep linking issues on mobile
+          if (error.message.includes('deep link') || error.message.includes('redirect')) {
+            console.warn('Mobile deep linking issue detected');
+          }
+          
+          // Handle "wallet not ready" errors
+          if (error.message.includes('not ready') || error.message.includes('not installed')) {
+            console.warn('Mobile wallet not ready/installed - providing guidance');
+            
+            // Show helpful message to user
+            if (typeof window !== 'undefined') {
+              const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+              if (isMobile) {
+                // On mobile, we can provide app store links
+                console.log('Mobile wallet not ready - user may need to install wallet app');
+                
+                // Check if Phantom is actually available
+                const phantom = (window as { phantom?: { solana?: { isConnected?: boolean } } }).phantom;
+                if (!phantom) {
+                  console.log('Phantom not detected - user needs to install the app');
+                } else if (!phantom.solana) {
+                  console.log('Phantom detected but Solana provider not ready');
+                } else {
+                  console.log('Phantom Solana provider is ready');
+                }
+              }
+            }
+          }
         }}
       >
         <WalletModalProvider>

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbopack -p 80",
     "build": "next build",
     "start": "next start -p 8170",
     "lint": "next lint"