# react-ic-wallet

> Simplistic Context provider in order to manage Internet Computer wallets in the browser

Latest version **0.4.0** (published 2025-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ic-wallet
pnpm add react-ic-wallet
yarn add react-ic-wallet
bun add react-ic-wallet
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2025-02-26 |
| First published | 2024-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 66.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Christian Visintin |
| Maintainers | veeso |
| Keywords | react, reactjs, web3, internet-computer, ic, dfinity, wallet |

## Links

- npm: https://www.npmjs.com/package/react-ic-wallet
- Repository: https://github.com/veeso/react-ic-wallet
- Homepage: https://github.com/veeso/react-ic-wallet#readme
- Issues: https://github.com/veeso/react-ic-wallet/issues
- npm.io page: https://npm.io/package/react-ic-wallet

## Dependencies (6)

- [react](https://npm.io/package/react.md) >=19.x
- [@dfinity/agent](https://npm.io/package/@dfinity/agent.md) ^2
- [@dfinity/candid](https://npm.io/package/@dfinity/candid.md) ^2
- [@dfinity/identity](https://npm.io/package/@dfinity/identity.md) ^2
- [@dfinity/principal](https://npm.io/package/@dfinity/principal.md) ^2
- [@dfinity/auth-client](https://npm.io/package/@dfinity/auth-client.md) ^2

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2025-02-26
- 0.4.0-rc2 — 2025-02-26
- 0.4.0-rc1 — 2025-02-26
- 0.3.1 — 2024-03-04
- 0.3.0 — 2024-03-04
- 0.2.1 — 2024-02-26
- 0.2.0 — 2024-02-26
- 0.1.1 — 2024-02-25
- 0.1.0 — 2024-02-19

## README

# React IC Wallet

[![NPM](https://img.shields.io/npm/v/react-ic-wallet.svg)](https://www.npmjs.com/package/react-ic-wallet)
[![CI](https://github.com/veeso/react-ic-wallet/actions/workflows/build_test.yml/badge.svg)](https://github.com/veeso/react-ic-wallet/actions/workflows/build_test.yml)

React IC Wallet is a Simplistic Context provider in order to manage Internet Computer wallets in the browser.
It is heavily inspired by [Metamask react](https://www.npmjs.com/package/metamask-react).

## Supported wallets

Currently, **React-ic-wallet** supports the following browser wallets:

- [Bitfinity Wallet](https://wallet.bitfinity.network/)
- [Plug](https://plugwallet.ooo/)

## Usage

### Wrap your application

Wrap your application around the **IcWalletProvider**

```tsx
import { IcWalletProvider } from 'react-ic-wallet';

<IcWalletProvider>
  <App />
</IcWalletProvider>
```

### Use a specific wallet

```tsx
import { IcWalletProvider, WalletProvider } from 'react-ic-wallet';

<IcWalletProvider provider={WalletProvider.Bitfinity}>
  <App />
</IcWalletProvider>
```

### Create a component to handle the connection

```tsx
import * as React from 'react';
import { useIcWallet } from 'react-ic-wallet';

import Logo from './ConnectButton/Logo';
import Button from './reusable/Button';
import Container from './reusable/Container';

const ConnectButton = () => {
  const { status, connect, disconnect, account, principal } = useIcWallet();

  const disabled = ['initializing', 'unavailable', 'connecting'].includes(
    status,
  );

  React.useEffect(() => {
    console.log('status from ctx', status);
  }, [status]);

  const onClick = () => {
    if (status === 'notConnected') {
      return connect();
    } else if (status === 'connected') {
      return disconnect();
    }
    return undefined;
  };

  const text = () => {
    if (status === 'initializing') return 'Initializing...';
    if (status === 'unavailable') return 'IC Wallet not available';
    if (status === 'notConnected') return 'Connect to IC';
    if (status === 'connecting') return 'Connecting...';
    if (status === 'connected') return principal;
    return undefined;
  };

  return (
    <Container.FlexRow className="items-center gap-8">
      <Button.Alternative
        className="my-0 !mb-0"
        onClick={onClick}
        disabled={disabled}
      >
        <Logo className="inline w-[32px] mr-2" />
        {text()}
      </Button.Alternative>
    </Container.FlexRow>
  );
};

export default ConnectButton;
```

### Create actor to interact with canisters

```tsx
import * as React from 'react';
import { ActorMethod, ActorSubclass } from '@dfinity/agent';
import { useIcWallet } from 'react-ic-wallet';

import { icpLedgerIdlFactory } from './IcpLedger';

interface Context {
  icpLedger?: ActorSubclass<Record<string, ActorMethod>>;
}

export const AgentContext = React.createContext<Context>({
  icpLedger: undefined,
});

export const icpLedgerIdlFactory = ({ IDL: IDL }) => {
  ...
  return IDL.Service({
    icrc1_balance_of: IDL.Func([Account], [IDL.Nat], ['query']),
    icrc1_decimals: IDL.Func([], [IDL.Nat8], ['query']),
    icrc1_fee: IDL.Func([], [IDL.Nat], ['query']),
    icrc1_metadata: IDL.Func(
      [],
      [IDL.Vec(IDL.Tuple(IDL.Text, MetadataValue))],
      ['query'],
    ),
    icrc1_name: IDL.Func([], [IDL.Text], ['query']),
    icrc1_supported_standards: IDL.Func(
      [],
      [IDL.Vec(TokenExtension)],
      ['query'],
    ),
    icrc1_symbol: IDL.Func([], [IDL.Text], ['query']),
    icrc1_total_supply: IDL.Func([], [IDL.Nat], ['query']),
    icrc1_transfer: IDL.Func([TransferArg], [Result_5], []),
    icrc2_allowance: IDL.Func([AllowanceArgs], [Allowance], ['query']),
    icrc2_approve: IDL.Func([ApproveArgs], [Result_6], []),
    icrc2_transfer_from: IDL.Func([TransferFromArgs], [Result_7], []),
  });
}

const AgentContextProvider = ({ children }: { children: React.ReactNode }) => {
  const [icpLedger, setIcpLedger] =
    React.useState<ActorSubclass<Record<string, ActorMethod>>>();
  const { createActor, status } = useIcWallet();

  React.useEffect(() => {
    if (status === 'connected') {
      createActor('ryjl3-tyaaa-aaaaa-aaaba-cai', icpLedgerIdlFactory)
        .then((actor) => {
          if (actor) {
            setIcpLedger(actor);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    }
  }, [status]);

  return (
    <AgentContext.Provider
      value={{
        icpLedger,
      }}
    >
      {children}
    </AgentContext.Provider>
  );
};

export default AgentContextProvider;
```

### Access methods once connected

```tsx
import * as React from 'react';
import { useIcWallet } from 'react-ic-wallet';

const Header = () => {
  const { icpLedger } = React.useContext(AgentContext);
  const { principal } = useConnectedIcWallet();
  const [balance, setBalance] = React.useState<string>('0');

  React.useEffect(() => {
    if (icpLedger) {
      icpLedger
        .icrc1_balance_of({
          owner: Principal.fromText(principal),
          subaccount: [],
        })
        .then((balance) => {
          setBalance((balance as bigint).toString());
        })
        .catch((e) => {
          console.error(e);
        });
    }
  }, [icpLedger]);

  return (
    <Container.FlexCols>
      <span>User balance (ICP): {balance}</span>
    </Container.FlexCols>
  );
};

export default Header;

```

### Example

Find more in the example in the `examples/` directory, where we use the ic wallet context provider to query the ICP ledger canister.

## License

react-ic-wallet is licensed under MIT.

See full license [HERE](./LICENSE).

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