Merge pull request #64 from gnosis/cowswap_integration

CoWSwap integration

README.md

@@ -33,9 +33,9 @@ yarn build
 
 The extension consists of three different interacting pieces:
 
-- **extension app:** This is the main app rendering the iframe. The entrypoint to the app is [launch.ts](src/launch.ts) which is injected into pages running under the [Zodiac Pilot host](#zodiac-pilot-host) via a [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/).
-- **background script:** A [service worker script](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#service-workers) that allows to hook into different Chrome events and APIs: [src/background.ts](src/background.ts)
-- **injected script:** Whenever we load any page in the the extension app iframe, we inject [src/inject.ts](src/inject.ts) into the page so that this script runs in the context of that page. The injection happens via the content script at [src/contentScript.ts](src/contentScript.ts).
+- **extension app:** This is the main app rendering the iframe. The entrypoint to the app is [launch.ts](extension/src/launch.ts) which is injected into pages running under the [Zodiac Pilot host](#zodiac-pilot-host) via a [content script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/).
+- **background script:** A [service worker script](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#service-workers) that allows to hook into different Chrome events and APIs: [src/background.ts](extension/src/background.ts)
+- **injected script:** Whenever we load any page in the the extension app iframe, we inject [src/inject.ts](extension/src/inject.ts) into the page so that this script runs in the context of that page. The injection happens via the content script at [src/contentScript.ts](extension/src/contentScript.ts).
 
 The different scripts communicate exclusively via message passing. Extension page and background script use `chrome.runtime.sendMessage` while extension page and injected script talk via `window.postMessage`.
 

e2e-tests/dappeteer.config.js

@@ -0,0 +1,13 @@
+/** @type {import('@chainsafe/dappeteer').DappeteerJestConfig} */
+
+const config = {
+  dappeteer: {
+    metamaskVersion: 'v10.16.2',
+  },
+  metamask: {
+    seed: process.env.SEED_PHRASE,
+    password: 'password1234',
+  },
+}
+
+module.exports = config

e2e-tests/helpers/setup.ts

@@ -2,15 +2,13 @@ import { promises } from 'fs'
 import os from 'os'
 import path from 'path'
 
-import {
-  setupMetamask,
-  RECOMMENDED_METAMASK_VERSION,
-} from '@chainsafe/dappeteer'
+import { setupMetamask } from '@chainsafe/dappeteer'
 
 import metamaskDownloader from '@chainsafe/dappeteer/dist/setup/metamaskDownloader'
 import mkdirp from 'mkdirp'
 import puppeteer from 'puppeteer'
 import * as dotenv from 'dotenv'
+import config from '../dappeteer.config'
 
 dotenv.config()
 
@@ -30,7 +28,9 @@ export default async function setup() {
   if (!firstRun) return // prevent relaunch in watch mode
   firstRun = false
 
-  const metamaskPath = await metamaskDownloader(RECOMMENDED_METAMASK_VERSION)
+  const metamaskPath = await metamaskDownloader(
+    config.dappeteer.metamaskVersion
+  )
   const browser = await puppeteer.launch({
     headless: false, // Dappeteer only works in headful mode
     executablePath: process.env.PUPPETEER_EXEC_PATH, // required for running in CI (env var is set in mujo-code/puppeteer-headful's container)
@@ -42,10 +42,7 @@ export default async function setup() {
   })
 
   try {
-    await setupMetamask(browser, {
-      seed: process.env.SEED_PHRASE,
-      password: 'password1234',
-    })
+    await setupMetamask(browser, config.metamask)
     ;(global as any).browser = browser
   } catch (error) {
     console.log(error)

extension/.cspell.json

@@ -13,11 +13,14 @@
     "borderless",
     "Bytecode",
     "cowswap",
+    "Delegatecall",
+    "delegatecalls",
     "esbuild",
     "ethersproject",
     "getsourcecode",
     "gnosisguild",
     "honeyswap",
+    "IERC20",
     "iframes",
     "instadapp",
     "mastercopy",
@@ -27,6 +30,7 @@
     "outdir",
     "paraswap",
     "prebuild",
+    "presignature",
     "proxied",
     "reflexer",
     "refork",
@@ -40,8 +44,10 @@
     "Sushiswap",
     "toastify",
     "typechain",
+    "Uids",
     "walletconnect",
-    "whatsabi"
+    "whatsabi",
+    "xdai"
   ],
   "flagWords": [],
   "ignorePaths": [

extension/src/browser/Drawer/Remove.tsx

@@ -8,7 +8,6 @@ import { useConnection } from '../../settings'
 import { useProvider } from '../ProvideProvider'
 import { useDispatch, useNewTransactions } from '../state'
 
-import { formatValue } from './formatValue'
 import classes from './style.module.css'
 
 type Props = {
@@ -44,20 +43,9 @@ export const Remove: React.FC<Props> = ({ transaction, index }) => {
     await provider.request({ method: 'evm_revert', params: [checkpoint] })
 
     // re-simulate all transactions after the removed one
-    for (let i = 0; i < laterTransactions.length; i++) {
-      const transaction = laterTransactions[i]
+    for (const transaction of laterTransactions) {
       const encoded = encodeSingle(transaction.input)
-      await provider.request({
-        method: 'eth_sendTransaction',
-        params: [
-          {
-            to: encoded.to,
-            data: encoded.data,
-            value: formatValue(encoded.value),
-            from: connection.avatarAddress,
-          },
-        ],
-      })
+      await provider.sendMetaTransaction(encoded, connection)
     }
   }
 

extension/src/browser/Drawer/RolePermissionCheck.tsx

@@ -4,7 +4,7 @@ import { RiGroupLine } from 'react-icons/ri'
 import { encodeSingle, TransactionInput } from 'react-multisend'
 
 import { Flex, Tag } from '../../components'
-import { findApplicableTranslation } from '../../transactionTranslations'
+import { useApplicableTranslation } from '../../transactionTranslations'
 import { JsonRpcError } from '../../types'
 import { decodeRolesError } from '../../utils'
 import { isPermissionsError } from '../../utils/decodeRolesError'
@@ -23,8 +23,7 @@ const RolePermissionCheck: React.FC<{
   const wrappingProvider = useWrappingProvider()
 
   const encodedTransaction = encodeSingle(transaction)
-
-  const translationAvailable = !!findApplicableTranslation(encodedTransaction)
+  const translationAvailable = !!useApplicableTranslation(encodedTransaction)
 
   useEffect(() => {
     let canceled = false
@@ -84,7 +83,7 @@ const RolePermissionCheck: React.FC<{
             )}
           </Flex>
         </Flex>
-        {error && translationAvailable && (
+        {error && !!translationAvailable && (
           <Translate transaction={transaction} index={index} labeled />
         )}
         {error && !translationAvailable && (

extension/src/browser/Drawer/Transaction.tsx

@@ -23,6 +23,7 @@ import classes from './style.module.css'
 interface HeaderProps {
   index: number
   input: TransactionInput
+  isDelegateCall: boolean
   transactionHash: TransactionState['transactionHash']
   onExpandToggle(): void
   expanded: boolean
@@ -32,6 +33,7 @@ interface HeaderProps {
 const TransactionHeader: React.FC<HeaderProps> = ({
   index,
   input,
+  isDelegateCall,
   transactionHash,
   onExpandToggle,
   expanded,
@@ -48,6 +50,9 @@ const TransactionHeader: React.FC<HeaderProps> = ({
           {input.type === TransactionType.callContract
             ? input.functionSignature.split('(')[0]
             : 'Raw transaction'}
+          {isDelegateCall && (
+            <code className={classes.delegateCall}>delegatecall</code>
+          )}
         </h5>
       </label>
       <div className={classes.end}>
@@ -104,6 +109,7 @@ export const Transaction: React.FC<Props> = ({
   index,
   transactionHash,
   input,
+  isDelegateCall,
   scrollIntoView,
 }) => {
   const [expanded, setExpanded] = useState(true)
@@ -116,6 +122,7 @@ export const Transaction: React.FC<Props> = ({
       <TransactionHeader
         index={index}
         input={input}
+        isDelegateCall={isDelegateCall}
         transactionHash={transactionHash}
         expanded={expanded}
         onExpandToggle={() => setExpanded(!expanded)}
@@ -140,6 +147,7 @@ export const Transaction: React.FC<Props> = ({
           </Box>
           <TransactionStatus
             input={input}
+            isDelegateCall={isDelegateCall}
             index={index}
             transactionHash={transactionHash}
             showRoles={showRoles}

extension/src/browser/Drawer/Translate.tsx

@@ -5,11 +5,10 @@ import { encodeSingle, TransactionInput } from 'react-multisend'
 import { IconButton } from '../../components'
 import { ForkProvider } from '../../providers'
 import { useConnection } from '../../settings'
-import { findApplicableTranslation } from '../../transactionTranslations'
+import { useApplicableTranslation } from '../../transactionTranslations'
 import { useProvider } from '../ProvideProvider'
 import { useDispatch, useNewTransactions } from '../state'
 
-import { formatValue } from './formatValue'
 import classes from './style.module.css'
 
 type Props = {
@@ -23,24 +22,19 @@ export const Translate: React.FC<Props> = ({ transaction, index, labeled }) => {
   const dispatch = useDispatch()
   const transactions = useNewTransactions()
   const { connection } = useConnection()
+  const encodedTransaction = encodeSingle(transaction)
+  const translation = useApplicableTranslation(encodedTransaction)
 
   if (!(provider instanceof ForkProvider)) {
     // Transaction translation is only supported when using ForkProvider
     return null
   }
 
-  const encodedTransaction = encodeSingle(transaction)
-  const translation = findApplicableTranslation(encodedTransaction)
   if (!translation) {
     return null
   }
 
   const handleTranslate = async () => {
-    const translatedTransactions = translation.translate(encodedTransaction)
-    if (!translatedTransactions) {
-      throw new Error('Translation failed')
-    }
-
     const laterTransactions = transactions
       .slice(index + 1)
       .map((t) => encodeSingle(t.input))
@@ -53,19 +47,9 @@ export const Translate: React.FC<Props> = ({ transaction, index, labeled }) => {
     await provider.request({ method: 'evm_revert', params: [checkpoint] })
 
     // re-simulate all transactions starting with the translated ones
-    const replayTransaction = [...translatedTransactions, ...laterTransactions]
+    const replayTransaction = [...translation.result, ...laterTransactions]
     for (const tx of replayTransaction) {
-      await provider.request({
-        method: 'eth_sendTransaction',
-        params: [
-          {
-            to: tx.to,
-            data: tx.data,
-            value: formatValue(tx.value),
-            from: connection.avatarAddress,
-          },
-        ],
-      })
+      provider.sendMetaTransaction(tx, connection)
     }
   }
 

extension/src/browser/Drawer/index.tsx

@@ -12,7 +12,6 @@ import { useAllTransactions, useDispatch, useNewTransactions } from '../state'
 
 import Submit from './Submit'
 import { Transaction, TransactionBadge } from './Transaction'
-import { formatValue } from './formatValue'
 import classes from './style.module.css'
 
 const TransactionsDrawer: React.FC = () => {
@@ -52,20 +51,9 @@ const TransactionsDrawer: React.FC = () => {
     await provider.refork()
 
     // re-simulate all new transactions (assuming the already submitted ones have already been mined on the fresh fork)
-    for (let i = 0; i < newTransactions.length; i++) {
-      const transaction = newTransactions[i]
+    for (const transaction of newTransactions) {
       const encoded = encodeSingle(transaction.input)
-      await provider.request({
-        method: 'eth_sendTransaction',
-        params: [
-          {
-            to: encoded.to,
-            data: encoded.data,
-            value: formatValue(encoded.value),
-            from: connection.avatarAddress,
-          },
-        ],
-      })
+      await provider.sendMetaTransaction(encoded, connection)
     }
   }
 

extension/src/browser/Drawer/style.module.css

@@ -137,6 +137,11 @@
   align-items: center;
   justify-content: center;
 }
+.delegateCall {
+  font-size: 10px;
+  margin-left: 8px;
+}
+
 .subtitleContainer {
   margin-top: 8px;
 }

extension/src/browser/ProvideProvider.tsx

@@ -40,8 +40,6 @@ const SubmitTransactionsContext = createContext<(() => Promise<string>) | null>(
 )
 export const useSubmitTransactions = () => useContext(SubmitTransactionsContext)
 
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-
 const ProvideProvider: React.FC<Props> = ({ simulate, children }) => {
   const { provider, connection, chainId } = useConnection()
   const tenderlyProvider = useTenderlyProvider()
@@ -57,22 +55,20 @@ const ProvideProvider: React.FC<Props> = ({ simulate, children }) => {
     () =>
       tenderlyProvider &&
       new ForkProvider(tenderlyProvider, connection.avatarAddress, {
-        async onBeforeTransactionSend(txId, txData) {
+        async onBeforeTransactionSend(txId, metaTx) {
+          const isDelegateCall = metaTx.operation === 1
+
           // Calling decodeSingle without a fetchAbi will return a raw transaction input object instantly.
           // We already append to the state so the UI reacts immediately.
           const inputRaw = await decodeSingle(
-            {
-              to: txData.to || ZERO_ADDRESS,
-              value: `${txData.value || 0}`,
-              data: txData.data || '',
-            },
+            metaTx,
             new Web3Provider(provider),
             undefined,
             txId
           )
           dispatch({
             type: 'APPEND_RAW_TRANSACTION',
-            payload: inputRaw,
+            payload: { input: inputRaw, isDelegateCall },
           })
 
           if (!chainId) {
@@ -81,11 +77,7 @@ const ProvideProvider: React.FC<Props> = ({ simulate, children }) => {
 
           // Now we can take some time decoding the transaction for real and we update the state once that's done.
           const input = await decodeSingle(
-            {
-              to: txData.to || ZERO_ADDRESS,
-              value: `${txData.value || 0}`,
-              data: txData.data || '',
-            },
+            metaTx,
             new Web3Provider(provider),
             (address: string, data: string) =>
               fetchAbi(

extension/src/browser/state/actions.ts

@@ -2,7 +2,7 @@ import { TransactionInput } from 'react-multisend'
 
 interface AppendRawTransactionAction {
   type: 'APPEND_RAW_TRANSACTION'
-  payload: TransactionInput
+  payload: { input: TransactionInput; isDelegateCall: boolean }
 }
 interface DecodeTransactionAction {
   type: 'DECODE_TRANSACTION'