Move BuyOrderProgress to its own component

2 files changed, 39 insertions, 38 deletions

diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
new file mode 100644
index 000000000..e259e5606
--- /dev/null
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { TimedProgressBar } from '../components/timed_progress_bar';
+
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
+import { OrderProcessState, OrderState } from '../types';
+
+export interface BuyOrderProgressProps {
+    buyOrderState: OrderState;
+}
+
+export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => {
+    const { buyOrderState } = props;
+
+    if (
+        buyOrderState.processState === OrderProcessState.PROCESSING ||
+        buyOrderState.processState === OrderProcessState.SUCCESS ||
+        buyOrderState.processState === OrderProcessState.FAILURE
+    ) {
+        const progress = buyOrderState.progress;
+        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
+        return (
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+                </Container>
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+            </Container>
+        );
+    }
+
+    return null;
+};
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
index a910d8031..354a15bf0 100644
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -1,49 +1,15 @@
-import * as React from 'react';
+// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts
 
 import { connect } from 'react-redux';
 
-import { TimedProgressBar } from '../components/timed_progress_bar';
-
-import { TimeCounter } from '../components/time_counter';
-import { Container } from '../components/ui';
+import { BuyOrderProgress } from '../components/buy_order_progress';
 import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
-
-interface SelectedAssetProgressComponentProps {
-    buyOrderState: OrderState;
-}
-// TODO: rename this component and move to seperate file, and get props using mapStateToProps
-export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
-    SelectedAssetProgressComponentProps
-> = props => {
-    const { buyOrderState } = props;
-
-    if (
-        buyOrderState.processState === OrderProcessState.PROCESSING ||
-        buyOrderState.processState === OrderProcessState.SUCCESS ||
-        buyOrderState.processState === OrderProcessState.FAILURE
-    ) {
-        const progress = buyOrderState.progress;
-        const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
-        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
-        return (
-            <Container padding="20px 20px 0px 20px" width="100%">
-                <Container marginBottom="5px">
-                    <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
-                </Container>
-                <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
-            </Container>
-        );
-    }
-
-    return null;
-};
+import { OrderState } from '../types';
 
 interface ConnectedState {
     buyOrderState: OrderState;
-    simulatedProgress?: SimulatedProgress;
 }
 const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
     buyOrderState: state.buyOrderState,
 });
-export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
+export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress);