wallet page implentation

2023-04-24 10:06:51 +01:00
parent 1fbf3d2f90
commit ee4437753d
10 changed files with 393 additions and 132 deletions
@@ -0,0 +1,47 @@
+import React from 'react'
+
+function RecentActivityTable({payment}) {
+  return (
+    <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className='border-b-2'>
+            <tr className='text-slate-600'>
+            <th className="p-2">Date</th>
+            <th className="p-2">Recipient</th>
+            <th className="p-2">Amount/Fee</th>
+            <th className="p-2">Conf/Status</th>
+            </tr>
+        </thead>
+        {payment.data.length ?
+        (
+        <tbody>
+            {payment.data.map((item, index) => (
+            <tr key={index} className='text-slate-500'>
+                <td className="p-2">{item.trx_date}</td>
+                <td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
+                <td className="p-2">{item.amount}/{item.fee}</td>
+                <td className="p-2">{item.status}</td>
+            </tr>
+            ))}
+        </tbody>
+        )
+        :
+        payment.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Payment History Found!</td>
+            </tr>
+        </tbody>
+        }
+    </table>
+  )
+}
+
+export default RecentActivityTable