# @concordium/wallet-connectors

> Utility interface for dApps to interact with wallets without depending on the underlying protocol and implementations for Concordium Browser Wallet and Wallet Connect v2.

Latest version **0.9.0** (published 2026-09-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @concordium/wallet-connectors
pnpm add @concordium/wallet-connectors
yarn add @concordium/wallet-connectors
bun add @concordium/wallet-connectors
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2026-09-18 |
| First published | 2023-01-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 183.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 30 |
| Author | Concordium Software |
| Maintainers | limemloh, soerenbz, opsnpm, concordium-ci, concordium-npm-ci, karsky |

## Links

- npm: https://www.npmjs.com/package/@concordium/wallet-connectors
- Repository: https://github.com/Concordium/concordium-node-sdk-js.git#main
- Homepage: https://github.com/Concordium/concordium-node-sdk-js/tree/main#readme
- Issues: https://github.com/Concordium/concordium-node-sdk-js/issues
- npm.io page: https://npm.io/package/@concordium/wallet-connectors

## Dependencies (6)

- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [@walletconnect/modal](https://npm.io/package/@walletconnect/modal.md) ^2.6.2
- [@walletconnect/modal-core](https://npm.io/package/@walletconnect/modal-core.md) ^2.6.2
- [@walletconnect/sign-client](https://npm.io/package/@walletconnect/sign-client.md) ^2.1.4
- [@protobuf-ts/grpcweb-transport](https://npm.io/package/@protobuf-ts/grpcweb-transport.md) ^2.9.4
- [@concordium/browser-wallet-api-helpers](https://npm.io/package/@concordium/browser-wallet-api-helpers.md) 3.3.0-alpha.0

## Recent versions

- 0.9.0 (latest) — 2026-09-18
- 0.6.0-alpha.6 (alpha) — 2024-04-05
- 0.4.0-rc.6 (beta) — 2023-11-10
- 0.9.0-alpha.0 — 2026-02-24
- 0.8.0 — 2026-01-26
- 0.7.0 — 2026-01-09
- 0.7.0-alpha.0 — 2025-11-20
- 0.6.1 — 2024-09-10
- 0.6.0 — 2024-06-19
- 0.6.0-alpha.5 — 2024-04-04
- 0.6.0-alpha.4 — 2024-04-03
- 0.6.0-alpha.3 — 2024-04-03
- 0.6.0-alpha.2 — 2024-04-03
- 0.6.0-alpha.1 — 2024-04-02
- 0.5.1 — 2024-03-22
- … 16 more at https://npm.io/package/@concordium/wallet-connectors/versions

## README

# `@concordium/wallet-connectors`

Interfaces for interacting with wallets along with implementations for Browser Wallet and WalletConnect (v2).
It’s written in TypeScript and has no dependencies to any UI framework.

The library takes away the complexity involved with interacting with both Browser Wallet and Mobile Wallets (via WalletConnect)
such that dApps only need to interact with interfaces that abstract away the underlying protocol.

## Interfaces

### `WalletConnector`

An object of this type represents some connection type and manages connections over the corresponding protocol.

The main method of this interface is `.connect()`, which attempts to initiate a connection.
If successful, the returned promise resolves to a `WalletConnection`.

Connectors usually hold a `WalletConnectionDelegate` reference that they share with the application.
Relevant events pass from the connectors to the application through this delegate.

Implementations may support multiple active connections from the same connector.

### `WalletConnection`

A connection allows the application to interact with a wallet.
The following interactions are supported:

- `signMessage`: Ask the wallet to sign a message and return it back to the dApp.
- `signAndSendTransaction`: Ask the wallet to sign a transaction and submit it to a node.
- `signAndSendSponsoredTransaction`: Ask the wallet to sign a sponosred transaction and submit it to a node.

The wallet is responsible for prompting its user for approval of all interactions.

### `WalletConnectionDelegate`

A collection of generic event handlers for common events.
Applications usually define a single delegate that they share between all connectors.
This allows the application to handle all events from all kinds of connections in a single place.

## Usage Example

First define a delegate `MyDelegate` for keeping track of the connected account and chain for each connection:

```typescript
import {
    BrowserWalletConnector,
    WalletConnectConnector,
    WalletConnection,
    WalletConnectionDelegate,
} from '@concordium/wallet-connectors';

class MyDelegate implements WalletConnectionDelegate {
    accounts = new Map<WalletConnection, string | undefined>();
    chains = new Map<WalletConnection, string | undefined>();

    onAccountChanged = (connection: WalletConnection, address: string | undefined) => {
        this.accounts.set(connection, address);
    };

    onChainChanged = (connection: WalletConnection, genesisHash: string) => {
        this.chains.set(connection, genesisHash);
    };

    onConnected = (connection: WalletConnection, address: string | undefined) => {
        this.onAccountChanged(connection, address);
    };

    onDisconnected = (connection: WalletConnection) => {
        this.accounts.delete(connection);
        this.chains.delete(connection);
    };
}
```

Then write some application code that only references the connection through the generic `WalletConnection` interface:

```typescript
async function doSomethingInteresting(connection: WalletConnection, account: string, ...) {
    ...
    const txHash = await connection.signAndSendTransaction(account, ...);
    ...
}
```

In the appropriate context, set up connectors for both Browser Wallet and WalletConnect
(adding appropriate values of `walletConnectOpts` and `network`) and open connections to both of them:

```typescript
const delegate = new MyDelegate();
const browserWalletConnector = await BrowserWalletConnector.create(delegate);
const walletConnectConnector = await WalletConnectConnector.create(walletConnectOpts, delegate, network);

const browserWalletConnection = await browserWalletConnector.connect();
const walletConnectConnection = await walletConnectConnector.connect();
```

The current state of all connections is available in the fields of `delegate`.
This is used when invoking the application function above:

```typescript
doSomethingInteresting(connection, delegate.accounts.get(connection)!, ...)
```

where `connection` is either `browserWalletConnection` or `walletConnectConnection`.

## Usage in React

Use the React component [`WithWalletConnector`](../react-components/src/WithWalletConnector.ts) in
[`@concordium/react-components`](../react-components)
to easily integrate this library into a React app.

## Build

Run

```shell
yarn
yarn build
```

to compile the TypeScript files into `./dist` along with type declarations and source maps.

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