This is the Modal UI package for NEAR Wallet Selector.
The easiest way to use this package is to install it from the NPM registry:
# Using Yarn
yarn add @near-wallet-selector/modal-ui-js
# Using NPM.
npm install @near-wallet-selector/modal-ui-js
Then use it in your dApp:
import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupModal } from "@near-wallet-selector/modal-ui-js";
import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
const selector = await setupWalletSelector({
network: "testnet",
modules: [setupMyNearWallet()],
});
const modal = setupModal(selector, {
contractId: "test.testnet",
});
modal.show();
-
contractId
(string
): Account ID of the Smart Contract used for sign in and signing transactions. -
methodNames
(Array<string>?
): Specify limited access to particular methods on the Smart Contract. -
theme
(Theme?
): Specify light/dark theme for UI. Defaults to the browser configuration when omitted or set to 'auto'. This can be eitherlight
,dark
orauto
. -
description
(string?
): Define a custom description in the UI.
Import modal css styles:
/* Add import in the main css file */
@import "~@near-wallet-selector/modal-ui-js/styles.css";
// Add import in the main component
import "@near-wallet-selector/modal-ui-js/styles.css";
These are the available css variables:
--backdrop-bg
--heading-color
--text-color
--sidebar-border-color
--selected-wallet-bg
--selected-wallet-bg-hover
--wallet-option-border-color
--wallet-option-bg-hover
--content-bg
--change-path-bg
--home-button-bg
--confirm-button-bg
--confirm-button-bg-hover
--error
--close-button-bg-color
--close-button-fill-icon-colo
--spinner-color
--bottom-section
--mobile-text
--connected-green
Customizing css is done simply by updating the value of a variable in the root of your css file.
:root {
--backdrop-bg: #26262630;
}
You can find the entire API reference for Modal UI here.
This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0).