From 491f06dcd9e75a488fc3c93544833a228fa76bb3 Mon Sep 17 00:00:00 2001
From: Janek <janek.rahrt@me.com>
Date: Tue, 11 Apr 2023 12:00:00 +1000
Subject: [PATCH] feat: allow user to copy call address

---
 .../TransactionActions.tsx                    |  1 +
 .../ui/src/components/DetailAccordion.tsx     | 28 +++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/extension/src/ui/features/actions/transaction/ApproveTransactionScreen/TransactionActions.tsx b/packages/extension/src/ui/features/actions/transaction/ApproveTransactionScreen/TransactionActions.tsx
index 9690ccaf5..a6fd6fe03 100644
--- a/packages/extension/src/ui/features/actions/transaction/ApproveTransactionScreen/TransactionActions.tsx
+++ b/packages/extension/src/ui/features/actions/transaction/ApproveTransactionScreen/TransactionActions.tsx
@@ -34,6 +34,7 @@ export const TransactionActions: FC<TransactionActionsProps> = ({
             <DetailAccordionButton
               label={entryPointToHumanReadable(transaction.entrypoint)}
               value={formatTruncatedAddress(transaction.contractAddress)}
+              copyValue={transaction.contractAddress}
             />
             <DetailAccordionPanel>
               {transaction.calldata?.map((calldata, cdIndex) => (
diff --git a/packages/ui/src/components/DetailAccordion.tsx b/packages/ui/src/components/DetailAccordion.tsx
index 3a5d14ed8..54b068b74 100644
--- a/packages/ui/src/components/DetailAccordion.tsx
+++ b/packages/ui/src/components/DetailAccordion.tsx
@@ -107,8 +107,9 @@ export const DetailAccordionButton: FC<
   AccordionButtonProps & {
     label?: ReactNode
     value?: ReactNode
+    copyValue?: string
   }
-> = ({ label, value, children, ...rest }) => {
+> = ({ label, value, copyValue, children, ...rest }) => {
   const { isDisabled } = useAccordionItemState()
   return (
     <AccordionButton
@@ -132,10 +133,27 @@ export const DetailAccordionButton: FC<
       {...rest}
     >
       {label && <P4 fontWeight="medium">{label}</P4>}
-      {value && (
-        <P4 color="neutrals.400" fontWeight="medium">
-          {value}
-        </P4>
+      {value && copyValue ? (
+        <CopyTooltip copyValue={copyValue}>
+          <P4
+            _hover={{
+              color: "text",
+            }}
+            cursor="pointer"
+            transitionProperty="color"
+            transitionDuration="fast"
+            color="neutrals.400"
+            fontWeight="medium"
+          >
+            {value}
+          </P4>
+        </CopyTooltip>
+      ) : (
+        value && (
+          <P4 color="neutrals.400" fontWeight="medium">
+            {value}
+          </P4>
+        )
       )}
       {children}
     </AccordionButton>