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.

You should read the @happy.tech/core docs for important context!

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 { HappyWalletProvider } from "@happy.tech/react"
 
function App() {
    return ( 
        <HappyWalletProvider>
            {/* <YourApp /> */}
        </HappyWalletProvider>
    )
}

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

Usage

Web3 Integration (Viem, Wagmi, Ethers, ...)

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

To configure Wagmi with React specifically, include the WagmiProvider as you normally would, and use the createHappyChainWagmiConfig function to create the Wagmi config. After this you may use the ConnectButton as described below, or build your own, calling the Wagmi connect function as described in the Wagmi docs.

If you need to customize the Wagmi config, you can use happyWagmiConnector to generate a custom Happy-Wallet-compatible Wagmi config.

import React from "react"
import { WagmiProvider } from 'wagmi'
import { createHappyChainWagmiConfig } from "@happy.tech/core"
import { HappyWalletProvider } from "@happy.tech/react"
 
const config = createHappyChainWagmiConfig() 
 
function App() {
    return ( 
        <HappyWalletProvider>
            <WagmiProvider config={config}>
                {/* <YourApp /> */}
            </WagmiProvider>
        </HappyWalletProvider>
    )
}

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.

The method presented there — getCurrentUser, can also be useful in your callbacks. In particular, the Happy Wallet enables "lazy connection" where making requests that require permissions (like sending a transaction) will prompt to user to login to the wallet and connect to the app. So if you make a request without a user being connected, you can use getCurrentUser to get the user from your callbacks.

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.

If you would like to customize the look, the default styles can be completely disabled by specifying disableStyles: true inside the init prop of the 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.