Merge pull request #4405 from PortalNetwork/portal-metamask

Integration ENS with IPFS
MetaMask · Jul 4, 2018 · 68e1f22 · 68e1f22
2 parents 7d882fe + f38dc03
commit 68e1f22
Show file tree

Hide file tree

Showing 21 changed files with 473 additions and 7 deletions.
diff --git a/app/404.html b/app/404.html
@@ -0,0 +1,52 @@
+<html>
+<head>
+  <title>MetaMask</title>
+  <style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    img{
+        display: block;
+    }
+    html, body{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+    .app{
+        position: relative;
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+    }
+    img{
+        display: block;
+        width: 100%;
+        height: auto;
+    }
+    h2{
+        display: block;
+        width: 100%;
+        overflow: hidden;
+        position: absolute;
+        bottom: 20%;
+        left: 0;
+        color: #1b243d;
+        text-align: center;
+    }
+    h2 > a{
+        color: #1b243d;
+    }
+  </style>
+</head>
+<body>
+    <div class="app">
+        <img src="./images/404.png" alt="">
+        <h2>Powered by <a href="https://www.portal.network/">Portal Network</a></h2>
+    </div>
+</body>
+</html>
diff --git a/app/error.html b/app/error.html
@@ -0,0 +1,79 @@
+<html>
+<head>
+  <title>MetaMask Error</title>
+  <link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet">
+  <style>
+    *{
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+    img{
+      display: block;
+    }
+    html, body{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+    @keyframes logoAmin{
+      from {transform: scale(1);}
+      50%{transform: scale(1.1);}
+      to {transform: scale(1);}
+    }
+    .errorBox{
+      width: 70%;
+      height: auto;
+      overflow: hidden;
+      background-image: url("./images/deadface.png");
+      background-repeat: no-repeat;
+      background-position: 100% 50%;
+      background-size: auto 90%;
+      padding: 5px;
+    }
+    .errorBox > img{
+      width: 100px;
+      height: auto;
+      margin-bottom: 25px;
+      animation: logoAmin 1s infinite linear;
+    }
+    .errorBox > h1, .errorBox > h2{
+      letter-spacing: 2px;
+    }
+    .errorBox > h1{
+      color: #9b9b9b;
+      font-size: 40px;
+    }
+    .errorBox > h2{
+      color: #1b243d;
+      font-size: 20px;
+      padding-top: 5px;
+    }
+    .errorBox > h2 >a{
+      color: #1b243d;
+    }
+    .errorBox > h2 >a:hover{
+      color: #44588e;
+    }
+
+    .errorBox > h1 > span{
+      color: #33559f;
+    } 
+
+  </style>
+</head>
+<body>
+  <div class="errorBox">
+    <img src="./images/logo.png" alt="">
+    <h1><span id="name"></span> not found</h1>
+    <h2>Powered by <a href="https://www.portal.network/">Portal Network</a></h2>
+  </div>
+  <script>
+    let index = location.href.lastIndexOf("?name=")
+    let name = location.href.slice(index + 6)
+    document.getElementById("name").innerHTML = name
+  </script>
+</body>
+</html>
diff --git a/app/images/404.png b/app/images/404.png
diff --git a/app/images/cancel.png b/app/images/cancel.png
diff --git a/app/images/deadface.png b/app/images/deadface.png
diff --git a/app/images/loginglogo.svg b/app/images/loginglogo.svg
diff --git a/app/images/logo.png b/app/images/logo.png
diff --git a/app/images/pw-128x128.png b/app/images/pw-128x128.png
diff --git a/app/images/pw-48x48.png b/app/images/pw-48x48.png
diff --git a/app/images/pw128x128.png b/app/images/pw128x128.png
diff --git a/app/loading.html b/app/loading.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <title>MetaMask Loading</title>
+  <style>
+    #div-logo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 256px;
+    }
+    #logo {
+      width: 100%;
+      animation: pulse 1s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+        transform: scale(0.95, 0.95);
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="div-logo">
+    <img id="logo" src="./images/loginglogo.svg">
+  </div>
+</body>
+</html>
diff --git a/app/manifest.json b/app/manifest.json
@@ -59,7 +59,10 @@
     "unlimitedStorage",
     "clipboardWrite",
     "http://localhost:8545/",
-    "https://*.infura.io/"
+    "https://*.infura.io/",
+    "activeTab",
+    "webRequest",
+    "*://*.eth/"
   ],
   "web_accessible_resources": [
     "inpage.js"
@@ -72,4 +75,4 @@
       "*"
     ]
   }
-}
+}
diff --git a/app/scripts/background.js b/app/scripts/background.js
@@ -26,6 +26,8 @@ const setupMetamaskMeshMetrics = require('./lib/setupMetamaskMeshMetrics')
 const EdgeEncryptor = require('./edge-encryptor')
 const getFirstPreferredLangCode = require('./lib/get-first-preferred-lang-code')
 const getObjStructure = require('./lib/getObjStructure')
+const ipfsContent = require('./lib/ipfsContent.js')
+
 const {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
@@ -66,6 +68,7 @@ initialize().catch(log.error)
 // setup metamask mesh testing container
 setupMetamaskMeshMetrics()
 
+
 /**
  * An object representing a transaction, in whatever state it is in.
  * @typedef TransactionMeta
@@ -155,6 +158,7 @@ async function initialize () {
   const initLangCode = await getFirstPreferredLangCode()
   await setupController(initState, initLangCode)
   log.debug('MetaMask initialization complete.')
+  ipfsContent(initState.NetworkController.provider)
 }
 
 //
@@ -258,6 +262,7 @@ function setupController (initState, initLangCode) {
   })
   global.metamaskController = controller
 
+
   // report failed transactions to Sentry
   controller.txController.on(`tx:status-update`, (txId, status) => {
     if (status !== 'failed') return

diff --git a/app/scripts/lib/contracts/registrar.js b/app/scripts/lib/contracts/registrar.js
diff --git a/app/scripts/lib/contracts/resolver.js b/app/scripts/lib/contracts/resolver.js
diff --git a/app/scripts/lib/ipfsContent.js b/app/scripts/lib/ipfsContent.js
@@ -0,0 +1,40 @@
+const extension = require('extensionizer')
+const resolver = require('./resolver.js')
+
+module.exports = function (provider) {
+    extension.webRequest.onBeforeRequest.addListener(details => {
+        const urlhttpreplace = details.url.replace(/\w+?:\/\//, '')
+        const url = urlhttpreplace.replace(/[\\/].*/g, '') // eslint-disable-line no-useless-escape
+        let domainhtml = urlhttpreplace.match(/[\\/].*/g) // eslint-disable-line no-useless-escape
+        let clearTime = null
+        const name = url.replace(/\/$/g, '')
+        if (domainhtml === null) domainhtml = ['']
+        extension.tabs.getSelected(null, tab => {
+            extension.tabs.update(tab.id, { url: 'loading.html' })
+
+            clearTime = setTimeout(() => {
+                return extension.tabs.update(tab.id, { url: '404.html' })
+            }, 60000)
+
+            resolver.resolve(name, provider).then(ipfsHash => {
+                clearTimeout(clearTime)
+                let url = 'https://ipfs.infura.io/ipfs/' + ipfsHash + domainhtml[0]
+                return fetch(url, { method: 'HEAD' }).then(response => response.status).then(statusCode => {
+                    if (statusCode !== 200) return extension.tabs.update(tab.id, { url: '404.html' })
+                    extension.tabs.update(tab.id, { url: url })
+                })
+                .catch(err => {
+                    url = 'https://ipfs.infura.io/ipfs/' + ipfsHash + domainhtml[0]
+                    extension.tabs.update(tab.id, {url: url})
+                    return err
+                })
+            })
+            .catch(err => {
+                clearTimeout(clearTime)
+                const url = err === 'unsupport' ? 'unsupport' : 'error'
+                extension.tabs.update(tab.id, {url: `${url}.html?name=${name}`})
+            })
+        })
+        return { cancel: true }
+    }, {urls: ['*://*.eth/', '*://*.eth/*']})
+}
diff --git a/app/scripts/lib/resolver.js b/app/scripts/lib/resolver.js
@@ -0,0 +1,71 @@
+const namehash = require('eth-ens-namehash')
+const multihash = require('multihashes')
+const HttpProvider = require('ethjs-provider-http')
+const Eth = require('ethjs-query')
+const EthContract = require('ethjs-contract')
+const registrarAbi = require('./contracts/registrar')
+const resolverAbi = require('./contracts/resolver')
+
+function ens (name, provider) {
+  const eth = new Eth(new HttpProvider(getProvider(provider.type)))
+  const hash = namehash.hash(name)
+  const contract = new EthContract(eth)
+  const Registrar = contract(registrarAbi).at(getRegistrar(provider.type))
+  return new Promise((resolve, reject) => {
+    if (provider.type === 'mainnet' || provider.type === 'ropsten') {
+      Registrar.resolver(hash).then((address) => {
+        if (address === '0x0000000000000000000000000000000000000000') {
+          reject(null)
+        } else {
+          const Resolver = contract(resolverAbi).at(address['0'])
+          return Resolver.content(hash)
+        }
+      }).then((contentHash) => {
+        if (contentHash['0'] === '0x0000000000000000000000000000000000000000000000000000000000000000') reject(null)
+        if (contentHash.ret !== '0x') {
+          const hex = contentHash['0'].substring(2)
+          const buf = multihash.fromHexString(hex)
+          resolve(multihash.toB58String(multihash.encode(buf, 'sha2-256')))
+        } else {
+          reject(null)
+        }
+      })
+    } else {
+      return reject('unsupport')
+    }
+  })
+}
+
+function getProvider (type) {
+  switch (type) {
+    case 'mainnet':
+      return 'https://mainnet.infura.io/'
+    case 'ropsten':
+      return 'https://ropsten.infura.io/'
+    default:
+      return 'http://localhost:8545/'
+  }
+}
+
+function getRegistrar (type) {
+  switch (type) {
+    case 'mainnet':
+      return '0x314159265dd8dbb310642f98f50c066173c1259b'
+    case 'ropsten':
+      return '0x112234455c3a32fd11230c42e7bccd4a84e02010'
+    default:
+      return '0x0000000000000000000000000000000000000000'
+  }
+}
+
+module.exports.resolve = function (name, provider) {
+  const path = name.split('.')
+  const tld = path[path.length - 1]
+  if (tld === 'eth') {
+    return ens(name, provider)
+  } else {
+    return new Promise((resolve, reject) => {
+      reject(null)
+    })
+  }
+}
diff --git a/app/unsupport.html b/app/unsupport.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>MetaMask</title>
+    </head>
+    <style>
+            *{
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+            }
+            img{
+            display: block;
+            }
+            html, body{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            }
+            @keyframes logoAmin{
+            from {transform: scale(1);}
+            50%{transform: scale(1.1);}
+            to {transform: scale(1);}
+            }
+            .unsupport{
+                width: 80%;
+                height: auto;
+                overflow: hidden;
+                padding: 10px;
+            }
+            .unsupport > img{
+                margin: 0 auto 31px auto;
+                width: 136px;
+                height: auto;
+                animation: logoAmin 1s infinite linear;
+            }
+            .unsupport > h1{
+                text-align: center;
+                font-family: Gotham;
+                font-size: 18px;
+                font-weight: 500;
+                font-style: normal;
+                font-stretch: normal;
+                line-height: normal;
+                letter-spacing: 1.3px;
+                color: #33559f;
+            }
+
+        </style>
+    <body>
+        <div class="unsupport">
+            <img src="./images/cancel.png" alt="">
+            <h1>ENS resolver only support on Ethereum mainnet</h1>
+        </div>
+    </body>
+</html>