OneForexCapitalSplit

OneForexCapitalSplit 是一个 React Native 组件，使用 FOREX_CAPITAL_SPLIT 模型可视化存款在活跃交易资金和三个流动性池储备之间的分配方式。

仅限 React Native

OneForexCapitalSplit 从 @one_deploy/sdk/react-native 导出。不适用于 Web 平台。

快速入门

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

属性参考

属性	类型	默认值	说明
amount	number	必填	要可视化的存款金额（以 USDC 计）。
onAllocationCalculated	(allocation: PoolAllocations) => void	undefined	分配计算完成后的回调。
showPoolBreakdown	boolean	true	在条形图下方显示各池的详细金额。
showPercentages	boolean	true	在可视化条形图上显示百分比标签。
animated	boolean	true	当金额变化时，为条形图设置过渡动画。
currencySymbol	string	"$"	用于格式化的货币符号。
locale	string	"en-US"	数字格式化的区域设置。
theme	'dark' | 'light'	'dark'	视觉主题。
style	ViewStyle	undefined	自定义容器样式。
tradingColor	string	"#4488ff"	交易资金段的颜色。
clearingColor	string	"#44cc88"	清算池段的颜色。
hedgingColor	string	"#ffaa44"	对冲池段的颜色。
insuranceColor	string	"#cc4488"	保险池段的颜色。
testID	string	undefined	用于测试框架的测试 ID。

PoolAllocations 类型

onAllocationCalculated 回调接收一个 PoolAllocations 对象：

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

使用示例

默认可视化

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

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

带分配回调

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

紧凑模式 -- 无详细分解

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

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

自定义颜色

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

浅色主题

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

在存款确认流程中使用

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

下一步

• 资金分配 -- 50/50 分配背后的逻辑。
• OneForexPoolCard -- 显示单个池指标。
• 创建投资 -- 在投资流程中使用分配。