create instance setup

apps/remix-ide/src/app/udapp/run-tab.js

@@ -41,7 +41,6 @@ export class RunTab extends ViewPlugin {
     this.blockchain = blockchain
     this.fileManager = fileManager
     this.editor = editor
-    this.logCallback = (msg) => { this.call('terminal', 'logHtml', yo`<pre>${msg}</pre>`) }
     this.filePanel = filePanel
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule

apps/remix-ide/src/blockchain/blockchain.js

@@ -414,7 +414,6 @@ class Blockchain extends Plugin {
     const self = this
     waterfall([
       function getGasLimit (next) {
-        console.log('called: ', self.transactionContextAPI.gasLimit())
         if (self.transactionContextAPI.getGasLimit) {
           return self.transactionContextAPI.getGasLimit(next)
         }

libs/remix-ui/helper/src/lib/remix-ui-helper.ts

@@ -1,3 +1,5 @@
+import * as ethJSUtil from 'ethereumjs-util'
+
 export const extractNameFromKey = (key: string): string => {
   if (!key) return
   const keyPath = key.split('/')
@@ -73,3 +75,14 @@ export const shortenAddress = (address, etherBalance) => {
 
   return address.slice(0, 5) + '...' + address.slice(len - 5, len) + (etherBalance ? ' (' + etherBalance.toString() + ' ether)' : '')
 }
+
+export const addressToString = (address) => {
+  if (!address) return null
+  if (typeof address !== 'string') {
+    address = address.toString('hex')
+  }
+  if (address.indexOf('0x') === -1) {
+    address = '0x' + address
+  }
+  return ethJSUtil.toChecksumAddress(address)
+}

libs/remix-ui/run-tab/src/lib/actions/index.ts

@@ -2,7 +2,7 @@
 import React from 'react'
 import * as ethJSUtil from 'ethereumjs-util'
 import Web3 from 'web3'
-import { shortenAddress } from '@remix-ui/helper'
+import { addressToString, shortenAddress } from '@remix-ui/helper'
 import { addProvider, displayNotification, displayPopUp, fetchAccountsListFailed, fetchAccountsListRequest, fetchAccountsListSuccess, fetchContractListSuccess, hidePopUp, removeProvider, setCurrentFile, setExecutionEnvironment, setExternalEndpoint, setGasLimit, setLoadType, setMatchPassphrase, setNetworkName, setPassphrase, setSelectedAccount, setSendUnit, setSendValue } from './payload'
 import { RunTab } from '../types/run-tab'
 import { CompilerAbstract } from '@remix-project/remix-solidity'
@@ -380,3 +380,83 @@ export const getSelectedContract = (contractName: string, compilerAtributeName:
 const getCompilerContracts = () => {
   return plugin.compilersArtefacts.__last.getData().contracts
 }
+
+// eslint-disable-next-line no-undef
+const terminalLogger = (view: JSX.Element) => {
+  plugin.call('terminal', 'logHtml', view)
+}
+
+// eslint-disable-next-line no-undef
+export const createInstance = (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => {
+  const continueCb = (error, continueTxExecution, cancelCb) => {
+    if (error) {
+      const msg = typeof error !== 'string' ? error.message : error
+
+      dispatch(displayNotification('Gas estimation failed', gasEstimationPrompt(msg), 'Send Transaction', 'Cancel Transaction', () => {
+        continueTxExecution()
+      }, () => {
+        cancelCb()
+      }))
+    } else {
+      continueTxExecution()
+    }
+  }
+
+  const promptCb = (okCb, cancelCb) => {
+    dispatch(displayNotification('Passphrase requested', passphrasePrompt('Personal mode is enabled. Please provide passphrase of account'), 'OK', 'Cancel', okCb, cancelCb))
+  }
+
+  const statusCb = (msg: string) => {
+    const log = logBuilder(msg)
+
+    return terminalLogger(log)
+  }
+
+  const finalCb = (error, contractObject, address) => {
+    plugin.event.trigger('clearInstance')
+    if (error) {
+      const log = logBuilder(error)
+
+      return terminalLogger(log)
+    }
+    plugin.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
+
+    const data = plugin.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
+
+    plugin.compilersArtefacts.addResolvedContract(addressToString(address), data)
+    if (self.ipfsCheckedState) {
+      _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName])
+      publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
+    } else {
+      _paq.push(['trackEvent', 'udapp', 'DeployOnly', plugin.REACT_API.networkName])
+    }
+  }
+
+      // let contractMetadata
+      // try {
+      //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
+      // } catch (error) {
+      //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
+      // }
+
+      // const compilerContracts = this.dropdownLogic.getCompilerContracts()
+      // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
+
+      // if (selectedContract.isOverSizeLimit()) {
+      //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
+      //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
+      //   </div>`,
+      //   {
+      //     label: 'Force Send',
+      //     fn: () => {
+      //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+      //     }
+      //   }, {
+      //     label: 'Cancel',
+      //     fn: () => {
+      //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
+      //     }
+      //   })
+      // }
+      // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+}

libs/remix-ui/run-tab/src/lib/actions/payload.ts

@@ -163,3 +163,9 @@ export const setCurrentFile = (file: string) => {
     payload: file
   }
 }
+export const setIpfsCheckedState = (state: boolean) => {
+  return {
+    type: 'SET_IPFS_CHECKED_STATE',
+    payload: state
+  }
+}

libs/remix-ui/run-tab/src/lib/components/account.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { AccountProps } from '../types'
+import { PassphrasePrompt } from './passphrase'
 
 export function AccountUI (props: AccountProps) {
   const { selectedAccount, loadedAccounts } = props.accounts
@@ -11,7 +12,6 @@ export function AccountUI (props: AccountProps) {
     title: ''
   })
   const [message, setMessage] = useState('')
-  const [signPassphrase, setSignPassphrase] = useState('')
 
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
@@ -73,11 +73,18 @@ export function AccountUI (props: AccountProps) {
     }
 
     if (props.selectExEnv !== 'vm-london' && props.selectExEnv !== 'vm-berlin' && props.selectExEnv !== 'injected') {
-      return props.modal('Passphrase to sign a message', passphrasePrompt(), 'OK', () => {
-        props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
-          props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, signPassphrase)
-        }, 'Cancel', null)
-      }, 'Cancel', null)
+      return props.modal('Passphrase to sign a message',
+        <PassphrasePrompt
+          message='Enter your passphrase for this account to sign the message'
+          setPassphrase={props.setPassphrase}
+        />, 'OK', () => {
+          props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
+            props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, props.passphrase)
+            props.setPassphrase('')
+          }, 'Cancel', null)
+        }, 'Cancel', () => {
+          props.setPassphrase('')
+        })
     }
 
     props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
@@ -97,10 +104,6 @@ export function AccountUI (props: AccountProps) {
     setMessage(e.target.value)
   }
 
-  const handleSignPassphrase = (e) => {
-    setSignPassphrase(e.target.value)
-  }
-
   const passphraseCreationPrompt = () => {
     return (
       <div> Please provide a Passphrase for the account creation
@@ -114,16 +117,6 @@ export function AccountUI (props: AccountProps) {
     )
   }
 
-  const passphrasePrompt = () => {
-    return (
-      <div> Enter your passphrase for this account to sign the message
-        <div>
-          <input id="prompt_text" type="password" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleSignPassphrase} data-id='modalDialogCustomPromptText' defaultValue={signPassphrase} />
-        </div>
-      </div>
-    )
-  }
-
   const signMessagePrompt = () => {
     return (
       <div> Enter a message to sign

libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { ContractDropdownProps } from '../types'
 import * as ethJSUtil from 'ethereumjs-util'
 import { ContractGUI } from './contractGUI'
+import { PassphrasePrompt } from './passphrase'
 
 export function ContractDropdownUI (props: ContractDropdownProps) {
   const [networkName, setNetworkName] = useState<string>('')
@@ -133,85 +134,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (selectedContract.bytecodeObject.length === 0) {
       return props.modal('Alert', 'This contract may be abstract, not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.', 'OK', () => {})
     }
-
-    // var continueCb = (error, continueTxExecution, cancelCb) => {
-    //   if (error) {
-    //     var msg = typeof error !== 'string' ? error.message : error
-    //     modalDialog('Gas estimation failed', yo`<div>Gas estimation errored with the following message (see below).
-    //     The transaction execution will likely fail. Do you want to force sending? <br>
-    //     ${msg}
-    //     </div>`,
-    //     {
-    //       label: 'Send Transaction',
-    //       fn: () => {
-    //         continueTxExecution()
-    //       }
-    //     }, {
-    //       label: 'Cancel Transaction',
-    //       fn: () => {
-    //         cancelCb()
-    //       }
-    //     })
-    //   } else {
-    //     continueTxExecution()
-    //   }
-    // }
-
-    // const self = this
-
-    // var promptCb = (okCb, cancelCb) => {
-    //   modalDialogCustom.promptPassphrase('Passphrase requested', 'Personal mode is enabled. Please provide passphrase of account', '', okCb, cancelCb)
-    // }
-
-    // var statusCb = (msg) => {
-    //   return this.logCallback(msg)
-    // }
-
-    // var finalCb = (error, contractObject, address) => {
-    //   self.event.trigger('clearInstance')
-
-    //   if (error) {
-    //     return this.logCallback(error)
-    //   }
-    //   self.event.trigger('newContractInstanceAdded', [contractObject, address, contractObject.name])
-
-    //   const data = self.runView.compilersArtefacts.getCompilerAbstract(contractObject.contract.file)
-    //   self.runView.compilersArtefacts.addResolvedContract(helper.addressToString(address), data)
-    //   if (self.ipfsCheckedState) {
-    //     _paq.push(['trackEvent', 'udapp', 'DeployAndPublish', this.networkName + '_' + this.networkId])
-    //     publishToStorage('ipfs', self.runView.fileProvider, self.runView.fileManager, selectedContract)
-    //   } else {
-    //     _paq.push(['trackEvent', 'udapp', 'DeployOnly', this.networkName + '_' + this.networkId])
-    //   }
-    // }
-
-    // let contractMetadata
-    // try {
-    //   contractMetadata = await this.runView.call('compilerMetadata', 'deployMetadataOf', selectedContract.name, selectedContract.contract.file)
-    // } catch (error) {
-    //   return statusCb(`creation of ${selectedContract.name} errored: ${error.message ? error.message : error}`)
-    // }
-
-    // const compilerContracts = this.dropdownLogic.getCompilerContracts()
-    // const confirmationCb = this.getConfirmationCb(modalDialog, confirmDialog)
-
-    // if (selectedContract.isOverSizeLimit()) {
-    //   return modalDialog('Contract code size over limit', yo`<div>Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. <br>
-    //   More info: <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-170.md" target="_blank">eip-170</a>
-    //   </div>`,
-    //   {
-    //     label: 'Force Send',
-    //     fn: () => {
-    //       this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
-    //     }
-    //   }, {
-    //     label: 'Cancel',
-    //     fn: () => {
-    //       this.logCallback(`creation of ${selectedContract.name} canceled by user.`)
-    //     }
-    //   })
-    // }
-    // this.deployContract(selectedContract, args, contractMetadata, compilerContracts, { continueCb, promptCb, statusCb, finalCb }, confirmationCb)
+    props.createInstance(gasEstimationPrompt, passphrasePrompt, logBuilder)
   }
 
   //   listenToContextChange () {
@@ -362,6 +285,22 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
   //     return confirmationCb
   //   }
 
+  const gasEstimationPrompt = (msg: string) => {
+    return (
+      <div>Gas estimation errored with the following message (see below). The transaction execution will likely fail. Do you want to force sending? <br />
+        ${msg}
+      </div>
+    )
+  }
+
+  const logBuilder = (msg: string) => {
+    return <pre>{msg}</pre>
+  }
+
+  const passphrasePrompt = (message: string) => {
+    return <PassphrasePrompt message={message} setPassphrase={props.setPassphrase} defaultValue={props.passphrase} />
+  }
+
   const atAddressChanged = (event) => {
     const value = event.target.value
 

libs/remix-ui/run-tab/src/lib/components/passphrase.tsx

@@ -0,0 +1,22 @@
+// eslint-disable-next-line no-use-before-define
+import React from 'react'
+
+interface PromptProps {
+  message: string,
+  setPassphrase: (passphrase: string) => void,
+  defaultValue?: string
+}
+
+export function PassphrasePrompt (props: PromptProps) {
+  const handleSignPassphrase = (e) => {
+    props.setPassphrase(e.target.value)
+  }
+
+  return (
+    <div> { props.message }
+      <div>
+        <input id="prompt_text" type="password" name='prompt_text' className="form-control" style={{ width: '100%' }} onInput={handleSignPassphrase} data-id='modalDialogCustomPromptText' defaultValue={props.defaultValue} />
+      </div>
+    </div>
+  )
+}

libs/remix-ui/run-tab/src/lib/components/settingsUI.tsx

@@ -38,7 +38,7 @@ export function SettingsUI (props: SettingsProps) {
     <div className="udapp_settings">
       <EnvironmentUI setWeb3Endpoint={props.setWeb3Endpoint} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} externalEndpoint={props.externalEndpoint} />
       <NetworkUI networkName={props.networkName} />
-      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} />
+      <AccountUI personalMode={props.personalMode} selectExEnv={props.selectExEnv} accounts={props.accounts} setAccount={props.setAccount} createNewBlockchainAccount={props.createNewBlockchainAccount} setPassphrase={props.setPassphrase} setMatchPassphrase={props.setMatchPassphrase} tooltip={props.tooltip} modal={props.modal} signMessageWithAddress={props.signMessageWithAddress} passphrase={props.passphrase} />
       <GasPriceUI gasLimit={props.gasLimit} setGasFee={props.setGasFee} />
       <ValueUI setUnit={props.setUnit} sendValue={props.sendValue} sendUnit={props.sendUnit} />
     </div>

libs/remix-ui/run-tab/src/lib/reducers/runTab.ts

@@ -54,6 +54,7 @@ export interface RunTabState {
     isSuccessful: boolean,
     error: string
   },
+  ipfsChecked: boolean
 }
 
 export const runTabInitialState: RunTabState = {
@@ -122,7 +123,8 @@ export const runTabInitialState: RunTabState = {
     isRequesting: false,
     isSuccessful: false,
     error: null
-  }
+  },
+  ipfsChecked: false
 }
 
 export const runTabReducer = (state: RunTabState = runTabInitialState, action: Action) => {
@@ -430,6 +432,15 @@ export const runTabReducer = (state: RunTabState = runTabInitialState, action: A
       }
     }
 
+    case 'SET_IPFS_CHECKED_STATE': {
+      const payload: boolean = action.payload
+
+      return {
+        ...state,
+        ipfsChecked: payload
+      }
+    }
+
     default:
       return state
   }

libs/remix-ui/run-tab/src/lib/run-tab.tsx

@@ -9,7 +9,7 @@ import { RecorderUI } from './components/recorderCardUI'
 import { SettingsUI } from './components/settingsUI'
 import { Modal, RunTabProps } from './types'
 import { runTabInitialState, runTabReducer } from './reducers/runTab'
-import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress, getSelectedContract, createInstance } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -133,12 +133,16 @@ export function RunTabUI (props: RunTabProps) {
             modal={modal}
             tooltip={toast}
             signMessageWithAddress={signMessageWithAddress}
+            passphrase={runTab.passphrase}
           />
           <ContractDropdownUI
             exEnvironment={runTab.selectExEnv}
             contracts={runTab.contracts}
             getSelectedContract={getSelectedContract}
             modal={modal}
+            passphrase={runTab.passphrase}
+            setPassphrase={setPassphrasePrompt}
+            createInstance={createInstance}
           />
           <RecorderUI />
           <InstanceContainerUI />

libs/remix-ui/run-tab/src/lib/types/index.ts

@@ -42,7 +42,8 @@ export interface SettingsProps {
   setMatchPassphrase: (passphrase: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   tooltip: (toasterMsg: string) => void,
-  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
+  passphrase: string
 }
 
 export interface EnvironmentProps {
@@ -85,7 +86,8 @@ export interface AccountProps {
   setMatchPassphrase: (passphrase: string) => void,
   tooltip: (toasterMsg: string) => void,
   modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
-  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void
+  signMessageWithAddress: (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => void,
+  passphrase: string
 }
 
 export interface GasPriceProps {
@@ -127,7 +129,10 @@ export interface ContractDropdownProps {
     isOverSizeLimit: () => boolean,
     metadata: any
   },
-  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
+  passphrase: string,
+  setPassphrase: (passphrase: string) => void,
+  createInstance: (gasEstimationPrompt: (msg: string) => JSX.Element, passphrasePrompt: (msg: string) => JSX.Element, logBuilder: (msg: string) => JSX.Element) => void
 }
 
 export interface RecorderProps {