diff options
| -rw-r--r-- | packages/instant/src/components/timed_progress_bar.tsx | 20 | ||||
| -rw-r--r-- | packages/instant/src/constants.ts | 2 |
2 files changed, 11 insertions, 11 deletions
diff --git a/packages/instant/src/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx index 694ae7e2f..78c7ee849 100644 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ b/packages/instant/src/components/timed_progress_bar.tsx @@ -1,7 +1,7 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants'; +import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_WIDTH } from '../constants'; import { ColorOption, keyframes, styled } from '../style/theme'; import { Container } from './ui/container'; @@ -13,8 +13,8 @@ export interface TimedProgressBarProps { /** * Timed Progress Bar - * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs - * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length + * Goes from 0% -> PROGRESS_STALL_AT_WIDTH over time of expectedTimeMs + * When hasEnded set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length of time */ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> { private readonly _barRef = React.createRef<HTMLDivElement>(); @@ -37,25 +37,25 @@ export class TimedProgressBar extends React.Component<TimedProgressBarProps, {}> return { timeMs: PROGRESS_FINISH_ANIMATION_TIME_MS, fromWidth, - maxWidthPercent: 100, + toWidth: '100%', }; } return { timeMs: this.props.expectedTimeMs, fromWidth: '0px', - maxWidthPercent: PROGRESS_STALL_AT_PERCENTAGE, + toWidth: PROGRESS_STALL_AT_WIDTH, }; } } -const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => { +const expandingWidthKeyframes = (fromWidth: string, toWidth: string) => { return keyframes` from { - width: ${fromWidth} + width: ${fromWidth}; } to { - width: ${maxWidthPercent}%; + width: ${toWidth}; } `; }; @@ -63,7 +63,7 @@ const expandingWidthKeyframes = (fromWidth: string, maxWidthPercent: number) => interface TimedProgressProps { timeMs: number; fromWidth: string; - maxWidthPercent: number; + toWidth: string; } // TODO use PrimaryColor instead of black export const TimedProgress = @@ -73,6 +73,6 @@ export const TimedProgress = background-color: black; border-radius: 6px; height: 6px; - animation: ${props => expandingWidthKeyframes(props.fromWidth, props.maxWidthPercent)} + animation: ${props => expandingWidthKeyframes(props.fromWidth, props.toWidth)} ${props => props.timeMs}ms linear 1 forwards; `; diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index fcf6e0798..df1e6f53f 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_STALL_AT_PERCENTAGE = 95; +export const PROGRESS_STALL_AT_WIDTH = '95%'; export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200; |