Skip to content

Getting started with JavaScript/TypeScript

The @happy.tech/core package provides the base functionality, to be used in isolation or to support a framework specific package such as @happy.tech/react or @happy.tech/vue.

Install

Using a package manager

npm
npm install @happy.tech/core

Setup

Wallet component

Once you have installed the SDK, you will need to register the wallet component on the page. The easiest way to acomplish this is by using our provided register method.

import { loadHappyWallet } from "@happy.tech/core"
 
loadHappyWallet()

Usage

Web3 Integration

Next you will want to set up your web3 integration using the happyProvider. The HappyProvider is an EIP-1193 EVM provider. This means you can use it to initialize any standard web3 library as you normally would. The most common examples are below, but it should be fully compatible with most libraries.

Viem
import { createHappyPublicClient, createHappyWalletClient } from "@happy.tech/core"
 
const publicClient = createHappyPublicClient() 
const walletClient = createHappyWalletClient()

Getting the active user

User changes, such as when a user logs in or out, can be subscribed to the onUserUpdate listener. If the user is undefined, then they are not currently logged in have or have logged out. If the user is a HappyUser then it will be populated with all their shared info, such as wallet address and name.

import { onUserUpdate } from "@happy.tech/core"
 
onUserUpdate((user) => {
    console.log("HappyChain User:", user)
})

Alternatively, the current user is always exposed via the getCurrentUser call.

import { getCurrentUser } from "@happy.tech/core"
 
const user = getCurrentUser()
console.log("HappyChain User:", user)

onUserUpdate only fires whenever the user changes, so if you want to have something depend on the current user, you should write your code as follows:

import { type HappyUser, getCurrentUser, onUserUpdate } from "@happy.tech/core"
 
const doSomethingWithUser = (user?: HappyUser) => {
    console.log("HappyChain User:", user)
}
 
doSomethingWithUser(getCurrentUser())
onUserUpdate(doSomethingWithUser)

Interacting with the wallet

The SDK makes the following functions available for wallet interaction:

  • connect() — Prompts the user to connect the wallet to the app.
    • This will also prompt the user to log in to the wallet if he hasn't already.
  • disconnect() — Disconnects the wallet from the app.
    • The user will stay logged in.
  • openWallet() — Pops the wallet open.
  • loadAbi(abi: Abi) — Prompts the user to approve the ABI, which is then used to decode transactions in approval popups.

Session Keys

You can call requestSessionKey(contract: Address) to prompt the user to approve a session key authorizing the app to transact with the selected contract on the user's behalf.

The session key is persisted between session, and further calls to the function simply return without prompting the user, so it is safe to always call this function before other actions.

import {
    createHappyChainWagmiConfig,
    happyChainSepolia,
    requestSessionKey
} from "@happy.tech/core"
import { writeContract } from "@wagmi/core"
import { parseAbi, type Hash } from "viem"
 
const config = createHappyChainWagmiConfig(happyChainSepolia)
 
async function noApproveTx(): Promise<Hash> {
 
    await requestSessionKey("0xeAe5825cd598FD74ffa199b6849b2286eb8405Ca")
 
    return await writeContract(config, {
        address: "0xeAe5825cd598FD74ffa199b6849b2286eb8405Ca",
        abi: parseAbi(["function increment()"]),
        functionName: "increment",
    })
}

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 when you call loadHappyWallet.

To display a connection button, you can use the happychain-connect-button Web Component. The button turns into a badge displaying the username and avatar after connecting.

If you would like to customize the look, the default styles can be completely disabled by passing the disable-styles property to the component, and setting overrideBadgeStyles to true in loadHappyWallet.

Default Style
<happychain-connect-button></happychain-connect-button>

Chain Information

The package exports the HappyChain chain information in Viem format. This includes the chain ID, RPC & explorer URLs, addresses of key contracts, and more.

twoslash
import { happyChainSepolia } from "@happy.tech/core"
 
console.log(`HappyChain Sepolia's chain ID is ${happyChainSepolia.id}`)