aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 02:29:33 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-11-02 02:29:33 +0800
commit61a1a0be974c8610623f2bcb9a43797532cc78d9 (patch)
treec975bade60c51873e77f04669cf0d7edda185ec2
parent3430896eb79b68e370b68f8954b1ef1b97d86a18 (diff)
downloaddexon-0x-contracts-61a1a0be974c8610623f2bcb9a43797532cc78d9.tar.gz
dexon-0x-contracts-61a1a0be974c8610623f2bcb9a43797532cc78d9.tar.zst
dexon-0x-contracts-61a1a0be974c8610623f2bcb9a43797532cc78d9.zip
Move BuyOrderProgress to its own component
-rw-r--r--packages/instant/src/components/buy_order_progress.tsx35
-rw-r--r--packages/instant/src/containers/selected_asset_progress.tsx42
2 files changed, 39 insertions, 38 deletions
diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
new file mode 100644
index 000000000..e259e5606
--- /dev/null
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { TimedProgressBar } from '../components/timed_progress_bar';
+
+import { TimeCounter } from '../components/time_counter';
+import { Container } from '../components/ui';
+import { OrderProcessState, OrderState } from '../types';
+
+export interface BuyOrderProgressProps {
+ buyOrderState: OrderState;
+}
+
+export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> = props => {
+ const { buyOrderState } = props;
+
+ if (
+ buyOrderState.processState === OrderProcessState.PROCESSING ||
+ buyOrderState.processState === OrderProcessState.SUCCESS ||
+ buyOrderState.processState === OrderProcessState.FAILURE
+ ) {
+ const progress = buyOrderState.progress;
+ const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
+ const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
+ return (
+ <Container padding="20px 20px 0px 20px" width="100%">
+ <Container marginBottom="5px">
+ <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+ </Container>
+ <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
+ </Container>
+ );
+ }
+
+ return null;
+};
diff --git a/packages/instant/src/containers/selected_asset_progress.tsx b/packages/instant/src/containers/selected_asset_progress.tsx
index a910d8031..354a15bf0 100644
--- a/packages/instant/src/containers/selected_asset_progress.tsx
+++ b/packages/instant/src/containers/selected_asset_progress.tsx
@@ -1,49 +1,15 @@
-import * as React from 'react';
+// TODO: rename file and props to SelectedAssetBuyOrderProgress and use .ts
import { connect } from 'react-redux';
-import { TimedProgressBar } from '../components/timed_progress_bar';
-
-import { TimeCounter } from '../components/time_counter';
-import { Container } from '../components/ui';
+import { BuyOrderProgress } from '../components/buy_order_progress';
import { State } from '../redux/reducer';
-import { OrderProcessState, OrderState, SimulatedProgress } from '../types';
-
-interface SelectedAssetProgressComponentProps {
- buyOrderState: OrderState;
-}
-// TODO: rename this component and move to seperate file, and get props using mapStateToProps
-export const SelectedAssetSimulatedProgressComponent: React.StatelessComponent<
- SelectedAssetProgressComponentProps
-> = props => {
- const { buyOrderState } = props;
-
- if (
- buyOrderState.processState === OrderProcessState.PROCESSING ||
- buyOrderState.processState === OrderProcessState.SUCCESS ||
- buyOrderState.processState === OrderProcessState.FAILURE
- ) {
- const progress = buyOrderState.progress;
- const hasEnded = buyOrderState.processState !== OrderProcessState.PROCESSING;
- const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
- return (
- <Container padding="20px 20px 0px 20px" width="100%">
- <Container marginBottom="5px">
- <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
- </Container>
- <TimedProgressBar expectedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
- </Container>
- );
- }
-
- return null;
-};
+import { OrderState } from '../types';
interface ConnectedState {
buyOrderState: OrderState;
- simulatedProgress?: SimulatedProgress;
}
const mapStateToProps = (state: State, _ownProps: {}): ConnectedState => ({
buyOrderState: state.buyOrderState,
});
-export const SelectedAssetProgress = connect(mapStateToProps)(SelectedAssetSimulatedProgressComponent);
+export const SelectedAssetProgress = connect(mapStateToProps)(BuyOrderProgress);