feat: display transactions for search wallet

Adds functionality for displaying last ten transactions for searched wallet (apart from the balance).

src/WalletFound.tsx

@@ -1,19 +1,32 @@
-import { AddressBalance } from '@tatumio/tatum';
+import { AddressBalance, AddressTransaction, Status } from '@tatumio/tatum';
 
 type Props = {
-  addressBalance: AddressBalance[];
+  walletData: [
+    status: Status,
+    addressBalance: AddressBalance[],
+    addressTransactions: AddressTransaction[],
+  ];
 };
 
-export function WalletFound({ addressBalance }: Props) {
+export function WalletFound({ walletData }: Props) {
   return (
     <div>
       <h2 className="text-xl font-bold">Wallet</h2>
-      <p className="py-2 text-sm truncate" title={addressBalance[0].address}>
-        Address: {addressBalance[0].address}
+      <p className="text-sm truncate" title={walletData[1][0].address}>
+        Address: {walletData[1][0].address}
       </p>
-      <p className="py-2 text-sm">Balance: {addressBalance[0].balance}</p>
-      <h3 className="text-l font-bold">Transactions</h3>
-      <p>...</p>
+      <p className="text-sm">Balance: {walletData[1][0].balance}</p>
+      <h3 className="text-l font-bold pt-2">Transactions</h3>
+      <ul className="list-none">
+        {walletData[2].map((transaction) => (
+          <li key={transaction.address} className="pb-2">
+            <p className="text-sm truncate">Hash: {transaction.hash}</p>
+            <p className="text-sm">Amount: {transaction.amount}</p>
+            <p className="text-sm">Timestamp: {new Date(transaction.timestamp).toLocaleString()}</p>
+            <p className="text-sm">Block #: {transaction.blockNumber}</p>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

src/WalletPage.tsx

@@ -1,22 +1,26 @@
 import { useEffect, useState } from 'react';
 import { SearchCriteria } from './api/types';
 import { SearchWalletForm } from './SearchWalletForm';
-import { getWallet } from './api/getWallet';
+import { getWalletData } from './api/getWallet';
 import { WalletFound } from './WalletFound';
-import { AddressBalance } from '@tatumio/tatum';
+import { AddressBalance, AddressTransaction, Status } from '@tatumio/tatum';
 
 export function WalletPage() {
   const [isLoading, setIsLoading] = useState(false);
-  const [addressBalance, setWalletData] = useState<AddressBalance[]>();
+  const [walletData, setWalletData] = useState<[Status, AddressBalance[], AddressTransaction[]]>([
+    Status.ERROR,
+    [],
+    [],
+  ]);
   const [searchCriteria, setSearchCriteria] = useState<SearchCriteria>();
 
   useEffect(() => {
     let cancel = false;
     // '0xb794f5ea0ba39494ce839613fffba74279579268'
     if (searchCriteria) {
-      getWallet(searchCriteria.address).then((data) => {
+      getWalletData(searchCriteria.address).then((walletData) => {
         if (!cancel) {
-          setWalletData(data);
+          setWalletData(walletData);
           setIsLoading(false);
         }
       });
@@ -37,12 +41,12 @@ export function WalletPage() {
   return (
     <main className="max-w-xs ml-auto mr-auto">
       <SearchWalletForm onSearch={handleSearch} />
-      {searchCriteria && !addressBalance && (
+      {searchCriteria && walletData[0] !== Status.SUCCESS && (
         <p className="py-2 text-sm truncate">
           No wallet with address <em>{searchCriteria.address}</em> found.
         </p>
       )}
-      {addressBalance && <WalletFound addressBalance={addressBalance} />}
+      {walletData[0] === Status.SUCCESS && <WalletFound walletData={walletData} />}
     </main>
   );
 }

src/api/getWallet.ts

@@ -1,10 +1,23 @@
-import { TatumSDK, Network, Ethereum, ResponseDto, AddressBalance } from '@tatumio/tatum';
+import {
+  TatumSDK,
+  Network,
+  Ethereum,
+  ResponseDto,
+  AddressBalance,
+  AddressTransaction,
+  Status,
+} from '@tatumio/tatum';
 
-export async function getWallet(address: string): Promise<AddressBalance[]> {
+export async function getWalletData(
+  address: string,
+): Promise<[Status, AddressBalance[], AddressTransaction[]]> {
   const tatum = await TatumSDK.init<Ethereum>({ network: Network.ETHEREUM });
   const balance: ResponseDto<AddressBalance[]> = await tatum.address.getBalance({
     addresses: [address],
   });
+  const transactions: ResponseDto<AddressTransaction[]> = await tatum.address.getTransactions({
+    address: address,
+  });
 
-  return balance.data;
+  return [balance.status, balance.data, transactions.data];
 }