From ae84dac46382258e9a59b194f8aed7184d283e6f Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Wed, 31 Oct 2018 16:46:24 -0700
Subject: WIP of new timedprogressbar using CSS animations

---
 .../selected_asset_simulated_progress_bar.tsx          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

(limited to 'packages/instant/src/containers')

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>
         );
     }
 
-- 
cgit v1.2.3