# Wallet Integration (Frontend)
To let users sign transactions in the browser, install the Solana wallet adapter:
```bash
npm install @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets
```
## WalletProvider Component
Create a provider that wraps your app:
```tsx
"use client";
import { useMemo } from "react";
import {
ConnectionProvider,
WalletProvider as SolanaWalletProvider,
} from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
} from "@solana/wallet-adapter-wallets";
import "@solana/wallet-adapter-react-ui/styles.css";
export default function WalletProvider({
children,
}: {
children: React.ReactNode;
}) {
const endpoint =
process.env.NEXT_PUBLIC_SOLANA_RPC_URL ||
"https://api.mainnet-beta.solana.com";
const wallets = useMemo(
() => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
[],
);
return (
{children}
);
}
```
## Wrap Your App Layout
```tsx
import WalletProvider from "./components/WalletProvider";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Use Wallet Hooks in Components
```tsx
import { useWallet, useConnection } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
function PaymentComponent() {
const { publicKey, signTransaction, connected } = useWallet();
const { connection } = useConnection();
return (
{connected &&
Connected: {publicKey?.toBase58()}
}
);
}
```
`WalletMultiButton` renders a connect/disconnect button. `useWallet()` gives you the user's `publicKey` and `signTransaction`. `useConnection()` gives you the active `Connection` for sending transactions.