feat: handle wallet with no transaction

Adds handling of wallets with no transaction by displaying "No transaction found" text.
martinkyselak · Jan 4, 2024 · e091abf · e091abf
1 parent 167b39b
commit e091abf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/WalletFound.tsx b/src/WalletFound.tsx
@@ -16,16 +16,24 @@ export function WalletFound({ walletData }: Props) {
         Address: {walletData[1][0].address}
       </p>
       <p className="text-sm">Balance: {walletData[1][0].balance}</p>
-      <h3 className="text-l font-bold pt-2">Transactions</h3>
+      {walletData[2].length > 0 && <h3 className="text-l font-bold pt-2">Transactions</h3>}
       <ul className="list-none">
-        {walletData[2].map((transaction) => (
-          <li key={transaction.hash} 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>
+        {walletData[2].length > 0 ? (
+          walletData[2].map((transaction) => (
+            <li key={transaction.hash} 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>
+          ))
+        ) : (
+          <li className="pb-2">
+            <p className="text-sm">No transaction found.</p>
           </li>
-        ))}
+        )}
       </ul>
     </div>
   );

diff --git a/src/WalletPage.test.tsx b/src/WalletPage.test.tsx
@@ -58,9 +58,11 @@ test('should return wallet data with no transaction for valid empty wallet', asy
   const balance = await waitFor(() => screen.findByText(/Balance/i), { timeout: 5000 });
   expect(balance).toBeInTheDocument();
 
-  const blocks = screen.getByText(/Block #/i);
+  const blocks = screen.queryByText(/Block #/i);
   expect(blocks).not.toBeInTheDocument();
-  // TODO get no transaction test here
+
+  const noTransaction = screen.getByText(/No transaction found/i);
+  expect(noTransaction).toBeInTheDocument();
 }, 10000);
 
 test('should display error message when empty string is searched for', async () => {

diff --git a/src/api/getWallet.test.ts b/src/api/getWallet.test.ts
@@ -6,7 +6,7 @@ import { getWalletData } from './getWallet';
 test('should return error for non-existing address', async () => {
   const result = await getWalletData('non-existing-address');
   expect(result).toStrictEqual([Status.ERROR, null, null]);
-});
+}, 10000);
 
 test('should return valid response for existing address', async () => {
   const result = await getWalletData('0xb794f5ea0ba39494ce839613fffba74279579268');
@@ -17,4 +17,4 @@ test('should return valid response for existing address', async () => {
 
   expect(result[2]).toBeDefined();
   expect(result[2].length).toBe(10);
-});
+}, 10000);