From 5a6e2f89ddc46b0f09560e2b8322207404a16f69 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 14 Nov 2016 17:02:45 +0100 Subject: [PATCH 1/7] Hide external apps by default --- js/src/views/Dapps/AddDapps/AddDapps.js | 5 +- js/src/views/Dapps/Summary/summary.js | 3 +- js/src/views/Dapps/builtin.json | 13 ++- js/src/views/Dapps/dapps.js | 2 +- js/src/views/Dapps/dappsStore.js | 114 ++++++++++++------------ 5 files changed, 70 insertions(+), 67 deletions(-) diff --git a/js/src/views/Dapps/AddDapps/AddDapps.js b/js/src/views/Dapps/AddDapps/AddDapps.js index 38bb64792..49d3c5e8d 100644 --- a/js/src/views/Dapps/AddDapps/AddDapps.js +++ b/js/src/views/Dapps/AddDapps/AddDapps.js @@ -52,7 +52,7 @@ export default class AddDapps extends Component { visible scroll> - { store.apps.map(this.renderApp) } + { store.sortedApps.map(this.renderApp) } ); @@ -60,7 +60,8 @@ export default class AddDapps extends Component { renderApp = (app) => { const { store } = this.props; - const isHidden = store.hidden.includes(app.id); + const isHidden = !store.displayApps[app.id].visible; + const onCheck = () => { if (isHidden) { store.showApp(app.id); diff --git a/js/src/views/Dapps/Summary/summary.js b/js/src/views/Dapps/Summary/summary.js index 912f1495e..b0963a560 100644 --- a/js/src/views/Dapps/Summary/summary.js +++ b/js/src/views/Dapps/Summary/summary.js @@ -17,7 +17,7 @@ import React, { Component, PropTypes } from 'react'; import { Link } from 'react-router'; -import { Container, ContainerTitle } from '../../../ui'; +import { Container, ContainerTitle, Tags } from '../../../ui'; import styles from './summary.css'; @@ -49,6 +49,7 @@ export default class Summary extends Component { return ( { image } +
", - "version": "1.0.0" + "version": "1.0.0", + "visible": true }, { "id": "0xd1adaede68d344519025e2ff574650cd99d3830fe6d274c7a7843cdc00e17938", @@ -13,7 +14,8 @@ "name": "Registry", "description": "A global registry of addresses on the network", "author": "Parity Team ", - "version": "1.0.0" + "version": "1.0.0", + "visible": true }, { "id": "0x0a8048117e51e964628d0f2d26342b3cd915248b59bcce2721e1d05f5cfa2208", @@ -21,7 +23,8 @@ "name": "Token Registry", "description": "A registry of transactable tokens on the network", "author": "Parity Team ", - "version": "1.0.0" + "version": "1.0.0", + "visible": true }, { "id": "0xf49089046f53f5d2e5f3513c1c32f5ff57d986e46309a42d2b249070e4e72c46", @@ -29,7 +32,8 @@ "name": "Method Registry", "description": "A registry of method signatures for lookups on transactions", "author": "Parity Team ", - "version": "1.0.0" + "version": "1.0.0", + "visible": true }, { "id": "0x058740ee9a5a3fb9f1cfa10752baec87e09cc45cd7027fd54708271aca300c75", @@ -38,6 +42,7 @@ "description": "A mapping of GitHub URLs to hashes for use in contracts as references", "author": "Parity Team ", "version": "1.0.0", + "visible": false, "secure": true } ] diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js index 708c52cb5..5d9877d73 100644 --- a/js/src/views/Dapps/dapps.js +++ b/js/src/views/Dapps/dapps.js @@ -54,7 +54,7 @@ export default class Dapps extends Component { />
- { this.store.visible.map(this.renderApp) } + { this.store.visibleApps.map(this.renderApp) }
diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js index 599dc18e9..78be6d9fb 100644 --- a/js/src/views/Dapps/dappsStore.js +++ b/js/src/views/Dapps/dappsStore.js @@ -14,39 +14,42 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . +import BigNumber from 'bignumber.js'; import { action, computed, observable, transaction } from 'mobx'; +import store from 'store'; import Contracts from '../../contracts'; import { hashToImageUrl } from '../../redux/util'; import builtinApps from './builtin.json'; -const LS_KEY_HIDDEN = 'hiddenApps'; -const LS_KEY_EXTERNAL = 'externalApps'; +const LS_KEY_DISPLAY = 'displayApps'; export default class DappsStore { @observable apps = []; - @observable externalApps = []; - @observable hiddenApps = []; + @observable displayApps = {}; @observable modalOpen = false; constructor (api) { this._api = api; - this._readHiddenApps(); - this._readExternalApps(); + this._readDisplayApps(); - this._fetchBuiltinApps(); - this._fetchLocalApps(); - this._fetchRegistryApps(); + Promise + .all([ + this._fetchBuiltinApps(), + this._fetchLocalApps(), + this._fetchRegistryApps() + ]) + .then(this._writeDisplayApps); } - @computed get visible () { - return this.apps - .filter((app) => { - return this.externalApps.includes(app.id) || !this.hiddenApps.includes(app.id); - }) - .sort((a, b) => a.name.localeCompare(b.name)); + @computed get sortedApps () { + return this.apps.sort((a, b) => a.name.localeCompare(b.name)); + } + + @computed get visibleApps () { + return this.sortedApps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible); } @action openModal = () => { @@ -58,13 +61,33 @@ export default class DappsStore { } @action hideApp = (id) => { - this.hiddenApps = this.hiddenApps.concat(id); - this._writeHiddenApps(); + const app = this.displayApps[id] || {}; + app.visible = false; + + this.displayApps[id] = app; + this._writeDisplayApps(); } @action showApp = (id) => { - this.hiddenApps = this.hiddenApps.filter((_id) => _id !== id); - this._writeHiddenApps(); + const app = this.displayApps[id] || {}; + app.visible = true; + + this.displayApps[id] = app; + this._writeDisplayApps(); + } + + @action setDisplayApps = (apps) => { + this.displayApps = apps; + } + + @action addApp = (app, visible) => { + transaction(() => { + this.apps.push(app); + + if (!this.displayApps[app.id]) { + this.displayApps[app.id] = { visible }; + } + }); } _getHost (api) { @@ -83,9 +106,12 @@ export default class DappsStore { builtinApps.forEach((app, index) => { app.type = 'builtin'; app.image = hashToImageUrl(imageIds[index]); - this.apps.push(app); + this.addApp(app, app.visible); }); }); + }) + .catch((error) => { + console.warn('DappsStore:fetchBuiltinApps', error); }); } @@ -106,7 +132,7 @@ export default class DappsStore { }) .then((apps) => { transaction(() => { - (apps || []).forEach((app) => this.apps.push(app)); + (apps || []).forEach((app) => this.addApp(app, true)); }); }) .catch((error) => { @@ -132,7 +158,9 @@ export default class DappsStore { .then((appsInfo) => { const appIds = appsInfo .map(([appId, owner]) => this._api.util.bytesToHex(appId)) - .filter((appId) => !builtinApps.find((app) => app.id === appId)); + .filter((appId) => { + return (new BigNumber(appId)).gt(0) && !builtinApps.find((app) => app.id === appId); + }); return Promise .all([ @@ -181,7 +209,7 @@ export default class DappsStore { }) .then((apps) => { transaction(() => { - (apps || []).forEach((app) => this.apps.push(app)); + (apps || []).forEach((app) => this.addApp(app, false)); }); }) .catch((error) => { @@ -202,43 +230,11 @@ export default class DappsStore { }); } - _readHiddenApps () { - const stored = localStorage.getItem(LS_KEY_HIDDEN); - - if (stored) { - try { - this.hiddenApps = JSON.parse(stored); - } catch (error) { - console.warn('DappsStore:readHiddenApps', error); - } - } + _readDisplayApps = () => { + this.setDisplayApps(store.get(LS_KEY_DISPLAY) || {}); } - _readExternalApps () { - const stored = localStorage.getItem(LS_KEY_EXTERNAL); - - if (stored) { - try { - this.externalApps = JSON.parse(stored); - } catch (error) { - console.warn('DappsStore:readExternalApps', error); - } - } - } - - _writeExternalApps () { - try { - localStorage.setItem(LS_KEY_EXTERNAL, JSON.stringify(this.externalApps)); - } catch (error) { - console.error('DappsStore:writeExternalApps', error); - } - } - - _writeHiddenApps () { - try { - localStorage.setItem(LS_KEY_HIDDEN, JSON.stringify(this.hiddenApps)); - } catch (error) { - console.error('DappsStore:writeHiddenApps', error); - } + _writeDisplayApps = () => { + store.set(LS_KEY_DISPLAY, this.displayApps); } } From 1e155ae5484df4a360b337bf50024712ca3c93be Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 14 Nov 2016 21:57:28 +0100 Subject: [PATCH 2/7] Render selection inside areas --- js/src/views/Dapps/AddDapps/AddDapps.css | 19 +++++ js/src/views/Dapps/AddDapps/AddDapps.js | 26 ++++++- js/src/views/Dapps/dappsStore.js | 91 ++++++++++++------------ 3 files changed, 87 insertions(+), 49 deletions(-) diff --git a/js/src/views/Dapps/AddDapps/AddDapps.css b/js/src/views/Dapps/AddDapps/AddDapps.css index bff292322..be4438196 100644 --- a/js/src/views/Dapps/AddDapps/AddDapps.css +++ b/js/src/views/Dapps/AddDapps/AddDapps.css @@ -18,3 +18,22 @@ .description { margin-top: .5em !important; } + +.list { + .background { + background: rgba(255, 255, 255, 0.2); + margin: 0 -1.5em; + padding: 0.5em 1.5em; + } + + .header { + text-transform: uppercase; + } + + .byline { + font-size: 0.75em; + padding-top: 0.5em; + line-height: 1.5em; + opacity: 0.75; + } +} diff --git a/js/src/views/Dapps/AddDapps/AddDapps.js b/js/src/views/Dapps/AddDapps/AddDapps.js index 49d3c5e8d..4ff4cf42c 100644 --- a/js/src/views/Dapps/AddDapps/AddDapps.js +++ b/js/src/views/Dapps/AddDapps/AddDapps.js @@ -51,13 +51,33 @@ export default class AddDapps extends Component { ] } visible scroll> - - { store.sortedApps.map(this.renderApp) } - +
+
+ { this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') } + { this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') } + { this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Partity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') } ); } + renderList (items, header, byline) { + if (!items || !items.length) { + return null; + } + + return ( +
+
+
{ header }
+
{ byline }
+
+ + { items.map(this.renderApp) } + +
+ ); + } + renderApp = (app) => { const { store } = this.props; const isHidden = !store.displayApps[app.id].visible; diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js index 78be6d9fb..a6f029b21 100644 --- a/js/src/views/Dapps/dappsStore.js +++ b/js/src/views/Dapps/dappsStore.js @@ -33,7 +33,7 @@ export default class DappsStore { constructor (api) { this._api = api; - this._readDisplayApps(); + this.readDisplayApps(); Promise .all([ @@ -41,15 +41,23 @@ export default class DappsStore { this._fetchLocalApps(), this._fetchRegistryApps() ]) - .then(this._writeDisplayApps); + .then(this.writeDisplayApps); } - @computed get sortedApps () { - return this.apps.sort((a, b) => a.name.localeCompare(b.name)); + @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'); } @computed get visibleApps () { - return this.sortedApps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible); + return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible); } @action openModal = () => { @@ -61,32 +69,37 @@ export default class DappsStore { } @action hideApp = (id) => { - const app = this.displayApps[id] || {}; - app.visible = false; - - this.displayApps[id] = app; - this._writeDisplayApps(); + this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } }); + this.writeDisplayApps(); } @action showApp = (id) => { - const app = this.displayApps[id] || {}; - app.visible = true; - - this.displayApps[id] = app; - this._writeDisplayApps(); + this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: true } }); + this.writeDisplayApps(); } - @action setDisplayApps = (apps) => { - this.displayApps = apps; + @action readDisplayApps = () => { + this.displayApps = store.get(LS_KEY_DISPLAY) || {}; } - @action addApp = (app, visible) => { + @action writeDisplayApps = () => { + store.set(LS_KEY_DISPLAY, this.displayApps); + } + + @action addApps = (apps) => { transaction(() => { - this.apps.push(app); + this.apps = this.apps + .concat(apps || []) + .sort((a, b) => a.name.localeCompare(b.name)); - if (!this.displayApps[app.id]) { - this.displayApps[app.id] = { visible }; - } + const visibility = {}; + apps.forEach((app) => { + if (!this.displayApps[app.id]) { + visibility[app.id] = { visible: app.visible }; + } + }); + + this.displayApps = Object.assign({}, this.displayApps, visibility); }); } @@ -102,13 +115,13 @@ export default class DappsStore { return Promise .all(builtinApps.map((app) => dappReg.getImage(app.id))) .then((imageIds) => { - transaction(() => { - builtinApps.forEach((app, index) => { + this.addApps( + builtinApps.map((app, index) => { app.type = 'builtin'; app.image = hashToImageUrl(imageIds[index]); - this.addApp(app, app.visible); - }); - }); + return app; + }) + ); }) .catch((error) => { console.warn('DappsStore:fetchBuiltinApps', error); @@ -126,15 +139,12 @@ export default class DappsStore { return apps .map((app) => { app.type = 'local'; + app.visible = true; return app; }) .filter((app) => app.id && !['ui'].includes(app.id)); }) - .then((apps) => { - transaction(() => { - (apps || []).forEach((app) => this.addApp(app, true)); - }); - }) + .then(this.addApps) .catch((error) => { console.warn('DappsStore:fetchLocal', error); }); @@ -175,7 +185,8 @@ export default class DappsStore { image: hashToImageUrl(imageIds[index]), contentHash: this._api.util.bytesToHex(contentIds[index]).substr(2), manifestHash: this._api.util.bytesToHex(manifestIds[index]).substr(2), - type: 'network' + type: 'network', + visible: false }; return app; @@ -207,11 +218,7 @@ export default class DappsStore { }); }); }) - .then((apps) => { - transaction(() => { - (apps || []).forEach((app) => this.addApp(app, false)); - }); - }) + .then(this.addApps) .catch((error) => { console.warn('DappsStore:fetchRegistry', error); }); @@ -229,12 +236,4 @@ export default class DappsStore { return null; }); } - - _readDisplayApps = () => { - this.setDisplayApps(store.get(LS_KEY_DISPLAY) || {}); - } - - _writeDisplayApps = () => { - store.set(LS_KEY_DISPLAY, this.displayApps); - } } From 9bd6378e42fc23411724ecef10d0b08d0bd8d54d Mon Sep 17 00:00:00 2001 From: Gav Wood Date: Wed, 16 Nov 2016 11:37:25 +0800 Subject: [PATCH 3/7] Typo --- js/src/views/Dapps/AddDapps/AddDapps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/views/Dapps/AddDapps/AddDapps.js b/js/src/views/Dapps/AddDapps/AddDapps.js index 4ff4cf42c..72b24bd2b 100644 --- a/js/src/views/Dapps/AddDapps/AddDapps.js +++ b/js/src/views/Dapps/AddDapps/AddDapps.js @@ -55,7 +55,7 @@ export default class AddDapps extends Component { { this.renderList(store.sortedLocal, 'Applications locally available', 'All applications installed locally on the machine by the user for access by the Parity client.') } { this.renderList(store.sortedBuiltin, 'Applications bundled with Parity', 'Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.') } - { this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Partity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') } + { this.renderList(store.sortedNetwork, 'Applications on the global network', 'These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.') } ); } From 501c7369b0d53cd979150653b323f913d424961d Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 16 Nov 2016 12:27:16 +0100 Subject: [PATCH 4/7] External app overlay --- js/src/views/Dapps/dapps.css | 12 ++++++++++++ js/src/views/Dapps/dapps.js | 25 ++++++++++++++++++++++--- js/src/views/Dapps/dappsStore.js | 2 +- 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css index 1a38af3cf..23b9d565c 100644 --- a/js/src/views/Dapps/dapps.css +++ b/js/src/views/Dapps/dapps.css @@ -18,6 +18,7 @@ display: flex; flex-wrap: wrap; margin: -0.125em; + position: relative; } .list+.list { @@ -29,3 +30,14 @@ flex: 0 1 50%; box-sizing: border-box; } + +.overlay { + background: rgba(255, 255, 255, 0.75); + bottom: 0; + left: -0.25em; + position: absolute; + right: -0.25em; + top: 0; + z-index: 100; + padding: 1em; +} diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js index 5d9877d73..b34aee7ff 100644 --- a/js/src/views/Dapps/dapps.js +++ b/js/src/views/Dapps/dapps.js @@ -37,6 +37,12 @@ export default class Dapps extends Component { store = new DappsStore(this.context.api); render () { + const externalOverlay = ( +
+ dismiss me +
+ ); + return (
@@ -53,14 +59,27 @@ export default class Dapps extends Component { ] } /> -
- { this.store.visibleApps.map(this.renderApp) } -
+ { this.renderList(this.store.sortedLocal) } + { this.renderList(this.store.sortedBuiltin) } + { this.renderList(this.store.sortedNetwork, externalOverlay) }
); } + renderList (items, overlay) { + if (!items || !items.length) { + return null; + } + + return ( +
+ { overlay } + { items.map(this.renderApp) } +
+ ); + } + renderApp = (app) => { return (
Date: Wed, 16 Nov 2016 12:36:15 +0100 Subject: [PATCH 5/7] Update styling --- js/src/ui/Page/page.css | 2 +- js/src/views/Dapps/dapps.css | 6 +++--- js/src/views/Dapps/dapps.js | 6 +++--- js/src/views/Dapps/dappsStore.js | 12 ++++++++++++ 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/js/src/ui/Page/page.css b/js/src/ui/Page/page.css index 81f4e0e68..cdb9fc868 100644 --- a/js/src/ui/Page/page.css +++ b/js/src/ui/Page/page.css @@ -19,5 +19,5 @@ } .layout>div { - padding-bottom: 0.25em; + padding-bottom: 0.75em; } diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css index 23b9d565c..64c6b2cb7 100644 --- a/js/src/views/Dapps/dapps.css +++ b/js/src/views/Dapps/dapps.css @@ -32,12 +32,12 @@ } .overlay { - background: rgba(255, 255, 255, 0.75); - bottom: 0; + background: rgba(50, 50, 50, 0.85); + bottom: 0.5em; left: -0.25em; position: absolute; right: -0.25em; - top: 0; + top: -0.25em; z-index: 100; padding: 1em; } diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js index b34aee7ff..c8d67ae9d 100644 --- a/js/src/views/Dapps/dapps.js +++ b/js/src/views/Dapps/dapps.js @@ -59,9 +59,9 @@ export default class Dapps extends Component { ] } /> - { this.renderList(this.store.sortedLocal) } - { this.renderList(this.store.sortedBuiltin) } - { this.renderList(this.store.sortedNetwork, externalOverlay) } + { this.renderList(this.store.visibleLocal) } + { this.renderList(this.store.visibleBuiltin) } + { this.renderList(this.store.visibleNetwork, externalOverlay) }
); diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js index fa76eca7c..18368fcd4 100644 --- a/js/src/views/Dapps/dappsStore.js +++ b/js/src/views/Dapps/dappsStore.js @@ -60,6 +60,18 @@ export default class DappsStore { return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible); } + @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'); + } + @action openModal = () => { this.modalOpen = true; } From bbf6d1768d3bfe3648713b7c14b9843f1726f9d3 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 16 Nov 2016 13:08:08 +0100 Subject: [PATCH 6/7] Overal + acceptance in-place --- js/src/views/Dapps/dapps.css | 13 ++++++++++++- js/src/views/Dapps/dapps.js | 27 ++++++++++++++++++++++----- js/src/views/Dapps/dappsStore.js | 12 ++++++++++++ 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css index 64c6b2cb7..ea460f0b5 100644 --- a/js/src/views/Dapps/dapps.css +++ b/js/src/views/Dapps/dapps.css @@ -32,7 +32,7 @@ } .overlay { - background: rgba(50, 50, 50, 0.85); + background: rgba(0, 0, 0, 0.85); bottom: 0.5em; left: -0.25em; position: absolute; @@ -40,4 +40,15 @@ top: -0.25em; z-index: 100; padding: 1em; + + .body { + line-height: 1.5em; + margin: 0 auto; + text-align: left; + max-width: 980px; + + &>div:first-child { + padding-bottom: 1em; + } + } } diff --git a/js/src/views/Dapps/dapps.js b/js/src/views/Dapps/dapps.js index c8d67ae9d..5d87b808d 100644 --- a/js/src/views/Dapps/dapps.js +++ b/js/src/views/Dapps/dapps.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { Checkbox } from 'material-ui'; import { observer } from 'mobx-react'; import { Actionbar, Page } from '../../ui'; @@ -37,11 +38,23 @@ export default class Dapps extends Component { store = new DappsStore(this.context.api); render () { - const externalOverlay = ( -
- dismiss me -
- ); + let externalOverlay = null; + if (this.store.externalOverlayVisible) { + externalOverlay = ( +
+
+
Applications made available on the network by 3rd-party authors are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each before interacting.
+
+ +
+
+
+ ); + } return (
@@ -89,4 +102,8 @@ export default class Dapps extends Component {
); } + + onClickAcceptExternal = () => { + this.store.closeExternalOverlay(); + } } diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js index 18368fcd4..f9fc4863c 100644 --- a/js/src/views/Dapps/dappsStore.js +++ b/js/src/views/Dapps/dappsStore.js @@ -24,15 +24,18 @@ import { hashToImageUrl } from '../../redux/util'; import builtinApps from './builtin.json'; const LS_KEY_DISPLAY = 'displayApps'; +const LS_KEY_EXTERNAL_ACCEPT = 'acceptExternal'; export default class DappsStore { @observable apps = []; @observable displayApps = {}; @observable modalOpen = false; + @observable externalOverlayVisible = true; constructor (api) { this._api = api; + this.loadExternalOverlay(); this.readDisplayApps(); Promise @@ -80,6 +83,15 @@ export default class DappsStore { this.modalOpen = false; } + @action closeExternalOverlay = () => { + this.externalOverlayVisible = false; + store.set(LS_KEY_EXTERNAL_ACCEPT, true); + } + + @action loadExternalOverlay () { + this.externalOverlayVisible = !(store.get(LS_KEY_EXTERNAL_ACCEPT) || false); + } + @action hideApp = (id) => { this.displayApps = Object.assign({}, this.displayApps, { [id]: { visible: false } }); this.writeDisplayApps(); From be1e5ae52fe616d6c6fa929905249c0820961db1 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 18 Nov 2016 18:20:14 +0100 Subject: [PATCH 7/7] Updated overlay size as per comments --- js/src/views/Dapps/dapps.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css index ea460f0b5..0fb1a07b5 100644 --- a/js/src/views/Dapps/dapps.css +++ b/js/src/views/Dapps/dapps.css @@ -34,9 +34,9 @@ .overlay { background: rgba(0, 0, 0, 0.85); bottom: 0.5em; - left: -0.25em; + left: -0.125em; position: absolute; - right: -0.25em; + right: -0.125em; top: -0.25em; z-index: 100; padding: 1em;