Fix iOS Safari with Polyfills (#599)
* Add polyfills, error text to error screen. * copy update to warn users about ensuring that they only send us non-sensitive info
This commit is contained in:
parent
a25ff4eeb6
commit
f6410646c0
|
@ -21,25 +21,28 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
hasError: boolean;
|
error: Error | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Root extends Component<Props, State> {
|
export default class Root extends Component<Props, State> {
|
||||||
public state = {
|
public state = {
|
||||||
hasError: false
|
error: null
|
||||||
};
|
};
|
||||||
|
|
||||||
public componentDidCatch() {
|
public componentDidCatch(error) {
|
||||||
this.setState({ hasError: true });
|
this.setState({ error });
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const { store, history } = this.props;
|
const { store, history } = this.props;
|
||||||
const { hasError } = this.state;
|
const { error } = this.state;
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <ErrorScreen error={error} />;
|
||||||
|
}
|
||||||
|
|
||||||
// key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
|
// key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
|
||||||
return hasError ? (
|
return (
|
||||||
<ErrorScreen />
|
|
||||||
) : (
|
|
||||||
<Provider store={store} key={Math.random()}>
|
<Provider store={store} key={Math.random()}>
|
||||||
<Router history={history} key={Math.random()}>
|
<Router history={history} key={Math.random()}>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -5,4 +5,16 @@
|
||||||
@include cover-message;
|
@include cover-message;
|
||||||
background: $brand-danger;
|
background: $brand-danger;
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
background: rgba(#fff, 0.25);
|
||||||
|
border: 1px solid rgba(#fff, 0.6);
|
||||||
|
color: #FFF;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
text-shadow: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,9 +3,13 @@ import './index.scss';
|
||||||
|
|
||||||
const SUBJECT = 'Error!';
|
const SUBJECT = 'Error!';
|
||||||
const DESCRIPTION =
|
const DESCRIPTION =
|
||||||
'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue: ...';
|
'I encountered an error while using MyEtherWallet. Here are the steps to re-create the issue:\n\nThe full error message:';
|
||||||
|
|
||||||
const ErrorScreen: React.SFC<{}> = () => {
|
interface Props {
|
||||||
|
error: Error;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ErrorScreen: React.SFC<Props> = ({ error }) => {
|
||||||
return (
|
return (
|
||||||
<div className="ErrorScreen">
|
<div className="ErrorScreen">
|
||||||
<div className="ErrorScreen-content">
|
<div className="ErrorScreen-content">
|
||||||
|
@ -20,8 +24,14 @@ const ErrorScreen: React.SFC<{}> = () => {
|
||||||
>
|
>
|
||||||
support@myetherwallet.com
|
support@myetherwallet.com
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
if a refresh doesn't fix it (or click it anyway to open a ticket 😊 ).
|
if a refresh doesn't fix it (or click it anyway to open a ticket 😊). If you attach the
|
||||||
|
following error, you'll make it a ton easier to fix the issue.
|
||||||
</p>
|
</p>
|
||||||
|
<h5>
|
||||||
|
Please make sure the error message does not include any sensitive information before
|
||||||
|
sending it us. We don't want your private keys!
|
||||||
|
</h5>
|
||||||
|
<code>{error.message}</code>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -97,9 +97,6 @@
|
||||||
eval('let a = 1;');
|
eval('let a = 1;');
|
||||||
eval('const b = 1');
|
eval('const b = 1');
|
||||||
|
|
||||||
// Object.assign
|
|
||||||
Object.assign({}, {});
|
|
||||||
|
|
||||||
// Local storage
|
// Local storage
|
||||||
window.localStorage.setItem('test', 'test');
|
window.localStorage.setItem('test', 'test');
|
||||||
window.localStorage.removeItem('test');
|
window.localStorage.removeItem('test');
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
import 'assets/styles/etherwallet-master.less';
|
import 'assets/styles/etherwallet-master.less';
|
||||||
import 'font-awesome/scss/font-awesome.scss';
|
import 'font-awesome/scss/font-awesome.scss';
|
||||||
import 'sass/styles.scss';
|
import 'sass/styles.scss';
|
||||||
|
import 'babel-polyfill';
|
||||||
|
import 'whatwg-fetch';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from 'react-dom';
|
import { render } from 'react-dom';
|
||||||
import Root from './Root';
|
import Root from './Root';
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
"npm": ">= 5.0.0"
|
"npm": ">= 5.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"babel-polyfill": "6.26.0",
|
||||||
"bip39": "2.4.0",
|
"bip39": "2.4.0",
|
||||||
"bn.js": "4.11.8",
|
"bn.js": "4.11.8",
|
||||||
"bootstrap-sass": "3.3.7",
|
"bootstrap-sass": "3.3.7",
|
||||||
|
@ -136,6 +137,9 @@
|
||||||
"prepush": "npm run tslint && npm run tscheck"
|
"prepush": "npm run tslint && npm run tscheck"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{ts,tsx}": ["prettier --write", "git add"]
|
"*.{ts,tsx}": [
|
||||||
|
"prettier --write",
|
||||||
|
"git add"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue