OneForexPoolCard

OneForexPoolCard 是一个 React Native 组件，用于渲染一张卡片，显示单个外汇流动性池的关键统计信息 -- 总锁仓量 (TVL)、年化收益率 (APY) 和利用率。

仅限 React Native

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

快速入门

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

function PoolCards() {
  const { pools } = useForexPools();

  return (
    <>
      {pools.map((pool) => (
        <OneForexPoolCard
          key={pool.id}
          pool={pool}
          onPress={() => console.log('Selected pool:', pool.id)}
        />
      ))}
    </>
  );
}

OneForexPoolCardProps

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

interface OneForexPoolCardProps {
  /** The forex pool data to display. */
  pool: ForexPool;

  /** Callback fired when the card is pressed. */
  onPress?: (pool: ForexPool) => void;

  /** Whether to show the utilization progress bar. Defaults to true. */
  showUtilization?: boolean;

  /** Whether to show the APY value. Defaults to true. */
  showApy?: boolean;

  /** Whether to show the TVL value. Defaults to true. */
  showTvl?: boolean;

  /** Format for displaying the TVL value. */
  tvlFormat?: 'full' | 'abbreviated';

  /** Number of decimal places for APY display. Defaults to 2. */
  apyDecimals?: number;

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

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

  /** Custom styles applied to the card title. */
  titleStyle?: import('react-native').TextStyle;

  /** Custom styles applied to metric values. */
  valueStyle?: import('react-native').TextStyle;

  /** Custom styles applied to metric labels. */
  labelStyle?: import('react-native').TextStyle;

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

属性参考

属性	类型	默认值	说明
pool	ForexPool	必填	来自 useForexPools 的池数据对象。
onPress	(pool: ForexPool) => void	undefined	卡片被点击时的回调。
showUtilization	boolean	true	显示利用率进度条。
showApy	boolean	true	显示 APY 指标。
showTvl	boolean	true	显示 TVL 指标。
tvlFormat	'full' | 'abbreviated'	'abbreviated'	'full' = $2,500,000，'abbreviated' = $2.5M。
apyDecimals	number	2	APY 百分比显示的小数位数。
theme	'dark' | 'light'	'dark'	视觉主题。
style	ViewStyle	undefined	自定义容器样式。
titleStyle	TextStyle	undefined	自定义标题文本样式。
valueStyle	TextStyle	undefined	自定义指标值样式。
labelStyle	TextStyle	undefined	自定义指标标签样式。
testID	string	undefined	用于测试框架的测试 ID。

使用示例

默认外观

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

function DefaultPoolCards() {
  const { pools } = useForexPools();

  return (
    <View style={{ padding: 16, gap: 12 }}>
      {pools.map((pool) => (
        <OneForexPoolCard key={pool.id} pool={pool} />
      ))}
    </View>
  );
}

带导航的点击事件

import { OneForexPoolCard } from '@one_deploy/sdk/react-native';
import { useForexPools } from '@one_deploy/sdk';
import { useNavigation } from '@react-navigation/native';

function PoolListScreen() {
  const { pools, isLoading } = useForexPools();
  const navigation = useNavigation();

  if (isLoading) return <ActivityIndicator />;

  return (
    <ScrollView style={{ padding: 16 }}>
      {pools.map((pool) => (
        <OneForexPoolCard
          key={pool.id}
          pool={pool}
          tvlFormat="full"
          apyDecimals={3}
          onPress={(p) => {
            navigation.navigate('PoolDetail', { poolId: p.id });
          }}
          style={{ marginBottom: 12 }}
        />
      ))}
    </ScrollView>
  );
}

仅显示 TVL 的卡片

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

function TvlOnlyCard({ pool }: { pool: ForexPool }) {
  return (
    <OneForexPoolCard
      pool={pool}
      showTvl={true}
      showApy={false}
      showUtilization={false}
      tvlFormat="full"
    />
  );
}

自定义样式卡片

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

function CustomStyledCard({ pool }: { pool: ForexPool }) {
  return (
    <OneForexPoolCard
      pool={pool}
      theme="dark"
      style={{
        backgroundColor: '#1e1e3a',
        borderRadius: 16,
        borderWidth: 1,
        borderColor: '#3a3a6e',
        padding: 20,
      }}
      titleStyle={{
        fontSize: 18,
        color: '#ffffff',
      }}
      valueStyle={{
        fontSize: 22,
        fontWeight: '800',
        color: '#44cc88',
      }}
      labelStyle={{
        fontSize: 11,
        color: '#8888bb',
        textTransform: 'uppercase',
        letterSpacing: 1,
      }}
    />
  );
}

浅色主题

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

function LightPoolCard({ pool }: { pool: ForexPool }) {
  return (
    <OneForexPoolCard
      pool={pool}
      theme="light"
      style={{
        backgroundColor: '#ffffff',
        shadowColor: '#000',
        shadowOpacity: 0.08,
        shadowRadius: 12,
        elevation: 3,
      }}
    />
  );
}

下一步

• 池系统 -- 了解三池架构。
• 池指标 -- 获取为这些卡片提供数据的指标。
• OneForexCapitalSplit -- 可视化资金分配。