-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Extension installation overlay #4423
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
/* Copyright 2015-2017 Parity Technologies (UK) Ltd. | ||
/* 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/>. | ||
*/ | ||
|
||
.body { | ||
background: #f80; | ||
color: white; | ||
opacity: 1; | ||
max-width: 500px; | ||
padding: 1em 4em 1em 2em; | ||
position: fixed; | ||
right: 1.5em; | ||
top: 1.5em; | ||
z-index: 1000; | ||
|
||
.button { | ||
background: rgba(0, 0, 0, 0.5); | ||
color: white !important; | ||
|
||
svg { | ||
fill: white !important; | ||
} | ||
} | ||
|
||
.buttonrow { | ||
text-align: right; | ||
} | ||
|
||
p { | ||
color: white; | ||
} | ||
|
||
.close { | ||
cursor: pointer; | ||
position: absolute; | ||
right: 1em; | ||
top: 1em; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
// Copyright 2015-2017 Parity Technologies (UK) Ltd. | ||
// 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/>. | ||
|
||
import { observer } from 'mobx-react'; | ||
import React, { Component } from 'react'; | ||
import { FormattedMessage } from 'react-intl'; | ||
|
||
import { Button } from '~/ui'; | ||
import { CloseIcon, CheckIcon } from '~/ui/Icons'; | ||
|
||
import Store from './store'; | ||
import styles from './extension.css'; | ||
|
||
@observer | ||
export default class Extension extends Component { | ||
store = new Store(); | ||
|
||
render () { | ||
const { shouldShowWarning } = this.store; | ||
|
||
if (!shouldShowWarning) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<div className={ styles.body }> | ||
<CloseIcon | ||
className={ styles.close } | ||
onClick={ this.onClose } | ||
/> | ||
<p> | ||
<FormattedMessage | ||
id='extension.intro' | ||
defaultMessage='Parity now has an extension available for Chrome that allows the viewing of Ethereum identities and the safe browsing of Ethereum-enabled distributed applications. It is hightly recommended that you install this extension to further enhance your Parity experience.' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For now, the published extension won't have the augmentation part. Thus we can get rid of |
||
/> | ||
</p> | ||
<p className={ styles.buttonrow }> | ||
<Button | ||
className={ styles.button } | ||
icon={ <CheckIcon /> } | ||
label={ | ||
<FormattedMessage | ||
id='extension.install' | ||
defaultMessage='Install the extension now' | ||
/> | ||
} | ||
onClick={ this.onInstallClick } | ||
/> | ||
</p> | ||
</div> | ||
); | ||
} | ||
|
||
onClose = () => { | ||
this.store.hideWarning(); | ||
} | ||
|
||
onInstallClick = () => { | ||
this.store.installExtension(); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
// Copyright 2015-2017 Parity Technologies (UK) Ltd. | ||
// 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/>. | ||
|
||
export default from './extension'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
// Copyright 2015-2017 Parity Technologies (UK) Ltd. | ||
// 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/>. | ||
|
||
/* global chrome */ | ||
|
||
import { action, computed, observable } from 'mobx'; | ||
|
||
import store from 'store'; | ||
import browser from 'useragent.js/lib/browser'; | ||
|
||
const A_MINUTE = 60 * 1000; | ||
const A_DAY = 24 * 60 * A_MINUTE; | ||
const TEN_MINUTES = 10 * A_MINUTE; | ||
const NEXT_DISPLAY = '_parity::extensionWarning::nextDisplay'; | ||
|
||
// 'https://chrome.google.com/webstore/detail/fgodinogimdopkigkcoelpfkbnpngalc'; | ||
const EXTENSION_PAGE = 'https://chrome.google.com/webstore/detail/parity-ethereum-integrati/fgodinogimdopkigkcoelpfkbnpngalc'; | ||
|
||
export default class Store { | ||
@observable shouldInstall = false; | ||
@observable nextDisplay = 0; | ||
|
||
constructor () { | ||
this.nextDisplay = store.get(NEXT_DISPLAY) || 0; | ||
this.testInstall(); | ||
} | ||
|
||
@computed get shouldShowWarning () { | ||
return this.shouldInstall && (Date.now() > this.nextDisplay); | ||
} | ||
|
||
@action hideWarning = (sleep = A_DAY) => { | ||
this.nextDisplay = Date.now() + sleep; | ||
store.set(NEXT_DISPLAY, this.nextDisplay); | ||
} | ||
|
||
@action testInstall = () => { | ||
this.shouldInstall = this.readStatus(); | ||
console.log('testInstall', this.shouldInstall); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if logging is needed here. We already have too many logs by default. If needed, could use the new There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You are right, that one is a misplaced debugging comment. Thanks. |
||
} | ||
|
||
readStatus = () => { | ||
const hasExtension = Symbol.for('parity.extension') in window; | ||
const ua = browser.analyze(navigator.userAgent || ''); | ||
|
||
console.log('readStatus', hasExtension, ua); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as above There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as above as well. Sorry. |
||
|
||
if (hasExtension) { | ||
return false; | ||
} | ||
|
||
return (ua || {}).name.toLowerCase() === 'chrome'; | ||
} | ||
|
||
installExtension = () => { | ||
return new Promise((resolve, reject) => { | ||
const link = document.createElement('link'); | ||
|
||
link.setAttribute('rel', 'chrome-webstore-item'); | ||
link.setAttribute('href', EXTENSION_PAGE); | ||
document.querySelector('head').appendChild(link); | ||
|
||
if (chrome && chrome.webstore && chrome.webstore.install) { | ||
chrome.webstore.install(EXTENSION_PAGE, resolve, reject); | ||
} else { | ||
reject(new Error('Direct installation failed.')); | ||
} | ||
}) | ||
.catch((error) => { | ||
console.warn('Unable to perform direct install', error); | ||
window.open(EXTENSION_PAGE, '_blank'); | ||
|
||
this.hideWarning(TEN_MINUTES + A_MINUTE); | ||
setTimeout(() => { | ||
this.testInstall(); | ||
}, TEN_MINUTES); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't we have a way of closing the Warning only when the extension gets installed ? It seems bizarre to close it even if the installation failed (if the user clicked on Also, I'm not sure that the extension would actually be detected without a page refresh by just looking at the window object... To be verified There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes, 100% - would need to test this, updating the URL now to run through. |
||
}); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not
showWarning
? Being polite is good though