Hashgraph React Wallets

Appearance

Getting Started ​

Meet Hashgraph React Wallets, a minimalistic library that makes it easier to connect and interact with the Hedera network through your UI.

Overview ​

How? You might ask. Easy ... Adapted to the latest Hedera Wallet Connect standard and integrated with wagmi.sh, one of the most popular toolkits for interacting with Ethereum-based applications, we've successfully combined these two core functionalities.

Together with a connection management system, our solution supports developers by simplifying the creation of new dApps and facilitating interaction with network-supported wallets in just a few easy steps.

Installation ​

Simply run the following installation command using your preferred package manager.

sh
$ npm i @buidlerlabs/hashgraph-react-wallets
sh
$ pnpm add @buidlerlabs/hashgraph-react-wallets
sh
$ yarn add @buidlerlabs/hashgraph-react-wallets
sh
$ yarn add @buidlerlabs/hashgraph-react-wallets
sh
$ bun add @buidlerlabs/hashgraph-react-wallets

Setup Context ​

The following is a quick code snippet showing the simplicity of using our HWBridgeProvider React component. You just need to define your dApp metadata and choose your wallet connectors and you're good to go.

tsx
import { HWBridgeProvider } from '@buidlerlabs/hashgraph-react-wallets'
import { HashpackConnector, KabilaConnector } from '@buidlerlabs/hashgraph-react-wallets/connectors'
import { HederaTestnet } from '@buidlerlabs/hashgraph-react-wallets/chains'

import DAppLogo from 'src/assets/logo.png'

const metadata = {
  name: 'My awesome dApp',
  description: 'Created using Hashgraph React Wallets',
  icons: [DAppLogo],
  url: window.location.href,
}

const ReactWalletsProvider = ({ children }) => {
  return (
    <HWBridgeProvider
      metadata={metadata}
      projectId={'<WALLET_CONNECT_PROJECT_ID>'}
      connectors={[HashpackConnector, KabilaConnector]}
      chains={[HederaTestnet]}
    >
      {children}
    </HWBridgeProvider>
  )
}

At this point you have configured the dApp to use Hashpack and Kabila wallets on Hedera Testnet chain, but there are much more configuration options. Please see Configuration docs

Basic Usage ​

Next, we're gonna present some code snippets showing the usage of the UI component to do various things:

TIP

Every react component rendered inside <HWBridgeProvider> can use our built-in hooks.

Connect a wallet: ​
tsx
import { useWallet } from '@buidlerlabs/hashgraph-react-wallets'
import { HashpackConnector } from '@buidlerlabs/hashgraph-react-wallets/connectors'

const Wallet = () => {
  const { isConnected, connect, disconnect } = useWallet(HashpackConnector) // Or any other connectors

  if (isConnected) {
    return <Button onClick={disconnect}>Disconnect</Button>
  }

  return <Button onClick={connect}>Connect</Button>
}
Or account balance: ​
tsx
import { useBalance } from '@buidlerlabs/hashgraph-react-wallets'

const Wallet = () => {
  const { data: balance } = useBalance()

  return <span>{balance?.formatted ?? '0 ℏ'}</span>
}

What's Next? ​

Checkout our guides and discover how to enhance the configuration or use our built-in collection of React Hooks