Build Demo App

Follow this guide to build and run the TrashMarket test dApp that demonstrates Gorbag wallet integration.

Overview

TrashMarket is a test DApp marketplace built to test the Gorbag wallet extension connection functionality. It allows users to connect their Gorbag wallet, view their balance, and perform transactions from connected wallet to set Merchant Wallet via the .env to test the wallet integration.

Prerequisites

Before you begin, ensure you have:

  • Node.js version 16 or higher
  • npm, yarn, pnpm or bun (preferrably pnpm) installed on your system
  • A browser with the Gorbag wallet extension installed

Clone the Repository

First, clone the repository that contains the test dApp:

BASH
1git clone https://github.com/GorbagWallet/gorbag-test-dapp.git

Install Dependencies

Navigate to the test-dapp directory and install the necessary dependencies:

BASH
1pnpm install

Wallet Integration Example

The test dApp demonstrates wallet integration through the WalletProvider component:

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 
17  const endpoint = 'https://rpc.gorbagana.wtf'; // Devnet/Testnet 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};

Wallet Connection

The WalletMultiButton component allows users to connect their wallet:

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

Wallet Information Display

The WalletInfo component displays wallet connection status and public key:

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

Run the Application

Start the development server:

BASH
1# Start the development server
2pnpm dev
3
4# The app will be available at http://localhost:3000

Testing Wallet Connection

To test the wallet connection:

  1. Make sure you have the Gorbag wallet extension installed and configured
  2. Visit the site and click "Connect Wallet" button
  3. Approve the connection in the extension
  4. You should see your wallet address displayed
  5. Try purchasing an item to test transaction functionality

Application Architecture

The test dApp architecture includes:

Send Versioned TransactionError Messages