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

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<Props, State> {
  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: React.ReactElement<HTMLAnchorElement>;
        let link;
        const notificationMessage = translateRaw('SUCCESS_3') + outputTx;
        // everything but BTC is a token
        if (destinationId !== 'BTC') {
          link = bityConfig.ETHTxExplorer(outputTx);
          linkElement = (
            <a href={link} target="_blank" rel="noopener">
              ${notificationMessage}
            </a>
          );
          // BTC uses a different explorer
        } else {
          link = bityConfig.BTCTxExplorer(outputTx);
          linkElement = (
            <a href={link} target="_blank" rel="noopener">
              ${notificationMessage}
            </a>
          );
        }
        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
      <span key="1">
        {translate('SWAP_progress_2')} {originId}...
      </span>,
      // 3
      <span key="2">
        {originId} {translate('SWAP_progress_3')}
      </span>,
      // 4 TODO: Translate me
      <span key="3">
        Sending your {destinationId}
        <br />
        <small>Waiting for {numberOfConfirmations} confirmations...</small>
      </span>,
      // 5
      translate('SWAP_progress_5')
    ];

    return (
      <section className="SwapProgress">
        <div className="SwapProgress-track" />

        {steps.map((text, idx) => {
          return (
            <div key={idx} className={this.computedClass(idx + 1)}>
              <div className={`SwapProgress-item-circle position-${idx + 1}`}>
                <span className="SwapProgress-item-circle-number">{idx + 1}</span>
              </div>
              <p className="SwapProgress-item-text">{text}</p>
            </div>
          );
        })}
      </section>
    );
  }
}