Merge branch 'master' of https://github.com/ethereum/remix-project into desktopofflinenoscript

apps/remix-ide/src/app.js

@@ -163,12 +163,14 @@ 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.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)
 
     this.platform = isElectron() ? 'desktop' : 'web'
-    this.showEnter = this.showMatamo && !localStorage.getItem('hadUsageTypeAsked')
-    
-    this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
 
     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/assets/css/themes/remix-black_undtds.css

@@ -5632,7 +5632,7 @@ a.close.disabled {
   vertical-align: text-top !important;
 }
 .bg-primary {
-  background-color: #28282D !important;
+  background-color: var(--primary) !important;
 }
 a.bg-primary:focus,
 a.bg-primary:hover,

apps/remix-ide/src/walkthroughService.js

@@ -11,28 +11,15 @@ 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 () {
     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..',
+        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',
@@ -41,7 +28,7 @@ export class WalkthroughService extends Plugin {
       {
         element: document.querySelector('#udappRecorderUseLatest'),
         title: 'Transactions Recorder',
-        intro: 'If set the recorder will run transactions using the latest compilation result.',
+        intro: 'If selected the recorder will run transactions using the latest compilation result.',
         tooltipClass: 'bg-light text-dark',
         position: 'right',
         highlightClass: 'bg-light border border-warning'
@@ -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 one or more 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

@@ -50,7 +50,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() {
@@ -93,7 +104,6 @@ const RemixApp = (props: IRemixAppUi) => {
   const value: appProviderContextType = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
-    showEnter: props.app.showEnter,
     appManager: props.app.appManager,
     modal: props.app.notification,
     layout: props.app.layout,
@@ -121,7 +131,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
     }
@@ -143,8 +153,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
 }

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

@@ -35,9 +35,9 @@ export function RecorderUI(props: RecorderProps) {
 
   return (
     <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="udapp_recorderSection d-flex justify-content-between">
         <div className="d-flex justify-content-center align-items-center">
-          <label className="mt-1 udapp_recorderSectionLabel">
+          <label className="text-nowrap mt-1 udapp_recorderSectionLabel" onClick={toggleClass}>
             <FormattedMessage id="udapp.transactionsRecorded" />
           </label>
           <CustomTooltip
@@ -46,7 +46,7 @@ export function RecorderUI(props: RecorderProps) {
             tooltipId="recordedTransactionsCounttooltip"
             tooltipText={<FormattedMessage id="udapp.transactionsCountTooltip" />}
           >
-            <div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">
+            <div className="pl-3 badge badge-pill badge-primary text-center" style={{cursor:"default"}} data-title="The number of recorded transactions">
               {props.count}
             </div>
           </CustomTooltip>
@@ -66,6 +66,7 @@ export function RecorderUI(props: RecorderProps) {
             </i>
           </CustomTooltip>
         </div>
+        <div className="w-100" onClick={toggleClass}></div>
         <div className="p-3">
           <span data-id="udappRecorderTitleExpander" onClick={toggleClass}>
             <i className={!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down'} aria-hidden="true"></i>

libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.css

@@ -30,7 +30,14 @@
     height: 36px;
     border-radius: 8px;
     align-items: center;
+     animation: highlight 2s forwards ;
   }
+
+  @keyframes highlight {
+    from {background-color: var(--secondary);}
+    to {background-color: transparent;}
+  }
+
   .remixui_icon img {
     width: 28px;
     height: 28px;