Merge pull request #93 from gnosisguild/fix-delegatecall

Fix an edge case when submitting a delegatecall transactions

extension/src/app.tsx

@@ -9,7 +9,7 @@ import './global.css'
 import Browser from './browser'
 import ConnectionsDrawer from './connections/ConnectionsDrawer'
 import ProvideProvider from './browser/ProvideProvider'
-import { ProvideState } from './browser/state'
+import { ProvideState } from './state'
 import ZodiacToastContainer from './components/Toast'
 import { pushLocation } from './location'
 import { ProvideMetaMask, ProvideTenderly } from './providers'

extension/src/browser/Drawer/Remove.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { RiDeleteBinLine } from 'react-icons/ri'
-import { encodeSingle, TransactionInput } from 'react-multisend'
+import { TransactionInput } from 'react-multisend'
 
 import { IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { useProvider } from '../ProvideProvider'
-import { useDispatch, useNewTransactions } from '../state'
+import { useDispatch, useNewTransactions } from '../../state'
 
 import classes from './style.module.css'
+import { encodeTransaction } from '../../encodeTransaction'
 
 type Props = {
   transaction: TransactionInput
@@ -42,7 +43,7 @@ export const Remove: React.FC<Props> = ({ transaction, index }) => {
 
     // re-simulate all transactions after the removed one
     for (const transaction of laterTransactions) {
-      const encoded = encodeSingle(transaction.input)
+      const encoded = encodeTransaction(transaction)
       await provider.sendMetaTransaction(encoded)
     }
   }

extension/src/browser/Drawer/RolePermissionCheck.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useEffect, useState } from 'react'
 import { RiGroupLine } from 'react-icons/ri'
 import { encodeSingle, TransactionInput } from 'react-multisend'
@@ -64,7 +64,13 @@ const RolePermissionCheck: React.FC<{
   const { connection } = useConnection()
   const tenderlyProvider = useTenderlyProvider()
 
-  const encodedTransaction = encodeSingle(transaction)
+  const encodedTransaction = useMemo(
+    () => ({
+      ...encodeSingle(transaction),
+      operation: isDelegateCall ? 1 : 0,
+    }),
+    [transaction, isDelegateCall]
+  )
 
   const translationAvailable = !!useApplicableTranslation(encodedTransaction)
 

extension/src/browser/Drawer/Submit.tsx

@@ -16,7 +16,7 @@ import {
   decodeRolesV2Error,
 } from '../../utils'
 import { useSubmitTransactions } from '../ProvideProvider'
-import { useDispatch, useNewTransactions } from '../state'
+import { useDispatch, useNewTransactions } from '../../state'
 
 import classes from './style.module.css'
 import { getReadOnlyProvider } from '../../providers/readOnlyProvider'

extension/src/browser/Drawer/Transaction.tsx

@@ -8,7 +8,7 @@ import { Box, Flex } from '../../components'
 import ToggleButton from '../../components/Drawer/ToggleButton'
 import { CHAIN_CURRENCY } from '../../chains'
 import { useConnection } from '../../connections'
-import { TransactionState } from '../state'
+import { TransactionState } from '../../state'
 
 import CallContract from './CallContract'
 import ContractAddress from './ContractAddress'

extension/src/browser/Drawer/Translate.tsx

@@ -6,9 +6,10 @@ import { IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { useApplicableTranslation } from '../../transactionTranslations'
 import { useProvider } from '../ProvideProvider'
-import { useDispatch, useNewTransactions } from '../state'
+import { useDispatch, useNewTransactions } from '../../state'
 
 import classes from './style.module.css'
+import { encodeTransaction } from '../../encodeTransaction'
 
 type Props = {
   transaction: TransactionInput
@@ -44,7 +45,7 @@ export const Translate: React.FC<Props> = ({
   const handleTranslate = async () => {
     const laterTransactions = transactions
       .slice(index + 1)
-      .map((t) => encodeSingle(t.input))
+      .map(encodeTransaction)
 
     // remove the transaction and all later ones from the store
     dispatch({ type: 'REMOVE_TRANSACTION', payload: { id: transaction.id } })

extension/src/browser/Drawer/index.tsx

@@ -1,19 +1,24 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { RiFileCopy2Line, RiRefreshLine } from 'react-icons/ri'
-import { encodeMulti, encodeSingle } from 'react-multisend'
+import { encodeMulti } from 'react-multisend'
 import { toast } from 'react-toastify'
 
 import { BlockButton, Button, Drawer, Flex, IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { wrapRequest } from '../../providers/WrappingProvider'
 import { useConnection } from '../../connections'
 import { useProvider } from '../ProvideProvider'
-import { useAllTransactions, useDispatch, useNewTransactions } from '../state'
+import {
+  useAllTransactions,
+  useDispatch,
+  useNewTransactions,
+} from '../../state'
 
 import Submit from './Submit'
 import { Transaction, TransactionBadge } from './Transaction'
 import classes from './style.module.css'
 import { MULTI_SEND_ADDRESS } from '../../chains'
+import { encodeTransaction } from '../../encodeTransaction'
 
 const TransactionsDrawer: React.FC = () => {
   const [expanded, setExpanded] = useState(true)
@@ -53,14 +58,14 @@ const TransactionsDrawer: React.FC = () => {
 
     // re-simulate all new transactions (assuming the already submitted ones have already been mined on the fresh fork)
     for (const transaction of newTransactions) {
-      const encoded = encodeSingle(transaction.input)
+      const encoded = encodeTransaction(transaction)
       await provider.sendMetaTransaction(encoded)
     }
   }
 
   const copyTransactionData = () => {
     if (!connection.chainId) throw new Error('chainId is undefined')
-    const metaTransactions = newTransactions.map((tx) => encodeSingle(tx.input))
+    const metaTransactions = newTransactions.map(encodeTransaction)
     const batchTransaction =
       metaTransactions.length === 1
         ? metaTransactions[0]

extension/src/browser/ProvideProvider.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react'
-import { decodeSingle, encodeMulti, encodeSingle } from 'react-multisend'
+import { decodeSingle, encodeMulti } from 'react-multisend'
 
 import { MULTI_SEND_ADDRESS } from '../chains'
 import {
@@ -18,7 +18,8 @@ import { useConnection } from '../connections'
 import { Eip1193Provider } from '../types'
 
 import fetchAbi from './fetchAbi'
-import { useDispatch, useNewTransactions } from './state'
+import { useDispatch, useNewTransactions } from '../state'
+import { encodeTransaction } from '../encodeTransaction'
 
 interface Props {
   simulate: boolean
@@ -101,9 +102,7 @@ const ProvideProvider: React.FC<Props> = ({ simulate, children }) => {
   )
 
   const submitTransactions = useCallback(async () => {
-    const metaTransactions = transactions.map((txState) =>
-      encodeSingle(txState.input)
-    )
+    const metaTransactions = transactions.map(encodeTransaction)
 
     console.log(
       transactions.length === 1

extension/src/connections/ConnectionsDrawer/Edit/index.tsx

@@ -21,7 +21,7 @@ import {
   useSelectedConnectionId,
 } from '../../connectionHooks'
 import useConnectionDryRun from '../../useConnectionDryRun'
-import { useClearTransactions } from '../../../browser/state/transactionHooks'
+import { useClearTransactions } from '../../../state/transactionHooks'
 
 import classes from './style.module.css'
 import { decodeRoleKey, encodeRoleKey } from '../../../utils'

extension/src/connections/ConnectionsDrawer/List/index.tsx

@@ -18,7 +18,7 @@ import {
   useSelectedConnectionId,
 } from '../../connectionHooks'
 import { Connection, ProviderType } from '../../../types'
-import { useClearTransactions } from '../../../browser/state/transactionHooks'
+import { useClearTransactions } from '../../../state/transactionHooks'
 
 import classes from './style.module.css'
 

extension/src/encodeTransaction.ts

@@ -0,0 +1,9 @@
+import { encodeSingle } from 'react-multisend'
+import { TransactionState } from './state'
+
+export const encodeTransaction = (transaction: TransactionState) => {
+  return {
+    ...encodeSingle(transaction.input),
+    operation: transaction.isDelegateCall ? 1 : 0,
+  }
+}

extension/src/providers/WrappingProvider.ts

@@ -78,7 +78,9 @@ class WrappingProvider extends EventEmitter {
   constructor(provider: Eip1193Provider, connection: Connection) {
     super()
     this.provider = provider
-    this.signer = new Web3Provider(provider).getSigner()
+    this.signer = new Web3Provider(this.provider).getUncheckedSigner(
+      connection.pilotAddress
+    )
     this.connection = connection
   }
 

extension/src/browser/state/transactionHooks.ts → extension/src/state/transactionHooks.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 
-import { ForkProvider } from '../../providers'
-import { useProvider } from '../ProvideProvider'
+import { ForkProvider } from '../providers'
+import { useProvider } from '../browser/ProvideProvider'
 
 import { useAllTransactions, useDispatch } from '.'