feat: redesign list of transactions

The returned wallet data including list of transactions is completely redesigned.
martinkyselak · Jan 4, 2024 · 9038dd8 · 9038dd8
1 parent 5f41937
commit 9038dd8
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/src/SearchWalletForm.tsx b/src/SearchWalletForm.tsx
@@ -18,7 +18,7 @@ export function SearchWalletForm({ onSearch }: Props) {
     return fieldError ? 'border border-red-500' : 'border border-slate-700';
   }
   return (
-    <form noValidate className="border-b py-2" onSubmit={handleSubmit(onSearch)}>
+    <form noValidate className="border-b my-3 sm:my-4" onSubmit={handleSubmit(onSearch)}>
       <div className={fieldStyle}>
         <input
           type="text"

diff --git a/src/WalletFound.tsx b/src/WalletFound.tsx
@@ -10,27 +10,49 @@ type Props = {
 
 export function WalletFound({ walletData }: Props) {
   return (
-    <div>
-      <h2 className="text-xl font-bold">Wallet</h2>
-      <p className="text-sm truncate" title={walletData[1][0].address}>
-        Address: {walletData[1][0].address}
-      </p>
-      <p className="text-sm">Balance: {walletData[1][0].balance}</p>
-      {walletData[2].length > 0 && <h3 className="text-l font-bold pt-2">Transactions</h3>}
-      <ul className="list-none">
+    <div className="divide-y divide-gray-700">
+      <div className="flex items-center space-x-4 py-3">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-gray-900 truncate">Wallet</p>
+          <p
+            className="text-sm text-gray-500 truncate"
+            title={'Address: ' + walletData[1][0].address}
+          >
+            {walletData[1][0].address}
+          </p>
+        </div>
+        <div
+          className="inline-flex items-center text-base font-semibold text-gray-900"
+          title={'Balance: \u039E ' + walletData[1][0].balance}
+        >
+          {'\u039E ' + walletData[1][0].balance}
+        </div>
+      </div>
+
+      <ul className="max-w-md divide-y divide-gray-200">
         {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 key={transaction.hash} className="py-3">
+              <div className="flex items-center space-x-4">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900 truncate">
+                    {new Date(transaction.timestamp).toLocaleString()}
+                  </p>
+                  <p className="text-sm text-gray-500 truncate" title="Block #">
+                    {transaction.blockNumber}
+                  </p>
+                </div>
+                <div
+                  className="inline-flex items-center text-base font-semibold text-gray-900"
+                  title={'\u039E ' + transaction.amount}
+                >
+                  {'\u039E ' + parseFloat(transaction.amount).toFixed(2)}
+                </div>
+              </div>
             </li>
           ))
         ) : (
-          <li className="pb-2">
+          <li className="py-3">
             <p className="text-sm">No transaction found.</p>
           </li>
         )}

diff --git a/src/WalletPage.test.tsx b/src/WalletPage.test.tsx
@@ -32,13 +32,10 @@ test('should return wallet data for valid wallet address', async () => {
     user.click(searchButton);
   });
 
-  const balance = await waitFor(() => screen.findByText(/Balance/i), { timeout: 5000 });
+  const balance = await waitFor(() => screen.findByTitle(/Balance/i), { timeout: 5000 });
   expect(balance).toBeInTheDocument();
 
-  const txHeadline = screen.getByText(/Transactions/i);
-  expect(txHeadline).toBeInTheDocument();
-
-  const blocks = screen.getAllByText(/Block #/i);
+  const blocks = screen.getAllByTitle(/Block #/i);
   expect(blocks.length).toBe(10);
 }, 10000);
 
@@ -55,10 +52,10 @@ test('should return wallet data with no transaction for valid empty wallet', asy
     user.click(searchButton);
   });
 
-  const balance = await waitFor(() => screen.findByText(/Balance/i), { timeout: 5000 });
+  const balance = await waitFor(() => screen.findByTitle(/Balance/i), { timeout: 5000 });
   expect(balance).toBeInTheDocument();
 
-  const blocks = screen.queryByText(/Block #/i);
+  const blocks = screen.queryByTitle(/Block #/i);
   expect(blocks).not.toBeInTheDocument();
 
   const noTransaction = screen.getByText(/No transaction found/i);