Wallet Selector

The Wallet Selector is a JS/TS library that lets users connect to your application using their preferred wallet.

Initial screen of Wallet Selector

List of NEAR Wallets

Here is a list of user-friendly wallets that support the NEAR blockchain, you can find more at the NEAR Wallets page.

• HERE Wallet: Non-custodial mobile wallet with a friendly user interface and advanced features.

• Meteor Wallet: Both a browser and extension wallet, with advanced NFT features.

• Mintbase Wallet: A passkey meta-transaction, browser wallet, with advanced NFT and AI features. If you're looking to integrate Mintbase Wallet into your applications, check this tutorial to get started.

• MyNearWallet: A browser based wallet that offers the same UI and features of wallet.near.org.

• NEAR Mobile: A non-custodial wallet that is easy to use and well designed to manage your crypto wherever you go.

• Nightly Wallet: A mobile and extension wallet, with support for multiple ecosystems.

• Sender Wallet: Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora.

• WELLDONE Wallet: A multi-chain extension wallet that gives you control over all your assets from a single platform.

---

Unlocking the wallet ecosystem

Wallet Selector makes it easy for users to interact with dApps by providing an abstraction over various wallets and wallet types within the NEAR ecosystem.

info

You can check the current list of supported wallets in the README.md file of near/wallet-selector repository.

---

Install

The easiest way to use NEAR Wallet Selector is to install the core package from the NPM registry, some packages may require near-api-js v0.44.2 or above check them at packages.

npm install near-api-js

npm install @near-wallet-selector/core

Next, you'll need to install the wallets you want to support:

npm install \
  @near-wallet-selector/near-wallet \
  @near-wallet-selector/my-near-wallet \
  @near-wallet-selector/sender \
  @near-wallet-selector/nearfi \
  @near-wallet-selector/here-wallet \
  @near-wallet-selector/math-wallet \
  @near-wallet-selector/nightly \
  @near-wallet-selector/meteor-wallet \
  @near-wallet-selector/ledger \
  @near-wallet-selector/wallet-connect \
  @near-wallet-selector/nightly-connect \
  @near-wallet-selector/default-wallets \
  @near-wallet-selector/coin98-wallet

---

Setup Wallet Selector

Optionally, you can install our modal-ui or modal-ui-js package for a pre-built interface that wraps the core API and presents the supported wallets:

npm install @near-wallet-selector/modal-ui

Then use it in your dApp:

import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupModal } from "@near-wallet-selector/modal-ui";
import { setupNearWallet } from "@near-wallet-selector/near-wallet";

const selector = await setupWalletSelector({
  network: "testnet",
  modules: [setupNearWallet()],
});

const modal = setupModal(selector, {
  contractId: "test.testnet",
});

modal.show();

Required CSS

To integrate the Wallet Selector, you also need to include the required CSS:

import "@near-wallet-selector/modal-ui/styles.css"

---

Reference

The API reference of the selector can be found here

Sign in

// NEAR Wallet.
(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  const accounts = await wallet.signIn({ contractId: "test.testnet" });
})();

Sign out

(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  await wallet.signOut();
})();

Get accounts

(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  const accounts = await wallet.getAccounts();
  console.log(accounts); // [{ accountId: "test.testnet" }]
})();

Verify Owner

// MyNearWallet
(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  await wallet.verifyOwner({
    message: "Test message",
  });
})();

Sign and send transaction

(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  await wallet.signAndSendTransaction({
    actions: [
      {
        type: "FunctionCall",
        params: {
          methodName: "addMessage",
          args: { text: "Hello World!" },
          gas: "30000000000000",
          deposit: "10000000000000000000000",
        },
      },
    ],
  });
})();

Sign and send transactions

(async () => {
  const wallet = await selector.wallet("my-near-wallet");
  await wallet.signAndSendTransactions({
    transactions: [
      {
        receiverId: "guest-book.testnet",
        actions: [
          {
            type: "FunctionCall",
            params: {
              methodName: "addMessage",
              args: { text: "Hello World!" },
              gas: "30000000000000",
              deposit: "10000000000000000000000",
            },
          },
        ],
      },
    ],
  });
})();