import { TShowNotification } from 'actions/notifications'; import bityConfig from 'config/bity'; import React, { Component } from 'react'; import translate, { translateRaw } from 'translations'; import './SwapProgress.scss'; export interface Props { destinationId: string; originId: string; destinationAddress: string; outputTx: string; orderStatus: string | null; // actions showNotification: TShowNotification; } interface State { hasShownViewTx: boolean; } export default class SwapProgress extends Component { public state = { hasShownViewTx: false }; public componentDidMount() { this.showSwapNotification(); } public showSwapNotification = () => { const { hasShownViewTx } = this.state; const { destinationId, outputTx, showNotification, orderStatus } = this.props; if (orderStatus === 'FILL') { if (!hasShownViewTx) { let linkElement; 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 { orderStatus } = this.props; let cssClass = 'SwapProgress-item'; switch (orderStatus) { case 'OPEN': if (step < 2) { return cssClass + ' is-complete'; } else if (step === 2) { return cssClass + ' is-active'; } else { return cssClass; } case 'RCVE': if (step < 4) { return cssClass + ' is-complete'; } else if (step === 4) { return cssClass + ' is-active'; } else { return cssClass; } case 'FILL': cssClass += ' is-complete'; return cssClass; 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')} {originId}... , // 3 {originId} {translate('SWAP_progress_3')} , // 4 TODO: Translate me Sending your {destinationId}
Waiting for {numberOfConfirmations} confirmations...
, // 5 translate('SWAP_progress_5') ]; return (
{steps.map((text, idx) => { return (
{idx + 1}

{text}

); })}
); } }