EIP 712

apps/remix-dapp/src/locales/en/udapp.json

@@ -151,5 +151,8 @@
   "udapp.ganacheProviderText2": "For more info, visit: <a>Ganache Documentation</a>",
   "udapp.hardhatProviderText1": "Note: To run Hardhat network node on your system, go to hardhat project folder and run command:",
   "udapp.hardhatProviderText2": "For more info, visit: <a>Hardhat Documentation</a>",
-  "udapp.viewSourceCode": "View Source Code"
+  "udapp.viewSourceCode": "View Source Code",
+  "udapp.EIP712-1": "Signing message now only supports EIP-712.",
+  "udapp.EIP712-2": "Please follow <a href='https://eips.ethereum.org/EIPS/eip-712'>this link</a> to get more information.",
+  "udapp.EIP712-3": "In Remix, signing typed data is possible by right clicking (right click / Sign Typed Data) on a JSON file whose content is EIP-712 compatible."
 }

apps/remix-ide/src/app/tabs/locales/en/filePanel.json

@@ -148,5 +148,7 @@
   "filePanel.saveCodeSample": "This code-sample workspace will not be persisted. Click here to save it.",
   "filePanel.logInGithub": "Sign in to GitHub.",
   "filePanel.gitHubLoggedAs": "Signed in as {githubuser}",
-  "filePanel.updateSubmodules": "Update all submodules of repository. Click to pull dependencies."
+  "filePanel.updateSubmodules": "Update all submodules of repository. Click to pull dependencies.",
+  "filePanel.signTypedData": "Sign Typed Data",
+  "filePanel.signTypedDataError": "Error while signing this typed data."
 }

apps/remix-ide/src/blockchain/providers/vm.ts

@@ -1,4 +1,4 @@
-import { Web3, FMT_BYTES, FMT_NUMBER, LegacySendAsyncProvider } from 'web3'
+import { Web3, FMT_BYTES, FMT_NUMBER, LegacySendAsyncProvider, LegacyRequestProvider } from 'web3'
 import { fromWei, toBigInt } from 'web3-utils'
 import { privateToAddress, hashPersonalMessage, isHexString, bytesToHex } from '@ethereumjs/util'
 import { extend, JSONRPCRequestPayload, JSONRPCResponseCallback } from '@remix-project/remix-simulator'
@@ -10,6 +10,7 @@ export class VMProvider {
   worker: Worker
   provider: {
     sendAsync: (query: JSONRPCRequestPayload, callback: JSONRPCResponseCallback) => void
+    request: (query: JSONRPCRequestPayload) => Promise<any>
   }
   newAccountCallback: {[stamp: number]: (error: Error, address: string) => void}
   constructor (executionContext: ExecutionContext) {
@@ -38,14 +39,17 @@ export class VMProvider {
     return new Promise((resolve, reject) => {
       this.worker.addEventListener('message', (msg) => {
         if (msg.data.cmd === 'sendAsyncResult' && stamps[msg.data.stamp]) {
+          let result = msg.data.result
+          if (stamps[msg.data.stamp].request && msg.data.result) result = msg.data.result.result
+
           if (stamps[msg.data.stamp].callback) {
-            stamps[msg.data.stamp].callback(msg.data.error, msg.data.result)
+            stamps[msg.data.stamp].callback(msg.data.error, result)
             return
           }
           if (msg.data.error) {
             stamps[msg.data.stamp].reject(msg.data.error)
           } else {
-            stamps[msg.data.stamp].resolve(msg.data.result)
+            stamps[msg.data.stamp].resolve(result)
           }
         } else if (msg.data.cmd === 'initiateResult') {
           if (!msg.data.error) {
@@ -54,12 +58,20 @@ export class VMProvider {
                 return new Promise((resolve, reject) => {
                   const stamp = Date.now() + incr
                   incr++
-                  stamps[stamp] = { callback, resolve, reject }
+                  stamps[stamp] = { callback, resolve, reject, sendAsync: true }
+                  this.worker.postMessage({ cmd: 'sendAsync', query, stamp })
+                })
+              },
+              request: (query) => {
+                return new Promise((resolve, reject) => {
+                  const stamp = Date.now() + incr
+                  incr++
+                  stamps[stamp] = { resolve, reject, request: true }
                   this.worker.postMessage({ cmd: 'sendAsync', query, stamp })
                 })
               }
             }
-            this.web3 = new Web3(this.provider as LegacySendAsyncProvider)
+            this.web3 = new Web3(this.provider as (LegacySendAsyncProvider | LegacyRequestProvider))
             this.web3.setConfig({ defaultTransactionType: '0x0' })
             extend(this.web3)
             this.executionContext.setWeb3(this.executionContext.getProvider(), this.web3)

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

@@ -100,41 +100,14 @@ export function AccountUI(props: AccountProps) {
       return props.tooltip(intl.formatMessage({ id: 'udapp.tooltipText1' }))
     }
 
-    if (selectExEnv === 'web3') {
-      return props.modal(
-        intl.formatMessage({ id: 'udapp.modalTitle1' }),
-        <PassphrasePrompt message={intl.formatMessage({ id: 'udapp.modalMessage1' })} setPassphrase={props.setPassphrase} />,
-        intl.formatMessage({ id: 'udapp.ok' }),
-        () => {
-          props.modal(
-            intl.formatMessage({ id: 'udapp.signAMessage' }),
-            signMessagePrompt(),
-            intl.formatMessage({ id: 'udapp.ok' }),
-            () => {
-              props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt, props.passphrase)
-              props.setPassphrase('')
-            },
-            intl.formatMessage({ id: 'udapp.cancel' }),
-            null
-          )
-        },
-        intl.formatMessage({ id: 'udapp.cancel' }),
-        () => {
-          props.setPassphrase('')
-        }
-      )
-    }
-
     props.modal(
-      intl.formatMessage({ id: 'udapp.signAMessage' }),
-      signMessagePrompt(),
-      intl.formatMessage({ id: 'udapp.ok' }),
-      () => {
-        props.signMessageWithAddress(selectedAccount, messageRef.current, signedMessagePrompt)
-      },
-      intl.formatMessage({ id: 'udapp.cancel' }),
-      null
-    )
+      'Message signing', 
+      <div>
+        {intl.formatMessage({ id: 'udapp.EIP712-1' })}
+        {intl.formatMessage({ id: 'udapp.EIP712-2' })}  
+        {intl.formatMessage({ id: 'udapp.EIP712-3' })}</div>,
+      'OK',
+      () => {})
   }
 
   const handlePassphrase = (e) => {

libs/remix-ui/workspace/src/lib/actions/index.ts → libs/remix-ui/workspace/src/lib/actions/index.tsx

@@ -10,8 +10,7 @@ import { fetchContractFromEtherscan, fetchContractFromBlockscout } from '@remix-
 import JSZip from 'jszip'
 import { Actions, FileTree } from '../types'
 import IpfsHttpClient from 'ipfs-http-client'
-import { AppModal } from '@remix-ui/app'
-import { MessageWrapper } from '../components/file-explorer'
+import { AppModal, ModalTypes } from '@remix-ui/app'
 
 export * from './events'
 export * from './workspace'
@@ -510,6 +509,33 @@ export const runScript = async (path: string) => {
   })
 }
 
+export const signTypedData = async (path: string) => {
+  const typedData = await plugin.call('fileManager', 'readFile', path)
+  const web3 = await plugin.call('blockchain', 'web3')
+  const accounts = await web3.eth.getAccounts()
+
+  let parsed
+  try {
+    parsed = JSON.parse(typedData)
+  } catch (err) {
+    dispatch(displayPopUp(`${path} isn't a valid JSON.`))
+    return
+  } 
+
+  try {
+    const result = await web3.currentProvider.request({
+      method: 'eth_signTypedData',
+      params: [accounts[0], parsed]
+    })
+
+    plugin.call('terminal', 'log', { type: 'log', value: `${path} signature : ${result}` })
+  } catch (e) {
+    console.error(e)
+    plugin.call('terminal', 'log', { type: 'error', value: `error while signing ${path}: ${e}` })
+    dispatch(displayPopUp(e.message))
+  }
+}
+
 export const emitContextMenuEvent = async (cmd: customAction) => {
   await plugin.call(cmd.id, cmd.name, cmd)
 }

libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx

@@ -41,6 +41,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
     downloadPath,
     uploadFile,
     publishManyFilesToGist,
+    signTypedData,
     ...otherProps
   } = props
   const contextMenuRef = useRef(null)
@@ -233,7 +234,11 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               case 'Publish Workspace to Gist':
                 _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'publishWorkspace'])
                 publishFolderToGist(path)
-                break
+              break
+                case 'Sign Typed Data':
+                _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'signTypedData'])
+                signTypedData(path)
+              break
               default:
                 _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', `${item.id}/${item.name}`])
                 emit && emit({ ...item, path: [path]} as customAction)

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -32,6 +32,7 @@ export const FileSystemContext = createContext<{
   dispatchCopyShareURL: (path: string) => Promise<void>,
   dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
   dispatchRunScript: (path: string) => Promise<void>,
+  dispatchSignTypedData: (path: string) => Promise<void>,
   dispatchEmitContextMenuEvent: (cmd: customAction) => Promise<void>,
   dispatchHandleClickFile: (path: string, type: 'file' | 'folder' ) => Promise<void>
   dispatchHandleExpandPath: (paths: string[]) => Promise<void>,

libs/remix-ui/workspace/src/lib/providers/FileSystemProvider.tsx

@@ -25,6 +25,7 @@ import {
   copyShareURL,
   copyFolder,
   runScript,
+  signTypedData,
   emitContextMenuEvent,
   handleClickFile,
   handleExpandPath,
@@ -171,6 +172,10 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await runScript(path)
   }
 
+  const dispatchSignTypedData = async (path: string) => {
+    await signTypedData(path)
+  }
+
   const dispatchEmitContextMenuEvent = async (cmd: customAction) => {
     await emitContextMenuEvent(cmd)
   }
@@ -358,6 +363,7 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     dispatchCopyShareURL,
     dispatchCopyFolder,
     dispatchRunScript,
+    dispatchSignTypedData,
     dispatchEmitContextMenuEvent,
     dispatchHandleClickFile,
     dispatchHandleExpandPath,

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -706,6 +706,14 @@ export function Workspace() {
     }
   }
 
+  const signTypedData = async (path: string) => {
+    try {
+      global.dispatchSignTypedData(path)
+    } catch (error) {
+      global.toast(intl.formatMessage({ id: 'filePanel.signTypedDataError' }))
+    }
+  }
+
   const emitContextMenuEvent = (cmd: customAction) => {
     try {
       global.dispatchEmitContextMenuEvent(cmd)
@@ -1135,6 +1143,7 @@ export function Workspace() {
                   dispatchCopyFolder={global.dispatchCopyFolder}
                   dispatchPublishToGist={global.dispatchPublishToGist}
                   dispatchRunScript={global.dispatchRunScript}
+                  dispatchSignTypedData={global.dispatchSignTypedData}
                   dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
                   dispatchHandleClickFile={global.dispatchHandleClickFile}
                   dispatchSetFocusElement={global.dispatchSetFocusElement}
@@ -1211,6 +1220,7 @@ export function Workspace() {
                   dispatchCopyFolder={global.dispatchCopyFolder}
                   dispatchPublishToGist={global.dispatchPublishToGist}
                   dispatchRunScript={global.dispatchRunScript}
+                  dispatchSignTypedData={global.dispatchSignTypedData} //
                   dispatchEmitContextMenuEvent={global.dispatchEmitContextMenuEvent}
                   dispatchHandleClickFile={global.dispatchHandleClickFile}
                   dispatchSetFocusElement={global.dispatchSetFocusElement}
@@ -1385,6 +1395,7 @@ export function Workspace() {
           deletePath={deletePath}
           renamePath={editModeOn}
           runScript={runScript}
+          signTypedData={signTypedData}
           copy={handleCopyClick}
           paste={handlePasteClick}
           copyFileName={handleCopyFileNameClick}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -128,6 +128,7 @@ export interface FileExplorerProps {
     dispatchCopyShareURL: (path:string) => Promise<void>,
     dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
     dispatchRunScript: (path: string) => Promise<void>,
+    dispatchSignTypedData: (path: string) => Promise<void>,
     dispatchPublishToGist: (path?: string, type?: string) => Promise<void>,
     dispatchEmitContextMenuEvent: (cmd: customAction) => Promise<void>,
     dispatchHandleClickFile: (path: string, type: WorkspaceElement) => Promise<void>,
@@ -194,6 +195,7 @@ export interface FileExplorerContextMenuProps {
   pushChangesToGist?: (path?: string) => void
   publishFolderToGist?: (path?: string) => void
   publishFileToGist?: (path?: string) => void
+  signTypedData?: (path?: string) => void
   runScript?: (path: string) => void
   emit?: (cmd: customAction) => void
   pageX: number

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -80,6 +80,13 @@ export const contextMenuActions: MenuItems = [{
   multiselect: false,
   label: '',
   group: 3
+}, {
+  id: 'signTypedData',
+  name: 'Sign Typed Data',
+  extension: ['.json'],
+  multiselect: false,
+  label: '',
+  group: 3
 }, {
   id: 'publishFolderToGist',
   name: 'Publish folder to gist',