aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/progress_bar.tsx15
-rw-r--r--packages/instant/src/containers/selected_asset_progress_bar.tsx2
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;