import { TShowNotification } from 'actions/notifications'; import { bityConfig } from 'config/bity'; import React, { PureComponent } from 'react'; import translate, { translateRaw } from 'translations'; import './SwapProgress.scss'; export interface Props { destinationId: string; originId: string; destinationAddress: string; outputTx: string; provider: string; bityOrderStatus: string | null; shapeshiftOrderStatus: string | null; // actions showNotification: TShowNotification; } interface State { hasShownViewTx: boolean; } export default class SwapProgress extends PureComponent { public state = { hasShownViewTx: false }; public componentDidMount() { this.showSwapNotification(); } public showSwapNotification = () => { const { hasShownViewTx } = this.state; const { destinationId, outputTx, showNotification, provider, bityOrderStatus, shapeshiftOrderStatus } = this.props; const isShapeshift = provider === 'shapeshift'; if (isShapeshift ? shapeshiftOrderStatus === 'complete' : bityOrderStatus === 'FILL') { if (!hasShownViewTx) { let linkElement: React.ReactElement; let link; const notificationMessage = translateRaw('SUCCESS_3') + outputTx; // everything but BTC is a token if (destinationId !== 'BTC') { link = bityConfig.ETHTxExplorer(outputTx); linkElement = ( {notificationMessage} ); // BTC uses a different explorer } else { link = bityConfig.BTCTxExplorer(outputTx); linkElement = ( {notificationMessage} ); } this.setState({ hasShownViewTx: true }, () => { showNotification('success', linkElement); }); } } }; public computedClass = (step: number) => { const { bityOrderStatus, shapeshiftOrderStatus } = this.props; let cssClass = 'SwapProgress-item'; const orderStatus = bityOrderStatus || shapeshiftOrderStatus; switch (orderStatus) { case 'no_deposits': case 'OPEN': if (step < 2) { return cssClass + ' is-complete'; } else if (step === 2) { return cssClass + ' is-active'; } else { return cssClass; } case 'received': case 'RCVE': if (step < 4) { return cssClass + ' is-complete'; } else if (step === 4) { return cssClass + ' is-active'; } else { return cssClass; } case 'complete': case 'FILL': cssClass += ' is-complete'; return cssClass; case 'failed': case 'CANC': return cssClass; default: return cssClass; } }; public render() { const { originId, destinationId } = this.props; const numberOfConfirmations = originId === 'BTC' ? '3' : '10'; const steps = [ // 1 translate('SWAP_PROGRESS_1'), // 2 {translate('SWAP_PROGRESS_2', { $origin_id: originId })}, // 3 {translate('SWAP_PROGRESS_3', { $origin_id: originId })}, // 4 TODO: Translate me {translate('SWAP_PROGRESS_4', { $destination_id: destinationId })}
{translate('SWAP_PROGRESS_CONFIRMATIONS', { $number_confirmations: numberOfConfirmations })}
, // 5 translate('SWAP_PROGRESS_5') ]; return (
{steps.map((text, idx) => { return (
{idx + 1}

{text}

); })}
); } }