From 597fc00ac97b97844d64f1e92dacbc4baf1eedb2 Mon Sep 17 00:00:00 2001
From: Dhairya Sethi <55102840+DhairyaSethi@users.noreply.github.com>
Date: Thu, 25 Apr 2024 12:15:36 +0530
Subject: [PATCH] feat: format eth in value (#21)

---
 src/components/Body/TransactionRequests.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Body/TransactionRequests.tsx b/src/components/Body/TransactionRequests.tsx
index d7de61a..4eebe9e 100644
--- a/src/components/Body/TransactionRequests.tsx
+++ b/src/components/Body/TransactionRequests.tsx
@@ -26,6 +26,7 @@ import {
 import CopyToClipboard from "./CopyToClipboard";
 import { TxnDataType } from "../../types";
 import { useEffect } from "react";
+import { ethers } from "ethers";
 
 export const slicedText = (txt: string) => {
   return txt.length > 6
@@ -43,6 +44,16 @@ const TD = ({ txt }: { txt: string }) => (
     </HStack>
   </Td>
 );
+const ValueTD = ({ txt }: { txt: string }) => (
+  <Td>
+    <HStack>
+      <Tooltip label={`${txt} Wei`} hasArrow placement="top">
+        <Text>{ethers.utils.formatEther(txt)} ETH</Text>
+      </Tooltip>
+      <CopyToClipboard txt={txt} />
+    </HStack>
+  </Td>
+);
 
 const TData = ({
   calldata,
@@ -151,7 +162,7 @@ function TransactionRequests({
                 <TD txt={d.from} />
                 <TD txt={d.to} />
                 <TData calldata={d.data} address={d.to} networkId={networkId} />
-                <TD txt={d.value} />
+                <ValueTD txt={d.value} />
               </Tr>
             ))}
           </Tbody>