Merge branch 'master' into vyper-compiler-updates

apps/remix-ide/src/app/components/vertical-icons.tsx

@@ -16,8 +16,6 @@ const profile = {
   events: ['toggleContent', 'showContent']
 }
 
-const toMaximize = ['LearnEth']
-
 export class VerticalIcons extends Plugin {
   events: EventEmitter
   htmlElement: HTMLDivElement
@@ -128,11 +126,6 @@ export class VerticalIcons extends Plugin {
     // TODO: Only keep `this.emit` (issue#2210)
     this.emit('showContent', name)
     this.events.emit('showContent', name)
-    if (toMaximize.includes(name)) {
-      setTimeout(_ => {
-        this.call('layout', 'maximiseSidePanel')
-      }, 500)
-    }
   }
 
   /**

apps/remix-ide/src/app/panels/layout.ts

@@ -30,11 +30,14 @@ export type PanelConfiguration = {
 export class Layout extends Plugin {
   event: any
   panels: panels
-  maximised: { [key: string]: boolean }
+  enhanced: { [key: string]: boolean }
+  maximized: { [key: string]: boolean }
   constructor () {
     super(profile)
-    this.maximised = {
-      'dgit': true
+    this.maximized = {}
+    this.enhanced = {
+      'dgit': true,
+      'LearnEth': true
     }
     this.event = new EventEmitter()
   }
@@ -80,18 +83,30 @@ export class Layout extends Plugin {
     })
     this.on('sidePanel', 'focusChanged', async (name) => {
       const current = await this.call('sidePanel', 'currentFocus')
-      if (this.maximised[current]) {
+      if (this.enhanced[current]) {
+        this.event.emit('enhancesidepanel')
+      }
+
+      if (this.maximized[current]) {
         this.event.emit('maximisesidepanel')
-      } else {
+      }
+
+      if (!this.enhanced[current] && !this.maximized[current]) {
         this.event.emit('resetsidepanel')
       }
     })
 
     this.on('pinnedPanel', 'pinnedPlugin', async (name) => {
       const current = await this.call('pinnedPanel', 'currentFocus')
-      if (this.maximised[current]) {
+      if (this.enhanced[current]) {
+        this.event.emit('enhancepinnedpanel')
+      }
+
+      if (this.maximized[current]) {
         this.event.emit('maximisepinnedpanel')
-      } else {
+      }
+
+      if (!this.enhanced[current] && !this.maximized[current]) {
         this.event.emit('resetpinnedpanel')
       }
     })
@@ -128,13 +143,13 @@ export class Layout extends Plugin {
 
   async maximiseSidePanel () {
     const current = await this.call('sidePanel', 'currentFocus')
-    this.maximised[current] = true
+    this.maximized[current] = true
     this.event.emit('maximisesidepanel')
   }
 
   async maximisePinnedPanel () {
     const current = await this.call('pinnedPanel', 'currentFocus')
-    this.maximised[current] = true
+    this.maximized[current] = true
     this.event.emit('maximisepinnedpanel')
   }
 
@@ -146,13 +161,13 @@ export class Layout extends Plugin {
 
   async resetSidePanel () {
     const current = await this.call('sidePanel', 'currentFocus')
-    this.maximised[current] = false
+    this.enhanced[current] = false
     this.event.emit('resetsidepanel')
   }
 
   async resetPinnedPanel () {
     const current = await this.call('pinnedPanel', 'currentFocus')
-    this.maximised[current] = false
+    this.enhanced[current] = false
     this.event.emit('resetpinnedpanel')
   }
 }

apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

@@ -157,8 +157,6 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
               key={template.name}
               title={template.name}
               tooltipTitle={template.tooltip}
-              onClick={template.onClick}
-              onClickLabel={template.onClickLabel}
               hScrollable={false}
             >
               {template.items.map(item => {
@@ -214,6 +212,20 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
                   </div>
                 </RemixUIGridCell>
               })}
+              { template.name === 'Cookbook' && <RemixUIGridCell
+                plugin={this}
+                title={"More from Cookbook"}
+                key={"cookbookMore"}
+                id={"cookBookMore"}
+                searchKeywords={["cookbook"]}
+                tagList={[]}
+                classList='TSCellStyle'
+              >
+                <div className='d-flex justify-content-between h-100 flex-column'>
+                  <span className='pt-4 px-1 h6 text-dark'>{ template.description }</span>
+                  <span style={{ cursor: 'pointer' }} className='mt-2 btn btn-sm border align-items-left' onClick={() => template.onClick() }>{ template.onClickLabel }</span>
+                </div>
+              </RemixUIGridCell> }
             </RemixUIGridSection>
           })}
       </RemixUIGridView>

apps/remix-ide/src/app/plugins/templates-selection/templates.ts

@@ -47,13 +47,13 @@ export const templates = (intl, plugin) => {
         },
         {
           value: "ozerc721",
-          displayName: "ERC721",
+          displayName: "ERC721 (NFT)",
           tagList: ["ERC721", "Solidity"],
           description: 'A simple non-fungible token (NFT) contract'
         },
         {
           value: "ozerc721",
-          displayName: "ERC721",
+          displayName: "ERC721 (NFT)",
           description: "An ERC721 contract with:",
           tagList: ["Solidity", "ERC721"],
           opts: {
@@ -132,7 +132,7 @@ export const templates = (intl, plugin) => {
         {
           value: "ozerc20",
           displayName: "UUPS ERC20",
-          description: "UUSP ERC20 contract with:",
+          description: "UUPS ERC20 contract with:",
           opts: {
             upgradeable: 'uups',
             mintable: true
@@ -142,7 +142,7 @@ export const templates = (intl, plugin) => {
         {
           value: "ozerc20",
           displayName: "UUPS ERC20",
-          description: "UUSP ERC20 contract with:",
+          description: "UUPS ERC20 contract with:",
           opts: {
             upgradeable: 'uups',
             mintable: true,
@@ -153,7 +153,7 @@ export const templates = (intl, plugin) => {
         {
           value: "ozerc20",
           displayName: "UUPS ERC20",
-          description: "UUSP ERC20 contract with:",
+          description: "UUPS ERC20 contract with:",
           opts: {
             upgradeable: 'uups',
             mintable: true,
@@ -163,7 +163,7 @@ export const templates = (intl, plugin) => {
         },
         {
           value: "ozerc721",
-          displayName: "UUPS ERC721",
+          displayName: "UUPS ERC721 (NFT)",
           description: "A simple UUPS ERC721 contract",
           opts: {
             upgradeable: 'uups'
@@ -172,7 +172,7 @@ export const templates = (intl, plugin) => {
         },
         {
           value: "ozerc721",
-          displayName: "UUPS ERC721",
+          displayName: "UUPS ERC721 (NFT)",
           description: "UUPS ERC721 contract with:",
           opts: {
             upgradeable: 'uups',
@@ -183,7 +183,7 @@ export const templates = (intl, plugin) => {
         {
           value: "ozerc721",
           displayName: "UUPS ERC721 (NFT)",
-          description: "Non-fungible Token Standard",
+          description: "UUPS ERC721 contract with:",
           opts: {
             upgradeable: 'uups',
             mintable: true,
@@ -194,7 +194,7 @@ export const templates = (intl, plugin) => {
         {
           value: "ozerc721",
           displayName: "UUPS ERC721 (NFT)",
-          description: "UUPS ERC721 with: ",
+          description: "UUPS ERC721 contract with:",
           opts: {
             upgradeable: 'uups',
             mintable: true,
@@ -265,6 +265,7 @@ export const templates = (intl, plugin) => {
         plugin.call('menuicons', 'showContent', 'cookbookdev')
       },
       onClickLabel: 'Open Cookbook Plugin',
+      description: 'Discover more templates!',
       items: [
         { value: "token-sale", displayName: 'Token Sale' },
         { value: "simple-nft-sale", displayName: 'Simple Nft Sale' },
@@ -281,7 +282,7 @@ export const templates = (intl, plugin) => {
       ]
     },
     {
-      name: "OxProject",
+      name: "0xProject",
       items: [
         { value: "zeroxErc20", displayName: "ERC20", tagList: ["ERC20", "Solidity"], description: "A fungible token contract by 0xProject" }
       ]
@@ -289,7 +290,7 @@ export const templates = (intl, plugin) => {
     {
       name: "Gnosis Safe",
       items: [
-        { value: "gnosisSafeMultisig", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }), description: 'Deploy or customize the Gnosis Safe.' }
+        { value: "gnosisSafeMultisig", tagList: ["Solidity"], displayName: intl.formatMessage({ id: 'filePanel.multiSigWallet' }), description: 'Deploy or customize the Gnosis Safe MultiSig Wallet' }
       ]
     },
     {
@@ -316,12 +317,12 @@ export const templates = (intl, plugin) => {
       items: [
         { value: "uniswapV4Template",
           displayName: intl.formatMessage({ id: 'filePanel.uniswapV4Template' }),
-          description: 'Use an Uniswap hook'
+          description: 'Use a Uniswap hook'
         },
         {
           value: "breakthroughLabsUniswapv4Hooks",
           displayName: intl.formatMessage({ id: 'filePanel.breakthroughLabsUniswapv4Hooks' }),
-          description: 'Use an Uniswap hook developed by Breakthrough Labs'
+          description: 'Use a Uniswap hook developed by Breakthrough Labs'
         },
         {
           value: "uniswapV4HookBookMultiSigSwapHook",
@@ -352,25 +353,25 @@ export const templates = (intl, plugin) => {
         {
           value: "etherscanScripts",
           displayName: intl.formatMessage({ id: 'filePanel.addscriptetherscan' }),
-          description: 'Script for verifying a Contract in Etherscan.'
+          description: 'Script for verifying a Contract in Etherscan'
         },
       ],
     },
     {
-      name: 'Github Actions',
+      name: 'GitHub Actions',
       items: [
         { value: "runJsTestAction",
           displayName: intl.formatMessage({ id: 'filePanel.tssoltestghaction' }),
-          description: 'A Mocha Chai test workflow in a GitHub CI.'
+          description: 'A Mocha Chai test workflow in a GitHub CI'
         },
         { value: "runSolidityUnittestingAction",
           displayName: intl.formatMessage({ id: 'filePanel.solghaction' }),
-          description: 'Run a Solidity unit test workflow in a GitHub CI.'
+          description: 'Run a Solidity unit test workflow in a GitHub CI'
         },
         {
           value: "runSlitherAction",
           displayName: intl.formatMessage({ id: 'filePanel.slitherghaction' }),
-          description: 'Run a Slither security analysis in a GitHub CI.'
+          description: 'Run a Slither security analysis in a GitHub CI'
         }
       ],
       IsArtefact: true

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

@@ -12,7 +12,7 @@
   "filePanel.restore": "Restore",
   "filePanel.name": "Name",
   "filePanel.save": "Save",
-  "filePanel.workspace.create": "Create Workspace using template",
+  "filePanel.workspace.create": "Create Workspace Using Template",
   "filePanel.workspace.createBlank": "Create Blank Workspace",
   "filePanel.workspace.create.desktop": "Create project in new folder",
   "filePanel.workspace.rename": "Rename Workspace",
@@ -71,7 +71,7 @@
   "filePanel.createNewFile": "Create new file",
   "filePanel.createNewFolder": "Create new folder",
   "filePanel.publishToGist": "Publish to Gist",
-  "filePanel.workspace.publishToGist": "Publish workspace to GitHub gist",
+  "filePanel.workspace.publishToGist": "Publish Workspace to GitHub Gist",
   "filePanel.uploadFile": "Open a File from your File System",
   "filePanel.uploadFolder": "Upload folder",
   "filePanel.updateGist": "Update Gist",

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

@@ -8,6 +8,7 @@ interface IRemixDragBarUi {
   hidden: boolean
   minWidth: number
   maximiseTrigger: number
+  enhanceTrigger: number
   resetTrigger: number
   layoutPosition: 'left' | 'right'
 }
@@ -40,32 +41,36 @@ const DragBar = (props: IRemixDragBarUi) => {
     }
   }, [props.hidden, offset])
 
-  useEffect(() => {
-    if (props.maximiseTrigger > 0) {
-      if (props.layoutPosition === 'left') {
-        const width = 0.4 * window.innerWidth
+  const triggerWidth = (maximiseTrigger, layoutPosition, refObject, coeff) => {
+    if (maximiseTrigger > 0) {
+      if (layoutPosition === 'left') {
+        const width = coeff * window.innerWidth
 
-        if (width > props.refObject.current.offsetWidth) {
-          props.refObject.current.style.width = width + 'px'
-          setTimeout(() => {
-            setDragBarPosX(offset + width)
-          }, 300)
-        }
-      } else if (props.layoutPosition === 'right') {
-        const width = 0.4 * window.innerWidth
+        props.refObject.current.style.width = width + 'px'
+        setTimeout(() => {
+          setDragBarPosX(offset + width)
+        }, 300)
+      } else if (layoutPosition === 'right') {
+        const width = coeff * window.innerWidth
 
-        if (width > props.refObject.current.offsetWidth) {
-          props.refObject.current.style.width = width + 'px'
-          setTimeout(() => {
-            setDragBarPosX(window.innerWidth - width)
-          }, 300)
-        }
+        refObject.current.style.width = width + 'px'
+        setTimeout(() => {
+          setDragBarPosX(window.innerWidth - width)
+        }, 300)
       }
     }
+  }
+
+  useEffect(() => {
+    triggerWidth(props.maximiseTrigger, props.layoutPosition, props.refObject, 0.4)
   }, [props.maximiseTrigger])
 
   useEffect(() => {
-    if (props.maximiseTrigger > 0) {
+    triggerWidth(props.enhanceTrigger, props.layoutPosition, props.refObject, 0.25)
+  }, [props.enhanceTrigger])
+
+  useEffect(() => {
+    if (props.maximiseTrigger > 0 || props.enhanceTrigger) {
       if (props.layoutPosition === 'left') {
         props.refObject.current.style.width = initialWidth.current + 'px'
         setTimeout(() => {

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

@@ -32,8 +32,10 @@ const RemixApp = (props: IRemixAppUi) => {
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
   const [hidePinnedPanel, setHidePinnedPanel] = useState<boolean>(true)
   const [maximiseLeftTrigger, setMaximiseLeftTrigger] = useState<number>(0)
+  const [enhanceLeftTrigger, setEnhanceLeftTrigger] = useState<number>(0)
   const [resetLeftTrigger, setResetLeftTrigger] = useState<number>(0)
   const [maximiseRightTrigger, setMaximiseRightTrigger] = useState<number>(0)
+  const [enhanceRightTrigger, setEnhanceRightTrigger] = useState<number>(0)
   const [resetRightTrigger, setResetRightTrigger] = useState<number>(0)
   const [online, setOnline] = useState<boolean>(true)
   const [locale, setLocale] = useState<{ code: string; messages: any }>({
@@ -98,6 +100,12 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     })
 
+    props.app.layout.event.on('enhancesidepanel', () => {
+      setEnhanceLeftTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
     props.app.layout.event.on('resetsidepanel', () => {
       setResetLeftTrigger((prev) => {
         return prev + 1
@@ -110,6 +118,12 @@ const RemixApp = (props: IRemixAppUi) => {
       })
     })
 
+    props.app.layout.event.on('enhancepinnedpanel', () => {
+      setEnhanceRightTrigger((prev) => {
+        return prev + 1
+      })
+    })
+
     props.app.layout.event.on('resetpinnedpanel', () => {
       setResetRightTrigger((prev) => {
         return prev + 1
@@ -205,6 +219,7 @@ const RemixApp = (props: IRemixAppUi) => {
                   {props.app.sidePanel.render()}
                 </div>
                 <DragBar
+                  enhanceTrigger={enhanceLeftTrigger}
                   resetTrigger={resetLeftTrigger}
                   maximiseTrigger={maximiseLeftTrigger}
                   minWidth={305}
@@ -222,6 +237,7 @@ const RemixApp = (props: IRemixAppUi) => {
                 {
                   !hidePinnedPanel &&
                   <DragBar
+                    enhanceTrigger={enhanceRightTrigger}
                     resetTrigger={resetRightTrigger}
                     maximiseTrigger={maximiseRightTrigger}
                     minWidth={331}

libs/remix-ui/git/src/lib/gitactions.ts

@@ -99,7 +99,6 @@ export const getCommits = async (depth: number) => {
 }
 
 export const gitlog = async (depth: number) => {
-  console.log('gitlog start')
   dispatch(setLoading(true))
   let commits = []
   try {

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -47,7 +47,7 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
     // check for filter
     if (filterCon.filter != '')
       enabled = (props.title?.toLowerCase().includes(filterCon.filter?.toLowerCase()) ||
-        props.searchKeywords?.map(keyword => keyword.toLowerCase()).some(searchKeyword => searchKeyword.toLowerCase().includes(filterCon.filter.toLocaleLowerCase())))
+        props.searchKeywords?.map(keyword => keyword?.toLowerCase()).some(searchKeyword => searchKeyword?.toLowerCase().includes(filterCon.filter?.toLocaleLowerCase())))
 
     setAnyEnabled(enabled)
   }, [filterCon, props.tagList])

libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx

@@ -14,8 +14,6 @@ const _paq = window._paq = window._paq || []
 interface RemixUIGridSectionProps {
   plugin: any
   title?: string
-  onClick?: () => void
-  onClickLabel?: string
   tooltipTitle?: string
   hScrollable: boolean
   classList?: string
@@ -67,7 +65,6 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
     >
       <div className="w-100 remixui_grid_section">
         { props.title && <h6 className='mt-1 mb-0 align-items-left '>{ props.title }</h6> }
-        { props.onClick && <span style={{ cursor: 'pointer' }} className='mt-2 btn btn-sm border align-items-left' onClick={() => props.onClick() }>{ props.onClickLabel }</span> }
         <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
           { !hasChildCell(children) && <span> No items found </span>}
           { props.children }

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

@@ -987,7 +987,7 @@ export function Workspace() {
                       </CopyToClipboard>
                       }
                     </span>
-                    <span className="d-flex">
+                    <span className="d-flex" style={{ cursor: 'pointer' }} >
                       {
                         (!appContext.appState.gitHubUser || !appContext.appState.gitHubUser.isConnected) && <CustomTooltip
                           placement="right"
@@ -997,7 +997,7 @@ export function Workspace() {
                         >
                           <div data-id='filepanel-login-github' className='d-flex'>
                             <i onClick={() => logInGithub() } className="fa-brands fa-github-alt ml-2 align-self-center" style={{ fontSize: '1.1rem', cursor: 'pointer' }} aria-hidden="true"></i>
-                            <span onClick={() => logInGithub() } className="ml-1 style={{ cursor: 'pointer' }} "> Sign in </span>
+                            <span onClick={() => logInGithub() } className="ml-1"> Sign in </span>
                           </div>
                         </CustomTooltip>
                       }
@@ -1254,22 +1254,32 @@ export function Workspace() {
           <div className="d-flex justify-content-between p-1">
             <div className="text-uppercase text-dark pt-1 px-1">GIT</div>
             { selectedWorkspace.hasGitSubmodules?
-              <CustomTooltip
-                placement="top"
-                tooltipId="updateSubmodules"
-                tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id="filePanel.updateSubmodules" />}
-              >
-                <div className="pr-1">
-                  { global.fs.browser.isRequestingCloning ? <button style={{ height: 30, minWidth: "9rem" }} className='btn btn-sm border text-dark'>
-                    <i className="fad fa-spinner fa-spin"></i>
-                  Updating submodules
-                  </button> :
+
+              <div className="pr-1">
+                { global.fs.browser.isRequestingCloning ?
+                  <CustomTooltip
+                    placement="top"
+                    tooltipId="updatingSubmodules"
+                    tooltipClasses="text-nowrap"
+                    tooltipText={"Updating submodules"}
+                  >
+                    <button style={{ height: 30, minWidth: "9rem" }} className='btn btn-sm border text-dark'>
+                      <i className="fad fa-spinner fa-spin mr-2"></i>
+                        Updating...
+                    </button>
+                  </CustomTooltip> :
+                  <CustomTooltip
+                    placement="top"
+                    tooltipId="updateSubmodules"
+                    tooltipClasses="text-nowrap"
+                    tooltipText={<FormattedMessage id="filePanel.updateSubmodules" />}
+                  >
                     <button style={{ height: 30, minWidth: "9rem" }} onClick={updateSubModules} data-id='updatesubmodules' className={`btn btn-sm border  ${highlightUpdateSubmodules ? 'text-warning' : 'text-dark'}`}>
-                    Update submodules
-                    </button> }
-                </div>
-              </CustomTooltip>
+                       Update submodules
+                    </button>
+                  </CustomTooltip>
+                }
+              </div>
               : null
             }
             <CustomTooltip