@unifold/connect-react-native

React Native/Expo SDK for crypto deposits and onramp with Unifold.

Installation

# npm
npm install @unifold/connect-react-native react-native-svg react-native-webview

# yarn
yarn add @unifold/connect-react-native react-native-svg react-native-webview

# Expo (recommended)
npx expo install @unifold/connect-react-native react-native-svg react-native-webview

iOS (bare React Native only)

cd ios && pod install

Quick Start

1. Wrap your app with UnifoldProvider

import { UnifoldProvider } from '@unifold/connect-react-native';

export default function App() {
  return (
    <UnifoldProvider
      publishableKey="pk_live_your_key"
      config={{
        appearance: 'dark', // 'light' | 'dark' | 'auto'
      }}
    >
      <YourApp />
    </UnifoldProvider>
  );
}

2. Launch the deposit flow

import { useUnifold } from '@unifold/connect-react-native';
import { Button, View } from 'react-native';

function DepositScreen() {
  const { beginDeposit } = useUnifold();

  const handleDeposit = async () => {
    try {
      const result = await beginDeposit({
        externalUserId: 'user_123',
        destinationChainType: 'ethereum',
        destinationChainId: '137', // Polygon
        destinationTokenAddress: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
        destinationTokenSymbol: 'USDC',
        recipientAddress: '0x...user_wallet_address',
        onSuccess: (data) => {
          console.log('Deposit successful:', data);
        },
        onError: (error) => {
          console.error('Deposit error:', error);
        },
      });
      
      console.log('Deposit completed:', result);
    } catch (error) {
      // User cancelled the deposit flow
      console.log('Deposit cancelled');
    }
  };

  return (
    <View>
      <Button title="Deposit Crypto" onPress={handleDeposit} />
    </View>
  );
}

API Reference

UnifoldProvider

| Prop | Type | Required | Description | |------|------|----------|-------------| | publishableKey | string | Yes | Your Unifold publishable key | | config.appearance | 'light' \| 'dark' \| 'auto' | No | Theme mode (default: 'dark') | | config.modalTitle | string | No | Custom modal title | | config.hideDepositTracker | boolean | No | Hide the deposit tracker button |

useUnifold Hook

const { beginDeposit, closeDeposit, publishableKey } = useUnifold();

| Method | Type | Description | |--------|------|-------------| | beginDeposit | (config: DepositConfig) => Promise<DepositResult> | Opens the deposit modal and returns a promise | | closeDeposit | () => void | Programmatically close the deposit modal | | publishableKey | string | The configured publishable key |

DepositConfig

| Option | Type | Required | Description | |--------|------|----------|-------------| | externalUserId | string | Yes | Your user's unique identifier | | destinationChainType | 'ethereum' \| 'solana' \| 'bitcoin' | No | Target blockchain type | | destinationChainId | string | No | Target chain ID (e.g., '137' for Polygon) | | destinationTokenAddress | string | No | Target token contract address | | destinationTokenSymbol | string | No | Target token symbol (e.g., 'USDC') | | recipientAddress | string | No | Wallet address to receive funds | | onSuccess | (data: DepositResult) => void | No | Called when deposit succeeds | | onError | (error: DepositError) => void | No | Called when an error occurs |

DepositResult

interface DepositResult {
  message: string;
  transaction?: unknown;
  executionId?: string;
}

DepositError

interface DepositError {
  message: string;
  error?: unknown;
  code?: string;  // e.g., 'DEPOSIT_CANCELLED' when user closes modal
}

TypeScript

Full TypeScript support is included. Import types as needed:

import type { 
  DepositConfig, 
  DepositResult, 
  DepositError,
  ThemeMode,
  UnifoldProviderProps,
} from '@unifold/connect-react-native';

Requirements

| Dependency | Version | |------------|---------| | React Native | >= 0.72.0 | | Expo (optional) | >= 49.0.0 | | react-native-svg | >= 13.0.0 | | react-native-webview | >= 11.0.0 |

Support

• Documentation: https://docs.unifold.io
• Issues: GitHub Issues

License

MIT © Unifold