Update balance display in App.tsx and fetch fiat value in Transaction…

…HistoryItem.tsx
softstack · Apr 26, 2024 · af389f7 · af389f7
1 parent a003333
commit af389f7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -295,7 +295,7 @@ function App() {
                                         <span style={{ color: '#707579' }}>
                                             $
                                         </span>
-                                        250
+                                        {balance || 0}
                                     </p>
                                 </div>
                                 <div className="transaction-options">
@@ -317,10 +317,9 @@ function App() {
                                 </div>
                                 <div className="transaction-history">
                                     <TransactionHistoryItem
-                                        currency="Toncoin"
-                                        symbol="TON"
-                                        valueSpot={100}
-                                        valueFiat={150}
+                                        currency="Ether"
+                                        symbol="ETH"
+                                        valueSpot={parseFloat(balance || '0.0')}
                                     />
                                 </div>
                                 {/* <input

diff --git a/src/components/utils/TransactionHistoryItem.tsx b/src/components/utils/TransactionHistoryItem.tsx
@@ -1,26 +1,38 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import tonIcon from '../../assets/ton_connect.png';
+import ethereumIcon from '../../assets/ether_icon.png';
 
 import './TransactionHistoryItem.css';
 
 type Props = {
     currency: string;
     symbol: string;
     valueSpot: number;
-    valueFiat: number;
 };
 
 const TransactionHistoryItem: React.FC<Props> = ({
     currency,
     symbol,
     valueSpot,
-    valueFiat,
 }) => {
+    const [valueFiat, setValueFiat] = useState<number>(0);
+
+    const getFiatValue = async () => {
+        const response = await fetch(
+            `https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd`
+        );
+        const data = await response.json();
+        setValueFiat(Number((data.ethereum.usd * valueSpot).toFixed(2)));
+    };
+
+    useEffect(() => {
+        getFiatValue();
+    }, []);
+
     return (
         <div className="transaction-history-item">
             <div className="transaction-history-item-logo">
-                <img src={tonIcon} alt="" />
+                <img src={ethereumIcon} alt="" />
             </div>
             <div className="transaction-history-item-spot-details">
                 <p>{currency}</p>