maxWidth -> toWidth, and make from and to width consistent units

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;