Getting started with React

The @happy.tech/react package provides React-specific functionality, to be used instead or in addition to those provided in @happy.tech/core.

Install

Using a package manager

npm install @happy.tech/core @happy.tech/react

Setup

Wallet component

After installing, the first thing you will need to do, is wrap your app in the HappyWalletProvider.

import React from "react"
import ReactDOM from "react-dom/client"
import { HappyWalletProvider } from "@happy.tech/react"
 
ReactDOM.createRoot(document.getElementById('root')).render(
    <HappyWalletProvider>
        {/* <YourApp /> */}
    </HappyWalletProvider>
)

The HappyWalletProvider takes care of calling the loadHappyWallet() function for you.

Usage

Web3 Integration

To set up your web3 integration (via Viem, Wagmi, Ethers), see the corresponding section in the "Getting started with JavaScript/TypeScript" page.

Of particular relevance to React users, we provide an easy way to create a Wagmi config (createHappyChainWagmiConfig), and a Wagmi connector if you need to customize the config (happyWagmiConnector). Don't forget to call the Wagmi connect function!

Getting the active user

The useHappyWallet hook returns the current user as a HappyUser if the user is connected, otherwise it returns undefined.

import React from "react"
import { useHappyWallet } from "@happy.tech/react"
 
function UserAddressComponent() {
    const { user } = useHappyWallet()
 
    if (!user) {
        return <div>Not connected</div>
    }
 
    return <div>{user.address}</div>
}

To get the active user outside of React components, see the corresponding section in the "Getting started with JavaScript/TypeScript" page.

UI component

The Happy Wallet component (the orb on the right side of the screen that opens up the wallet) is automatically added to the page by the HappyWalletProvider.

To display a connection button, you can use the ConnectButton component. The button turns into a badge displaying the username and avatar after connecting.

The ConnectButton component wraps the happychain-connect-button Web Component, allowing it to be used from JSX.

You can disable the default styles by passing the disableStyles property. In this case, you probably want to specify your own style, for which you need to pass the overrideBadgeStyles option to the HappyWalletProvider.

<ConnectButton />

More

Don't forget to check the "Getting started with Javascript/Typescript" page, as it includes features you'll want to use on top of the features in the React package.