@smartforge/sdk-react

SmartForge React SDK - Web3 Backend SDK for React applications.

Installation

npm install @smartforge/sdk-react
# or
pnpm add @smartforge/sdk-react

Quick Start

Setup Provider

import { SmartForgeProvider } from "@smartforge/sdk-react";

function App() {
  return (
    <SmartForgeProvider
      config={{
        apiKey: "sf_your_api_key",
        apiUrl: "https://api.smartforge.com/api",
      }}
    >
      <YourApp />
    </SmartForgeProvider>
  );
}

Use SDK Hook

import { useSmartForge } from "@smartforge/sdk-react";

function MyComponent() {
  const { client, isAuthenticated, signIn, signOut } = useSmartForge();

  // Sign in with wallet
  const handleSignIn = async () => {
    const nonce = await client?.auth.getNonce();
    // Get signature from wallet
    await signIn(message, signature);
  };

  // Read contract
  const balance = await client?.contract("MyNFT").read("balanceOf", [address]);

  // Write transaction (gasless)
  await client
    ?.contract("MyNFT")
    .write("mint", [to, amount], { gasless: true });
}

API

SmartForgeProvider

React context provider for SmartForge SDK.

Props:

• config.apiKey - Your SmartForge API key
• config.apiUrl - API endpoint URL (optional)
• config.token - Initial auth token (optional)

useSmartForge()

React hook to access SmartForge client and auth state.

Returns:

• client - SmartForge client instance
• isAuthenticated - Authentication status
• signIn(message, signature) - Sign in with SIWE
• signOut() - Sign out
• initialize(config) - Initialize client

Client Methods

Authentication

// Get nonce for SIWE
const nonce = await client.auth.getNonce();

// Sign in with wallet
const result = await client.auth.signInWithWallet(message, signature);

// Verify token
const verification = await client.auth.verifyToken();

Query API (Supabase-like)

// Select data
const data = await client.from("table").select(["column1", "column2"]);

// Insert data
await client.from("table").insert({ column1: "value" });

// Update data
await client.from("table").update({ column1: "new value" });

// Delete data
await client.from("table").delete();

Contract Operations

// Read contract data
const balance = await client.contract("MyNFT").read("balanceOf", [address]);

// Write transaction
const result = await client.contract("MyNFT").write("mint", [to, amount]);

// Write with gasless
const result = await client
  .contract("MyNFT")
  .write("mint", [to, amount], { gasless: true });

// Get contract ABI
const abi = await client.contract("MyNFT").getABI();

Projects

// List projects
const projects = await client.projects.list();

// Get project
const project = await client.projects.get(projectId);

// Create project
const project = await client.projects.create("My Project");

Contracts Management

// List contracts
const contracts = await client.contracts.list(projectId);

// Get contract
const contract = await client.contracts.get(contractId);

// Create contract
const contract = await client.contracts.create({
  projectId: "project-id",
  name: "MyContract",
  templateId: "erc20", // optional
  sourceCode: "...", // optional if using template
});

// Compile contract
const result = await client.contracts.compile(contractId);

Standalone Client (Non-React)

import { createClient } from "@smartforge/sdk-react";

const client = createClient({
  apiKey: "sf_your_api_key",
  apiUrl: "https://api.smartforge.com/api",
});

// Use client methods
const projects = await client.projects.list();

Examples

Complete Authentication Flow

function LoginButton() {
  const { client, signIn } = useSmartForge();

  const handleLogin = async () => {
    // 1. Get nonce
    const nonce = await client?.auth.getNonce();

    // 2. Generate SIWE message (use your SIWE library)
    const message = generateSIWEMessage({ nonce, ... });

    // 3. Sign with wallet
    const signature = await wallet.signMessage(message);

    // 4. Sign in
    await signIn(message, signature);
  };

  return <button onClick={handleLogin}>Sign In</button>;
}

Contract Interaction

function MintButton() {
  const { client } = useSmartForge();

  const handleMint = async () => {
    const result = await client
      ?.contract("MyNFT")
      .write("mint", [address, tokenId], { gasless: true });
    console.log("Minted:", result);
  };

  return <button onClick={handleMint}>Mint NFT</button>;
}

License

ISC