Gear-JS Wallet Connect

---

Description

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

Installation

Install package:

1npm install @gear-js/wallet-connect

or

1yarn add @gear-js/wallet-connect

Getting started

Simple as it is, here's quick example:

1import { Wallet } from '@gear-js/wallet-connect';
2import Logo from './logo.svg?react';
3
4function Header() {
5  return (
6    <header>
7      <Logo />
8
9      <Wallet
10        theme="vara" // 'vara' (default) or 'gear' theme variation
11        displayBalance={true} // true (default) or false
12      />
13    </header>
14  );
15}
16
17export { Header };

Vara UI Theme

Be aware that in order for vara theme to work as expected, @gear-js/vara-ui package should be installed with configured global styles:

1import { Wallet } from '@gear-js/wallet-connect';
2import '@gear-js/vara-ui/dist/style.css';
3
4function VaraWallet() {
5  return <Wallet theme="vara" />;
6}
7
8export { VaraWallet };

Gear UI Theme

In order for gear theme to work as expected, @gear-js/ui package should be installed with configured global index.scss:

1@use '@gear-js/ui/resets';
2@use '@gear-js/ui/typography';

1import { Wallet } from '@gear-js/wallet-connect';
2import './index.scss';
3
4function GearWallet() {
5  return <Wallet theme="gear" />;
6}
7
8export { GearWallet };