OneForexPoolCard

OneForexPoolCard is a React Native component that renders a card displaying key statistics for a single forex liquidity pool -- total value locked (TVL), annual percentage yield (APY), and utilization rate.

React Native Only

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

Quick Start

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

Props Reference

Prop	Type	Default	Description
pool	ForexPool	Required	Pool data object from useForexPools.
onPress	(pool: ForexPool) => void	undefined	Callback when the card is tapped.
showUtilization	boolean	true	Show the utilization progress bar.
showApy	boolean	true	Show the APY metric.
showTvl	boolean	true	Show the TVL metric.
tvlFormat	'full' | 'abbreviated'	'abbreviated'	'full' = $2,500,000, 'abbreviated' = $2.5M.
apyDecimals	number	2	Decimal places for APY percentage display.
theme	'dark' | 'light'	'dark'	Visual theme.
style	ViewStyle	undefined	Custom container styles.
titleStyle	TextStyle	undefined	Custom title text styles.
valueStyle	TextStyle	undefined	Custom metric value styles.
labelStyle	TextStyle	undefined	Custom metric label styles.
testID	string	undefined	Test ID for testing frameworks.

Usage Examples

Default Appearance

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

With Navigation on Press

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-Only Card

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

Custom Styled Card

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

Light Theme

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

Next Steps

• Pool System -- understand the 3-pool architecture.
• Pool Metrics -- fetch the data that powers these cards.
• OneForexCapitalSplit -- visualize capital allocation.