vrid/lib/index.js

window.module = {};

const Cookies = require('js-cookie');
const frontendApi = require('./frontend-api.js')({crdsUrl: '/id/api'});
const base64 = require('./base64');

window.$ = s => document.querySelectorAll(s);

const baseUrl = '/id';
const pages = {
  login: () => {
    // const statusbarEl = $('.statusbar.login')[0];
    // statusbarEl.style.display = 'flex';
    const pageEl = $('#login-page')[0];
    pageEl.style.display = null;

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      $('#login-input')[0].value = '';
    };
  },
  account: () => {
    // const statusbarEl = $('.statusbar.account')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('avatar');
    const pageEl = $('#account-page')[0];
    pageEl.style.display = null;

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';
    };
  },
  asset: () => {
    // const statusbarEl = $('.statusbar.asset')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('avatar');
    const pageEl = $('#asset-page')[0];
    pageEl.style.display = null;

    const assetReadmeEl = $('#asset-readme')[0];
    fetch(baseUrl + '/api/data/' + _getBaseAsset(assetReadmeEl.asset))
      .then(_resText)
      .then(readme => {
        _setReadmeText(readme);
      })
      .catch(err => {
        console.warn(err);
      });

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      // $('#asset-assetname')[0].innerText = '';
      $('#asset-readme-form')[0].style.display = '';
      $('#send-asset-address-input')[0].value = '';
      $('#send-asset-quantity-input')[0].value = '';
      $('#mint-asset-form')[0].style.display = '';
      $('#price-asset-form')[0].style.display = '';
      $('#mint-subasset-name-input')[0].value = '';
      $('#mint-quantity-input')[0].value = '';
    };
  },
  createAsset: () => {
    // const statusbarEl = $('.statusbar.create-asset')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('avatar');
    const pageEl = $('#create-asset-page')[0];
    pageEl.style.display = null;

    const createAssetNameInput = $('#create-asset-name-input')[0];
    createAssetNameInput.value = '';
    createAssetNameInput.focus();
    createAssetNameInput.select();

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      $('#create-asset-name-input')[0].value = '';
    };
  },
  buyAsset: () => {
    // const statusbarEl = $('.statusbar.buy-asset')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('avatar');
    const pageEl = $('#buy-asset-page')[0];
    pageEl.style.display = null;

    const buyAssetNameInput = $('#buy-asset-name-input')[0];
    buyAssetNameInput.value = '';
    buyAssetNameInput.focus();
    buyAssetNameInput.select();

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      $('#buy-asset-name-input')[0].value = '';
      $('#buy-asset-quantity-input')[0].value = '';
    };
  },
  confirmPurchase: () => {
    // const statusbarEl = $('.statusbar.confirm-purchase')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('avatar');
    const pageEl = $('#confirm-purchase-page')[0];
    pageEl.style.display = null;

    return () => {
      statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      $('#confirm-purchase-asset')[0].innerText = '';
      $('#confirm-purchase-price')[0].innerText = '';
    };
  },
  keys: () => {
    // const statusbarEl = $('.statusbar.monitor')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('keys');
    const pageEl = $('#keys-page')[0];
    pageEl.style.display = null;

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      const showSecrets = $('#show-secrets')[0];
      const hideSecrets = $('#hide-secrets')[0];
      const secretValue = $('#secret-value')[0];
      showSecrets.style.display = 'block';
      hideSecrets.style.display = 'none';
      secretValue.classList.remove('visible');
    };
  },
  mining: () => {
    // const statusbarEl = $('.statusbar.monitor')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('mining');
    const pageEl = $('#mining-page')[0];
    pageEl.style.display = null;

    fetch(baseUrl + '/api/minedBlocks')
      .then(_resJson)
      .then(minedBlocks => {
        $('#blocks-mined')[0].innerText = minedBlocks;
      })
      .catch(err => {
        console.warn(err);
      });

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';
    };
  },
  monitor: () => {
    // const statusbarEl = $('.statusbar.monitor')[0];
    // statusbarEl.style.display = 'flex';
    header.setTab('monitor');
    const pageEl = $('#monitor-page')[0];
    pageEl.style.display = null;

    return () => {
      // statusbarEl.style.display = 'none';
      pageEl.style.display = 'none';

      const blocksData = $('#blocks-data')[0];
      blocksData.innerText = '';
      const mempoolData = $('#mempool-data')[0];
      mempoolData.innerText = '';

      const showSecrets = $('#show-secrets')[0];
      const hideSecrets = $('#hide-secrets')[0];
      const secretValue = $('#secret-value')[0];
      showSecrets.style.display = 'block';
      hideSecrets.style.display = 'none';
      secretValue.classList.remove('visible');
    };
  },
};

const _getBaseAsset = asset => {
  const match = asset.match(/^(.+):mint$/);
  return match ? match[1] : asset;
};
const _setReadmeText = readme => {
  const assetReadmeEl = $('#asset-readme')[0];

  if (readme) {
    assetReadmeEl.innerText = readme;

    assetReadmeEl.text = readme;
  } else {
    assetReadmeEl.innerHTML = '';
    const readmePlaceholderEl = document.createElement('div');
    readmePlaceholderEl.classList.add('readme-placeholder');
    readmePlaceholderEl.innerText = 'No readme';
    assetReadmeEl.appendChild(readmePlaceholderEl);

    assetReadmeEl.text = '';
  }
};
const _nop = () => {};
const _resJson = res => {
  if (res.status >= 200 && res.status < 300) {
    return res.json();
  } else {
    return Promise.reject({
      status: res.status,
      stack: 'API returned invalid status code: ' + res.status,
    });
  }
};
const _resText = res => {
  if (res.status >= 200 && res.status < 300) {
    return res.text();
  } else if (res.status === 404) {
    return Promise.resolve('');
  } else {
    return Promise.reject({
      status: res.status,
      stack: 'API returned invalid status code: ' + res.status,
    });
  }
};
const _resBlob = res => {
  if (res.status >= 200 && res.status < 300) {
    return res.blob();
  } else {
    return Promise.reject({
      status: res.status,
      stack: 'API returned invalid status code: ' + res.status,
    });
  }
};

/* const loginUsername = $('#login-username')[0];
const accountUsername = $('#account-username')[0];
const assetUsername = $('#asset-username')[0];
const assetAssetname = $('#asset-assetname')[0];
const createAssetUsername = $('#create-asset-username')[0];
const buyAssetUsername = $('#buy-asset-username')[0];
const confirmPurchaseUsername = $('#confirm-purchase-username')[0];
const monitorUsername = $('#monitor-username')[0]; */

const _boot = () => {
  header.setNotification(null, `Items are stored on the blockchain. Use them on any VR server. <a href="http://zeovr.wikia.com/wiki/Items">Learn more</a>`);
  header.onlogout = e => {
    Cookies.remove('privateKey');
    Cookies.remove('data');
    // document.location.href = baseUrl + '/logout';
  };

  let pageCleanup = null;
  const _setPage = page => {
    if (pageCleanup) {
      pageCleanup();
      pageCleanup = null;
    }

    pageCleanup = pages[page]();
  };

  let balances = [];
  const _login = privateKey => {
    if (privateKey) {
      Cookies.set('privateKey', privateKey, {expires: 365});

      const publicKey = base64.encode(frontendApi.getPublicKey(base64.decode(privateKey)));
      secretValue.innerText = JSON.stringify({
        publicKey: publicKey,
        privateKey: privateKey,
      }, null, 2);

      /* loginUsername.innerText = address;
      accountUsername.innerText = address;
      assetUsername.innerText = address;
      createAssetUsername.innerText = address;
      buyAssetUsername.innerText = address;
      confirmPurchaseUsername.innerText = address;
      monitorUsername.innerText = address;

      const src = creaturejs.makeStaticCreature('user:' + address);
      [
        $('#login-icon')[0],
        $('#account-icon')[0],
        $('#asset-icon')[0],
        $('#create-asset-icon')[0],
        $('#buy-asset-icon')[0],
        $('#confirm-purchase-icon')[0],
        $('#monitor-icon')[0],
      ].forEach(icon => {
        icon.src = src;
      }); */
    }

    return Promise.resolve();
  };
  const _loadAsync = privateKey => {
    const address = privateKey ? frontendApi.getAddress(base64.decode(privateKey)) : null;

    return Promise.all([
      address ? frontendApi.requestUnconfirmedBalances(address) : Promise.resolve([]),
    ])
      .then(([
        newBalances,
      ]) => {
        const _getAssetSrc = (asset, quantity) => {
          const baseAsset = _getBaseAsset(asset);
          return `\
            <div class=icon>
              <img class=img src="${creaturejs.makeStaticCreature('asset:' + baseAsset)}">
            </div>
            <div class=sub>
              <div class=name>${asset}</div>
              ${quantity > 0 ? `<div class=quantity>${quantity}</div>` : ''}
            </div>
          `;
        };
        const _getServerSrc = name => `\
          <div class=icon>
            <img class=img src="${creaturejs.makeStaticCreature('server:' + name)}">
          </div>
          <div class=sub>
            <div class=name>${name}</div>
          </div>
        `;
        const _bindDraggableAsset = (el, asset, dragStart = _nop, dragEnd = _nop) => {
          el.setAttribute('draggable', true);
          const _dragStart = e => {
            e.dataTransfer.setData('text/plain', asset);

            dragStart();
          };
          el.addEventListener('dragstart', _dragStart);
          const _dragEnd = e => {
            dragEnd();
          };
          el.addEventListener('dragend', _dragEnd);

          el._unbindDraggable = () => {
            el.removeAttribute('draggable');
            el.removeEventListener('dragstart', _dragStart);
            el.removeEventListener('dragend', _dragEnd);
          };
        };
        const _unbindDraggableAsset = el => {
          if (el._unbindDraggable) {
            el._unbindDraggable();
            el._unbindDraggable = null;
          }
        };
        const _loadInventory = () => {
          const inventoryGrid = $('#inventory-grid')[0];
          while (inventoryGrid.hasChildNodes()) {
            inventoryGrid.removeChild(inventoryGrid.lastChild);
          }
          const newBalanceAssets = Object.keys(newBalances);
          if (newBalanceAssets.length > 0) {
            const assetEls = newBalanceAssets
              .map(asset => {
                const quantity = newBalances[asset];

                const el = document.createElement('a');
                el.classList.add('asset');
                el.innerHTML = _getAssetSrc(asset, quantity);
                el.addEventListener('click', e => {
                  window.location.href = baseUrl + '/assets/' + asset;
                });
                _bindDraggableAsset(el, asset);
                return el;
              });
            for (let i = 0; i < assetEls.length; i++) {
              const assetEl = assetEls[i];
              inventoryGrid.appendChild(assetEl);
            }
          } else {
            const el = document.createElement('div');
            el.classList.add('assets-grid-placeholder');
            el.innerText = 'Inventory empty :|';
            inventoryGrid.appendChild(el);
          }

          balances = newBalances;
        };
        const _loadEquipment = () => {
          const numEquipments = 4;
          const equipments = (() => {
            const s = Cookies.get('data');
            const j = s && _jsonParse(s);
            const equipments = j && j.equipment;

            if (Array.isArray(equipments) && equipments.length === numEquipments && equipments.every(e => e === null || typeof e === 'string')) {
              return equipments;
            } else {
              const result = Array(numEquipments)
              for (let i = 0; i < numEquipments; i++) {
                result[i] = null;
              }
              return result;
            }
          })();
          const _saveEquipment = () => {
            let data = _jsonParse(Cookies.get('data'));
            if (typeof data !== 'object' || data === null) {
              data = {};
            }
            data.equipment = equipments;
            Cookies.set('data', JSON.stringify(data), {expires: 365});
          };

          const equipmentGrid = $('#equipment-grid')[0];
          while (equipmentGrid.hasChildNodes()) {
            equipmentGrid.removeChild(equipmentGrid.lastChild);
          }
          const assetEls = equipments
            .map((asset, i) => {
              if (!(balances[asset] > 0)) {
                asset = null;
              }

              let dropped = false;

              const el = document.createElement('div');
              el.classList.add('asset', 'empty');
              el.innerHTML = `<div class=placeholder>Drag here</div>`;
              el.addEventListener('mousedown', e => {
                if (!el.getAttribute('draggable')) {
                  e.preventDefault();
                }
              });
              el.addEventListener('dragover', e => {
                e.preventDefault();
              });
              el.addEventListener('drop', e => {
                const asset = e.dataTransfer.getData('text/plain');

                for (let j = 0; j < equipments.length; j++) {
                  if (equipments[j] === asset) {
                    equipments[j] = null;
                    const oldAssetEl = assetEls[j];

                    oldAssetEl.classList.add('empty');
                    oldAssetEl.innerHTML = `<div class=placeholder>Drag here</div>`;

                    _unbindDraggableAsset(oldAssetEl);
                  }
                }

                _setAsset(asset);

                dropped = true; // prevent dragend from synchronously clearing this element
                setTimeout(() => {
                  dropped = false;
                });
              });

              const _setAsset = asset => {
                equipments[i] = asset;
                _saveEquipment();

                el.classList.remove('empty');
                el.innerHTML = _getAssetSrc(asset, 0);

                _unbindDraggableAsset(el);
                _bindDraggableAsset(el, asset, _nop, () => {
                  if (!dropped) {
                    equipments[i] = null;
                    _saveEquipment();

                    _unbindDraggableAsset(el);

                    el.classList.add('empty');
                    el.innerHTML = `<div class=placeholder>Drag here</div>`;
                  }
                });
              };
              if (asset !== null) {
                _setAsset(asset);
              }

              return el;
            });
          for (let i = 0; i < assetEls.length; i++) {
            const assetEl = assetEls[i];
            equipmentGrid.appendChild(assetEl);
          }
        };
        const _loadServers = () => {
          const servers = (() => {
            const s = Cookies.get('data');
            const j = s && _jsonParse(s);
            const servers = j && j.servers;

            if (Array.isArray(servers) && servers.every(s => s && s.url && typeof s.url === 'string')) {
              return servers;
            } else {
              return [];
            }
          })();

          const serversGrid = $('#servers-grid')[0];
          while (serversGrid.hasChildNodes()) {
            serversGrid.removeChild(serversGrid.lastChild);
          }
          const serverEls = servers
            .map(server => {
              const {url, name} = server;

              const el = document.createElement('a');
              el.classList.add('asset');
              el.innerHTML = _getServerSrc(name);
              el.href = url;
              return el;
            });
          for (let i = 0; i < serverEls.length; i++) {
            const serverEl = serverEls[i];
            serversGrid.appendChild(serverEl);
          }
          $('#servers-wrap')[0].style.display = servers.length > 0 ? null : 'none';

          balances = newBalances;
        };

        _loadInventory();
        _loadEquipment();
        _loadServers();
      })
      .catch(err => {
        console.warn(err);
      });
  };
  const _init = () => {
    const privateKey = Cookies.get('privateKey');

    return _login(privateKey)
      .then(() => _loadAsync(privateKey));
  };

  const _load = url => {
    let match = url.match(/^\/id(?:\/(login|assets\/[^\/]+|createAsset|buyAsset|confirmPurchase|keys|mining|monitor))?(?:\?(.*))?$/);
    const pageMatch = (match && match[1]) || '';
    const queryString = (match && match[2]) || '';

    if (pageMatch === 'login') {
      _setPage('login');
    } else if (match = pageMatch.match(/^assets\/(.+)$/)) {
      const asset = match[1];
      const baseAsset = _getBaseAsset(asset);

      // $('#asset-assetname')[0].innerText = asset;
      $('#asset-readme')[0].asset = asset;
      $('#asset-readme-form')[0].style.display = (balances[baseAsset + ':mint'] > 0) ? null : 'none';
      $('#mint-asset-form')[0].style.display = (balances[baseAsset + ':mint'] > 0) ? null : 'none';
      $('#price-asset-form')[0].style.display = (balances[baseAsset + ':mint'] > 0) ? null : 'none';

      _setPage('asset');
    } else if (pageMatch === 'createAsset') {
      _setPage('createAsset');
    } else if (pageMatch === 'buyAsset') {
      _setPage('buyAsset');
    } else if (pageMatch === 'confirmPurchase') {
      const query = _parseQueryString(queryString);
      const {asset, price: priceString} = query;
      const price = parseInt(priceString, 10);

      if (asset && isFinite(price) && price > 0 && Math.floor(price) === price) {
        $('#confirm-purchase-asset')[0].innerText = asset;
        $('#confirm-purchase-price')[0].innerText = price;

        _setPage('confirmPurchase');
      } else {
        console.log('invalid confirm purchase args', query);

        _setPage('account');
      }
    } else if (pageMatch === 'keys') {
      _setPage('keys');
    } else if (pageMatch === 'mining') {
      _setPage('mining');
    } else if (pageMatch === 'monitor') {
      _setPage('monitor');
    } else {
      _setPage('account');
    }
  };
  const _postMessage = (() => {
    const target = window.opener || window.parent || window;

    return m => {
      target.postMessage(m, '*');
    };
  })();
  const _respond = (error, result) => {
    const o = {};
    if (!error) {
      o.result = result;
    } else {
      o.error = error;
    }
    _postMessage(o);
  };

  /* [
    $('#login-login-button')[0],
    $('#account-login-button')[0],
    $('#asset-login-button')[0],
    $('#create-asset-login-button')[0],
    $('#buy-asset-login-button')[0],
    $('#confirm-purchase-login-button')[0],
    $('#monitor-login-button')[0],
  ].forEach(loginButton => {
    loginButton.addEventListener('click', e => {
      _navigate('/login');
    });
  });
  [loginUsername, assetUsername, createAssetUsername, buyAssetUsername, confirmPurchaseUsername, monitorUsername].forEach(username => {
    username.addEventListener('click', e => {
      _navigate('');
    });
  }); */

  const loginInput = $('#login-input')[0];
  loginInput.focus();
  $('#login-generate')[0].addEventListener('click', e => {
    const privateKey = (() => {
      const array = new Uint8Array(32);
      crypto.getRandomValues(array);
      return array;
    })();
    const privateKeyString = base64.encode(privateKey);
    loginInput.value = privateKeyString;
    loginInput.focus();
    loginInput.select();
  });
  $('#login-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const privateKey = loginInput.value;
    if (privateKey) {
      _login(privateKey);

      window.location.href = baseUrl + '/';
    }
  });

  $('#create-asset')[0].addEventListener('click', e => {
    window.location.href = baseUrl + '/createAsset';
  });

  $('#buy-asset')[0].addEventListener('click', e => {
    window.location.href = baseUrl + '/buyAsset';
  });

  /* $('#monitor')[0].addEventListener('click', e => {
    _navigate('/monitor');
  }); */
  $('#blocks-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const blocksData = $('#blocks-data')[0];
    blocksData.innerText = '';

    frontendApi.requestBlockCache()
      .then(blocks => {
        blocksData.innerText = JSON.stringify(blocks, null, 2);
      })
      .catch(err => {
        console.warn(err);
      });
  });
  $('#mempool-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const mempoolData = $('#mempool-data')[0];
    mempoolData.innerText = '';

    frontendApi.requestMempool()
      .then(mempool=> {
        mempoolData.innerText = JSON.stringify(mempool, null, 2);
      })
      .catch(err => {
        console.warn(err);
      });
  });

  const showSecrets = $('#show-secrets')[0];
  const hideSecrets = $('#hide-secrets')[0];
  const secretValue = $('#secret-value')[0];
  showSecrets.addEventListener('click', e => {
    secretValue.classList.add('visible');
    showSecrets.style.display = 'none';
    hideSecrets.style.display = 'block';
  });
  hideSecrets.addEventListener('click', e => {
    secretValue.classList.remove('visible');
    showSecrets.style.display = 'block';
    hideSecrets.style.display = 'none';
  });

  const miningForm = $('#mining-form')[0];
  miningForm.addEventListener('submit', e => {
    if (!miningForm.classList.contains('running')) {
      fetch(baseUrl + '/api/startmine', {
        method: 'POST',
        credentials: 'include',
      })
        .then(_resBlob)
        .then(() => {
          miningForm.classList.add('running');
          $('#mining-status')[0].innerText = 'Running...';
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Failed to start mining');
        });
    } else {
      fetch(baseUrl + '/api/stopmine', {
        method: 'POST',
        credentials: 'include',
      })
        .then(_resBlob)
        .then(() => {
          miningForm.classList.remove('running');
          $('#mining-status')[0].innerText = 'NOT running!';
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Failed to stop mining');
        });
    }

    e.preventDefault();
  });

  $('#asset-readme-edit-button')[0].addEventListener('click', e => {
    $('#asset-readme-form')[0].classList.add('editing');

    $('#asset-readme-input')[0].value = $('#asset-readme')[0].text;
  });
  $('#asset-readme-form')[0].addEventListener('submit', e => {
    $('#asset-readme-form')[0].classList.remove('editing');

    const assetReadmeInput = $('#asset-readme-input')[0];
    const readme = assetReadmeInput.value;
    assetReadmeInput.value = '';

    _setReadmeText(readme);

    fetch(baseUrl + '/api/data/' + _getBaseAsset($('#asset-readme')[0].asset), {
      method: 'PUT',
      headers: (() => {
        const headers = new Headers();
        headers.append('Content-Type', 'text/plain');
        return headers;
      })(),
      body: readme,
      credentials: 'include',
    })
      .then(_resBlob)
      .then(() => {
        header.setNotification(true, 'Updated asset readme');
      })
      .catch(err => {
        console.warn(err);

        header.setNotification(false, 'Failed to update asset readme');
      });

    e.preventDefault();
  });
  $('#asset-readme-cancel-button')[0].addEventListener('click', e => {
    $('#asset-readme-form')[0].classList.remove('editing');

    _setReadmeText($('#asset-readme')[0].text);
  });
  $('#send-asset-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const dstAddress = $('#send-asset-address-input')[0].value;
    const quantity = parseInt($('#send-asset-quantity-input')[0].value, 10);

    if (dstAddress && !isNaN(quantity)) {
      const {privateKey} = JSON.parse(secretValue.innerText);
      const srcAddress = frontendApi.getAddress(base64.decode(privateKey));
      const {asset} = $('#asset-readme')[0];

      fetch(baseUrl + '/api/send', {
        method: 'POST',
        headers: (() => {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return headers;
        })(),
        body: JSON.stringify({
          asset,
          quantity,
          srcAddress,
          dstAddress,
          privateKey,
        }),
      })
        .then(_resJson)
        .then(result => {
          header.setNotification(true, 'Send asset message submitted to network');
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Failed to submit asset message to network');
        });
    } else {
      header.setNotification(false, 'Form is incomplete');
    }
  });
  $('#mint-asset-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const quantity = parseInt($('#mint-quantity-input')[0].value, 10);

    if (!isNaN(quantity)) {
      const baseAsset = $('#asset-readme')[0].asset.replace(/:.*$/, '');
      const subasset = $('#mint-subasset-name-input')[0].value;
      const asset = baseAsset + (subasset ? ('.' + subasset) : '');
      const {privateKey} = JSON.parse(secretValue.innerText);

      fetch(baseUrl + '/api/mint', {
        method: 'POST',
        headers: (() => {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return headers;
        })(),
        body: JSON.stringify({
          asset,
          quantity,
          privateKey,
        }),
      })
        .then(_resJson)
        .then(result => {
          header.setNotification(true, 'Mint asset message submitted to network');
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Failed to submit mint asset message to network');
        });
    } else {
      header.setNotification(false, 'Form is incomplete');
    }
  });
  const mintSubassetNameInput = $('#mint-subasset-name-input')[0];
  mintSubassetNameInput.addEventListener('blur', e => {
     mintSubassetNameInput.value = mintSubassetNameInput.value.toUpperCase().replace(/[^a-z0-9]/ig, '');
  });

  $('#price-asset-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const price = parseInt($('#price-asset-input')[0].value, 10);

    if (!isNaN(price)) {
      const asset = $('#asset-readme')[0].asset.replace(/:.*$/, '');
      const {privateKey} = JSON.parse(secretValue.innerText);

      fetch(baseUrl + '/api/price', {
        method: 'POST',
        headers: (() => {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return headers;
        })(),
        body: JSON.stringify({
          asset,
          price,
          privateKey,
        }),
      })
        .then(_resJson)
        .then(result => {
          header.setNotification(true, 'Price asset message submitted to network');
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Error submitting price asset message to network');
        });
    }
  });

  $('#create-asset-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const asset = $('#create-asset-name-input')[0].value;

    if (asset) {
      const {privateKey} = JSON.parse(secretValue.innerText);

      fetch(baseUrl + '/api/minter', {
        method: 'POST',
        headers: (() => {
          const headers = new Headers();
          headers.append('Content-Type', 'application/json');
          return headers;
        })(),
        body: JSON.stringify({
          asset,
          privateKey,
        }),
      })
        .then(_resJson)
        .then(result => {
          header.setNotification(true, 'Create asset message submitted to network');
        })
        .catch(err => {
          console.warn(err);

          header.setNotification(false, 'Error submitting create asset message to network');
        });
    }
  });
  const createAssetNameInput = $('#create-asset-name-input')[0];
  createAssetNameInput.addEventListener('blur', e => {
     createAssetNameInput.value = createAssetNameInput.value.toUpperCase().replace(/[^a-z0-9]/ig, '');
  });

  $('#buy-asset-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const asset = $('#buy-asset-name-input')[0].value;
    const quantity = parseInt($('#buy-asset-quantity-input')[0].value, 10);

    if (asset && !isNaN(quantity)) {
      fetch(`${baseUrl}/api/unconfirmedPrice/${asset}`)
        .then(_resJson)
        .then(price => {
          if (isFinite(price) && price > 0) {
            const {privateKey} = JSON.parse(secretValue.innerText);
            return fetch(baseUrl + '/api/buy', {
              method: 'POST',
              headers: (() => {
                const headers = new Headers();
                headers.append('Content-Type', 'application/json');
                return headers;
              })(),
              body: JSON.stringify({
                asset,
                quantity,
                price,
                privateKey,
              }),
            })
              .then(_resJson);
          } else {
            const err = new Error('asset is not for sale');
            err.code = 'ENOSALE';
            return Promise.reject(err);
          }
        })
        .then(result => {
          header.setNotification(true, 'Buy asset message submitted to network');
        })
        .catch(err => {
          console.warn(err);

          if (err.code === 'ENOSALE') {
            header.setNotification(false, 'Asset is not for sale');
          } else {
            header.setNotification(false, 'Failed to submit buy asset message to network');
          }
        });
    } else {
      header.setNotification(false, 'Form is incomplete');
    }
  });
  const buyAssetNameInput = $('#buy-asset-name-input')[0];
  buyAssetNameInput.addEventListener('blur', e => {
     buyAssetNameInput.value = buyAssetNameInput.value.toUpperCase().replace(/[^a-z0-9]/ig, '');
  });

  $('#confirm-purchase-form')[0].addEventListener('submit', e => {
    e.preventDefault();

    const asset = $('#confirm-purchase-asset')[0].value;
    const quantity = 1;
    const price = parseInt($('#confirm-purchase-price')[0].value, 10);

    fetch(baseUrl + '/api/buy', {
      method: 'POST',
      headers: (() => {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return headers;
      })(),
      body: JSON.stringify({
        asset,
        quantity,
        price,
        privateKey,
      }),
    })
      .then(_resJson)
      .then(result => {
        header.setNotification(true, 'Buy asset message submitted to network');
      })
      .catch(err => {
        console.warn(err);

        header.setNotification(false, 'Failed to submit buy asset message to network');
      });
  });

  const _jsonParse = s => {
    try {
      return JSON.parse(s);
    } catch(err) {
      return undefined;
    }
  };
  const _parseQueryString = s => {
    const result = {};
    const vars = s.split('&');

    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split('=');

      result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }

    return result;
  };

  window.addEventListener('popstate', () => {
    _load(document.location.href.replace(/^[a-z]+:\/\/[^\/]+/, ''));
  });

  _init()
    .then(() => _load(document.location.href.replace(/^[a-z]+:\/\/[^\/]+/, '')));
};
_boot();