Get Started

1// _app.js
2import '../styles/globals.css';
3import { WalletProvider } from '../components/WalletProvider';
4import { Toaster } from 'react-hot-toast';
5
6export default function App({ Component, pageProps }) {
7  return (
8    <WalletProvider>
9      <Toaster />
10      <Component {...pageProps} />
11    </WalletProvider>
12  );
13}
14
15// components/WalletProvider.js
16import { useMemo } from 'react';
17import { ConnectionProvider, WalletProvider as SolanaWalletProvider } from '@solana/wallet-adapter-react';
18import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
19import { GorbagWalletAdapter } from '@gorbag/wallet-adapter';
20
21// Styles for the wallet adapter UI
22require('@solana/wallet-adapter-react-ui/styles.css');
23
24export const WalletProvider = ({ children }) => {
25  // Initialize the Gorbag wallet adapter
26  const wallets = useMemo(() => [
27    new GorbagWalletAdapter({})
28  ], []);
29
30  // Using Gorbagana RPC endpoint (replace with actual Gorbagana endpoint)
31  const endpoint = 'https://api.devnet.solana.com'; // Placeholder - replace with actual Gorbagana endpoint
32
33  return (
34    <ConnectionProvider endpoint={endpoint}>
35      <SolanaWalletProvider wallets={wallets} autoConnect={false}>
36        <WalletModalProvider>
37          {children}
38        </WalletModalProvider>
39      </SolanaWalletProvider>
40    </ConnectionProvider>
41  );
42};

1// components/WalletMultiButton.js
2import { WalletMultiButton as SolanaWalletMultiButton } from '@solana/wallet-adapter-react-ui';
3
4export const WalletMultiButton = ({ onConnect, onDisconnect }) => {
5  return (
6    <SolanaWalletMultiButton 
7      style={{
8        background: 'linear-gradient(135deg, #667eea, #764ba2)',
9        border: 'none',
10        borderRadius: '9999px',
11        color: 'white',
12        padding: '1rem 1.5rem',
13        fontWeight: '600',
14        fontSize: '1rem',
15        cursor: 'pointer',
16        transition: 'all 0.2s ease',
17      }}
18    />
19  );
20};

1// components/WalletInfo.js
2import { useWallet } from '@solana/wallet-adapter-react';
3
4const WalletInfo = () => {
5  const { connected, publicKey, wallet } = useWallet();
6
7  if (!connected) {
8    return (
9      <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
10        <div className="flex">
11          <div className="flex-shrink-0">
12            <svg className="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
13              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
14            </svg>
15          </div>
16          <div className="ml-3">
17            <p className="text-sm text-yellow-700">
18              <span className="font-medium">Wallet not connected!</span> Connect your wallet to see your balance and make purchases.
19            </p>
20          </div>
21        </div>
22      </div>
23    );
24  }
25
26  return (
27    <div className="bg-green-50 border-l-4 border-green-400 p-4 mb-6">
28      <div className="flex">
29        <div className="flex-shrink-0">
30          <svg className="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
31            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
32          </svg>
33        </div>
34        <div className="ml-3">
35          <p className="text-sm text-green-700">
36            <span className="font-medium">Wallet connected!</span> Address: {publicKey?.toBase58()}
37          </p>
38          {wallet && (
39            <p className="text-sm text-green-700 mt-1">
40              Wallet: {wallet.adapter.name}
41            </p>
42          )}
43        </div>
44      </div>
45    </div>
46  );
47};
48
49export default WalletInfo;