Getting Started

React hooks to interact with LaWallet

Manual Installation

To manually add LaWallet to your project, install the required packages.

npm i @lawallet/react

@lawallet/react (opens in a new tab) is an open source library that provides react hooks to communicate with LaWallet

Create Config

Create and export a new LaWallet config using createConfig.

config.ts

import { createConfig, createSignerWithPrivateKey } from '@lawallet/react';
 
const signer = createSignerWithPrivateKey('5caa3cd87cf1ad069bcf...a7b6070a44ec7223877504c84');
 
export const config = createConfig({
  endpoints: {
    api: 'https://api.lawallet.ar',
    identity: 'https://lawallet.ar',
  },
  federation: {
    id: 'lawallet.ar',
    domain: 'lawallet.ar',
  },
  modulePubkeys: {
    card: '18f6a706091b421bd9db1ec964b4f934007fb6997c60e3c500fdaebe5f9f7b18',
    ledger: 'bd9b0b60d5cd2a9df282fc504e88334995e6fac8b148fa89e0f8c09e2a570a84',
    urlx: 'e17feb5f2cf83546bcf7fd9c8237b05275be958bd521543c2285ffc6c2d654b3',
  },
  relaysList: ['wss://relay.damus.io', 'wss://relay.lawallet.ar'],
  signer,
});

Wrap App in Context Provider

Wrap your app in the LaWalletConfig React Context Provider and pass the config you created earlier to the value property.

Check out the LaWalletConfig docs to learn more about React Context in LaWallet.

Use LaWallet Hooks

Now that everything is set up

UserBalance.tsx

import { useBalance } from '@lawallet/react';
import { config } from './config';
 
function UserBalance() {
  const userPubkey: string = '9a9787e3e31cfdc95f35d5...9789c20f63546b191e28d59';
 
  const balance = useBalance({
    pubkey: userPubkey,
    tokenId: 'BTC',
    enabled: Boolean(userPubkey.length),
    config,
  });
 
  return <div>Balance BTC: {balance}</div>;
}

useBalance