Magic Eden Wallet Developer Docs
  • 👋Welcome
    • Wallet Introduction
  • 📙Bitcoin
    • Diving into Bitcoin
    • Detecting the Provider
    • Connecting to the Wallet
    • Signing a Message
    • Signing a Transaction
    • Sending BTC
    • Provider API Methods
    • Provider Events
    • FAQs
  • 📗Solana
    • Diving Into Solana
    • Solana Wallet Adapter
    • Connect Directly to the ME Solana Provider
    • Signing a Message
    • Sending a Transaction
    • Provider API Methods
    • Provider Events
    • FAQs
  • 📘EVM
    • Diving into the EVM
    • Connect Directly to the ME EVM Provider
    • Signing a Message
    • Sending a Transaction
    • Library Integrations
      • Wallet Connect
      • Rainbow Kit
      • Wagmi
    • Provider API Methods
    • Provider Events
    • FAQs
  • ❓Resources
    • Demo Apps
    • Logos and Brand Assets
Powered by GitBook
On this page
  • Overview
  • Install
  • Guide
  • Create a SolanaProvider Component
  • Wrap your App with the SolanaProvider
  • Add the Wallet Button to your UI Layout / Navbar
  • Additional Resources
  1. Solana

Solana Wallet Adapter

PreviousDiving Into SolanaNextConnect Directly to the ME Solana Provider

Last updated 9 months ago

Overview

The is built on top of the , both of which are maintained by , 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.

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

Add the Wallet Button to your UI Layout / Navbar

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

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:

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

📗
SWA (Solana Wallet Adapter)
Wallet Standard
Anza
https://solana.com/docs/core/clusters
create-solana-dapp