feat: dosplay exchange rate in the hader

Adds exchange rated displayed under page harder showing current rate in EUR.

src/App.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import App from './App';
 
-test('should render Ethereum Wallet headline', () => {
+test('should render Ethereum Wallet headline', async () => {
   render(<App />);
 
   const headerElement = screen.getByText(/Ethereum Wallet/i);
@@ -12,4 +12,7 @@ test('should render Ethereum Wallet headline', () => {
 
   const searchButton = screen.getByText(/Search/i);
   expect(searchButton).toBeInTheDocument();
+
+  const res = await waitFor(() => screen.findByText(/\u20AC/i), { timeout: 5000 });
+  expect(res).toBeInTheDocument();
 });

src/Header.tsx

@@ -1,10 +1,41 @@
+import { ResponseDto, Status } from '@tatumio/tatum';
+import { getExchangeRate } from './api/getWallet';
 import ethereumlogo from './logo.svg';
+import { Rate } from '@tatumio/tatum/dist/src/service/rate/rates.dto';
+import { useEffect, useState } from 'react';
 
 export function Header() {
+  const [rateData, setRateData] = useState<ResponseDto<Rate>>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      let cancel = false;
+      getExchangeRate().then((rateData) => {
+        if (!cancel) {
+          setRateData(rateData);
+        }
+      });
+      return () => {
+        cancel = true;
+      };
+    };
+
+    fetchData();
+
+    const intervalId = setInterval(() => {
+      fetchData();
+    }, 240000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   return (
     <header className="flex flex-col items-center text-slate-50 bg-slate-700 h-30 p-5">
       <img src={ethereumlogo} alt="Ethereum logo" className="w-16 h-16" />
       <h1 className="text-xl font-bold">Ethereum Wallet</h1>
+      {rateData &&
+        rateData.status === Status.SUCCESS &&
+        '\u20AC ' + parseFloat(rateData.data.value).toFixed(2)}
     </header>
   );
 }

src/api/getWallet.ts

@@ -7,6 +7,7 @@ import {
   AddressTransaction,
   Status,
 } from '@tatumio/tatum';
+import { Rate } from '@tatumio/tatum/dist/src/service/rate/rates.dto';
 
 export async function getWalletData(
   address: string,
@@ -22,3 +23,9 @@ export async function getWalletData(
 
   return [balance.status, balance.data, transactions.data];
 }
+
+export async function getExchangeRate(): Promise<ResponseDto<Rate>> {
+  const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
+
+  return await tatum.rates.getCurrentRate('ETH', 'EUR');
+}