2016-12-11 19:30:54 +01:00
|
|
|
// Copyright 2015, 2016 Parity Technologies (UK) Ltd.
|
2016-11-07 15:22:46 +01:00
|
|
|
// This file is part of Parity.
|
|
|
|
|
|
|
|
// Parity is free software: you can redistribute it and/or modify
|
|
|
|
// it under the terms of the GNU General Public License as published by
|
|
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
|
|
// (at your option) any later version.
|
|
|
|
|
|
|
|
// Parity is distributed in the hope that it will be useful,
|
|
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
|
|
// GNU General Public License for more details.
|
|
|
|
|
|
|
|
// You should have received a copy of the GNU General Public License
|
|
|
|
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
|
2016-11-14 17:02:45 +01:00
|
|
|
import BigNumber from 'bignumber.js';
|
2016-11-11 16:53:10 +01:00
|
|
|
import { action, computed, observable, transaction } from 'mobx';
|
2016-11-14 17:02:45 +01:00
|
|
|
import store from 'store';
|
2016-11-07 15:22:46 +01:00
|
|
|
|
2016-12-05 11:47:13 +01:00
|
|
|
import Contracts from '~/contracts';
|
2016-12-07 12:47:44 +01:00
|
|
|
import { hashToImageUrl } from '~/redux/util';
|
2016-11-07 15:22:46 +01:00
|
|
|
|
2016-11-11 16:53:10 +01:00
|
|
|
import builtinApps from './builtin.json';
|
|
|
|
|
2016-11-14 17:02:45 +01:00
|
|
|
const LS_KEY_DISPLAY = 'displayApps';
|
2016-11-16 13:08:08 +01:00
|
|
|
const LS_KEY_EXTERNAL_ACCEPT = 'acceptExternal';
|
2016-11-07 15:22:46 +01:00
|
|
|
|
|
|
|
export default class DappsStore {
|
|
|
|
@observable apps = [];
|
2016-11-14 17:02:45 +01:00
|
|
|
@observable displayApps = {};
|
2016-11-07 15:22:46 +01:00
|
|
|
@observable modalOpen = false;
|
2016-11-16 13:08:08 +01:00
|
|
|
@observable externalOverlayVisible = true;
|
2016-11-07 15:22:46 +01:00
|
|
|
|
2016-11-25 16:46:35 +01:00
|
|
|
_manifests = {};
|
|
|
|
|
2016-11-07 15:22:46 +01:00
|
|
|
constructor (api) {
|
|
|
|
this._api = api;
|
|
|
|
|
2016-11-16 13:08:08 +01:00
|
|
|
this.loadExternalOverlay();
|
2016-11-14 21:57:28 +01:00
|
|
|
this.readDisplayApps();
|
2016-11-11 16:53:10 +01:00
|
|
|
|
2016-11-14 17:02:45 +01:00
|
|
|
Promise
|
|
|
|
.all([
|
|
|
|
this._fetchBuiltinApps(),
|
|
|
|
this._fetchLocalApps(),
|
|
|
|
this._fetchRegistryApps()
|
|
|
|
])
|
2016-11-14 21:57:28 +01:00
|
|
|
.then(this.writeDisplayApps);
|
2016-11-07 15:22:46 +01:00
|
|
|
}
|
|
|
|
|
2016-11-14 21:57:28 +01:00
|
|
|
@computed get sortedBuiltin () {
|
|
|
|
return this.apps.filter((app) => app.type === 'builtin');
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed get sortedLocal () {
|
|
|
|
return this.apps.filter((app) => app.type === 'local');
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed get sortedNetwork () {
|
|
|
|
return this.apps.filter((app) => app.type === 'network');
|
2016-11-14 17:02:45 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@computed get visibleApps () {
|
2016-11-14 21:57:28 +01:00
|
|
|
return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
|
2016-11-07 15:22:46 +01:00
|
|
|
}
|
|
|
|
|
2016-11-16 12:36:15 +01:00
|
|
|
@computed get visibleBuiltin () {
|
|
|
|
return this.visibleApps.filter((app) => app.type === 'builtin');
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed get visibleLocal () {
|
|
|
|
return this.visibleApps.filter((app) => app.type === 'local');
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed get visibleNetwork () {
|
|
|
|
return this.visibleApps.filter((app) => app.type === 'network');
|
|
|
|
}
|
|
|
|
|
2016-11-07 15:22:46 +01:00
|
|
|
@action openModal = () => {
|
|
|
|
this.modalOpen = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
@action closeModal = () => {
|
|
|
|
this.modalOpen = false;
|
|
|
|
}
|
|
|
|
|
2016-11-16 13:08:08 +01:00
|
|
|
@action closeExternalOverlay = () => {
|
|
|
|
this.externalOverlayVisible = false;
|
|
|
|
store.set(LS_KEY_EXTERNAL_ACCEPT, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
@action loadExternalOverlay () {
|
|
|
|
this.externalOverlayVisible = !(store.get(LS_KEY_EXTERNAL_ACCEPT) || false);
|
|
|
|
}
|
|
|
|
|
2016-11-07 15:22:46 +01:00
|
|
|
@action hideApp = (id) => {
|
2016-11-14 21:57:28 +01:00
|
|
|
this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } });
|
|
|
|
this.writeDisplayApps();
|
2016-11-07 15:22:46 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@action showApp = (id) => {
|
2016-11-14 21:57:28 +01:00
|
|
|
this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: true } });
|
|
|
|
this.writeDisplayApps();
|
|
|
|
}
|
2016-11-14 17:02:45 +01:00
|
|
|
|
2016-11-14 21:57:28 +01:00
|
|
|
@action readDisplayApps = () => {
|
|
|
|
this.displayApps = store.get(LS_KEY_DISPLAY) || {};
|
2016-11-14 17:02:45 +01:00
|
|
|
}
|
|
|
|
|
2016-11-14 21:57:28 +01:00
|
|
|
@action writeDisplayApps = () => {
|
|
|
|
store.set(LS_KEY_DISPLAY, this.displayApps);
|
2016-11-14 17:02:45 +01:00
|
|
|
}
|
|
|
|
|
2016-11-14 21:57:28 +01:00
|
|
|
@action addApps = (apps) => {
|
2016-11-14 17:02:45 +01:00
|
|
|
transaction(() => {
|
2016-11-14 21:57:28 +01:00
|
|
|
this.apps = this.apps
|
|
|
|
.concat(apps || [])
|
|
|
|
.sort((a, b) => a.name.localeCompare(b.name));
|
|
|
|
|
|
|
|
const visibility = {};
|
|
|
|
apps.forEach((app) => {
|
|
|
|
if (!this.displayApps[app.id]) {
|
|
|
|
visibility[app.id] = { visible: app.visible };
|
|
|
|
}
|
|
|
|
});
|
2016-11-14 17:02:45 +01:00
|
|
|
|
2016-11-14 21:57:28 +01:00
|
|
|
this.displayApps = Object.assign({}, this.displayApps, visibility);
|
2016-11-14 17:02:45 +01:00
|
|
|
});
|
2016-11-07 15:22:46 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
_getHost (api) {
|
2016-11-25 13:14:30 +01:00
|
|
|
const host = process.env.DAPPS_URL || (process.env.NODE_ENV === 'production'
|
2016-11-07 15:22:46 +01:00
|
|
|
? this._api.dappsUrl
|
2016-11-25 13:14:30 +01:00
|
|
|
: '');
|
|
|
|
|
|
|
|
if (host === '/') {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
|
|
|
return host;
|
2016-11-07 15:22:46 +01:00
|
|
|
}
|
|
|
|
|
2016-11-11 16:53:10 +01:00
|
|
|
_fetchBuiltinApps () {
|
|
|
|
const { dappReg } = Contracts.get();
|
|
|
|
|
|
|
|
return Promise
|
|
|
|
.all(builtinApps.map((app) => dappReg.getImage(app.id)))
|
|
|
|
.then((imageIds) => {
|
2016-11-14 21:57:28 +01:00
|
|
|
this.addApps(
|
|
|
|
builtinApps.map((app, index) => {
|
2016-11-11 16:53:10 +01:00
|
|
|
app.type = 'builtin';
|
|
|
|
app.image = hashToImageUrl(imageIds[index]);
|
2016-11-14 21:57:28 +01:00
|
|
|
return app;
|
|
|
|
})
|
|
|
|
);
|
2016-11-14 17:02:45 +01:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.warn('DappsStore:fetchBuiltinApps', error);
|
2016-11-11 16:53:10 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_fetchLocalApps () {
|
|
|
|
return fetch(`${this._getHost()}/api/apps`)
|
|
|
|
.then((response) => {
|
|
|
|
return response.ok
|
|
|
|
? response.json()
|
|
|
|
: [];
|
|
|
|
})
|
|
|
|
.then((apps) => {
|
|
|
|
return apps
|
|
|
|
.map((app) => {
|
|
|
|
app.type = 'local';
|
2016-11-14 21:57:28 +01:00
|
|
|
app.visible = true;
|
2016-11-11 16:53:10 +01:00
|
|
|
return app;
|
|
|
|
})
|
|
|
|
.filter((app) => app.id && !['ui'].includes(app.id));
|
|
|
|
})
|
2016-11-14 21:57:28 +01:00
|
|
|
.then(this.addApps)
|
2016-11-07 15:22:46 +01:00
|
|
|
.catch((error) => {
|
2016-11-11 16:53:10 +01:00
|
|
|
console.warn('DappsStore:fetchLocal', error);
|
2016-11-07 18:08:16 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-11-11 16:53:10 +01:00
|
|
|
_fetchRegistryApps () {
|
2016-11-07 18:08:16 +01:00
|
|
|
const { dappReg } = Contracts.get();
|
|
|
|
|
|
|
|
return dappReg
|
|
|
|
.count()
|
|
|
|
.then((_count) => {
|
|
|
|
const count = _count.toNumber();
|
|
|
|
const promises = [];
|
|
|
|
|
|
|
|
for (let index = 0; index < count; index++) {
|
|
|
|
promises.push(dappReg.at(index));
|
|
|
|
}
|
|
|
|
|
|
|
|
return Promise.all(promises);
|
2016-11-07 15:22:46 +01:00
|
|
|
})
|
2016-11-07 18:08:16 +01:00
|
|
|
.then((appsInfo) => {
|
2016-11-11 16:53:10 +01:00
|
|
|
const appIds = appsInfo
|
|
|
|
.map(([appId, owner]) => this._api.util.bytesToHex(appId))
|
2016-11-14 17:02:45 +01:00
|
|
|
.filter((appId) => {
|
|
|
|
return (new BigNumber(appId)).gt(0) && !builtinApps.find((app) => app.id === appId);
|
|
|
|
});
|
2016-11-07 15:22:46 +01:00
|
|
|
|
2016-11-07 18:08:16 +01:00
|
|
|
return Promise
|
|
|
|
.all([
|
|
|
|
Promise.all(appIds.map((appId) => dappReg.getImage(appId))),
|
|
|
|
Promise.all(appIds.map((appId) => dappReg.getContent(appId))),
|
|
|
|
Promise.all(appIds.map((appId) => dappReg.getManifest(appId)))
|
|
|
|
])
|
|
|
|
.then(([imageIds, contentIds, manifestIds]) => {
|
|
|
|
return appIds.map((appId, index) => {
|
2016-11-11 16:53:10 +01:00
|
|
|
const app = {
|
2016-11-07 18:08:16 +01:00
|
|
|
id: appId,
|
2016-11-11 16:53:10 +01:00
|
|
|
image: hashToImageUrl(imageIds[index]),
|
2016-11-07 18:08:16 +01:00
|
|
|
contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2),
|
|
|
|
manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2),
|
2016-11-14 21:57:28 +01:00
|
|
|
type: 'network',
|
2016-11-16 12:27:16 +01:00
|
|
|
visible: true
|
2016-11-07 18:08:16 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
return app;
|
|
|
|
});
|
2016-11-07 15:22:46 +01:00
|
|
|
});
|
|
|
|
})
|
|
|
|
.then((apps) => {
|
|
|
|
return Promise
|
2016-11-11 16:53:10 +01:00
|
|
|
.all(apps.map((app) => this._fetchManifest(app.manifestHash)))
|
2016-11-07 18:08:16 +01:00
|
|
|
.then((manifests) => {
|
|
|
|
return apps.map((app, index) => {
|
|
|
|
const manifest = manifests[index];
|
|
|
|
|
|
|
|
if (manifest) {
|
|
|
|
app.manifestHash = null;
|
|
|
|
Object.keys(manifest)
|
2016-11-11 16:53:10 +01:00
|
|
|
.filter((key) => ['author', 'description', 'name', 'version'].includes(key))
|
2016-11-07 18:08:16 +01:00
|
|
|
.forEach((key) => {
|
|
|
|
app[key] = manifest[key];
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
return app;
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.then((apps) => {
|
|
|
|
return apps.filter((app) => {
|
|
|
|
return !app.manifestHash && app.id;
|
2016-11-07 15:22:46 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
})
|
2016-11-14 21:57:28 +01:00
|
|
|
.then(this.addApps)
|
2016-11-07 15:22:46 +01:00
|
|
|
.catch((error) => {
|
2016-11-07 18:08:16 +01:00
|
|
|
console.warn('DappsStore:fetchRegistry', error);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-11-09 20:05:08 +01:00
|
|
|
_fetchManifest (manifestHash) {
|
2016-11-25 16:46:35 +01:00
|
|
|
if (/^(0x)?0+/.test(manifestHash)) {
|
|
|
|
return Promise.resolve(null);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this._manifests[manifestHash]) {
|
|
|
|
return Promise.resolve(this._manifests[manifestHash]);
|
|
|
|
}
|
|
|
|
|
2016-11-09 20:05:08 +01:00
|
|
|
return fetch(`${this._getHost()}/api/content/${manifestHash}/`, { redirect: 'follow', mode: 'cors' })
|
2016-11-07 18:08:16 +01:00
|
|
|
.then((response) => {
|
2016-11-09 20:05:08 +01:00
|
|
|
return response.ok
|
|
|
|
? response.json()
|
|
|
|
: null;
|
2016-11-07 18:08:16 +01:00
|
|
|
})
|
2016-11-25 16:46:35 +01:00
|
|
|
.then((manifest) => {
|
|
|
|
if (manifest) {
|
|
|
|
this._manifests[manifestHash] = manifest;
|
|
|
|
}
|
|
|
|
|
|
|
|
return manifest;
|
|
|
|
})
|
2016-11-09 20:05:08 +01:00
|
|
|
.catch((error) => {
|
|
|
|
console.warn('DappsStore:fetchManifest', error);
|
2016-11-07 18:08:16 +01:00
|
|
|
return null;
|
2016-11-07 15:22:46 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|