+
+
+ {has_error_or_not_loaded
+ ? basis
+ : localize('[_1]', proposal_info.obj_contract_basis.text)
+ }
- :
-
-
-
- {has_error_or_not_loaded
- ? basis
- : localize('[_1]', proposal_info.obj_contract_basis.text)
- }
-
-
- {!has_error_or_not_loaded &&
-
- }
-
- {is_visible &&
-
- {(!has_error_or_not_loaded && has_increased !== null) &&
-
- }
-
- }
-
-
+
+ {!has_error_or_not_loaded &&
+
+ }
- }
-
+ {is_visible &&
+
+ {(!has_error_or_not_loaded && has_increased !== null) &&
+
+ }
+
+ }
+
+
+
);
};
ContractInfo.propTypes = {
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss
index 5e45fcca87604..222e61600023f 100644
--- a/src/sass/app_2/modules/trading.scss
+++ b/src/sass/app_2/modules/trading.scss
@@ -67,16 +67,6 @@
}
}
}
- &__loader {
- width: 92px;
- height: 8px;
- margin: 3.5px 0;
- @extend .loader;
-
- &--loading {
- @extend .loader--loading;
- }
- }
&__error {
justify-content: center;
align-items: center;
@@ -144,11 +134,26 @@
}
}
}
+ &--animated--slide {
+ width: 92px;
+ height: 8px;
+ margin: 3.5px 0;
+ @extend .loader;
+
+ .trade-container__price-info-basis {
+ @extend .loader--loading;
+ }
+ }
+ &--animated--fade &-value {
+ opacity: 0;
+ }
&-value {
@include typeface(--small-left-bold-black);
@include themify($themes) {
color: themed('text_color');
}
+ opacity: 1;
+ transition: 0.3s;
}
&-basis {
@include typeface(--paragraph-left-normal-black);
@@ -489,7 +494,7 @@
}
&--animated--fade-show .btn-purchase__info--right .btn-purchase__text {
opacity: 1;
- transition: 1s;
+ transition: 0.3s;
}
&__shadow-wrapper:hover:after {
opacity: 0;
From 1b02ff73dfc6d1cbce577f0afac0ee0817e07554 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 15:39:47 +0800
Subject: [PATCH 08/13] fix button bobbing
---
.../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++--
src/sass/app_2/modules/trading.scss | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index c34726d2a66eb..a5a841b791d1b 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && is_param_change,
+ 'trade-container__price-info--animated--fade' : is_loading && !is_param_change,
})}
>
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss
index 222e61600023f..93f94e56594ff 100644
--- a/src/sass/app_2/modules/trading.scss
+++ b/src/sass/app_2/modules/trading.scss
@@ -137,7 +137,7 @@
&--animated--slide {
width: 92px;
height: 8px;
- margin: 3.5px 0;
+ margin: 6.5px 0;
@extend .loader;
.trade-container__price-info-basis {
From 7e9c4c61ad374f0fa8e3c578777def070e16d355 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 15:41:48 +0800
Subject: [PATCH 09/13] fix only show slide when first load
---
.../Trading/Components/Form/Purchase/contract-info.jsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index a5a841b791d1b..c34726d2a66eb 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && !is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
+ 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
})}
>
From 9a4ef91dc4937de166d618fb0186ba3c1be6aa98 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 16:39:36 +0800
Subject: [PATCH 10/13] is_param_change -> should_fade
---
.../Trading/Components/Elements/purchase-button.jsx | 12 ++++++------
.../Components/Elements/purchase-fieldset.jsx | 10 +++++-----
.../Components/Form/Purchase/contract-info.jsx | 6 +++---
3 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
index 7823ceff7978c..a8fae0449ab9e 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -12,12 +12,12 @@ const PurchaseButton = ({
is_disabled,
is_high_low,
is_loading,
- is_param_change,
+ should_fade,
onClickPurchase,
type,
}) => {
const getIconType = () => {
- if (!is_param_change && is_loading) return '';
+ if (!should_fade && is_loading) return '';
return (is_high_low) ? `${type.toLowerCase()}_barrier` : type.toLowerCase();
};
@@ -29,9 +29,9 @@ const PurchaseButton = ({
'btn-purchase',
{
'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
- 'btn-purchase--animated--slide' : !is_param_change && is_loading,
- 'btn-purchase--animated--fade' : is_param_change && is_loading,
- 'btn-purchase--animated--fade-show': is_param_change && !is_loading,
+ 'btn-purchase--animated--slide' : !should_fade && is_loading,
+ 'btn-purchase--animated--fade' : should_fade && is_loading,
+ 'btn-purchase--animated--fade-show': should_fade && !is_loading,
})}
has_effect
onClick={() => { onClickPurchase(info.id, info.stake, type); }}
@@ -46,7 +46,7 @@ const PurchaseButton = ({
- {(!is_param_change && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
+ {(!should_fade && is_loading) ? '' : localize('[_1]', getContractTypeDisplay(type, is_high_low))}
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
index a4bbb9b2645c3..28d8a3a90bbc1 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
@@ -11,11 +11,11 @@ import PurchaseButton from 'Modules/Trading/Components/Elements/purchase-button.
class PurchaseFieldset extends React.PureComponent {
state = {
- show_tooltip : false,
- is_param_change: false,
+ show_tooltip: false,
+ should_fade : false,
}
- componentDidUpdate = () => this.setState({ is_param_change: true });
+ componentDidUpdate = () => this.setState({ should_fade: true });
onMouseEnter = () => this.setState({ show_tooltip: true });
onMouseLeave = () => this.setState({ show_tooltip: false });
@@ -47,7 +47,7 @@ class PurchaseFieldset extends React.PureComponent {
is_high_low={is_high_low}
is_loading={is_loading}
onClickPurchase={onClickPurchase}
- is_param_change={this.state.is_param_change}
+ should_fade={this.state.should_fade}
type={type}
/>
);
@@ -66,7 +66,7 @@ class PurchaseFieldset extends React.PureComponent {
proposal_info={info}
has_increased={info.has_increased}
is_loading={is_loading}
- is_param_change={this.state.is_param_change}
+ should_fade={this.state.should_fade}
is_visible={!is_contract_mode}
/>
{
@@ -23,8 +23,8 @@ const ContractInfo = ({
'trade-container__price-info',
{
'trade-container__price-info--disabled' : has_error_or_not_loaded,
- 'trade-container__price-info--animated--slide': is_loading && !is_param_change,
- 'trade-container__price-info--animated--fade' : is_loading && is_param_change,
+ 'trade-container__price-info--animated--slide': is_loading && !should_fade,
+ 'trade-container__price-info--animated--fade' : is_loading && should_fade,
})}
>
From e9ccb9d35d3d1b15c36cf9b74591185921fe78f3 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 17:18:23 +0800
Subject: [PATCH 11/13] refactor
---
.../Components/Elements/purchase-button.jsx | 5 ++---
.../Components/Elements/purchase-fieldset.jsx | 5 ++++-
.../Components/Form/Purchase/contract-info.jsx | 6 +++---
src/sass/app_2/modules/trading.scss | 15 ++++++++-------
4 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
index a8fae0449ab9e..03efa8b1c3c6d 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -29,9 +29,8 @@ const PurchaseButton = ({
'btn-purchase',
{
'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
- 'btn-purchase--animated--slide' : !should_fade && is_loading,
- 'btn-purchase--animated--fade' : should_fade && is_loading,
- 'btn-purchase--animated--fade-show': should_fade && !is_loading,
+ 'btn-purchase--animated--slide' : is_loading && !should_fade,
+ 'btn-purchase--animated--fade' : is_loading && should_fade,
})}
has_effect
onClick={() => { onClickPurchase(info.id, info.stake, type); }}
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
index 28d8a3a90bbc1..70b661b0c58aa 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-fieldset.jsx
@@ -15,7 +15,10 @@ class PurchaseFieldset extends React.PureComponent {
should_fade : false,
}
- componentDidUpdate = () => this.setState({ should_fade: true });
+ componentDidMount() {
+ this.setState({ should_fade: true });
+ }
+
onMouseEnter = () => this.setState({ show_tooltip: true });
onMouseLeave = () => this.setState({ show_tooltip: false });
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index 5eac0ccb3c6c0..98f0899179bc8 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -22,9 +22,9 @@ const ContractInfo = ({
diff --git a/src/sass/app_2/modules/trading.scss b/src/sass/app_2/modules/trading.scss
index 93f94e56594ff..f107ee4110ff1 100644
--- a/src/sass/app_2/modules/trading.scss
+++ b/src/sass/app_2/modules/trading.scss
@@ -134,7 +134,7 @@
}
}
}
- &--animated--slide {
+ &--slide {
width: 92px;
height: 8px;
margin: 6.5px 0;
@@ -144,7 +144,7 @@
@extend .loader--loading;
}
}
- &--animated--fade &-value {
+ &--fade &-value {
opacity: 0;
}
&-value {
@@ -411,6 +411,11 @@
float: right;
justify-content: right;
background-color: transparent;
+
+ .btn-purchase__text {
+ opacity: 1;
+ transition: 0.3s;
+ }
}
&__effect-detail {
width: 0;
@@ -489,13 +494,9 @@
}
}
}
- &--animated--fade .btn-purchase__info--right .btn-purchase__text {
+ &--animated--fade &__info--right &__text {
opacity: 0;
}
- &--animated--fade-show .btn-purchase__info--right .btn-purchase__text {
- opacity: 1;
- transition: 0.3s;
- }
&__shadow-wrapper:hover:after {
opacity: 0;
}
From 7f6fcd01d0223f4402512733b8a1520a65576902 Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Tue, 30 Apr 2019 17:23:08 +0800
Subject: [PATCH 12/13] fix linting issue
---
.../Modules/Trading/Components/Elements/purchase-button.jsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
index 03efa8b1c3c6d..0963a5e38f380 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Elements/purchase-button.jsx
@@ -28,9 +28,9 @@ const PurchaseButton = ({
className={classNames(
'btn-purchase',
{
- 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
- 'btn-purchase--animated--slide' : is_loading && !should_fade,
- 'btn-purchase--animated--fade' : is_loading && should_fade,
+ 'btn-purchase--disabled' : (is_contract_mode || is_disabled) && !is_loading,
+ 'btn-purchase--animated--slide': is_loading && !should_fade,
+ 'btn-purchase--animated--fade' : is_loading && should_fade,
})}
has_effect
onClick={() => { onClickPurchase(info.id, info.stake, type); }}
From 3dd9a3355e885c3eb0aa8e023b17a248f740becb Mon Sep 17 00:00:00 2001
From: brandon <26451183+ahkuma@users.noreply.github.com>
Date: Thu, 2 May 2019 14:12:01 +0800
Subject: [PATCH 13/13] fix wrong basis name issue
---
.../Form/Purchase/contract-info.jsx | 30 +++++++++++++------
1 file changed, 21 insertions(+), 9 deletions(-)
diff --git a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
index 98f0899179bc8..314715874cacf 100644
--- a/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
+++ b/src/javascript/app_2/Modules/Trading/Components/Form/Purchase/contract-info.jsx
@@ -1,10 +1,11 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { localize } from '_common/localize';
-import Money from 'App/Components/Elements/money.jsx';
-import Tooltip from 'App/Components/Elements/tooltip.jsx';
-import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getLocalizedBasis } from 'Stores/Modules/Trading/Constants/contract';
+import { localize } from '_common/localize';
+import Money from 'App/Components/Elements/money.jsx';
+import Tooltip from 'App/Components/Elements/tooltip.jsx';
+import { IconPriceMove } from 'Assets/Trading/icon-price-move.jsx';
const ContractInfo = ({
basis,
@@ -15,8 +16,19 @@ const ContractInfo = ({
is_visible,
proposal_info,
}) => {
- const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id;
+ const localized_basis = getLocalizedBasis();
+ const basisOrPayout = () => {
+ switch (basis) {
+ case 'stake':
+ return localized_basis.payout;
+ case 'payout':
+ return localized_basis.stake;
+ default:
+ return basis;
+ }
+ };
+ const has_error_or_not_loaded = proposal_info.has_error || !proposal_info.id;
return (
{has_error_or_not_loaded
- ? basis
+ ? basisOrPayout()
: localize('[_1]', proposal_info.obj_contract_basis.text)
}