Solana Wallet Adapter

Overview

The SWA (Solana Wallet Adapter) is built on top of the Wallet Standard, both of which are maintained by Anza, a Solana focused dev shop stemming from Solana Labs. This is the most widely used solution in the Solana ecosystem to connect dApps -> Wallets, so we encourage teams to consider using SWA. You get plenty of UI customization options, while ensuring your app can connect to all major Solana wallets.

Note:

If you implement Solana Wallet Adapter on your app, Magic Eden Wallet should work out of the box.

Let's dive into a quick React demo.

Install

Install the adapter specific dependencies

npm install --save \
    @solana/wallet-adapter-base \
    @solana/wallet-adapter-react \
    @solana/wallet-adapter-react-ui \

Guide

Create a SolanaProvider Component

Create a SolanaProvider component that will wrap your application. The goal of this component is to setup a connection to the Solana blockchain on a given network and communicate with via the specified RPC url. The component wraps its children with providers that pass down the blockchain connection and wallet context, allowing child components to interact with the Solana blockchain.

'use client';

import dynamic from 'next/dynamic';
import { WalletError } from '@solana/wallet-adapter-base';
import {
  ConnectionProvider,
  WalletProvider,
} from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { ReactNode, useCallback, useMemo } from 'react';
import { useCluster } from '../cluster/cluster-data-access';

require('@solana/wallet-adapter-react-ui/styles.css');

export const WalletButton = dynamic(
  async () =>
    (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
  { ssr: false }
);

export function SolanaProvider({ children }: { children: ReactNode }) {
  const { cluster } = useCluster();
  const endpoint = useMemo(() => cluster.endpoint, [cluster]);
  const onError = useCallback((error: WalletError) => {
    console.error(error);
  }, []);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={[]} onError={onError} autoConnect={true}>
        <WalletModalProvider>{children}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

We've also gone ahead and created a WalletButton we can import into our Navbar / UI layout from the wallet adapter packages.

You'll notice a custom useCluster method used in the above snippet. This is just a helper function to specify the desired cluster (devnet, mainnet, etc) + the associated RPC details. Hardcoding this information is also fine. Learn more here: https://solana.com/docs/core/clusters

Wrap your App with the SolanaProvider

Next we are going to wrap our React application with the SolanaProvider component we created above. It may look something like this

import './global.css';
import { UiLayout } from '@/components/ui/ui-layout';
import { SolanaProvider } from '@/components/solana/solana-provider';
import { ReactQueryProvider } from './react-query-provider';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ReactQueryProvider>
            <SolanaProvider>
              <UiLayout>{children}</UiLayout>
            </SolanaProvider>
        </ReactQueryProvider>
      </body>
    </html>
  );
}

Finally, add the WalletButton created in the first step to your UI. It is most common to add to your Navbar, or a UiLayout you can wrap your app in, but theoretically you can place this button wherever you please.

'use client';

import { WalletButton } from '../solana/solana-provider';
import * as React from 'react';

export function SimplifiedLayout() {
  return (
    <div>
      <div className="flex-none">
        <WalletButton />
      </div>
    </div>
  );
}

Additional Resources

Feel free to reference the popular create-solana-dapp for full context on how to implement the Solana Wallet Adapter in a functional custom Solana application.

PreviousDiving Into Solana NextConnect Directly to the ME Solana Provider

Last updated 1 year ago