From af389f762df5f5a41b1c302929461252e5548143 Mon Sep 17 00:00:00 2001
From: daniel-vahn <d.vonahn@chainsulting.de>
Date: Fri, 26 Apr 2024 10:41:51 +0200
Subject: [PATCH] Update balance display in App.tsx and fetch fiat value in
 TransactionHistoryItem.tsx

---
 src/App.tsx                                   |  9 ++++----
 .../utils/TransactionHistoryItem.tsx          | 22 ++++++++++++++-----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 69f1e5c..f953c84 100644
--- 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
index 281084e..195ecf1 100644
--- a/src/components/utils/TransactionHistoryItem.tsx
+++ b/src/components/utils/TransactionHistoryItem.tsx
@@ -1,6 +1,6 @@
-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';
 
@@ -8,19 +8,31 @@ 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>