Extract publish function in compile-tab to become a standalone function

src/app.js

@@ -360,7 +360,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     filePanel,
     registry.get('compilersartefacts').api,
     networkModule,
-    mainview
+    mainview,
+    registry.get('fileproviders/browser').api,
   )
   const analysis = new AnalysisTab(registry)
   const debug = new DebuggerTab(blockchain)

src/app/tabs/compile-tab.js

@@ -9,8 +9,6 @@ const modalDialog = require('../ui/modaldialog')
 const copyToClipboard = require('../ui/copy-to-clipboard')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 const parseContracts = require('./compileTab/contractParser')
-const publishOnSwarm = require('../../lib/publishOnSwarm')
-const publishOnIpfs = require('../../lib/publishOnIpfs')
 const addTooltip = require('../ui/tooltip')
 const globalRegistry = require('../../global/registry')
 
@@ -21,6 +19,7 @@ const CompilerContainer = require('./compileTab/compilerContainer.js')
 
 import { ViewPlugin } from '@remixproject/engine'
 import * as packageJson from '../../../package.json'
+import publishToStorage from '../../publishToStorage'
 
 const profile = {
   name: 'solidity',
@@ -255,12 +254,12 @@ class CompileTab extends ViewPlugin {
         <label class="${css.compilerLabel} form-check-label" for="compiledContracts">Contract</label>
         ${selectEl}
       </div>
-      <div>
+      <article class="px-2 mt-2 pb-0">
-        <button id="publishOnSwarm" class="btn btn-secondary btn-block" title="Publish on Swarm" onclick="${() => { this.publish('swarm') }}">
+        <button id="publishOnSwarm" class="btn btn-secondary btn-block" title="Publish on Swarm" onclick="${() => { publishToStorage('swarm', this.fileProvider, this.fileManager, this.data.contractsDetails[this.selectedContract]) }}">
           <span>Publish on Swarm</span>
           <img id="swarmLogo" class="${css.storageLogo} ml-2" src="${swarmImg}">
         </button>
-        <button id="publishOnIpfs" class="btn btn-secondary btn-block" title="Publish on Ipfs" onclick="${() => { this.publish('ipfs') }}">
+        <button id="publishOnIpfs" class="btn btn-secondary btn-block" title="Publish on Ipfs" onclick="${() => { publishToStorage('ipfs', this.fileProvider, this.fileManager, this.data.contractsDetails[this.selectedContract]) }}">
         <span>Publish on Ipfs</span>
         <img id="ipfsLogo" class="${css.storageLogo} ml-2" src="${ipfsImg}">
       </button>

src/app/tabs/runTab/contractDropdown.js

@@ -7,6 +7,8 @@ var confirmDialog = require('../../ui/confirmDialog')
 var modalDialog = require('../../ui/modaldialog')
 var MultiParamManager = require('../../ui/multiParamManager')
 
+import publishToStorage from '../../../publishToStorage'
+
 class ContractDropdownUI {
   constructor (blockchain, dropdownLogic, logCallback, runView) {
     this.blockchain = blockchain
@@ -16,6 +18,7 @@ class ContractDropdownUI {
     this.event = new EventManager()
 
     this.listenToEvents()
+    this.ipfsCheckedState = false
   }
 
   listenToEvents () {
@@ -43,16 +46,28 @@ class ContractDropdownUI {
     })
   }
 
+  updateCheckedState () {
+    this.ipfsCheckedState = !this.ipfsCheckedState
+    console.log('this.ipfsCheckedState: ', this.ipfsCheckedState)
+  }
+
   render () {
     this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="m-1 fas fa-times-circle ${css.errorIcon}" ></i>`
     var info = yo`<i class="fas fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
-
     this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" disabled id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
     this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />`
     this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`
 
     this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
+    const ipfsCheckbox = this.ipfsCheckedState ? 
+    yo`<input id="deployAndRunPublishToIPFS" checked class="mr-2" type="checkbox" onchange=${this.updateCheckedState}>`
+    :
+    yo`<input id="deployAndRunPublishToIPFS" class="mr-2" type="checkbox" onchange=${() => {
+      this.updateCheckedState()
+      publishToStorage('ipfs', this.runView.fileProvider, this.runView.fileManager, this.getSelectedContract.call(this))
+    }}>`
+
     let el = yo`
       <div class="${css.container}" data-id="contractDropdownContainer">
         <label class="${css.settingsLabel}">Contract</label>
@@ -67,6 +82,11 @@ class ContractDropdownUI {
             ${this.atAddressButtonInput}
           </div>
         </div>
+        <div class="mt-2">
+          ${ipfsCheckbox}
+          <label for="deployAndRunPublishToIPFS" class="text-dark p-0 m-0">PUBLISH TO IPFS</label>
+          <i class="fas fa-info ml-2" aria-hidden="true" title="By publishing to IPFS is allowing to verify the contract code. The bytecode is already stored transparently in the blockchain. Publishing the source code and its ABI will greatly foster contract adoption (auditing, debugging, calling it, etc...)"></i>
+        </div>
       </div>
     `
     this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))

src/app/tabs/runTab/model/dropdownlogic.js

@@ -93,7 +93,8 @@ class DropdownLogic {
       isOverSizeLimit: () => {
         var deployedBytecode = contract.object.evm.deployedBytecode
         return (deployedBytecode && deployedBytecode.object.length / 2 > 24576)
-      }
+      },
+      metadata: contract.object.metadata
     }
   }
 

src/app/udapp/run-tab.js

@@ -33,7 +33,7 @@ const profile = {
 
 export class RunTab extends LibraryPlugin {
 
-  constructor (blockchain, pluginUDapp, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, mainView) {
+  constructor (blockchain, pluginUDapp, config, fileManager, editor, filePanel, compilersArtefacts, networkModule, mainView, fileProvider) {
     super(pluginUDapp, profile)
     this.event = new EventManager()
     this.config = config
@@ -44,6 +44,7 @@ export class RunTab extends LibraryPlugin {
     this.filePanel = filePanel
     this.compilersArtefacts = compilersArtefacts
     this.networkModule = networkModule
+    this.fileProvider = fileProvider
   }
 
   renderContainer () {

src/publishToStorage.js

@@ -0,0 +1,48 @@
+const yo = require('yo-yo')
+const publishOnSwarm = require('./lib/publishOnSwarm')
+const publishOnIpfs = require('./lib/publishOnIpfs')
+const modalDialogCustom = require('./app/ui/modal-dialog-custom')
+
+export default function publish (storage, fileProvider, fileManager, contract) {
+    if (contract) {
+      if (contract.metadata === undefined || contract.metadata.length === 0) {
+        modalDialogCustom.alert('This contract may be abstract, may not implement an abstract parent\'s methods completely or not invoke an inherited contract\'s constructor correctly.')
+      } else {
+        if (storage === 'swarm') {
+          publishOnSwarm(contract, fileManager, function (err, uploaded) {
+            if (err) {
+              try {
+                err = JSON.stringify(err)
+              } catch (e) {}
+              modalDialogCustom.alert(yo`<span>Failed to publish metadata file to swarm, please check the Swarm gateways is available ( swarm-gateways.net ).<br />
+              ${err}</span>`)
+            } else {
+              var result = yo`<div>${uploaded.map((value) => {
+                return yo`<div><b>${value.filename}</b> : <pre>${value.output.url}</pre></div>`
+              })}</div>`
+              modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`)
+            }
+          }, (item) => { // triggered each time there's a new verified publish (means hash correspond)
+            fileProvider.addExternal('swarm/' + item.hash, item.content)
+          })
+        } else {
+          publishOnIpfs(contract, fileManager, function (err, uploaded) {
+            if (err) {
+              try {
+                err = JSON.stringify(err)
+              } catch (e) {}
+              modalDialogCustom.alert(yo`<span>Failed to publish metadata file to ${storage}, please check the ${storage} gateways is available.<br />
+              ${err}</span>`)
+            } else {
+              var result = yo`<div>${uploaded.map((value) => {
+                return yo`<div><b>${value.filename}</b> : <pre>${value.output.url}</pre></div>`
+              })}</div>`
+              modalDialogCustom.alert(`Published ${contract.name}'s Metadata`, yo`<span>Metadata of "${contract.name.toLowerCase()}" was published successfully.<br> <pre>${result}</pre> </span>`)
+            }
+          }, (item) => { // triggered each time there's a new verified publish (means hash correspond)
+            fileProvider.addExternal('ipfs/' + item.hash, item.content)
+          })
+        }
+      }
+    }
+  }