Establish Connection

1import { useWallet } from '@solana/wallet-adapter-react';
2
3export function ConnectButton() {
4  const { 
5    connect, 
6    disconnect, 
7    connected, 
8    connecting, 
9    disconnecting,
10    wallet,
11    publicKey
12  } = useWallet();
13
14  const handleConnect = async () => {
15    try {
16      await connect();
17    } catch (error) {
18      console.error('Connection failed:', error);
19    }
20  };
21
22  if (connected) {
23    return (
24      <div className="flex flex-col items-center">
25        <p>Connected: {publicKey?.toBase58()}</p>
26        <button onClick={disconnect} disabled={disconnecting}>
27          {disconnecting ? 'Disconnecting...' : 'Disconnect Wallet'}
28        </button>
29      </div>
30    );
31  }
32
33  return (
34    <button onClick={handleConnect} disabled={connecting}>
35      {connecting ? 'Connecting...' : 'Connect Gorbag Wallet'}
36    </button>
37  );
38}

1async connect(): Promise<void> {
2  try {
3    if (this.connecting) return;
4
5    if (this.readyState === WalletReadyState.Loadable) {
6      throw new WalletNotReadyError('Gorbag universal link not available');
7    }
8
9    if (this.readyState !== WalletReadyState.Installed) throw new WalletNotReadyError();
10
11    this._connecting = true;
12
13    const wallet = window.gorbag?.solana || window.solana!;
14
15    if (!wallet.isConnected) {
16      try {
17        await wallet.connect();
18      } catch (error: any) {
19        throw new WalletConnectionError(error?.message, error);
20      }
21    }
22
23    if (!wallet.publicKey) throw new WalletAccountError();
24
25    let publicKey: PublicKey;
26    try {
27      publicKey = new PublicKey(wallet.publicKey.toBytes());
28    } catch (error: any) {
29      throw new WalletPublicKeyError(error?.message, error);
30    }
31
32    const connectHandler = this._handleConnect.bind(this);
33    const disconnectHandler = this._handleDisconnect.bind(this);
34    const accountChangedHandler = this._handleAccountChanged.bind(this);
35    
36    (wallet as any)._connectHandler = connectHandler;
37    (wallet as any)._disconnectHandler = disconnectHandler;
38    (wallet as any)._accountChangedHandler = accountChangedHandler;
39
40    wallet.on('connect', connectHandler);
41    wallet.on('disconnect', disconnectHandler);
42    wallet.on('accountChanged', accountChangedHandler);
43
44    this._wallet = wallet;
45    // Set the public key using the setter from the base class
46    Object.defineProperty(this, '_publicKey', {
47      value: publicKey,
48      writable: true,
49      configurable: true
50    });
51
52    this.emit('connect', publicKey);
53  } catch (error: any) {
54    this.emit('error', error);
55    throw error;
56  } finally {
57    this._connecting = false;
58  }
59}

1import { useWallet } from '@solana/wallet-adapter-react';
2
3export function SafeConnectButton() {
4  const { connect, connected, connecting, wallet, publicKey } = useWallet();
5
6  const handleConnect = async () => {
7    try {
8      await connect();
9      console.log('Successfully connected to Gorbag wallet:', publicKey?.toBase58());
10    } catch (error) {
11      console.error('Connection error:', error);
12      
13      // Handle different types of errors based on the adapter
14      if (error.name === 'WalletNotReadyError') {
15        alert('Gorbag wallet is not ready. Please install and enable the extension.');
16      } else if (error.name === 'WalletConnectionError') {
17        alert('Connection error. Please try again.');
18      } else if (error.name === 'WalletAccountError') {
19        alert('Error getting account from the wallet.');
20      } else {
21        alert('Connection failed: ' + error.message);
22      }
23    }
24  };
25
26  return (
27    <button 
28      onClick={handleConnect} 
29      disabled={connecting || connected}
30      className={connecting || connected ? 'opacity-50 cursor-not-allowed' : ''}
31    >
32      {connected ? 'Connected' : (connecting ? 'Connecting...' : 'Connect Gorbag')}
33    </button>
34  );
35}

1import { useEffect } from 'react';
2import { useWallet } from '@solana/wallet-adapter-react';
3
4export function ConnectionMonitor() {
5  const { connected, connecting, disconnecting, publicKey, wallet } = useWallet();
6
7  useEffect(() => {
8    if (connected && publicKey) {
9      console.log('Connected to Gorbag wallet:', publicKey.toBase58());
10      if (wallet) {
11        console.log('Wallet name:', wallet.adapter.name);
12      }
13    }
14  }, [connected, publicKey, wallet]);
15
16  useEffect(() => {
17    if (connecting) {
18      console.log('Attempting to connect to Gorbag wallet...');
19    }
20  }, [connecting]);
21
22  useEffect(() => {
23    if (disconnecting) {
24      console.log('Disconnecting from Gorbag wallet...');
25    }
26  }, [disconnecting]);
27
28  return (
29    <div>
30      <p>Status: {getStatus()}</p>
31      {connected && publicKey && <p>Public Key: {publicKey.toBase58()}</p>}
32    </div>
33  );
34
35  function getStatus() {
36    if (connecting) return 'Connecting...';
37    if (disconnecting) return 'Disconnecting...';
38    if (connected) return 'Connected';
39    return 'Disconnected';
40  }
41}