From 009cb32ce829238d741eb3a04e8bf17bb179fc22 Mon Sep 17 00:00:00 2001
From: Greg Nazario <greg@gnazar.io>
Date: Tue, 4 Feb 2025 22:18:52 -0500
Subject: [PATCH] [balance changes] Allow copying balance changes (#1014)

Resolves https://github.com/aptos-labs/explorer/issues/920
---
 .../Components/CoinBalanceChangeTable.tsx     | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/pages/Transaction/Tabs/Components/CoinBalanceChangeTable.tsx b/src/pages/Transaction/Tabs/Components/CoinBalanceChangeTable.tsx
index 9e298efb..4f1fb64d 100644
--- a/src/pages/Transaction/Tabs/Components/CoinBalanceChangeTable.tsx
+++ b/src/pages/Transaction/Tabs/Components/CoinBalanceChangeTable.tsx
@@ -5,7 +5,9 @@ import GeneralTableHeaderCell from "../../../../components/Table/GeneralTableHea
 import {assertNever} from "../../../../utils";
 import HashButton, {HashType} from "../../../../components/HashButton";
 import {BalanceChange} from "../../utils";
-import CurrencyValue from "../../../../components/IndividualPageContent/ContentValue/CurrencyValue";
+import CurrencyValue, {
+  getFormattedBalanceStr,
+} from "../../../../components/IndividualPageContent/ContentValue/CurrencyValue";
 import {
   negativeColor,
   primary,
@@ -15,6 +17,8 @@ import GeneralTableBody from "../../../../components/Table/GeneralTableBody";
 import GeneralTableCell from "../../../../components/Table/GeneralTableCell";
 import {VerifiedCoinCell} from "../../../../components/Table/VerifiedCell";
 import {getLearnMoreTooltip} from "../../helpers";
+import {ContentCopy} from "@mui/icons-material";
+import StyledTooltip from "../../../../components/StyledTooltip";
 
 type BalanceChangeCellProps = {
   balanceChange: BalanceChange;
@@ -80,6 +84,19 @@ function AmountCell({balanceChange}: BalanceChangeCellProps) {
   const isNegative = balanceChange.amount < 0;
   const amount =
     balanceChange.amount < 0 ? -balanceChange.amount : balanceChange.amount;
+  const [showCopied, setShowCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    const formattedValue = getFormattedBalanceStr(
+      amount.toString(),
+      balanceChange.asset.decimals,
+    );
+    await navigator.clipboard.writeText(
+      `${isNegative ? "-" : ""}${formattedValue}`,
+    );
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 1500);
+  };
 
   return (
     <GeneralTableCell
@@ -87,13 +104,17 @@ function AmountCell({balanceChange}: BalanceChangeCellProps) {
         textAlign: "right",
         color: isNegative ? negativeColor : primary[600],
       }}
+      onClick={handleCopy}
     >
       {isNegative ? "-" : "+"}
       <CurrencyValue
         amount={amount.toString()}
         currencyCode={balanceChange.asset.symbol}
         decimals={balanceChange.asset.decimals}
-      />
+      />{" "}
+      <StyledTooltip open={showCopied} title="Copied!" placement="top">
+        <ContentCopy style={{height: "1rem", width: "1.25rem"}} />
+      </StyledTooltip>
     </GeneralTableCell>
   );
 }