# Use Solana Wallet Adapter - MetaMask Connect > Configure Solana's Wallet Adapter with MetaMask Connect in a React dapp using WalletProvider, ConnectionProvider, and useWallet hooks. # Use the Wallet Adapter Solana's [Wallet Adapter](https://github.com/solana-labs/wallet-adapter) is the standard way for Solana dapps to discover and connect to wallets. MetaMask Connect Solana implements the [Wallet Standard](https://github.com/wallet-standard/wallet-standard), so it works with the Wallet Adapter out-of-the-box. This guide shows you how to set up the Wallet Adapter with MetaMask in a React dapp. You can also use the [`create-solana-dapp`](https://github.com/solana-foundation/create-solana-dapp) CLI tool to generate a new project with the Wallet Adapter built in. ## Prerequisites - [Node.js](https://nodejs.org/) version 19 or later - A package manager such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/) - A React or Next.js project ## Steps ### 1. Install dependencies Install MetaMask Connect Solana and the Wallet Adapter packages: ```bash npm install @metamask/connect-solana \ @solana/web3.js \ @solana/wallet-adapter-base \ @solana/wallet-adapter-react \ @solana/wallet-adapter-react-ui \ @solana/wallet-adapter-wallets ``` ### 2. Create the Solana provider Create a `SolanaProvider` component that initializes MetaMask Connect Solana and wraps the Wallet Adapter providers: ```typescript title='components/SolanaProvider.tsx' 'use client'; interface SolanaProviderProps { children: ReactNode; } export const SolanaProvider: FC = ({ children }) => { const network = WalletAdapterNetwork.Devnet; const endpoint = useMemo(() => clusterApiUrl(network), [network]); useEffect(() => { createSolanaClient({ dapp: { name: 'My Solana Dapp', url: window.location.origin, }, }); }, []); return ( {children} ); }; ``` Calling [`createSolanaClient`](../reference/methods.md#createsolanaclient) registers MetaMask with the [Wallet Standard](https://github.com/wallet-standard/wallet-standard) registry. This displays MetaMask as a connection option in the wallet modal, even if the user doesn't have MetaMask installed. :::tip Timing The `useEffect` pattern above works because `createSolanaClient` typically resolves before the user opens the wallet modal. If MetaMask does not appear in the wallet list, ensure `createSolanaClient` has resolved before the `WalletProvider` renders. One approach is to await the client in your app's entry point before calling `createRoot().render()`. See [Troubleshooting: MetaMask wallet not appearing](../../troubleshooting/index.md#metamask-wallet-not-appearing-in-solana-wallet-adapter) for details. ::: ### 3. Add the provider to your root layout Wrap your application with `SolanaProvider` so all components can access the wallet context: ```typescript export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### 4. Add a connect button Use the Wallet Adapter's [`WalletMultiButton`](https://github.com/anza-xyz/wallet-adapter/blob/master/packages/ui/react-ui/src/WalletMultiButton.tsx) component to add a connect button to your dapp: ```typescript title='components/ConnectWallet.tsx' 'use client'; export const ConnectWallet = () => { return ; }; ``` The button automatically displays a wallet selection modal that includes MetaMask. :::caution Chrome Android There is a known issue with `@solana/wallet-adapter-react` on Chrome Android when used with the Wallet Standard provider from `@metamask/connect-solana`. Test Solana Wallet Adapter flows on desktop Chrome and the MetaMask browser extension before targeting mobile. See [Troubleshooting](../../troubleshooting/index.md#chrome-android) for details. ::: ## Next steps See how to send a [legacy transaction](send-transactions/legacy.md) and a [versioned transaction](send-transactions/versioned.md).