Merge pull request #1910 from ethereum/moreInfoOnImportFrom

More info on import from

src/app/compiler/compiler-imports.js

@@ -131,6 +131,9 @@ module.exports = class CompilerImports {
       return resolver.require(url)
     })
     .then(result => {
+      if (url.indexOf(result.provider + ':') === 0) {
+        url = url.substring(result.provider.length + 1) // remove the github prefix
+      }
       cb(null, result.source, url, result.provider, result.url)
     })
     .catch(err => {

src/app/components/swap-panel-api.js

@@ -5,7 +5,7 @@ class SwapPanelApi {
     this.event = new EventEmmitter()
     this.component = swapPanelComponent
     this.currentContent
-    verticalIconsComponent.events.on('showContent', (moduleName) => {
+    verticalIconsComponent.events.on('toggleContent', (moduleName) => {
       if (!swapPanelComponent.contents[moduleName]) return
       if (this.currentContent === moduleName) {
         this.event.emit('toggle', moduleName)
@@ -14,6 +14,12 @@ class SwapPanelApi {
       this.showContent(moduleName)
       this.event.emit('showing', moduleName)
     })
+
+    verticalIconsComponent.events.on('showContent', (moduleName) => {
+      if (!swapPanelComponent.contents[moduleName]) return
+      this.showContent(moduleName)
+      this.event.emit('showing', moduleName)
+    })
   }
 
   showContent (moduleName) {

src/app/components/vertical-icons-component.js

@@ -209,7 +209,9 @@ class VerticalIconComponent {
   }
 
   _iconClick (name) {
-    this.select(name)
+    this.removeActive()
+    this.addActive(name)
+    this.events.emit('toggleContent', name)
   }
 
   render () {

src/app/editor/editor.js

@@ -218,8 +218,11 @@ class Editor {
    * @param {string} path Path of the file
    */
   _getMode (path) {
-    let ext = path.indexOf('.') !== -1 ? /[^.]+$/.exec(path) : null
+    let ext = path.indexOf('.') !== -1 ? /[^.]+/.exec(path) : null
-    if (ext) ext = ext[0]
+    if (ext) ext = path.replace(ext[0] + '.', '') // we get <ext>
+    ext = ext.split('#')
+    if (!ext.length) return this.modes['txt']
+    ext = ext[0]
     return ext && this.modes[ext] ? this.modes[ext] : this.modes['txt']
   }
 

src/app/tabs/compileTab/compileTab.js

@@ -38,7 +38,7 @@ class CompileTab {
     this.editor.clearAnnotations()
     var currentFile = this.config.get('currentFile')
     if (!currentFile) return
-    if (!/\.sol$/.exec(currentFile)) return
+    if (!/\.sol/.exec(currentFile)) return
     // only compile *.sol file.
     var target = currentFile
     var sources = {}

src/app/ui/landing-page/landing-page.js

@@ -90,10 +90,14 @@ export class LandingPage extends BaseApi {
   }
 
   render () {
-    let load = function (service, item) {
+    let load = function (service, item, examples, info) {
       let compilerImport = new CompilerImport()
       let fileProviders = globalRegistry.get('fileproviders').api
-      modalDialogCustom.prompt(`Import from ${service}`, 'Enter the ' + item + ' you would like to load.', null, (target) => {
+      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>`
+
+      modalDialogCustom.prompt(`Import from ${service}`, msg, null, (target) => {
         if (target !== '') {
           compilerImport.import(
             target,
@@ -104,6 +108,7 @@ export class LandingPage extends BaseApi {
               } else {
                 if (fileProviders[type]) {
                   fileProviders[type].addReadOnly(cleanUrl, content, url)
+                  globalRegistry.get('verticalicon').api.select('fileExplorers')
                 }
               }
             }
@@ -212,9 +217,11 @@ export class LandingPage extends BaseApi {
             <p class="mb-1">Import From:</p>
             <div class="btn-group">
               <button class="btn btn-sm btn-secondary" onclick=${() => { importFromGist() }}>Gist</button>
-              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Github', 'Github URL') }}>Github</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Github', 'github URL', ['https://github.com/OpenZeppelin/openzeppelin-solidity/blob/master/contracts/crowdsale/Crowdsale.sol', 'https://github.com/OpenZeppelin/openzeppelin-solidity/blob/67bca857eedf99bf44a4b6a0fc5b5ed553135316/contracts/access/Roles.sol', 'github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2']) }}>Github</button>
-              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Swarm', 'bzz-raw URL') }}>Swarm</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>']) }}>Swarm</button>
-              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Ipfs', 'ipfs URL') }}>Ipfs</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>']) }}>Ipfs</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol']) }}>https</button>
+              <button class="btn btn-sm btn-secondary" onclick=${() => { load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`) }}>Resolver-engine</button>
             </div><!-- end of btn-group -->
           </div><!-- end of div.file -->
         </div><!-- end of #col1 -->

src/app/ui/modaldialog.js

@@ -135,7 +135,7 @@ function html (opts) {
             <i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i>
           </span>
         </div>
-        <div class="modal-body"> - </div>
+        <div class="modal-body ${css.modalBody}"> - </div>
         <div class="modal-footer" autofocus>
           <span id="modal-footer-ok" class="${css['modalFooterOk']} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span>
           <span id="modal-footer-cancel" class="${css['modalFooterCancel']} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span>

src/app/ui/styles/modaldialog-styles.js

@@ -11,6 +11,9 @@ var css = csjs`
     animation-name: animatetop;
     animation-duration: 0.4s
   }
+  .modalBody {
+    word-break: break-word;
+  }
   .modalFooterOk {
   }
   .modalFooterCancel {

test-browser/helpers/contracts.js

@@ -238,7 +238,7 @@ function addInstance (browser, address, isValidFormat, isValidChecksum, callback
   browser.clickLaunchIcon('run').clearValue('.ataddressinput').setValue('.ataddressinput', address, function () {
     browser.click('div[class^="atAddress"]')
       .execute(function () {
-        var ret = document.querySelector('div[class="modal-body"] div').innerHTML
+        var ret = document.querySelector('div[class^="modal-body"] div').innerHTML
         document.querySelector('#modal-footer-ok').click()
         return ret
       }, [], function (result) {