@sqds/grid-react

React hooks for Grid SDK - authentication, balances, and transactions.

Installation

npm install @sqds/grid-react

Quick Start

1. Setup Provider

import { GridProvider } from "@sqds/grid-react";

export default function App({ children }) {
  return <GridProvider>{children}</GridProvider>;
}

For Production: Generate an App ID in the Grid Dashboard, whitelist your domain, and pass it to the provider:

<GridProvider appId="your-app-id" environment="production">
  {children}
</GridProvider>

2. Email Authentication

import { useEmailAuth } from "@sqds/grid-react";

function Auth() {
  const { requestOtp, verifyOtp, logout, user, account, isAuthenticated } = useEmailAuth();

  const handleLogin = async () => {
    await requestOtp("[email protected]");
    const code = prompt("Enter OTP:");
    await verifyOtp(code);
  };

  if (isAuthenticated) {
    return (
      <div>
        <p>Signed in as {user?.data.email}</p>
        <p>Account: {account?.data.address}</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

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

3. Balances and Transfers

import { useBalance, useTransfer } from "@sqds/grid-react";

function Wallet() {
  const { balance } = useBalance({ symbol: "USDC" });
  const { transfer, isLoading, signature } = useTransfer();

  const handleSend = async () => {
    await transfer({ to: "recipient_address", amount: "1000000", currency: "usdc" });
  };

  return (
    <div>
      <p>{balance?.amountDecimal || "0"} USDC</p>
      <button onClick={handleSend} disabled={isLoading}>
        Send 1 USDC
      </button>
      {signature && <p>Transaction: {signature}</p>}
    </div>
  );
}

Available Hooks

• useEmailAuth() - Email + OTP authentication with session management
• usePasskeyAuth() - WebAuthn passkey authentication
• useAccount() - Real-time account state
• useBalance(options) - Fetch single token balance
• useBalances(options) - Fetch all balances with pagination
• useTransfer() - Send funds
• useTransfers(options) - Fetch transfer history with filtering
• useGrid() - Access Grid SDK client directly

TypeScript

import type { EmailAuthState, PasskeyAuthState, UseBalanceResult } from "@sqds/grid-react";