I created my website with lovable.dev and I don’t know how to make it display the real-time cryptocurrency price because it’s currently hard-coded.
Any ideas?
Yes, for example, I’d like to use the Google console to find an API to provide real-time crypto rates and link it to lovable.dev, but I don’t see any in the Google console search.
Do you have any ideas?
And I’m asking it to use the CoinCap API, and it doesn’t work.
I changed it and specified the correct link with my API key and it still doesn’t work. 'https://api.coincap.io/v2' change to const API_BASE_URL = 'rest.coincap.io/v3/assets?apiKey=f1d4a2d19e0e8dd20000434b685176b2ee5ab7xxxxxxxxxxx';
Here’s the code coinCapServices.ts
// CoinCap API service for fetching cryptocurrency data
export interface CryptoAsset {
id: string;
rank: string;
symbol: string;
name: string;
priceUsd: string;
changePercent24Hr: string;
marketCapUsd: string;
volumeUsd24Hr: string;
}
export interface CryptoMarketData {
assets: CryptoAsset[];
loading: boolean;
error: string | null;
}
// Base URL for the CoinCap API
const API_BASE_URL = 'rest.coincap.io/v3/assets?apiKey=f1d4a2d19e0e8dd20000434b685176b2ee5ab7xxxxxxxxxxx';
// Function to fetch the top cryptocurrencies
export async function fetchTopCryptos(limit: number = 10): Promise<CryptoAsset[]> {
try {
const response = await fetch(`${API_BASE_URL}/assets?limit=${limit}`);
if (!response.ok) {
throw new Error('Failed to fetch crypto data');
}
const data = await response.json();
return data.data;
} catch (error) {
console.error('Error fetching crypto data:', error);
throw error;
}
}
// Function to fetch data for a specific cryptocurrency
export async function fetchCryptoDetails(id: string): Promise<CryptoAsset> {
try {
const response = await fetch(`${API_BASE_URL}/assets/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch data for ${id}`);
}
const data = await response.json();
return data.data;
} catch (error) {
console.error(`Error fetching data for ${id}:`, error);
throw error;
}
}
// Function to fetch historical data for a specific cryptocurrency
export async function fetchCryptoHistory(
id: string,
interval: string = 'd1',
start?: number,
end?: number
): Promise<any> {
try {
let url = `${API_BASE_URL}/assets/${id}/history?interval=${interval}`;
if (start) url += `&start=${start}`;
if (end) url += `&end=${end}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch history for ${id}`);
}
const data = await response.json();
return data.data;
} catch (error) {
console.error(`Error fetching history for ${id}:`, error);
throw error;
}
}
// Format price in EUR
export function formatPriceEUR(priceUsd: string): string {
const price = parseFloat(priceUsd);
return new Intl.NumberFormat('fr-BE', {
style: 'currency',
currency: 'EUR',
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(price * 0.92); // Approximate USD to EUR conversion
}
// Format large numbers with Belgian number formatting
export function formatLargeNumber(value: string): string {
const num = parseFloat(value);
return new Intl.NumberFormat('fr-BE').format(num);
}
// Format percentage change
export function formatPercentageChange(change: string): string {
const changeNum = parseFloat(change);
const formattedChange = changeNum.toFixed(2);
return changeNum >= 0 ? `+${formattedChange}%` : `${formattedChange}%`;
}
I don’t know how to do it because I’m building my website with the AI lovable.dev and it writes the code for me.
And I don’t see what I need to change. I just tested this line alone in Chrome and it works, but I don’t know how to implement it in the code.
So you had the AI write the code, didnt understand what it wrote, and then modified what it wrote yourself, and it broke.
Do… you maybe think you should ask the AI to make the change for you instead? Maybe it’s smart enough to understand why the URL has to be written as… yaknow… a proper url.
Have your web browser tool opened to see what is coming back from the server.
I get 403 Forbidden because I don’t have a real key, but yous should show a nice json files with 10 values.
Great, thank you, I did it like that and it works.
const API_KEY = 'f1d4a2d19e0e8dd20000434b685176b2ee5abXXXXXXX';
const API_BASE_URL = 'https://rest.coincap.io/v3/assets';
// Function to fetch the top cryptocurrencies
export async function fetchTopCryptos(limit: number = 10): Promise<CryptoAsset[]> {
try {
const response = await fetch(`${API_BASE_URL}?apiKey=${API_KEY}&limit=${limit}`);
if (!response.ok) {
throw new Error('Failed to fetch crypto data');
}
One trick you can do is create your own API, that will take data from some saved source. This source will be updated let said 5 times a day (do you own math here) from CoinCap free tier so you don’t hit the free limit.
in fact I did the update every 60 seconds and I am already above the free plan, I will change it to do an update according to my free plan of 2500 crédits.
