@sqds/grid-react-native

React Native hooks and components for Grid SDK - Build mobile wallet applications with authentication, balance queries, and transactions.

Features

• Authentication Hooks: useEmailAuth, usePasskeyAuth with built-in OTP and session management
• Account Management: useAccount for real-time account state
• Balance Queries: useBalance (single token) and useBalances (all tokens with pagination)
• Transfers: useTransfer (send funds) and useTransfers (fetch history with filtering)
• React Native Context: GridProvider for SDK client management
• TypeScript: Full type safety with TypeScript support
• AsyncStorage: Automatic session persistence using React Native AsyncStorage
• Cross-Platform: Works on iOS and Android

Installation

npm install @sqds/grid-react-native @sqds/grid @react-native-async-storage/async-storage

Additional Setup

This package requires @react-native-async-storage/async-storage for session persistence.

For iOS:

cd ios && pod install

Quick Start

1. Setup GridProvider

Wrap your app with GridProvider:

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

export default function App() {
  return (
    <GridProvider
      apiKey="your-api-key"
      environment="sandbox"
    >
      <YourApp />
    </GridProvider>
  );
}

2. Use Authentication

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

function LoginScreen() {
  const { requestOtp, verifyOtp, isLoading } = useEmailAuth();

  const handleLogin = async () => {
    await requestOtp('[email protected]');
    // User receives OTP via email
    await verifyOtp('123456');
  };

  return (
    <Button onPress={handleLogin} disabled={isLoading}>
      Login
    </Button>
  );
}

3. Query Balances

import { useBalances } from '@sqds/grid-react-native';

function BalancesScreen() {
  const { balances, isLoading } = useBalances();

  if (isLoading) return <ActivityIndicator />;

  return (
    <FlatList
      data={balances}
      renderItem={({ item }) => (
        <Text>{item.mint}: {item.balance}</Text>
      )}
    />
  );
}

Available Hooks

• useEmailAuth() - Email + OTP authentication
• usePasskeyAuth() - Passkey (biometric) authentication
• useAccount() - Get account information
• useBalance(mint) - Query single token balance
• useBalances() - Query all token balances
• useTransfer() - Send transactions
• useTransfers() - Fetch transaction history
• useGridClient() - Access the underlying Grid SDK client

Documentation

For complete documentation, visit docs.grid.squads.xyz

Related Packages

• @sqds/grid - Core SDK (platform-agnostic)
• @sqds/grid-react - React hooks for web applications

License

MIT