Skip to content

This is a wallet modal that allows users to interact with NEAR dApps with a selection of available wallets.

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-APACHE
MIT
LICENSE-MIT
Notifications You must be signed in to change notification settings

nightly-labs/wallet-selector

This branch is 120 commits behind near/wallet-selector:refs/heads/main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

668dd61 · Oct 28, 2024
Jul 18, 2024
Jul 18, 2024
Feb 4, 2022
Sep 2, 2024
Jul 15, 2024
Oct 28, 2024
Sep 11, 2024
Jun 25, 2023
Mar 17, 2022
Apr 4, 2022
Jun 25, 2023
Feb 7, 2022
Jul 26, 2024
Jan 21, 2022
Jul 26, 2024
Mar 17, 2022
Jul 18, 2024
Jul 15, 2024
Feb 23, 2022
Feb 23, 2022
Oct 4, 2024
Oct 25, 2023
Mar 17, 2022
Jun 25, 2023
Feb 4, 2022
Jun 25, 2023
Jan 11, 2024
Oct 23, 2024
Mar 2, 2022
Aug 14, 2024
Nov 22, 2022
Oct 4, 2024

Repository files navigation

NEAR Wallet Selector

NEAR Wallet Selector makes it easy for users to interact with your dApp by providing an abstraction over various wallets within the NEAR ecosystem:

Preview

React / Next.js and Angular 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.

Preview

Installation and Usage

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 v1.0.0 or above check them at packages

# Using Yarn
yarn add near-api-js

# Using NPM.
npm install near-api-js
# Using Yarn
yarn add @near-wallet-selector/core

# Using NPM.
npm install @near-wallet-selector/core

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

# Using Yarn
yarn add \
  @near-wallet-selector/bitget-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/okx-wallet \
  @near-wallet-selector/narwallets \
  @near-wallet-selector/welldone-wallet \
  @near-wallet-selector/near-snap \
  @near-wallet-selector/ledger \
  @near-wallet-selector/wallet-connect \
  @near-wallet-selector/coin98-wallet \
  @near-wallet-selector/neth \
  @near-wallet-selector/xdefi \
  @near-wallet-selector/ramper-wallet \
  @near-wallet-selector/near-mobile-wallet  \
  @near-wallet-selector/bitget-wallet \
  @near-wallet-selector/mintbase-wallet \
  @near-wallet-selector/bitte-wallet \
  @near-wallet-selector/ethereum-wallets


# Using NPM.
npm install \
  @near-wallet-selector/bitget-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/okx-wallet \
  @near-wallet-selector/narwallets \
  @near-wallet-selector/welldone-wallet \
  @near-wallet-selector/near-snap \
  @near-wallet-selector/ledger \
  @near-wallet-selector/wallet-connect \
  @near-wallet-selector/coin98-wallet \
  @near-wallet-selector/neth \
  @near-wallet-selector/xdefi \
  @near-wallet-selector/ramper-wallet \
  @near-wallet-selector/near-mobile-wallet \
  @near-wallet-selector/bitget-wallet \
  @near-wallet-selector/mintbase-wallet \
  @near-wallet-selector/bitte-wallet \
  @near-wallet-selector/ethereum-wallets

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:

# Using Yarn
yarn add @near-wallet-selector/modal-ui

# Using NPM.
npm install @near-wallet-selector/modal-ui

Then in your dApp:

import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupModal } from "@near-wallet-selector/modal-ui";
import { setupBitgetWallet } from "@near-wallet-selector/bitget-wallet";
import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
import { setupSender } from "@near-wallet-selector/sender";
import { setupHereWallet } from "@near-wallet-selector/here-wallet";
import { setupNearSnap } from "@near-wallet-selector/near-snap";
import { setupMathWallet } from "@near-wallet-selector/math-wallet";
import { setupNightly } from "@near-wallet-selector/nightly";
import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
import { setupOkxWallet } from "@near-wallet-selector/okx-wallet";
import { setupNarwallets } from "@near-wallet-selector/narwallets";
import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet";
import { setupLedger } from "@near-wallet-selector/ledger";
import { setupWalletConnect } from "@near-wallet-selector/wallet-connect";
import { setupNearFi } from "@near-wallet-selector/nearfi";
import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
import { setupNeth } from "@near-wallet-selector/neth";
import { setupXDEFI } from "@near-wallet-selector/xdefi";
import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet"; 
import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet"; 
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";

const selector = await setupWalletSelector({
  network: "testnet",
  modules: [
    setupBitgetWallet(),
    setupMyNearWallet(),
    setupSender(),
    setupHereWallet(),
    setupMathWallet(),
    setupNightly(),
    setupMeteorWallet(),
    setupNearSnap(),
    setupOkxWallet(),
    setupNarwallets(),
    setupWelldoneWallet(),
    setupLedger(),
    setupNearFi(),
    setupCoin98Wallet(),
    setupNeth(),
    setupXDEFI(),
    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"],
      },
    }),
    setupNearMobileWallet(),
    setupMintbaseWallet({
          networkId: "mainnet",
          walletUrl: "https://wallet.mintbase.xyz",
          callbackUrl: "https://www.mywebsite.com",
          deprecated: false,
    }),
    setupBitteWallet({
        networkId: "mainnet",
        walletUrl: "https://wallet.bitte.ai",
        callbackUrl: "https://www.mywebsite.com",
        deprecated: false,
    }),
    setupEthereumWallets({ wagmiConfig, web3Modal }),
  ],
});

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

Wallet Package Documentation

Each wallet package contains its own README document, please refer inside the packages folder for extra information.

Contributing

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.

Editor Setup

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.

License

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.

About

This is a wallet modal that allows users to interact with NEAR dApps with a selection of available wallets.

Resources

License

Apache-2.0, MIT licenses found

Licenses found

Apache-2.0
LICENSE-APACHE
MIT
LICENSE-MIT

Security policy

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 90.2%
  • CSS 8.5%
  • JavaScript 1.1%
  • Shell 0.2%