WIP of new timedprogressbar using CSS animations

1 files changed, 13 insertions, 5 deletions

diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
index a7acc4cb7..a989407d5 100644
--- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx
@@ -3,10 +3,15 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 
 import { SimulatedProgressBar } from '../components/simulated_progress_bar';
+import { TimedProgressBar } from '../components/timed_progress_bar';
 
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
 import { State } from '../redux/reducer';
 import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
 
+// TODO: rename this
+// TODO: delete SimulatedProgressBar code and anything else remaining
 interface SelectedAssetProgressComponentProps {
     buyOrderState: OrderState;
 }
@@ -21,12 +26,15 @@ export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
         buyOrderState.processState === OrderProcessState.FAILURE
     ) {
         const progress = buyOrderState.progress;
+        const ended = buyOrderState.processState !== OrderProcessState.PROCESSING;
+        const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
-            <SimulatedProgressBar
-                startTimeUnix={progress.startTimeUnix}
-                expectedEndTimeUnix={progress.expectedEndTimeUnix}
-                ended={progress.ended}
-            />
+            <Container padding="20px 20px 0px 20px" width="100%">
+                <Container marginBottom="5px">
+                    <TimeCounter estimatedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+                </Container>
+                <TimedProgressBar expectedTimeMs={expectedTimeMs} ended={ended} key={progress.startTimeUnix} />
+            </Container>
         );
     }