aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx20
-rw-r--r--packages/instant/src/constants.ts2
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;