add copy tx data button

gnosisguild · Mar 5, 2024 · f194812 · f194812
1 parent 88d06f0
commit f194812
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -33,3 +33,7 @@
   height: 16px;
   margin-right: 10px;
 }
+
+.secondary {
+  background: none;
+}