Replace <Aux> with React Fragements (#816)
* replace <Aux> with React Fragements * Remove Aux imports
This commit is contained in:
parent
7097a44f32
commit
fa8fbe531f
|
@ -13,7 +13,6 @@ import BroadcastTx from 'containers/Tabs/BroadcastTx';
|
|||
import ErrorScreen from 'components/ErrorScreen';
|
||||
import PageNotFound from 'components/PageNotFound';
|
||||
import LogOutPrompt from 'components/LogOutPrompt';
|
||||
import { Aux } from 'components/ui';
|
||||
import { Store } from 'redux';
|
||||
import { pollOfflineStatus } from 'actions/config';
|
||||
import { AppState } from 'reducers';
|
||||
|
@ -75,11 +74,11 @@ export default class Root extends Component<Props, State> {
|
|||
return (
|
||||
<Provider store={store} key={Math.random()}>
|
||||
<Router key={Math.random()}>
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
{routes}
|
||||
<LegacyRoutes />
|
||||
<LogOutPrompt />
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { AddressFieldFactory } from './AddressFieldFactory';
|
||||
import { donationAddressMap } from 'config/data';
|
||||
import { Aux } from 'components/ui';
|
||||
|
||||
interface Props {
|
||||
isReadOnly?: boolean;
|
||||
|
@ -10,7 +9,7 @@ interface Props {
|
|||
export const AddressField: React.SFC<Props> = ({ isReadOnly }) => (
|
||||
<AddressFieldFactory
|
||||
withProps={({ currentTo, isValid, onChange, readOnly, errorMsg }) => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<input
|
||||
className={`form-control ${isValid ? 'is-valid' : 'is-invalid'}`}
|
||||
type="text"
|
||||
|
@ -24,7 +23,7 @@ export const AddressField: React.SFC<Props> = ({ isReadOnly }) => (
|
|||
<span className="help-block">{errorMsg}</span>
|
||||
</div>
|
||||
)}
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import { AmountFieldFactory } from './AmountFieldFactory';
|
||||
import { Aux } from 'components/ui';
|
||||
import { UnitDropDown } from 'components';
|
||||
import translate, { translateRaw } from 'translations';
|
||||
|
||||
|
@ -17,7 +16,7 @@ export const AmountField: React.SFC<Props> = ({
|
|||
}) => (
|
||||
<AmountFieldFactory
|
||||
withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<label>{translate('SEND_amount')}</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
|
@ -32,7 +31,7 @@ export const AmountField: React.SFC<Props> = ({
|
|||
/>
|
||||
{hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}
|
||||
</div>
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import { getTransactionFields, makeTransaction } from 'libs/transaction';
|
||||
import { SerializedTransaction } from 'components/renderCbs';
|
||||
import { Aux } from 'components/ui';
|
||||
import ERC20 from 'libs/erc20';
|
||||
import { From } from '../From';
|
||||
import React, { Component } from 'react';
|
||||
|
@ -21,7 +20,7 @@ class AddressesClass extends Component<StateProps> {
|
|||
const { to, data } = getTransactionFields(transactionInstance);
|
||||
|
||||
return (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<li className="ConfModal-details-detail">
|
||||
You are sending from <From withFrom={from => <code>{from}</code>} />
|
||||
</li>
|
||||
|
@ -32,7 +31,7 @@ class AddressesClass extends Component<StateProps> {
|
|||
{this.props.unit === 'ether' ? to : ERC20.transfer.decodeInput(data)._to}
|
||||
</code>
|
||||
</li>
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import { GasLimitFieldFactory } from './GasLimitFieldFactory';
|
||||
import translate from 'translations';
|
||||
import { Aux } from 'components/ui';
|
||||
|
||||
export const GasLimitField: React.SFC<{}> = () => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<label>{translate('TRANS_gas')} </label>
|
||||
<GasLimitFieldFactory
|
||||
withProps={({ gasLimit: { raw, value }, onChange, readOnly }) => (
|
||||
|
@ -17,5 +16,5 @@ export const GasLimitField: React.SFC<{}> = () => (
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Aux } from 'components/ui';
|
||||
import { Query } from 'components/renderCbs';
|
||||
import Help from 'components/ui/Help';
|
||||
import { getNonce, nonceRequestFailed } from 'selectors/transaction';
|
||||
|
@ -26,7 +25,7 @@ class NonceInputClass extends Component<Props> {
|
|||
public render() {
|
||||
const { nonce: { raw, value }, onChange, shouldDisplay } = this.props;
|
||||
const content = (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<label>Nonce</label>
|
||||
{nonceHelp}
|
||||
|
||||
|
@ -42,7 +41,7 @@ class NonceInputClass extends Component<Props> {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
return shouldDisplay ? content : null;
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Aux } from 'components/ui';
|
||||
import { ConfirmationModal } from 'components/ConfirmationModal';
|
||||
import { getOffline } from 'selectors/config';
|
||||
import { AppState } from 'reducers';
|
||||
|
@ -40,10 +39,10 @@ class OnlineSendClass extends Component<Props, State> {
|
|||
) : null;
|
||||
|
||||
return !this.props.offline ? (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
{this.props.withProps({ onClick: this.openModal })}
|
||||
{displayModal}
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
) : null;
|
||||
}
|
||||
private openModal = () => {
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import translate from 'translations';
|
||||
import { Aux } from 'components/ui';
|
||||
import { getTransactionFields, makeTransaction } from 'libs/transaction';
|
||||
import { OfflineBroadcast } from './OfflineBroadcast';
|
||||
import { SerializedTransaction } from 'components/renderCbs';
|
||||
|
@ -33,7 +32,7 @@ class SendButtonFactoryClass extends Component<Props> {
|
|||
return (
|
||||
<SerializedTransaction
|
||||
withSerializedTransaction={serializedTransaction => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<div className={`col-sm-${columnSize}`}>
|
||||
<label>
|
||||
{this.props.walletType.isWeb3Wallet
|
||||
|
@ -64,7 +63,7 @@ class SendButtonFactoryClass extends Component<Props> {
|
|||
)}
|
||||
<OfflineBroadcast />
|
||||
<OnlineSend withProps={this.props.withProps} />
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
children: any;
|
||||
}
|
||||
|
||||
export const Aux: React.SFC<Props> = ({ children }) => children;
|
|
@ -1,5 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Aux } from 'components/ui';
|
||||
|
||||
export type ExpandHandler = (ev: React.FormEvent<HTMLAnchorElement>) => void;
|
||||
|
||||
|
@ -19,10 +18,10 @@ export class Expandable extends Component<Props, State> {
|
|||
|
||||
public render() {
|
||||
return (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
{this.props.expandLabel(this.expandHandler)}
|
||||
{this.state.expanded && this.props.children}
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -11,5 +11,4 @@ export { default as Spinner } from './Spinner';
|
|||
export { default as SwapDropdown } from './SwapDropdown';
|
||||
export { default as Tooltip } from './Tooltip';
|
||||
export * from './ConditionalInput';
|
||||
export * from './AuxComponent';
|
||||
export * from './Expandable';
|
||||
|
|
|
@ -4,7 +4,6 @@ import React, { Component } from 'react';
|
|||
import { NonceField, SendButton, SigningStatus } from 'components';
|
||||
import WalletDecrypt, { DISABLE_WALLETS } from 'components/WalletDecrypt';
|
||||
import { FullWalletOnly } from 'components/renderCbs';
|
||||
import { Aux } from 'components/ui';
|
||||
|
||||
interface OwnProps {
|
||||
button: React.ReactElement<any>;
|
||||
|
@ -12,14 +11,14 @@ interface OwnProps {
|
|||
export class Fields extends Component<OwnProps> {
|
||||
public render() {
|
||||
const makeContent = () => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<GasLimitField />
|
||||
<AmountField />
|
||||
<NonceField />
|
||||
{this.props.button}
|
||||
<SigningStatus />
|
||||
<SendButton />
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const makeDecrypt = () => <WalletDecrypt disabledWallets={DISABLE_WALLETS.READ_ONLY} />;
|
||||
|
|
|
@ -2,7 +2,6 @@ import React, { Component } from 'react';
|
|||
import translate from 'translations';
|
||||
import './InteractExplorer.scss';
|
||||
import { TShowNotification, showNotification } from 'actions/notifications';
|
||||
import { Aux } from 'components/ui';
|
||||
import { getNodeLib } from 'selectors/config';
|
||||
import { getTo, getDataExists } from 'selectors/transaction';
|
||||
import { INode } from 'libs/nodes/INode';
|
||||
|
@ -126,9 +125,9 @@ class InteractExplorerClass extends Component<Props, State> {
|
|||
{translate('CONTRACT_Read')}
|
||||
</button>
|
||||
) : (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<Fields button={generateOrWriteButton} />
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
@ -13,7 +13,7 @@ import {
|
|||
} from 'components';
|
||||
import { OnlyUnlocked, WhenQueryExists } from 'components/renderCbs';
|
||||
import translate from 'translations';
|
||||
import { Aux } from 'components/ui';
|
||||
|
||||
import { AppState } from 'reducers';
|
||||
import { NonStandardTransaction } from './components';
|
||||
|
||||
|
@ -68,10 +68,10 @@ class FieldsClass extends Component<StateProps> {
|
|||
return (
|
||||
<OnlyUnlocked
|
||||
whenUnlocked={
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
<QueryWarning />
|
||||
{shouldDisplay ? content : null}
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -3,8 +3,6 @@ import { AmountFieldFactory } from 'components/AmountFieldFactory';
|
|||
import { AddressFieldFactory } from 'components/AddressFieldFactory';
|
||||
import { connect } from 'react-redux';
|
||||
import { AppState } from 'reducers';
|
||||
|
||||
import { Aux } from 'components/ui';
|
||||
import { GenerateTransaction, SendButton, SigningStatus, GasSlider } from 'components';
|
||||
import { resetWallet, TResetWallet } from 'actions/wallet';
|
||||
import translate from 'translations';
|
||||
|
@ -46,7 +44,7 @@ class FieldsClass extends Component<Props> {
|
|||
|
||||
<AmountFieldFactory
|
||||
withProps={({ currentValue, isValid }) => (
|
||||
<Aux>
|
||||
<React.Fragment>
|
||||
{!isValid && (
|
||||
<h5 style={{ color: 'red' }}>
|
||||
WARNING: Your ether or token balance is not high enough to complete this
|
||||
|
@ -61,7 +59,7 @@ class FieldsClass extends Component<Props> {
|
|||
readOnly={true}
|
||||
/>
|
||||
)}
|
||||
</Aux>
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import WalletDecrypt from 'components/WalletDecrypt';
|
||||
import { OnlyUnlocked } from 'components/renderCbs';
|
||||
import { Aux } from 'components/ui';
|
||||
import { Fields } from './Fields';
|
||||
import { isUnlocked as isUnlockedSelector } from 'selectors/wallet';
|
||||
import { getNetworkConfig } from 'selectors/config';
|
||||
|
@ -48,7 +47,7 @@ class LiteSendClass extends Component<Props> {
|
|||
renderMe = isUnlocked ? <OnlyUnlocked whenUnlocked={<Fields />} /> : <WalletDecrypt />;
|
||||
}
|
||||
|
||||
return <Aux>{renderMe}</Aux>;
|
||||
return <React.Fragment>{renderMe}</React.Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue