updated UI of enter dialog

apps/remix-ide/src/app.js

@@ -130,10 +130,12 @@ class AppComponent {
       'remix.ethereum.org': 23,
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
-    this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.showEnter = this.showMatamo && !localStorage.getItem('hadUsageTypeAsked')
 
-    this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
+    this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
+    this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
+    this.showMatamo = matomoDomains[window.location.hostname] && !this.matomoConfAlreadySet
+
+    this.walkthroughService = new WalkthroughService(appManager)
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support

apps/remix-ide/src/app/providers/mainnet-vm-fork-provider.tsx

@@ -18,7 +18,7 @@ export class MainnetForkVMProvider extends BasicVMProvider {
     )
     this.blockchain = blockchain
     this.fork = 'shanghai'
-    this.nodeUrl = 'https://mainnet.infura.io/v3/7eed077ab9ee45eebbb3f053af9ecb29'
+    this.nodeUrl = 'https://go.getblock.io/56f8bc5187aa4ac696348f67545acf38'
     this.blockNumber = 'latest'
   }
 

apps/remix-ide/src/walkthroughService.js

@@ -11,21 +11,8 @@ const profile = {
 }
 
 export class WalkthroughService extends Plugin {
-  constructor (appManager, showWalkthrough) {
+  constructor (appManager) {
     super(profile)
-    /*let readyToStart = 0;
-    appManager.event.on('activate', (plugin) => {
-      if (plugin.name === 'udapp') readyToStart++
-      if (readyToStart == 2 && showWalkthrough) {
-        this.start()
-      }
-    })
-    appManager.event.on('activate', (plugin) => {
-      if (plugin.name === 'solidity') readyToStart++
-      if (readyToStart == 2 && showWalkthrough) {
-        this.start()
-      }
-    })*/
   }
 
   startRecorderW () {
@@ -49,7 +36,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderSave'),
         title: 'Transactions Recorder',
-        intro: 'Once there is a Once one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
+        intro: 'Once there is a one or a few transactions have been executed from Remix, click this button to save these transactions as a scenario file.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
@@ -89,21 +76,24 @@ export class WalkthroughService extends Plugin {
           intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
           element: document.querySelector('#verticalIconsHomeIcon'),
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         },
         {
           element: document.querySelector('#verticalIconsKindsolidity'),
           title: 'Solidity Compiler',
           intro: 'Having selected a .sol file in the File Explorer (the icon above), compile it with the Solidity Compiler.',
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         },
         {
           title: 'Deploy your contract',
           element: document.querySelector('#verticalIconsKindudapp'),
           intro: 'Choose a chain, deploy a contract and play with your functions.',
           tooltipClass: 'bg-light text-dark',
-          position: 'right'
+          position: 'right',
+          highlightClass: 'bg-light border border-warning'
         }
         ]
       }).onafterchange((targetElement) => {

libs/remix-simulator/src/vm-context.ts

@@ -230,10 +230,11 @@ class CustomEthersStateManager extends StateManagerCommonStorageDump {
       [],
       this.blockTag,
     ])
+    const codeHash = accountData.codeHash === '0x0000000000000000000000000000000000000000000000000000000000000000' ? '0xc5d2460186f7233c927e7db2dcc703c0e500b653ca82273b7bfad8045d85a470' : accountData.codeHash
     const account = Account.fromAccountData({
       balance: BigInt(accountData.balance),
       nonce: BigInt(accountData.nonce),
-      codeHash: toBuffer(accountData.codeHash)
+      codeHash: toBuffer(codeHash)
       // storageRoot: toBuffer([]), // we have to remove this in order to force the creation of the Trie in the local state.
     })
     return account

libs/remix-ui/app/src/lib/remix-app/components/modals/enter.tsx

@@ -4,23 +4,16 @@ import {UsageTypes} from '../../types'
 import { type } from 'os'
 
 interface EnterDialogProps {
-  hide: boolean,
   handleUserChoice: (userChoice: UsageTypes) => void,
 }
 
 const EnterDialog = (props: EnterDialogProps) => {
-  const [visibility, setVisibility] = useState<boolean>(false)
-  const {showEnter} = useContext(AppContext)
-
-  useEffect(() => {
-    setVisibility(!props.hide)
-  }, [props.hide])
 
   const enterAs = async (uType) => {
     props.handleUserChoice(uType)
   }
 
-  const modalClass = (visibility && showEnter) ? "d-flex" : "d-none"
+  const modalClass = "d-flex"
   return (
     <div
       data-id={`EnterModalDialogContainer-react`}
@@ -39,17 +32,17 @@ const EnterDialog = (props: EnterDialogProps) => {
           <div className="modal-header d-flex flex-column">
             <h3 className='text-dark'>Welcome to Remix IDE</h3>
             <div className='d-flex flex-row pt-2'>
-              <h6 className="modal-title" data-id={`EnterModalDialogModalTitle-react`}>
-                To load the project with the most efficient setup we would like to know your experience type.
+              <h6 className="modal-title text-dark" data-id={`EnterModalDialogModalTitle-react`}>
+                In order to understand your needs better, we would like to know how you typically use Remix
               </h6>
               <i className="text-dark fal fa-door-open text-center" style={{minWidth: "100px", fontSize: "xxx-large"}}></i>
             </div>
           </div>
-          <div className="modal-body text-break remixModalBody d-flex flex-row p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
-            <button className="btn btn-secondary" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Beginner</button>
-            <button className="btn btn-secondary" data-id="tutorbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Tutor)}}>Teacher</button>
-            <button className="btn btn-secondary" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyper</button>
-            <button className="btn btn-secondary" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production User</button>
+          <div className="modal-body text-break remixModalBody d-flex flex-column p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
+            <button className="btn btn-secondary text-left" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Learning - discovering web3 development</button>
+            <button className="btn btn-secondary my-1 text-left" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyping - trying out concepts and techniques</button>
+            <button className="btn btn-secondary text-left" data-id="advanceUserbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Advance)}}>Developing  projects - Remix as your main dev tool</button>
+            <button className="btn btn-secondary mt-1 text-left" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production - only deployments</button>
           </div>
         </div>
       </div>

libs/remix-ui/app/src/lib/remix-app/components/modals/matomo.tsx

@@ -8,7 +8,12 @@ declare global {
 }
 const _paq = (window._paq = window._paq || [])
 
-const MatomoDialog = (props) => {
+interface MatomoDialogProps {
+  okFn: () => void,
+  hide: boolean
+}
+
+const MatomoDialog = (props: MatomoDialogProps) => {
   const {settings, showMatamo, appManager} = useContext(AppContext)
   const {modal} = useDialogDispatchers()
   const [visible, setVisible] = useState<boolean>(props.hide)
@@ -68,6 +73,7 @@ const MatomoDialog = (props) => {
     _paq.push(['setConsentGiven']);
     settings.updateMatomoAnalyticsChoice(true)
     setVisible(false)
+    props.okFn()
   }
 
   return <></>

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

@@ -48,7 +48,18 @@ const RemixApp = (props: IRemixAppUi) => {
       activateApp()
     }
     const hadUsageTypeAsked = localStorage.getItem('hadUsageTypeAsked')
-    setShowEnterDialog(!hadUsageTypeAsked)
+    if (props.app.showMatamo) {
+      // if matomo dialog is displayed, it will take care of calling "setShowEnterDialog",
+      // if the user approves matomo tracking.
+      // so "showEnterDialog" stays false
+    } else {
+      // if matomo dialog isn't displayed, we show the "enter dialog" only if:
+      //  - it wasn't already set
+      //  - (and) if user has given consent
+      if (!hadUsageTypeAsked && props.app.matomoCurrentSetting) {
+        setShowEnterDialog(true)
+      }
+    } 
   }, [])
 
   function setListeners() {
@@ -87,7 +98,6 @@ const RemixApp = (props: IRemixAppUi) => {
   const value = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
-    showEnter: props.app.showEnter,
     appManager: props.app.appManager,
     modal: props.app.notification,
     layout: props.app.layout
@@ -113,7 +123,7 @@ const RemixApp = (props: IRemixAppUi) => {
       _paq.push(['trackEvent', 'enterDialog', 'usageType', 'beginner'])
       break
     }
-    case UsageTypes.Tutor: {
+    case UsageTypes.Advance: {
       _paq.push(['trackEvent', 'enterDialog', 'usageType', 'tutor'])
       break
     }
@@ -135,8 +145,8 @@ const RemixApp = (props: IRemixAppUi) => {
     <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppProvider value={value}>
         <OriginWarning></OriginWarning>
-        <MatomoDialog hide={!appReady} okFn={() => {setShowEnterDialog(true)}}></MatomoDialog>
-        <EnterDialog hide={!showEnterDialog} handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>
+        <MatomoDialog hide={!appReady} okFn={() => setShowEnterDialog(true)}></MatomoDialog>
+        {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
         <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
           <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
             {props.app.menuicons.render()}

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

@@ -10,7 +10,7 @@ export const enum ModalTypes {
 
 export const enum UsageTypes {
   Beginner = 1,
-  Tutor,
   Prototyper,
-  Production,
+  Advance,
+  Production
 }