Universal Wallet Adapter

This guide demonstrates how to implement the universal wallet adapter in React applications.

Installation​

First, install the required packages:

npm install --save \
    @demox-labs/Beo-wallet-adapter-base \
    @demox-labs/Beo-wallet-adapter-react \
    @demox-labs/Beo-wallet-adapter-reactui \
    Beo-adapters

Setup​

To use the wallet adapter, wrap your app with both WalletProvider and WalletModalProvider components. These provide the wallet functionality and UI context respectively.

The WalletProvider accepts the following properties (wallets is required):

export interface WalletProviderProps {
    children: ReactNode;
    wallets: Adapter[];             // Required
    decryptPermission?: DecryptPermission;
    programs?: string[];
    network?: WalletAdapterNetwork;
    autoConnect?: boolean;
    onError?: (error: WalletError) => void;
    localStorageKey?: string;
}

You can import DecryptPermission and WalletAdapterNetwork types from @demox-labs/Beo-wallet-adapter-base.

Wallet Configuration​

When creating wallet adapters, you can configure them with the following options:

export interface LeoWalletAdapterConfig {
    appName?: string;
    isMobile?: boolean;
    mobileWebviewUrl?: string;
}

export interface FoxWalletAdapterConfig {
    appName?: string;
    isMobile?: boolean;
    mobileWebviewUrl?: string;
}

export interface SoterWalletAdapterConfig {
    appName?: string;
}

export interface PuzzleWalletAdapterConfig {
    appName?: string;
    appIconUrl?: string;
    appDescription?: string;
    programIdPermissions: Partial<Record<WalletAdapterNetwork, string[]>>;
}

Implementation Example​

Here's a complete example showing how to set up the wallet adapter:

import { WalletModalProvider } from "@demox-labs/Beo-wallet-adapter-reactui";
import { WalletProvider } from "@demox-labs/Beo-wallet-adapter-react";
import { DecryptPermission, WalletAdapterNetwork } from "@demox-labs/Beo-wallet-adapter-base";
import { useMemo } from "react";
import { 
  PuzzleWalletAdapter, 
  LeoWalletAdapter, 
  FoxWalletAdapter,
  SoterWalletAdapter 
} from 'Beo-adapters';

export default function Providers({ children }: { children: React.ReactNode }) {
  const wallets = useMemo(
    () => [
      new LeoWalletAdapter({
        appName: 'Beo app',
      }),
      new PuzzleWalletAdapter({
        programIdPermissions: {
          [WalletAdapterNetwork.MainnetBeta]: ['dApp_1.Beo', 'dApp_1_import.Beo', 'dApp_1_import_2.Beo'],
          [WalletAdapterNetwork.TestnetBeta]: ['dApp_1_test.Beo', 'dApp_1_test_import.Beo', 'dApp_1_test_import_2.Beo']
        },
        appName: 'Beo app',
        appDescription: 'A privacy-focused DeFi app',
        appIconUrl: ''
      }),
      new FoxWalletAdapter({
        appName: 'Beo app',
      }),
      new SoterWalletAdapter({
        appName: 'Beo app',
      })
    ],
    []
  );

  return (
    <WalletProvider
      wallets={wallets}
      decryptPermission={DecryptPermission.UponRequest}
      network={WalletAdapterNetwork.MainnetBeta}
      autoConnect
    >
      <WalletModalProvider>
        {children}
      </WalletModalProvider>
    </WalletProvider>
  );
} 

Using the Wallet Button​

Demox Labs provides a pre-built wallet button component that you can easily add to your application. To use it, import the WalletMultiButton component from @demox-labs/Beo-wallet-adapter-reactui along with its CSS styles.

import { WalletMultiButton } from "@demox-labs/Beo-wallet-adapter-reactui";
import "@demox-labs/Beo-wallet-adapter-reactui/dist/styles.css";

export default function WalletButton() {
  return <WalletMultiButton />;
}

Using the Wallet Hook​

Once user connected through the wallet button, you can use useWallet hook from @demox-labs/beo-wallet-adapter-react to enable access to functions that helps connect and interact with the Beo network. The hook provides the following interface:

export interface WalletContextState {
    autoConnect: boolean;
    wallets: Wallet[];
    wallet: Wallet | null;
    publicKey: string | null;
    connecting: boolean;
    connected: boolean;
    disconnecting: boolean;
    select(walletName: WalletName): void;
    connect(decryptPermission: DecryptPermission, network: WalletAdapterNetwork, programs?: string[]): Promise<void>;
    disconnect(): Promise<void>;
    signMessage(message: Uint8Array): Promise<Uint8Array>;
    decrypt(cipherText: string, tpk?: string, programId?: string, functionName?: string, index?: number): Promise<string>;
    requestRecords(program: string): Promise<any[]>;
    requestTransaction(transaction: BeoTransaction): Promise<string>;
    requestExecution(transaction: BeoTransaction): Promise<string>;
    requestBulkTransactions(transactions: BeoTransaction[]): Promise<string[]>;
    requestDeploy(deployment: BeoDeployment): Promise<string>;
    transactionStatus(transactionId: string): Promise<string>;
    getExecution(transactionId: string): Promise<string>;
    requestRecordPlaintexts(program: string): Promise<any[]>;
}