# @polkadot-onboard/react

Latest version **1.1.0** (published 2023-11-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @polkadot-onboard/react
pnpm add @polkadot-onboard/react
yarn add @polkadot-onboard/react
bun add @polkadot-onboard/react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-11-14 |
| First published | 2022-10-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Parity Team <admin@parity.io> |
| Maintainers | saltycucumber, hamidra |

## Links

- npm: https://www.npmjs.com/package/@polkadot-onboard/react
- Repository: https://github.com/paritytech/polkadot-onboard
- Homepage: https://github.com/paritytech/polkadot-onboard.git#readme
- Issues: https://github.com/paritytech/polkadot-onboard.git/issues
- npm.io page: https://npm.io/package/@polkadot-onboard/react

## Dependencies (2)

- [react](https://npm.io/package/react.md) 18.2.0
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0

## Recent versions

- 1.1.0 (latest) — 2023-11-14
- 1.0.0 — 2023-08-30
- 0.2.0 — 2023-08-11
- 0.1.0 — 2023-08-01
- 0.0.10 — 2023-05-19
- 0.0.9 — 2023-04-14
- 0.0.9-beta — 2023-03-13
- 0.0.8-beta — 2023-02-16
- 0.0.7-beta — 2023-02-16
- 0.0.6-beta — 2023-01-13
- 0.0.5-beta — 2023-01-13
- 0.0.4-beta — 2023-01-11
- 0.0.3-beta — 2023-01-03
- 0.0.2-beta — 2022-10-08
- 0.0.1-beta — 2022-10-07

## README

⚠️ ⚠️**This repository has been discontinued and it is no longer maintained by any team** ⚠️ ⚠️

# @polkadot-onboard

_@polkadot-onboard_ provides a set of packages for developers to easily onboard and add different type of polkadot wallets to their dapps. It provides a universal interface for working with different type of wallets (e.g. Injected-wallets, Wallet-Connect, hardware-wallets).

## install the packages:

```ts
// npm
npm install \
 @polkadot-onboard/core\
 @polkadot-onboard/injected-wallets\
 @polkadot-onboard/wallet-connect\
 @polkadot-onboard/react

// yarn
yarn add \
 @polkadot-onboard/core\
 @polkadot-onboard/injected-wallets\
 @polkadot-onboard/wallet-connect\
 @polkadot-onboard/react
```

## example for using it in a react-app:

```ts
import { WalletAggregator } from '@polkadot-onboard/core';
import { InjectedWalletProvider } from '@polkadot-onboard/injected-wallets';
import { WalletConnectProvider } from '@polkadot-onboard/wallet-connect';
import { PolkadotWalletsContextProvider, useWallets } from '@polkadot-onboard/react';

const APP_NAME = 'Polkadot wallets example';

const ConnectContainer = () => {
    let walletConnectParams = {
        projectId: '4fae...',
        relayUrl: 'wss://relay.walletconnect.com',
        metadata: {
        name: 'Polkadot Demo',
        description: 'Polkadot Demo',
        url: '#',
        icons: ['https://walletconnect.com/walletconnect-logo.png'],
        },
    };
    let walletAggregator = new WalletAggregator([
            new InjectedWalletProvider({}, APP_NAME),
            new WalletConnectProvider(walletConnectParams, APP_NAME)
    ]);
    return (
        <PolkadotWalletsContextProvider walletAggregator={walletAggregator}>
        /*
        all wallets are available inside this context to all children.

        const { wallets } = useWallets();

        each wallet provides a universal interface including a signer that can be used to sign messages and transactions:

        interface BaseWallet {
            ...
            signer: Signer | undefined; // signer is available after connect() is called.
            connect: () => Promise<void>;
            disconnect: () => Promise<void>;
            isConnected: () => boolean;
            getAccounts: () => Promise<Account[]>;
            ...
        }
        */
        </PolkadotWalletsContextProvider>
    );
```

check the full examples:

- [headless](examples/react-headless/)
- [react-next](examples/react-next)

For wallet-connect you need a mobile apps that supports wallet-connect.  
[wallet-connect demo video](https://www.youtube.com/watch?v=5YkYi5HWeJQ)

---
_Source: https://npm.io/package/@polkadot-onboard/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._