diff options
4 files changed, 5 insertions, 201 deletions
diff --git a/packages/instant/src/components/simulated_progress_bar.tsx b/packages/instant/src/components/simulated_progress_bar.tsx deleted file mode 100644 index 067f4093e..000000000 --- a/packages/instant/src/components/simulated_progress_bar.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; - -import { PROGRESS_STALL_AT_PERCENTAGE, PROGRESS_TICK_INTERVAL_MS } from '../constants'; -import { ColorOption, styled } from '../style/theme'; -import { timeUtil } from '../util/time'; - -import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; - -const TICKS_PER_SECOND = 1000 / PROGRESS_TICK_INTERVAL_MS; - -const curTimeUnix = () => { - return new Date().getTime(); -}; - -export interface SimulatedProgressBarProps { - startTimeUnix: number; - expectedEndTimeUnix: number; - ended: boolean; -} -enum TickingRunState { - None = 'None', - Running = 'Running', - Finishing = 'Finishing', -} -interface TickingNoneStatus { - runState: TickingRunState.None; -} -interface TickingRunningStatus { - runState: TickingRunState.Running; -} -interface TickingFinishingStatus { - runState: TickingRunState.Finishing; - increasePercentageEveryTick: number; -} -type TickingStatus = TickingNoneStatus | TickingRunningStatus | TickingFinishingStatus; - -export interface SimulatedProgressState { - percentageDone: number; - intervalId?: number; - tickingStatus: TickingStatus; - elapsedTimeMs: number; -} -export class SimulatedProgressBar extends React.Component<SimulatedProgressBarProps, SimulatedProgressState> { - public constructor(props: SimulatedProgressBarProps) { - super(props); - - // TODO: look into using assert library here? - if (props.expectedEndTimeUnix <= props.startTimeUnix) { - throw new Error('End time before start time'); - } - - // TODO: use getFreshState here - const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS); - this.state = { - percentageDone: 0, - intervalId, - tickingStatus: { runState: TickingRunState.Running }, - elapsedTimeMs: 0, - }; - } - - public componentDidUpdate(prevProps: SimulatedProgressBarProps, prevState: SimulatedProgressState): void { - const percentLeft = 100 - this.state.percentageDone; - const increasePercentageEveryTick = percentLeft / TICKS_PER_SECOND; - - // if we just switched to ending, having animate to end - if (prevProps.ended === false && this.props.ended === true) { - this.setState({ - tickingStatus: { - runState: TickingRunState.Finishing, - increasePercentageEveryTick, - }, - }); - return; - } - - // later TODO: the new state could be for the wrong order, attach to order state or add concurrency checking - - // if anything else changes, reset internal state - if ( - prevProps.startTimeUnix !== this.props.startTimeUnix || - prevProps.expectedEndTimeUnix !== this.props.expectedEndTimeUnix || - prevProps.ended !== this.props.ended - ) { - this.setState(this._getFreshState()); - } - } - - public componentWillUnmount(): void { - console.log('unmount'); - this._clearTimer(); - } - - public render(): React.ReactNode { - // TODO: Consider moving to seperate component - - const estimatedTimeSeconds = Math.ceil((this.props.expectedEndTimeUnix - this.props.startTimeUnix) / 1000); - const elapsedTimeSeconds = Math.floor(this.state.elapsedTimeMs / 1000); - return ( - <Container padding="20px 20px 0px 20px" width="100%"> - <Container marginBottom="5px"> - {/* TODO: consider moving to separate component */} - <Flex justify="space-between"> - <Text>Est. Time ({timeUtil.secondsToHumanDescription(estimatedTimeSeconds)})</Text> - <Text>Time: {timeUtil.secondsToStopwatchTime(elapsedTimeSeconds)}</Text> - </Flex> - </Container> - <Container width="100%" backgroundColor={ColorOption.lightGrey} borderRadius="6px"> - <InnerProgressBarElement - percentageDone={this.state.percentageDone} - backgroundColor={ColorOption.primaryColor} - borderRadius="6px" - height="6px" - transitionTimeMs={200} - /> - </Container> - </Container> - ); - } - - private _getFreshState(): SimulatedProgressState { - this._clearTimer(); - const intervalId = window.setInterval(this._tick.bind(this), PROGRESS_TICK_INTERVAL_MS); - return { - percentageDone: 0, - intervalId, - tickingStatus: { runState: TickingRunState.Running }, - elapsedTimeMs: 0, - }; - } - - private _tick(): void { - const rawPercentageDone = - this.state.tickingStatus.runState === TickingRunState.Finishing - ? this._getNewPercentageFinishing(this.state.tickingStatus) - : this._getNewPercentageNormal(); - const maxPercentage = - this.state.tickingStatus.runState === TickingRunState.Finishing ? 100 : PROGRESS_STALL_AT_PERCENTAGE; - const percentageDone = Math.min(rawPercentageDone, maxPercentage); - - const elapsedTimeMs = Math.max(curTimeUnix() - this.props.startTimeUnix, 0); - - this.setState({ - percentageDone, - elapsedTimeMs, - }); - - if (percentageDone >= 100) { - this._clearTimer(); - } - } - - private _clearTimer(): void { - if (this.state.intervalId) { - window.clearTimeout(this.state.intervalId); - } - } - - // TODO: consider not taking in a parameter here, might be confusing - private _getNewPercentageFinishing(tickingStatus: TickingFinishingStatus): number { - return this.state.percentageDone + tickingStatus.increasePercentageEveryTick; - } - - private _getNewPercentageNormal(): number { - const elapsedTimeMs = curTimeUnix() - this.props.startTimeUnix; - const safeElapsedTimeMs = Math.max(elapsedTimeMs, 1); - - const expectedAmountOfTimeMs = this.props.expectedEndTimeUnix - this.props.startTimeUnix; - const percentageDone = safeElapsedTimeMs / expectedAmountOfTimeMs * 100; - 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/components/timed_progress_bar.tsx b/packages/instant/src/components/timed_progress_bar.tsx index 7fdfe1a25..a4bb2eabd 100644 --- a/packages/instant/src/components/timed_progress_bar.tsx +++ b/packages/instant/src/components/timed_progress_bar.tsx @@ -1,14 +1,10 @@ import * as _ from 'lodash'; import * as React from 'react'; -import { Keyframes } from 'styled-components'; import { PROGRESS_FINISH_ANIMATION_TIME_MS, PROGRESS_STALL_AT_PERCENTAGE } from '../constants'; import { ColorOption, keyframes, styled } from '../style/theme'; -import { timeUtil } from '../util/time'; import { Container } from './ui/container'; -import { Flex } from './ui/flex'; -import { Text } from './ui/text'; export interface TimedProgressBarProps { expectedTimeMs: number; @@ -29,6 +25,11 @@ export const beginningState = (props: TimedProgressBarProps): TimedProgressBarSt }; }; +/** + * Timed Progress Bar + * Goes from 0% -> PROGRESS_STALL_AT_PERCENTAGE% over time of expectedTimeMs + * When ended set to true, goes to 100% through animation of PROGRESS_FINISH_ANIMATION_TIME_MS length + */ export class TimedProgressBar extends React.Component<TimedProgressBarProps, TimedProgressBarState> { private readonly _barRef = React.createRef<HTMLDivElement>(); diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 9fdbf2830..fcf6e0798 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -8,6 +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 = 250; // TODO: remove export const PROGRESS_STALL_AT_PERCENTAGE = 95; export const PROGRESS_FINISH_ANIMATION_TIME_MS = 200; diff --git a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx index a989407d5..ceab61175 100644 --- a/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx +++ b/packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { connect } from 'react-redux'; -import { SimulatedProgressBar } from '../components/simulated_progress_bar'; import { TimedProgressBar } from '../components/timed_progress_bar'; import { TimeCounter } from '../components/time_counter'; @@ -11,7 +10,6 @@ import { State } from '../redux/reducer'; import { OrderProcessState, OrderState, SimulatedProgress } from '../types'; // TODO: rename this -// TODO: delete SimulatedProgressBar code and anything else remaining interface SelectedAssetProgressComponentProps { buyOrderState: OrderState; } |