Hello! 
Here is the code for the LiveTickers component:
LiveTicker.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import styled from 'styled-components';
const CoinTable = styled.table`
margin: 50px auto 50px auto;
text-align: left;
`;
const Tr = styled.tr`
border: 1px solid #ccc;
background-color: #f7f7f7;
color: #333;
font-size: 14px;f
font-weight: 500;
text-align: center;
transition: all 0.3s ease-in-out;
&:nth-child(odd) {
background-color: #e9f8ff;
}
&:hover {
background-color: #d6e8ff;
border-color: #aaa;
}
td{
padding: 5px;
}
td:first-child {
text-align: left;
padding-left: 10px;
}
td:nth-child(2) {
text-align: left;
}
td:nth-child(3) {
text-align: centre;
}
td:nth-child(4) {
text-align: right;
}
`;
function LiveTickers() {
const [coins, setCoins] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
axios.get('https://api.coinpaprika.com/v1/tickers')
.then(response => {
const top10Coins = response.data.slice(0, 20); // Get the top 20 coins
setCoins(top10Coins);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);
if (loading) return <div>Loading... It will be just a moment.</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<CoinTable>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Ticker</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{coins.map(coin => (
<Tr key={coin.id}>
<td>#{coin.rank}</td>
<td>{coin.name}</td>
<td>{coin.symbol}</td>
<td>{parseFloat(coin.quotes.USD.price).toFixed(2)}</td>
</Tr>
))}
</tbody>
</CoinTable>
</div>
);
}
export default LiveTickers;
and the app.js code:
App.js
import AccountBalance from './Components/AccountBalance/AccountBalance';
import React from 'react';
import AppHeader from './Components/AppHeader/AppHeader';
import CoinList from './Components/CoinList/CoinList';
import styled from 'styled-components';
import LiveTickers from './Components/LiveTickers/livetickers';
const AppStyle = styled.div`
text-align: center;
`;
class App extends React.Component {
state={
showBalance: true,
balance: 10000,
coinData: [
{
name: 'Bitcoin',
ticker: 'BTC',
price: 9999.98,
balance: 0.5, // Example balance value
},
{
name: 'Ethereum',
ticker: 'ETH',
price: 299.99,
balance: 2.25, // Example balance value
},
{
name: 'Tether',
ticker: 'USDT',
price: 1,
balance: 100, // Example balance value
},
{
name: 'Binance Coin',
ticker: 'BNB',
price: 450.5,
balance: 10, // Example balance value
},
{
name: 'Cardano',
ticker: 'ADA',
price: 2.05,
balance: 50, // Example balance value
},
{
name: 'Solana',
ticker: 'SOL',
price: 180.75,
balance: 1.75, // Example balance value
},
{
name: 'XRP',
ticker: 'XRP',
price: 0.85,
balance: 500, // Example balance value
},
{
name: 'Polkadot',
ticker: 'DOT',
price: 28.5,
balance: 8, // Example balance value
},
{
name: 'Dogecoin',
ticker: 'DOGE',
price: 0.22,
balance: 1000, // Example balance value
},
{
name: 'Avalanche',
ticker: 'AVAX',
price: 110.0,
balance: 0.1, // Example balance value
},
],
}
handleRefresh = (valueChangedTicker)=> {
const newCoinData = this.state.coinData.map( (values)=> {
const newValues = { ...values};
if(valueChangedTicker === values.ticker){
const randomPercentage = 0.995 + Math.random() * 0.01;
newValues.price *= randomPercentage;
}
return newValues;
})
this.setState({ coinData: newCoinData});
}
handleHideBalance = ()=>{
this.showBalance = !this.showBalance;
this.setState({showBalance: this.showBalance});
}
render() {
return (
<AppStyle>
<AppHeader />
<h2>Today's Cryptocurrency Prices by Market Cap</h2>
<LiveTickers />
<h2>My Portfolio</h2>
<AccountBalance showBalance={this.showBalance} amount={this.state.balance} handleHideBalance={this.handleHideBalance}/>
<CoinList showBalance={this.showBalance} coinData={this.state.coinData} handleRefresh={this.handleRefresh}/>
</AppStyle>
);
}
}
export default App;
Github snapshot is here:
https://github.com/CodingInLondon/moralisacademy-react/tree/a7345491072a60b17ba6b895836520e5281ffe3a/coin-exchange/src
