Fix: hide Edit for safeTxGas when 0 in 1.3.0+ (#2163)

* Fix: hide Edit for safeTxGas when 0 in 1.3.0+ * Simplify onBlur
safe-global · Jun 26, 2023 · 9ffe15b · 9ffe15b
1 parent 4eae3e6
commit 9ffe15b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 40 deletions.
diff --git a/src/components/transactions/TxDetails/SafeTxGasForm.tsx b/src/components/transactions/TxDetails/SafeTxGasForm.tsx
@@ -3,15 +3,15 @@ import { Link, Box, Paper, Button } from '@mui/material'
 import { useForm } from 'react-hook-form'
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
 import NumberField from '@/components/common/NumberField'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { isLegacyVersion } from '@/hooks/coreSDK/safeCoreSDK'
 
 type FormFields = {
   safeTxGas: number
 }
 
-const SafeTxGasForm = () => {
-  const { safeTx, safeTxGas = 0, setSafeTxGas } = useContext(SafeTxContext)
-  const isEditable = safeTx?.signatures.size === 0
-  const [editing, setEditing] = useState(false)
+const Form = ({ onSubmit }: { onSubmit: () => void }) => {
+  const { safeTxGas = 0, setSafeTxGas } = useContext(SafeTxContext)
 
   const formMethods = useForm<FormFields>({
     defaultValues: {
@@ -20,52 +20,58 @@ const SafeTxGasForm = () => {
     mode: 'onChange',
   })
 
-  const onSubmit = (values: FormFields) => {
+  const onFormSubmit = (values: FormFields) => {
     setSafeTxGas(values.safeTxGas || 0)
-    setEditing(false)
+    onSubmit()
   }
 
+  // Close the form w/o submitting if the user clicks outside of it
   const onBlur = () => {
-    setTimeout(() => {
-      setEditing(false)
-      formMethods.setValue('safeTxGas', safeTxGas)
-    }, 100)
+    setTimeout(onSubmit, 100)
   }
 
   return (
-    <Box display="flex" alignItems="center" gap={1} position="relative">
-      <>
-        {safeTxGas}
+    <Paper sx={{ position: 'absolute', zIndex: 2, p: 1, ml: '-22px' }} elevation={2}>
+      <form onSubmit={formMethods.handleSubmit(onFormSubmit)} style={{ display: 'flex' }}>
+        <NumberField
+          size="small"
+          autoFocus
+          type="number"
+          error={!!formMethods.formState.errors.safeTxGas}
+          sx={{ width: '7em' }}
+          {...formMethods.register('safeTxGas', {
+            valueAsNumber: true,
+            min: 0,
+            setValueAs: Math.round,
+            onBlur,
+          })}
+        />
+        <Button type="submit" size="small" variant="contained" sx={{ ml: 1 }}>
+          Save
+        </Button>
+      </form>
+    </Paper>
+  )
+}
 
-        {isEditable && (
-          <Link component="button" onClick={() => setEditing(true)} fontSize="small">
-            Edit
-          </Link>
-        )}
-      </>
+const SafeTxGasForm = () => {
+  const { safeTx, safeTxGas = 0 } = useContext(SafeTxContext)
+  const { safe } = useSafeInfo()
+  const isOldSafe = safe.version && isLegacyVersion(safe.version)
+  const isEditable = safeTx?.signatures.size === 0 && (safeTxGas > 0 || isOldSafe)
+  const [editing, setEditing] = useState(false)
 
-      {editing && (
-        <Paper sx={{ position: 'absolute', zIndex: 2, p: 1, ml: '-22px' }} elevation={2}>
-          <form onSubmit={formMethods.handleSubmit(onSubmit)} style={{ display: 'flex' }}>
-            <NumberField
-              size="small"
-              autoFocus
-              type="number"
-              error={!!formMethods.formState.errors.safeTxGas}
-              sx={{ width: '7em' }}
-              {...formMethods.register('safeTxGas', {
-                valueAsNumber: true,
-                min: 0,
-                setValueAs: Math.round,
-                onBlur,
-              })}
-            />
-            <Button type="submit" size="small" variant="contained" sx={{ ml: 1 }}>
-              Save
-            </Button>
-          </form>
-        </Paper>
+  return (
+    <Box display="flex" alignItems="center" gap={1} position="relative">
+      {safeTxGas}
+
+      {isEditable && (
+        <Link component="button" onClick={() => setEditing(true)} fontSize="small">
+          Edit
+        </Link>
       )}
+
+      {editing && <Form onSubmit={() => setEditing(false)} />}
     </Box>
   )
 }

diff --git a/src/components/transactions/TxDetails/Summary/index.tsx b/src/components/transactions/TxDetails/Summary/index.tsx
@@ -79,6 +79,8 @@ export const PartialSummary = ({ safeTx }: { safeTx: SafeTransaction }) => {
       <TxDataRow title="safeTxGas:">
         <SafeTxGasForm />
       </TxDataRow>
+      <TxDataRow title="baseGas:">{txData.baseGas}</TxDataRow>
+      <TxDataRow title="refundReceiver:">{generateDataRowValue(txData.refundReceiver, 'hash', true)}</TxDataRow>
       <TxDataRow title="Raw data:">{generateDataRowValue(txData.data, 'rawData')}</TxDataRow>
     </>
   )