Implemened sign message

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

@@ -219,8 +219,10 @@ export const createNewBlockchainAccount = async (cbMessage: JSX.Element) => {
         if (plugin.REACT_API.passphrase === plugin.REACT_API.matchPassphrase) {
           cb(plugin.REACT_API.passphrase)
         } else {
-          return dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
+          dispatch(displayNotification('Error', 'Passphase does not match', 'OK', null))
         }
+        setPassphrase('')
+        setMatchPassphrase('')
       }, () => {}))
     },
     async (error, address) => {
@@ -240,3 +242,13 @@ export const setPassphrasePrompt = (passphrase: string) => {
 export const setMatchPassphrasePrompt = (passphrase: string) => {
   dispatch(setMatchPassphrase(passphrase))
 }
+
+// eslint-disable-next-line no-undef
+export const signMessageWithAddress = (account: string, message: string, modalContent: (hash: string, data: string) => JSX.Element, passphrase?: string) => {
+  plugin.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
+    if (err) {
+      return displayPopUp(err)
+    }
+    dispatch(displayNotification('Signed Message', modalContent(msgHash, signedData), 'OK', null, () => {}, null))
+  })
+}

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

@@ -10,6 +10,8 @@ export function AccountUI (props: AccountProps) {
     classList: '',
     title: ''
   })
+  const [message, setMessage] = useState('')
+  const [signPassphrase, setSignPassphrase] = useState('')
 
   useEffect(() => {
     if (!selectedAccount && accounts.length > 0) props.setAccount(accounts[0])
@@ -24,7 +26,14 @@ export function AccountUI (props: AccountProps) {
         })
         break
 
-      case 'vm':
+      case 'vm-london':
+        setPlusOpt({
+          classList: '',
+          title: 'Create a new account'
+        })
+        break
+
+      case 'vm-berlin':
         setPlusOpt({
           classList: '',
           title: 'Create a new account'
@@ -55,54 +64,25 @@ export function AccountUI (props: AccountProps) {
   }, [props.selectExEnv, props.personalMode])
 
   const newAccount = () => {
-    props.createNewBlockchainAccount(passphrasePrompt())
+    props.createNewBlockchainAccount(passphraseCreationPrompt())
   }
 
   const signMessage = () => {
-    // dispatch signMessageWithBlockchainAccounts
+    if (!accounts[0]) {
-  //   this.blockchain.getAccounts((err, accounts) => {
+      return props.tooltip('Account list is empty, please make sure the current provider is properly connected to remix')
-  //     if (err) {
+    }
-  //       return addTooltip(`Cannot get account list: ${err}`)
+
-  //     }
+    if (props.selectExEnv !== 'vm-london' && props.selectExEnv !== 'vm-berlin' && props.selectExEnv !== 'injected') {
-
+      return props.modal('Passphrase to sign a message', passphrasePrompt(), 'OK', () => {
-    //     var signMessageDialog = { title: 'Sign a message', text: 'Enter a message to sign', inputvalue: 'Message to sign' }
+        props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
-    //     var $txOrigin = this.el.querySelector('#txorigin')
+          props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt, signPassphrase)
-    //     if (!$txOrigin.selectedOptions[0] && (this.blockchain.isInjectedWeb3() || this.blockchain.isWeb3Provider())) {
+        }, 'Cancel', null)
-    //       return addTooltip('Account list is empty, please make sure the current provider is properly connected to remix')
+      }, 'Cancel', null)
-    //     }
+    }
-
+
-    //     var account = $txOrigin.selectedOptions[0].value
+    props.modal('Sign a message', signMessagePrompt(), 'OK', () => {
-
+      props.signMessageWithAddress(selectedAccount, message, signedMessagePrompt)
-    //     var promptCb = (passphrase) => {
+    }, 'Cancel', null)
-    //       const modal = modalDialogCustom.promptMulti(signMessageDialog, (message) => {
-    //         this.blockchain.signMessage(message, account, passphrase, (err, msgHash, signedData) => {
-    //           if (err) {
-    //             return addTooltip(err)
-    //           }
-    //           modal.hide()
-    //           modalDialogCustom.alert(yo`
-    //             <div>
-    //               <b>hash:</b><br>
-    //               <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">${msgHash}</span>
-    //               <br><b>signature:</b><br>
-    //               <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">${signedData}</span>
-    //             </div>
-    //           `)
-    //         })
-    //       }, false)
-    //     }
-
-  //     if (this.blockchain.isWeb3Provider()) {
-  //       return modalDialogCustom.promptPassphrase(
-  //         'Passphrase to sign a message',
-  //         'Enter your passphrase for this account to sign the message',
-  //         '',
-  //         promptCb,
-  //         false
-  //       )
-  //     }
-  //     promptCb()
-  //   })
   }
 
   const handlePassphrase = (e) => {
@@ -113,7 +93,15 @@ export function AccountUI (props: AccountProps) {
     props.setMatchPassphrase(e.target.value)
   }
 
-  const passphrasePrompt = () => {
+  const handleMessageInput = (e) => {
+    setMessage(e.target.value)
+  }
+
+  const handleSignPassphrase = (e) => {
+    setSignPassphrase(e.target.value)
+  }
+
+  const passphraseCreationPrompt = () => {
     return (
       <div> Please provide a Passphrase for the account creation
         <div>
@@ -126,6 +114,45 @@ 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
+        <div>
+          <textarea
+            id="prompt_text"
+            data-id="modalDialogCustomPromptText"
+            style={{ width: '100%' }}
+            rows={4}
+            cols={50}
+            onInput={handleMessageInput}
+            defaultValue={message}
+          ></textarea>
+        </div>
+      </div>
+    )
+  }
+
+  const signedMessagePrompt = (msgHash: string, signedData: string) => {
+    return (
+      <div>
+        <b>hash:</b><br />
+        <span id="remixRunSignMsgHash" data-id="settingsRemixRunSignMsgHash">{msgHash}</span>
+        <br /><b>signature:</b><br />
+        <span id="remixRunSignMsgSignature" data-id="settingsRemixRunSignMsgSignature">{signedData}</span>
+      </div>
+    )
+  }
+
   return (
     <div className="udapp_crow">
       <label className="udapp_settingsLabel">
@@ -137,7 +164,7 @@ export function AccountUI (props: AccountProps) {
       <div className="udapp_account">
         <select id="txorigin" data-id="runTabSelectAccount" name="txorigin" className="form-control udapp_select custom-select pr-4" value={selectedAccount} onChange={(e) => { props.setAccount(e.target.value) }}>
           {
-            Object.keys(loadedAccounts).map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
+            accounts.map((value, index) => <option value={value} key={index}>{ loadedAccounts[value] }</option>)
           }
         </select>
         <div style={{ marginLeft: -5 }}><CopyToClipboard content={selectedAccount} direction='top' /></div>

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

@@ -89,7 +89,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} />
+      <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} />
       <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

@@ -55,7 +55,7 @@ export const runTabInitialState: RunTabState = {
   sendValue: '0',
   sendUnit: 'ether',
   gasLimit: 3000000,
-  selectExEnv: 'vm',
+  selectExEnv: 'vm-london',
   personalMode: false,
   networkName: '',
   providers: {

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 } from './actions'
+import { initRunTab, setAccount, setUnit, setGasFee, setExecutionContext, setWeb3Endpoint, clearPopUp, createNewBlockchainAccount, setPassphrasePrompt, setMatchPassphrasePrompt, signMessageWithAddress } from './actions'
 import './css/run-tab.css'
 
 export function RunTabUI (props: RunTabProps) {
@@ -130,6 +130,9 @@ export function RunTabUI (props: RunTabProps) {
             createNewBlockchainAccount={createNewBlockchainAccount}
             setPassphrase={setPassphrasePrompt}
             setMatchPassphrase={setMatchPassphrasePrompt}
+            modal={modal}
+            tooltip={toast}
+            signMessageWithAddress={signMessageWithAddress}
           />
           <ContractDropdownUI exEnvironment={runTab.selectExEnv} />
           <RecorderUI />

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

@@ -39,7 +39,10 @@ export interface SettingsProps {
   externalEndpoint: string,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
-  setMatchPassphrase: (passphrase: string) => void
+  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
 }
 
 export interface EnvironmentProps {
@@ -79,7 +82,10 @@ export interface AccountProps {
   personalMode: boolean,
   createNewBlockchainAccount: (cbMessage: JSX.Element) => void,
   setPassphrase: (passphrase: string) => void,
-  setMatchPassphrase: (passphrase: string) => void
+  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
 }
 
 export interface GasPriceProps {