wallet-adapter-cherry-two
v0.2.11
Published
Modular TypeScript wallet adapters and components for Solana applications.
Downloads
19
Readme
@solana/wallet-adapter
Modular TypeScript wallet adapters and components for Solana applications.
Quick Links
- Demo
- TypeScript Docs
- FAQ (Frequently Asked Questions)
- Quick Setup (using React UI)
- Packages
- Build from Source
Quick Setup (using React UI)
There are also material-ui and ant-design packages if you use those component frameworks.
Install
Install these dependencies:
yarn add @solana/wallet-adapter-base \
@solana/wallet-adapter-react \
@solana/wallet-adapter-react-ui \
@solana/wallet-adapter-wallets \
@solana/web3.js \
@solana-mobile/wallet-adapter-mobile \
react
Setup
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { FakeWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';
// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');
export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;
// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);
const wallets = useMemo(
() => [
/**
* Select the wallets you wish to support, by instantiating wallet adapters here.
*
* Common adapters can be found in the npm package `@solana/wallet-adapter-wallets`.
* That package supports tree shaking and lazy loading -- only the wallets you import
* will be compiled into your application, and only the dependencies of wallets that
* your users connect to will be loaded.
*/
new FakeWalletAdapter(),
],
[]
);
return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};
Usage
import { WalletNotConnectedError } from '@solana/wallet-adapter-base';
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { Keypair, SystemProgram, Transaction } from '@solana/web3.js';
import React, { FC, useCallback } from 'react';
export const SendOneLamportToRandomAddress: FC = () => {
const { connection } = useConnection();
const { publicKey, sendTransaction } = useWallet();
const onClick = useCallback(async () => {
if (!publicKey) throw new WalletNotConnectedError();
const transaction = new Transaction().add(
SystemProgram.transfer({
fromPubkey: publicKey,
toPubkey: Keypair.generate().publicKey,
lamports: 1,
})
);
const signature = await sendTransaction(transaction, connection);
await connection.confirmTransaction(signature, 'processed');
}, [publicKey, sendTransaction, connection]);
return (
<button onClick={onClick} disabled={!publicKey}>
Send 1 lamport to a random address!
</button>
);
};
Packages
This library is organized into small packages with few dependencies. To add it to your dApp, you'll need core packages, some wallets, and UI components for your chosen framework.
Core
These packages are what most projects can use to support wallets on Solana.
| package | description | npm |
|----------------------------------------------------------------------------------------|-------------------------------------------------------|------------------------------------------------------------------------------------------|
| base | Adapter interfaces, error types, and common utilities | @solana/wallet-adapter-base
|
| react | Contexts and hooks for React dApps | @solana/wallet-adapter-react
|
Wallets
These packages provide adapters for each wallet. You can use the wallets package, or add the individual wallet packages you want.
| package | description | npm |
|-------------------------------------------------------------------------------------------------------|-------------------------------------------------------|------------------------------------------------------------------------------------------------------|
| wallets | Includes all the wallets (with tree shaking) | @solana/wallet-adapter-wallets
|
| avana | Adapter for Avana | @solana/wallet-adapter-avana
|
| backpack | Adapter for Backpack | @solana/wallet-adapter-backpack
|
| bitkeep | Adapter for BitKeep | @solana/wallet-adapter-bitkeep
|
| bitpie | Adapter for Bitpie | @solana/wallet-adapter-bitpie
|
| blocto | Adapter for Blocto | @solana/wallet-adapter-blocto
|
| brave | Adapter for Brave | @solana/wallet-adapter-brave
|
| clover | Adapter for Clover | @solana/wallet-adapter-clover
|
| coin98 | Adapter for Coin98 | @solana/wallet-adapter-coin98
|
| coinbase | Adapter for Coinbase | @solana/wallet-adapter-coinbase
|
| coinhub | Adapter for Coinhub | @solana/wallet-adapter-coinhub
|
| exodus | Adapter for Exodus | @solana/wallet-adapter-exodus
|
| glow | Adapter for Glow | @solana/wallet-adapter-glow
|
| huobi | Adapter for HuobiWallet | @solana/wallet-adapter-huobi
|
| hyperpay | Adapter for HyperPay | @solana/wallet-adapter-hyperpay
|
| keystone | Adapter for keystone | @solana/wallet-adapter-keystone
|
| krystal | Adapter for krystal | @solana/wallet-adapter-krystal
|
| ledger | Adapter for Ledger | @solana/wallet-adapter-ledger
|
| mathwallet | Adapter for MathWallet | @solana/wallet-adapter-mathwallet
|
| neko | Adapter for Neko | @solana/wallet-adapter-neko
|
| nightly | Adapter for Nightly | @solana/wallet-adapter-nightly
|
| nufi | Adapter for NuFi | @solana/wallet-adapter-nufi
|
| particle | Adapter for Particle | @solana/wallet-adapter-particle
|
| phantom | Adapter for Phantom | @solana/wallet-adapter-phantom
|
| safepal | Adapter for SafePal | @solana/wallet-adapter-safepal
|
| saifu | Adapter for Saifu | @solana/wallet-adapter-saifu
|
| salmon | Adapter for Salmon | @solana/wallet-adapter-salmon
|
| sky | Adapter for Sky | @solana/wallet-adapter-sky
|
| slope | Adapter for Slope | @solana/wallet-adapter-slope
|
| solflare | Adapter for Solflare | @solana/wallet-adapter-solflare
|
| sollet | Adapter for Sollet | @solana/wallet-adapter-sollet
|
| solong | Adapter for Solong | @solana/wallet-adapter-solong
|
| spot | Adapter for Spot | @solana/wallet-adapter-spot
|
| strike | Adapter for Strike | @solana/wallet-adapter-strike
|
| tokenary | Adapter for Tokenary | @solana/wallet-adapter-tokenary
|
| tokenpocket | Adapter for TokenPocket | @solana/wallet-adapter-tokenpocket
|
| torus | Adapter for Torus | @solana/wallet-adapter-torus
|
| trust | Adapter for Trust Wallet | @solana/wallet-adapter-trust
|
UI Components
These packages provide components for common UI frameworks.
| package | description | npm |
|-----------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| react-ui | Components for React (no UI framework, just CSS) | @solana/wallet-adapter-react-ui
|
| material-ui | Components for Material UI with React | @solana/wallet-adapter-material-ui
|
| ant-design | Components for Ant Design with React | @solana/wallet-adapter-ant-design
|
| angular-material-ui | Components for Angular Material UI | @heavy-duty/wallet-adapter-material
|
Starter Projects
These packages provide projects that you can use to start building a dApp with built-in wallet support. Alternatively, check out solana-dapp-next for a more complete framework.
| package | description | npm |
|---------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|
| example | Demo of UI components and wallets | @solana/wallet-adapter-example
|
| create-react-app-starter | Create React App project using React UI | @solana/wallet-adapter-create-react-app-starter
|
| material-ui-starter | Parcel project using Material UI | @solana/wallet-adapter-material-ui-starter
|
| react-ui-starter | Parcel project using React UI | @solana/wallet-adapter-react-ui-starter
|
| nextjs-starter | Next.js project using React UI | @solana/wallet-adapter-nextjs-starter
|
Community
Several packages are maintained by the community to support additional frontend frameworks.
Build from Source
- Clone the project:
git clone https://github.com/solana-labs/wallet-adapter.git
- Install dependencies:
cd wallet-adapter
yarn install
- Build all packages:
yarn build
- Run locally:
cd packages/starter/react-ui-starter
yarn start