Commit 3798b892 authored by Thibaut Sardan's avatar Thibaut Sardan
Browse files

Merge branch 'tbaut-fix-window-size' of github.com:paritytech/fether into tbaut-fix-window-size

parents aacf06a8 c6b93abb
......@@ -68,7 +68,8 @@
"react-router-dom": "^4.2.2",
"react-scripts": "^2.1.3",
"recompose": "^0.27.1",
"rxjs": "^6.2.0"
"rxjs": "^6.2.0",
"semver": "^5.6.0"
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.2.0",
......
......@@ -12,6 +12,9 @@ import {
Switch
} from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { Modal } from 'fether-ui';
import semver from 'semver';
import { version } from '../../package.json';
import Accounts from '../Accounts';
import BackupAccount from '../BackupAccount';
......@@ -21,6 +24,8 @@ import Send from '../Send';
import Tokens from '../Tokens';
import Whitelist from '../Whitelist';
const currentVersion = version;
// Use MemoryRouter for production viewing in file:// protocol
// https://github.com/facebook/create-react-app/issues/3591
const Router =
......@@ -29,6 +34,56 @@ const Router =
@inject('onboardingStore', 'parityStore')
@observer
class App extends Component {
state = {
newRelease: false // false | {name, url, ignore}
};
componentDidMount () {
window
.fetch('https://api.github.com/repos/paritytech/fether/releases/latest')
.then(j => j.json())
.then(({ name, html_url: url, tag_name: tag }) => {
const latestVersion = tag.match(/v(\d+\.\d+(\.\d+)?)/)[1];
if (semver.gt(latestVersion, currentVersion)) {
this.setState({
newRelease: {
name,
url,
ignore: false
}
});
}
})
.catch(e => {
console.error('Error while checking for a new version of Fether:', e);
});
}
renderModalLinks = () => {
return (
<nav className='form-nav -binary'>
<button className='button -back' onClick={this.hideNewReleaseModal}>
Remind me later
</button>
<button className='button' onClick={this.openNewReleaseUrl}>
Download
</button>
</nav>
);
};
hideNewReleaseModal = () => {
this.setState({
newRelease: { ...this.state.newRelease, ignore: true }
});
};
openNewReleaseUrl = () => {
window.open(this.state.newRelease.url, '_blank', 'noopener noreferrer');
};
/**
* Decide which screen to render.
*/
......@@ -38,6 +93,8 @@ class App extends Component {
parityStore: { api }
} = this.props;
const { newRelease } = this.state;
if (isFirstRun) {
return (
<div className='window'>
......@@ -63,24 +120,38 @@ class App extends Component {
}
return (
<div className='content'>
<div className='window'>
<Router>
<Switch>
{/* The next line is the homepage */}
<Redirect exact from='/' to='/accounts' />
<Route path='/accounts' component={Accounts} />
<Route path='/onboarding' component={Onboarding} />
<Route path='/tokens/:accountAddress' component={Tokens} />
<Route path='/whitelist/:accountAddress' component={Whitelist} />
<Route path='/backup/:accountAddress' component={BackupAccount} />
<Route
path='/send/:tokenAddress/from/:accountAddress'
component={Send}
/>
<Redirect from='*' to='/' />
</Switch>
</Router>
<div className='content'>
<div className='window'>
<Modal
title='New version available'
description={newRelease ? `${newRelease.name} was released!` : ''}
visible={newRelease && !newRelease.ignore}
buttons={this.renderModalLinks()}
>
<Router>
<Switch>
{/* The next line is the homepage */}
<Redirect exact from='/' to='/accounts' />
<Route path='/accounts' component={Accounts} />
<Route path='/onboarding' component={Onboarding} />
<Route path='/tokens/:accountAddress' component={Tokens} />
<Route
path='/whitelist/:accountAddress'
component={Whitelist}
/>
<Route
path='/backup/:accountAddress'
component={BackupAccount}
/>
<Route
path='/send/:tokenAddress/from/:accountAddress'
component={Send}
/>
<Redirect from='*' to='/' />
</Switch>
</Router>
</Modal>
</div>
</div>
</div>
);
......
......@@ -41,7 +41,7 @@ class HealthModal extends Component {
<Modal
description={this.renderDescription()}
fullscreen={fullscreen}
loading={loading}
icon={loading}
title={this.renderTitle()}
visible={visible}
>
......
......@@ -57,8 +57,8 @@ class Sent extends Component {
description={this.renderDescription()}
fullscreen
link={this.renderLink()}
loading={this.renderIcon()}
navigateTo={this.renderGoHomepage()}
icon={this.renderIcon()}
buttons={this.renderGoHomepage()}
title={this.renderTitle()}
visible
/>
......
......@@ -31,7 +31,7 @@ class TokensList extends Component {
<Modal
description='Please wait...'
fullscreen={false}
loading={loading}
icon={loading}
title='Loading account tokens...'
visible={isLoadingAccountTokens}
/>
......
......@@ -30,6 +30,7 @@
}
.alert-screen-content {
width: 75%;
.alert-screen_image {
display: flex;
......
......@@ -8,12 +8,12 @@ import PropTypes from 'prop-types';
import { Image as SUIImage, Modal as SUIModal } from 'semantic-ui-react';
export const Modal = ({
buttons,
children,
description,
fullscreen,
icon,
link,
loading,
navigateTo,
title,
visible
}) => (
......@@ -24,19 +24,21 @@ export const Modal = ({
>
<div className={`alert-screen ${fullscreen ? '-full-screen' : ''}`}>
<SUIModal.Content image className='alert-screen-content'>
<SUIImage
wrapped
alt='loading'
size='medium'
src={loading}
className='alert-screen_image'
/>
{icon && (
<SUIImage
alt='loading'
className='alert-screen_image'
size='medium'
src={icon}
wrapped
/>
)}
<SUIModal.Description className='alert-screen_text'>
<h1>{title}</h1>
<p>{description}</p>
<p>{link || null}</p>
</SUIModal.Description>
{navigateTo || null}
{buttons || null}
</SUIModal.Content>
</div>
</SUIModal>
......@@ -45,12 +47,12 @@ export const Modal = ({
);
Modal.propTypes = {
buttons: PropTypes.node,
children: PropTypes.node,
description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
fullscreen: PropTypes.bool,
icon: PropTypes.string,
link: PropTypes.node,
loading: PropTypes.any.isRequired,
navigateTo: PropTypes.node,
title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
visible: PropTypes.bool
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment