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

npm

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

Setup

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 register() function for you.

Usage

Web3 Integration

To set up your web3 integration (via Viem, Wagmi, Ethers, web3.js, ...), 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 connector (happyWagmiConnector) and a wagmi config (createHappyChainWagmiConfig).

Getting the Active User

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

import React from 'react'
import { useHappyChain } from '@happy.tech/react'
 
function UserAddressComponent() {
    const { user } = useHappyChain()
 
    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.

[ConnectButton]; /sdk/react/api/functions/ConnectButton

The ConnectButton component wraps the happychain-connect-button webcomponent, 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.

Default Style

<ConnectButton />