mirror of
https://github.com/status-im/MyCrypto.git
synced 2025-02-22 15:58:31 +00:00
Update React-Router(-DOM) to 4.x and Simplify Routing (#241)
This commit is contained in:
James Prado
Daniel Ternyak
parent
5b2f7efac5
commit
ad83b5a181
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './Promos.scss';
|
||||
|
||||
const promos = [
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import classnames from 'classnames';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import translate, { translateRaw } from 'translations';
|
||||
import './NavigationLink.scss';
|
||||
|
||||
@ -25,24 +25,25 @@ export default class NavigationLink extends React.Component<Props, {}> {
|
||||
});
|
||||
const linkLabel = `nav item: ${translateRaw(link.name)}`;
|
||||
|
||||
const linkEl = link.external ? (
|
||||
<a
|
||||
className={linkClasses}
|
||||
href={link.to}
|
||||
aria-label={linkLabel}
|
||||
target="_blank"
|
||||
>
|
||||
{translate(link.name)}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
className={linkClasses}
|
||||
to={(link as any).to}
|
||||
aria-label={linkLabel}
|
||||
>
|
||||
{translate(link.name)}
|
||||
</Link>
|
||||
);
|
||||
const linkEl =
|
||||
link.external || !link.to ? (
|
||||
<a
|
||||
className={linkClasses}
|
||||
href={link.to}
|
||||
aria-label={linkLabel}
|
||||
target="_blank"
|
||||
>
|
||||
{translate(link.name)}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
className={linkClasses}
|
||||
to={(link as any).to}
|
||||
aria-label={linkLabel}
|
||||
>
|
||||
{translate(link.name)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
return <li className="NavigationLink">{linkEl}</li>;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { TChangeGasPrice, TChangeLanguage, TChangeNode } from 'actions/config';
|
||||
import logo from 'assets/images/logo-myetherwallet.svg';
|
||||
import { Dropdown } from 'components/ui';
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
ANNOUNCEMENT_MESSAGE,
|
||||
ANNOUNCEMENT_TYPE,
|
||||
|
||||
@ -1,22 +1,35 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Router } from 'react-router';
|
||||
import { Router, Route } from 'react-router-dom';
|
||||
// Components
|
||||
import ENS from 'containers/Tabs/ENS';
|
||||
import GenerateWallet from 'containers/Tabs/GenerateWallet';
|
||||
import Help from 'containers/Tabs/Help';
|
||||
import SendTransaction from 'containers/Tabs/SendTransaction';
|
||||
import Swap from 'containers/Tabs/Swap';
|
||||
import ViewWallet from 'containers/Tabs/ViewWallet';
|
||||
|
||||
// TODO: fix this
|
||||
interface Props {
|
||||
store: any;
|
||||
history: any;
|
||||
routes(): null;
|
||||
}
|
||||
|
||||
export default class Root extends Component<Props, {}> {
|
||||
public render() {
|
||||
const { store, history, routes } = this.props;
|
||||
const { store, history } = this.props;
|
||||
// key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
|
||||
return (
|
||||
<Provider store={store} key={Math.random()}>
|
||||
<Router history={history} key={Math.random()}>
|
||||
{routes()}
|
||||
<div>
|
||||
<Route exact={true} path="/" component={GenerateWallet} />
|
||||
<Route path="/view-wallet" component={ViewWallet} />
|
||||
<Route path="/help" component={Help} />
|
||||
<Route path="/swap" component={Swap} />
|
||||
<Route path="/send-transaction" component={SendTransaction} />
|
||||
<Route path="/ens" component={ENS} />
|
||||
</div>
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
@ -56,9 +56,7 @@ class App extends Component<Props, {}> {
|
||||
<div className="page-layout">
|
||||
<main>
|
||||
<Header {...headerProps} />
|
||||
<div className="Tab container">
|
||||
{React.cloneElement(children, { languageSelection })}
|
||||
</div>
|
||||
<div className="Tab container">{children}</div>
|
||||
<Footer />
|
||||
</main>
|
||||
<Notifications />
|
||||
|
||||
@ -2,27 +2,32 @@ import React from 'react';
|
||||
import { GeneralInfoPanel } from './GeneralInfoPanel';
|
||||
import Title from './Title';
|
||||
import UnfinishedBanner from './UnfinishedBanner';
|
||||
import App from 'containers/App';
|
||||
|
||||
interface ContainerTabPaneActiveProps {
|
||||
children: React.ReactElement<any> | React.ReactElement<any>[];
|
||||
}
|
||||
|
||||
const ContainerTabPaneActive = ({ children }: ContainerTabPaneActiveProps) =>
|
||||
<section className="container">
|
||||
<div className="tab-content">
|
||||
<main className="tab-pane active">
|
||||
<section role="main" className="row">
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</section>;
|
||||
const ContainerTabPaneActive = ({ children }: ContainerTabPaneActiveProps) => (
|
||||
<App>
|
||||
<section className="container">
|
||||
<div className="tab-content">
|
||||
<main className="tab-pane active">
|
||||
<section role="main" className="row">
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</App>
|
||||
);
|
||||
|
||||
const ENS = () =>
|
||||
const ENS = () => (
|
||||
<ContainerTabPaneActive>
|
||||
<UnfinishedBanner />
|
||||
<Title />
|
||||
<GeneralInfoPanel />
|
||||
</ContainerTabPaneActive>;
|
||||
</ContainerTabPaneActive>
|
||||
);
|
||||
|
||||
export default ENS;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { GenerateNewWalletAction } from 'actions/generateWallet';
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import translate from 'translations';
|
||||
import './EnterPassword.scss';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PrintableWallet from 'components/PrintableWallet';
|
||||
import PrivKeyWallet from 'libs/wallet/privkey';
|
||||
import React, { Component } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
import translate from 'translations';
|
||||
import './PaperWallet.scss';
|
||||
import Template from './Template';
|
||||
@ -13,26 +13,22 @@ interface Props {
|
||||
export default class PaperWallet extends Component<Props, {}> {
|
||||
public render() {
|
||||
const { wallet } = this.props;
|
||||
|
||||
|
||||
const content = (
|
||||
<div className="GenPaper">
|
||||
{/* Private Key */}
|
||||
<h1 className="GenPaper-title">
|
||||
{translate('GEN_Label_5')}
|
||||
</h1>
|
||||
<h1 className="GenPaper-title">{translate('GEN_Label_5')}</h1>
|
||||
<input
|
||||
className="GenPaper-private form-control"
|
||||
value={wallet.getPrivateKey()}
|
||||
aria-label={translate('x_PrivKey')}
|
||||
aria-describedby="x_PrivKeyDesc"
|
||||
type="text"
|
||||
readOnly={true}
|
||||
readOnly={true}
|
||||
/>
|
||||
|
||||
{/* Download Paper Wallet */}
|
||||
<h1 className="GenPaper-title">
|
||||
{translate('x_Print')}
|
||||
</h1>
|
||||
<h1 className="GenPaper-title">{translate('x_Print')}</h1>
|
||||
<div className="GenPaper-paper">
|
||||
<PrintableWallet wallet={wallet} />
|
||||
</div>
|
||||
@ -62,9 +58,7 @@ export default class PaperWallet extends Component<Props, {}> {
|
||||
|
||||
const help = (
|
||||
<div>
|
||||
<h4>
|
||||
{translate('GEN_Help_4')}
|
||||
</h4>
|
||||
<h4>{translate('GEN_Help_4')}</h4>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
@ -72,9 +66,7 @@ export default class PaperWallet extends Component<Props, {}> {
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<strong>
|
||||
{translate('HELP_2a_Title')}
|
||||
</strong>
|
||||
<strong>{translate('HELP_2a_Title')}</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -83,9 +75,7 @@ export default class PaperWallet extends Component<Props, {}> {
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<strong>
|
||||
{translate('GEN_Help_15')}
|
||||
</strong>
|
||||
<strong>{translate('GEN_Help_15')}</strong>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -94,23 +84,15 @@ export default class PaperWallet extends Component<Props, {}> {
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>
|
||||
<strong>
|
||||
{translate('GEN_Help_16')}
|
||||
</strong>
|
||||
<strong>{translate('GEN_Help_16')}</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>
|
||||
{translate('GEN_Help_17')}
|
||||
</h4>
|
||||
<h4>{translate('GEN_Help_17')}</h4>
|
||||
<ul>
|
||||
<li>
|
||||
{translate('GEN_Help_18')}
|
||||
</li>
|
||||
<li>
|
||||
{translate('GEN_Help_19')}
|
||||
</li>
|
||||
<li>{translate('GEN_Help_18')}</li>
|
||||
<li>{translate('GEN_Help_19')}</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://myetherwallet.groovehq.com/knowledge_base/topics/how-do-i-safely-slash-offline-slash-cold-storage-with-myetherwallet"
|
||||
@ -122,9 +104,7 @@ export default class PaperWallet extends Component<Props, {}> {
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>
|
||||
{translate('x_PrintDesc')}
|
||||
</h4>
|
||||
<h4>{translate('x_PrintDesc')}</h4>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@ import { AppState } from 'reducers';
|
||||
import DownloadWallet from './components/DownloadWallet';
|
||||
import EnterPassword from './components/EnterPassword';
|
||||
import PaperWallet from './components/PaperWallet';
|
||||
import App from 'containers/App';
|
||||
|
||||
interface Props {
|
||||
// Redux state
|
||||
@ -71,7 +72,11 @@ class GenerateWallet extends Component<Props, {}> {
|
||||
content = <h1>Uh oh. Not sure how you got here.</h1>;
|
||||
}
|
||||
|
||||
return <section className="Tab-content">{content}</section>;
|
||||
return (
|
||||
<App>
|
||||
<section className="Tab-content">{content}</section>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,46 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
import translate from 'translations';
|
||||
import App from 'containers/App';
|
||||
|
||||
const Help = () =>
|
||||
<section className="container" style={{ minHeight: '50%' }}>
|
||||
<div className="tab-content">
|
||||
<article className="tab-pane help active">
|
||||
<h1>
|
||||
{translate('NAV_Help')}
|
||||
</h1>
|
||||
<article className="collapse-container">
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<h3>
|
||||
<a
|
||||
href="https://www.reddit.com/r/ethereum/comments/47nkoi/psa_check_your_ethaddressorg_wallets_and_any/d0eo45o"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="text-danger">
|
||||
{translate('HELP_Warning')}
|
||||
</span>
|
||||
</a>
|
||||
</h3>
|
||||
</li>
|
||||
<li>
|
||||
<h3>
|
||||
This page is deprecated. Please check out our more up-to-date
|
||||
and searchable{' '}
|
||||
<a
|
||||
href="https://myetherwallet.groovehq.com/help_center"
|
||||
target="_blank"
|
||||
>
|
||||
Knowledge Base.{' '}
|
||||
</a>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
const Help = () => (
|
||||
<App>
|
||||
<section className="container" style={{ minHeight: '50%' }}>
|
||||
<div className="tab-content">
|
||||
<article className="tab-pane help active">
|
||||
<h1>{translate('NAV_Help')}</h1>
|
||||
<article className="collapse-container">
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<h3>
|
||||
<a
|
||||
href="https://www.reddit.com/r/ethereum/comments/47nkoi/psa_check_your_ethaddressorg_wallets_and_any/d0eo45o"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="text-danger">
|
||||
{translate('HELP_Warning')}
|
||||
</span>
|
||||
</a>
|
||||
</h3>
|
||||
</li>
|
||||
<li>
|
||||
<h3>
|
||||
This page is deprecated. Please check out our more
|
||||
up-to-date and searchable{' '}
|
||||
<a
|
||||
href="https://myetherwallet.groovehq.com/help_center"
|
||||
target="_blank"
|
||||
>
|
||||
Knowledge Base.{' '}
|
||||
</a>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
</section>;
|
||||
</div>
|
||||
</section>
|
||||
</App>
|
||||
);
|
||||
|
||||
export default Help;
|
||||
|
||||
@ -5,6 +5,7 @@ import { BalanceSidebar } from 'components';
|
||||
// COMPONENTS
|
||||
import { UnlockHeader } from 'components/ui';
|
||||
import { donationAddressMap, NetworkConfig, NodeConfig } from 'config/data';
|
||||
import App from 'containers/App';
|
||||
// CONFIG
|
||||
import { TransactionWithoutGas } from 'libs/messages';
|
||||
import { RPCNode } from 'libs/nodes';
|
||||
@ -176,115 +177,117 @@ export class SendTransaction extends React.Component<Props, State> {
|
||||
const customMessage = customMessages.find(m => m.to === to);
|
||||
|
||||
return (
|
||||
<section className="Tab-content">
|
||||
<UnlockHeader title={'NAV_SendEther'} />
|
||||
<App>
|
||||
<section className="Tab-content">
|
||||
<UnlockHeader title={'NAV_SendEther'} />
|
||||
|
||||
<div className="row">
|
||||
{/* Send Form */}
|
||||
{unlocked && (
|
||||
<main className="col-sm-8">
|
||||
<div className="Tab-content-pane">
|
||||
{hasQueryString && (
|
||||
<div className="alert alert-info">
|
||||
<p>{translate('WARN_Send_Link')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AddressField
|
||||
placeholder={donationAddressMap.ETH}
|
||||
value={this.state.to}
|
||||
onChange={readOnly ? null : this.onAddressChange}
|
||||
/>
|
||||
<AmountField
|
||||
value={value}
|
||||
unit={unit}
|
||||
tokens={this.props.tokenBalances
|
||||
.filter(token => !token.balance.eq(0))
|
||||
.map(token => token.symbol)
|
||||
.sort()}
|
||||
onChange={readOnly ? void 0 : this.onAmountChange}
|
||||
/>
|
||||
<GasField
|
||||
value={gasLimit}
|
||||
onChange={readOnly ? void 0 : this.onGasChange}
|
||||
/>
|
||||
{unit === 'ether' && (
|
||||
<DataField
|
||||
value={data}
|
||||
onChange={readOnly ? void 0 : this.onDataChange}
|
||||
/>
|
||||
)}
|
||||
<CustomMessage message={customMessage} />
|
||||
|
||||
<div className="row form-group">
|
||||
<div className="col-xs-12 clearfix">
|
||||
<button
|
||||
disabled={this.state.generateDisabled}
|
||||
className="btn btn-info btn-block"
|
||||
onClick={this.generateTxFromState}
|
||||
>
|
||||
{translate('SEND_generate')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{transaction && (
|
||||
<div>
|
||||
<div className="row form-group">
|
||||
<div className="col-sm-6">
|
||||
<label>{translate('SEND_raw')}</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
value={transaction.rawTx}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<label>{translate('SEND_signed')}</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
value={transaction.signedTx}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
{/* Send Form */}
|
||||
{unlocked && (
|
||||
<main className="col-sm-8">
|
||||
<div className="Tab-content-pane">
|
||||
{hasQueryString && (
|
||||
<div className="alert alert-info">
|
||||
<p>{translate('WARN_Send_Link')}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<AddressField
|
||||
placeholder={donationAddressMap.ETH}
|
||||
value={this.state.to}
|
||||
onChange={readOnly ? null : this.onAddressChange}
|
||||
/>
|
||||
<AmountField
|
||||
value={value}
|
||||
unit={unit}
|
||||
tokens={this.props.tokenBalances
|
||||
.filter(token => !token.balance.eq(0))
|
||||
.map(token => token.symbol)
|
||||
.sort()}
|
||||
onChange={readOnly ? void 0 : this.onAmountChange}
|
||||
/>
|
||||
<GasField
|
||||
value={gasLimit}
|
||||
onChange={readOnly ? void 0 : this.onGasChange}
|
||||
/>
|
||||
{unit === 'ether' && (
|
||||
<DataField
|
||||
value={data}
|
||||
onChange={readOnly ? void 0 : this.onDataChange}
|
||||
/>
|
||||
)}
|
||||
<CustomMessage message={customMessage} />
|
||||
|
||||
<div className="row form-group">
|
||||
<div className="col-xs-12 clearfix">
|
||||
<button
|
||||
className="btn btn-primary btn-block col-sm-11"
|
||||
disabled={!this.state.transaction}
|
||||
onClick={this.openTxModal}
|
||||
disabled={this.state.generateDisabled}
|
||||
className="btn btn-info btn-block"
|
||||
onClick={this.generateTxFromState}
|
||||
>
|
||||
{translate('SEND_trans')}
|
||||
{translate('SEND_generate')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
{unlocked && (
|
||||
<section className="col-sm-4">
|
||||
<BalanceSidebar />
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
{transaction && (
|
||||
<div>
|
||||
<div className="row form-group">
|
||||
<div className="col-sm-6">
|
||||
<label>{translate('SEND_raw')}</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
value={transaction.rawTx}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<label>{translate('SEND_signed')}</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
value={transaction.signedTx}
|
||||
rows={4}
|
||||
readOnly={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{transaction &&
|
||||
showTxConfirm && (
|
||||
<ConfirmationModal
|
||||
wallet={this.props.wallet}
|
||||
node={this.props.node}
|
||||
signedTx={transaction.signedTx}
|
||||
onClose={this.hideConfirmTx}
|
||||
onConfirm={this.confirmTx}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
<div className="form-group">
|
||||
<button
|
||||
className="btn btn-primary btn-block col-sm-11"
|
||||
disabled={!this.state.transaction}
|
||||
onClick={this.openTxModal}
|
||||
>
|
||||
{translate('SEND_trans')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Sidebar */}
|
||||
{unlocked && (
|
||||
<section className="col-sm-4">
|
||||
<BalanceSidebar />
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{transaction &&
|
||||
showTxConfirm && (
|
||||
<ConfirmationModal
|
||||
wallet={this.props.wallet}
|
||||
node={this.props.node}
|
||||
signedTx={transaction.signedTx}
|
||||
onClose={this.hideConfirmTx}
|
||||
onConfirm={this.confirmTx}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@ import CurrentRates from './components/CurrentRates';
|
||||
import PartThree from './components/PartThree';
|
||||
import ReceivingAddress from './components/ReceivingAddress';
|
||||
import SwapInfoHeader from './components/SwapInfoHeader';
|
||||
import App from 'containers/App';
|
||||
|
||||
interface ReduxStateProps {
|
||||
originAmount: number | null;
|
||||
@ -187,18 +188,20 @@ class Swap extends Component<ReduxActionProps & ReduxStateProps, {}> {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="Tab-content swap-tab">
|
||||
{step === 1 && <CurrentRates {...CurrentRatesProps} />}
|
||||
{(step === 2 || step === 3) && (
|
||||
<SwapInfoHeader {...SwapInfoHeaderProps} />
|
||||
)}
|
||||
<App>
|
||||
<section className="Tab-content swap-tab">
|
||||
{step === 1 && <CurrentRates {...CurrentRatesProps} />}
|
||||
{(step === 2 || step === 3) && (
|
||||
<SwapInfoHeader {...SwapInfoHeaderProps} />
|
||||
)}
|
||||
|
||||
<main className="Tab-content-pane">
|
||||
{step === 1 && <CurrencySwap {...CurrencySwapProps} />}
|
||||
{step === 2 && <ReceivingAddress {...ReceivingAddressProps} />}
|
||||
{step === 3 && <PartThree {...PartThreeProps} />}
|
||||
</main>
|
||||
</section>
|
||||
<main className="Tab-content-pane">
|
||||
{step === 1 && <CurrencySwap {...CurrencySwapProps} />}
|
||||
{step === 2 && <ReceivingAddress {...ReceivingAddressProps} />}
|
||||
{step === 3 && <PartThree {...PartThreeProps} />}
|
||||
</main>
|
||||
</section>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +1,26 @@
|
||||
import React, { Component } from 'react';
|
||||
import translate from 'translations';
|
||||
import App from 'containers/App';
|
||||
|
||||
export default class ViewWallet extends Component {
|
||||
public render() {
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="tab-content">
|
||||
<article className="tab-pane active">
|
||||
<article className="collapse-container">
|
||||
<div>
|
||||
<h1>View Wallet Info</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
{translate('VIEWWALLET_Subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<App>
|
||||
<section className="container">
|
||||
<div className="tab-content">
|
||||
<article className="tab-pane active">
|
||||
<article className="collapse-container">
|
||||
<div>
|
||||
<h1>View Wallet Info</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>{translate('VIEWWALLET_Subtitle')}</p>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</App>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,26 +3,17 @@ import 'assets/styles/etherwallet-master.less';
|
||||
import 'font-awesome/scss/font-awesome.scss';
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { syncHistoryWithStore } from 'react-router-redux';
|
||||
import 'sass/styles.scss';
|
||||
import { Root } from './components';
|
||||
import { history, Routing } from './routing';
|
||||
import createHistory from 'history/createBrowserHistory';
|
||||
import { configuredStore } from './store';
|
||||
import 'sass/styles.scss';
|
||||
|
||||
const renderRoot = RouteToRender => {
|
||||
const syncedHistory = syncHistoryWithStore(history, configuredStore);
|
||||
render(
|
||||
<RouteToRender
|
||||
key={Math.random()}
|
||||
routes={Routing}
|
||||
history={syncedHistory}
|
||||
store={configuredStore}
|
||||
/>,
|
||||
document.getElementById('app')
|
||||
);
|
||||
};
|
||||
const history = createHistory();
|
||||
|
||||
renderRoot(Root);
|
||||
render(
|
||||
<Root store={configuredStore} history={history} />,
|
||||
document.getElementById('app')
|
||||
);
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('reducers', () =>
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
import App from 'containers';
|
||||
import ENS from 'containers/Tabs/ENS';
|
||||
import GenerateWallet from 'containers/Tabs/GenerateWallet';
|
||||
import Help from 'containers/Tabs/Help';
|
||||
import SendTransaction from 'containers/Tabs/SendTransaction';
|
||||
import Swap from 'containers/Tabs/Swap';
|
||||
import ViewWallet from 'containers/Tabs/ViewWallet';
|
||||
import { useBasename } from 'history';
|
||||
import React from 'react';
|
||||
import { browserHistory, Redirect, Route } from 'react-router';
|
||||
|
||||
export const history = getHistory();
|
||||
export const Routing = () =>
|
||||
<Route path="" component={App}>
|
||||
<Route path="/" component={GenerateWallet} />
|
||||
<Route path="/view-wallet" component={ViewWallet} />
|
||||
<Route path="/help" component={Help} />
|
||||
<Route path="/swap" component={Swap} />
|
||||
<Route path="/send-transaction" component={SendTransaction} />
|
||||
<Route path="/ens" component={ENS} />
|
||||
<Redirect from="/*" to="/" />
|
||||
</Route>;
|
||||
|
||||
function getHistory() {
|
||||
const basename = '';
|
||||
return useBasename(() => browserHistory)({ basename });
|
||||
}
|
||||
85
package-lock.json
generated
85
package-lock.json
generated
@ -99,15 +99,26 @@
|
||||
}
|
||||
},
|
||||
"@types/react-router": {
|
||||
"version": "3.0.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-3.0.13.tgz",
|
||||
"integrity": "sha512-yPIa3UH7C03M73Va24EMenQIHJfLmm1HrecnBbK9kdMZqkDwwCfZZe+TR0aZ2O3YBDRZtF9ahQFmXqxC3USTaA==",
|
||||
"version": "4.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.0.15.tgz",
|
||||
"integrity": "sha512-E3rS+jFk/zMcoIv4caqfic3mcIoQImpVaC9lNEgPqZttjocgLvjOwT+peBNbUCLPBeNwaTdglZZeZJmowb28sw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/history": "3.2.2",
|
||||
"@types/react": "16.0.5"
|
||||
}
|
||||
},
|
||||
"@types/react-router-dom": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.0.8.tgz",
|
||||
"integrity": "sha512-+Ipm4f9eNhzu4PKoQIqrj+VMiYWLFb1UXWOpx5z1CmSoVIdA0x703aUuRPncC1o9KKcuwr3bj1tEIzg1I/vhAg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/history": "3.2.2",
|
||||
"@types/react": "16.0.5",
|
||||
"@types/react-router": "4.0.15"
|
||||
}
|
||||
},
|
||||
"@types/react-router-redux": {
|
||||
"version": "4.0.50",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-redux/-/react-router-redux-4.0.50.tgz",
|
||||
@ -5972,13 +5983,14 @@
|
||||
"dev": true
|
||||
},
|
||||
"history": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-3.3.0.tgz",
|
||||
"integrity": "sha1-/O3M6PEpdTcVRdc1RhAzV5ptrpw=",
|
||||
"version": "4.7.2",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
|
||||
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
|
||||
"requires": {
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"query-string": "4.3.4",
|
||||
"resolve-pathname": "2.2.0",
|
||||
"value-equal": "0.4.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
@ -10468,6 +10480,7 @@
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
|
||||
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-assign": "4.1.1",
|
||||
"strict-uri-encode": "1.1.0"
|
||||
@ -10717,16 +10730,49 @@
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-3.0.5.tgz",
|
||||
"integrity": "sha1-w7eHN1gEWou8lWKu9P9LyMznwTY=",
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
|
||||
"integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==",
|
||||
"requires": {
|
||||
"create-react-class": "15.6.0",
|
||||
"history": "3.3.0",
|
||||
"hoist-non-react-statics": "1.2.0",
|
||||
"history": "4.7.2",
|
||||
"hoist-non-react-statics": "2.3.1",
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"path-to-regexp": "1.7.0",
|
||||
"prop-types": "15.5.10",
|
||||
"warning": "3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz",
|
||||
"integrity": "sha1-ND24TGAYxlB3iJgkATWhQg7iLOA="
|
||||
},
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
|
||||
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz",
|
||||
"integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==",
|
||||
"requires": {
|
||||
"history": "4.7.2",
|
||||
"invariant": "2.2.2",
|
||||
"loose-envify": "1.3.1",
|
||||
"prop-types": "15.5.10",
|
||||
"react-router": "4.2.0",
|
||||
"warning": "3.0.0"
|
||||
}
|
||||
},
|
||||
@ -11222,6 +11268,11 @@
|
||||
"path-parse": "1.0.5"
|
||||
}
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
|
||||
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
@ -12135,7 +12186,8 @@
|
||||
"strict-uri-encode": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
|
||||
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
|
||||
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
|
||||
"dev": true
|
||||
},
|
||||
"string-length": {
|
||||
"version": "1.0.1",
|
||||
@ -13531,6 +13583,11 @@
|
||||
"spdx-expression-parse": "1.0.4"
|
||||
}
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
|
||||
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
|
||||
},
|
||||
"vary": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.1.tgz",
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
"react-dom": "16.0.0",
|
||||
"react-markdown": "^2.5.0",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router": "^3.0.0",
|
||||
"react-router-redux": "^4.0.8",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-router-redux": "^4.0.8",
|
||||
"redux": "^3.6.0",
|
||||
"redux-form": "^6.6.3",
|
||||
"redux-logger": "^3.0.1",
|
||||
@ -53,7 +53,8 @@
|
||||
"@types/react": "^16.0.5",
|
||||
"@types/react-dom": "^15.5.4",
|
||||
"@types/react-redux": "^5.0.9",
|
||||
"@types/react-router": "^3.0.13",
|
||||
"@types/react-router": "^4.0.15",
|
||||
"@types/react-router-dom": "^4.0.8",
|
||||
"@types/react-router-redux": "^4.0.50",
|
||||
"@types/redux-form": "^7.0.5",
|
||||
"@types/redux-logger": "^3.0.3",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user