# Solana Wallet Adapter
## Overview
The [SWA (Solana Wallet Adapter)](https://github.com/anza-xyz/wallet-adapter) is built on top of the [Wallet Standard](https://github.com/anza-xyz/wallet-standard), both of which are maintained by [Anza](https://x.com/anza_xyz), 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.
{% hint style="info" %}
**Note:**
If you implement Solana Wallet Adapter on your app, Magic Eden Wallet should work out of the box.
{% endhint %}
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.
```jsx
'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 (
{children}
);
}
```
We've also gone ahead and created a WalletButton we can import into our Navbar / UI layout from the wallet adapter packages.
{% hint style="info" %}
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:
{% endhint %}
### 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
```jsx
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 (
{children}
);
}
```
### 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.
```jsx
'use client';
import { WalletButton } from '../solana/solana-provider';
import * as React from 'react';
export function SimplifiedLayout() {
return (
);
}
```
## Additional Resources
Feel free to reference the popular [create-solana-dapp](https://github.com/solana-developers/create-solana-dapp) for full context on how to implement the Solana Wallet Adapter in a functional custom Solana application.