Build a Cryptocurrency Returns Calculator with ReactJS + CoinGecko API (Part 2)
Step-by-step beginner React tutorial to turn the Bitcoin returns calculator into any cryptocurrency calculator.
--
Welcome to part 2 of the tutorial on building your very own cryptocurrency returns calculator! If you have not started the first tutorial, you can do that here. In Part 1, we built a Bitcoin returns calculator. It’s pretty cool, but, you know what’s cooler? A calculator where you can choose the currency. So, let’s turn this into a multi-cryptocurrency return calculator. As I am sure you saw in the finished calculator, there will be a drop-down selector to choose and set the currency you bought, but, at first, we will make it a basic text input. So, let’s get into it.
First, let’s make a useState that declares a coin and has a setCoin function with its value set to an empty string.
const [coin, setCoin] = useState();Then, we’ll make another input section to type in the currency you want. Same functionality as before.
<input defaultValue={coin} onChange={(val) => setCoin(val)} />We are going to want to pass in this newly declared coin variable into the coingeckoUrl function, so we will remove bitcoin from the URL and pass in a prop called coin. The new function will now take in the coin and date as shown below.
const coingeckoUrl = (coin, date) => {
return `https://api.coingecko.com/api/v3/coins/${coin}/history?date=${date}&localization=false`;
};With coin expected in coingeckoUrl, we now need to pass it. In the coingeckoFetch function, wherever date is declared, we will also need to pass in coin. The beginning of the function will now look like this with coin added to the props.
const coingeckoFetch = async (buy, coin, date) => {
fetch(coingeckoUrl(coin, date)).then((response) =>
response.json().then((jsonData) => {Let’s not forget where coingeckoFetch receives those values of buy (the boolean), coin, and date. They get it from the change handling functions, and so we need to change those too. In both handleSellChange and handleBuyChange, pass coin into coingeckoFetch as shown
coingeckoFetch(true, coin, val);We are almost there! The app won’t be working just yet because while the coin was declared with setCoin, it hasn’t been passed to the coingeckoUrl. We will submit it with it’s own change handler function called handlecoinChange as shown.
const handleCoinChange = (e) => {
let val = e.target.value;
setCoin(val);
coingeckoFetch(null, coin, val);
};Boom! Your application is completely functional! The code you have should be the same as here. Type in the word bitcoin and see how the application works just the same as the bitcoin calculator. Try it out with different coins like Ethereum, or Litecoin, whatever you’d like! The user can input the currency they wish and receive their returns!
To make it a little easier on the user, let’s make a pre-set selection of coins the user can choose from. To do this, let’s first make an array of different coins. You can put any coins you’d like, but this is the array I made.
const coinList = [
{ id: 0, name: “None Selected” },
{ id: 1, name: “bitcoin” },
{ id: 2, name: “ethereum” },
{ id: 3, name: “tezos” },
{ id: 4, name: “cardano” },
];We will take this array and display them in a selector element in the DOM. You can do this with a <select> element and then utilize .map to display all the contents of the array with .name. I used the id as the key to the <option> element.
<select defaultValue={coin} onChange={(val) => handleCoinChange(val)} >{coinList.map((item) => (
<option key={item.id}>{item.name}</option>
))}</select>
Huge congratulations! The entire application is completed, and you can play with it in this Codesandbox. I highly recommend styling this project and adding your own style to it as I did. There’s a lot of functionality you can add to this project as well. Some examples I think would be great to add would be showing a percentage on your gains, change emojis based on the results, provide error messages when a date is unavailable or out of bounds and/or conditionally render the “USD” and other text elements. You should be super proud about making this project as it is an awesome addition to your portfolio.
If you have any questions or comments, feel free to reach out to me on Twitter at @adshinder and I will be happy to help you out. Thanks for reading and learning with me and I will see you in the next one! Also, a huge shout-out to Lior Ben-David on his help on the article. Give him a follow on Twitter @Lior_bendavid!
