From f100dac0ec340173f5dae6023ffe55ed3663fe39 Mon Sep 17 00:00:00 2001
From: Franco Venica <francovenica@gmail.com>
Date: Mon, 20 Nov 2023 22:30:42 -0300
Subject: [PATCH] fix:Add loading icons to buttons

---
 .../flows/ExecuteBatch/ReviewBatch.tsx        | 12 ++++++--
 .../tx/SignOrExecuteForm/ExecuteForm.tsx      |  6 ++--
 .../tx/SignOrExecuteForm/SignForm.tsx         | 12 ++++++--
 .../tx/SignOrExecuteForm/SubmitButton.tsx     | 29 -------------------
 4 files changed, 21 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/tx/SignOrExecuteForm/SubmitButton.tsx

diff --git a/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx b/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx
index c1277142af..c95deb0b12 100644
--- a/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx
+++ b/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx
@@ -1,4 +1,4 @@
-import { Typography, Button, CardActions, Divider, Alert } from '@mui/material'
+import { CircularProgress, Typography, Button, CardActions, Divider, Alert } from '@mui/material'
 import useAsync from '@/hooks/useAsync'
 import { FEATURES } from '@safe-global/safe-gateway-typescript-sdk'
 import type { TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
@@ -194,8 +194,14 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
           <CardActions>
             <CheckWallet allowNonOwner={true}>
               {(isOk) => (
-                <Button variant="contained" type="submit" disabled={!isOk || submitDisabled} onClick={handleSubmit}>
-                  Submit
+                <Button
+                  variant="contained"
+                  type="submit"
+                  disabled={!isOk || submitDisabled}
+                  onClick={handleSubmit}
+                  sx={{ minWidth: '114px' }}
+                >
+                  {!isSubmittable ? <CircularProgress size={20} /> : 'Submit'}
                 </Button>
               )}
             </CheckWallet>
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index 72ae840fc6..ec64f35893 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement, type SyntheticEvent, useContext, useState } from 'react'
-import { Box, Button, CardActions, Divider } from '@mui/material'
+import { CircularProgress, Box, Button, CardActions, Divider } from '@mui/material'
 import classNames from 'classnames'
 
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -156,8 +156,8 @@ const ExecuteForm = ({
           {/* Submit button */}
           <CheckWallet allowNonOwner={onlyExecute}>
             {(isOk) => (
-              <Button variant="contained" type="submit" disabled={!isOk || submitDisabled}>
-                Execute
+              <Button variant="contained" type="submit" disabled={!isOk || submitDisabled} sx={{ minWidth: '112px' }}>
+                {!isSubmittable ? <CircularProgress size={20} /> : 'Execute'}
               </Button>
             )}
           </CheckWallet>
diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx
index 410254da8e..ce02977c13 100644
--- a/src/components/tx/SignOrExecuteForm/SignForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignForm.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement, type SyntheticEvent, useContext, useState } from 'react'
-import { Box, Button, CardActions, Divider } from '@mui/material'
+import { CircularProgress, Box, Button, CardActions, Divider } from '@mui/material'
 
 import ErrorMessage from '@/components/tx/ErrorMessage'
 import { trackError, Errors } from '@/services/exceptions'
@@ -103,8 +103,14 @@ const SignForm = ({
           {/* Submit button */}
           <CheckWallet>
             {(isOk) => (
-              <Button data-testid="sign-btn" variant="contained" type="submit" disabled={!isOk || submitDisabled}>
-                Sign
+              <Button
+                data-testid="sign-btn"
+                variant="contained"
+                type="submit"
+                disabled={!isOk || submitDisabled}
+                sx={{ minWidth: '82px' }}
+              >
+                {!isSubmittable ? <CircularProgress size={20} /> : 'Sign'}
               </Button>
             )}
           </CheckWallet>
diff --git a/src/components/tx/SignOrExecuteForm/SubmitButton.tsx b/src/components/tx/SignOrExecuteForm/SubmitButton.tsx
deleted file mode 100644
index 8412086eab..0000000000
--- a/src/components/tx/SignOrExecuteForm/SubmitButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import CheckWallet from '@/components/common/CheckWallet'
-import { Button } from '@mui/material'
-import { useContext } from 'react'
-import { TxSecurityContext } from '../security/shared/TxSecurityContext'
-
-const SubmitButton = ({
-  willExecute,
-  submitDisabled,
-  isEstimating,
-}: {
-  willExecute: boolean
-  submitDisabled: boolean
-  isEstimating: boolean
-}) => {
-  const { needsRiskConfirmation, isRiskConfirmed } = useContext(TxSecurityContext)
-
-  const disableButton = submitDisabled || (needsRiskConfirmation && !isRiskConfirmed)
-  return (
-    <CheckWallet allowNonOwner={willExecute}>
-      {(isOk) => (
-        <Button variant="contained" type="submit" disabled={!isOk || disableButton}>
-          {isEstimating ? 'Estimating...' : 'Submit'}
-        </Button>
-      )}
-    </CheckWallet>
-  )
-}
-
-export default SubmitButton