Skip to main content

OneForexCapitalSplit

OneForexCapitalSplit is a React Native component that visualizes how a deposit is split between active trading capital and the three liquidity pool reserves using the FOREX_CAPITAL_SPLIT model.

React Native Only

OneForexCapitalSplit is exported from @one_deploy/sdk/react-native. It is not available on web.

Quick Start​

import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

function DepositPreview() {
  return (
    <OneForexCapitalSplit
      amount={10000}
      onAllocationCalculated={(alloc) => {
        console.log('Trading:', alloc.tradingCapital);
        console.log('Reserves:', alloc.totalReserves);
      }}
    />
  );
}

OneForexCapitalSplitProps​

import type { OneForexCapitalSplitProps } from '@one_deploy/sdk';

interface OneForexCapitalSplitProps {
  /** The deposit amount to visualize (in USDC). */
  amount: number;

  /** Callback fired after the allocation is computed. */
  onAllocationCalculated?: (allocation: PoolAllocations) => void;

  /** Whether to show the detailed pool breakdown. Defaults to true. */
  showPoolBreakdown?: boolean;

  /** Whether to show the percentage labels on the bar chart. Defaults to true. */
  showPercentages?: boolean;

  /** Whether to animate transitions when the amount changes. Defaults to true. */
  animated?: boolean;

  /** Currency symbol to display. Defaults to "$". */
  currencySymbol?: string;

  /** Number format locale. Defaults to "en-US". */
  locale?: string;

  /** Visual theme variant. */
  theme?: 'dark' | 'light';

  /** Custom styles applied to the container. */
  style?: import('react-native').ViewStyle;

  /** Custom color for the trading capital segment. */
  tradingColor?: string;

  /** Custom color for the clearing pool segment. */
  clearingColor?: string;

  /** Custom color for the hedging pool segment. */
  hedgingColor?: string;

  /** Custom color for the insurance pool segment. */
  insuranceColor?: string;

  /** Test ID for testing frameworks. */
  testID?: string;
}

Props Reference​

PropTypeDefaultDescription
amountnumberRequiredDeposit amount in USDC to visualize.
onAllocationCalculated(allocation: PoolAllocations) => voidundefinedCallback with computed allocation breakdown.
showPoolBreakdownbooleantrueShow individual pool amounts below the bar.
showPercentagesbooleantrueShow percentage labels on the visual bar.
animatedbooleantrueAnimate bar transitions on amount change.
currencySymbolstring"$"Currency symbol for formatting.
localestring"en-US"Locale for number formatting.
theme'dark' | 'light''dark'Visual theme.
styleViewStyleundefinedCustom container styles.
tradingColorstring"#4488ff"Color for the trading capital segment.
clearingColorstring"#44cc88"Color for the clearing pool segment.
hedgingColorstring"#ffaa44"Color for the hedging pool segment.
insuranceColorstring"#cc4488"Color for the insurance pool segment.
testIDstringundefinedTest ID for testing frameworks.

The PoolAllocations Type​

The onAllocationCalculated callback receives a PoolAllocations object:

interface PoolAllocations {
  tradingCapital: number;
  clearingPool: number;
  hedgingPool: number;
  insurancePool: number;
  totalReserves: number;
  totalDeposit: number;
}

Usage Examples​

Default Visualization​

import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

function DefaultSplit() {
  return (
    <View style={{ padding: 16 }}>
      <OneForexCapitalSplit amount={5000} />
    </View>
  );
}

With Allocation Callback​

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';
import type { PoolAllocations } from '@one_deploy/sdk';

function InteractiveSplit() {
  const [amount, setAmount] = useState('10000');
  const [alloc, setAlloc] = useState<PoolAllocations | null>(null);

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={amount}
        onChangeText={setAmount}
        placeholder="Enter deposit amount"
        keyboardType="numeric"
        style={{
          backgroundColor: '#1a1a2e',
          color: '#fff',
          padding: 12,
          borderRadius: 8,
          marginBottom: 16,
        }}
      />

      <OneForexCapitalSplit
        amount={parseFloat(amount) || 0}
        onAllocationCalculated={setAlloc}
        animated={true}
      />

      {alloc && (
        <View style={{ marginTop: 16 }}>
          <Text style={{ color: '#aaa', fontSize: 12 }}>
            Trading: ${alloc.tradingCapital.toLocaleString()} |
            Reserves: ${alloc.totalReserves.toLocaleString()}
          </Text>
        </View>
      )}
    </View>
  );
}

Compact -- No Breakdown​

import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

function CompactSplit({ amount }: { amount: number }) {
  return (
    <OneForexCapitalSplit
      amount={amount}
      showPoolBreakdown={false}
      showPercentages={true}
      style={{ height: 60 }}
    />
  );
}

Custom Colors​

import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

function BrandedSplit({ amount }: { amount: number }) {
  return (
    <OneForexCapitalSplit
      amount={amount}
      tradingColor="#6366f1"
      clearingColor="#22d3ee"
      hedgingColor="#f59e0b"
      insuranceColor="#ef4444"
      theme="dark"
      style={{
        backgroundColor: '#0f172a',
        borderRadius: 16,
        padding: 20,
      }}
    />
  );
}

Light Theme​

import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

function LightSplit({ amount }: { amount: number }) {
  return (
    <OneForexCapitalSplit
      amount={amount}
      theme="light"
      style={{
        backgroundColor: '#ffffff',
        borderRadius: 12,
        padding: 16,
        shadowColor: '#000',
        shadowOpacity: 0.06,
        shadowRadius: 8,
        elevation: 2,
      }}
    />
  );
}

In a Deposit Confirmation Flow​

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { OneForexCapitalSplit } from '@one_deploy/sdk/react-native';

interface DepositConfirmProps {
  amount: number;
  currencyPair: string;
  onConfirm: () => void;
  onCancel: () => void;
}

function DepositConfirmation({ amount, currencyPair, onConfirm, onCancel }: DepositConfirmProps) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Confirm Deposit</Text>
      <Text style={styles.summary}>
        ${amount.toLocaleString()} USDC into {currencyPair}
      </Text>

      <OneForexCapitalSplit
        amount={amount}
        showPoolBreakdown={true}
        showPercentages={true}
        animated={false}
        style={{ marginVertical: 20 }}
      />

      <View style={styles.actions}>
        <TouchableOpacity onPress={onCancel} style={styles.cancelBtn}>
          <Text style={styles.cancelText}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={onConfirm} style={styles.confirmBtn}>
          <Text style={styles.confirmText}>Confirm Deposit</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20, backgroundColor: '#0d0d1a', borderRadius: 16 },
  header: { fontSize: 18, fontWeight: '700', color: '#fff' },
  summary: { fontSize: 14, color: '#aaa', marginTop: 4 },
  actions: { flexDirection: 'row', gap: 12, marginTop: 16 },
  cancelBtn: { flex: 1, padding: 14, borderRadius: 8, borderWidth: 1, borderColor: '#444', alignItems: 'center' },
  cancelText: { color: '#aaa', fontWeight: '600' },
  confirmBtn: { flex: 1, padding: 14, borderRadius: 8, backgroundColor: '#4488ff', alignItems: 'center' },
  confirmText: { color: '#fff', fontWeight: '600' },
});

Next Steps​