feat: add search form for wallet

Search form enables user to search for ethereum wallet based on its address and display balance using Tatum API.

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tatumio/tatum": "^4.1.34",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/SearchWalletForm.tsx

@@ -2,7 +2,7 @@ import { FieldError, useForm } from 'react-hook-form';
 import { SearchCriteria } from './api/types';
 
 type Props = {
-  onSearch: (search: SearchCriteria) => void;
+  onSearch: (address: SearchCriteria) => void;
 };
 
 export function SearchWalletForm({ onSearch }: Props) {

src/WalletFound.tsx

@@ -0,0 +1,19 @@
+import { AddressBalance } from '@tatumio/tatum';
+
+type Props = {
+  addressBalance: AddressBalance[];
+};
+
+export function WalletFound({ addressBalance }: 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>
+      <p className="py-2 text-sm">Balance: {addressBalance[0].balance}</p>
+      <h3 className="text-l font-bold">Transactions</h3>
+      <p>...</p>
+    </div>
+  );
+}

src/WalletPage.tsx

@@ -1,18 +1,48 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { SearchCriteria } from './api/types';
 import { SearchWalletForm } from './SearchWalletForm';
+import { getWallet } from './api/getWallet';
+import { WalletFound } from './WalletFound';
+import { AddressBalance } from '@tatumio/tatum';
 
 export function WalletPage() {
-  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | undefined>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [addressBalance, setWalletData] = useState<AddressBalance[]>();
+  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria>();
+
+  useEffect(() => {
+    let cancel = false;
+    // '0xb794f5ea0ba39494ce839613fffba74279579268'
+    if (searchCriteria) {
+      getWallet(searchCriteria.address).then((data) => {
+        if (!cancel) {
+          setWalletData(data);
+          setIsLoading(false);
+        }
+      });
+    }
+    return () => {
+      cancel = true;
+    };
+  }, [searchCriteria]);
 
   function handleSearch(search: SearchCriteria) {
+    setIsLoading(true);
     setSearchCriteria(search);
   }
 
+  if (isLoading) {
+    return <div className="w-96 mx-auto mt-6">Loading ...</div>;
+  }
   return (
     <main className="max-w-xs ml-auto mr-auto">
       <SearchWalletForm onSearch={handleSearch} />
-      <div>Wallet balance and last ten transactions will be here.</div>
+      {searchCriteria && !addressBalance && (
+        <p className="py-2 text-sm truncate">
+          No wallet with address <em>{searchCriteria.address}</em> found.
+        </p>
+      )}
+      {addressBalance && <WalletFound addressBalance={addressBalance} />}
     </main>
   );
 }

src/api/getWallet.ts

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