Frontend Integration

near-kit is designed to work seamlessly in browser environments. The logic for building transactions is identical to the server-side; the only difference is that signing is delegated to the user’s wallet via an Adapter.

New to React? Check out @near-kit/react for ready-to-use hooks that handle loading states, error handling, and integrate with React Query or SWR.

🚀 Live Demo

See near-kit running in a real React application using NEAR Connect.

Live App: guestbook.near.tools
Source Code: github.com/r-near/near-kit-guestbook-demo

The Adapter Pattern

You initialize the Near instance with a wallet object instead of a private key.

const near = new Near({
  network: "testnet",
  wallet: fromHotConnect(connector), // <--- The Adapter
})

Once initialized, you use near exactly as you would in a backend script. When you call .send(), the library automatically triggers the wallet’s popup for the user to approve the transaction.

NEAR Connect

NEAR Connect is the standard wallet connection library for the NEAR ecosystem.

Setup

import { NearConnector } from "@hot-labs/near-connect"
import { Near, fromHotConnect } from "near-kit"

// 1. Initialize Connector
const connector = new NearConnector({ network: "testnet" })

// 2. Listen for Sign In
connector.on("wallet:signIn", async (data) => {
  // 3. Create Near Instance
  const near = new Near({
    network: "testnet",
    wallet: fromHotConnect(connector),
  })

  console.log("Connected!")
})

// Trigger connection
connector.connect()

Global Contracts and Confirmation

The NEAR Connect adapter supports deployFromPublished and publishContract with wallets that support the corresponding global-contract actions. For example, attach published code and initialize it in one wallet approval:

const wallet = await connector.wallet()
const [{ accountId }] = await wallet.getAccounts()

const result = await near
  .transaction(accountId)
  .deployFromPublished({ accountId: "publisher.testnet" })
  .functionCall(accountId, "init", {}, { gas: "100 Tgas" })
  .send({ waitUntil: "FINAL" })

Use an account intended for the new contract; attaching code changes that account’s contract. References can also use { codeHash: "<base58 hash>" }. See Global Contracts for publishing and reference options. Wallets control when their signing request returns. If the outcome has not reached the requested waitUntil (or configured defaultWaitUntil), near-kit queries its RPC for confirmation using the submitted transaction hash. This does not request another signature or resubmit the transaction. The same behavior applies to near.call() and near.send(). Wallet connection and optional function-call key permission requests are configured through NEAR Connect. A restricted function-call key cannot authorize global-contract deployment; the wallet must approve that action using an account with full-access authority.

Best Practice: React Context

For a more streamlined React experience with built-in hooks, see the @near-kit/react package which provides NearProvider, useView, useCall, and more.

In a React application, you should create a WalletContext to store the Near instance so it can be accessed by any component. Here is a simplified pattern from the Guestbook Demo:

// WalletProvider.tsx
import { createContext, useContext, useEffect, useState } from "react"
import { Near, fromHotConnect } from "near-kit"
import { NearConnector } from "@hot-labs/near-connect"

const WalletContext = createContext<{ near: Near | null }>(null)

export const WalletProvider = ({ children }) => {
  const [near, setNear] = useState<Near | null>(null)

  useEffect(() => {
    const connector = new NearConnector({ network: "testnet" })

    connector.on("wallet:signIn", async () => {
      setNear(
        new Near({
          network: "testnet",
          wallet: fromHotConnect(connector),
        })
      )
    })

    connector.connect()
  }, [])

  return (
    <WalletContext.Provider value={{ near }}>{children}</WalletContext.Provider>
  )
}

// Use it in any component!
export const useWallet = () => useContext(WalletContext)

Getting Started

Essentials

React

Building dApps

Advanced

Reference

Frontend Integration

🚀 Live Demo

The Adapter Pattern

NEAR Connect

Setup

Global Contracts and Confirmation

Best Practice: React Context

​🚀 Live Demo

​The Adapter Pattern

​NEAR Connect

​Setup

​Global Contracts and Confirmation

​Best Practice: React Context

🚀 Live Demo

The Adapter Pattern

NEAR Connect

Setup

Global Contracts and Confirmation

Best Practice: React Context