- {Object.entries(fields).map(renderFields)}
+ {Object.entries(fields)
+ .filter(([key]) => key !== 'postOnly')
+ .map(renderFields)}
+ {hasPostOnly && (
+
+
+ {STRINGS['ORDER_ENTRY_ADVANCED']}
+
+ }
+ key="1"
+ >
+ {Object.entries(fields)
+ .filter(([key]) => key === 'postOnly')
+ .map(renderFields)}
+
+
+ )}
{errorText && (
{errorText}
@@ -80,7 +102,7 @@ const Form = ({
currencyName
).join(' ')}
disabled={submitting || !valid || !!errorText || !isLoggedIn()}
- className={classnames('trade_order_entry-form-action')}
+ className={classnames('trade_order_entry-form-action', 'mb-1')}
/>
diff --git a/web/src/containers/Trade/components/_OrderEntry.scss b/web/src/containers/Trade/components/_OrderEntry.scss
index 4e4a876047..4ad1897b50 100644
--- a/web/src/containers/Trade/components/_OrderEntry.scss
+++ b/web/src/containers/Trade/components/_OrderEntry.scss
@@ -105,7 +105,16 @@
}
.trade_order_entry-form_fields-wrapper {
- margin-bottom: 0.5rem !important;
+ margin-bottom: 0.2rem !important;
+ .ant-collapse-header {
+ text-align: right;
+ color: $colors-black;
+ padding: 0;
+ font-size: $font-size-mobile-txt;
+ }
+ .ant-collapse-content-box {
+ padding: 0;
+ }
}
}
diff --git a/web/src/containers/TransactionsHistory/_TransactionsHistory.scss b/web/src/containers/TransactionsHistory/_TransactionsHistory.scss
index 1101bed94b..7a41c93394 100644
--- a/web/src/containers/TransactionsHistory/_TransactionsHistory.scss
+++ b/web/src/containers/TransactionsHistory/_TransactionsHistory.scss
@@ -57,6 +57,31 @@
background-color: $history-color-buy;
color: $buy-bids-text;
}
+
+ &.fullfilled .cell-wrapper {
+ border: 1px solid $colors-main-border;
+ margin: 0;
+ padding: 1px;
+ min-width: 5rem;
+ max-width: 7rem;
+
+ > .cell_value-wrapper {
+ padding: 0 0.15rem;
+ position: relative;
+ width: 100%;
+ color: $trade-fill-indicator-text;
+ z-index: 2;
+
+ .cell_value-bar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ background-color: $trade-fill-indicator;
+ z-index: -1;
+ }
+ }
+ }
}
.amount_text {
diff --git a/web/src/containers/TransactionsHistory/index.js b/web/src/containers/TransactionsHistory/index.js
index 110fcd30ad..c1ddffe8e7 100644
--- a/web/src/containers/TransactionsHistory/index.js
+++ b/web/src/containers/TransactionsHistory/index.js
@@ -25,6 +25,7 @@ import {
} from '../../components';
import { FLEX_CENTER_CLASSES, BASE_CURRENCY } from '../../config/constants';
import {
+ generateOrderHistoryHeaders,
generateTradeHeaders,
generateTradeHeadersMobile,
generateDepositsHeaders,
@@ -162,8 +163,8 @@ class TransactionsHistory extends Component {
this.setState({
headers: {
orders: isMobile
- ? generateTradeHeadersMobile(symbol, pairs, coins, discount)
- : generateTradeHeaders(symbol, pairs, coins, discount, prices),
+ ? generateOrderHistoryHeaders(symbol, pairs, coins, discount)
+ : generateOrderHistoryHeaders(symbol, pairs, coins, discount, prices),
trades: isMobile
? generateTradeHeadersMobile(symbol, pairs, coins, discount)
: generateTradeHeaders(symbol, pairs, coins, discount, prices),
@@ -342,7 +343,7 @@ class TransactionsHistory extends Component {
case 0:
props.stringId = 'ORDER_HISTORY';
props.title = `${STRINGS['ORDER_HISTORY']}`;
- props.headers = headers.trades;
+ props.headers = headers.orders;
props.data = orders;
props.filename = `order-history-${moment().unix()}`;
props.withIcon = false;
diff --git a/web/src/containers/TransactionsHistory/utils.js b/web/src/containers/TransactionsHistory/utils.js
index e48c559a58..11cb56a489 100644
--- a/web/src/containers/TransactionsHistory/utils.js
+++ b/web/src/containers/TransactionsHistory/utils.js
@@ -15,14 +15,14 @@ import {
DEFAULT_COIN_DATA,
} from '../../config/constants';
import { getFormatTimestamp, isBlockchainTx } from '../../utils/utils';
-import { formatToCurrency } from '../../utils/currency';
+import { formatToCurrency, formatBaseAmount } from 'utils/currency';
notification.config({
placement: 'topLeft',
duration: 3,
});
-const calculateFeeAmount = (
+/*const calculateFeeAmount = (
fee = 0,
quick = false,
price = 1,
@@ -40,7 +40,7 @@ const calculateFeeAmount = (
feeAmount = mathjs.chain(amount).multiply(fee).divide(100).done();
}
return feeAmount;
-};
+};*/
const calculateAmount = (isQuick = false, price, size) => {
if (isQuick) {
@@ -58,9 +58,9 @@ const calculatePrice = (isQuick = false, price, size) => {
return price;
};
-export const generateTradeHeaders = (
+export const generateOrderHistoryHeaders = (
symbol,
- pairs,
+ pairs = {},
coins,
discount,
prices = {}
@@ -224,17 +224,202 @@ export const generateTradeHeaders = (
},
},
{
- stringId: 'AMOUNT_IN',
- label: `${STRINGS['AMOUNT_IN']} ${BASE_CURRENCY.toUpperCase()}`,
- key: 'amount-in',
+ label: '',
+ key: 'status',
+ renderCell: ({ size = 0, filled = 0 }, key, index) => {
+ const fullfilled = formatBaseAmount(
+ mathjs.chain(filled).divide(size).multiply(100).done()
+ );
+ return (
+
+
+
+ {STRINGS.formatString(STRINGS['FULLFILLED'], fullfilled)}
+
+
+
+ |
+ );
+ },
+ },
+ {
+ label: STRINGS['STATUS'],
+ key: 'status',
+ exportToCsv: ({ status }) => status,
+ renderCell: ({ status }, key, index) => {
+ return (
+
+ {status}
+ |
+ );
+ },
+ },
+ {
+ stringId: 'FEE,NO_FEE',
+ label: STRINGS['FEE'],
+ key: 'fee',
+ exportToCsv: ({ fee = 0, fee_coin = '' }) => `${fee} ${fee_coin}`,
+ renderCell: ({ fee = 0, fee_coin = '' }, key, index) => (
+
+ {STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(fee, 0, true),
+ fee_coin.toUpperCase()
+ )}
+ |
+ ),
+ },
+ {
+ stringId: 'TIME',
+ label: STRINGS['TIME'],
+ key: 'updated_at',
+ className: isMobile ? 'text-center' : '',
+ exportToCsv: ({ updated_at = '' }) => updated_at,
+ renderCell: ({ updated_at = '' }, key, index) => {
+ return (
+
+ {getFormatTimestamp(updated_at)}
+ |
+ );
+ },
+ },
+ ];
+};
+
+export const generateTradeHeaders = (
+ symbol,
+ pairs,
+ coins,
+ discount,
+ prices = {}
+) => {
+ return [
+ {
+ stringId: 'PAIR',
+ label: STRINGS['PAIR'],
+ key: 'pair',
+ exportToCsv: ({ symbol }) => symbol.toUpperCase(),
+ renderCell: ({ symbol }, key, index) => {
+ return (
+
+ {symbol}
+ |
+ );
+ },
+ },
+ {
+ stringId: 'TYPE',
+ label: STRINGS['TYPE'],
+ key: 'side',
+ exportToCsv: ({ side = '' }) => side,
+ renderCell: ({ side = '' }, key, index) => {
+ return (
+
+
+ {STRINGS[`SIDES_VALUES.${side}`]}
+
+ |
+ );
+ },
+ },
+ {
+ stringId: 'SIZE',
+ label: STRINGS['SIZE'],
+ key: 'size',
+ exportToCsv: ({ size = 0, ...data }) => {
+ if (pairs[data.symbol]) {
+ const { pair_base, increment_size } = pairs[data.symbol];
+ const { min, ...rest } =
+ coins[pair_base || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const shortName = rest.symbol.toUpperCase();
+ return STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(size, increment_size),
+ shortName
+ ).join('');
+ } else {
+ return size;
+ }
+ },
+ renderCell: ({ size = 0, ...data }, key, index) => {
+ if (pairs[data.symbol]) {
+ const { pair_base, increment_size } = pairs[data.symbol];
+ const { min, ...rest } =
+ coins[pair_base || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const shortName = rest.symbol.toUpperCase();
+ return (
+
+ {STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(size, increment_size),
+ shortName
+ )}
+ |
+ );
+ } else {
+ return
{size} | ;
+ }
+ },
+ },
+ {
+ stringId: 'PRICE',
+ label: STRINGS['PRICE'],
+ key: 'price',
exportToCsv: ({ price = 0, size = 0, quick, symbol }) => {
if (pairs[symbol]) {
- const { increment_price, pair_base } = pairs[symbol];
- const { min, ...rest } = coins[BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const { pair_2, increment_price } = pairs[symbol];
+ const { min, ...rest } =
+ coins[pair_2 || BASE_CURRENCY] || DEFAULT_COIN_DATA;
return STRINGS.formatString(
CURRENCY_PRICE_FORMAT,
formatToCurrency(
- calculateAmount(quick, prices[pair_base] || 0, size),
+ calculatePrice(quick, price, size),
+ increment_price
+ ),
+ rest.symbol.toUpperCase()
+ ).join('');
+ } else {
+ return calculatePrice(quick, price, size);
+ }
+ },
+ renderCell: ({ price = 0, size = 0, quick, symbol }, key, index) => {
+ if (pairs[symbol]) {
+ const { pair_2, increment_price } = pairs[symbol];
+ const { min, ...rest } =
+ coins[pair_2 || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ return (
+
+ {STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(
+ calculatePrice(quick, price, size),
+ increment_price
+ ),
+ rest.symbol.toUpperCase()
+ )}
+ |
+ );
+ } else {
+ return
{calculatePrice(quick, price, size)} | ;
+ }
+ },
+ },
+ {
+ stringId: 'AMOUNT',
+ label: STRINGS['AMOUNT'],
+ key: 'amount',
+ exportToCsv: ({ price = 0, size = 0, quick, symbol }) => {
+ if (pairs[symbol]) {
+ const { pair_2, increment_price } = pairs[symbol];
+ const { min, ...rest } =
+ coins[pair_2 || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ return STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(
+ calculateAmount(quick, price, size),
increment_price
),
rest.symbol.toUpperCase()
@@ -245,14 +430,15 @@ export const generateTradeHeaders = (
},
renderCell: ({ price = 0, size = 0, quick, symbol }, key, index) => {
if (pairs[symbol]) {
- const { increment_price, pair_base } = pairs[symbol];
- const { min, ...rest } = coins[BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const { pair_2, increment_price } = pairs[symbol];
+ const { min, ...rest } =
+ coins[pair_2 || BASE_CURRENCY] || DEFAULT_COIN_DATA;
return (
{STRINGS.formatString(
CURRENCY_PRICE_FORMAT,
formatToCurrency(
- calculateAmount(quick, prices[pair_base] || 0, size),
+ calculateAmount(quick, price, size),
increment_price
),
rest.symbol.toUpperCase()
@@ -268,59 +454,65 @@ export const generateTradeHeaders = (
}
},
},
- {
- stringId: 'FEE,NO_FEE',
- label: STRINGS['FEE'],
- key: 'fee',
- exportToCsv: ({ fee = 0, price = 0, size = 0, quick, symbol, side }) => {
- let feeData = discount ? fee - (fee * discount) / 100 : fee;
- if (!feeData) {
- return calculateFeeAmount(feeData);
- }
+ /* {
+ stringId: 'AMOUNT_IN',
+ label: `${STRINGS['AMOUNT_IN']} ${BASE_CURRENCY.toUpperCase()}`,
+ key: 'amount-in',
+ exportToCsv: ({ price = 0, size = 0, quick, symbol }) => {
if (pairs[symbol]) {
- const { pair_base, pair_2 } = pairs[symbol];
- const pair = side === 'buy' ? pair_base : pair_2;
- const { min, ...rest } =
- coins[pair || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const { increment_price, pair_base } = pairs[symbol];
+ const { min, ...rest } = coins[BASE_CURRENCY] || DEFAULT_COIN_DATA;
return STRINGS.formatString(
CURRENCY_PRICE_FORMAT,
formatToCurrency(
- calculateFeeAmount(feeData, quick, price, size, side),
- min
+ calculateAmount(quick, prices[pair_base] || 0, size),
+ increment_price
),
rest.symbol.toUpperCase()
).join('');
} else {
- calculateFeeAmount(feeData, quick, price, size, side);
+ return calculateAmount(quick, price, size);
}
},
- renderCell: ({ fee, price, size, quick, symbol, side }, key, index) => {
- let feeData = discount ? fee - (fee * discount) / 100 : fee;
- if (!feeData) {
- return | {calculateFeeAmount(feeData)} | ;
- }
+ renderCell: ({ price = 0, size = 0, quick, symbol }, key, index) => {
if (pairs[symbol]) {
- const { pair_base, pair_2 } = pairs[symbol];
- const pair = side === 'buy' ? pair_base : pair_2;
- const { min, ...rest } =
- coins[pair || BASE_CURRENCY] || DEFAULT_COIN_DATA;
+ const { increment_price, pair_base } = pairs[symbol];
+ const { min, ...rest } = coins[BASE_CURRENCY] || DEFAULT_COIN_DATA;
return (
{STRINGS.formatString(
CURRENCY_PRICE_FORMAT,
formatToCurrency(
- calculateFeeAmount(feeData, quick, price, size, side),
- min,
- true
+ calculateAmount(quick, prices[pair_base] || 0, size),
+ increment_price
),
rest.symbol.toUpperCase()
)}
|
);
} else {
- calculateFeeAmount(feeData, quick, price, size, side);
+ return (
+
+ {formatToCurrency(calculateAmount(quick, price, size), 0.0001)}
+ |
+ );
}
},
+ },*/
+ {
+ stringId: 'FEE,NO_FEE',
+ label: STRINGS['FEE'],
+ key: 'fee',
+ exportToCsv: ({ fee = 0, fee_coin = '' }) => `${fee} ${fee_coin}`,
+ renderCell: ({ fee = 0, fee_coin = '' }, key, index) => (
+
+ {STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(fee, 0, true),
+ fee_coin.toUpperCase()
+ )}
+ |
+ ),
},
{
stringId: 'TIME',
@@ -438,31 +630,16 @@ export const generateWithdrawalsHeaders = (
stringId: 'FEE,NO_FEE',
label: STRINGS['FEE'],
key: 'fee',
- exportToCsv: ({ fee = 0 }) => fee,
- renderCell: ({ fee, price, size, currency }, key, index) => {
- const data = coins[currency] || DEFAULT_COIN_DATA;
- if (fee === 0) {
- return
{calculateFeeAmount(fee)} | ;
- }
- return (
- // STRINGS[`${currency.toUpperCase()}_PRICE_FORMAT`]
- // ?
-
- {STRINGS.formatString(
- CURRENCY_PRICE_FORMAT,
- fee,
- data.symbol.toUpperCase()
- )}
- | /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */ /*:
{fee} | */
- // :
{fee} |
- /*:
{fee} | */
- /*:
{fee} | */
- /*:
{fee} | */
- /*:
{fee} | */
- /*:
{fee} | */
- /*:
{fee} | */
- /*:
{fee} | */);
- },
+ exportToCsv: ({ fee = 0, fee_coin = '' }) => `${fee} ${fee_coin}`,
+ renderCell: ({ fee = 0, fee_coin = '' }, key, index) => (
+
+ {STRINGS.formatString(
+ CURRENCY_PRICE_FORMAT,
+ formatToCurrency(fee, 0, true),
+ fee_coin.toUpperCase()
+ )}
+ |
+ ),
},
{
stringId: 'TIME',
diff --git a/web/src/index.css b/web/src/index.css
index 38ead05c49..22b1d4f94d 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1441,6 +1441,26 @@ table th {
background-color: var(--trading_buying-related-elements);
color: var(--calculated_trading_buying-related-text); }
+.cell_box-type.fullfilled .cell-wrapper {
+ border: 1px solid var(--calculated_important-border);
+ margin: 0;
+ padding: 1px;
+ min-width: 5rem;
+ max-width: 7rem; }
+ .cell_box-type.fullfilled .cell-wrapper > .cell_value-wrapper {
+ padding: 0 0.15rem;
+ position: relative;
+ width: 100%;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ z-index: 2; }
+ .cell_box-type.fullfilled .cell-wrapper > .cell_value-wrapper .cell_value-bar {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ background-color: var(--calculated_specials_highlight-box);
+ z-index: -1; }
+
.amount_text .positive {
color: var(--specials_checks-okay-done); }
@@ -1512,7 +1532,7 @@ table th {
.trade-container .trade-col_main_wrapper .trade-main_content {
flex: 6;
min-height: 25vh;
- max-height: 67vh; }
+ max-height: 78vh; }
.trade-container .trade-col_main_wrapper .trade-tabs_content {
flex: 3;
height: 30vh; }
@@ -1787,7 +1807,14 @@ table th {
.trade_order_entry-wrapper.order_side-selector-sell .trade_order_entry-form_inputs-wrapper .form-error {
margin: 0.5rem 0; }
.trade_order_entry-wrapper.order_side-selector-sell .trade_order_entry-form_fields-wrapper {
- margin-bottom: 0.5rem !important; }
+ margin-bottom: 0.2rem !important; }
+ .trade_order_entry-wrapper.order_side-selector-sell .trade_order_entry-form_fields-wrapper .ant-collapse-header {
+ text-align: right;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ padding: 0;
+ font-size: 12px; }
+ .trade_order_entry-wrapper.order_side-selector-sell .trade_order_entry-form_fields-wrapper .ant-collapse-content-box {
+ padding: 0; }
.trade_order_entry-wrapper.order_side-selector-buy {
flex: 1;
@@ -1848,7 +1875,14 @@ table th {
.trade_order_entry-wrapper.order_side-selector-buy .trade_order_entry-form_inputs-wrapper .form-error {
margin: 0.5rem 0; }
.trade_order_entry-wrapper.order_side-selector-buy .trade_order_entry-form_fields-wrapper {
- margin-bottom: 0.5rem !important; }
+ margin-bottom: 0.2rem !important; }
+ .trade_order_entry-wrapper.order_side-selector-buy .trade_order_entry-form_fields-wrapper .ant-collapse-header {
+ text-align: right;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ padding: 0;
+ font-size: 12px; }
+ .trade_order_entry-wrapper.order_side-selector-buy .trade_order_entry-form_fields-wrapper .ant-collapse-content-box {
+ padding: 0; }
.risky-trade-wrapper {
width: 32rem; }
@@ -6091,6 +6125,15 @@ table th {
width: 35% !important;
transform: translateY(1.4rem); }
+.ant-slider-mark-text {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ font-family: 'Open Sans' !important;
+ font-size: 0.9rem !important; }
+
+.ant-slider-mark-text-active {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-weight: bold; }
+
.exir-button {
width: 100%;
font-size: 0.9rem;