// @flow
import './SwapInfoHeader.scss';
import React, { Component } from 'react';
import translate from 'translations';
import type { RestartSwapAction } from 'actions/swapTypes';
import bityLogo from 'assets/images/logo-bity.svg';
import { bityReferralURL } from 'config/data';
import { toFixedIfLarger } from 'utils/formatters';
export type SwapInfoHeaderTitleProps = {
restartSwap: () => RestartSwapAction
};
class SwapInfoHeaderTitle extends Component {
props: SwapInfoHeaderTitleProps;
render() {
return (
{translate('SWAP_information')}
);
}
}
export type SwapInfoHeaderProps = {
originAmount: number,
originKind: string,
destinationKind: string,
destinationAmount: number,
reference: string,
secondsRemaining: ?number,
restartSwap: () => RestartSwapAction
};
export default class SwapInfoHeader extends Component {
props: SwapInfoHeaderProps;
computedOriginDestinationRatio = () => {
return this.props.destinationAmount / this.props.originAmount;
};
isExpanded = () => {
const { reference, restartSwap } = this.props;
return reference && restartSwap;
};
computedClass = () => {
if (this.isExpanded()) {
return 'SwapInfo-details-block col-sm-3';
} else {
return 'SwapInfo-details-block col-sm-4';
}
};
formattedTime = () => {
const { secondsRemaining } = this.props;
if (secondsRemaining || secondsRemaining === 0) {
let minutes = Math.floor(secondsRemaining / 60);
let seconds = secondsRemaining - minutes * 60;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return minutes + ':' + seconds;
} else {
throw Error('secondsRemaining must be a number');
}
};
render() {
const {
reference,
originAmount,
destinationAmount,
originKind,
destinationKind,
restartSwap
} = this.props;
return (
{/*Amount to send*/}
{!this.isExpanded() &&
{` ${originAmount} ${originKind}`}
{translate('SEND_amount')}
}
{/*Reference Number*/}
{this.isExpanded() &&
{reference}
{translate('SWAP_ref_num')}
}
{/*Time remaining*/}
{this.isExpanded() &&
{this.formattedTime()}
{translate('SWAP_time')}
}
{/*Amount to Receive*/}
{` ${destinationAmount} ${destinationKind}`}
{translate('SWAP_rec_amt')}
{/*Your rate*/}
{`${toFixedIfLarger(
this.computedOriginDestinationRatio()
)} ${originKind}/${destinationKind}`}
{translate('SWAP_your_rate')}
);
}
}