Merge pull request #115 from gnosisguild/v-testnets

Use new Tenderly virtual testnets for simulations

extension/.cspell.json

@@ -45,6 +45,7 @@
     "rdns",
     "reflexer",
     "refork",
+    "rpcs",
     "Samczun",
     "sepolia",
     "shazow",
@@ -58,6 +59,7 @@
     "toastify",
     "Uids",
     "UNWRAPPER",
+    "vnet",
     "walletconnect",
     "whatsabi",
     "xdai",

extension/package.json

@@ -75,7 +75,6 @@
     "react-icons": "^4.3.1",
     "react-modal": "^3.16.1",
     "react-moment": "^1.1.3",
-    "react-multisend": "^2.1.0",
     "react-select": "^5.2.1",
     "react-toastify": "^9.0.8",
     "rimraf": "^3.0.2",
@@ -85,6 +84,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
+    "ethers-multisend": "^3.1.0",
     "zodiac-roles-deployments": "^2.2.2"
   }
 }

extension/src/background.ts

@@ -167,13 +167,30 @@ const removeRpcRedirectRules = (tabId: number) => {
   chrome.declarativeNetRequest.updateSessionRules({
     removeRuleIds: ruleIds,
   })
+  console.log(
+    'removeRpcRedirectRules',
+    tabId,
+    ruleIds,
+    hash(
+      'https://virtual.mainnet.rpc.tenderly.co/880388c4-9707-46ce-97a5-1095090a6768',
+      735219801
+    )
+  )
+  chrome.declarativeNetRequest.getSessionRules((rules) =>
+    console.log('removeRpcRedirectRules getSessionRules', rules)
+  )
 }
 
 chrome.runtime.onMessage.addListener((message, sender) => {
   if (!sender.tab?.id) return
 
   if (message.type === 'startSimulating') {
     const { networkId, rpcUrl } = message
+    console.log('startSimulating', networkId, rpcUrl, {
+      simulatingExtensionTabs,
+    })
+    simulatingExtensionTabs.delete(sender.tab.id)
+    removeRpcRedirectRules(sender.tab.id)
     simulatingExtensionTabs.set(sender.tab.id, {
       networkId,
       rpcUrl,
@@ -186,6 +203,7 @@ chrome.runtime.onMessage.addListener((message, sender) => {
     )
   }
   if (message.type === 'stopSimulating') {
+    console.log('stopSimulating', sender.tab.id, { simulatingExtensionTabs })
     simulatingExtensionTabs.delete(sender.tab.id)
     removeRpcRedirectRules(sender.tab.id)
 

extension/src/browser/Drawer/ContractAddress/index.tsx

@@ -1,18 +1,18 @@
 import copy from 'copy-to-clipboard'
 import makeBlockie from 'ethereum-blockies-base64'
 import { getAddress } from 'ethers/lib/utils'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { RiExternalLinkLine, RiFileCopyLine } from 'react-icons/ri'
 
 import { BlockLink, Box, Flex, IconButton } from '../../../components'
 import { EXPLORER_URL } from '../../../chains'
 import { useConnection } from '../../../connections'
-
 import classes from './style.module.css'
-import { fetchContractInfo } from '../../fetchContractInfo'
+import { ContractInfo } from '../../../utils/abi'
 
 interface Props {
   address: string
+  contractInfo?: ContractInfo
   explorerLink?: boolean
   copyToClipboard?: boolean
   className?: string
@@ -23,14 +23,15 @@ const VISIBLE_END = 4
 
 const ContractAddress: React.FC<Props> = ({
   address,
+  contractInfo,
   explorerLink,
   copyToClipboard,
   className,
 }) => {
   const {
     connection: { chainId },
   } = useConnection()
-  const [contractName, setContractName] = useState('')
+
   const explorerUrl = EXPLORER_URL[chainId]
 
   const blockie = useMemo(() => address && makeBlockie(address), [address])
@@ -40,20 +41,6 @@ const ContractAddress: React.FC<Props> = ({
   const end = checksumAddress.substring(42 - VISIBLE_END, 42)
   const displayAddress = `${start}...${end}`
 
-  useEffect(() => {
-    let canceled = false
-    fetchContractInfo(address as `0x${string}`, chainId).then((info) => {
-      if (!canceled) {
-        setContractName(info.name || '')
-      }
-    })
-
-    return () => {
-      setContractName('')
-      canceled = true
-    }
-  }, [chainId, address])
-
   return (
     <Flex
       gap={2}
@@ -65,8 +52,8 @@ const ContractAddress: React.FC<Props> = ({
         <img src={blockie} alt={address} />
       </Box>
 
-      {contractName && (
-        <div className={classes.contractName}>{contractName}</div>
+      {contractInfo?.name && (
+        <div className={classes.contractName}>{contractInfo?.name}</div>
       )}
 
       <Flex gap={1} alignItems="center" className={classes.addressContainer}>

extension/src/browser/Drawer/CopyToClipboard.tsx

@@ -1,32 +1,20 @@
+import { MetaTransaction } from 'ethers-multisend'
 import React from 'react'
 import { RiFileCopy2Line } from 'react-icons/ri'
-import { encodeSingle, TransactionInput } from 'react-multisend'
 import { toast } from 'react-toastify'
 
 import { IconButton } from '../../components'
 
 import classes from './style.module.css'
 
 interface Props {
-  transaction: TransactionInput
-  isDelegateCall: boolean
+  transaction: MetaTransaction
   labeled?: boolean
 }
 
-const CopyToClipboard: React.FC<Props> = ({
-  transaction,
-  isDelegateCall,
-  labeled,
-}) => {
-  const encodedTransaction = {
-    ...encodeSingle(transaction),
-    operation: isDelegateCall ? 1 : 0,
-  }
-
+const CopyToClipboard: React.FC<Props> = ({ transaction, labeled }) => {
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(
-      JSON.stringify(encodedTransaction, undefined, 2)
-    )
+    navigator.clipboard.writeText(JSON.stringify(transaction, undefined, 2))
     toast(<>Transaction data has been copied to clipboard.</>)
   }
 

extension/src/browser/Drawer/DecodedTransaction.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import classes from './style.module.css'
+import { Box } from '../../components'
+import { FunctionFragment, Result } from '@ethersproject/abi'
+
+interface Props {
+  functionFragment: FunctionFragment
+  data: Result
+}
+const DecodedTransaction: React.FC<Props> = ({ functionFragment, data }) => {
+  return (
+    <div className={classes.transaction}>
+      {functionFragment.inputs.length > 0 && (
+        <fieldset>
+          {functionFragment.inputs.map((input, i) => (
+            <label key={input.name}>
+              <span>
+                {input.name} <i className={classes.inputType}>{input.type}</i>
+              </span>
+              <Box p={1} bg>
+                <input type="text" value={data[i]} readOnly />
+              </Box>
+            </label>
+          ))}
+        </fieldset>
+      )}
+    </div>
+  )
+}
+
+export default DecodedTransaction

extension/src/browser/Drawer/RawTransaction.tsx

@@ -1,23 +1,22 @@
 import React from 'react'
-import { RawTransactionInput } from 'react-multisend'
 
 import { Box } from '../../components'
 
 import classes from './style.module.css'
 
 interface Props {
-  value: RawTransactionInput
+  data: string
 }
 
-const RawTransaction: React.FC<Props> = ({ value }) => (
+const RawTransaction: React.FC<Props> = ({ data }) => (
   <div className={classes.transaction}>
     <label>
       <span>Data</span>
       <Box p={1} bg>
         <input
           className={classes.rawTxData}
           type="text"
-          value={`${value.data || ''}`}
+          value={data || ''}
           readOnly
         />
       </Box>