Gear-JS Wallet Connect

Description

A React library to connect supported Substrate-based wallets in a standardized and consistent way across decentralized applications.

Installation

npm install @gear-js/wallet-connect @gear-js/react-hooks @gear-js/ui @gear-js/vara-ui

Getting started

Configure API

Before using @gear-js/wallet-connect, make sure to configure @gear-js/react-hooks in your project according to its documentation. This setup is required for API connection and account management.

Configure UI

Depending on your chosen theme, you must also install and configure the corresponding UI library styles:

• For the vara theme (default), follow the @gear-js/vara-ui documentation to set up global styles.
• For the gear theme, follow the @gear-js/ui documentation to set up global styles (typically via your index.scss).

Components

Wallet

A React component that displays the current account or wallet connection button, and (optionally) the account’s total balance. It uses useAccount from @gear-js/react-hooks to manage account state and modal visibility for wallet actions.

Props

• theme ('gear' | 'vara', optional): UI theme for the wallet controls. Defaults to 'vara'.
• displayBalance (boolean, optional): Whether to show the account’s total balance. Defaults to true.

Usage Example

import { Wallet } from '@gear-js/wallet-connect';

import Logo from './logo.svg?react';

function Header() {
  return (
    <header>
      <Logo />
      <Wallet />
    </header>
  );
}

export { Header };

WalletModal

A React modal component for managing wallet connections and account selection. It provides a user interface for connecting to supported wallets, switching between accounts, copying addresses, and logging out. This component is used internally by the Wallet component.

Props

• theme ('gear' | 'vara', optional): UI theme for the modal. Defaults to 'vara'.
• close (() => void): Function to close the modal.

Usage Example

import { WalletModal } from '@gear-js/wallet-connect';

function CustomWalletButton() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <>
      <button onClick={openModal}>Open Wallet Modal</button>

      {isModalOpen && <WalletModal theme="vara" close={closeModal} />}
    </>
  );
}