correctly handle execution through ser-kit

gnosisguild · Aug 16, 2024 · bb6eb46 · bb6eb46
1 parent 3515f34
commit bb6eb46
Show file tree

Hide file tree

Showing 17 changed files with 137 additions and 259 deletions.
diff --git a/extension/.pnp.cjs b/extension/.pnp.cjs
diff --git a/extension/.yarn/cache/ser-kit-npm-0.3.15-ebfc625b6e-c37d3ab05d.zip b/extension/.yarn/cache/ser-kit-npm-0.3.15-ebfc625b6e-c37d3ab05d.zip
diff --git a/extension/.yarn/cache/ser-kit-npm-0.3.17-e7d41dfb07-8a08a37aff.zip b/extension/.yarn/cache/ser-kit-npm-0.3.17-e7d41dfb07-8a08a37aff.zip
diff --git a/extension/package.json b/extension/package.json
@@ -80,7 +80,7 @@
     "react-select": "^5.2.1",
     "react-toastify": "^9.0.8",
     "rimraf": "^3.0.2",
-    "ser-kit": "^0.3.15",
+    "ser-kit": "^0.3.17",
     "typescript": "^5.5.4",
     "typescript-eslint": "^7.16.0",
     "typescript-plugin-css-modules": "^5.1.0",

diff --git a/extension/src/browser/Drawer/Remove.tsx b/extension/src/browser/Drawer/Remove.tsx
@@ -3,7 +3,7 @@ import { RiDeleteBinLine } from 'react-icons/ri'
 import { IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { useProvider } from '../ProvideProvider'
-import { TransactionState, useDispatch, useNewTransactions } from '../../state'
+import { TransactionState, useDispatch, useTransactions } from '../../state'
 
 import classes from './style.module.css'
 
@@ -15,7 +15,7 @@ type Props = {
 export const Remove: React.FC<Props> = ({ transactionState, index }) => {
   const provider = useProvider()
   const dispatch = useDispatch()
-  const transactions = useNewTransactions()
+  const transactions = useTransactions()
 
   if (!(provider instanceof ForkProvider)) {
     // Removing transactions is only supported when using ForkProvider

diff --git a/extension/src/browser/Drawer/Submit.tsx b/extension/src/browser/Drawer/Submit.tsx
@@ -6,8 +6,6 @@ import { toast } from 'react-toastify'
 import { Button, IconButton } from '../../components'
 import toastClasses from '../../components/Toast/Toast.module.css'
 import { EXPLORER_URL, CHAIN_NAME } from '../../chains'
-import { waitForMultisigExecution } from '../../integrations/safe'
-// import { shallExecuteDirectly } from '../../safe/sendTransaction'
 import { useRoute } from '../../routes'
 import { JsonRpcError, ProviderType } from '../../types'
 import {
@@ -16,33 +14,22 @@ import {
   decodeRolesV2Error,
 } from '../../utils'
 import { useSubmitTransactions } from '../ProvideProvider'
-import { useDispatch, useNewTransactions } from '../../state'
+import { useTransactions } from '../../state'
 
 import classes from './style.module.css'
 import { getReadOnlyProvider } from '../../providers/readOnlyProvider'
 import { usePushConnectionsRoute } from '../../routing'
-import { PrefixedAddress } from 'ser-kit'
+import { parsePrefixedAddress, PrefixedAddress } from 'ser-kit'
+import { waitForMultisigExecution } from '../../integrations/safe'
 
 const Submit: React.FC = () => {
   const { route, chainId, connect, connected } = useRoute()
-  const { initiator, providerType } = route
-  const dispatch = useDispatch()
+  const { initiator, providerType, avatar } = route
   const pushConnectionsRoute = usePushConnectionsRoute()
 
-  const transactions = useNewTransactions()
+  const transactions = useTransactions()
   const submitTransactions = useSubmitTransactions()
   const [signaturePending, setSignaturePending] = useState(false)
-  // const [executesDirectly, setExecutesDirectly] = useState(false)
-
-  // useEffect(() => {
-  //   let canceled = false
-  //   shallExecuteDirectly(provider, connection).then((executesDirectly) => {
-  //     if (!canceled) setExecutesDirectly(executesDirectly)
-  //   })
-  //   return () => {
-  //     canceled = true
-  //   }
-  // }, [provider, connection])
 
   const connectWallet = () => {
     pushConnectionsRoute(route.id)
@@ -64,9 +51,13 @@ const Submit: React.FC = () => {
 
     if (!submitTransactions) throw new Error('invariant violation')
     setSignaturePending(true)
-    let batchTransactionHash: string
+
+    let result: {
+      txHash?: `0x${string}`
+      safeTxHash?: `0x${string}`
+    }
     try {
-      batchTransactionHash = await submitTransactions()
+      result = await submitTransactions()
     } catch (e) {
       console.warn(e)
       setSignaturePending(false)
@@ -86,40 +77,68 @@ const Submit: React.FC = () => {
     }
     setSignaturePending(false)
 
-    // wait for transaction to be mined
-    const realBatchTransactionHash = await waitForMultisigExecution(
-      chainId,
-      batchTransactionHash
-    )
-    console.log(
-      `Transaction batch ${batchTransactionHash} has been executed with transaction hash ${realBatchTransactionHash}`
-    )
-    const receipt = await getReadOnlyProvider(chainId).waitForTransaction(
-      realBatchTransactionHash
-    )
-    console.log(
-      `Transaction ${realBatchTransactionHash} has been mined`,
-      receipt
-    )
-
-    dispatch({
-      type: 'CLEAR_TRANSACTIONS',
-      payload: { batchTransactionHash },
-    })
-
-    toast(
-      <>
-        Transaction batch has been executed
-        <a
-          href={`${EXPLORER_URL[chainId]}/tx/${realBatchTransactionHash}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <RiExternalLinkLine />
-          View on block explorer
-        </a>
-      </>
-    )
+    const { txHash, safeTxHash } = result
+    if (txHash) {
+      console.log(
+        `Transaction batch has been submitted with transaction hash ${txHash}`
+      )
+      const receipt =
+        await getReadOnlyProvider(chainId).waitForTransaction(txHash)
+      console.log(`Transaction ${txHash} has been executed`, receipt)
+
+      toast(
+        <>
+          Transaction batch has been executed
+          <a
+            href={`${EXPLORER_URL[chainId]}/tx/${txHash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <RiExternalLinkLine />
+            View in block explorer
+          </a>
+        </>
+      )
+    }
+
+    if (safeTxHash) {
+      console.log(
+        `Transaction batch has been proposed with safeTxHash ${safeTxHash}`
+      )
+      const [, avatarAddress] = parsePrefixedAddress(avatar)
+      toast(
+        <>
+          Transaction batch has been proposed for execution
+          <a
+            href={`//app.safe.global/transactions/tx?safe=${avatar}&id=multisig_${avatarAddress}_${safeTxHash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <RiExternalLinkLine />
+            {'View in Safe{Wallet}'}
+          </a>
+        </>
+      )
+
+      // In case the other safe owners are quick enough to sign while the Pilot session is still open, we can show a toast with an execution confirmation
+      const txHash = await waitForMultisigExecution(chainId, safeTxHash)
+      console.log(
+        `Proposed transaction batch with safeTxHash ${safeTxHash} has been confirmed and executed with transaction hash ${txHash}`
+      )
+      toast(
+        <>
+          Proposed Safe transaction has been confirmed and executed{' '}
+          <a
+            href={`${EXPLORER_URL[chainId]}/tx/${txHash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <RiExternalLinkLine />
+            View in block explorer
+          </a>
+        </>
+      )
+    }
   }
 
   return (
@@ -151,15 +170,6 @@ const Submit: React.FC = () => {
           account={initiator}
         />
       )}
-
-      {/* {signaturePending && executesDirectly && (
-        <AwaitingMultisigExecutionModal
-          isOpen={signaturePending}
-          onClose={() => setSignaturePending(false)}
-          chainId={chainId}
-          avatarAddress={avatarAddress}
-        />
-      )} */}
     </>
   )
 }
@@ -200,37 +210,6 @@ const AwaitingSignatureModal: React.FC<{
   </Modal>
 )
 
-// const AwaitingMultisigExecutionModal: React.FC<{
-//   isOpen: boolean
-//   onClose(): void
-//   chainId: ChainId
-//   avatarAddress: string
-// }> = ({ isOpen, onClose, chainId, avatarAddress }) => (
-//   <Modal
-//     isOpen={isOpen}
-//     style={modalStyle}
-//     contentLabel="Sign the batch transaction"
-//   >
-//     <IconButton className={classes.modalClose} title="Cancel" onClick={onClose}>
-//       <RiCloseLine />
-//     </IconButton>
-//     <p>Awaiting execution of Safe transaction ...</p>
-
-//     <br />
-//     <p>
-//       <a
-//         className={classes.safeAppLink}
-//         href={`https://app.safe.global/${NETWORK_PREFIX[chainId]}:${avatarAddress}/transactions/queue`}
-//         target="_blank"
-//         rel="noreferrer"
-//       >
-//         <RiExternalLinkLine />
-//         Collect signatures and trigger execution
-//       </a>
-//     </p>
-//   </Modal>
-// )
-
 Modal.setAppElement('#root')
 
 const modalStyle: Styles = {

diff --git a/extension/src/browser/Drawer/Translate.tsx b/extension/src/browser/Drawer/Translate.tsx
@@ -5,7 +5,7 @@ import { IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { useApplicableTranslation } from '../../transactionTranslations'
 import { useProvider } from '../ProvideProvider'
-import { TransactionState, useDispatch, useNewTransactions } from '../../state'
+import { TransactionState, useDispatch, useTransactions } from '../../state'
 
 import classes from './style.module.css'
 
@@ -22,7 +22,7 @@ export const Translate: React.FC<Props> = ({
 }) => {
   const provider = useProvider()
   const dispatch = useDispatch()
-  const transactions = useNewTransactions()
+  const transactions = useTransactions()
   const translation = useApplicableTranslation(transactionState.transaction)
 
   if (!(provider instanceof ForkProvider)) {