React SDK Quickstart

npm install @sqds/grid-react

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

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

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

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>;
}

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>
  );
}

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