feat: simulation (#2157)

* feat: simulation * Add context, update logos, remove canExecute * fix: reset on tx change + simplify context --------- Co-authored-by: Usame Algan <[email protected]>
safe-global · Jun 26, 2023 · 4eae3e6 · 4eae3e6
1 parent d259685
commit 4eae3e6
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 66 deletions.
diff --git a/public/images/common/close.svg b/public/images/common/close.svg
diff --git a/public/images/transactions/tenderly-dark.svg b/public/images/transactions/tenderly-dark.svg
diff --git a/public/images/transactions/tenderly-light.svg b/public/images/transactions/tenderly-light.svg
diff --git a/src/components/tx-flow/TxInfoProvider.tsx b/src/components/tx-flow/TxInfoProvider.tsx
@@ -0,0 +1,23 @@
+import { createContext } from 'react'
+
+import { useSimulation, type UseSimulationReturn } from '@/components/tx/TxSimulation/useSimulation'
+import { FETCH_STATUS } from '@/components/tx/TxSimulation/types'
+
+export const TxInfoContext = createContext<{
+  simulation: UseSimulationReturn
+}>({
+  simulation: {
+    simulateTransaction: () => {},
+    simulation: undefined,
+    simulationRequestStatus: FETCH_STATUS.NOT_ASKED,
+    simulationLink: '',
+    requestError: undefined,
+    resetSimulation: () => {},
+  },
+})
+
+export const TxInfoProvider = ({ children }: { children: JSX.Element }) => {
+  const simulation = useSimulation()
+
+  return <TxInfoContext.Provider value={{ simulation }}>{children}</TxInfoContext.Provider>
+}
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -4,9 +4,11 @@ import { useTheme } from '@mui/material/styles'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import { ProgressBar } from '@/components/common/ProgressBar'
 import SafeTxProvider from '../../SafeTxProvider'
+import { TxInfoProvider } from '@/components/tx-flow/TxInfoProvider'
 import TxNonce from '../TxNonce'
 import TxStatusWidget from '../TxStatusWidget'
 import css from './styles.module.css'
+import { TxSimulationMessage } from '@/components/tx/NewTxSimulation'
 import SafeLogo from '@/public/images/logo-no-text.svg'
 
 type TxLayoutProps = {
@@ -48,65 +50,70 @@ const TxLayout = ({
 
   return (
     <SafeTxProvider>
-      <Container className={css.container}>
-        <Grid container alignItems="center" justifyContent="center">
-          <Grid item xs={12}>
-            <Typography variant="h3" component="div" fontWeight="700" mb={2} className={css.title}>
-              {title}
-            </Typography>
-            <IconButton
-              className={css.statusButton}
-              aria-label="Transaction status"
-              size="large"
-              onClick={toggleStatus}
-            >
-              <SafeLogo width={16} height={16} />
-            </IconButton>
-          </Grid>
+      <TxInfoProvider>
+        <Container className={css.container}>
+          <Grid container alignItems="center" justifyContent="center">
+            <Grid item xs={12}>
+              <Typography variant="h3" component="div" fontWeight="700" mb={2} className={css.title}>
+                {title}
+              </Typography>
+              <IconButton
+                className={css.statusButton}
+                aria-label="Transaction status"
+                size="large"
+                onClick={toggleStatus}
+              >
+                <SafeLogo width={16} height={16} />
+              </IconButton>
+            </Grid>
 
-          <Grid item container xs={12} gap={3}>
-            <Grid item xs={12} md={7}>
-              <Paper className={css.header}>
-                <Box className={css.progressBar}>
-                  <ProgressBar value={progress} />
-                </Box>
+            <Grid item container xs={12} gap={3}>
+              <Grid item xs={12} md={7}>
+                <Paper className={css.header}>
+                  <Box className={css.progressBar}>
+                    <ProgressBar value={progress} />
+                  </Box>
 
-                <Box className={css.headerInner}>
-                  <Box display="flex" alignItems="center">
-                    {icon && (
-                      <div className={css.icon}>
-                        <SvgIcon component={icon} inheritViewBox />
-                      </div>
-                    )}
+                  <Box className={css.headerInner}>
+                    <Box display="flex" alignItems="center">
+                      {icon && (
+                        <div className={css.icon}>
+                          <SvgIcon component={icon} inheritViewBox />
+                        </div>
+                      )}
 
-                    <Typography variant="h4" component="div" fontWeight="bold">
-                      {subtitle}
-                    </Typography>
-                  </Box>
+                      <Typography variant="h4" component="div" fontWeight="bold">
+                        {subtitle}
+                      </Typography>
+                    </Box>
 
-                  {!hideNonce && <TxNonce />}
-                </Box>
-              </Paper>
+                    {!hideNonce && <TxNonce />}
+                  </Box>
+                </Paper>
 
-              <div className={css.step}>
-                {steps[step]}
+                <div className={css.step}>
+                  {steps[step]}
 
-                {onBack && step > 0 && (
-                  <Button variant="contained" onClick={onBack} className={css.backButton}>
-                    Back
-                  </Button>
-                )}
-              </div>
-            </Grid>
+                  {onBack && step > 0 && (
+                    <Button variant="contained" onClick={onBack} className={css.backButton}>
+                      Back
+                    </Button>
+                  )}
+                </div>
+              </Grid>
 
-            {statusVisible && (
               <Grid item xs={12} md={4} className={css.widget}>
-                <TxStatusWidget step={step} txSummary={txSummary} handleClose={() => setStatusVisible(false)} />
+                {statusVisible && (
+                  <TxStatusWidget step={step} txSummary={txSummary} handleClose={() => setStatusVisible(false)} />
+                )}
+                <Box mt={2}>
+                  <TxSimulationMessage />
+                </Box>
               </Grid>
-            )}
+            </Grid>
           </Grid>
-        </Grid>
-      </Container>
+        </Container>
+      </TxInfoProvider>
     </SafeTxProvider>
   )
 }

diff --git a/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx b/src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx
@@ -9,7 +9,7 @@ import ErrorMessage from '@/components/tx/ErrorMessage'
 import { ExecutionMethod, ExecutionMethodSelector } from '@/components/tx/ExecutionMethodSelector'
 import DecodedTxs from '@/components/tx-flow/flows/ExecuteBatch/DecodedTxs'
 import SendToBlock from '@/components/tx/SendToBlock'
-import { TxSimulation } from '@/components/tx/TxSimulation'
+import { TxSimulation } from '@/components/tx/NewTxSimulation'
 import { WrongChainWarning } from '@/components/tx/WrongChainWarning'
 import useAsync from '@/hooks/useAsync'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -150,7 +150,7 @@ executions from the same Safe Account."
         <TxCard>
           <Typography variant="h5">Transaction checks</Typography>
 
-          <TxSimulation canExecute transactions={multiSendTxs} disabled={submitDisabled} />
+          <TxSimulation transactions={multiSendTxs} disabled={submitDisabled} />
         </TxCard>
       )}