Placeholder for estimated time

2 files changed, 15 insertions, 2 deletions

diff --git a/packages/instant/src/components/progress_bar.tsx b/packages/instant/src/components/progress_bar.tsx
index 5b5968703..d5d1f3ded 100644
--- a/packages/instant/src/components/progress_bar.tsx
+++ b/packages/instant/src/components/progress_bar.tsx
@@ -3,18 +3,31 @@ import * as React from 'react';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ProgressBarProps {
     percentageDone: number;
+    estTimeMs: number;
+    elapsedTimeMs: number;
 }
+
+// TODO: Est time to minutes with suffix
+// TODO: time in minutes
 export const ProgressBar: React.StatelessComponent<ProgressBarProps> = props => (
     <Container padding="20px 20px 0px 20px" width="100%">
+        <Container marginBottom="5px">
+            <Flex justify="space-between">
+                <Text>Est. Time ({props.estTimeMs / 1000} seconds)</Text>
+                <Text>{props.elapsedTimeMs / 1000}</Text>
+            </Flex>
+        </Container>
         <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px">
             <Container
                 width={`${props.percentageDone}%`}
                 backgroundColor={ColorOption.primaryColor}
                 borderRadius="6px"
-                height="10px"
+                height="6px"
             />
         </Container>
     </Container>
diff --git a/packages/instant/src/containers/selected_asset_progress_bar.tsx b/packages/instant/src/containers/selected_asset_progress_bar.tsx
index 886e223d3..4564c790a 100644
--- a/packages/instant/src/containers/selected_asset_progress_bar.tsx
+++ b/packages/instant/src/containers/selected_asset_progress_bar.tsx
@@ -20,7 +20,7 @@ export const SelectedAssetProgressComponent: React.StatelessComponent<SelectedAs
     const isOrderStateOk = true;
 
     if (isOrderStateOk && percentageDone) {
-        return <ProgressBar percentageDone={percentageDone} />;
+        return <ProgressBar percentageDone={percentageDone} estTimeMs={1000} elapsedTimeMs={2000} />;
     }
 
     return null;