From f1948125bda8ca779b4eb50edeb656fc672f92f0 Mon Sep 17 00:00:00 2001
From: samepant <sampanter@gmail.com>
Date: Tue, 5 Mar 2024 07:22:08 -0500
Subject: [PATCH] add copy tx data button

---
 extension/src/browser/Drawer/Submit.tsx       |  1 +
 extension/src/browser/Drawer/index.tsx        | 22 ++++++++++++++++---
 extension/src/browser/Drawer/style.module.css |  4 ++++
 extension/src/components/Button/index.tsx     | 19 +++++++++++-----
 .../src/components/Button/style.module.css    |  4 ++++
 5 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/extension/src/browser/Drawer/Submit.tsx b/extension/src/browser/Drawer/Submit.tsx
index 720d78ca..bbcd4ba6 100644
--- a/extension/src/browser/Drawer/Submit.tsx
+++ b/extension/src/browser/Drawer/Submit.tsx
@@ -136,6 +136,7 @@ const Submit: React.FC = () => {
         <Button
           onClick={connectWallet}
           disabled={!submitTransactions || transactions.length === 0}
+          secondary
         >
           Connect wallet to submit
         </Button>
diff --git a/extension/src/browser/Drawer/index.tsx b/extension/src/browser/Drawer/index.tsx
index 187615ea..032cec22 100644
--- a/extension/src/browser/Drawer/index.tsx
+++ b/extension/src/browser/Drawer/index.tsx
@@ -3,7 +3,14 @@ import { RiFileCopy2Line, RiRefreshLine } from 'react-icons/ri'
 import { encodeMulti, encodeSingle } from 'react-multisend'
 import { toast } from 'react-toastify'
 
-import { BlockButton, Box, Drawer, Flex, IconButton } from '../../components'
+import {
+  BlockButton,
+  Box,
+  Button,
+  Drawer,
+  Flex,
+  IconButton,
+} from '../../components'
 import { ForkProvider } from '../../providers'
 import { wrapRequest } from '../../providers/WrappingProvider'
 import { useConnection } from '../../connections'
@@ -166,9 +173,18 @@ const TransactionsDrawer: React.FC = () => {
             </p>
           )}
         </Flex>
-        <Box p={2} bg>
+        <Flex justifyContent="space-between" gap={2}>
+          {!connection.pilotAddress && (
+            <Button
+              secondary
+              onClick={copyTransactionData}
+              disabled={newTransactions.length === 0}
+            >
+              Copy transaction data
+            </Button>
+          )}
           <Submit />
-        </Box>
+        </Flex>
       </Flex>
     </Drawer>
   )
diff --git a/extension/src/browser/Drawer/style.module.css b/extension/src/browser/Drawer/style.module.css
index 42ca40c0..f6efacc5 100644
--- a/extension/src/browser/Drawer/style.module.css
+++ b/extension/src/browser/Drawer/style.module.css
@@ -238,6 +238,10 @@ button.link:hover {
   left: 0;
 }
 
+.secondaryButton {
+  background: none;
+}
+
 @-webkit-keyframes pulse {
   to {
     box-shadow: 0 0 0 8px rgba(232, 76, 61, 0);
diff --git a/extension/src/components/Button/index.tsx b/extension/src/components/Button/index.tsx
index 2af6f38b..9fa4c877 100644
--- a/extension/src/components/Button/index.tsx
+++ b/extension/src/components/Button/index.tsx
@@ -3,13 +3,22 @@ import React from 'react'
 
 import classes from './style.module.css'
 
-const Button: React.FC<
-  React.DetailedHTMLProps<
+interface ButtonProps
+  extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
-  >
-> = ({ className, ...rest }) => (
-  <button className={cn(classes.button, className)} {...rest} />
+  > {
+  secondary?: boolean
+}
+const Button: React.FC<ButtonProps> = ({
+  className,
+  secondary = false,
+  ...rest
+}) => (
+  <button
+    className={cn(classes.button, className, secondary && classes.secondary)}
+    {...rest}
+  />
 )
 
 export default Button
diff --git a/extension/src/components/Button/style.module.css b/extension/src/components/Button/style.module.css
index fe2c6418..b2b51f70 100644
--- a/extension/src/components/Button/style.module.css
+++ b/extension/src/components/Button/style.module.css
@@ -33,3 +33,7 @@
   height: 16px;
   margin-right: 10px;
 }
+
+.secondary {
+  background: none;
+}