perfect — ini README.md untuk @gas-kit/react, FULL, English, plain Markdown, SATU BLOK, lengkap dengan examples, dan langsung bisa copas.

👇👇👇

@gas-kit/react

React bindings for Gas Kit — gas abstraction SDK on Avalanche.

This package provides React primitives (Provider + Hooks) built on top of @gas-kit/core, making gasless transactions easy to use inside React apps.

Features

• React Context provider
• Simple hooks API
• Built on top of @gas-kit/core
• Ethers v6 compatible
• No relayers, no backend
• Works with MetaMask & EIP-1193 wallets

Installation

npm install @gas-kit/react @gas-kit/core ethers```


---

When Should You Use This?

Use @gas-kit/react if:

You are building a React / Next.js dApp

You want gasless UX

You want minimal setup

You don’t want to manage providers manually everywhere


If you are not using React, use @gas-kit/core directly.


---

Architecture

GasKitProvider | v React Context | v useGasKit / useSponsoredTx | v GasKitClient (@gas-kit/core) | v GasPaymaster (on-chain)


---

Quick Start

1. Wrap Your App with GasKitProvider

```bash
import { GasKitProvider } from "@gas-kit/react"

export function App() {
  return (
    <GasKitProvider
      paymaster="0xF1c1F0064B7E15aa0c2b9016d01388884eF45B83"
    >
      <YourApp />
    </GasKitProvider>
  )
} ```

Automatically detects window.ethereum

Internally creates an ethers BrowserProvider

Initializes GasKitClient



---

Hooks API

```bash
useGasKit()

Access the core client and basic helpers.

import { useGasKit } from "@gas-kit/react"

const {
  client,
  paymaster,
  estimateGas,
  executeSponsoredTx
} = useGasKit() ```

Returned values:

Name	Description

client	GasKitClient instance
paymaster	Paymaster contract address
estimateGas	Estimate sponsored gas
executeSponsoredTx	Execute gas-sponsored transaction



---

useSponsoredTx()

High-level helper hook for sponsored transactions.

import { useSponsoredTx } from "@gas-kit/react"

const { sendSponsoredTx } = useSponsoredTx()

Usage:
``` bash
await sendSponsoredTx({
  target: "0xTargetContract",
  data: "0x..."
})```


---

Example: Gasless Button Action

``` bash
 import { Interface } from "ethers"
import { useSponsoredTx } from "@gas-kit/react"

const iface = new Interface([
  "function mint(address to, uint256 amount)"
])

export function MintButton({ user }) {
  const { sendSponsoredTx } = useSponsoredTx()

  const mint = async () => {
    const data = iface.encodeFunctionData("mint", [
      user,
      1
    ])

    await sendSponsoredTx({
      target: "0xNFTContractAddress",
      data
    })
  }

  return <button onClick={mint}>Mint NFT (Gasless)</button>
}```

User:

Signs transaction

Pays zero gas

No AVAX required



---

Example: Estimate Sponsored Gas


```import { useGasKit } from "@gas-kit/react"

const { estimateGas } = useGasKit()

const gas = await estimateGas("0xUserAddress")

console.log("Sponsored gas:", gas.toString())```


---

Error Handling

If MetaMask or EIP-1193 provider is missing:

```const gasKit = useGasKit()

if (!gasKit) {
  return <div>Please install MetaMask</div>
}```

GasKitProvider returns null client if no wallet is detected.


---

Network Support

Avalanche Fuji (43113)

Avalanche C-Chain (mainnet ready)


Ensure the user wallet is connected to the correct network.


---

Design Philosophy

UX first

No backend

No relayers

Fully trustless

Minimal React API surface


Gas abstraction should feel invisible.


---

Relationship With @gas-kit/core

Package	Responsibility

@gas-kit/core	Low-level SDK
@gas-kit/react	React DX layer