diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/instant/src/components/progress_bar.tsx | 15 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_progress_bar.tsx | 2 |
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; |