MyCrypto/common/containers/Tabs/Swap/components/PartThree.tsx

95 lines
2.1 KiB
TypeScript

import { TShowNotification } from 'actions/notifications';
import {
TRestartSwap,
TStartOrderTimerSwap,
TStartPollBityOrderStatus,
TStopOrderTimerSwap,
TStopPollBityOrderStatus
} from 'actions/swap';
import React, { Component } from 'react';
import BitcoinQR from './BitcoinQR';
import PaymentInfo from './PaymentInfo';
import SwapProgress from './SwapProgress';
interface ReduxStateProps {
destinationAddress: string;
destinationKind: string;
originKind: string;
originAmount: number | null;
destinationAmount: number | null;
reference: string;
secondsRemaining: number | null;
paymentAddress: string | null;
orderStatus: string | null;
outputTx: any;
}
interface ReduxActionProps {
restartSwap: TRestartSwap;
startOrderTimerSwap: TStartOrderTimerSwap;
startPollBityOrderStatus: TStartPollBityOrderStatus;
stopOrderTimerSwap: TStopOrderTimerSwap;
stopPollBityOrderStatus: TStopPollBityOrderStatus;
showNotification: TShowNotification;
}
export default class PartThree extends Component<
ReduxActionProps & ReduxStateProps,
{}
> {
public componentDidMount() {
this.props.startPollBityOrderStatus();
this.props.startOrderTimerSwap();
}
public componentWillUnmount() {
this.props.stopOrderTimerSwap();
this.props.stopPollBityOrderStatus();
}
public render() {
const {
// STATE
originAmount,
originKind,
destinationKind,
paymentAddress,
orderStatus,
destinationAddress,
outputTx,
destinationAmount,
// ACTIONS
showNotification
} = this.props;
const SwapProgressProps = {
originKind,
destinationKind,
orderStatus,
showNotification,
destinationAddress,
outputTx
};
const PaymentInfoProps = {
originKind,
originAmount,
paymentAddress
};
const BitcoinQRProps = {
paymentAddress,
amount: destinationAmount
};
return (
<div>
<SwapProgress {...SwapProgressProps} />
<PaymentInfo {...PaymentInfoProps} />
{orderStatus === 'OPEN' &&
originKind === 'BTC' && <BitcoinQR {...BitcoinQRProps} />}
</div>
);
}
}