2017-09-25 02:06:28 +00:00
|
|
|
import { RestartSwapAction } from 'actions/swap';
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import translate from 'translations';
|
2017-07-31 23:14:30 +00:00
|
|
|
import { toFixedIfLarger } from 'utils/formatters';
|
2017-09-25 02:06:28 +00:00
|
|
|
import './SwapInfoHeader.scss';
|
|
|
|
import SwapInfoHeaderTitle from './SwapInfoHeaderTitle';
|
2017-07-31 23:14:30 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
export interface SwapInfoHeaderProps {
|
|
|
|
originAmount: number | null;
|
|
|
|
originKind: string;
|
|
|
|
destinationKind: string;
|
|
|
|
destinationAmount: number | null;
|
|
|
|
reference: string;
|
|
|
|
secondsRemaining: number | null;
|
|
|
|
restartSwap(): RestartSwapAction;
|
2017-07-31 23:14:30 +00:00
|
|
|
}
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
export default class SwapInfoHeader extends Component<SwapInfoHeaderProps, {}> {
|
|
|
|
public computedOriginDestinationRatio = () => {
|
|
|
|
if (!this.props.originAmount || !this.props.destinationAmount) {
|
|
|
|
return;
|
|
|
|
}
|
2017-07-31 23:14:30 +00:00
|
|
|
return this.props.destinationAmount / this.props.originAmount;
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public isExpanded = () => {
|
2017-07-31 23:14:30 +00:00
|
|
|
const { reference, restartSwap } = this.props;
|
|
|
|
return reference && restartSwap;
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public computedClass = () => {
|
2017-07-31 23:14:30 +00:00
|
|
|
if (this.isExpanded()) {
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
return 'SwapInfo-details-block col-sm-3';
|
2017-07-31 23:14:30 +00:00
|
|
|
} else {
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
return 'SwapInfo-details-block col-sm-4';
|
2017-07-31 23:14:30 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public formattedTime = () => {
|
2017-07-31 23:14:30 +00:00
|
|
|
const { secondsRemaining } = this.props;
|
|
|
|
if (secondsRemaining || secondsRemaining === 0) {
|
2017-09-25 02:06:28 +00:00
|
|
|
const minutes = Math.floor(secondsRemaining / 60);
|
|
|
|
const seconds = secondsRemaining - minutes * 60;
|
|
|
|
const stringMinutes = minutes < 10 ? '0' + minutes : minutes;
|
|
|
|
const stringSeconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
|
return stringMinutes + ':' + stringSeconds;
|
2017-07-31 23:14:30 +00:00
|
|
|
} else {
|
|
|
|
throw Error('secondsRemaining must be a number');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public render() {
|
|
|
|
const computedOriginDestinationRatio = this.computedOriginDestinationRatio();
|
2017-07-31 23:14:30 +00:00
|
|
|
const {
|
|
|
|
reference,
|
|
|
|
originAmount,
|
|
|
|
destinationAmount,
|
|
|
|
originKind,
|
|
|
|
destinationKind,
|
|
|
|
restartSwap
|
|
|
|
} = this.props;
|
|
|
|
return (
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<div className="SwapInfo">
|
2017-07-31 23:14:30 +00:00
|
|
|
<SwapInfoHeaderTitle restartSwap={restartSwap} />
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<section className="SwapInfo-details row">
|
2017-07-31 23:14:30 +00:00
|
|
|
{/*Amount to send*/}
|
2017-09-25 02:06:28 +00:00
|
|
|
{!this.isExpanded() && (
|
2017-07-31 23:14:30 +00:00
|
|
|
<div className={this.computedClass()}>
|
2017-11-15 05:51:09 +00:00
|
|
|
<h3 className="SwapInfo-details-block-value">{` ${originAmount} ${
|
|
|
|
originKind
|
|
|
|
}`}</h3>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<p className="SwapInfo-details-block-label">
|
2017-07-31 23:14:30 +00:00
|
|
|
{translate('SEND_amount')}
|
|
|
|
</p>
|
2017-09-25 02:06:28 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2017-07-31 23:14:30 +00:00
|
|
|
|
|
|
|
{/*Reference Number*/}
|
2017-09-25 02:06:28 +00:00
|
|
|
{this.isExpanded() && (
|
2017-07-31 23:14:30 +00:00
|
|
|
<div className={this.computedClass()}>
|
2017-09-25 02:06:28 +00:00
|
|
|
<h3 className="SwapInfo-details-block-value">{reference}</h3>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<p className="SwapInfo-details-block-label">
|
2017-07-31 23:14:30 +00:00
|
|
|
{translate('SWAP_ref_num')}
|
|
|
|
</p>
|
2017-09-25 02:06:28 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2017-07-31 23:14:30 +00:00
|
|
|
|
|
|
|
{/*Time remaining*/}
|
2017-09-25 02:06:28 +00:00
|
|
|
{this.isExpanded() && (
|
2017-07-31 23:14:30 +00:00
|
|
|
<div className={this.computedClass()}>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<h3 className="SwapInfo-details-block-value">
|
2017-07-31 23:14:30 +00:00
|
|
|
{this.formattedTime()}
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
</h3>
|
|
|
|
<p className="SwapInfo-details-block-label">
|
2017-07-31 23:14:30 +00:00
|
|
|
{translate('SWAP_time')}
|
|
|
|
</p>
|
2017-09-25 02:06:28 +00:00
|
|
|
</div>
|
|
|
|
)}
|
2017-07-31 23:14:30 +00:00
|
|
|
|
|
|
|
{/*Amount to Receive*/}
|
|
|
|
<div className={this.computedClass()}>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<h3 className="SwapInfo-details-block-value">
|
2017-07-31 23:14:30 +00:00
|
|
|
{` ${destinationAmount} ${destinationKind}`}
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
</h3>
|
|
|
|
<p className="SwapInfo-details-block-label">
|
2017-07-31 23:14:30 +00:00
|
|
|
{translate('SWAP_rec_amt')}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/*Your rate*/}
|
|
|
|
<div className={this.computedClass()}>
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
<h3 className="SwapInfo-details-block-value">
|
2017-09-25 02:06:28 +00:00
|
|
|
{`${computedOriginDestinationRatio &&
|
2017-11-15 05:51:09 +00:00
|
|
|
toFixedIfLarger(computedOriginDestinationRatio)} ${
|
|
|
|
destinationKind
|
|
|
|
}/${originKind}`}
|
v3 Style Import (#151)
* Convert bootstrap to sass instead of checked in and less
* Darken body, adjust header.
* First pass at tab styles, each tab will need a lot of individual love tho.
* Update footer to main site content, improve responsiveness.
* Missing key added.
* Fix dropdowns.
* Convert GenerateWallet HTML over, still needs styling.
* Send form.
* Current rates styled.
* CurrencySwap form styles.
* SwapInfoHeader styled.
* Finish up swap restyling, minor usability improvements for mobile.
* Fix up notifications / alert customizations
* Import v3 variables.
* Fix notification spacing.
* Align input height base with buttons.
* Revert height base, add additional bootstrap overrides.
* Grid overrides.
* Move overrides to their own folder. Adjust naming.
* Fix inconsistencies.
* Style generate wallet pt 1.
* Style generate wallet pt 2
* Style generate wallet pt 3
* Fix swap
* Added some missing overries, fixed the fallout.
* Remove header text, indicate alpha version.
* Fix radio / checkbox weights.
* Bind => arrow
* Convert simpledropdown to proper form select, instead of weirdly implemented nonfuncitoning dropdown.
* Fix token balances buttons, footr icons.
2017-09-05 19:52:01 +00:00
|
|
|
</h3>
|
|
|
|
<p className="SwapInfo-details-block-label">
|
2017-07-31 23:14:30 +00:00
|
|
|
{translate('SWAP_your_rate')}
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|