feat: fix remix unsafe gateway

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

@@ -538,7 +538,7 @@ export class LandingPage extends ViewPlugin {
                       <div class="btn-group">
                         <button class="btn mr-1 btn-secondary" data-id="landingPageImportFromGistButton" onclick="${() => importFromGist()}">Gist</button>
                         <button class="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 class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
+                        <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs(Crust)</button>
                         <button class="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>
                       </div><!-- end of btn-group -->
                     </div><!-- end of div.file -->

libs/remix-ui/publish-to-storage/src/lib/publishToIPFS.tsx

@@ -1,13 +1,27 @@
-import IpfsClient from 'ipfs-mini'
-
-const ipfsNodes = [
-  new IpfsClient({ host: 'ipfs.remixproject.org', port: 443, protocol: 'https' }),
-  new IpfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }),
-  new IpfsClient({ host: '127.0.0.1', port: 5001, protocol: 'http' })
-]
+import IpfsClient from 'ipfs-http-client'
+import axios from 'axios'
+import { ethers } from 'ethers'
 
 export const publishToIPFS = async (contract, api) => {
-  // gather list of files to publish
+  // 1. Create web3 authed header
+  const pair = ethers.Wallet.createRandom()
+  const sig = await pair.signMessage(pair.address)
+  const authHeaderRaw = `eth-${pair.address}:${sig}`
+  const authHeader = Buffer.from(authHeaderRaw).toString('base64')
+
+  // 2. Init IPFS endpoint
+  const ipfsNodes = [
+    new IpfsClient({
+      url: 'https://crustipfs.xyz/api/v0',
+      headers: {
+        authorization: 'Basic ' + authHeader
+      }
+    }), // IPFS Web3 Authed Gateway
+    new IpfsClient({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' }),
+    new IpfsClient({ host: '127.0.0.1', port: 5001, protocol: 'http' })
+  ]
+
+  // 3. Gather list of files to publish
   const sources = []
   let metadata
   const item = { content: null, hash: null }
@@ -52,13 +66,14 @@ export const publishToIPFS = async (contract, api) => {
       console.log(error)
     })
   }))
-  // publish the list of sources in order, fail if any failed
+
+  // 4. Publish the list of sources in order, fail if any failed
   await Promise.all(sources.map(async (item) => {
     try {
-      const result = await ipfsVerifiedPublish(item.content, item.hash)
-
+      const result = await ipfsVerifiedPublish(ipfsNodes, item.content, item.hash)
       try {
         item.hash = result.url.match('dweb:/ipfs/(.+)')[1]
+        await pinToCrust(authHeader, item.hash)
       } catch (e) {
         item.hash = '<Metadata inconsistency> - ' + item.fileName
       }
@@ -71,10 +86,10 @@ export const publishToIPFS = async (contract, api) => {
   const metadataContent = JSON.stringify(metadata)
 
   try {
-    const result = await ipfsVerifiedPublish(metadataContent, '')
-
+    const result = await ipfsVerifiedPublish(ipfsNodes, metadataContent, '')
     try {
       contract.metadataHash = result.url.match('dweb:/ipfs/(.+)')[1]
+      await pinToCrust(authHeader, contract.metadataHash)
     } catch (e) {
       contract.metadataHash = '<Metadata inconsistency> - metadata.json'
     }
@@ -93,23 +108,36 @@ export const publishToIPFS = async (contract, api) => {
   return { uploaded, item }
 }
 
-const ipfsVerifiedPublish = async (content, expectedHash) => {
+const ipfsVerifiedPublish = async (ipfsNodes, content, expectedHash) => {
   try {
-    const results = await severalGatewaysPush(content)
-
-    if (expectedHash && results !== expectedHash) {
-      return { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'dweb:/ipfs/' + results, hash: results }
+    const results: any = await severalGatewaysPush(ipfsNodes, content)
+    const cidResult = results.cid.toV0().toString()
+    if (expectedHash && cidResult !== expectedHash) {
+      return { message: 'hash mismatch between solidity bytecode and uploaded content.', url: 'dweb:/ipfs/' + cidResult, hash: cidResult }
     } else {
-      return { message: 'ok', url: 'dweb:/ipfs/' + results, hash: results }
+      return { message: 'ok', url: 'dweb:/ipfs/' + cidResult, hash: cidResult }
     }
   } catch (error) {
     throw new Error(error)
   }
 }
 
-const severalGatewaysPush = (content) => {
+const severalGatewaysPush = (ipfsNodes, content) => {
   const invert = p => new Promise((resolve, reject) => p.then(reject).catch(resolve)) // Invert res and rej
   const promises = ipfsNodes.map((node) => invert(node.add(content)))
 
   return invert(Promise.all(promises))
 }
+
+const pinToCrust = async (authHeader, cid) => {
+  const rst = await axios.post(
+    'https://pin.crustcode.com/psa/pins',
+    { cid: cid },
+    {
+      headers: {
+        authorization: 'Bearer ' + authHeader
+      }
+    })
+
+  console.log(rst)
+}

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -204,7 +204,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           </div>
           <article className="mt-2 pb-0">
             <button id="publishOnIpfs" className="btn btn-secondary btn-block" title="Publish on Ipfs" onClick={() => { handlePublishToStorage('ipfs') }}>
-              <span>Publish on Ipfs</span>
+              <span>Publish on Ipfs(Crust)</span>
               <img id="ipfsLogo" className="remixui_storageLogo ml-2" src="assets/img/ipfs.webp" />
             </button>
             <button data-id="compilation-details" className="btn btn-secondary btn-block" title="Display Contract Details" onClick={() => { details() }}>

libs/remix-url-resolver/src/resolve.ts

@@ -113,7 +113,7 @@ export class RemixURLResolver {
     url = url.replace(/^ipfs:\/\/?/, 'ipfs/')
     // eslint-disable-next-line no-useless-catch
     try {
-      const req = 'https://ipfs.remixproject.org/' + url
+      const req = 'https://crustipfs.xyz/' + url
       // If you don't find greeter.sol on ipfs gateway use local
       // const req = 'http://localhost:8080/' + url
       const response: AxiosResponse = await axios.get(req)