Setup

Configure your application with the Gorbag provider to enable wallet integration.

Provider Configuration

Based on the test-dapp implementation, wrap your application with the ConnectionProvider and WalletProvider:

JAVASCRIPT
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}

WalletProvider Implementation

The WalletProvider sets up the Gorbag wallet adapter with the required dependencies:

JAVASCRIPT
1// components/WalletProvider.js
2import { useMemo } from 'react';
3import { ConnectionProvider, WalletProvider as SolanaWalletProvider } from '@solana/wallet-adapter-react';
4import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
5import { GorbagWalletAdapter } from '@gorbag/wallet-adapter';
6
7// Styles for the wallet adapter UI
8require('@solana/wallet-adapter-react-ui/styles.css');
9
10export const WalletProvider = ({ children }) => {
11  // Initialize the Gorbag wallet adapter
12  const wallets = useMemo(() => [
13    new GorbagWalletAdapter({})
14  ], []);
15
16  // Using Gorbagana RPC endpoint (replace with actual Gorbagana endpoint)
17  const endpoint = 'https://api.devnet.solana.com'; // Placeholder - replace with actual Gorbagana endpoint
18
19  return (
20    <ConnectionProvider endpoint={endpoint}>
21      <SolanaWalletProvider wallets={wallets} autoConnect={false}>
22        <WalletModalProvider>
23          {children}
24        </WalletModalProvider>
25      </SolanaWalletProvider>
26    </ConnectionProvider>
27  );
28};

Alternative Setup for Other Frameworks

For other frameworks like React without Next.js:

JAVASCRIPT
1import React from 'react';
2import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
3import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
4import { GorbagWalletAdapter } from '@gorbag/wallet-adapter';
5import { useMemo } from 'react';
6
7require('@solana/wallet-adapter-react-ui/styles.css');
8
9export const AppProvider = ({ children }) => {
10  const wallets = useMemo(() => [
11    new GorbagWalletAdapter({})
12  ], []);
13
14  const endpoint = 'https://api.devnet.solana.com'; // Replace with Gorbagana endpoint
15
16  return (
17    <ConnectionProvider endpoint={endpoint}>
18      <WalletProvider wallets={wallets} autoConnect={false}>
19        <WalletModalProvider>
20          {children}
21        </WalletModalProvider>
22      </WalletProvider>
23    </ConnectionProvider>
24  );
25};
26
27// Use in your main app
28function App() {
29  return (
30    <AppProvider>
31      {/* Your app components */}
32    </AppProvider>
33  );
34}

Environment Configuration

Set up your environment variables for different networks:

BASH
1// .env
2NEXT_PUBLIC_RPC_ENDPOINT=https://api.devnet.solana.com
3# For mainnet, use your Gorbagana mainnet endpoint when available
InstallationDetect Provider