cid.ipfs.tech/src/index.js at 3dd92559963ab93d6cc4ae9f4f291d5afe022fc0 · ipfs/cid.ipfs.tech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
const CID = require('cids')
const varint = require('varint')
const multihash = require('multihashes')
const multibaseConstants = require('multibase/src/constants')
const mutlicodecVarintTable = require('multicodec/src/varint-table')

// cidv0 ::= <multihash-content-address>
// QmRds34t1KFiatDY6yJFj8U9VPTLvSMsR63y7qdUV3RMmT
// <cidv1> ::= <multibase-prefix><cid-version><multicodec-content-type><multihash-content-address>
// zb2rhiVd5G2DSpnbYtty8NhYHeDvNkPxjSqA7YbDPuhdihj9L
function decodeCID (value) {
  const cid = new CID(value).toJSON()
  if (cid.version === 0) {
    return decodeCidV0(value, cid)
  }
  if (cid.version === 1) {
    return decodeCidV1(value, cid)
  }
  throw new Error('Unknown CID version', cid.version, cid)
}

function decodeCidV0 (value, cid) {
  return {
    cid,
    multibase: {
      name: 'base58btc',
      code: 'implicit'
    },
    multicodec: {
      name: cid.codec,
      code: 'implicit'
    },
    multihash: multihash.decode(cid.hash)
  }
}

function toBase32(value) {
  var cid = new CID(value)
  return cid.toV1().toBaseEncodedString('base32')
}

function decodeCidV1 (value, cid) {
  return {
    cid,
    multibase: multibaseConstants.codes[value.substring(0, 1)],
    multicodec: {
      name: cid.codec,
      code: '0x' + mutlicodecVarintTable[cid.codec].toString('hex')
    },
    multihash: multihash.decode(cid.hash)
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const output = document.querySelector('#cid')
  const input = document.querySelector('#input-cid')
  const multihashOutput = document.querySelector('#multihash')
  const multicodecOutput = document.querySelector('#multicodec')
  const multibaseOutput = document.querySelector('#multibase')
  const base32CidV1Output = document.querySelector('#base32cidv1')
  const humanReadableCidOutput = document.querySelector('#hr-cid')
  const errorOutput = document.querySelector('#input-error')

  function clearErrorOutput () {
    errorOutput.innerText = ''
    errorOutput.style.opacity = 0
  }

  function setOutput (output, value) {
    window.location.hash = value
    try {
      const data = decodeCID(value.trim())
      console.log(data)
      const hrCid = `${data.multibase.name} - cidv${data.cid.version} - ${data.cid.codec} - ${data.multihash.name}-${data.multihash.length * 8}-${data.multihash.digest.toString('hex')}`
      humanReadableCidOutput.innerText = hrCid
      multibaseOutput.innerHTML = toDefinitionList({code: data.multibase.code, name: data.multibase.name})
      multicodecOutput.innerHTML = toDefinitionList({code: data.multicodec.code, name: data.multicodec.name})
      multihashOutput.innerHTML = toDefinitionList({code: data.multihash.code, name: data.multihash.name, bits: data.multihash.length * 8})
      base32CidV1Output.innerHTML = toBase32(value.trim())
      clearErrorOutput()
    } catch (err) {
      if (!value) {
        clearErrorOutput()
      } else {
        console.log(err.message || err)
        errorOutput.innerText = err.message || err
        errorOutput.style.opacity = 1
      }
    }
  }
  if (input.value) {
    setOutput(output, input.value.trim())
  }
  if (window.location.hash !== '') {
    setOutput(output, window.location.hash.substr(1))
    input.value = window.location.hash.substr(1)
  }
  input.addEventListener('keyup', (ev) => {
    setOutput(output, ev.target.value.trim())
  })
})

function toDefinitionList (obj) {
  const keys = Object.keys(obj)
  const html = `
    <dl class='tl ma0 pa0'>
      ${ keys.map(k => `
        <div class='pb1'>
          <dt class='dib pr2 gray monospace'>${k}:</dt>
          <dd class='dib ma0 pa0 fw5'>${obj[k]}</dd>
        </div>`).join('') }
    </dl>
  `
  return html
}