Hugging Face's logo

Spaces:
dronesplace
/
solana
Running

App Files Community
solana
File size: 3,520 Bytes
2acde71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { FC, ReactNode, useMemo, useCallback, useEffect } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork, WalletError } from '@solana/wallet-adapter-base';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import {
  PhantomWalletAdapter,
  SolflareWalletAdapter,
  TorusWalletAdapter,
} from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';
import { toast } from 'sonner';

// Import the CSS for wallet modal
import '@solana/wallet-adapter-react-ui/styles.css';

interface WalletContextProviderProps {
  children: ReactNode;
}

export const WalletContextProvider: FC<WalletContextProviderProps> = ({ children }) => {
  // Use devnet for development and testing
  const network = WalletAdapterNetwork.Devnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  // Debug wallet detection
  useEffect(() => {
    console.log('Checking wallet availability...');
    console.log('window.solana:', typeof window !== 'undefined' ? (window as any).solana : 'window unavailable');
    console.log('window.phantom:', typeof window !== 'undefined' ? (window as any).phantom : 'window.phantom unavailable');
    
    if (typeof window !== 'undefined') {
      // Check if Phantom is installed
      const windowAny = window as any;
      const isPhantomInstalled = windowAny.solana?.isPhantom || windowAny.phantom?.solana?.isPhantom;
      console.log('Phantom detected:', isPhantomInstalled);
      
      if (!isPhantomInstalled) {
        console.warn('Phantom wallet not detected. Please install Phantom wallet extension.');
      }
    }
  }, []);

  const wallets = useMemo(
    () => {
      console.log('Initializing wallet adapters...');
      return [
        new PhantomWalletAdapter(),
        new SolflareWalletAdapter(),
        new TorusWalletAdapter(),
      ];
    },
    []
  );

  const onError = useCallback(
    (error: WalletError) => {
      console.error('Wallet error details:', {
        name: error.name,
        message: error.message,
        stack: error.stack
      });
      
      if (error.name === 'WalletNotReadyError') {
        console.log('WalletNotReadyError - checking if Phantom is properly installed...');
        
        // Give user clear instructions
        toast.error('Wallet Not Ready', {
          description: 'Please install Phantom wallet extension and refresh the page.',
          duration: 6000,
          action: {
            label: 'Install Phantom',
            onClick: () => window.open('https://phantom.app/', '_blank'),
          },
        });
      } else if (error.name === 'WalletConnectionError') {
        toast.error('Connection Failed', {
          description: 'Please try connecting again or refresh the page.',
          duration: 4000,
        });
      } else {
        toast.error('Wallet Error', {
          description: error.message || 'An unexpected error occurred.',
          duration: 4000,
        });
      }
    },
    []
  );

  return (
    <ConnectionProvider endpoint={endpoint}>

      <WalletProvider 

        wallets={wallets} 

        onError={onError} 

        autoConnect={false}

        localStorageKey="walletAdapter"

      >

        <WalletModalProvider>

          {children}

        </WalletModalProvider>

      </WalletProvider>

    </ConnectionProvider>
  );
};