Skip to main content
Version: 2.0.4 | View on npm 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("user@example.com");
    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";