adding the modal dialog

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'
 import * as packageJson from '../../../../../../package.json'
 import { ViewPlugin } from '@remixproject/engine-web'
 import { RemixUiHomeTab } from '@remix-ui/home-tab' // eslint-disable-line
-import { id } from '@ethersproject/hash'
 
 const yo = require('yo-yo')
 const globalRegistry = require('../../../global/registry')
@@ -37,7 +36,6 @@ export class LandingPage extends ViewPlugin {
     // to retrieve medium posts
     document.body.appendChild(yo`<script src="https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js"></script>`)
     document.body.appendChild(yo`<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>`)
-
   }
 
   render () {

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css

@@ -84,3 +84,4 @@
   .remixui_migrationBtn {
     width: 100px;
   }
+  

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

@@ -25,11 +25,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   const [state, setState] = useState<{
     showBasicMigration: boolean,
     themeQuality: { filter: string, name: string },
-    showMediaPanel: 'none' | 'twitter' | 'medium'
+    showMediaPanel: 'none' | 'twitter' | 'medium',
+    showModalDialog: boolean,
+    modalInfo: { title: string, loadItem: string, examples: Array<string> }
   }>({
     showBasicMigration: false,
     themeQuality: registry.get('themeModule').api.currentTheme().quality === 'dark' ? themes.dark : themes.light,
-    showMediaPanel: 'none'
+    showMediaPanel: 'none',
+    showModalDialog: false,
+    modalInfo: { title: '', loadItem: '', examples: []}
   })
 
   const playRemi = async () => {
@@ -45,20 +49,21 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
         return { ...prevState, themeQuality: theme.quality === 'dark' ? themes.dark : themes.light }
       })
     })
-    window.addEventListener('click', (e) => {
-      if (e.target.id !== 'remixIDEHomeTwitterbtn' && e.target.id !== 'remixIDEHomeMediumbtn') {
+    window.addEventListener('click', (event) => {
+      const { id } = (event.target as HTMLButtonElement).dataset
+      if ( id !== 'remixIDEHomeTwitterbtn' && id!== 'remixIDEHomeMediumbtn') {
         // todo check event.target
         setState(prevState => { return { ...prevState, showMediaPanel: 'none' } })
       }
     })
   }, [])
 
-  const createNewFile = () => {
-    plugin.call('filePanel', 'createNewFile')
+  const createNewFile = async () => {
+    await plugin.call('filePanel', 'createNewFile')
   }
 
-  const uploadFile = (target) => {
-    plugin.call('filePanel', 'uploadFile', target)
+  const uploadFile = async (target) => {
+    await plugin.call('filePanel', 'uploadFile', target)
   }
 
   const connectToLocalhost = () => {
@@ -104,40 +109,61 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     plugin.verticalIcons.select('pluginManager')
   }
 
-  const load = (service, item, examples, info = '') => {/*
-    const contentImport = this.contentImport
-    const fileProviders = registry.get('fileproviders').api
-    const msg = yo`
-      <div class="p-2">
-        <span>Enter the ${item} you would like to load.</span>
-        <div>${info}</div>
-        <div>e.g ${examples.map((url) => { return yo`<div class="p-1"><a>${url}</a></div>` })}</div>
-      </div>`
+  const showFullMessage = (title: string, loadItem: string, examples: Array<string>) => {
+    setState(prevState => {
+      return { ...prevState, modalInfo: { title: title, loadItem: loadItem , examples: examples } }
+    })
+  }
+
+  const hideFullMessage = () => { //eslint-disable-line
+    setState(prevState => {
+      return { ...prevState, showModalDialog: false }
+    })
+  }
 
-    const title = `Import from ${service}`
-    modalDialogCustom.prompt(title, msg, null, (target) => {
-      if (target !== '') {
+  const processLoading = () => {
+    const contentImport = plugin.contentImport
+    const fileProviders = registry.get('fileproviders').api
     contentImport.import(
-          target,
-          (loadingMsg) => { tooltip(loadingMsg) },
+      null,//target,
+      (loadingMsg) => { setState(prevState => { return { ...prevState, tooltip: loadingMsg } }) },
       (error, content, cleanUrl, type, url) => {
         if (error) {
-              modalDialogCustom.alert(title, error.message || error)
+          //modalDialogCustom.alert(state.modalInfo.title, error.message || error)
         } else {
           try {
             fileProviders.workspace.addExternal(type + '/' + cleanUrl, content, url)
-                this.verticalIcons.select('filePanel')
+            plugin.call('menuicons', 'select', 'filePanel')
           } catch (e) {
-                modalDialogCustom.alert(title, e.message)
+            //modalDialogCustom.alert(state.modalInfo.title, e.message)
           }
         }
       }
     )
   }
-    })*/
-  }
+
   const maxHeight = Math.max(window.innerHeight - 150, 200) + 'px'
   return (
+    <>
+      <ModalDialog
+        title={ 'Import from ' +  state.modalInfo.title }
+        cancelLabel='Close'
+        cancelFn={ () => {} }
+        hide={ !state.showModalDialog }
+        handleHide={ () => hideFullMessage() }
+        okFn={ () => processLoading() }
+      >
+        <div className="p-2">
+        { state.modalInfo.loadItem !== '' && <span>Enter the { state.modalInfo.loadItem } you would like to load.</span> }
+        { state.modalInfo.examples.length !== 0 && 
+          <>
+            <div>e.g </div>
+            <div>
+            { state.modalInfo.examples.map((url) => { return `<div className="p-1"><a>${url}</a></div>` }) }
+            </div>
+          </> }
+        </div>
+      </ModalDialog>
       <div className="d-flex flex-column" id="remixUiRightPanel">
         <div className="border-bottom d-flex flex-column justify-content-between clearfix py-3 mb-4">
           <div className="mx-4 w-100 d-flex">
@@ -156,11 +182,11 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
               <h4>Featured Plugins</h4>
               <div className="d-flex flex-row pt-2">
                 <ThemeContext.Provider value={ state.themeQuality }>
-                <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={startSolidity} />
-                <PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={startOptimism} />
-                <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={startSolhint} />
-                <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={startLearnEth} />
-                <PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={startSourceVerify} />
+                  <PluginButton imgPath="assets/img/solidityLogo.webp" envID="solidityLogo" envText="Solidity" callback={() => startSolidity()} />
+                  <PluginButton imgPath="assets/img/optimismLogo.webp" envID="optimismLogo" envText="Optimism" callback={() => startOptimism()} />
+                  <PluginButton imgPath="assets/img/solhintLogo.webp" envID="solhintLogo" envText="Solhint linter" callback={() => startSolhint()} />
+                  <PluginButton imgPath="assets/img/learnEthLogo.webp" envID="learnEthLogo" envText="LearnEth" callback={() => startLearnEth()} />
+                  <PluginButton imgPath="assets/img/sourcifyLogo.webp" envID="sourcifyLogo" envText="Sourcify" callback={() => startSourceVerify()} />
                   <PluginButton imgPath="assets/img/moreLogo.webp" envID="moreLogo" envText="More" callback={startPluginManager} />
                 </ThemeContext.Provider>
               </div>
@@ -189,9 +215,9 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
                 <p className="mt-3 mb-0"><label>LOAD FROM:</label></p>
                 <div className="btn-group">
                   <button className="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onClick={() => importFromGist()}>Gist</button>
-                <button className="btn mx-1 btn-secondary" onClick={() => load('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>
-                <button className="btn mx-1 btn-secondary" onClick={() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}>Ipfs</button>
-                <button className="btn mx-1 btn-secondary" onClick={() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}>https</button>
+                  <button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Github', 'github URL', ['https://github.com/0xcert/ethereum-erc721/src/contracts/tokens/nf-token-metadata.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol'])}>GitHub</button>
+                  <button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}>Ipfs</button>
+                  <button className="btn mx-1 btn-secondary" onClick={() => showFullMessage('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-contracts/master/contracts/token/ERC20/ERC20.sol'])}>https</button>
                 </div>
               </div>
               <div className="ml-4 pl-4">
@@ -272,6 +298,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
           </div>
         </div>
       </div>
+    </>
   )
 }