NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem:
- Arepa Wallet - Browser wallet.
- Bitget Wallet - Injected wallet.
- Bitte Wallet - Injected wallet.
- Coin98 Wallet - Injected wallet.
- Ethereum wallets - Injected wallet.
- Here Wallet - Mobile wallet.
- HOT Wallet - Injected wallet.
- Unity Wallet - Mobile wallet.
- Ledger - Hardware wallet.
- Math Wallet - Injected wallet.
- Metamask Snap - Injected wallet.
- Meteor Wallet - Injected wallet.
- Meteor Wallet App - Instant link wallet.
- My NEAR Wallet - Browser wallet.
- Narwallets - Injected wallet.
- Near Mobile Wallet - Mobile Wallet.
- Nightly - Injected wallet.
- OKX Wallet - Injected wallet.
- Ramper Wallet - Injected wallet.
- Sender - Injected wallet.
- WalletConnect - Bridge wallet.
- WELLDONE Wallet - Injected wallet.
- XDEFI Wallet - Injected wallet.
- Intear Wallet - Injected wallet.
React / Next.js and VanillaJS variations of the Guest Book dApp can be found in the examples directory. You can use these to gain a concrete understanding of how to integrate NEAR Wallet Selector into your own dApp.
If you're upgrading from v9.x to v10.x, please read the Migration Guide for detailed instructions on the breaking changes and how to update your code.
The easiest way to use NEAR Wallet Selector is to install the core package from the NPM registry.
# Using NPM.
npm install @near-wallet-selector/core
# Using Yarn.
yarn add @near-wallet-selector/core
# Using PNPM.
pnpm add @near-wallet-selector/coreNext, you'll need to install the wallets you want to support:
# Using NPM.
npm install \
@near-wallet-selector/arepa-wallet \
@near-wallet-selector/bitget-wallet \
@near-wallet-selector/bitte-wallet \
@near-wallet-selector/coin98-wallet \
@near-wallet-selector/ethereum-wallets \
@near-wallet-selector/here-wallet \
@near-wallet-selector/hot-wallet \
@near-wallet-selector/intear-wallet \
@near-wallet-selector/ledger \
@near-wallet-selector/math-wallet \
@near-wallet-selector/meteor-wallet \
@near-wallet-selector/meteor-wallet-app \
@near-wallet-selector/my-near-wallet \
@near-wallet-selector/narwallets \
@near-wallet-selector/near-mobile-wallet \
@near-wallet-selector/near-snap \
@near-wallet-selector/nightly \
@near-wallet-selector/okx-wallet \
@near-wallet-selector/ramper-wallet \
@near-wallet-selector/react-hook \
@near-wallet-selector/sender \
@near-wallet-selector/unity-wallet \
@near-wallet-selector/wallet-connect \
@near-wallet-selector/welldone-wallet \
@near-wallet-selector/xdefi
# Using Yarn.
yarn add \
@near-wallet-selector/arepa-wallet \
@near-wallet-selector/bitget-wallet \
@near-wallet-selector/bitte-wallet \
@near-wallet-selector/coin98-wallet \
@near-wallet-selector/ethereum-wallets \
@near-wallet-selector/here-wallet \
@near-wallet-selector/hot-wallet \
@near-wallet-selector/intear-wallet \
@near-wallet-selector/ledger \
@near-wallet-selector/math-wallet \
@near-wallet-selector/meteor-wallet \
@near-wallet-selector/meteor-wallet-app \
@near-wallet-selector/my-near-wallet \
@near-wallet-selector/narwallets \
@near-wallet-selector/near-mobile-wallet \
@near-wallet-selector/near-snap \
@near-wallet-selector/nightly \
@near-wallet-selector/okx-wallet \
@near-wallet-selector/ramper-wallet \
@near-wallet-selector/react-hook \
@near-wallet-selector/sender \
@near-wallet-selector/unity-wallet \
@near-wallet-selector/wallet-connect \
@near-wallet-selector/welldone-wallet \
@near-wallet-selector/xdefi
# Using PNPM.
pnpm add \
@near-wallet-selector/arepa-wallet \
@near-wallet-selector/bitget-wallet \
@near-wallet-selector/bitte-wallet \
@near-wallet-selector/coin98-wallet \
@near-wallet-selector/ethereum-wallets \
@near-wallet-selector/here-wallet \
@near-wallet-selector/hot-wallet \
@near-wallet-selector/intear-wallet \
@near-wallet-selector/ledger \
@near-wallet-selector/math-wallet \
@near-wallet-selector/meteor-wallet \
@near-wallet-selector/meteor-wallet-app \
@near-wallet-selector/my-near-wallet \
@near-wallet-selector/narwallets \
@near-wallet-selector/near-mobile-wallet \
@near-wallet-selector/near-snap \
@near-wallet-selector/nightly \
@near-wallet-selector/okx-wallet \
@near-wallet-selector/ramper-wallet \
@near-wallet-selector/react-hook \
@near-wallet-selector/sender \
@near-wallet-selector/unity-wallet \
@near-wallet-selector/wallet-connect \
@near-wallet-selector/welldone-wallet \
@near-wallet-selector/xdefiOptionally, you can install our modal-ui (react) or modal-ui-js package for a pre-built interface that wraps the core API and presents the supported wallets:
# Using NPM.
npm install @near-wallet-selector/modal-ui
# Using Yarn.
yarn add @near-wallet-selector/modal-ui
# Using PNPM.
pnpm add @near-wallet-selector/modal-uiThen in your dApp:
import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupModal } from "@near-wallet-selector/modal-ui";
import { setupArepaWallet } from "@near-wallet-selector/arepa-wallet";
import { setupBitgetWallet } from "@near-wallet-selector/bitget-wallet";
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
import { setupHereWallet } from "@near-wallet-selector/here-wallet";
import { setupHotWallet } from "@near-wallet-selector/hot-wallet";
import { setupIntearWallet } from "@near-wallet-selector/intear-wallet";
import { setupLedger } from "@near-wallet-selector/ledger";
import { setupMathWallet } from "@near-wallet-selector/math-wallet";
import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
import { setupMeteorWalletApp } from "@near-wallet-selector/meteor-wallet-app";
import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
import { setupNarwallets } from "@near-wallet-selector/narwallets";
import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet";
import { setupNearSnap } from "@near-wallet-selector/near-snap";
import { setupNightly } from "@near-wallet-selector/nightly";
import { setupOkxWallet } from "@near-wallet-selector/okx-wallet";
import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
import { setupSender } from "@near-wallet-selector/sender";
import { setupUnityWallet } from "@near-wallet-selector/unity-wallet";
import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";
import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet";
import { setupXDEFI } from "@near-wallet-selector/xdefi";
const selector = await setupWalletSelector({
network: "testnet",
modules: [
setupArepaWallet(),
setupBitgetWallet(),
setupBitteWallet(),
setupCoin98Wallet(),
setupEthereumWallets({ wagmiConfig, web3Modal }),
setupHereWallet(),
setupHotWallet(),
setupIntearWallet(),
setupLedger(),
setupMathWallet(),
setupMeteorWallet(),
setupMeteorWalletApp({ contractId: "guest-book.testnet" }),
setupMyNearWallet(),
setupNarwallets(),
setupNearMobileWallet(),
setupNearSnap(),
setupNightly(),
setupOkxWallet(),
setupRamperWallet(),
setupSender(),
setupUnityWallet({
projectId: "c4f79cc...",
metadata: {
name: "Your dApp name",
description: "Example dApp used by NEAR Wallet Selector",
url: "https://github.com/near/wallet-selector",
icons: ["https://avatars.githubusercontent.com/u/37784886"],
},
}),
setupWalletConnect({
projectId: "c4f79cc...",
metadata: {
name: "NEAR Wallet Selector",
description: "Example dApp used by NEAR Wallet Selector",
url: "https://github.com/near/wallet-selector",
icons: ["https://avatars.githubusercontent.com/u/37784886"],
},
}),
setupWelldoneWallet(),
setupXDEFI(),
],
});
const modal = setupModal(selector, {
contractId: "guest-book.testnet"
});Each wallet package contains its own README document, please refer inside the packages folder for extra information.
Contributors may find the examples directory useful as it provides a quick and consistent way to manually test new changes and/or bug fixes.
More details around contributing to this project can be found here.
This project uses ESLint (with Prettier) to enforce a consistent coding style. It's important that you configure your editor correctly to avoid issues when you're ready to open a Pull Request.
Although this project uses Prettier, it's simply an "internal" dependency to our ESLint configuration. This is because we want Prettier to handle code styling while avoiding conflicts with ESLint which specifically focuses on potentially problematic code. As a result, it's important that you switch off Prettier in your editor and ensure only ESLint is enabled.
This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0). See LICENSE-MIT and LICENSE-APACHE for details.