diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/instant/src/components/simulated_progress_bar.tsx | 26 | ||||
| -rw-r--r-- | packages/instant/src/constants.ts | 2 |
2 files changed, 24 insertions, 4 deletions
diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx index e4b08db8c..067f4093e 100644 --- a/packages/instant/src/components/simulated_progress_bar.tsx +++ b/packages/instant/src/components/simulated_progress_bar.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants'; -import { ColorOption } from '../style/theme'; +import { ColorOption, styled } from '../style/theme'; import { timeUtil } from '../util/time'; import { Container } from './ui/container'; @@ -109,11 +109,12 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr </Flex> </Container> <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px"> - <Container - width={`${this.state.percentageDone}%`} + <InnerProgressBarElement + percentageDone={this.state.percentageDone} backgroundColor={ColorOption.primaryColor} borderRadius="6px" height="6px" + transitionTimeMs={200} /> </Container> </Container> @@ -172,3 +173,22 @@ export class SimulatedProgressBar extends React.Component<SimulatedProgressBarPr return percentageDone; } } + +interface InnerProgressBarElementProps { + percentageDone: number; + backgroundColor: ColorOption; + borderRadius: string; + height: string; + transitionTimeMs: number; +} + +export const InnerProgressBarElement = + styled.div < + InnerProgressBarElementProps > + ` + width: ${props => props.percentageDone}%; + background-color: ${props => props.theme[props.backgroundColor]}; + border-radius: ${props => props.borderRadius}; + height: ${props => props.height}; + transition: width ${props => props.transitionTimeMs}ms ease-in-out; + `; diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 12e592ae8..3b320ed36 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -8,5 +8,5 @@ export const DEFAULT_GAS_PRICE = GWEI_IN_WEI.mul(6); export const DEFAULT_ESTIMATED_TRANSACTION_TIME_MS = 2 * 60 * 1000; // 2 minutes export const ETH_GAS_STATION_API_BASE_URL = 'https://ethgasstation.info'; export const COINBASE_API_BASE_URL = 'https://api.coinbase.com/v2'; -export const PROGRESS_TICK_INTERVAL_MS = 100; +export const PROGRESS_TICK_INTERVAL_MS = 250; export const PROGRESS_STALL_AT_PERCENTAGE = 95; |