From 79020e05252f2e11af886e27a2cf1c017f83cc04 Mon Sep 17 00:00:00 2001
From: Stephen Gordon <n00202054@iadt.ie>
Date: Sun, 24 Mar 2024 19:25:53 +0000
Subject: [PATCH] changed hook

---
 src/app/@auth/(.)transaction/page.tsx | 4 +++-
 src/app/hooks/useFindPayeeName.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/@auth/(.)transaction/page.tsx b/src/app/@auth/(.)transaction/page.tsx
index c34f1e4..a9225df 100644
--- a/src/app/@auth/(.)transaction/page.tsx
+++ b/src/app/@auth/(.)transaction/page.tsx
@@ -41,6 +41,8 @@ export default function Page() {
     setIsLoading(false);
   }, [txState]);
 
+  const payeeName = useFindPayeeName(transaction.from);
+
   return (
     <>
       {!isLoading && (
@@ -65,7 +67,7 @@ export default function Page() {
               </div>
               <div className='text-blue-400'>
                 {transaction.from == address ? 'From' : 'To'}{' '}
-                { useFindPayeeName(transaction.from)}
+               {payeeName}
               </div>
               <div className='mt-10 grid grid-cols-2 gap-4 text-white'>
                 <div>
diff --git a/src/app/hooks/useFindPayeeName.tsx b/src/app/hooks/useFindPayeeName.tsx
index 3310e6c..0921d3f 100644
--- a/src/app/hooks/useFindPayeeName.tsx
+++ b/src/app/hooks/useFindPayeeName.tsx
@@ -7,8 +7,8 @@ const useFindPayeeName = (payeeAddress: string) => {
   const contactsState = useSelector((state: RootState) => state.contacts.value);
 
   const findPayeeName = (payeeAddress: string): string | null => {
-    if (!payeeAddress || contactsState.length === 0) {
-      return null;
+    if ( contactsState.length === 0) {
+      return truncateEthAddress(payeeAddress);
     }
 
     const contact = contactsState.find(