SessionWalletProvider is a higher-order component that wraps around your app components to provide the sessionWallet context throughout the application.

Here’s an example of how to use the SessionWalletProvider:

  1. Create a new file named components/SessionProvider.tsx
// components/SessionProvider.tsx
// The SessionProvider component initializes the SessionKeyManager and provides it to its children via context.
// Wrap any component that needs access to the SessionKeyManager with this provider.

import { SessionWalletProvider, useSessionKeyManager } from '@gumhq/react-sdk';
import { AnchorWallet, useAnchorWallet, useConnection } from '@solana/wallet-adapter-react';

interface SessionProviderProps {
  children: React.ReactNode;
}

const SessionProvider: React.FC<SessionProviderProps> = ({ children }) => {
  const { connection } = useConnection();
  const anchorWallet = useAnchorWallet() as AnchorWallet;
  const cluster = "devnet"; // or "mainnet-beta", "testnet", "localnet"
  const sessionWallet = useSessionKeyManager(anchorWallet, connection, cluster);

  return (
    <SessionWalletProvider sessionWallet={sessionWallet}>
      {children}
    </SessionWalletProvider>
  );
};

export default SessionProvider;
  1. In your _app.tsx file, wrap the SessionProvider around the entire app to ensure it’s accessible within every component:
// pages/_app.tsx
import SessionProvider from '@/components/SessionProvider';
import { WalletContextProvider } from '@/contexts/WalletContextProvider';
import '@/styles/globals.css'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { PhantomWalletAdapter, SolflareWalletAdapter} from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';
import type { AppProps } from 'next/app';
import React, { useMemo } from 'react';
import dotenv from 'dotenv';

// Use require instead of import since order matters
require('@solana/wallet-adapter-react-ui/styles.css');

dotenv.config();

export default function App({ Component, pageProps }: AppProps) {
    const network = WalletAdapterNetwork.Devnet;
    const endpoint = process.env.NEXT_PUBLIC_SOLANA_ENDPOINT || clusterApiUrl(network);
    const wallets = useMemo(
        () => [
            new PhantomWalletAdapter({ network }),
            new SolflareWalletAdapter({ network }),
        ],
        [network]
    );

    return (
        <WalletContextProvider endpoint={endpoint} network={network} wallets={wallets} >
            <SessionProvider>
                <Component {...pageProps} />
            </SessionProvider>
        </WalletContextProvider>
    );
}

Note: Ensure that all your Solana wallet adapter contexts are the parent of the SessionProvider.

  1. With the SessionWalletProvider set up, you can now use the useSessionWallet hook in your components:

Using useSessionWallet in components

useSessionWallet is a custom hook that provides access to the session wallet context value. Use this hook in any component wrapped by the SessionWalletProvider.

import { useSessionWallet } from '@gumhq/react-sdk';

function YourComponent() {
  const sessionWallet = useSessionWallet();

  // Access session wallet properties and methods here
  // Example: sessionWallet.publicKey
  // Example: sessionWallet.sessionToken
  // Example: sessionWallet.createSession

  return (
    // Your component JSX
  );
}

Was this page helpful?