Wallet Selector

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

Preview 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.

Bitget Wallet: A multi-chain wallet supporting NEAR and other blockchains with comprehensive DeFi features.
Coin98 Wallet: A multi-chain wallet and DeFi gateway supporting NEAR and 40+ blockchains.
Hot Wallet: A browser-based wallet optimized for development and testing environments.
Intear Wallet: A NEAR-focused wallet with seamless integration capabilities.
Math Wallet: A multi-platform wallet supporting NEAR and multiple blockchain networks.
Meteor Wallet: Both a browser and extension wallet, with advanced NFT features.
NEAR Mobile: A non-custodial wallet that is easy to use and well designed to manage your crypto wherever you go.
OKX Wallet: A comprehensive Web3 wallet supporting NEAR and multiple chains with built-in DeFi access.
Ramper Wallet: A user-friendly wallet with social login features supporting NEAR.
Sender Wallet: Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora.
Unity Wallet: A wallet designed for seamless NEAR blockchain integration.
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 v5.1.1 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/bitget-wallet \
  @near-wallet-selector/coin98-wallet \
  @near-wallet-selector/ethereum-wallets \
  @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/near-mobile-wallet \
  @near-wallet-selector/okx-wallet \
  @near-wallet-selector/ramper-wallet \
  @near-wallet-selector/sender \
  @near-wallet-selector/unity-wallet \
  @near-wallet-selector/welldone-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";

Setup React Hook

This package provides a React context and hook to easily integrate Wallet Selector into your React application.

Install the React hook package:

npm install @near-wallet-selector/react-hook \
@near-wallet-selector/modal-ui

Wrap your app with the provider:

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

import { setupNearWallet } from "@near-wallet-selector/near-wallet";

import { WalletSelectorProvider } from "@near-wallet-selector/react-hook";

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

function App() {
  return (
    <WalletSelectorProvider config={config}>
      {/* Your app components */}
    </WalletSelectorProvider>
  );
}

Reference

The API reference of the selector can be found here

Wallet Selector
React Hook

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

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { signIn } = useWalletSelector();

  const handleSignIn = () => {
    signIn();
  };

  return <button onClick={handleSignIn}>Sign In</button>;
};

Sign out

Wallet Selector
React Hook

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

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { signOut } = useWalletSelector();

  const handleSignOut = async () => {
    try {
      await signOut();
      console.log("Successfully signed out");
    } catch (error) {
      console.error("Sign out failed:", error);
    }
  };

  return <button onClick={handleSignOut}>Sign Out</button>;
};

Get accounts

Wallet Selector
React Hook

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

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { getAccount, signedAccountId } = useWalletSelector();
  const fetchAccountInfo = async (accountId) => {
    const account = await getAccount(signedAccountId);
    console.log(account);
  };
  useEffect(() => {
    fetchAccountInfo();
  }, []);

  return <div>Check console for account info</div>;
};

Verify Owner

Wallet Selector
React Hook

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

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { signMessage } = useWalletSelector();

  const handleVerifyOwner = async () => {
    try {
      const signedMessage = await signMessage({
        message: "Test message",
        recipient: "app.near",
        nonce: Buffer.from(Date.now().toString()),
      });
      console.log("Message signed:", signedMessage);
    } catch (error) {
      console.error("Verification failed:", error);
    }
  };

  return <button onClick={handleVerifyOwner}>Verify Owner</button>;
};

Sign and send transaction

Wallet Selector
React Hook

(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",
        },
      },
    ],
  });
})();

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { callFunction } = useWalletSelector();

  const handleTransaction = async () => {
    try {
      const result = await callFunction({
        contractId: "guest-book.testnet",
        method: "addMessage",
        args: { text: "Hello World!" },
        gas: "30000000000000",
        deposit: "10000000000000000000000",
      });
      console.log("Transaction result:", result);
    } catch (error) {
      console.error("Transaction failed:", error);
    }
  };

  return <button onClick={handleTransaction}>Send Transaction</button>;
};

Sign and send transactions

Wallet Selector
React Hook

(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",
            },
          },
        ],
      },
    ],
  });
})();

import { useWalletSelector } from "@near-wallet-selector/react-hook";

const MyComponent = () => {
  const { signAndSendTransactions } = useWalletSelector();

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

      const results = await signAndSendTransactions({ transactions });
      console.log("Batch results:", results);
    } catch (error) {
      console.error("Batch transaction failed:", error);
    }
  };

  return (
    <button onClick={handleBatchTransactions}>Send Batch Transactions</button>
  );
};

Unlocking the wallet ecosystem​

Install​

Setup Wallet Selector​

Setup React Hook​

Reference​

Sign in​

Sign out​

Get accounts​

Verify Owner​

Sign and send transaction​

Sign and send transactions​