@web3-wallet-selector/wallet-connect

This is the WalletConnect package for Utility Wallet Selector.

Installation and Usage

The easiest way to use this package is to install it from the NPM registry, this package requires web3-api-js v1.0.0 or above:

# Using Yarn
yarn add web3-api-js

# Using NPM.
npm install web3-api-js

# Using Yarn
yarn add @web3-wallet-selector/wallet-connect

# Using NPM.
npm install @web3-wallet-selector/wallet-connect

Then use it in your dApp:

import { setupWalletSelector } from "@web3-wallet-selector/core";
import { setupWalletConnect } from "@web3-wallet-selector/wallet-connect";

const walletConnect = setupWalletConnect({
  projectId: "c4f79cc...",
  metadata: {
    name: "Utility Wallet Selector",
    description: "Example dApp used by Utility Wallet Selector",
    url: "https://github.com/utnet-org/wallet-selector",
    icons: ["https://avatars.githubusercontent.com/u/37784886"],
  },
  chainId: "near:testnet",
  iconUrl: "https://<Wallet Icon URL Here>",
  // Please note that the 'methods' option is discretionary;
  // if omitted, all methods are included by default.
  // Use it solely to override the default configuration.
  methods: [
    "near_signIn",
    "near_signOut",
    "near_getAccounts",
    "near_signTransaction",
    "near_signTransactions",
    "near_verifyOwner",
    "near_signMessage",
  ]
});

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

Wallet Connect Configuration

Project ID is required for wallet connect, please obtain it from walletconnect.com

Options

• projectId (string): Project ID is required to instantiate the client. More details can be found here.
• metadata (object): Metadata used to provide context of the dApp to the connected wallet. More details can be found here.
• chainId (string?): Chain ID for requests. Defaults to "near:<networkId> unless using custom network configuration.
• relayUrl (string?): Relay URL for requests. Defaults to "wss://relay.walletconnect.com".
• iconUrl (string?): Image URL for the icon shown in the modal. This can also be a relative path or base64 encoded image. Defaults to ./assets/wallet-connect-icon.png.
• deprecated: (boolean?): Deprecated is optional. Default is false.
• methods: (Array<string>?): Methods is optional overrides default WC_METHODS. Defaults to undefined.
• events: (Array<string>?): Events is optional overrides default WC_EVENTS. Defaults to undefined.

Supported methods

• near_signIn
• near_signOut
• near_getAccounts
• near_signTransaction
• near_signTransactions
• near_verifyOwner
• near_signMessage

Supported events

• chainChanged
• accountsChanged

Assets

Assets such as icons can be found in the /assets directory of the package. Below is an example using Webpack:

import { setupWalletConnect } from "@web3-wallet-selector/wallet-connect";
import walletConnectIconUrl from "@web3-wallet-selector/wallet-connect/assets/wallet-connect-icon.png";

const walletConnect = setupWalletConnect({
  iconUrl: walletConnectIconUrl
});

License

This repository is distributed under the terms of both the MIT license and the Apache License (Version 2.0).