Getting started guide
The Solana Foundation provides a set of modular TypeScript wallet adapters and components for Solana web applications. These packages are useful for developers who want to support multiple Solana wallets.
The following sections describe how to integrate multiple wallets such as Coinbase Wallet, Phantom, and Solflare into your Solana dapp using the Solana wallet adapter packages.
Prerequisites
This guide assumes you are using React, and have a working React application.
To set up a new React app, run:
npx create-react-app <app-name>
For additional front-end framework support, visit the Solana wallet adapter documentation to find more starter projects and packages.
Install
Install the Solana JavaScript API:
yarn add @solana/web3.js
Install the following Solana wallet adapter dependencies:
yarn add @solana/wallet-adapter-base \
@solana/wallet-adapter-react \
@solana/wallet-adapter-react-ui \
@solana/wallet-adapter-wallets \
@solana-mobile/wallet-adapter-mobile
Step 1: Create a new component
Create a new file named WalletAdapter.js
that defines a new WalletAdapter
React component that renders the components of your app.
We use this component to set up the adapters for each Solana wallet we want to support.
import { useMemo } from "react";
import App from "./App";
export default function WalletAdapter() {
return (
<App />
);
}
Step 2: Add UI components and styling
The Solana wallet adapter library provides UI components for common UI frameworks. For this guide, we use the basic React package for styling (no UI framework).
In your WalletAdapter.js
file, import the WalletModalProvider
and the default CSS styles from the @solana/wallet-adapter-react-ui
package. Wrap the WalletModalProvider
around your app’s components.
…
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
require("@solana/wallet-adapter-react-ui/styles.css");
export default function WalletAdapter() {
return (
<WalletModalProvider>
<App />
</WalletModalProvider>
);
}
For additional UI framework support, such as Material UI and Ant Design, visit the Solana wallet adapter documentation.
Step 3: Configure wallets
To configure which wallets you want to support in your application, use the WalletProvider
component.
In your WalletAdapter.js
file, import the WalletProvider
component from the @solana/wallet-adapter-react
package. Wrap the WalletProvider
component around the WalletModalProvider
component.
…
import { WalletProvider } from "@solana/wallet-adapter-react";
export default function WalletAdapter() {
return (
<WalletProvider>
<WalletModalProvider>
<App />
</WalletModalProvider>
</WalletProvider>
);
}
The WalletProvider
component accepts a list of wallets as a prop. To add wallets, import adapters from the @solana/wallet-adapter-wallets
package for each wallet you want to support, and pass a list of the wallet adapters as a prop into the WalletProvider
component.
…
import { useMemo } from "react";
import { WalletProvider } from "@solana/wallet-adapter-react";
import {
CoinbaseWalletAdapter,
PhantomWalletAdapter,
TorusWalletAdapter
} from "@solana/wallet-adapter-wallets";
export default function WalletAdapter() {
// Add adapters to list of supported wallets
const wallets = useMemo(
() => [
new CoinbaseWalletAdapter(),
new PhantomWalletAdapter(),
new TorusWalletAdapter()
],
[]
);
return (
// Pass wallets as a prop to WalletProvider
<WalletProvider wallets={wallets} autoconnect>
<WalletModalProvider>
<App />
</WalletModalProvider>
</WalletProvider>
);
}
You can also specify the autoconnect
attribute on the WalletProvider
component to automatically attempt to reconnect a user wallet upon a page refresh.
Step 4: Configure network connection
To configure which network you want wallets to establish a connection to, use the ConnectionProvider
component.
In your WalletAdapter.js
file, import the ConnectionProvider
component from the @solana/wallet-adapter-react
package. Wrap the ConnectionProvider
component around the WalletProvider
component.
…
import {
ConnectionProvider,
WalletProvider
} from "@solana/wallet-adapter-react";
export default function WalletAdapter() {
…
return (
<ConnectionProvider>
<WalletProvider wallets={wallets}>
<WalletModalProvider>
<App />
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}
The ConnectionProvider
component accepts a network endpoint as a prop. You can set your network to devnet
, testnet
, mainnet-beta
, or provide a custom RPC endpoint.
…
import { useMemo } from "react";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import {
ConnectionProvider,
WalletProvider
} from "@solana/wallet-adapter-react";
import { clusterApiUrl } from "@solana/web3.js";
export default function WalletAdapter() {
…
const network = WalletAdapterNetwork.Mainnet;
const endpoint = useMemo(() => clusterApiUrl(network), [network]);
return (
// Pass endpoint as prop
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets}>
<WalletModalProvider>
<App />
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
}
Step 5: Add wallet connection button
To connect and disconnect user wallets, use the WalletConnectButton
and WalletDisconnectButton
components respectively, or the WalletMultiButton
component which enables connecting and disconnecting using a single button. For this guide, we use WalletMultiButton
.
In your App.js
file, import the WalletMultiButton
component from the @solana/wallet-adapter-react-ui
package. Include the WalletMultiButton
component alongside the other components of your app.
…
import { useMemo } from "react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
export default function App() {
return (
<div>
<WalletMultiButton />
</div>
);
}
Step 5: Use React hooks
Once your application has a button that enables users to connect their wallets, you can use the useWallet()
React hook to get a user's public key, check connection status of their wallet, as well as sign messages and send transactions on their behalf.
In your App.js
file, import the userWallet
React hook from the @solana/wallet-adapter-react
package, and use it to access the user's public key and other methods like sendTransaction
.
…
import { useMemo } from "react";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
export default function App() {
const { connection } = useConnection();
const { publicKey, sendTransaction } = useWallet();
return (
<div>
<WalletMultiButton />
</div>
);
}
For more examples on using the wallet adapter library, visit the Solana wallet adapter documentation.