aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/simulated_progress_bar.tsx194
-rw-r--r--packages/instant/src/components/timed_progress_bar.tsx9
-rw-r--r--packages/instant/src/constants.ts1
-rw-r--r--packages/instant/src/containers/selected_asset_simulated_progress_bar.tsx2
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;
}