Add support for invoking payable contract methods (#102)

* Add support for invoking payable contract methods Signed-off-by: Eduard Lataretu <[email protected]> * Fix a few console logs Signed-off-by: Eduard Lataretu <[email protected]> --------- Signed-off-by: Eduard Lataretu <[email protected]>
NethermindEth · May 15, 2024 · 17135e1 · 17135e1
1 parent 67f3e11
commit 17135e1
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 134 deletions.
diff --git a/plugin/src/atoms/compilation.ts b/plugin/src/atoms/compilation.ts
@@ -2,29 +2,14 @@ import { atom } from 'jotai'
 
 const statusAtom = atom<string>('Compiling....')
 
-const currentFilenameAtom = atom<string>('')
-
-const isCompilingAtom = atom<boolean>(false)
-
-const isValidSolidityAtom = atom<boolean>(false)
-
-const noFileSelectedAtom = atom<boolean>(false)
-
 const hashDirAtom = atom<string>('')
 
-const tomlPathsAtom = atom<string[]>([])
-
-const activeTomlPathAtom = atom<string>('')
+const isCompilingAtom = atom<boolean>(false)
 
 type CompilationKeys =
   'status'
-  | 'currentFilename'
   | 'isCompiling'
-  | 'isValidSolidity'
-  | 'noFileSelected'
   | 'hashDir'
-  | 'tomlPaths'
-  | 'activeTomlPath'
 
 interface SetCompilationValue {
   key: CompilationKeys
@@ -35,54 +20,29 @@ const compilationAtom = atom(
   (get) => {
     return {
       status: get(statusAtom),
-      currentFilename: get(currentFilenameAtom),
       isCompiling: get(isCompilingAtom),
-      isValidSolidity: get(isValidSolidityAtom),
-      noFileSelected: get(noFileSelectedAtom),
-      hashDir: get(hashDirAtom),
-      tomlPaths: get(tomlPathsAtom),
-      activeTomlPath: get(activeTomlPathAtom)
+      hashDir: get(hashDirAtom)
     }
   },
   (_get, set, newValue: SetCompilationValue) => {
     switch (newValue?.key) {
       case 'status':
         typeof newValue?.value === 'string' && set(statusAtom, newValue?.value)
         break
-      case 'currentFilename':
-        typeof newValue?.value === 'string' && set(currentFilenameAtom, newValue?.value)
-        break
       case 'isCompiling':
         typeof newValue?.value === 'boolean' && set(isCompilingAtom, newValue?.value)
         break
-      case 'isValidSolidity':
-        typeof newValue?.value === 'boolean' && set(isValidSolidityAtom, newValue?.value)
-        break
-      case 'noFileSelected':
-        typeof newValue?.value === 'boolean' && set(noFileSelectedAtom, newValue?.value)
-        break
       case 'hashDir':
         typeof newValue?.value === 'string' && set(hashDirAtom, newValue?.value)
         break
-      case 'tomlPaths':
-        Array.isArray(newValue?.value) && set(tomlPathsAtom, newValue?.value)
-        break
-      case 'activeTomlPath':
-        typeof newValue?.value === 'string' && set(activeTomlPathAtom, newValue?.value)
-        break
     }
   }
 )
 
 export {
   statusAtom,
-  currentFilenameAtom,
   isCompilingAtom,
-  isValidSolidityAtom,
-  noFileSelectedAtom,
   hashDirAtom,
-  tomlPathsAtom,
-  activeTomlPathAtom,
   compilationAtom,
   type SetCompilationValue,
   type CompilationKeys

diff --git a/plugin/src/atoms/verification.ts b/plugin/src/atoms/verification.ts
@@ -2,29 +2,11 @@ import { atom } from 'jotai'
 
 const statusAtom = atom<string>('Verifying...')
 
-const currentFilenameAtom = atom<string>('')
-
 const isVerifyingAtom = atom<boolean>(false)
 
-const isValidSolidityAtom = atom<boolean>(false)
-
-const noFileSelectedAtom = atom<boolean>(false)
-
-const hashDirAtom = atom<string>('')
-
-const tomlPathsAtom = atom<string[]>([])
-
-const activeTomlPathAtom = atom<string>('')
-
 type VerificationKeys =
   'status'
-  | 'currentFilename'
   | 'isVerifying'
-  | 'isValidSolidity'
-  | 'noFileSelected'
-  | 'hashDir'
-  | 'tomlPaths'
-  | 'activeTomlPath'
 
 interface SetVerificationValue {
   key: VerificationKeys
@@ -35,54 +17,24 @@ const verificationAtom = atom(
   (get) => {
     return {
       status: get(statusAtom),
-      currentFilename: get(currentFilenameAtom),
-      isVerifying: get(isVerifyingAtom),
-      isValidSolidity: get(isValidSolidityAtom),
-      noFileSelected: get(noFileSelectedAtom),
-      hashDir: get(hashDirAtom),
-      tomlPaths: get(tomlPathsAtom),
-      activeTomlPath: get(activeTomlPathAtom)
+      isVerifying: get(isVerifyingAtom)
     }
   },
   (_get, set, newValue: SetVerificationValue) => {
     switch (newValue?.key) {
       case 'status':
         typeof newValue?.value === 'string' && set(statusAtom, newValue?.value)
         break
-      case 'currentFilename':
-        typeof newValue?.value === 'string' && set(currentFilenameAtom, newValue?.value)
-        break
       case 'isVerifying':
         typeof newValue?.value === 'boolean' && set(isVerifyingAtom, newValue?.value)
         break
-      case 'isValidSolidity':
-        typeof newValue?.value === 'boolean' && set(isValidSolidityAtom, newValue?.value)
-        break
-      case 'noFileSelected':
-        typeof newValue?.value === 'boolean' && set(noFileSelectedAtom, newValue?.value)
-        break
-      case 'hashDir':
-        typeof newValue?.value === 'string' && set(hashDirAtom, newValue?.value)
-        break
-      case 'tomlPaths':
-        Array.isArray(newValue?.value) && set(tomlPathsAtom, newValue?.value)
-        break
-      case 'activeTomlPath':
-        typeof newValue?.value === 'string' && set(activeTomlPathAtom, newValue?.value)
-        break
     }
   }
 )
 
 export {
   statusAtom,
-  currentFilenameAtom,
   isVerifyingAtom,
-  isValidSolidityAtom,
-  noFileSelectedAtom,
-  hashDirAtom,
-  tomlPathsAtom,
-  activeTomlPathAtom,
   verificationAtom,
   type SetVerificationValue,
   type VerificationKeys

diff --git a/plugin/src/components/DevnetAccountSelector/index.tsx b/plugin/src/components/DevnetAccountSelector/index.tsx
@@ -83,20 +83,20 @@ const DevnetAccountSelector: React.FC = () => {
         `❗️ Server ${devnet.name} - ${devnet.url} is not healthy or not reachable at the moment`
       )
     } catch (e) {
-      console.log(e)
+      console.error(e)
     }
   }
 
   useEffect(() => {
     updateAccountBalances().catch((e) => {
-      console.log(e)
+      console.error(e)
     })
   }, [transactions])
 
   useEffect(() => {
     if (!isDevnetAlive) {
       notifyDevnetStatus().catch((e) => {
-        console.log(e)
+        console.error(e)
       })
     }
   }, [isDevnetAlive])

diff --git a/plugin/src/components/FunctionalInput/index.tsx b/plugin/src/components/FunctionalInput/index.tsx
@@ -1,10 +1,11 @@
 // A component that reads the compiled contracts from the context and displays them in a select
 
 import React, { useEffect, useState } from 'react'
+import * as zksync from 'zksync-ethers'
 import { generateInputName } from '../../utils/utils'
 import { type AbiElement, type Input } from '../../types/contracts'
 import InputField from '../InputField'
-import { Contract } from 'ethers'
+import { ethers } from 'ethers'
 import { mockManualChain, type Transaction } from '../../types/transaction'
 import { useAtom, useAtomValue } from 'jotai'
 import { deployedSelectedContractAtom } from '../../atoms/deployedContracts'
@@ -31,6 +32,7 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
   const provider = useAtomValue(providerAtom)
 
   const [inputs, setInputs] = useState<string[]>([])
+  const [value, setValue] = useState<string>('')
 
   const callContract = async (): Promise<void> => {
     if (selectedContract == null) {
@@ -45,8 +47,7 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
       }
 
       const contractAddress = selectedContract.address
-      const contract = new Contract(contractAddress, selectedContract.abi, account)
-        .connect(account)
+      const contract = new zksync.Contract(contractAddress, selectedContract.abi, account)
 
       const method = contract[element.name]
 
@@ -56,6 +57,10 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
         title: `Executing "${element.name}" method!`
       })
 
+      if (element.stateMutability === 'payable') {
+        const options: any = { value: ethers.utils.parseEther(value) }
+        inputs.push(options)
+      }
       const result = await method(...inputs)
 
       remixClient.emit('statusChanged', {
@@ -71,7 +76,8 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
           txId: result.hash,
           env,
           chain: (env !== 'manual' ? walletClient?.chain : mockManualChain),
-          provider
+          provider,
+          value
         }
 
         setTransactions([transaction, ...transactions])
@@ -117,6 +123,17 @@ const MethodInput: React.FC<CompiledContractsProps> = ({ element }: CompiledCont
         `}>
           {element.name}
       </button>
+      {
+        element.stateMutability === 'payable'
+          ? <InputField
+              key={'value'}
+              placeholder={'Amount (ETH)'}
+              index={element.inputs.length}
+              value={ value }
+              onChange={ (_, newValue) => { setValue(newValue) } }
+            />
+          : <></>
+      }
       {
         element.inputs.map((input: Input, index: number) =>
           <InputField

diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx
@@ -24,7 +24,8 @@ import { asyncPost } from '../../api/asyncRequests'
 import { solidityVersionAtom } from '../../atoms/version'
 import { deployStatusAtom } from '../../atoms/deployment'
 import { saveCode } from '../../api/saveCode'
-import { remixClientAtom } from '../../stores/remixClient'
+import { currentFilenameAtom, isValidSolidityAtom, remixClientAtom } from '../../stores/remixClient'
+import { hashDirAtom } from '../../atoms/compilation'
 
 interface DeploymentProps {
   setActiveTab: (tab: AccordianTabs) => void
@@ -42,12 +43,10 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
   const [inputs, setInputs] = useState<string[]>([])
   const [shouldRunVerification, setShouldRunVerification] = useState<boolean>(false)
 
-  const {
-    currentFilename,
-    hashDir,
-    isValidSolidity,
-    isVerifying
-  } = useAtomValue(verificationAtom)
+  const { isVerifying } = useAtomValue(verificationAtom)
+  const isValidSolidity = useAtomValue(isValidSolidityAtom)
+  const currentFilename = useAtomValue(currentFilenameAtom)
+  const hashDir = useAtomValue(hashDirAtom)
 
   const setStatus = useSetAtom(deployStatusAtom)
 
@@ -308,7 +307,8 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
         txId: txHash,
         env,
         chain: (env !== 'manual' ? walletClient?.chain : mockManualChain),
-        provider
+        provider,
+        value: undefined
       }
 
       setTransactions([transaction, ...transactions])
@@ -348,9 +348,7 @@ const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
                     <button
                       className='deploy-btn btn btn-primary btn-warning w-100 text-break mb-1 mt-2 px-0'
                       onClick={() => {
-                        deploy().catch((err) => {
-                          console.log(err)
-                        })
+                        deploy().catch((err) => { console.error(err) })
                       }}
                     >
                       Deploy { shouldRunVerification ? ' and Verify' : '' }

diff --git a/plugin/src/features/Plugin/index.tsx b/plugin/src/features/Plugin/index.tsx
@@ -12,7 +12,7 @@ import BackgroundNotices from '../../components/BackgroundNotices'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { isCompilingAtom, statusAtom as compilationStatusAtom, hashDirAtom } from '../../atoms/compilation'
 import { deploymentAtom } from '../../atoms/deployment'
-import { currentFilenameAtom, isLoadedAtom, isValidSolidityAtom, remixClientAtom } from '../../stores/remixClient'
+import { isLoadedAtom } from '../../stores/remixClient'
 import storage from '../../utils/storage'
 import { ethers } from 'ethers'
 
@@ -29,9 +29,6 @@ const Plugin: React.FC = () => {
   const isCompiling = useAtomValue(isCompilingAtom)
 
   const isLoaded = useAtomValue(isLoadedAtom)
-  const isValidSolidity = useAtomValue(isValidSolidityAtom)
-  const currentFilename = useAtomValue(currentFilenameAtom)
-  const remixClient = useAtomValue(remixClientAtom)
 
   const setHashDir = useSetAtom(hashDirAtom)
 
@@ -50,23 +47,6 @@ const Plugin: React.FC = () => {
     }
   }, [setHashDir])
 
-  useEffect(() => {
-    if (!isLoaded) return
-    if (isValidSolidity) {
-      remixClient.emit('statusChanged', {
-        key: 'succeed',
-        type: 'info',
-        title: 'Current file: ' + currentFilename
-      })
-    } else {
-      remixClient.emit('statusChanged', {
-        key: 'failed',
-        type: 'warning',
-        title: 'Please open a solidity file to compile'
-      })
-    }
-  }, [remixClient, isValidSolidity, currentFilename, isLoaded])
-
   // Deployment Context state variables
   const { isDeploying, deployStatus } = useAtomValue(deploymentAtom)
 

diff --git a/plugin/src/stores/remixClient.ts b/plugin/src/stores/remixClient.ts
@@ -61,10 +61,6 @@ async function initializeRemixClient (): Promise<void> {
   const currWorkspace = await remixClient.filePanel.getCurrentWorkspace()
   remixClientStore.set(currentWorkspacePathAtom, currWorkspace.absolutePath)
 
-  remixClient.on('fileManager', 'noFileSelected', () => {
-    remixClientStore.set(noFileSelectedAtom, true)
-  })
-
   remixClient.on('fileManager', 'currentFileChanged', (currentFileChanged: any) => {
     const filename = getFileNameFromPath(currentFileChanged)
     const currentFileExtension = getFileExtension(filename)
@@ -74,6 +70,12 @@ async function initializeRemixClient (): Promise<void> {
     remixClientStore.set(noFileSelectedAtom, false)
   })
 
+  remixClient.on('fileManager', 'noFileSelected', () => {
+    remixClientStore.set(noFileSelectedAtom, true)
+    remixClientStore.set(currentFilenameAtom, '')
+    remixClientStore.set(isValidSolidityAtom, false)
+  })
+
   remixClient.on('fileManager', 'fileAdded', async (_: any) => {
     await handleTomlPathsChange()
   })

diff --git a/plugin/src/types/transaction.ts b/plugin/src/types/transaction.ts
@@ -10,6 +10,7 @@ export interface Transaction {
   account: Wallet | Signer | null
   provider: Provider | null
   chain: Chain | undefined | null
+  value: string | undefined | null
 }
 
 export const mockManualChain: Chain<ChainFormatters> = {