From fa8fbe531f82260021ff3d9e1a414fa791190f8f Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Sun, 14 Jan 2018 20:07:02 -0600
Subject: [PATCH] Replace <Aux> with React Fragements (#816)

* replace <Aux> with React Fragements

* Remove Aux imports
---
 common/Root.tsx                                            | 5 ++---
 common/components/AddressField.tsx                         | 5 ++---
 common/components/AmountField.tsx                          | 5 ++---
 .../ConfirmationModal/components/Details/Addresses.tsx     | 5 ++---
 common/components/GasLimitField.tsx                        | 5 ++---
 common/components/NonceField/NonceInput.tsx                | 5 ++---
 common/components/SendButtonFactory/OnlineSend.tsx         | 5 ++---
 common/components/SendButtonFactory/SendButtonFactory.tsx  | 5 ++---
 common/components/ui/AuxComponent.tsx                      | 7 -------
 common/components/ui/Expandable.tsx                        | 5 ++---
 common/components/ui/index.ts                              | 1 -
 .../components/InteractExplorer/components/Fields.tsx      | 5 ++---
 .../Interact/components/InteractExplorer/index.tsx         | 5 ++---
 .../Tabs/SendTransaction/components/Fields/Fields.tsx      | 6 +++---
 common/containers/Tabs/Swap/components/LiteSend/Fields.tsx | 6 ++----
 .../containers/Tabs/Swap/components/LiteSend/LiteSend.tsx  | 3 +--
 16 files changed, 28 insertions(+), 50 deletions(-)
 delete mode 100644 common/components/ui/AuxComponent.tsx

diff --git a/common/Root.tsx b/common/Root.tsx
index 612523b9..bad06b74 100644
--- a/common/Root.tsx
+++ b/common/Root.tsx
@@ -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>
     );
diff --git a/common/components/AddressField.tsx b/common/components/AddressField.tsx
index e1721703..ef6c90c2 100644
--- a/common/components/AddressField.tsx
+++ b/common/components/AddressField.tsx
@@ -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>
     )}
   />
 );
diff --git a/common/components/AmountField.tsx b/common/components/AmountField.tsx
index aaaed0b0..3a215fe3 100644
--- a/common/components/AmountField.tsx
+++ b/common/components/AmountField.tsx
@@ -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>
     )}
   />
 );
diff --git a/common/components/ConfirmationModal/components/Details/Addresses.tsx b/common/components/ConfirmationModal/components/Details/Addresses.tsx
index d5d38b22..6d5936c8 100644
--- a/common/components/ConfirmationModal/components/Details/Addresses.tsx
+++ b/common/components/ConfirmationModal/components/Details/Addresses.tsx
@@ -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>
           );
         }}
       />
diff --git a/common/components/GasLimitField.tsx b/common/components/GasLimitField.tsx
index 5b905d83..a70780fc 100644
--- a/common/components/GasLimitField.tsx
+++ b/common/components/GasLimitField.tsx
@@ -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>
 );
diff --git a/common/components/NonceField/NonceInput.tsx b/common/components/NonceField/NonceInput.tsx
index 2ca8668a..34b404d6 100644
--- a/common/components/NonceField/NonceInput.tsx
+++ b/common/components/NonceField/NonceInput.tsx
@@ -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;
diff --git a/common/components/SendButtonFactory/OnlineSend.tsx b/common/components/SendButtonFactory/OnlineSend.tsx
index a319bc41..875d1f38 100644
--- a/common/components/SendButtonFactory/OnlineSend.tsx
+++ b/common/components/SendButtonFactory/OnlineSend.tsx
@@ -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 = () => {
diff --git a/common/components/SendButtonFactory/SendButtonFactory.tsx b/common/components/SendButtonFactory/SendButtonFactory.tsx
index 4af374b5..39338d68 100644
--- a/common/components/SendButtonFactory/SendButtonFactory.tsx
+++ b/common/components/SendButtonFactory/SendButtonFactory.tsx
@@ -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>
         )}
       />
     );
diff --git a/common/components/ui/AuxComponent.tsx b/common/components/ui/AuxComponent.tsx
deleted file mode 100644
index 33302f0f..00000000
--- a/common/components/ui/AuxComponent.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-interface Props {
-  children: any;
-}
-
-export const Aux: React.SFC<Props> = ({ children }) => children;
diff --git a/common/components/ui/Expandable.tsx b/common/components/ui/Expandable.tsx
index 441de83d..b785c90d 100644
--- a/common/components/ui/Expandable.tsx
+++ b/common/components/ui/Expandable.tsx
@@ -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>
     );
   }
 
diff --git a/common/components/ui/index.ts b/common/components/ui/index.ts
index 452d4b04..07f92209 100644
--- a/common/components/ui/index.ts
+++ b/common/components/ui/index.ts
@@ -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';
diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx
index ac4cbd19..21b6722c 100644
--- a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx
+++ b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/components/Fields.tsx
@@ -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} />;
diff --git a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
index ebc4701d..226f86bf 100644
--- a/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
+++ b/common/containers/Tabs/Contracts/components/Interact/components/InteractExplorer/index.tsx
@@ -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>
         )}
diff --git a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
index 7210301e..e5c49f9e 100644
--- a/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
+++ b/common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx
@@ -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>
         }
       />
     );
diff --git a/common/containers/Tabs/Swap/components/LiteSend/Fields.tsx b/common/containers/Tabs/Swap/components/LiteSend/Fields.tsx
index f3d99e29..6ae3cc1e 100644
--- a/common/containers/Tabs/Swap/components/LiteSend/Fields.tsx
+++ b/common/containers/Tabs/Swap/components/LiteSend/Fields.tsx
@@ -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>
diff --git a/common/containers/Tabs/Swap/components/LiteSend/LiteSend.tsx b/common/containers/Tabs/Swap/components/LiteSend/LiteSend.tsx
index 385a2dbe..0820ce6e 100644
--- a/common/containers/Tabs/Swap/components/LiteSend/LiteSend.tsx
+++ b/common/containers/Tabs/Swap/components/LiteSend/LiteSend.tsx
@@ -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>;
   }
 }