Skip to main content
The Crypto model defines the data structures used throughout the application for representing cryptocurrency data from the CoinLore API.

​
CryptoApiResponse Interface

The CryptoApiResponse interface represents the raw data structure returned by the CoinLore API for each cryptocurrency.
src/models/Crypto.ts
export interface CryptoApiResponse {
  id: string;
  symbol: string;
  name: string;
  nameid: string;
  rank: number;
  price_usd: string;
  percent_change_24h: string;
  percent_change_1h: string;
  percent_change_7d: string;
  price_btc: string;
  market_cap_usd: string;
  volume24: number;
  volume24a: number;
  csupply: string;
  tsupply: string;
  msupply: string;
}

​
Fields

​
id
string
Unique identifier for the cryptocurrency
​
symbol
string
Trading symbol (e.g., “BTC”, “ETH”, “ADA”)
​
name
string
Full name of the cryptocurrency (e.g., “Bitcoin”, “Ethereum”)
​
nameid
string
URL-safe name identifier used for routing
​
rank
number
Market cap ranking position (1 for Bitcoin, 2 for Ethereum, etc.)
​
price_usd
string
Current price in US dollars (stored as string for precision)
​
percent_change_24h
string
Percentage price change over the last 24 hours
​
percent_change_1h
string
Percentage price change over the last hour
​
percent_change_7d
string
Percentage price change over the last 7 days
​
price_btc
string
Price expressed in Bitcoin (BTC)
​
market_cap_usd
string
Total market capitalization in US dollars
​
volume24
number
Trading volume over the last 24 hours
​
volume24a
number
Adjusted trading volume over the last 24 hours
​
csupply
string
Circulating supply of the cryptocurrency
​
tsupply
string
Total supply of the cryptocurrency
​
msupply
string
Maximum supply of the cryptocurrency

​
Crypto Class

The Crypto class provides an object-oriented wrapper around cryptocurrency data with additional utility methods.
src/models/Crypto.ts
export class Crypto {
  constructor(
    public id: string,
    public name: string,
    public rank: number,
    public symbol: string,
    public price_usd: string,
    public percent_change_24h: string,
  ) {}

  get formattedPrice(): string {
    return `$${parseFloat(this.price_usd).toFixed(2)}`;
  }
}

​
Constructor Parameters

​
id
string
required
Unique identifier for the cryptocurrency
​
name
string
required
Full name of the cryptocurrency
​
rank
number
required
Market cap ranking position
​
symbol
string
required
Trading symbol
​
price_usd
string
required
Current price in US dollars
​
percent_change_24h
string
required
24-hour percentage price change

​
Methods

​
formattedPrice
string
Getter that returns the price formatted as a currency string with 2 decimal places and a dollar sign prefix.Example: "$45678.90"

​
Usage Examples

​
Using CryptoApiResponse

The raw API response is typically used in services and hooks:
src/hooks/useCryptoData.ts
const [data, setData] = useState<CryptoApiResponse[]>([]);

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('https://api.coinlore.net/api/tickers/');
    const json = await res.json();
    setData(json.data);
  };
  fetchData();
}, []);

​
Using Crypto Class

The Crypto class is instantiated when transforming API data:
src/hooks/useCryptoData.ts
const cryptos = json.data.map(
  (item: any) =>
    new Crypto(
      item.id,
      item.name,
      item.rank,
      item.symbol,
      item.price_usd,
      item.percent_change_24h
    )
);

​
Accessing formattedPrice

const crypto = new Crypto('90', 'Bitcoin', 1, 'BTC', '45678.90', '2.5');
console.log(crypto.formattedPrice); // "$45678.90"

​
Component Usage

src/components/CryptoCard.tsx
interface Props {
  crypto: CryptoApiResponse;
}

const CryptoCard = ({ crypto }: Props) => {
  const price = parseFloat(crypto.price_usd || '0');
  const change = parseFloat(crypto.percent_change_24h || '0');
  
  return (
    <View>
      <Text>{crypto.name} ({crypto.symbol})</Text>
      <Text>#{crypto.rank}</Text>
      <Text>${price.toFixed(2)}</Text>
      <Text>{change.toFixed(2)}%</Text>
    </View>
  );
};

​
Type Safety

All string-based numeric fields (price_usd, percent_change_24h, etc.) must be parsed to numbers before performing calculations. Always use parseFloat() and provide default values to handle edge cases.
// ✅ Good: Safe parsing with default
const price = parseFloat(crypto.price_usd || '0');

// ❌ Bad: Direct usage without parsing
const price = crypto.price_usd; // Type error

Crypto Service

API functions for fetching cryptocurrency data

useCryptoData Hook

React hook for managing crypto data state

Build docs developers (and LLMs) love

Get started for freeTalk to us