mobile wallet attempt
This commit is contained in:
parent
8c1a5760ce
commit
36d28d89db
|
|
@ -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,152 +150,56 @@ 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'
|
||||
: 'bg-white/80 backdrop-blur-lg shadow-lg shadow-gray-100/30 border-b border-gray-200/20'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Logo and Title */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-3 group cursor-pointer">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/25 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-green-500/40 overflow-hidden">
|
||||
<Image
|
||||
src="/dino_icon.jpg"
|
||||
alt="DINO Token Icon"
|
||||
width={40}
|
||||
height={40}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-3xl font-extrabold bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent transition-all duration-300 group-hover:from-green-600 group-hover:to-emerald-600">
|
||||
DINO
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation Links */}
|
||||
<nav className="hidden md:flex items-center space-x-10">
|
||||
<a
|
||||
href="#support"
|
||||
className="relative text-gray-700 hover:text-green-600 transition-all duration-300 font-semibold text-lg group"
|
||||
>
|
||||
Support
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-green-500 to-emerald-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
<a
|
||||
href="#whitepaper"
|
||||
className="relative text-gray-700 hover:text-green-600 transition-all duration-300 font-semibold text-lg group"
|
||||
>
|
||||
Whitepaper
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-green-500 to-emerald-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
<div className="flex items-center space-x-6">
|
||||
<a
|
||||
href="https://x.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 group hover:scale-110 hover:shadow-lg hover:shadow-green-500/25 hover:-translate-y-1"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600 group-hover:text-green-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://t.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 group hover:scale-110 hover:shadow-lg hover:shadow-green-500/25 hover:-translate-y-1"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600 group-hover:text-green-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Buy $DINO Button and Wallet Connect - Desktop */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<button
|
||||
onClick={handleBuyDino}
|
||||
className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-orange-500/25 hover:shadow-xl hover:shadow-orange-500/30 transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 flex items-center space-x-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
<span>Buy $DINO</span>
|
||||
</button>
|
||||
|
||||
{publicKey ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* DINO Balance Display */}
|
||||
<div className="bg-gradient-to-r from-green-100 to-emerald-50 rounded-full px-4 py-2 border border-green-200 shadow-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full"></div>
|
||||
<span className="text-sm text-green-700 font-mono font-medium">
|
||||
{isLoadingBalance ? (
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-3 h-3 border-2 border-green-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
`${formatBalance(dinoBalance)} $DINO`
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<>
|
||||
<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'
|
||||
: 'bg-white/80 backdrop-blur-lg shadow-lg shadow-gray-100/30 border-b border-gray-200/20'
|
||||
}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
{/* Logo and Title */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center space-x-3 group cursor-pointer">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/25 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-green-500/40 overflow-hidden">
|
||||
<Image
|
||||
src="/dino_icon.jpg"
|
||||
alt="DINO Token Icon"
|
||||
width={40}
|
||||
height={40}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CustomWalletButton />
|
||||
<h1 className="text-3xl font-extrabold bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent transition-all duration-300 group-hover:from-green-600 group-hover:to-emerald-600">
|
||||
DINO
|
||||
</h1>
|
||||
</div>
|
||||
) : (
|
||||
<CustomWalletButton />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="md:hidden flex items-center space-x-3">
|
||||
<CustomWalletButton />
|
||||
<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"
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{isMobileMenuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200/60 bg-white/95 backdrop-blur-sm animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||
{/* Desktop Navigation Links */}
|
||||
<nav className="hidden md:flex items-center space-x-10">
|
||||
<a
|
||||
href="#support"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-colors duration-200"
|
||||
className="relative text-gray-700 hover:text-green-600 transition-all duration-300 font-semibold text-lg group"
|
||||
>
|
||||
Support
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-green-500 to-emerald-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
<a
|
||||
href="#whitepaper"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-colors duration-200"
|
||||
className="relative text-gray-700 hover:text-green-600 transition-all duration-300 font-semibold text-lg group"
|
||||
>
|
||||
Whitepaper
|
||||
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-green-500 to-emerald-600 transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
<div className="flex items-center space-x-4 px-3 py-2">
|
||||
<span className="text-sm text-gray-500 font-medium">Socials:</span>
|
||||
<div className="flex items-center space-x-6">
|
||||
<a
|
||||
href="https://x.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110"
|
||||
className="w-10 h-10 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 group hover:scale-110 hover:shadow-lg hover:shadow-green-500/25 hover:-translate-y-1"
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-5 h-5 text-gray-600 group-hover:text-green-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -315,16 +207,31 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
|
|||
href="https://t.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110"
|
||||
className="w-10 h-10 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 group hover:scale-110 hover:shadow-lg hover:shadow-green-500/25 hover:-translate-y-1"
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-5 h-5 text-gray-600 group-hover:text-green-600 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{publicKey && (
|
||||
<div className="px-3 py-2">
|
||||
<div className="bg-gradient-to-r from-green-100 to-emerald-50 rounded-lg px-3 py-2 border border-green-200 shadow-sm">
|
||||
</nav>
|
||||
|
||||
{/* Buy $DINO Button and Wallet Connect - Desktop */}
|
||||
<div className="hidden md:flex items-center space-x-4">
|
||||
<button
|
||||
onClick={handleBuyDino}
|
||||
className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg shadow-orange-500/25 hover:shadow-xl hover:shadow-orange-500/30 transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 flex items-center space-x-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
<span>Buy $DINO</span>
|
||||
</button>
|
||||
|
||||
{publicKey ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* DINO Balance Display */}
|
||||
<div className="bg-gradient-to-r from-green-100 to-emerald-50 rounded-full px-4 py-2 border border-green-200 shadow-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full"></div>
|
||||
<span className="text-sm text-green-700 font-mono font-medium">
|
||||
|
|
@ -339,13 +246,181 @@ const Header = forwardRef<HeaderRef>((props, ref) => {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<WalletMultiButton />
|
||||
</div>
|
||||
) : (
|
||||
<WalletMultiButton />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="md:hidden flex items-center space-x-3">
|
||||
<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"
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
{isMobileMenuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200/60 bg-white/95 backdrop-blur-sm animate-in slide-in-from-top-2 duration-300">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||
<a
|
||||
href="#support"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-colors duration-200"
|
||||
>
|
||||
Support
|
||||
</a>
|
||||
<a
|
||||
href="#whitepaper"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-600 hover:bg-green-50 transition-colors duration-200"
|
||||
>
|
||||
Whitepaper
|
||||
</a>
|
||||
<div className="flex items-center space-x-4 px-3 py-2">
|
||||
<span className="text-sm text-gray-500 font-medium">Socials:</span>
|
||||
<a
|
||||
href="https://x.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://t.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-8 h-8 bg-gray-100 hover:bg-green-100 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110"
|
||||
>
|
||||
<svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{publicKey && (
|
||||
<div className="px-3 py-2">
|
||||
<div className="bg-gradient-to-r from-green-100 to-emerald-50 rounded-lg px-3 py-2 border border-green-200 shadow-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-3 h-3 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full"></div>
|
||||
<span className="text-sm text-green-700 font-mono font-medium">
|
||||
{isLoadingBalance ? (
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-3 h-3 border-2 border-green-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
`${formatBalance(dinoBalance)} $DINO`
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
PhantomWalletAdapter,
|
||||
SolflareWalletAdapter,
|
||||
AlphaWalletAdapter,
|
||||
BitKeepWalletAdapter,
|
||||
BitpieWalletAdapter,
|
||||
CloverWalletAdapter
|
||||
} from '@solana/wallet-adapter-wallets';
|
||||
import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
|
||||
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(),
|
||||
new SolflareWalletAdapter(),
|
||||
new AlphaWalletAdapter(),
|
||||
new BitKeepWalletAdapter(),
|
||||
new BitpieWalletAdapter(),
|
||||
new CloverWalletAdapter(),
|
||||
],
|
||||
() => {
|
||||
// Check if we're on mobile
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
typeof window !== 'undefined' ? navigator.userAgent : ''
|
||||
);
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user