show modal

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

@@ -49,6 +49,8 @@
   "udapp.enterAMessageToSign": "Enter a message to sign",
   "udapp.hash": "hash",
   "udapp.signature": "signature",
+  "udapp.saveVmStateTitle": "Save VM state",
+  "udapp.saveVmStateLabel": "State Name",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createNewAccount": "Create a new account",
   "udapp.web3Title": "Creating an account is possible only in Personal mode. Please go to Settings to enable it.",

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

@@ -49,6 +49,8 @@
   "udapp.enterAMessageToSign": "Enter a message to sign and click `Sign`",
   "udapp.hash": "hash",
   "udapp.signature": "signature",
+  "udapp.saveVmStateTitle": "Save VM state",
+  "udapp.saveVmStateLabel": "State Name",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createNewAccount": "Create new account",
   "udapp.web3Title": "Creating an account is possible only in Personal mode. Please go to Settings to enable it.",

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-use-before-define
 import React, { useEffect } from 'react'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { EnvironmentProps, Provider } from '../types'
 import { Dropdown } from 'react-bootstrap'
 import { CustomMenu, CustomToggle, CustomTooltip } from '@remix-ui/helper'
@@ -23,6 +23,38 @@ export function EnvironmentUI(props: EnvironmentProps) {
     'L2 - Arbitrum': 'https://bridge.arbitrum.io/'
   }
 
+  const intl = useIntl()
+
+  const saveVmStatePrompt = (defaultName: string) => {
+    return (
+      <div>
+        <label id="wsName" className="form-check-label" style={{ fontWeight: 'bolder' }}>
+        <FormattedMessage id="udapp.saveVmStateLabel" />
+      </label>
+        <input
+          type="text"
+          data-id="modalDialogCustomPromptTextCreate"
+          defaultValue={defaultName}
+          className="form-control"
+        />
+      </div>
+    )
+  }
+
+  const saveVmState = () => {
+    const defaultName: string = `${currentProvider.name}_${Date.now()}`
+    props.modal(
+      intl.formatMessage({ id: 'udapp.saveVmStateTitle' }),
+      saveVmStatePrompt(defaultName),
+      intl.formatMessage({ id: 'udapp.save' }),
+      () => {
+        console.log('Saved')
+      },
+      intl.formatMessage({ id: 'udapp.cancel' }),
+      null
+    )
+  }
+
   const isL2 = (providerDisplayName: string) => providerDisplayName && (providerDisplayName.startsWith('L2 - Optimism') || providerDisplayName.startsWith('L2 - Arbitrum'))
   return (
     <div className="udapp_crow">
@@ -39,7 +71,7 @@ export function EnvironmentUI(props: EnvironmentProps) {
           </a>
         </CustomTooltip>
         { currentProvider && currentProvider.isVM && <CustomTooltip placement={'auto-end'} tooltipClasses="text-wrap" tooltipId="saveVMStatetooltip" tooltipText={<FormattedMessage id="udapp.saveVmState" />}>
-            <i className="udapp_infoDeployAction ml-2 fas fa-save"></i>
+            <i className="udapp_infoDeployAction ml-2 fas fa-save" onClick={saveVmState}></i>
         </CustomTooltip> }
       </label>
       <div className="udapp_environment" data-id={`selected-provider-${currentProvider && currentProvider.name}`}>

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

@@ -12,7 +12,14 @@ export function SettingsUI(props: SettingsProps) {
 
   return (
     <div className="udapp_settings">
-      <EnvironmentUI runTabPlugin={props.runTabPlugin} selectedEnv={props.selectExEnv} providers={props.providers} setExecutionContext={props.setExecutionContext} checkSelectionCorrectness={props.EvaluateEnvironmentSelection} />
+      <EnvironmentUI 
+        runTabPlugin={props.runTabPlugin}
+        selectedEnv={props.selectExEnv}
+        providers={props.providers}
+        setExecutionContext={props.setExecutionContext}
+        checkSelectionCorrectness={props.EvaluateEnvironmentSelection} 
+        modal={props.modal}
+      />
       <NetworkUI networkName={props.networkName} />
       <AccountUI
         addFile={props.addFile}

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

@@ -171,6 +171,7 @@ export interface EnvironmentProps {
     error: string
   },
   setExecutionContext: (executionContext: { context: string }) => void
+  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void, okBtnClass?: string, cancelBtnClass?: string) => void,
 }
 
 export interface NetworkProps {