Skip to main content
The converter page lets you enter an amount, choose a source asset, and instantly see the equivalent value in any target asset. Rates are fetched from CoinGecko and cached for 5 minutes.

​
How conversion works

The core calculation is a single formula applied in calculoCrypto:
converterCrypto.jsx
function calculoCrypto({ input, precioFrom, cantidadTo }) {
  return (input * precioFrom) / cantidadTo;
}
  • input — the amount the user typed in the number field
  • precioFrom — the USD price of the source asset (e.g. bitcoin.usd)
  • cantidadTo — the USD price of the target asset (e.g. usd.usd = 1)
For example, converting 2 BTC to ETH when BTC is 60,000andETHis60,000 and ETH is 3,000: 
(2 × 60000) / 3000 = 40 ETH

​
State variables

VariableInitial valueDescription
input1The numeric amount entered by the user
priceFromresponse.bitcoin.usdUSD price of the selected source asset
amountOfresponse.usd.usdUSD price of the selected target asset
loadingtrueControls the loading spinner visibility
convertApi{}Full price map returned by keepPrice()

​
Supported assets

Prices are fetched for the following assets from the CoinGecko /simple/price endpoint:

Fiat

USD

Cryptocurrencies

Bitcoin, Ethereum, Solana, Cardano, Tether, BNB (Binance Coin)
The full request URL is: 
GET https://api.coingecko.com/api/v3/simple/price
  ?ids=usd,bitcoin,ethereum,solana,cardano,tether,binancecoin
  &vs_currencies=usd
The response object keys (e.g. bitcoin, usd) are used directly to populate both dropdown menus, so the selects always stay in sync with what the API returns.

​
Data loading

Rates are loaded once on mount via keepPrice() from cache.js:
converterCrypto.jsx
useEffect(() => {
  async function loadPrices() {
    try {
      const response = await keepPrice();
      setConvertApi(response);
      setPriceFrom(response.bitcoin.usd);
      setAmountOf(response.usd.usd);
    } catch (error) {
      console.error("Error fetching price:", error);
    } finally {
      setLoading(false);
    }
  }

  loadPrices();
}, []);
The default selection is Bitcoin → USD when the component first renders.

​
Loading state

While rates are being fetched, a small animated spinner is shown in place of the converter form:
converterCrypto.jsx
{loading ? (
  <span className="inline-block h-4 w-4 animate-spin rounded-full border-2
    dark:border-cyan-300 border-gray-700 border-t-transparent" />
) : null}
Once loading is false the full converter UI is rendered.
keepPrice() caches exchange rates in localStorage for 5 minutes. Switching between pages will not trigger an additional API call within that window.

Build docs developers (and LLMs) love

Get started for freeTalk to us