- walkthrough for recorder, more steps:w

- fixed disable state style for udapp

apps/remix-ide/src/index.css

@@ -19,4 +19,4 @@
   font-size: 0.8rem;
   font-weight: normal;
   max-width: 300px;
-}
+}

apps/remix-ide/src/walkthroughService.js

@@ -7,14 +7,14 @@ const profile = {
   displayName: 'Walkthrough',
   description: 'Remix walkthrough for beginner',
   version: packageJson.version,
-  methods: ['start']
+  methods: ['start', 'startRecorderW']
 }
 
 export class WalkthroughService extends Plugin {
   constructor (appManager, showWalkthrough) {
     super(profile)
-    let readyToStart = 0;
-    /*appManager.event.on('activate', (plugin) => {
+    /*let readyToStart = 0;
+    appManager.event.on('activate', (plugin) => {
       if (plugin.name === 'udapp') readyToStart++
       if (readyToStart == 2 && showWalkthrough) {
         this.start()
@@ -28,6 +28,58 @@ export class WalkthroughService extends Plugin {
     })*/
   }
 
+  startRecorderW () {
+    introJs().setOptions({
+      steps: [{
+        title: 'Transactions Recorder',
+        intro: 'Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider.Click to launch the Home tab that contains links, tips, and shortcuts..',
+        element: document.querySelector('#udappRecorderCard'),
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderUseLatest'),
+        title: 'Transactions Recorder',
+        intro: 'If set the recorder will run transactions using the latest compilation result.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderSave'),
+        title: 'Transactions Recorder',
+        intro: 'Once there is a transaction, click the button Save to save the scenario.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      },
+      {
+        element: document.querySelector('#udappRecorderRun'),
+        title: 'Transactions Recorder',
+        intro: 'Run previously saved scenario over any environment.',
+        tooltipClass: 'bg-light text-dark',
+        position: 'right',
+        highlightClass: 'bg-light border border-warning'
+      }
+      ]
+    }).onafterchange((targetElement) => {
+      const header = document.getElementsByClassName('introjs-tooltip-header')[0]
+      if (header) {
+        header.classList.add('d-flex')
+        header.classList.add('justify-content-between')
+        header.classList.add('text-nowrap')
+        header.classList.add('pr-0')
+      }
+      const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
+      if (skipbutton) {
+        skipbutton.classList.add('ml-3')
+        skipbutton.classList.add('text-decoration-none')
+        skipbutton.id = 'remixTourSkipbtn'
+      }
+    }).start()
+  }
+
   start () {
     if (!localStorage.getItem('hadTour_initial')) {
       introJs().setOptions({

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

@@ -514,7 +514,7 @@ export function ContractDropdownUI(props: ContractDropdownProps) {
             <CustomTooltip placement={'top-end'} tooltipClasses="text-wrap text-left" tooltipId="runAndDeployAddresstooltip" tooltipText={atAddressOptions.title}>
               <div id="runAndDeployAtAdressButtonContainer" data-title={atAddressOptions.title}>
                 <button
-                  className="udapp_atAddress btn-sm py-2 btn-primary"
+                  className={atAddressOptions.disabled ? "disabled udapp_atAddress btn btn-sm py-2 btn-primary"  : "udapp_atAddress btn btn-sm py-2 btn-primary"}
                   id="runAndDeployAtAdressButton"
                   disabled={atAddressOptions.disabled}
                   style={{ border: 'none' }}

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

@@ -28,8 +28,13 @@ export function RecorderUI(props: RecorderProps) {
     setToggleExpander(!toggleExpander)
   }
 
+  const startWalkthrough = async () => {
+    setToggleExpander(true)
+    await props.plugin.call('walkthrough', 'startRecorderW')
+  }
+
   return (
-    <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom">
+    <div className="udapp_cardContainer py-1 list-group-item border-top border-bottom" id="udappRecorderCard">
       <div className="udapp_recorderSection d-flex justify-content-between" onClick={toggleClass}>
         <div className="d-flex justify-content-center align-items-center">
           <label className="mt-1 udapp_recorderSectionLabel">
@@ -45,18 +50,7 @@ export function RecorderUI(props: RecorderProps) {
               {props.count}
             </div>
           </CustomTooltip>
-          <CustomTooltip
-            placement={'right'}
-            tooltipClasses="text-wrap"
-            tooltipId="info-recorder"
-            tooltipText={
-              <span>
-                <FormattedMessage id="udapp.infoRecorderTooltip" values={{br: <br />}} />
-              </span>
-            }
-          >
-            <i style={{fontSize: 'medium'}} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
-          </CustomTooltip>
+          <i style={{fontSize: 'medium'}} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true" onClick={() => startWalkthrough()}></i>
         </div>
         <div className="p-3">
           <span data-id="udappRecorderTitleExpander" onClick={toggleClass}>
@@ -65,7 +59,7 @@ export function RecorderUI(props: RecorderProps) {
         </div>
       </div>
       <div className={`pb-2 flex-column ${toggleExpander ? 'd-flex' : 'd-none'}`}>
-        <div className="mb-1 mt-1 custom-control custom-checkbox mb-1">
+        <div className="mb-1 mt-1 custom-control custom-checkbox mb-1" id='udappRecorderUseLatest'>
           <input ref={inputLive} type="checkbox" id="livemode-recorder" className="custom-control-input custom-select" name="input-livemode" />
           <CustomTooltip
             placement={'right'}
@@ -95,29 +89,27 @@ export function RecorderUI(props: RecorderProps) {
                   : intl.formatMessage({id: 'udapp.transactionSaveTooltip3'}, {count: props.count})
             }
           >
-            <span>
-              <button
-                className="btn btn-sm btn-info savetransaction udapp_recorder"
-                disabled={props.count === 0 ? true : false}
-                onClick={triggerRecordButton}
-                style={{pointerEvents: props.count === 0 ? 'none' : 'auto'}}
-              >
-                <FormattedMessage id="udapp.save" />
-              </button>
-            </span>
+            <button
+              className="btn btn-sm btn-secondary savetransaction udapp_recorder"
+              disabled={props.count === 0 ? true : false}
+              onClick={triggerRecordButton}
+              style={{pointerEvents: props.count === 0 ? 'none' : 'auto'}}
+              id="udappRecorderSave"
+            >
+              <FormattedMessage id="udapp.save" />
+            </button>
           </CustomTooltip>
           <CustomTooltip placement={'right'} tooltipClasses="text-nowrap" tooltipId="tooltip-run-recorder" tooltipText={<FormattedMessage id="udapp.runRecorderTooltip" />}>
-            <span>
-              <button
-                className="btn btn-sm btn-info runtransaction udapp_runTxs"
-                data-id="runtransaction"
-                disabled={enableRunButton}
-                onClick={handleClickRunButton}
-                style={{pointerEvents: enableRunButton ? 'none' : 'auto'}}
-              >
-                <FormattedMessage id="udapp.run" />
-              </button>
-            </span>
+            <button
+              className={enableRunButton ? "btn btn-sm btn-secondary runtransaction udapp_runTxs" : "btn btn-sm btn-secondary runtransaction udapp_runTxs disabled"}
+              data-id="runtransaction"
+              disabled={enableRunButton}
+              onClick={handleClickRunButton}
+              style={{pointerEvents: enableRunButton ? 'none' : 'auto'}}
+              id="udappRecorderRun"
+            >
+              <FormattedMessage id="udapp.run" />
+            </button>
           </CustomTooltip>
         </div>
       </div>

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

@@ -301,6 +301,7 @@ export function RunTabUI(props: RunTabProps) {
             proxy={runTab.proxy}
           />
           <RecorderUI
+            plugin={plugin}
             gasEstimationPrompt={gasEstimationPrompt}
             passphrasePrompt={passphrasePrompt}
             mainnetPrompt={mainnetPrompt}

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

@@ -279,6 +279,7 @@ export interface RecorderProps {
   scenarioPrompt: (msg: string, defaultValue: string) => JSX.Element,
   count: number
   currentFile: string
+  plugin: RunTab
 }
 
 export interface InstanceContainerProps {