2017-09-25 02:06:28 +00:00
|
|
|
import { TShowNotification } from 'actions/notifications';
|
2017-07-31 23:14:30 +00:00
|
|
|
import bityConfig from 'config/bity';
|
2017-09-25 02:06:28 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import translate, { translateRaw } from 'translations';
|
|
|
|
import './SwapProgress.scss';
|
2017-07-31 23:14:30 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
export interface Props {
|
2017-12-11 17:44:53 +00:00
|
|
|
destinationId: string;
|
|
|
|
originId: string;
|
2017-09-25 02:06:28 +00:00
|
|
|
destinationAddress: string;
|
|
|
|
outputTx: string;
|
|
|
|
orderStatus: string | null;
|
2017-07-31 23:14:30 +00:00
|
|
|
// actions
|
2017-09-25 02:06:28 +00:00
|
|
|
showNotification: TShowNotification;
|
|
|
|
}
|
2017-07-31 23:14:30 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
interface State {
|
|
|
|
hasShownViewTx: boolean;
|
|
|
|
}
|
|
|
|
export default class SwapProgress extends Component<Props, State> {
|
|
|
|
public state = {
|
|
|
|
hasShownViewTx: false
|
|
|
|
};
|
2017-07-31 23:14:30 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public componentDidMount() {
|
|
|
|
this.showSwapNotification();
|
2017-07-31 23:14:30 +00:00
|
|
|
}
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public showSwapNotification = () => {
|
2017-07-31 23:14:30 +00:00
|
|
|
const { hasShownViewTx } = this.state;
|
2017-12-11 17:44:53 +00:00
|
|
|
const { destinationId, outputTx, showNotification, orderStatus } = this.props;
|
2017-07-31 23:14:30 +00:00
|
|
|
|
|
|
|
if (orderStatus === 'FILL') {
|
|
|
|
if (!hasShownViewTx) {
|
2017-12-19 22:46:34 +00:00
|
|
|
let linkElement: React.ReactElement<HTMLAnchorElement>;
|
2017-07-31 23:14:30 +00:00
|
|
|
let link;
|
2017-09-25 02:06:28 +00:00
|
|
|
const notificationMessage = translateRaw('SUCCESS_3') + outputTx;
|
2017-07-31 23:14:30 +00:00
|
|
|
// everything but BTC is a token
|
2017-12-11 17:44:53 +00:00
|
|
|
if (destinationId !== 'BTC') {
|
2017-09-05 20:07:28 +00:00
|
|
|
link = bityConfig.ETHTxExplorer(outputTx);
|
2017-08-28 18:05:38 +00:00
|
|
|
linkElement = (
|
|
|
|
<a href={link} target="_blank" rel="noopener">
|
2017-08-31 15:56:49 +00:00
|
|
|
${notificationMessage}
|
2017-08-28 18:05:38 +00:00
|
|
|
</a>
|
|
|
|
);
|
2017-07-31 23:14:30 +00:00
|
|
|
// BTC uses a different explorer
|
|
|
|
} else {
|
2017-09-05 20:07:28 +00:00
|
|
|
link = bityConfig.BTCTxExplorer(outputTx);
|
2017-08-28 18:05:38 +00:00
|
|
|
linkElement = (
|
|
|
|
<a href={link} target="_blank" rel="noopener">
|
2017-08-31 15:56:49 +00:00
|
|
|
${notificationMessage}
|
2017-08-28 18:05:38 +00:00
|
|
|
</a>
|
|
|
|
);
|
2017-07-31 23:14:30 +00:00
|
|
|
}
|
|
|
|
this.setState({ hasShownViewTx: true }, () => {
|
|
|
|
showNotification('success', linkElement);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public computedClass = (step: number) => {
|
2017-07-31 23:14:30 +00:00
|
|
|
const { orderStatus } = this.props;
|
|
|
|
|
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
|
|
|
let cssClass = 'SwapProgress-item';
|
2017-07-31 23:14:30 +00:00
|
|
|
|
|
|
|
switch (orderStatus) {
|
|
|
|
case 'OPEN':
|
|
|
|
if (step < 2) {
|
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 cssClass + ' is-complete';
|
2017-07-31 23:14:30 +00:00
|
|
|
} else if (step === 2) {
|
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 cssClass + ' is-active';
|
2017-07-31 23:14:30 +00:00
|
|
|
} else {
|
|
|
|
return cssClass;
|
|
|
|
}
|
|
|
|
case 'RCVE':
|
|
|
|
if (step < 4) {
|
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 cssClass + ' is-complete';
|
2017-07-31 23:14:30 +00:00
|
|
|
} else if (step === 4) {
|
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 cssClass + ' is-active';
|
2017-07-31 23:14:30 +00:00
|
|
|
} else {
|
|
|
|
return cssClass;
|
|
|
|
}
|
|
|
|
case 'FILL':
|
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
|
|
|
cssClass += ' is-complete';
|
2017-07-31 23:14:30 +00:00
|
|
|
return cssClass;
|
|
|
|
case 'CANC':
|
|
|
|
return cssClass;
|
|
|
|
default:
|
|
|
|
return cssClass;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
public render() {
|
2017-12-11 17:44:53 +00:00
|
|
|
const { originId, destinationId } = this.props;
|
|
|
|
const numberOfConfirmations = originId === 'BTC' ? '3' : '10';
|
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
|
|
|
const steps = [
|
|
|
|
// 1
|
|
|
|
translate('SWAP_progress_1'),
|
|
|
|
// 2
|
2017-09-25 02:06:28 +00:00
|
|
|
<span key="1">
|
2017-12-11 17:44:53 +00:00
|
|
|
{translate('SWAP_progress_2')} {originId}...
|
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
|
|
|
</span>,
|
|
|
|
// 3
|
2017-09-25 02:06:28 +00:00
|
|
|
<span key="2">
|
2017-12-11 17:44:53 +00:00
|
|
|
{originId} {translate('SWAP_progress_3')}
|
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
|
|
|
</span>,
|
|
|
|
// 4 TODO: Translate me
|
2017-09-25 02:06:28 +00:00
|
|
|
<span key="3">
|
2017-12-11 17:44:53 +00:00
|
|
|
Sending your {destinationId}
|
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
|
|
|
<br />
|
|
|
|
<small>Waiting for {numberOfConfirmations} confirmations...</small>
|
|
|
|
</span>,
|
|
|
|
// 5
|
|
|
|
translate('SWAP_progress_5')
|
|
|
|
];
|
|
|
|
|
2017-07-31 23:14:30 +00:00
|
|
|
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
|
|
|
<section className="SwapProgress">
|
|
|
|
<div className="SwapProgress-track" />
|
2017-07-31 23:14:30 +00:00
|
|
|
|
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
|
|
|
{steps.map((text, idx) => {
|
|
|
|
return (
|
|
|
|
<div key={idx} className={this.computedClass(idx + 1)}>
|
|
|
|
<div className={`SwapProgress-item-circle position-${idx + 1}`}>
|
2017-12-11 17:44:53 +00:00
|
|
|
<span className="SwapProgress-item-circle-number">{idx + 1}</span>
|
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>
|
2017-09-25 02:06:28 +00:00
|
|
|
<p className="SwapProgress-item-text">{text}</p>
|
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>
|
|
|
|
);
|
|
|
|
})}
|
2017-07-31 23:14:30 +00:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|