From 573e5518cc81270685d207b6b24c2c693e123c8f Mon Sep 17 00:00:00 2001
From: Kittisak Phormraksa <dnjooiopa@gmail.com>
Date: Sat, 27 Apr 2024 12:26:52 +0700
Subject: [PATCH] [web] Enhance transaction icon

---
 web/src/components/Transactions.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/src/components/Transactions.tsx b/web/src/components/Transactions.tsx
index ccc4a32..771bc54 100644
--- a/web/src/components/Transactions.tsx
+++ b/web/src/components/Transactions.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { FC, useEffect, useMemo, useState } from 'react'
+import { RiSendPlaneFill } from 'react-icons/ri'
 
 import useIsMounted from '@/hooks/useIsMounted'
 import Axios from '@/libs/axios'
@@ -11,16 +12,24 @@ import { shortenTime } from '@/utils/date'
 const TxItem = ({ amountSat, description, createdAt, type }: Transaction) => {
   const amountColor = type === TransactionType.PAYMENT_SENT ? 'text-gray-100' : 'text-green-500'
   const displayAmount = type === TransactionType.PAYMENT_SENT ? `-${amountSat}` : `+${amountSat}`
-  const displayDescription = description || (type === TransactionType.PAYMENT_SENT ? 'Sent' : 'Received')
+  // const displayDescription = description || (type === TransactionType.PAYMENT_SENT ? 'Sent' : 'Received')
+
+  const txIcon = useMemo(
+    () =>
+      type === TransactionType.PAYMENT_SENT ? (
+        <RiSendPlaneFill className={`text-2xl ${amountColor}`} />
+      ) : (
+        <RiSendPlaneFill className={`text-2xl ${amountColor} rotate-90`} />
+      ),
+    [type]
+  )
 
   return (
-    <div className="flex justify-between mt-3">
-      <div className="flex flex-col items-start">
-        <div>
-          <span className="text-lg">{displayDescription}</span>
-        </div>
+    <div className="flex justify-between mt-3 py-1">
+      <div className="flex gap-2 items-start">
+        <div>{txIcon}</div>
         <div>
-          <span className="text-sm">{shortenTime(new Date(createdAt))}</span>
+          <span className="text-md">{shortenTime(new Date(createdAt))}</span>
         </div>
       </div>
       <div>