({
mode,
is_descending,
- coinsData,
+ // coinsData,
quicktrade,
pairs,
pinned_assets,
+ coinsData,
});
const mapDispatchToProps = (dispatch) => ({
diff --git a/web/src/containers/DigitalAssets/components/AssetsRow.js b/web/src/containers/DigitalAssets/components/AssetsRow.js
index 8fc20dd1c4..09add0c719 100644
--- a/web/src/containers/DigitalAssets/components/AssetsRow.js
+++ b/web/src/containers/DigitalAssets/components/AssetsRow.js
@@ -1,25 +1,26 @@
import React from 'react';
-import { PriceChange, Coin, ActionNotification } from 'components';
+import { connect } from 'react-redux';
+import { browserHistory } from 'react-router';
+import { isMobile } from 'react-device-detect';
+
import TradeInputGroup from 'containers/Wallet/components/TradeInputGroup';
+import STRINGS from 'config/localizedStrings';
+import { PriceChange, Coin, ActionNotification } from 'components';
import { MiniSparkLine } from 'containers/TradeTabs/components/MiniSparkLine';
import { getLastValuesFromParts } from 'utils/array';
-import STRINGS from 'config/localizedStrings';
-import { isMobile } from 'react-device-detect';
-import { browserHistory } from 'react-router';
import { unique } from 'utils/data';
+import { Loading } from './utils';
-const Loading = ({ index }) => {
- return (
-
- );
-};
-
-const AssetsRow = ({ coinData, loading, index, quicktrade, pairs, icons }) => {
+const AssetsRow = ({
+ coinData,
+ loading,
+ index,
+ quicktrade,
+ pairs,
+ icons,
+ coins,
+ selectedButton,
+}) => {
const {
icon_id,
symbol,
@@ -98,73 +99,209 @@ const AssetsRow = ({ coinData, loading, index, quicktrade, pairs, icons }) => {
{!loading ? (
- browserHistory.push(`/prices/coin/${symbol}`)}
- >
-
-
{fullname}
-
- ) : (
-
- )}
-
-
- {!loading ? (
- {symbol.toUpperCase()}
- ) : (
-
- )}
-
-
- {!loading ? (
-
-
- {lastPrice}
-
- {'USDT'}
-
- ) : (
-
- )}
-
-
- {!loading ? (
-
- ) : (
-
- )}
-
-
- {!loading ? (
-
- ) : (
-
- )}
-
-
- {!loading ? (
-
+ isMobile ? (
+ browserHistory.push(`/prices/coin/${symbol}`)}
+ >
+
+
+ {symbol?.toUpperCase()}
+ {fullname}
+
+
+ ) : (
+ browserHistory.push(`/prices/coin/${symbol}`)}
+ >
+
+
+ {fullname}
+
+ {symbol?.toUpperCase()}
+
+
+
+ )
) : (
)}
-
+ {isMobile && (
+
+ {!loading ? (
+
+
+
+ {lastPrice && '$'}
+
+
+ {lastPrice ? lastPrice : '-'}
+
+
+ {(oneDayPriceDifferencePercent && oneDayPriceDifference) ||
+ oneDayPriceDifference === 0 ? (
+
+ ) : (
+
+ 0%
+
+ )}
+
+ ) : (
+
+ )}
+
+ )}
+ {isMobile && selectedButton !== 'Market Cap' && (
+
+ {!loading ? (
+
+ {(priceDifference && priceDifferencePercent) ||
+ priceDifference === 0 ? (
+
+ ) : (
+
0%
+ )}
+ {chartData?.price ? (
+
+ ) : (
+
{'- '}
+ )}
+
+ ) : (
+
+ )}
+
+ )}
+ {isMobile && selectedButton === 'Market Cap' && (
+
+ {!loading ? (
+
+ {coins[symbol]?.market_cap ? (
+ coins[symbol].market_cap.toLocaleString('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ })
+ ) : (
+ 0
+ )}
+
+ ) : (
+
+ )}
+
+ )}
+ {!isMobile && (
+
+ {!loading ? (
+
+
+ {lastPrice && '$'}
+
+
+ {lastPrice ? lastPrice : '-'}
+
+
+ ) : (
+
+ )}
+
+ )}
+ {!isMobile && (
+
+ {!loading ? (
+ (oneDayPriceDifferencePercent && oneDayPriceDifference) ||
+ oneDayPriceDifference === 0 ? (
+
+ ) : (
+ 0%
+ )
+ ) : (
+
+ )}
+
+ )}
+ {!isMobile && (
+
+ {!loading ? (
+ (priceDifference && priceDifferencePercent) ||
+ priceDifference === 0 ? (
+
+ ) : (
+ 0%
+ )
+ ) : (
+
+ )}
+
+ )}
+ {!isMobile && (
+
+ {!loading ? (
+ chartData?.price ? (
+
+ ) : (
+ '-'
+ )
+ ) : (
+
+ )}
+
+ )}
+ {!isMobile && (
+
+ {!loading ? (
+
+ {coins[symbol]?.market_cap ? (
+ coins[symbol].market_cap.toLocaleString('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ })
+ ) : (
+ 0
+ )}
+
+ ) : (
+
+ )}
+
+ )}
+
{!loading ? (
markets.length > 1 ? (
{
markets={markets}
goToTrade={goToTrade}
pairs={pairs}
+ tradeClassName="market-asset-row"
+ hasTrigger={true}
/>
) : (
/,
+ {STRINGS['SIDES.SELL']}
+ )}
+ text={STRINGS.formatString(
+ STRINGS['MARKETS_TABLE.BUY'],
+ / ,
+ {STRINGS['SIDES.SELL']}
+ )}
onClick={() => goToTrade(markets[0])}
className="csv-action"
showActionText={isMobile}
disable={markets.length === 0}
+ tradeClassName={
+ markets.length === 0
+ ? 'market-asset-row market-asset-row-disable'
+ : 'market-asset-row'
+ }
/>
)
) : (
@@ -193,4 +343,8 @@ const AssetsRow = ({ coinData, loading, index, quicktrade, pairs, icons }) => {
);
};
-export default AssetsRow;
+const mapStateToProps = (state) => ({
+ coins: state.app.coins,
+});
+
+export default connect(mapStateToProps)(AssetsRow);
diff --git a/web/src/containers/DigitalAssets/components/AssetsWrapper.js b/web/src/containers/DigitalAssets/components/AssetsWrapper.js
index e304b1df4b..ef4d74dc05 100644
--- a/web/src/containers/DigitalAssets/components/AssetsWrapper.js
+++ b/web/src/containers/DigitalAssets/components/AssetsWrapper.js
@@ -1,19 +1,24 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { reset } from 'redux-form';
import { withRouter } from 'react-router';
import { isMobile } from 'react-device-detect';
+import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
+
+import AssetsCards from './AssetsCards';
+import STRINGS from 'config/localizedStrings';
+import withConfig from 'components/ConfigProvider/withConfig';
+import AssetsList from 'containers/DigitalAssets/components/AssetsList';
import {
formatPercentage,
formatToCurrency,
countDecimals,
} from 'utils/currency';
import { SearchBox } from 'components';
-import STRINGS from 'config/localizedStrings';
+import { setCoinsData } from 'actions/appActions';
import { quicktradePairSelector } from 'containers/QuickTrade/components/utils';
-import withConfig from 'components/ConfigProvider/withConfig';
import { getMiniCharts } from 'actions/chartAction';
-import AssetsList from 'containers/DigitalAssets/components/AssetsList';
-import { RenderLoading } from './utils';
function onHandleInitialLoading(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
@@ -26,11 +31,15 @@ class AssetsWrapper extends Component {
data: [],
chartData: {},
coinsData: [],
- pageSize: 10,
+ pageSize: 100,
page: 0,
count: 0,
searchValue: '',
isLoading: true,
+ isSearchActive: false,
+ selectedButton: !isMobile ? 'Market Cap' : '',
+ isSelectedSort: false,
+ isInputFocus: false,
};
}
@@ -103,10 +112,14 @@ class AssetsWrapper extends Component {
};
getCoinsData = (coinsList, chartValues) => {
- const { coins, quicktradePairs } = this.props;
+ const { coins, quicktradePairs, setCoinsData } = this.props;
+ // const topAssets = [];
+ // const remainingAssets = [];
const coinsData = coinsList
.map((name) => {
- const { code, icon_id, symbol, fullname, type } = coins[name];
+ const { code, icon_id, symbol, fullname, type, created_at } = coins[
+ name
+ ];
const key = `${code}-usdt`;
const pricingData = this.getPricingData(chartValues[key]);
@@ -121,12 +134,32 @@ class AssetsWrapper extends Component {
type,
key,
networkType: quicktradePairs[key]?.type,
+ created_at,
};
})
- .filter(({ type }) => type === 'blockchain');
-
- this.setState({ coinsData });
+ ?.filter(({ type }) => type === 'blockchain')
+ ?.sort(
+ (a, b) =>
+ (coins[b?.symbol]?.market_cap || 0) -
+ (coins[a?.symbol]?.market_cap || 0)
+ );
+ // pinned_assets.forEach((pin) => {
+ // const asset = coinsData.find(({ symbol }) => symbol === pin);
+ // if (asset) {
+ // topAssets.push(asset);
+ // }
+ // });
+ // coinsData.filter((item) => {
+ // if (!pinned_assets.includes(item.symbol)) {
+ // remainingAssets.push(item);
+ // return true;
+ // }
+ // return false;
+ // });
+
+ this.setState({ coinsData: coinsData });
this.constructData(this.state.page);
+ setCoinsData(coinsData);
};
async componentDidMount() {
@@ -142,6 +175,7 @@ class AssetsWrapper extends Component {
});
await onHandleInitialLoading(15 * 100);
this.setState({ isLoading: false });
+ window.addEventListener('keydown', this.handleKeyPress);
}
componentDidUpdate(prevProps) {
@@ -153,6 +187,10 @@ class AssetsWrapper extends Component {
}
}
+ componentWillUnmount() {
+ window.removeEventListener('keydown', this.handleKeyPress);
+ }
+
goToPreviousPage = () => {
const { page } = this.state;
this.constructData(page - 1);
@@ -179,7 +217,6 @@ class AssetsWrapper extends Component {
const count = coinsData.length;
const initItem = page * pageSize;
-
if (initItem < count) {
const data = searchResults.slice(0, initItem + pageSize);
this.setState({ data, page, count });
@@ -226,40 +263,241 @@ class AssetsWrapper extends Component {
}
};
+ handleMarket = (value) => {
+ const { page, searchValue } = this.state;
+ const { coinsData, coins } = this.props;
+
+ const sortFunctions = {
+ 'Market Cap': (data) =>
+ data.sort(
+ (a, b) =>
+ (coins[b?.symbol]?.market_cap || 0) -
+ (coins[a?.symbol]?.market_cap || 0)
+ ),
+ Gainers: (data) =>
+ data
+ ?.filter(
+ ({ oneDayPriceDifferencePercenVal }) =>
+ (oneDayPriceDifferencePercenVal || 0) >= 0
+ )
+ ?.sort(
+ (a, b) =>
+ (b.oneDayPriceDifferencePercenVal || 0) -
+ (a.oneDayPriceDifferencePercenVal || 0)
+ ),
+ Losers: (data) =>
+ data
+ ?.filter(
+ ({ oneDayPriceDifferencePercenVal }) =>
+ (oneDayPriceDifferencePercenVal || 0) <= 0
+ )
+ ?.sort(
+ (a, b) =>
+ (a.oneDayPriceDifferencePercenVal || 0) -
+ (b.oneDayPriceDifferencePercenVal || 0)
+ ),
+ New: (data) =>
+ data?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)),
+ };
+
+ const updatedCoinsData = sortFunctions[value]
+ ? sortFunctions[value](coinsData)
+ : coinsData;
+
+ this.setState(
+ {
+ selectedButton: value,
+ coinsData: updatedCoinsData,
+ isSelectedSort: false,
+ },
+ () => {
+ this.constructData(page, searchValue);
+ }
+ );
+ };
+
+ handleClose = () => {
+ const FORM_NAME = 'SearchForm';
+ this.handleTabSearch('');
+ this.props.dispatch(reset(FORM_NAME));
+ this.setState({ isSearchActive: false, isInputFocus: false }, () => {
+ const inputElement = document.querySelector(
+ '.trade_tabs-search-field input'
+ );
+ if (inputElement) {
+ inputElement.blur();
+ }
+ });
+ };
+
+ handleSelectedSort = (value) => {
+ this.setState({ isSelectedSort: value });
+ };
+
+ handleInput = () => {
+ this.setState({ isSearchActive: true, isInputFocus: true }, () => {
+ const inputElement = document.querySelector(
+ '.trade_tabs-search-field input'
+ );
+ if (inputElement) {
+ inputElement.focus();
+ }
+ });
+ };
+
+ handleKeyPress = (event) => {
+ const { isSearchActive } = this.state;
+ const key = event.key;
+ if (!isSearchActive && key === '/') {
+ event.preventDefault();
+ this.handleInput();
+ }
+ if (isSearchActive && key === 'Escape') {
+ this.handleClose();
+ }
+ };
+
render() {
const { data, page, pageSize, count, isLoading } = this.state;
+ const listButton = [
+ STRINGS['DIGITAL_ASSETS.CARDS.MARKET_CAP'],
+ STRINGS['DIGITAL_ASSETS.CARDS.GAINERS'],
+ STRINGS['DIGITAL_ASSETS.CARDS.LOSERS'],
+ STRINGS['DEPOSIT_STATUS.NEW'],
+ ];
return (
- {data.length ? (
-
-
-
-
-
+
+
+
+
+
+ {!this.state.isSearchActive && isMobile && (
+
+ {listButton?.map((button, index) => {
+ return (
+
this.handleMarket(button)}
+ >
+ {button}
+
+ );
+ })}
+
+ )}
+ {!isMobile && (
+
+ {listButton?.map((button, index) => {
+ return (
+
this.handleMarket(button)}
+ >
+ {button}
+
+ );
+ })}
+
+ )}
+ {!this.state.isSearchActive ? (
+ !isMobile ? (
+
this.handleInput()}
+ >
+
+ this.handleInput()}
+ >
+ /
+
+
+ ) : (
+
this.handleInput()}
+ >
+
+
+ )
+ ) : !isMobile ? (
+
+
+ this.handleClose()}
+ >
+
+
+
+ ) : (
+
+
+
+
+
this.handleClose()}>
+ {STRINGS['CLOSE_TEXT']}
+
+
+ )}
-
pageSize}
- />
- ) : (
-
- )}
+
pageSize}
+ isSelectedSort={this.state.isSelectedSort}
+ handleSelectedSort={this.handleSelectedSort}
+ selectedButton={this.state.selectedButton}
+ />
+
);
}
@@ -270,6 +508,16 @@ const mapStateToProps = (state, props) => ({
constants: state.app.constants,
coins: state.app.coins,
quicktradePairs: quicktradePairSelector(state),
+ coinsData: state.app.coinsData,
+ pinned_assets: state.app.pinned_assets,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ setCoinsData: bindActionCreators(setCoinsData, dispatch),
+ dispatch,
});
-export default connect(mapStateToProps)(withRouter(withConfig(AssetsWrapper)));
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(withRouter(withConfig(AssetsWrapper)));
diff --git a/web/src/containers/DigitalAssets/components/utils.js b/web/src/containers/DigitalAssets/components/utils.js
index cb45171be1..301c2904e3 100644
--- a/web/src/containers/DigitalAssets/components/utils.js
+++ b/web/src/containers/DigitalAssets/components/utils.js
@@ -1,13 +1,9 @@
import React from 'react';
-import { Spin } from 'antd';
-import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import math from 'mathjs';
-import STRINGS from 'config/localizedStrings';
import { createSelector } from 'reselect';
import { DIGITAL_ASSETS_SORT } from 'actions/appActions';
import { unsortedMarketsSelector, getPairs } from 'containers/Trade/utils';
import { getPinnedAssets } from 'containers/Wallet/utils';
-import { EditWrapper } from 'components';
const getSortMode = (state) => state.app.digital_assets_sort.mode;
const getSortDir = (state) => state.app.digital_assets_sort.is_descending;
@@ -153,66 +149,94 @@ export const dataSelector = createSelector(
}
);
-export const RenderLoading = () => {
- const renderCaret = () => (
-
-
-
-
- );
-
+export const Loading = ({ index }) => {
return (
-
-
-
-
- {STRINGS['MARKETS_TABLE.ASSET']}
-
-
-
-
- {STRINGS['MARKETS_TABLE.TRADING_SYMBOL']}
-
-
-
-
- {STRINGS['MARKETS_TABLE.LAST_PRICE']}
-
-
-
-
- {STRINGS['MARKETS_TABLE.CHANGE_1D']}
-
- {renderCaret()}
-
-
-
- {STRINGS['MARKETS_TABLE.CHANGE_7D']}
-
- {renderCaret()}
-
-
-
- {STRINGS['MARKETS_TABLE.CHART_7D']}
-
-
-
-
- {STRINGS['TRADE_TAB_TRADE']}
-
-
-
-
-
-
-
- {STRINGS['DIGITAL_ASSETS.LOADING_PRICES']}
-
-
-
+
);
};
+
+// export const RenderLoading = () => {
+// const renderCaret = () => (
+//
+//
+//
+//
+// );
+
+// return (
+//
+//
+//
+//
+// {STRINGS['MARKETS_TABLE.ASSET']}
+//
+//
+// {!isMobile &&
+//
+// {STRINGS['PRICE']}
+//
+//
}
+// {!isMobile &&
+//
+// {STRINGS.formatString(
+// STRINGS['MARKETS_TABLE.PERCENTAGE'],
+// STRINGS['MARKETS_TABLE.24H']
+// )}
+//
+// {renderCaret()}
+//
}
+// {!isMobile &&
+//
+// {STRINGS.formatString(
+// STRINGS['MARKETS_TABLE.PERCENTAGE'],
+// STRINGS['QUICK_TRADE_COMPONENT.7D']
+// )}
+//
+// {renderCaret()}
+//
}
+// {isMobile &&
+//
+// {STRINGS['DIGITAL_ASSETS.PRICE_24H']}
+//
+//
}
+//
+//
+// {STRINGS['MARKETS_TABLE.TREND_7D']}
+//
+//
+// {!isMobile &&
+//
+// {STRINGS['DIGITAL_ASSETS.CARDS.MARKET_CAP']}
+//
+//
}
+//
+//
+// {STRINGS['TRADE_TAB_TRADE']}
+//
+//
+//
+//
+//
+//
+//
+// {STRINGS['DIGITAL_ASSETS.LOADING_PRICES']}
+//
+//
+//
+// );
+// };
diff --git a/web/src/containers/DigitalAssets/index.js b/web/src/containers/DigitalAssets/index.js
index c94220d2a2..c896ce81cf 100644
--- a/web/src/containers/DigitalAssets/index.js
+++ b/web/src/containers/DigitalAssets/index.js
@@ -5,66 +5,80 @@ import { isMobile } from 'react-device-detect';
import withConfig from 'components/ConfigProvider/withConfig';
import AssetsWrapper from './components/AssetsWrapper';
-import { EditWrapper, IconTitle } from 'components';
import STRINGS from 'config/localizedStrings';
+import { EditWrapper, IconTitle } from 'components';
const DigitalAssets = ({ pair, icons: ICONS, showQuickTrade }) => {
return (
-
-
-
-
+ {isMobile ? (
+
+
+
+
+
+ {STRINGS['DIGITAL_ASSETS.DIGITAL_ASSETS_TITLE']}
+
+
+
+
+ {STRINGS['DIGITAL_ASSETS.MOBILE_DESC']}
+
+
+
+
-
-
-
-
- {STRINGS['DIGITAL_ASSETS.ASSETS_INFO']}
-
-
-
-
- {STRINGS['DIGITAL_ASSETS.ASSETS_INFO_DETAIL']}
-
+ ) : (
+
+
-
-
-
- {STRINGS['ACCORDIAN.DEPOSIT']}
-
-
- {showQuickTrade && (
-
-
- {STRINGS['DIGITAL_ASSETS.QUICK_TRADE']}
+
+
+
+
+ {STRINGS['DIGITAL_ASSETS.ASSETS_INFO']}
+
+
+
+
+ {STRINGS['DIGITAL_ASSETS.ASSETS_INFO_DETAIL']}
+
+
+
+
+
+
+ {STRINGS['ACCORDIAN.DEPOSIT']}
- )}
-
-
- {STRINGS['DIGITAL_ASSETS.PRO_TRADE']}
-
-
+ {showQuickTrade && (
+
+
+ {STRINGS['DIGITAL_ASSETS.QUICK_TRADE']}
+
+
+ )}
+
+
+ {STRINGS['DIGITAL_ASSETS.PRO_TRADE']}
+
+
+
+
-
-
+ )}
);
};
diff --git a/web/src/containers/FeesAndLimits/index.js b/web/src/containers/FeesAndLimits/index.js
index 16d5b003fe..8e525b5e4c 100644
--- a/web/src/containers/FeesAndLimits/index.js
+++ b/web/src/containers/FeesAndLimits/index.js
@@ -2,8 +2,12 @@ import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { isMobile } from 'react-device-detect';
+
import STRINGS from 'config/localizedStrings';
import withConfig from 'components/ConfigProvider/withConfig';
+import TradingFees from './TradingFees';
+import WithdrawalFees from './WithdrawalFees';
+import WithdrawalLimits from './WithdrawalLimits';
import {
IconTitle,
EditWrapper,
@@ -13,10 +17,7 @@ import {
HeaderSection,
Loader,
} from 'components';
-import { openContactForm } from 'actions/appActions';
-import TradingFees from './TradingFees';
-import WithdrawalFees from './WithdrawalFees';
-import WithdrawalLimits from './WithdrawalLimits';
+import { openContactForm, setLimitTab } from 'actions/appActions';
import { isLoggedIn } from 'utils/token';
const Index = ({
@@ -24,6 +25,7 @@ const Index = ({
verification_level,
router,
selectedAccount,
+ getLimitTab,
}) => {
const [selectedLevel, setSelectedLevel] = useState(
isLoggedIn() ? verification_level?.toString() : Object.keys(config_level)[0]
@@ -91,6 +93,13 @@ const Index = ({
setSelectedLevel(selectedAccount);
}, [selectedAccount]);
+ useEffect(() => {
+ if (getLimitTab) {
+ setActiveTab(getLimitTab);
+ }
+ //eslint-disable-next-line
+ }, []);
+
const renderContent = (tabs, activeTab) =>
tabs[activeTab] && tabs[activeTab].content ? (
tabs[activeTab].content
@@ -152,16 +161,18 @@ const Index = ({
const mapStateToProps = (state) => {
const {
- app: { config_level, selectedAccount },
+ app: { config_level, selectedAccount, selectedTab },
} = state;
return {
verification_level: state.user.verification_level,
config_level,
selectedAccount,
+ getLimitTab: selectedTab,
};
};
const mapDispatchToProps = (dispatch) => ({
+ setLimitTab: bindActionCreators(setLimitTab, dispatch),
openContactForm: bindActionCreators(openContactForm, dispatch),
});
diff --git a/web/src/containers/P2P/Filters.js b/web/src/containers/P2P/Filters.js
new file mode 100644
index 0000000000..2f79fef78d
--- /dev/null
+++ b/web/src/containers/P2P/Filters.js
@@ -0,0 +1,349 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { DatePicker, Form, Radio, Select } from 'antd';
+
+import STRINGS from 'config/localizedStrings';
+import { Coin, EditWrapper } from 'components';
+import { dateFilters } from 'containers/TransactionsHistory/filterUtils';
+
+const Filter = ({
+ transactionFilter,
+ setTransactions,
+ transactionDetails,
+ coins,
+ user,
+ selectedCurrencies,
+ tab,
+}) => {
+ const [isRangePicker, setIsRangePicker] = useState(false);
+ const [date, setDate] = useState('All');
+ const [tradeDetail, setTradeDetail] = useState({
+ asset: null,
+ side: null,
+ status: null,
+ });
+ const [customDateRange, setCustomDateRange] = useState({
+ startDates: null,
+ endDates: null,
+ });
+
+ const trades = ['P2P.ALL', 'P2P.BUY_UPPER', 'P2P.SELL_UPPER'];
+ const orderStatus = [
+ 'P2P.ALL',
+ 'P2P.COMPLETE',
+ 'P2P.APPEALED',
+ 'P2P.CANCELLED',
+ 'P2P.EXPIRED',
+ 'DEVELOPER_SECTION.ACTIVE',
+ 'ORDER_HISTORY_CLOSED',
+ ];
+
+ const { RangePicker } = DatePicker;
+
+ useEffect(() => {
+ setDate('All');
+ setTradeDetail({
+ asset: null,
+ side: null,
+ status: null,
+ });
+ setCustomDateRange({ startDates: null, endDates: null });
+ setIsRangePicker(false);
+
+ applyFilters(transactionDetails, tradeDetail, 'All');
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [tab]);
+
+ const handleDateRange = (dates) => {
+ if (dates && dates.length === 2) {
+ const [startDate, endDate] = dates;
+
+ const startDates = new Date(startDate?.toISOString());
+ const endDates = new Date(endDate?.toISOString());
+
+ setCustomDateRange({ startDates, endDates });
+
+ const customTransaction = transactionDetails
+ ?.filter((x) =>
+ transactionFilter
+ ? ['active', 'appealed'].includes(x.transaction_status)
+ : true
+ )
+ ?.filter((data) => {
+ const createdAt = new Date(data.created_at);
+ return createdAt >= startDates && createdAt <= endDates;
+ });
+ applyFilters(
+ customTransaction,
+ tradeDetail,
+ 'custom',
+ startDates,
+ endDates
+ );
+ }
+ };
+
+ const handleDateFilter = (selectedDate) => {
+ setDate(selectedDate);
+ if (selectedDate === 'custom') {
+ setIsRangePicker(true);
+ return;
+ } else {
+ setIsRangePicker(false);
+ }
+
+ let transactionList = transactionDetails?.filter((x) =>
+ transactionFilter
+ ? ['active', 'appealed']?.includes(x?.transaction_status)
+ : true
+ );
+
+ const filterByDate = (daysAgo) => {
+ const targetDate = new Date();
+ targetDate.setDate(targetDate.getDate() - daysAgo);
+ return transactionList.filter(
+ (data) => new Date(data?.created_at) >= targetDate
+ );
+ };
+
+ const filterByMonth = (monthsAgo) => {
+ const targetDate = new Date();
+ targetDate.setMonth(targetDate.getMonth() - monthsAgo);
+ return transactionList.filter(
+ (data) => new Date(data?.created_at) >= targetDate
+ );
+ };
+
+ let filteredTransactions;
+ switch (selectedDate) {
+ case '1 day':
+ filteredTransactions = filterByDate(1);
+ break;
+ case '1 week':
+ filteredTransactions = filterByDate(7);
+ break;
+ case 'All':
+ filteredTransactions = transactionList;
+ break;
+ default:
+ if (Array.isArray(selectedDate)) {
+ const dateString = selectedDate.join('');
+ if (dateString === '1 month') {
+ filteredTransactions = filterByMonth(1);
+ } else if (dateString === '3 month') {
+ filteredTransactions = filterByMonth(3);
+ }
+ }
+ break;
+ }
+
+ if (selectedDate !== 'custom') {
+ applyFilters(filteredTransactions, tradeDetail, selectedDate);
+ }
+ };
+
+ const handleTransaction = (type, status) => {
+ setTradeDetail((prev) => {
+ const updatedTradeDetail = {
+ ...prev,
+ [type === 'status'
+ ? 'status'
+ : type === 'asset'
+ ? 'asset'
+ : 'side']: status,
+ };
+ applyFilters(transactionDetails, updatedTradeDetail);
+ return updatedTradeDetail;
+ });
+ };
+
+ const applyFilters = (
+ transactions = transactionDetails,
+ filters = tradeDetail,
+ dateFilter = date,
+ startDates = customDateRange.startDates,
+ endDates = customDateRange.endDates
+ ) => {
+ const filteredTransactions = transactions.filter((data) => {
+ const statusMatch =
+ filters?.status === null ||
+ filters?.status === 'ALL' ||
+ (filters?.status === 'Completed'
+ ? data.transaction_status === 'complete'
+ : data.transaction_status?.toLowerCase() ===
+ filters?.status?.toLowerCase());
+
+ const sideMatch =
+ filters?.side === null ||
+ filters?.side === 'ALL' ||
+ (filters?.side === 'BUY'
+ ? data?.user_id === user?.id
+ : data?.user_id !== user?.id);
+
+ const assetMatch =
+ filters?.asset === null ||
+ filters?.asset === 'ALL' ||
+ data?.deal?.buying_asset === filters?.asset;
+
+ const dateString =
+ Array.isArray(dateFilter) && dateFilter.length > 1
+ ? dateFilter.join('')
+ : dateFilter;
+
+ const dateMatch =
+ dateFilter === 'All' ||
+ dateFilter === null ||
+ (dateFilter === '1 day' &&
+ new Date(data?.created_at) >=
+ new Date(new Date().setDate(new Date().getDate() - 1))) ||
+ (dateFilter === '1 week' &&
+ new Date(data?.created_at) >=
+ new Date(new Date().setDate(new Date().getDate() - 7))) ||
+ (dateString === '1 month' &&
+ new Date(data?.created_at) >=
+ new Date(new Date().setMonth(new Date().getMonth() - 1))) ||
+ (dateString === '3 month' &&
+ new Date(data?.created_at) >=
+ new Date(new Date().setMonth(new Date().getMonth() - 3))) ||
+ (startDates &&
+ endDates &&
+ new Date(data?.created_at) >= startDates &&
+ new Date(data?.created_at) <= endDates);
+
+ return statusMatch && sideMatch && assetMatch && dateMatch;
+ });
+ setTransactions(filteredTransactions);
+ };
+
+ const handleClearDate = () => {
+ setTransactions(transactionDetails);
+ applyFilters(transactionDetails, tradeDetail, 'All');
+ };
+
+ return (
+
+
+
+
+
+ {STRINGS['P2P.ASSET']}
+
+
handleTransaction('asset', e)}
+ >
+ {STRINGS['P2P.ALL']}
+ {Object?.entries(coins)
+ ?.filter(([_, { symbol }]) =>
+ selectedCurrencies?.includes(symbol)
+ )
+ ?.map(([_, { symbol, fullname, icon_id }]) => (
+
+
+
+ ))}
+
+
+
+
+ {STRINGS['P2P.SIDE']}:
+
+
handleTransaction('trade type', e)}
+ >
+ {trades.map((trade) => (
+
+ {STRINGS[trade]}
+
+ ))}
+
+
+
+
+ {STRINGS['P2P.STATUS']}:
+
+
handleTransaction('status', e)}
+ >
+ {orderStatus.map((status) => (
+
+ {STRINGS[status]}
+
+ ))}
+
+
+
+
+
+ {Object.entries(dateFilters()).map(([key, { name }]) => {
+ const isActive = JSON.stringify(date) === JSON.stringify(name);
+ return (
+ handleDateFilter(name)}
+ >
+ {name}
+
+ );
+ })}
+
+
+
handleDateFilter('custom')}
+ className={
+ date === 'custom'
+ ? 'custom-text-active secondary-text custom-text '
+ : 'custom-text secondary-text'
+ }
+ >
+
+ {STRINGS['P2P.CUSTOM']}
+
+
+
+
+ {isRangePicker && (
+
+ {
+ if (!dates || (dates[0] === null && dates[1] === null)) {
+ handleClearDate();
+ } else {
+ handleDateRange(dates, dateStrings);
+ }
+ }}
+ />
+
+ )}
+
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ coins: state.app.coins,
+ user: state.user,
+});
+
+export default connect(mapStateToProps)(Filter);
diff --git a/web/src/containers/P2P/P2PDash.js b/web/src/containers/P2P/P2PDash.js
index 4699bc8489..6f6a952a4e 100644
--- a/web/src/containers/P2P/P2PDash.js
+++ b/web/src/containers/P2P/P2PDash.js
@@ -1,13 +1,29 @@
-/* eslint-disable */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
-import { ReactSVG } from 'react-svg';
-import { Switch, message } from 'antd';
-import { IconTitle, EditWrapper, Coin } from 'components';
+import {
+ Switch,
+ message,
+ Button,
+ Select,
+ Input,
+ InputNumber,
+ Rate,
+} from 'antd';
+import {
+ PlusSquareOutlined,
+ MinusSquareOutlined,
+ ExclamationOutlined,
+ ExclamationCircleFilled,
+ CloseOutlined,
+} from '@ant-design/icons';
+
+import './_P2P.scss';
+import classnames from 'classnames';
import STRINGS from 'config/localizedStrings';
-import { Button, Select, Input, InputNumber, Modal, Rate } from 'antd';
-// import { Link } from 'react-router';
import withConfig from 'components/ConfigProvider/withConfig';
+import NoDealsData from './Utilis';
+import P2PDashMobile from './P2PDashMobile';
+import { EditWrapper, Dialog, Coin } from 'components';
import {
fetchDeals,
createTransaction,
@@ -17,14 +33,8 @@ import {
import { COUNTRIES_OPTIONS } from 'utils/countries';
import { formatToCurrency } from 'utils/currency';
import { isMobile } from 'react-device-detect';
-import classnames from 'classnames';
-import {
- CloseOutlined,
- PlusSquareOutlined,
- MinusSquareOutlined,
-} from '@ant-design/icons';
import { fetchFeedback, fetchP2PProfile } from './actions/p2pActions';
-import './_P2P.scss';
+import { Loading } from 'containers/DigitalAssets/components/utils';
const P2PDash = ({
data,
@@ -42,6 +52,7 @@ const P2PDash = ({
p2p_config,
setTab,
changeProfileTab,
+ tab,
}) => {
const [expandRow, setExpandRow] = useState(false);
const [selectedDeal, setSelectedDeal] = useState();
@@ -50,22 +61,36 @@ const P2PDash = ({
const [amountCurrency, setAmountCurrency] = useState();
const [amountFiat, setAmountFiat] = useState();
const [filterCoin, setFilterCoin] = useState();
- const [filterDigital, setFilterDigital] = useState();
+ const [filterDigital] = useState();
const [filterRegion, setFilterRegion] = useState();
const [filterAmount, setFilterAmount] = useState();
const [filterMethod, setFilterMethod] = useState();
const [methods, setMethods] = useState([]);
const [loading, setLoading] = useState(false);
const [displayUserFeedback, setDisplayUserFeedback] = useState(false);
+ const [displayOrderCreation, setDisplayOrderCreation] = useState(false);
const [userFeedback, setUserFeedback] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
const [userProfile, setUserProfile] = useState();
const [selectedProfile, setSelectedProfile] = useState();
const [myMethods, setMyMethods] = useState([]);
- const inputRef = useRef(null);
+ // const inputRef = useRef(null);
+ const [isBuySelected, setIsBuySelected] = useState(true);
+ const [buyValue, setBuyValue] = useState([]);
+ const [selectedCoin, setSelectedCoin] = useState('USDT');
+ const [isFilter, setIsFilter] = useState(false);
+
+ const displayAssets = ['USDT', 'XHT', 'BTC', 'ETH'];
+
useEffect(() => {
fetchDeals({ status: true })
.then((res) => {
setDeals(res.data);
+ const buyDeals = res.data?.filter((deal) => deal?.side === 'sell');
+ const filteredDeals = buyDeals?.filter((deal) =>
+ selectedCoin?.includes(deal?.buying_asset?.toUpperCase())
+ );
+ setBuyValue(filteredDeals);
const newMethods = [];
res.data.forEach((deal) => {
@@ -85,8 +110,15 @@ const P2PDash = ({
setMyMethods(res.data);
})
.catch((err) => err);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
+ useEffect(() => {
+ if (tab !== 0 && isMobile) {
+ setIsFilter(false);
+ }
+ }, [tab]);
+
const formatAmount = (currency, amount) => {
const min = coins[currency].min;
const formattedAmount = formatToCurrency(amount, min);
@@ -101,46 +133,92 @@ const P2PDash = ({
return formatAmount(asset, amount);
};
+ const handleToggle = () => {
+ const newIsBuySelected = !isBuySelected;
+ const filteredDeals = deals?.filter((deal) =>
+ !newIsBuySelected ? deal?.side === 'buy' : deal?.side === 'sell'
+ );
+ const cryptoAsset = filteredDeals?.filter((deal) =>
+ selectedCoin?.includes(deal?.buying_asset?.toUpperCase())
+ );
+ setIsBuySelected(newIsBuySelected);
+ setBuyValue(cryptoAsset);
+ };
+
+ const handleCryptoAsset = (asset) => {
+ setSelectedCoin(asset);
+
+ const filteredDeals = deals?.filter((deal) =>
+ !isBuySelected ? deal?.side === 'buy' : deal?.side === 'sell'
+ );
+ const cryptoAsset = filteredDeals?.filter((deal) =>
+ asset?.includes(deal?.buying_asset?.toUpperCase())
+ );
+ setBuyValue(cryptoAsset);
+ };
+
+ const handleVendorFeedback = async (deal) => {
+ // changeProfileTab(deal.merchant);
+ try {
+ setIsLoading(true);
+ setSelectedProfile(deal.merchant);
+ const feedbacks = await fetchFeedback({
+ merchant_id: deal.merchant.id,
+ });
+ const profile = await fetchP2PProfile({
+ user_id: deal.merchant.id,
+ });
+ setUserFeedback(feedbacks.data);
+ setIsLoading(false);
+ setUserProfile(profile);
+ setDisplayUserFeedback(true);
+ } catch (error) {
+ return error;
+ }
+ };
+
+ const filteredDeals = buyValue?.filter(
+ (deal) =>
+ (filterCoin ? filterCoin === deal.spending_asset : true) &&
+ (filterDigital ? filterDigital === deal.buying_asset : true) &&
+ (filterAmount ? filterAmount < deal.max_order_value : true) &&
+ (filterMethod
+ ? deal.payment_methods.find((x) => x.system_name === filterMethod)
+ : true) &&
+ (filterRegion ? filterRegion === deal.region : true)
+ );
+
return (
0
+ ? 'p2p-tab-container'
+ : 'p2p-tab-container p2p-no-deals-container',
+ isMobile ? 'mobile-view-p2p' : '',
+ ]
+ )}
>
{displayUserFeedback && (
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayUserFeedback}
- width={500}
- footer={null}
- onCancel={() => {
+
{
setDisplayUserFeedback(false);
}}
>
-
-
+
+ {isMobile && (
+
{
+ setDisplayUserFeedback(false);
+ }}
+ >
+
+
+ )}
+
{selectedProfile?.full_name || (
@@ -155,73 +233,35 @@ const P2PDash = ({
-
-
-
-
+
+
+
+
{STRINGS['P2P.TOTAL_ORDERS']}
-
- {userProfile?.totalTransactions} times
+
+ {`${userProfile?.totalTransactions} ${STRINGS['P2P.TIMES']}`}
-
-
+
+
{STRINGS['P2P.COMPLETION_RATE']}
-
+
{(userProfile?.completionRate || 0).toFixed(2)}%
-
-
+
+
{STRINGS['P2P.POSITIVE_FEEDBACK']}
-
+
{(userProfile?.positiveFeedbackRate || 0).toFixed(2)}%
@@ -238,48 +278,20 @@ const P2PDash = ({
-
- Feedback({userFeedback.length || 0})
+
+ {STRINGS['P2P.FEEDBACK']}
+ ({userFeedback.length || 0})
- {userFeedback.length == 0 ? (
-
+ {userFeedback.length === 0 ? (
+
{STRINGS['P2P.NO_FEEDBACK']}
) : (
-
-
-
+
+
+
{STRINGS['P2P.COMMENT']}
@@ -292,28 +304,29 @@ const P2PDash = ({
-
- {userFeedback.map((deal) => {
+
+ {userFeedback.map((deal, index) => {
return (
-
-
- {deal.comment}
+
+
+ {isLoading ? (
+
+ ) : (
+ {deal.comment}
+ )}
-
-
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
);
@@ -324,7 +337,148 @@ const P2PDash = ({
-
+
+ )}
+
+ {displayOrderCreation && (
+ setDisplayOrderCreation(false)}
+ className="p2p-order-creation-popup-wrapper"
+ >
+
+
+
+
+
+ {coins[selectedDeal?.buying_asset]?.fullname}
+ ({selectedDeal?.buying_asset?.toUpperCase()})
+
+ {STRINGS['P2P.ORDER_CREATION']}
+
+
+
+
+ 15 {STRINGS['P2P.MINUTES']}
+ ,
+ STRINGS['P2P.COMPLETE_PAYMENT_PROCESS']
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.ORDER_CREATION_DESC_1'],
+ STRINGS['P2P.ORDER_CREATION_DESC_2'],
+ STRINGS['P2P.YOU_HAVE_TEXT'],
+
+ 15 {STRINGS['P2P.MINUTES']}
+ ,
+ STRINGS['P2P.COMPLETE_PAYMENT_PROCESS']
+ )}
+
+
+
+
+
+
+ {STRINGS['WITHDRAW_PAGE.WARNING']?.toUpperCase()}
+
+
+
+
+
+ {STRINGS['P2P.WARINNG_DESC']}
+
+
+
+
+
+ {STRINGS['P2P.ORDER_CANCEL_DESC']}
+
+
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.CONFIRM_ORDER_CREATION'],
+ selectedDeal?.side === 'sell'
+ ? STRINGS['P2P.SEND_MONEY']
+ : STRINGS['P2P.RECEIVE_MONEY']
+ )}
+
+
+
+
+ setDisplayOrderCreation(false)}
+ >
+
+ {STRINGS['BACK_TEXT'].toUpperCase()}
+
+
+ {
+ try {
+ if (amountFiat && selectedMethod) {
+ setLoading(true);
+ const transaction = await createTransaction({
+ deal_id: selectedDeal.id,
+ amount_fiat:
+ selectedDeal.side === 'sell'
+ ? amountFiat
+ : Number(amountCurrency),
+ payment_method_used: selectedMethod,
+ side: selectedDeal.side,
+ });
+ message.success(STRINGS['P2P.ORDER_CREATED']);
+ const transData = await fetchTransactions({
+ id: transaction.id,
+ });
+
+ if (transData.data[0])
+ transData.data[0].first_created = true;
+ setSelectedTransaction(transData.data[0]);
+ setDisplayOrder(true);
+ setLoading(false);
+ } else {
+ message.error(
+ STRINGS['P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT']
+ );
+ setLoading(false);
+ }
+ } catch (error) {
+ message.error(error.data.message);
+ setLoading(false);
+ setDisplayOrderCreation(false);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CREATE_ORDER'].toUpperCase()}
+
+
+
+
+
)}
{/* {STRINGS['P2P.ALL']}
*/}
-
-
-
-
- {STRINGS['P2P.SPEND_FIAT_CURRENCY']}
+
+
+
+ {STRINGS['P2P.I_WANT_TO_BUY']}
-
- {
- setFilterCoin(e);
- }}
- >
- {STRINGS['P2P.ALL']}
- {p2p_config?.fiat_currencies.map((coin) => (
-
- {coin?.toUpperCase()}
-
- ))}
-
-
-
-
- {STRINGS['P2P.AMOUNT']}(Fiat)
-
-
- {
- setFilterAmount(e.target.value);
- }}
- placeholder={STRINGS['P2P.INPUT_FIAT_AMOUNT']}
- />
-
+
+
-
-
-
- {STRINGS['P2P.PAYMENT_METHOD']}
+
+
+ {STRINGS['P2P.I_WANT_TO_SELL']}
-
- {
- setFilterMethod(e);
- }}
- >
- {STRINGS['P2P.ALL']}
- {methods.map((method) => (
-
- {method.system_name}
-
- ))}
-
-
-
-
-
- {STRINGS['P2P.AVAILABLE_REGIONS']}
+
+
+
+
+ {STRINGS['P2P.CRYPTO']}
-
- {
- setFilterRegion(e);
- }}
- >
- {STRINGS['P2P.ALL']}
- {COUNTRIES_OPTIONS.filter((cn) =>
- deals?.find((deal) => deal.region === cn.value)
- ).map((cn) => (
- {cn.label}
- ))}
-
-
+ {displayAssets?.map((asset) => {
+ return (
+
handleCryptoAsset(asset)}
+ >
+ {asset}
+
+ );
+ })}
-
-
setIsFilter(!isFilter)}
>
-
-
-
-
- {STRINGS['P2P.VENDOR']}
-
-
-
-
- {STRINGS['P2P.PRICE_LOWEST_FIRST']}
-
-
-
-
- {STRINGS['P2P.LIMIT_AVAILABLE']}
-
-
-
-
- {STRINGS['P2P.PAYMENT']}
-
-
-
-
- {STRINGS['P2P.TRADE']}
-
-
-
-
-
- {deals
- .filter(
- (deal) =>
- (filterCoin ? filterCoin === deal.spending_asset : true) &&
- (filterDigital
- ? filterDigital === deal.buying_asset
- : true) &&
- (filterAmount ? filterAmount < deal.max_order_value : true) &&
- (filterMethod
- ? deal.payment_methods.find(
- (x) => x.system_name === filterMethod
- )
- : true) &&
- (filterRegion ? filterRegion === deal.region : true)
- )
- .map((deal) => {
- return (
- <>
-
- {
- setExpandRow(!expandRow);
- setSelectedDeal(deal);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- className="td-fit"
- >
-
- {expandRow ? (
-
- ) : (
-
- )}
- {' '}
-
- {deal.merchant.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}
-
-
- {
- setExpandRow(!expandRow);
- setSelectedDeal(deal);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- className="td-fit"
- >
- {formatRate(
- deal.exchange_rate,
- deal.spread,
- deal.spending_asset,
- deal.side
- )}{' '}
- {deal.spending_asset.toUpperCase()}
-
- {
- setExpandRow(!expandRow);
- setSelectedDeal(deal);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- >
- <>
-
-
- {STRINGS['P2P.AVAILABLE']}
-
- : {deal.total_order_amount}{' '}
- {deal.buying_asset.toUpperCase()}
-
-
-
- {STRINGS['P2P.LIMIT']}
-
- : {deal.min_order_value} - {deal.max_order_value}{' '}
- {deal.spending_asset.toUpperCase()}
-
- >
-
- {
- setExpandRow(!expandRow);
- setSelectedDeal(deal);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- >
- {deal.payment_methods
- .map((method) => method.system_name)
- .join(', ')}
-
-
- {!(
- expandRow &&
- expandRow &&
- deal.id === selectedDeal.id
- ) && (
-
- {
- try {
- if (!expandRow && deal.id !== selectedDeal) {
- setExpandRow(true);
- setSelectedDeal(deal);
- return;
- }
- if (amountFiat && selectedMethod) {
- setLoading(true);
- const transaction = await createTransaction(
- {
- deal_id: selectedDeal.id,
- amount_fiat:
- selectedDeal.side === 'sell'
- ? amountFiat
- : amountCurrency,
- payment_method_used: selectedMethod,
- side: selectedDeal.side,
- }
- );
- message.success(
- STRINGS['P2P.ORDER_CREATED']
- );
- const transData = await fetchTransactions({
- id: transaction.id,
- });
-
- setSelectedTransaction(transData.data[0]);
- setDisplayOrder(true);
- setLoading(false);
- } else {
- message.error(
- STRINGS[
- 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
- ]
- );
- setLoading(false);
- }
- } catch (error) {
- message.error(error.data.message);
- setLoading(false);
- }
- }}
- >
- {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
- {deal.buying_asset.toUpperCase()} {'>'}
-
-
- )}
-
-
- {expandRow && expandRow && deal.id === selectedDeal.id && (
+
+
+ {isFilter
+ ? STRINGS['P2P.HIDE_FILTERS']
+ : STRINGS['P2P.SHOW_FILTERS']}
+
+
+
+ )}
+ {!isMobile && (
+
+
+
+ {STRINGS['P2P.SPEND_FIAT_CURRENCY']}:
+
+
+ {
+ setFilterCoin(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {p2p_config?.fiat_currencies.map((coin) => (
+
+ {coin?.toUpperCase()}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.AMOUNT']}:
+
+
+ {
+ setFilterAmount(e.target.value);
+ }}
+ placeholder={
+ isBuySelected
+ ? STRINGS['P2P.INPUT_SPEND_AMOUNT']
+ : STRINGS['P2P.INPUT_SELL_AMOUNT']
+ }
+ // suffix={STRINGS['WALLET_ASSETS_SEARCH_TXT']}
+ />
+
+
+
+
+ {STRINGS['P2P.PAYMENT_METHOD']}:
+
+
+ {
+ setFilterMethod(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {methods.map((method) => (
+
+ {method.system_name}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.AVAILABLE_REGIONS']}:
+
+
+ {
+ setFilterRegion(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {COUNTRIES_OPTIONS.filter((cn) =>
+ deals?.find((deal) => deal.region === cn.value)
+ ).map((cn) => (
+ {cn.label}
+ ))}
+
+
+
+
+ )}
+ {isMobile && isFilter && (
+
+
+
+ {STRINGS['P2P.SPEND_FIAT_CURRENCY']}:
+
+
+ {
+ setFilterCoin(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {p2p_config?.fiat_currencies.map((coin) => (
+
+ {coin?.toUpperCase()}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.AMOUNT']}:
+
+
+ {
+ setFilterAmount(e.target.value);
+ }}
+ placeholder={
+ isBuySelected
+ ? STRINGS['P2P.INPUT_SPEND_AMOUNT']
+ : STRINGS['P2P.INPUT_SELL_AMOUNT']
+ }
+ // suffix={STRINGS['WALLET_ASSETS_SEARCH_TXT']}
+ />
+
+
+
+
+ {STRINGS['P2P.PAYMENT_METHOD']}:
+
+
+ {
+ setFilterMethod(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {methods.map((method) => (
+
+ {method.system_name}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.AVAILABLE_REGIONS']}:
+
+
+ {
+ setFilterRegion(e);
+ }}
+ >
+ {STRINGS['P2P.ALL']}
+ {COUNTRIES_OPTIONS.filter((cn) =>
+ deals?.find((deal) => deal.region === cn.value)
+ ).map((cn) => (
+ {cn.label}
+ ))}
+
+
+
+
+ )}
+ {filteredDeals?.length > 0 ? (
+ !isMobile ? (
+
+
+
+
+
+
+ {STRINGS['P2P.VENDOR']}
+
+
+
+
+ {STRINGS['P2P.PRICE_LOWEST_FIRST']}
+
+
+
+
+ {STRINGS['P2P.LIMIT_AVAILABLE']}
+
+
+
+
+ {STRINGS['P2P.PAYMENT']}
+
+
+
+
+ {STRINGS['P2P.TRADE']}
+
+
+
+
+
+ {filteredDeals?.map((deal) => {
+ return (
+ <>
{
+ setExpandRow(!expandRow);
+ setSelectedDeal(deal);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
+ }}
+ className="td-fit vendor-title"
>
- {
- // changeProfileTab(deal.merchant);
-
- try {
- setSelectedProfile(deal.merchant);
- const feedbacks = await fetchFeedback({
- merchant_id: deal.merchant.id,
- });
- const profile = await fetchP2PProfile({
- user_id: deal.merchant.id,
- });
- setUserFeedback(feedbacks.data);
- setUserProfile(profile);
- setDisplayUserFeedback(true);
- } catch (error) {
- return error;
- }
- }}
- style={{
- position: 'relative',
- bottom: 40,
- cursor: 'pointer',
- }}
- >
- (
-
- {STRINGS['P2P.VIEW_PROFILE']}
+
+ {expandRow && deal.id === selectedDeal.id ? (
+
+ ) : (
+
+ )}
+ {' '}
+
+ {deal.merchant.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+ {
+ setExpandRow(!expandRow);
+ setSelectedDeal(deal);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
+ }}
+ className="td-fit price-value"
+ >
+ {`${formatRate(
+ deal.exchange_rate,
+ deal.spread,
+ deal.spending_asset,
+ deal.side
+ )}`} {' '}
+ {deal.spending_asset.toUpperCase()}
+
+ {
+ setExpandRow(!expandRow);
+ setSelectedDeal(deal);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
+ }}
+ >
+
+
+ {STRINGS['P2P.AVAILABLE']}:
- )
+
+
+ {STRINGS['P2P.LIMIT']}:
+
+
-
- {STRINGS['P2P.PAYMENT_TIME_LIMIT']}
-
-
-
- {STRINGS['P2P.TERMS_CONDITIONS']}
-
- : {deal.terms}
+
+
+
+ {deal.total_order_amount}{' '}
+
+ {deal.buying_asset.toUpperCase()}
+
+
+
+
+ {deal.min_order_value} - {deal.max_order_value}{' '}
+
+ {deal.spending_asset.toUpperCase()}
+
-
- {
+ setExpandRow(!expandRow);
+ setSelectedDeal(deal);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
}}
- >
-
- {selectedDeal?.side === 'sell' ? (
-
-
-
- {STRINGS['P2P.SELECT_PAYMENT_METHOD']}
-
-
- {
- setSelectedMethod(
- deal.payment_methods.find(
- (x) => x.system_name === e
- )
+
+ {deal.payment_methods
+ .map((method) => method.system_name)
+ .join(', ')}
+
+
+
+ {!(
+ expandRow &&
+ expandRow &&
+ deal.id === selectedDeal.id
+ ) && (
+
+ {
+ try {
+ if (
+ !expandRow &&
+ deal.id !== selectedDeal
+ ) {
+ setExpandRow(true);
+ setSelectedDeal(deal);
+ return;
+ }
+ if (amountFiat && selectedMethod) {
+ setLoading(true);
+ const transaction = await createTransaction(
+ {
+ deal_id: selectedDeal.id,
+ amount_fiat:
+ selectedDeal.side === 'sell'
+ ? amountFiat
+ : amountCurrency,
+ payment_method_used: selectedMethod,
+ side: selectedDeal.side,
+ }
);
- }}
- >
- {deal.payment_methods.map((method) => {
- return (
-
- {method.system_name}
-
+ message.success(
+ STRINGS['P2P.ORDER_CREATED']
);
- })}
-
-
-
-
-
-
-
- {STRINGS['P2P.SPEND_AMOUNT']}
- {' '}
- ({deal.spending_asset.toUpperCase()})
-
-
-
- {
- setAmountFiat(e);
- const currencyAmount =
- Number(e) /
- Number(
- deal.exchange_rate *
- (1 + Number(deal.spread / 100 || 0))
- );
-
- const formatted = formatAmount(
- deal.buying_asset,
- currencyAmount
+ const transData = await fetchTransactions(
+ {
+ id: transaction.id,
+ }
+ );
+ setSelectedTransaction(transData.data[0]);
+ setDisplayOrder(true);
+ setLoading(false);
+ } else {
+ message.error(
+ STRINGS[
+ 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
+ ]
);
-
- setAmountCurrency(formatted);
- }}
- placeholder={deal.spending_asset.toUpperCase()}
- />
-
-
-
-
-
- {STRINGS['P2P.AMOUNT_TO_RECEIVE']}
- {' '}
- ({deal.buying_asset.toUpperCase()})
-
-
-
-
-
-
-
- {
- setExpandRow(false);
- setSelectedDeal(null);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- >
-
- {STRINGS['P2P.CANCEL']}
-
-
-
- {
- try {
- if (
- !expandRow &&
- deal.id !== selectedDeal
- ) {
- setExpandRow(true);
- setSelectedDeal(deal);
- return;
- }
- if (amountFiat && selectedMethod) {
- setLoading(true);
- const transaction = await createTransaction(
- {
- deal_id: selectedDeal.id,
- amount_fiat:
- selectedDeal.side === 'sell'
- ? amountFiat
- : amountCurrency,
- payment_method_used: selectedMethod,
- side: selectedDeal.side,
- }
- );
- message.success(
- STRINGS['P2P.ORDER_CREATED']
- );
- const transData = await fetchTransactions(
- {
- id: transaction.id,
- }
- );
-
- setSelectedTransaction(
- transData.data[0]
- );
- setDisplayOrder(true);
- setLoading(false);
- } else {
- message.error(
- STRINGS[
- 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
- ]
- );
- setLoading(false);
- }
- } catch (error) {
- message.error(error.data.message);
setLoading(false);
}
- }}
- >
- {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
- {deal.buying_asset.toUpperCase()} {'>'}
-
-
+ } catch (error) {
+ message.error(error.data.message);
+ setLoading(false);
+ }
+ }}
+ >
+ {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
+ {deal.buying_asset.toUpperCase()} {'>'}
+
- ) : (
+ )}
+
+
+ {expandRow && expandRow && deal.id === selectedDeal.id && (
+
+
handleVendorFeedback(deal)}
>
-
+ ({STRINGS['P2P.VIEW_PROFILE']})
+
+
+
+
-
- {STRINGS['P2P.SELECT_PAYMENT_METHOD']}
-
- {deal?.payment_methods?.filter((a) =>
- myMethods?.find(
- (x) =>
- x.name.toLowerCase() ===
- a.system_name?.toLowerCase()
- )
- ).length === 0 && (
-
- {
- setTab('2');
- }}
- className="purpleButtonP2P"
- >
-
- {STRINGS['P2P.ADD_PAYMENT_METHOD']}
-
-
+ {STRINGS.formatString(
+ STRINGS['P2P.PAYMENT_TIME_LIMIT_LABEL'],
+
+ {STRINGS['P2P.30_MINUTES']}
)}
- {deal?.payment_methods?.filter((a) =>
- myMethods?.find(
- (x) =>
- x.name.toLowerCase() ===
- a.system_name?.toLowerCase()
- )
- ).length > 0 && (
-
+
+
+
+
+ {STRINGS['P2P.TERMS_CONDITIONS']}:
+
+
+ {deal.terms}
+
+
+
+
+ {selectedDeal?.side === 'sell' ? (
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHOD']}:
+
+
{
setSelectedMethod(
- myMethods.find((x) => x.name === e)
- .details
+ deal.payment_methods.find(
+ (x) => x.system_name === e
+ )
);
}}
>
- {deal?.payment_methods
- ?.filter((a) =>
- myMethods?.find(
- (x) =>
- x.name.toLowerCase() ===
- a.system_name?.toLowerCase()
- )
- )
- .map((method) => {
- return (
-
- {method.system_name}
-
- );
- })}
+ {deal.payment_methods.map((method) => {
+ return (
+
+ {method.system_name}
+
+ );
+ })}
- )}
-
+
-
-
-
- {STRINGS['P2P.SELL_AMOUNT']}
- {' '}
- ({deal.buying_asset.toUpperCase()})
-
+
+
+
+ {STRINGS['P2P.SPEND_AMOUNT']}
+ {' '}
+ ({deal.spending_asset.toUpperCase()}):
+
-
- {
- setAmountFiat(e);
- const currencyAmount =
- Number(e) *
- Number(
- deal.exchange_rate *
- (1 - Number(deal.spread / 100 || 0))
- );
+
+ amountFiat ||
+ deal.max_order_value < amountFiat
+ ? 'error-field amount-spent-field'
+ : 'amount-spent-field'
+ }
+ value={amountFiat}
+ onChange={(e) => {
+ setAmountFiat(e);
+ const currencyAmount =
+ Number(e) /
+ Number(
+ deal.exchange_rate *
+ (1 +
+ Number(deal.spread / 100 || 0))
+ );
- const formatted = formatAmount(
- deal.spending_asset,
- currencyAmount
- );
+ const formatted = formatAmount(
+ deal.buying_asset,
+ currencyAmount
+ );
- setAmountCurrency(formatted);
- }}
- placeholder={deal.buying_asset.toUpperCase()}
- />
-
-
-
-
-
- {STRINGS['P2P.AMOUNT_TO_RECEIVE']}
- {' '}
- ({deal.spending_asset.toUpperCase()})
-
+ setAmountCurrency(formatted);
+ }}
+ placeholder={deal.spending_asset.toUpperCase()}
+ autoFocus={true}
+ />
+
+
+
+ {deal.min_order_value > amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS[
+ 'P2P.MINIMUM_AMOUNT_WARNING'
+ ],
+ STRINGS[
+ 'P2P.SPEND_AMOUNT'
+ ].toLowerCase(),
+ deal.min_order_value
+ )}
+
+
+
+ )}
+ {deal.max_order_value < amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS[
+ 'P2P.MAXIMUM_AMOUNT_WARNING'
+ ],
+ STRINGS[
+ 'P2P.SPEND_AMOUNT'
+ ].toLowerCase(),
+ deal.max_order_value
+ )}
+
+
+
+ )}
+
+
+
+ {deal.min_order_value <= amountFiat &&
+ deal.max_order_value >= amountFiat &&
+ !selectedMethod?.system_name && (
+
+
+
+
+ {
+ STRINGS[
+ 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
+ ]
+ }
+
+
+
+ )}
+
+
+
-
+ onClick={async () => {
+ setExpandRow(false);
+ setSelectedDeal(null);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
+ }}
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+ amountFiat ||
+ deal.max_order_value < amountFiat
+ }
+ onClick={async () => {
+ try {
+ if (
+ !expandRow &&
+ deal.id !== selectedDeal
+ ) {
+ setExpandRow(true);
+ setSelectedDeal(deal);
+ return;
+ } else {
+ setDisplayOrderCreation(true);
+ }
+ } catch (error) {
+ // message.error(error.data.message);
+ setLoading(false);
+ }
+ }}
+ >
+ {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
+ {deal.buying_asset.toUpperCase()} {'>'}
+
+
-
-
{
- setExpandRow(false);
- setSelectedDeal(null);
- setAmountCurrency();
- setSelectedMethod();
- setAmountFiat();
- }}
- >
-
- {STRINGS['P2P.CANCEL']}
+ ) : (
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHOD']}
-
+ {deal?.payment_methods?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ ).length === 0 && (
+
+ {
+ setTab('2');
+ }}
+ className="purpleButtonP2P add-payment-button w-100"
+ >
+
+ {STRINGS['P2P.ADD_PAYMENT_METHOD']}
+
+
+
+ )}
+ {deal?.payment_methods?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ ).length > 0 && (
+
+ {
+ setSelectedMethod(
+ myMethods.find((x) => x.name === e)
+ .details
+ );
+ }}
+ >
+ {deal?.payment_methods
+ ?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ )
+ .map((method) => {
+ return (
+
+ {method.system_name}
+
+ );
+ })}
+
+
+ )}
+
-
{
- try {
- if (
- !expandRow &&
- deal.id !== selectedDeal
- ) {
- setExpandRow(true);
- setSelectedDeal(deal);
- return;
+
+
+
+
+ {STRINGS['P2P.SELL_AMOUNT']}
+ {' '}
+ ({deal.buying_asset.toUpperCase()})
+
+
+
+
+
+ amountFiat ||
+ deal.max_order_value < amountFiat
+ ? 'error-field amount-spent-field'
+ : 'amount-spent-field'
}
- if (amountFiat && selectedMethod) {
- setLoading(true);
- const transaction = await createTransaction(
- {
- deal_id: selectedDeal.id,
- amount_fiat:
- selectedDeal.side === 'sell'
- ? amountFiat
- : Number(amountCurrency),
- payment_method_used: selectedMethod,
- side: selectedDeal.side,
- }
- );
- message.success(
- STRINGS['P2P.ORDER_CREATED']
- );
- const transData = await fetchTransactions(
- {
- id: transaction.id,
- }
- );
+ value={amountFiat}
+ onChange={(e) => {
+ setAmountFiat(e);
+ const currencyAmount =
+ Number(e) *
+ Number(
+ deal.exchange_rate *
+ (1 -
+ Number(deal.spread / 100 || 0))
+ );
- setSelectedTransaction(
- transData.data[0]
+ const formatted = formatAmount(
+ deal.spending_asset,
+ currencyAmount
);
- setDisplayOrder(true);
- setLoading(false);
- } else {
- message.error(
+
+ setAmountCurrency(formatted);
+ }}
+ placeholder={deal.buying_asset.toUpperCase()}
+ autoFocus={true}
+ />
+
+
+
+ {deal.min_order_value > amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS[
+ 'P2P.MINIMUM_AMOUNT_WARNING'
+ ],
+ STRINGS[
+ 'P2P.SPEND_AMOUNT'
+ ].toLowerCase(),
+ deal.min_order_value
+ )}
+
+
+
+ )}
+ {deal.max_order_value < amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS[
+ 'P2P.MAXIMUM_AMOUNT_WARNING'
+ ],
+ STRINGS[
+ 'P2P.SPEND_AMOUNT'
+ ].toLowerCase(),
+ deal.max_order_value
+ )}
+
+
+
+ )}
+
+
+
+
+ {STRINGS['P2P.AMOUNT_TO_RECEIVE']}
+ {' '}
+ ({deal.spending_asset.toUpperCase()})
+
+
+
+
+
+
+
+ {deal.min_order_value <= amountFiat &&
+ deal.max_order_value >= amountFiat &&
+ !selectedMethod?.system_name && (
+
+
+
+
+ {
+ STRINGS[
+ 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
+ ]
+ }
+
+
+
+ )}
+
+
+ {
+ setExpandRow(false);
+ setSelectedDeal(null);
+ setAmountCurrency();
+ setSelectedMethod();
+ setAmountFiat();
+ }}
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+
+ amountFiat ||
+ deal.max_order_value < amountFiat
+ }
+ onClick={async () => {
+ try {
+ if (
+ !expandRow &&
+ deal.id !== selectedDeal
+ ) {
+ setExpandRow(true);
+ setSelectedDeal(deal);
+ return;
+ } else {
+ setDisplayOrderCreation(true);
+ }
+ } catch (error) {
+ message.error(error.data.message);
setLoading(false);
}
- } catch (error) {
- message.error(error.data.message);
- setLoading(false);
- }
- }}
- >
- {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
- {deal.buying_asset.toUpperCase()} {'>'}
-
+ }}
+ >
+ {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
+ {deal.buying_asset.toUpperCase()} {'>'}
+
+
-
- )}
-
-
- )}
- >
- );
- })}
-
-
-
+ )}
+
+
+ )}
+ >
+ );
+ })}
+
+
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
);
};
diff --git a/web/src/containers/P2P/P2PDashMobile.js b/web/src/containers/P2P/P2PDashMobile.js
new file mode 100644
index 0000000000..6b289fbd5d
--- /dev/null
+++ b/web/src/containers/P2P/P2PDashMobile.js
@@ -0,0 +1,578 @@
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import { Button, Input, InputNumber, message, Select } from 'antd';
+import { CloseOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+
+import STRINGS from 'config/localizedStrings';
+import withConfig from 'components/ConfigProvider/withConfig';
+import { Coin, Dialog, EditWrapper } from 'components';
+
+const P2PDashMobile = ({
+ buyValue,
+ filterCoin,
+ filterAmount,
+ filterMethod,
+ filterRegion,
+ filterDigital,
+ formatRate,
+ amountFiat,
+ amountCurrency,
+ selectedDeal,
+ selectedMethod,
+ setSelectedDeal,
+ setDisplayOrderCreation,
+ setAmountCurrency,
+ setAmountFiat,
+ setSelectedMethod,
+ formatAmount,
+ coins,
+ handleVendorFeedback,
+ userProfile,
+ myMethods,
+ setTab,
+}) => {
+ const [displayTrading, setDisplayTrading] = useState(false);
+
+ const handleCloseTrading = () => {
+ setDisplayTrading(false);
+ setSelectedMethod();
+ setAmountCurrency();
+ setAmountFiat();
+ setSelectedDeal();
+ };
+
+ return (
+
+ {buyValue
+ ?.filter(
+ (deal) =>
+ (filterCoin ? filterCoin === deal.spending_asset : true) &&
+ (filterDigital ? filterDigital === deal.buying_asset : true) &&
+ (filterAmount ? filterAmount < deal.max_order_value : true) &&
+ (filterMethod
+ ? deal.payment_methods.find((x) => x.system_name === filterMethod)
+ : true) &&
+ (filterRegion ? filterRegion === deal.region : true)
+ )
+ .map((deal) => {
+ return (
+ <>
+ {displayTrading && (
+
handleCloseTrading()}
+ className="trading-popup-wrapper fs-16"
+ >
+
+
+
+
+ {selectedDeal.side === 'sell'
+ ? STRINGS['P2P.BUY_COIN']
+ : STRINGS['P2P.SELL_COIN']}
+
+
+ {selectedDeal?.buying_asset.toUpperCase()}{' '}
+
+
+
+ @{STRINGS['P2P.PRICE']}
+
+
+
+ {formatRate(
+ selectedDeal?.exchange_rate,
+ selectedDeal?.spread,
+ selectedDeal?.spending_asset,
+ selectedDeal?.side
+ )}
+
+
+ {selectedDeal?.spending_asset.toUpperCase()}
+
+
+
handleCloseTrading()}
+ >
+
+
+
+
+
+
+
+ {STRINGS['P2P.SPEND_AMOUNT']}
+
+ :
+
+
+
+ {' '}
+ {selectedDeal?.spending_asset.toUpperCase()}
+
+
+
+
+ amountFiat ||
+ selectedDeal?.max_order_value < amountFiat
+ ? 'error-field amount-spent-field w-50'
+ : 'amount-spent-field w-50'
+ }
+ value={amountFiat}
+ onChange={(e) => {
+ setAmountFiat(e);
+ const currencyAmount =
+ Number(e) /
+ Number(
+ selectedDeal?.exchange_rate *
+ (1 +
+ Number(selectedDeal?.spread / 100 || 0))
+ );
+
+ const formatted = formatAmount(
+ selectedDeal?.buying_asset,
+ currencyAmount
+ );
+
+ setAmountCurrency(formatted);
+ }}
+ placeholder="0"
+ autoFocus={true}
+ />
+
+
+
+ {selectedDeal?.min_order_value > amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.MINIMUM_AMOUNT_WARNING'],
+ STRINGS['P2P.SPEND_AMOUNT'].toLowerCase(),
+ selectedDeal?.min_order_value
+ )}
+
+
+
+ )}
+ {selectedDeal?.max_order_value < amountFiat && (
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.MAXIMUM_AMOUNT_WARNING'],
+ STRINGS['P2P.SPEND_AMOUNT'].toLowerCase(),
+ selectedDeal?.max_order_value
+ )}
+
+
+
+ )}
+
+
+
+
+
+ {STRINGS['P2P.AMOUNT_TO_RECEIVE']}
+
+
+
+
+
+ {' '}
+ {selectedDeal?.buying_asset.toUpperCase()}
+
+
+
+
+
+
+
+
+ {selectedDeal?.side === 'sell' ? (
+
+ = amountFiat &&
+ !selectedMethod?.system_name
+ ? 'payment-method-field payment-method-error-field w-100'
+ : 'payment-method-field w-100'
+ }
+ dropdownClassName="p2p-custom-style-dropdown"
+ placeholder="Payment Method"
+ value={selectedMethod?.system_name}
+ onChange={(e) => {
+ setSelectedMethod(
+ deal.payment_methods.find(
+ (x) => x.system_name === e
+ )
+ );
+ }}
+ >
+ {selectedDeal?.payment_methods.map((method) => {
+ return (
+
+ {method.system_name}
+
+ );
+ })}
+
+
+ ) : selectedDeal?.payment_methods?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ ).length === 0 ? (
+
+ {
+ setTab('2');
+ setDisplayTrading(false);
+ }}
+ className="purpleButtonP2P add-payment-button w-100"
+ >
+
+ {STRINGS['P2P.ADD_PAYMENT_METHOD']}
+
+
+
+ ) : (
+ selectedDeal?.payment_methods?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ ).length > 0 && (
+
+ = amountFiat &&
+ !selectedMethod?.system_name
+ ? 'payment-method-field payment-method-error-field w-100'
+ : 'payment-method-field w-100'
+ }
+ dropdownClassName="p2p-custom-style-dropdown"
+ showSearch
+ placeholder="Payment Method"
+ value={selectedMethod?.system_name}
+ onChange={(e) => {
+ setSelectedMethod(
+ myMethods.find((x) => x.name === e).details
+ );
+ }}
+ >
+ {selectedDeal?.payment_methods
+ ?.filter((a) =>
+ myMethods?.find(
+ (x) =>
+ x.name.toLowerCase() ===
+ a.system_name?.toLowerCase()
+ )
+ )
+ .map((method) => {
+ return (
+
+ {method.system_name}
+
+ );
+ })}
+
+
+ )
+ )}
+ amountFiat ||
+ selectedDeal?.max_order_value < amountFiat
+ }
+ onClick={async () => {
+ try {
+ setDisplayOrderCreation(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+ {selectedDeal?.side === 'sell' ? 'BUY' : 'SELL'}{' '}
+ {selectedDeal?.buying_asset.toUpperCase()} {'>'}
+
+
+
+
+ {selectedDeal?.min_order_value <= amountFiat &&
+ selectedDeal?.max_order_value >= amountFiat &&
+ !selectedMethod?.system_name && (
+
+
+
+
+ {
+ STRINGS[
+ 'P2P.SELECT_PAYMENT_METHOD_AND_AMOUNT'
+ ]
+ }
+
+
+
+ )}
+
+
+
+
+ {STRINGS['P2P.AVAILABLE']}:
+
+
+ {selectedDeal?.total_order_amount}{' '}
+
+
+ {selectedDeal?.buying_asset.toUpperCase()}
+
+
+
+
+
+ {STRINGS['P2P.LIMIT']}:
+
+
+
+ {selectedDeal?.min_order_value} -{' '}
+ {selectedDeal?.max_order_value}{' '}
+
+
+ {selectedDeal?.spending_asset.toUpperCase()}
+
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.VENDOR']}:
+
+
+ {selectedDeal?.merchant.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+ {(userProfile?.positiveFeedbackRate || 0).toFixed(
+ 2
+ )}
+ %
+
+
+
handleVendorFeedback(selectedDeal)}
+ >
+
+ (
+
+ {STRINGS['VIEW']?.toUpperCase()}
+
+ )
+
+
+
+
+
+ {STRINGS['P2P.ORDERS_COMPLETED']}
+
+
+ {userProfile?.totalTransactions}
+
+
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.PAYMENT_TIME_LIMIT_LABEL'],
+
+ {STRINGS['P2P.30_MINUTES']}
+
+ )}
+
+
+
+
+ {STRINGS['P2P.TERMS_CONDITIONS']}:
+
+
+ {selectedDeal?.terms}
+
+
+
+
+
+ )}
+
+
+ {deal.merchant.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+ {`${formatRate(
+ deal.exchange_rate,
+ deal.spread,
+ deal.spending_asset,
+ deal.side
+ )}`}
+
+ {deal.spending_asset.toUpperCase()}
+
+
+
+
+ {STRINGS['P2P.AVAILABLE']}:
+
+
+ {deal.total_order_amount}{' '}
+
+
+ {deal.buying_asset.toUpperCase()}
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.LIMIT']}:
+
+
+
+ {deal.min_order_value} - {deal.max_order_value}{' '}
+
+
+ {deal.spending_asset.toUpperCase()}
+
+
+
+
+
+
+
+
+ {deal.payment_methods
+ .map((method) => method.system_name)
+ .join(', ')}
+
+
+
+ {
+ setDisplayTrading(true);
+ setSelectedDeal(deal);
+ }}
+ >
+ {deal.side === 'sell' ? 'BUY' : 'SELL'}{' '}
+ {deal.buying_asset.toUpperCase()} {'>'}
+
+
+
+
+ >
+ );
+ })}
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ coins: state.app.coins,
+});
+
+export default connect(mapStateToProps)(withConfig(P2PDashMobile));
diff --git a/web/src/containers/P2P/P2PMyDeals.js b/web/src/containers/P2P/P2PMyDeals.js
index cd1036cd6c..4a744912ed 100644
--- a/web/src/containers/P2P/P2PMyDeals.js
+++ b/web/src/containers/P2P/P2PMyDeals.js
@@ -1,17 +1,18 @@
-/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
-// import { ReactSVG } from 'react-svg';
+import { isMobile } from 'react-device-detect';
+import { Button, Checkbox, message } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
-import { IconTitle, EditWrapper } from 'components';
+import './_P2P.scss';
+import classnames from 'classnames';
import STRINGS from 'config/localizedStrings';
import withConfig from 'components/ConfigProvider/withConfig';
-import { Button, Checkbox, message } from 'antd';
+import NoDealsData from './Utilis';
+import { Coin, Dialog, EditWrapper } from 'components';
import { fetchDeals, editDeal, removeDeal } from './actions/p2pActions';
import { formatToCurrency } from 'utils/currency';
-import { isMobile } from 'react-device-detect';
-import classnames from 'classnames';
-import './_P2P.scss';
+
const P2PMyDeals = ({
data,
onClose,
@@ -28,6 +29,8 @@ const P2PMyDeals = ({
}) => {
const [myDeals, setMyDeals] = useState([]);
const [checks, setCheks] = useState([]);
+ const [dealRemoveConfirmation, setDealRemoveConfirmation] = useState(false);
+
useEffect(() => {
fetchDeals({ user_id: user.id })
.then((res) => {
@@ -53,16 +56,61 @@ const P2PMyDeals = ({
return (
0
+ ? 'p2p-mydeals-wrapper w-100'
+ : 'p2p-mydeals-wrapper w-100 p2p-no-deals-container',
+ isMobile ? 'mobile-view-p2p' : '',
+ ]
+ )}
>
-
-
+ setDealRemoveConfirmation(false)}
+ className="confirmation-remove-deal-popup-wrapper"
+ >
+
+
+
+ {STRINGS['P2P.REMOVE_WARNING']}
+
+
+
+ setDealRemoveConfirmation(false)}
+ >
+ {STRINGS['CANCEL_WITHDRAWAL']?.toUpperCase()}
+
+ {
+ try {
+ await removeDeal({
+ removed_ids: checks,
+ status: false,
+ });
+ setMyDeals(
+ myDeals?.filter((deal) => !checks?.includes(deal?.id))
+ );
+ setCheks([]);
+ message.success(STRINGS['P2P.CHANGES_SAVED']);
+ } catch (error) {
+ message.error(error.message);
+ }
+ setDealRemoveConfirmation(false);
+ }}
+ >
+ {STRINGS['CONFIRM_TEXT']?.toUpperCase()}
+
+
+
+
+
+
+
{
if (e.target.checked) {
@@ -71,8 +119,7 @@ const P2PMyDeals = ({
setCheks([]);
}
}}
- style={{ position: 'relative', top: 5 }}
- className="whiteTextP2P"
+ className={isMobile ? 'fs-24 whiteTextP2P' : 'whiteTextP2P'}
>
{myDeals.length === 0 ? (
@@ -87,7 +134,9 @@ const P2PMyDeals = ({
{
try {
await editDeal({
@@ -110,7 +159,9 @@ const P2PMyDeals = ({
{
try {
await editDeal({
@@ -133,20 +184,10 @@ const P2PMyDeals = ({
{
- try {
- await removeDeal({
- removed_ids: checks,
- status: false,
- });
- setMyDeals(myDeals.filter((deal) => !checks.includes(deal.id)));
- setCheks([]);
- message.success(STRINGS['P2P.CHANGES_SAVED']);
- } catch (error) {
- message.error(error.message);
- }
- }}
+ className={
+ isMobile ? 'fs-24 purpleButtonP2P h-100' : 'purpleButtonP2P'
+ }
+ onClick={() => setDealRemoveConfirmation(true)}
>
{STRINGS['P2P.REMOVE']}
@@ -154,157 +195,159 @@ const P2PMyDeals = ({
-
-
-
-
-
-
-
- {STRINGS['P2P.EDIT']}
-
-
-
-
- {STRINGS['P2P.SIDE']}
-
-
-
-
- {STRINGS['P2P.STATUS']}
-
-
-
-
- {STRINGS['P2P.PRICE_DISPLAYED']}
-
-
-
-
- {STRINGS['P2P.LIMIT_AVAILABLE']}
-
-
-
-
- {STRINGS['P2P.PAYMENT']}
-
-
-
-
- {STRINGS['P2P.EDIT_DEAL']}
-
-
-
-
-
- {myDeals.map((deal) => {
- return (
-
-
- id === deal.id)}
- onChange={(e) => {
- if (e.target.checked) {
- if (!checks.find((id) => id === deal.id))
- setCheks([...checks, deal.id]);
- } else {
- setCheks(checks.filter((id) => id !== deal.id));
- }
- }}
- />
-
-
-
-
+ {myDeals?.length > 0 ? (
+
+
+
+
+
+
+ {STRINGS['P2P.SIDE']}
+
+
+
+
+ {STRINGS['P2P.STATUS']}
+
+
+
+
+ {STRINGS['P2P.PRICE_DISPLAYED']}
+
+
+
+
+ {STRINGS['P2P.LIMIT_AVAILABLE']}
+
+
+
+
+ {STRINGS['P2P.PAYMENT']}
+
+
+
+
+ {STRINGS['P2P.EDIT_DEAL']}
+
+
+
+
+
+ {myDeals.map((deal) => {
+ return (
+
+
+ id === deal.id)}
+ onChange={(e) => {
+ if (e.target.checked) {
+ if (!checks.find((id) => id === deal.id))
+ setCheks([...checks, deal.id]);
+ } else {
+ setCheks(checks.filter((id) => id !== deal.id));
+ }
+ }}
+ />
+
+
- {deal.side.toUpperCase()}{' '}
-
-
-
-
- {deal.status ? (
-
- {STRINGS['P2P.ACTIVE']}
-
- ) : (
-
- {STRINGS['P2P.INACTIVE']}
-
- )}
-
-
- {formatRate(
- deal.exchange_rate,
- deal.spread,
- deal.spending_asset,
- deal.side
- )}{' '}
- {deal.spending_asset.toUpperCase()}
-
-
-
-
- {STRINGS['P2P.AVAILABLE']}
-
- : {deal.total_order_amount}{' '}
- {deal.buying_asset.toUpperCase()}
-
-
-
- {STRINGS['P2P.LIMIT']}
-
- : {deal.min_order_value} - {deal.max_order_value}{' '}
+
+ {deal.side}{' '}
+
+
+
+ {deal.status ? (
+
+
+
+
+ {STRINGS['P2P.ONLINE']}
+
+
+
+ ) : (
+
+ {STRINGS['P2P.OFFLINE']}
+
+ )}
+
+
+ {` ${formatRate(
+ deal.exchange_rate,
+ deal.spread,
+ deal.spending_asset,
+ deal.side
+ )}`} {' '}
{deal.spending_asset.toUpperCase()}
-
-
-
- {deal.payment_methods
- .map((method) => method.system_name)
- .join(', ')}
-
-
- {
- setSelectedDealEdit(deal);
- setTab('3');
- }}
- ghost
- className="whiteTextP2P"
- >
-
- {STRINGS['P2P.EDIT_DEAL_BUTTON']}
-
- : {deal.side.toUpperCase()}
-
-
-
- );
- })}
-
-
+
+
+
+
+
+ {STRINGS['P2P.AVAILABLE']}
+
+ :
+
+ {deal.total_order_amount}
+ {deal.buying_asset.toUpperCase()}
+
+
+
+
+
+ {STRINGS['P2P.LIMIT']}
+
+ :
+ {' '}
+ {`${deal.min_order_value} - ${deal.max_order_value}`}{' '}
+ {deal.spending_asset.toUpperCase()}
+
+
+
+ {deal.payment_methods
+ .map((method) => method.system_name)
+ .join(', ')}
+
+
+ {
+ setSelectedDealEdit(deal);
+ setTab('3');
+ }}
+ ghost
+ className="whiteTextP2P edit-deal-btn"
+ >
+
+ {STRINGS['P2P.EDIT_DEAL_BUTTON']}
+
+
+
+
+
+ );
+ })}
+
+
+ ) : (
+
+ )}
);
diff --git a/web/src/containers/P2P/P2POrder.js b/web/src/containers/P2P/P2POrder.js
deleted file mode 100644
index b1e47b3904..0000000000
--- a/web/src/containers/P2P/P2POrder.js
+++ /dev/null
@@ -1,1935 +0,0 @@
-/* eslint-disable */
-import React, { useEffect, useState, useRef } from 'react';
-import { connect } from 'react-redux';
-import { ReactSVG } from 'react-svg';
-
-import { IconTitle, EditWrapper } from 'components';
-import STRINGS from 'config/localizedStrings';
-import withConfig from 'components/ConfigProvider/withConfig';
-import { Button, Input, message, Modal, Rate, Tooltip } from 'antd';
-import moment from 'moment';
-import {
- createChatMessage,
- fetchTransactions,
- updateTransaction,
- createFeedback,
- fetchFeedback,
- fetchP2PProfile,
-} from './actions/p2pActions';
-import { withRouter } from 'react-router';
-import { formatToCurrency } from 'utils/currency';
-import { getToken } from 'utils/token';
-import { WS_URL } from 'config/constants';
-import { CloseOutlined } from '@ant-design/icons';
-import { isMobile } from 'react-device-detect';
-import classnames from 'classnames';
-import BigNumber from 'bignumber.js';
-import './_P2P.scss';
-
-const P2POrder = ({
- data,
- onClose,
- coins,
- pairs,
- constants = {},
- icons: ICONS,
- transaction_limits,
- tiers = {},
- setDisplayOrder,
- selectedTransaction,
- setSelectedTransaction,
- user,
- router,
- p2p_config,
- p2p_message,
- p2p_status,
- p2p_transaction_id,
-}) => {
- const coin = coins[selectedTransaction.deal.buying_asset];
- const [selectedOrder, setSelectedOrder] = useState(selectedTransaction);
- const [chatMessage, setChatMessage] = useState();
- const [appealReason, setAppealReason] = useState();
- const [feedback, setFeedback] = useState();
- const [rating, setRating] = useState();
- const [appealSide, setAppealSide] = useState();
- const [displayAppealModal, setDisplayAppealModel] = useState(false);
- const [displayFeedbackModal, setDisplayFeedbackModel] = useState(false);
- const [hasFeedback, setHasFeedback] = useState(false);
- const [ws, setWs] = useState();
- const [ready, setReady] = useState(false);
- const [displayCancelWarning, setDisplayCancelWarning] = useState();
- const [displayConfirmWarning, setDisplayConfirmWarning] = useState();
- const [lastClickTime, setLastClickTime] = useState(0);
- const [displayUserFeedback, setDisplayUserFeedback] = useState(false);
- const [userFeedback, setUserFeedback] = useState([]);
- const [userProfile, setUserProfile] = useState();
- const [selectedProfile, setSelectedProfile] = useState();
- const ref = useRef(null);
- const buttonRef = useRef(null);
-
- useEffect(() => {
- ref.current.scroll({
- top: 9999,
- behavior: 'smooth',
- });
- }, [selectedOrder.messages]);
-
- const handleKeyDown = (event) => {
- if (event.key === 'Enter') {
- buttonRef.current.click();
- }
- };
-
- useEffect(() => {
- document.addEventListener('keydown', handleKeyDown);
-
- // Cleanup the event listener on component unmount
- return () => {
- document.removeEventListener('keydown', handleKeyDown);
- };
- }, []);
-
- useEffect(() => {
- setSelectedOrder((prevState) => {
- if (
- p2p_message.id === selectedOrder.id &&
- p2p_message.receiver_id === user.id &&
- (p2p_message.sender_id === prevState.merchant_id ||
- p2p_message.sender_id === prevState.user_id)
- ) {
- const found =
- prevState?.messages?.[prevState?.messages?.length - 1]?.message ===
- p2p_message.message;
- if (!found) {
- prevState?.messages.push(p2p_message);
- }
- }
- return { ...prevState, ...{ messages: prevState?.messages } };
- });
- }, [p2p_message]);
-
- useEffect(() => {
- if (p2p_transaction_id === selectedOrder.id) updateP2PStatus();
- }, [p2p_status]);
-
- useEffect(() => {
- fetchFeedback({ transaction_id: selectedOrder.id })
- .then((res) => {
- if (res?.data?.length > 0) {
- setHasFeedback(true);
- }
- })
- .catch((err) => err);
-
- if (
- selectedOrder.user_status === 'pending' &&
- moment() >
- moment(selectedOrder.created_at).add(
- selectedOrder.transaction_duration || 30,
- 'minutes'
- )
- ) {
- if (selectedOrder.transaction_status !== 'expired') {
- updateTransaction({
- id: selectedOrder.id,
- transaction_status: 'expired',
- })
- .then((res) => {
- setSelectedOrder({
- ...selectedOrder,
- transaction_status: 'expired',
- });
- })
- .catch((err) => err);
- }
- }
- }, []);
-
- useEffect(() => {
- const url = `${WS_URL}/stream?authorization=Bearer ${getToken()}`;
- const p2pWs = new WebSocket(url);
-
- p2pWs.onopen = (evt) => {
- setWs(p2pWs);
- setReady(true);
-
- setInterval(() => {
- p2pWs.send(
- JSON.stringify({
- op: 'ping',
- })
- );
- }, 55000);
- };
-
- return () => {
- p2pWs.close();
- };
- }, []);
-
- const updateP2PStatus = () => {
- fetchTransactions({ id: selectedOrder.id })
- .then((transaction) => {
- if (transaction.data[0].transaction_status === 'complete') {
- setHasFeedback(false);
- }
- setSelectedOrder(transaction.data[0]);
- })
- .catch((err) => err);
- };
- const getTransaction = async () => {
- try {
- const transaction = await fetchTransactions({
- id: selectedOrder.id,
- });
- setSelectedOrder(transaction.data[0]);
- } catch (error) {
- return error;
- }
- };
-
- const addMessage = (message) => {
- ws.send(
- JSON.stringify({
- op: 'p2pChat',
- args: [
- {
- action: 'addMessage',
- data: message,
- },
- ],
- })
- );
-
- setSelectedOrder((prevState) => {
- prevState?.messages.push(message);
- return prevState;
- });
- };
-
- const updateStatus = (status) => {
- ws.send(
- JSON.stringify({
- op: 'p2pChat',
- args: [
- {
- action: 'getStatus',
- data: {
- id: selectedOrder.id,
- status,
- receiver_id:
- user.id === selectedOrder?.merchant_id
- ? selectedOrder?.user_id
- : selectedOrder?.merchant_id,
- },
- },
- ],
- })
- );
- };
-
- const userReceiveAmount = () => {
- const incrementUnit =
- coins?.[selectedOrder.deal.buying_asset]?.increment_unit;
- const buyerFeeAmount = new BigNumber(selectedOrder?.amount_digital_currency)
- .multipliedBy(p2p_config?.user_fee)
- .dividedBy(100)
- .toNumber();
-
- const decimalPoint = new BigNumber(incrementUnit).dp();
- const sourceAmount = new BigNumber(
- selectedOrder?.amount_digital_currency - buyerFeeAmount
- )
- .decimalPlaces(decimalPoint)
- .toNumber();
- return sourceAmount;
- };
-
- const sendChatMessage = async () => {
- const now = Date.now();
- if (now - lastClickTime >= 1000 && chatMessage?.trim()?.length > 0) {
- try {
- await createChatMessage({
- receiver_id:
- user.id === selectedOrder?.merchant_id
- ? selectedOrder?.user_id
- : selectedOrder?.merchant_id,
- message: chatMessage,
- transaction_id: selectedOrder.id,
- });
-
- addMessage({
- sender_id: user.id,
- type: 'message',
- receiver_id:
- user.id === selectedOrder?.merchant_id
- ? selectedOrder?.user_id
- : selectedOrder?.merchant_id,
- message: chatMessage,
- id: selectedOrder.id,
- });
-
- setChatMessage();
- } catch (error) {
- message.error(error.data.message);
- }
- setLastClickTime(now);
- }
- };
- const formatAmount = (currency, amount) => {
- const min = coins[currency].min;
- const formattedAmount = formatToCurrency(amount, min);
- return formattedAmount;
- };
-
- return (
- <>
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayAppealModal}
- width={450}
- footer={null}
- onCancel={() => {
- setDisplayAppealModel(false);
- }}
- >
-
-
-
-
- {STRINGS['P2P.APPEAL_TRANSACTION']}
-
-
-
-
-
-
- {STRINGS['P2P.ENTER_REASON']}
-
-
-
{
- setAppealReason(e.target.value);
- }}
- />
-
-
-
-
- {
- setDisplayAppealModel(false);
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.CANCEL']}
-
-
- {
- try {
- if (appealSide === 'merchant') {
- await updateTransaction({
- id: selectedOrder.id,
- merchant_status: 'appeal',
- cancellation_reason: appealReason,
- });
- updateP2PStatus();
- updateStatus('appeal');
- message.success(STRINGS['P2P.APPEALED_TRANSACTION']);
- } else {
- await updateTransaction({
- id: selectedOrder.id,
- user_status: 'appeal',
- cancellation_reason: appealReason,
- });
- updateP2PStatus();
- updateStatus('appeal');
- message.success(STRINGS['P2P.APPEALED_TRANSACTION']);
- }
- setAppealSide();
- setDisplayAppealModel(false);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
- {STRINGS['P2P.OKAY']}
-
-
-
-
- {displayUserFeedback && (
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayUserFeedback}
- width={500}
- footer={null}
- onCancel={() => {
- setDisplayUserFeedback(false);
- }}
- >
-
-
-
- {selectedProfile?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}
- {` `}(
-
- {STRINGS['P2P.TAB_PROFILE']}
-
- )
-
-
-
-
-
-
-
-
- {STRINGS['P2P.TOTAL_ORDERS']}
-
-
-
- {userProfile?.totalTransactions} times
-
-
-
-
-
- {STRINGS['P2P.COMPLETION_RATE']}
-
-
-
- {(userProfile?.completionRate || 0).toFixed(2)}%
-
-
-
-
-
- {STRINGS['P2P.POSITIVE_FEEDBACK']}
-
-
-
- {(userProfile?.positiveFeedbackRate || 0).toFixed(2)}%
-
-
-
- {STRINGS['P2P.POSITIVE']}
- {' '}
- {userProfile?.positiveFeedbackCount} /{' '}
-
- {STRINGS['P2P.NEGATIVE']}
- {' '}
- {userProfile?.negativeFeedbackCount}
-
-
-
-
-
-
- Feedback({userFeedback.length || 0})
-
- {userFeedback.length == 0 ? (
-
-
- {STRINGS['P2P.NO_FEEDBACK']}
-
-
- ) : (
-
-
-
-
-
- {STRINGS['P2P.COMMENT']}
-
-
-
-
- {STRINGS['P2P.RATING']}
-
-
-
-
-
- {userFeedback.map((deal) => {
- return (
-
-
- {deal.comment}
-
-
-
-
-
- );
- })}
-
-
- )}
-
-
-
-
- )}
-
- {displayFeedbackModal && (
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayFeedbackModal}
- width={450}
- footer={null}
- onCancel={() => {
- setDisplayFeedbackModel(false);
- }}
- >
-
-
-
-
- {STRINGS['P2P.SUBMIT_FEEDBACK']}
-
-
-
-
-
-
- {STRINGS['P2P.INPUT_FEEDBACK']}
-
-
-
{
- setFeedback(e.target.value);
- }}
- />
-
-
-
-
- {STRINGS['P2P.SELECT_RATING']}
-
-
-
{
- if (e > 0) setRating(e);
- }}
- value={rating}
- />
-
-
-
-
- {
- setDisplayFeedbackModel(false);
- setFeedback();
- setRating();
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.CANCEL']}
-
-
- {
- try {
- if (!rating || rating === 0) {
- message.error(STRINGS['P2P.SELECT_RATING']);
- }
- if (!feedback) {
- message.error(STRINGS['P2P.INPUT_FEEDBACK']);
- }
- await createFeedback({
- transaction_id: selectedOrder.id,
- comment: feedback,
- rating: rating,
- });
- message.success(STRINGS['P2P.FEEDBACK_SUBMITTED']);
- setDisplayFeedbackModel(false);
- setFeedback();
- setRating();
- setHasFeedback(true);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.PROCEED']}
-
-
-
-
- )}
-
- {displayCancelWarning && (
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayCancelWarning}
- width={450}
- footer={null}
- onCancel={() => {
- setDisplayCancelWarning(false);
- }}
- >
-
-
-
-
- {STRINGS['P2P.CANCEL_WARNING']}
-
-
-
-
-
-
- {
- setDisplayCancelWarning(false);
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
- {STRINGS['P2P.NO']}
-
- {
- try {
- await updateTransaction({
- id: selectedOrder.id,
- user_status: 'cancelled',
- });
- updateP2PStatus();
- updateStatus('cancelled');
- message.success(STRINGS['P2P.TRANSACTION_CANCELLED']);
- setDisplayCancelWarning(false);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.PROCEED']}
-
-
-
-
- )}
-
- {displayConfirmWarning && (
-
}
- className="stake_table_theme stake_theme"
- bodyStyle={{}}
- visible={displayConfirmWarning}
- width={450}
- footer={null}
- onCancel={() => {
- setDisplayConfirmWarning(false);
- }}
- >
-
-
-
-
- {STRINGS['P2P.CONFIRM_WARNING']}
-
-
-
- {userReceiveAmount()}{' '}
- {selectedOrder?.deal?.buying_asset?.toUpperCase()} will be
- released from your balance
-
-
-
-
-
- {
- setDisplayConfirmWarning(false);
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
- {STRINGS['P2P.NO']}
-
- {
- try {
- await updateTransaction({
- id: selectedOrder.id,
- merchant_status: 'confirmed',
- });
- updateP2PStatus();
- updateStatus('confirmed');
- message.success(STRINGS['P2P.CONFIRMED_TRANSACTION']);
- setDisplayConfirmWarning(false);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.PROCEED']}
-
-
-
-
- )}
-
-
{
- setDisplayOrder(false);
- router.push('/p2p');
- }}
- style={{
- marginBottom: 10,
- cursor: 'pointer',
- textDecoration: 'underline',
- }}
- >
- {STRINGS['P2P.BACK']}
-
-
-
-
-
-
-
-
- {STRINGS['P2P.ORDER']}
-
-
-
- {user.id === selectedOrder.merchant_id ? (
-
- {STRINGS['P2P.SELL_COIN']}
-
- ) : (
-
- {STRINGS['P2P.BUY_COIN']}
-
- )}{' '}
- {coin?.fullname?.toUpperCase()} ({coin?.symbol?.toUpperCase()}
- )
-
-
-
-
-
-
- {STRINGS['P2P.TRANSACTION_ID']}
-
- {': '}
- {selectedOrder.transaction_id}
-
-
-
-
-
-
- {STRINGS['P2P.AMOUNT_TO']}
- {' '}
- {user.id === selectedOrder?.merchant_id
- ? STRINGS['P2P.RELEASE']
- : STRINGS['P2P.SEND_UPPER']}
- :
-
-
- {user.id === selectedOrder?.merchant_id && (
-
- {userReceiveAmount()}{' '}
- {selectedOrder?.deal?.buying_asset?.toUpperCase()}
-
- )}
- {user.id === selectedOrder?.user_id && (
-
- {selectedOrder?.amount_fiat}{' '}
- {selectedOrder?.deal?.spending_asset?.toUpperCase()}
-
- )}
-
- {user.id === selectedOrder?.merchant_id ? (
-
- {STRINGS['P2P.AMOUNT_SEND_RELEASE']}
-
- ) : (
-
- {STRINGS['P2P.REQUIRED_FLAT_TRANSFER_AMOUNT']}
-
- )}
-
-
-
-
-
-
-
- {STRINGS['P2P.PRICE']}
-
- :
-
-
-
- {formatAmount(
- selectedOrder?.deal?.spending_asset,
- selectedOrder?.price
- )}{' '}
- {selectedOrder?.deal?.spending_asset?.toUpperCase()}
-
-
-
- {STRINGS['P2P.PER_COIN']}
- {' '}
- {selectedOrder?.deal?.buying_asset?.toUpperCase()}
-
-
-
-
-
-
-
- {STRINGS['P2P.RECEIVING_AMOUNT']}
-
- :
-
- {user.id === selectedOrder?.merchant_id && (
-
-
- {selectedOrder?.amount_fiat}{' '}
- {selectedOrder?.deal?.spending_asset?.toUpperCase()}
-
-
- {selectedOrder?.deal?.spending_asset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.SPENDING_AMOUNT']}
-
-
-
- )}
-
- {user.id === selectedOrder?.user_id && (
-
-
- {userReceiveAmount()}{' '}
- {selectedOrder?.deal?.buying_asset?.toUpperCase()}
-
-
- {selectedOrder?.deal?.buying_asset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.BUYING_AMOUNT']}
-
-
-
- )}
-
-
-
-
-
- {STRINGS['P2P.FEE']}
-
- :
-
- {user.id === selectedOrder?.merchant_id && (
-
-
{p2p_config?.merchant_fee}%
-
- )}
-
- {user.id === selectedOrder?.user_id && (
-
-
{p2p_config?.user_fee}%
-
- )}
-
-
-
-
-
-
- {STRINGS['P2P.TRANSFER_DETAILS']}
-
-
- {user.id === selectedOrder?.user_id && (
-
-
- {STRINGS['P2P.PAYMENT_INSTRUCTIONS']}
-
-
- )}
-
- {user.id === selectedOrder?.merchant_id && (
-
-
- {STRINGS['P2P.PAYMENT_ACCOUNT']}
-
-
- )}
-
-
-
-
-
- {STRINGS['P2P.PAYMENT_METHOD']}
-
- :
-
-
- {selectedOrder?.payment_method_used?.system_name}
-
-
-
- {selectedOrder?.payment_method_used?.fields?.map((x) => {
- return (
-
-
{x?.name}:
-
{x?.value}
-
- );
- })}
-
-
-
-
-
-
- {STRINGS['P2P.EXPECTED_TIME']}
-
-
-
- {user.id === selectedOrder?.user_id && (
- <>
- {selectedOrder.user_status === 'pending' && (
- <>
-
-
- {STRINGS['P2P.PAYMENT_TIME']}
-
-
-
-
- {STRINGS['P2P.ORDER_CANCELLED']}
-
-
- >
- )}
-
- {selectedOrder.user_status === 'confirmed' && (
-
-
- {STRINGS['P2P.FUNDS_CREDITED']}
-
-
- )}
-
- {selectedOrder.merchant_status === 'cancelled' && (
-
-
- {STRINGS['P2P.VENDOR_CANCELLED']}
-
-
- )}
-
- {selectedOrder.merchant_status === 'confirmed' && (
-
-
-
- {STRINGS['P2P.ORDER_COMPLETE']}
-
-
-
-
- {STRINGS['P2P.FUNDS_TRANSFERRED']}
-
-
-
{
- router.replace('/transactions?tab=deposits');
- }}
- >
-
-
- {STRINGS['P2P.GO_DEPOSIT']}
-
-
-
- {!hasFeedback && (
-
{
- setDisplayFeedbackModel(true);
- }}
- ghost
- >
-
- {STRINGS['P2P.SUBMIT_FEEDBACK']}
-
-
- )}
-
- )}
- {selectedOrder.merchant_status === 'appeal' && (
- <>
-
-
- {STRINGS['P2P.VENDOR_APPEALED']}
-
-
- >
- )}
- {selectedOrder.user_status === 'appeal' && (
- <>
-
-
- {STRINGS['P2P.USER_APPEALED']}
-
-
- >
- )}
- >
- )}
-
- {user.id === selectedOrder?.merchant_id && (
- <>
- {selectedOrder.merchant_status === 'confirmed' && (
-
-
-
- {STRINGS['P2P.ORDER_COMPLETE']}
-
-
-
-
- {STRINGS['P2P.ORDER_COMPLETE_VENDOR']}
-
-
-
{
- router.replace('/transactions?tab=withdrawals');
- }}
- >
-
-
- {STRINGS['P2P.GO_WITHDRAWALS']}
-
-
-
-
- )}
-
- {selectedOrder.user_status === 'pending' && (
- <>
-
-
- {STRINGS['P2P.PAYMENT_NOT_SENT']}
-
-
-
-
- {STRINGS['P2P.CONFIRM_AND_RELEASE']}
-
-
- >
- )}
- {selectedOrder.user_status === 'cancelled' && (
- <>
-
-
- {STRINGS['P2P.TRANSACTION_CANCELLED']}
-
-
- >
- )}
- {selectedOrder.user_status === 'confirmed' &&
- selectedOrder?.merchant_status !== 'confirmed' && (
- <>
-
-
- {STRINGS['P2P.BUYER_CONFIRMED']}
-
-
-
-
- {STRINGS['P2P.CHECK_AND_RELEASE']}
-
-
- >
- )}
- {user.id === selectedOrder.user_id &&
- selectedOrder.user_status === 'appeal' && (
- <>
-
-
- {STRINGS['P2P.USER_APPEALED']}
-
-
- >
- )}
-
- {user.id === selectedOrder.merchant_id &&
- selectedOrder.user_status === 'appeal' && (
- <>
-
-
- {STRINGS['P2P.BUYER_APPEALED_ORDER']}
-
-
- >
- )}
- >
- )}
-
-
- {user.id === selectedOrder?.user_id && (
- <>
- {selectedOrder.user_status === 'confirmed' &&
- selectedOrder.merchant_status === 'pending' && (
- <>
-
{
- try {
- setDisplayAppealModel(true);
- setAppealSide('user');
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- textDecoration: 'underline',
- cursor: 'pointer',
- position: 'relative',
- top: 5,
- }}
- >
-
- {STRINGS['P2P.APPEAL']}
-
-
-
{
- setDisplayCancelWarning(true);
- }}
- style={{
- textDecoration: 'underline',
- cursor: 'pointer',
- position: 'relative',
- top: 5,
- }}
- >
-
- {STRINGS['P2P.CANCEL_ORDER']}
-
-
- >
- )}
- >
- )}
-
- {user.id === selectedOrder?.merchant_id &&
- selectedOrder?.merchant_status === 'pending' && (
-
- {
- try {
- setDisplayAppealModel(true);
- setAppealSide('merchant');
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- style={{
- textDecoration: 'underline',
- cursor: 'pointer',
- position: 'relative',
- top: 5,
- }}
- >
-
- {STRINGS['P2P.APPEAL']}
-
-
-
-
- {
- try {
- setDisplayConfirmWarning(true);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- >
-
- {STRINGS['P2P.CONFIRM_AND_RELEASE_CRYPTO']}
-
-
-
-
- )}
- {user.id === selectedOrder?.merchant_id &&
- selectedOrder?.merchant_status === 'appeal' && (
-
-
- {STRINGS['P2P.USER_APPEALED']}
-
-
- )}
-
-
-
-
-
- {user.id === selectedOrder?.merchant_id ? (
-
- {STRINGS['P2P.CHAT_WITH_USER']}
-
- ) : (
-
- {STRINGS['P2P.CHAT_WITH_VENDOR']}
-
- )}
-
-
-
{
- try {
- if (user.id === selectedOrder?.merchant_id) return;
- setSelectedProfile(selectedOrder?.merchant);
- const feedbacks = await fetchFeedback({
- merchant_id: selectedOrder?.merchant_id,
- });
- const profile = await fetchP2PProfile({
- user_id: selectedOrder?.merchant_id,
- });
- setUserFeedback(feedbacks.data);
- setUserProfile(profile);
- setDisplayUserFeedback(true);
- } catch (error) {
- return error;
- }
- }}
- >
- {user.id === selectedOrder?.merchant_id ? (
-
- {STRINGS['P2P.USER_NAME']}
-
- ) : (
-
- {STRINGS['P2P.VENDOR_NAME']}
-
- )}{' '}
- {user.id === selectedOrder?.merchant_id
- ? selectedOrder?.buyer?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )
- : selectedOrder?.merchant?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}
-
-
-
- {user.id === selectedOrder?.user_id && (
-
-
- {STRINGS['P2P.ORDER_INITIATED']}
- {' '}
- {selectedOrder?.merchant?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}{' '}
- (
- {moment(selectedOrder?.created_at).format(
- 'DD/MMM/YYYY, hh:mmA'
- )}
- ).
-
- )}
-
- {user.id === selectedOrder?.user_id && (
-
-
- {STRINGS['P2P.CONFIRM_PAYMENT']}
-
-
- )}
-
- {user.id === selectedOrder?.merchant_id && (
-
-
- {STRINGS['P2P.ORDER_INITIATED_VENDOR']}
- {' '}
- {selectedOrder?.buyer?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}{' '}
- (
- {moment(selectedOrder?.created_at).format(
- 'DD/MMM/YYYY, hh:mmA'
- )}
- ).
-
- )}
- {user.id === selectedOrder?.merchant_id && (
-
-
- {STRINGS['P2P.CONFIRM_PAYMENT_VENDOR']}
-
-
- )}
-
-
-
-
- {selectedOrder?.messages.map((message, index) => {
- if (index === 0) {
- return (
-
-
- {message.sender_id === selectedOrder?.merchant_id
- ? selectedOrder?.merchant?.full_name
- : selectedOrder?.buyer?.full_name}
- :
-
-
{message.message}
-
- {moment(message?.created_at || new Date()).format(
- 'DD/MMM/YYYY, hh:mmA '
- )}
-
-
- );
- } else {
- if (message.type === 'notification') {
- return (
-
- {message.message === 'BUYER_PAID_ORDER' &&
- user.id === selectedOrder.user_id ? (
-
- {STRINGS[`P2P.BUYER_SENT_FUNDS`]}
-
- ) : (
-
- {STRINGS[`P2P.${message.message}`]}
-
- )}{' '}
- (
- {moment(message?.created_at || new Date()).format(
- 'DD/MMM/YYYY, hh:mmA'
- )}
- )
-
- );
- } else {
- if (message.sender_id === user.id) {
- return (
-
-
-
- {STRINGS['P2P.YOU']}
-
- :
-
-
{message.message}
-
- {moment(
- message?.created_at || new Date()
- ).format('DD/MMM/YYYY, hh:mmA ')}
-
-
- );
- } else {
- return (
-
-
- {message.receiver_id ===
- selectedOrder.merchant_id
- ? STRINGS['P2P.BUYER']
- : selectedOrder?.merchant?.full_name}
- :
-
-
{message.message}
-
- {moment(
- message?.created_at || new Date()
- ).format('DD/MMM/YYYY, hh:mmA ')}
-
-
- );
- }
- }
- }
- })}
-
-
-
-
-
-
- {
- setChatMessage(e.target.value);
- }}
- />
-
-
-
- {STRINGS['P2P.SEND_UPPER']}
-
-
-
-
-
-
-
-
-
- {user.id === selectedOrder?.user_id &&
- selectedOrder?.transaction_status === 'active' &&
- selectedOrder.user_status === 'pending' && (
-
- {
- try {
- setDisplayCancelWarning(true);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- >
-
- {STRINGS['P2P.CANCEL']}
-
-
- {
- try {
- await updateTransaction({
- id: selectedOrder.id,
- user_status: 'confirmed',
- });
- updateP2PStatus();
- updateStatus('confirmed');
- message.success(STRINGS['P2P.CONFIRMED_TRANSACTION']);
- } catch (error) {
- message.error(error.data.message);
- }
- }}
- >
-
- {STRINGS['P2P.CONFIRM_TRANSFER']}
-
-
-
- )}
- >
- );
-};
-
-const mapStateToProps = (state) => ({
- pairs: state.app.pairs,
- coins: state.app.coins,
- constants: state.app.constants,
- transaction_limits: state.app.transaction_limits,
- p2p_message: state.p2p.chat,
- p2p_status: state.p2p.status,
- p2p_transaction_id: state.p2p.transaction_id,
- user: state.user,
- p2p_config: state.app.constants.p2p_config,
-});
-
-export default connect(mapStateToProps)(withRouter(withConfig(P2POrder)));
diff --git a/web/src/containers/P2P/P2POrder/P2POrder.js b/web/src/containers/P2P/P2POrder/P2POrder.js
new file mode 100644
index 0000000000..fdadce14bc
--- /dev/null
+++ b/web/src/containers/P2P/P2POrder/P2POrder.js
@@ -0,0 +1,1909 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { isMobile } from 'react-device-detect';
+import { Button, Input, message, Rate, Tooltip } from 'antd';
+import {
+ CheckCircleTwoTone,
+ ExclamationOutlined,
+ SendOutlined,
+} from '@ant-design/icons';
+
+import { Coin, Dialog, EditWrapper, Image } from 'components';
+import STRINGS from 'config/localizedStrings';
+import withConfig from 'components/ConfigProvider/withConfig';
+import moment from 'moment';
+import {
+ createChatMessage,
+ fetchTransactions,
+ updateTransaction,
+ createFeedback,
+ fetchFeedback,
+ fetchP2PProfile,
+} from '../actions/p2pActions';
+import { formatToCurrency } from 'utils/currency';
+import { getToken } from 'utils/token';
+import { WS_URL } from 'config/constants';
+import classnames from 'classnames';
+import BigNumber from 'bignumber.js';
+import '../_P2P.scss';
+import P2POrderChat from './P2POrderChat';
+import P2POrderDetails from './P2POrderDetails';
+
+const P2POrder = ({
+ data,
+ onClose,
+ coins,
+ pairs,
+ constants = {},
+ icons: ICONS,
+ transaction_limits,
+ tiers = {},
+ setDisplayOrder,
+ selectedTransaction,
+ setSelectedTransaction,
+ user,
+ router,
+ p2p_config,
+ p2p_message,
+ p2p_status,
+ p2p_transaction_id,
+ isChat,
+}) => {
+ const coin = coins[selectedTransaction.deal.buying_asset];
+ const [selectedOrder, setSelectedOrder] = useState(selectedTransaction);
+ const [chatMessage, setChatMessage] = useState();
+ const [appealReason, setAppealReason] = useState();
+ const [feedback, setFeedback] = useState();
+ const [rating, setRating] = useState();
+ const [appealSide, setAppealSide] = useState();
+ const [displayAppealModal, setDisplayAppealModel] = useState(false);
+ const [displayFeedbackModal, setDisplayFeedbackModel] = useState(false);
+ const [hasFeedback, setHasFeedback] = useState(false);
+ const [ws, setWs] = useState();
+ // const [ready, setReady] = useState(false);
+ const [displayCancelWarning, setDisplayCancelWarning] = useState();
+ const [displayConfirmWarning, setDisplayConfirmWarning] = useState();
+ const [lastClickTime, setLastClickTime] = useState(0);
+ const [displayUserFeedback, setDisplayUserFeedback] = useState(false);
+ const [userFeedback, setUserFeedback] = useState([]);
+ const [userProfile, setUserProfile] = useState();
+ const [selectedProfile, setSelectedProfile] = useState();
+ const ref = useRef(null);
+ const buttonRef = useRef(null);
+
+ useEffect(() => {
+ if (ref.current) {
+ ref.current.scroll({
+ top: 9999,
+ behavior: 'smooth',
+ });
+ }
+ }, [selectedOrder.messages]);
+
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter') {
+ buttonRef.current.click();
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+
+ // Cleanup the event listener on component unmount
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, []);
+
+ useEffect(() => {
+ setSelectedOrder((prevState) => {
+ if (
+ p2p_message.id === selectedOrder.id &&
+ p2p_message.receiver_id === user.id &&
+ (p2p_message.sender_id === prevState.merchant_id ||
+ p2p_message.sender_id === prevState.user_id)
+ ) {
+ const found =
+ prevState?.messages?.[prevState?.messages?.length - 1]?.message ===
+ p2p_message.message;
+ if (!found) {
+ return {
+ ...prevState,
+ messages: [...(prevState?.messages || []), p2p_message],
+ };
+ }
+ }
+ return { ...prevState, ...{ messages: prevState?.messages } };
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [p2p_message]);
+
+ useEffect(() => {
+ if (p2p_transaction_id === selectedOrder.id) updateP2PStatus();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [p2p_status]);
+
+ useEffect(() => {
+ fetchFeedback({ transaction_id: selectedOrder.id, user_id: user.id })
+ .then((res) => {
+ if (res?.data?.length > 0) {
+ setHasFeedback(true);
+ }
+ })
+ .catch((err) => err);
+
+ if (
+ selectedOrder.user_status === 'pending' &&
+ moment() >
+ moment(selectedOrder.created_at).add(
+ selectedOrder.transaction_duration || 30,
+ 'minutes'
+ )
+ ) {
+ if (selectedOrder.transaction_status !== 'expired') {
+ updateTransaction({
+ id: selectedOrder.id,
+ transaction_status: 'expired',
+ })
+ .then((res) => {
+ setSelectedOrder({
+ ...selectedOrder,
+ transaction_status: 'expired',
+ });
+ })
+ .catch((err) => err);
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ let pingInterval;
+
+ const connectWebSocket = () => {
+ const url = `${WS_URL}/stream?authorization=Bearer ${getToken()}`;
+ const p2pWs = new WebSocket(url);
+
+ p2pWs.onopen = () => {
+ setWs(p2pWs);
+
+ if (selectedTransaction.first_created) {
+ p2pWs.send(
+ JSON.stringify({
+ op: 'p2pChat',
+ args: [
+ {
+ action: 'getStatus',
+ data: {
+ id: selectedTransaction.id,
+ status: 'created',
+ title: 'p2p',
+ receiver_id:
+ user.id === selectedTransaction?.merchant_id
+ ? selectedTransaction?.user_id
+ : selectedTransaction?.merchant_id,
+ },
+ },
+ ],
+ })
+ );
+ }
+
+ pingInterval = setInterval(() => {
+ if (p2pWs.readyState === WebSocket.OPEN) {
+ p2pWs.send(JSON.stringify({ op: 'ping' }));
+ }
+ }, 55000);
+ };
+
+ p2pWs.onclose = (event) => {
+ clearInterval(pingInterval);
+ setTimeout(connectWebSocket, 3000);
+ };
+
+ p2pWs.onerror = (error) => {
+ clearInterval(pingInterval);
+ p2pWs.close();
+ };
+
+ return p2pWs;
+ };
+
+ const p2pWs = connectWebSocket();
+
+ return () => {
+ clearInterval(pingInterval);
+ p2pWs.close();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const updateP2PStatus = () => {
+ fetchTransactions({ id: selectedOrder.id })
+ .then((transaction) => {
+ if (transaction.data[0].transaction_status === 'complete') {
+ setHasFeedback(false);
+ }
+ setSelectedOrder(transaction.data[0]);
+ })
+ .catch((err) => err);
+ };
+ // const getTransaction = async () => {
+ // try {
+ // const transaction = await fetchTransactions({
+ // id: selectedOrder.id,
+ // });
+ // setSelectedOrder(transaction.data[0]);
+ // } catch (error) {
+ // return error;
+ // }
+ // };
+
+ const addMessage = (message) => {
+ ws.send(
+ JSON.stringify({
+ op: 'p2pChat',
+ args: [
+ {
+ action: 'addMessage',
+ data: message,
+ },
+ ],
+ })
+ );
+
+ setSelectedOrder((prevState) => {
+ return {
+ ...prevState,
+ messages: [...(prevState?.messages || []), message],
+ };
+ });
+ };
+
+ const updateStatus = (status, title = '') => {
+ ws.send(
+ JSON.stringify({
+ op: 'p2pChat',
+ args: [
+ {
+ action: 'getStatus',
+ data: {
+ id: selectedOrder.id,
+ status,
+ title,
+ receiver_id:
+ user.id === selectedOrder?.merchant_id
+ ? selectedOrder?.user_id
+ : selectedOrder?.merchant_id,
+ },
+ },
+ ],
+ })
+ );
+ };
+
+ const userReceiveAmount = () => {
+ const incrementUnit =
+ coins?.[selectedOrder.deal.buying_asset]?.increment_unit;
+ const buyerFeeAmount = new BigNumber(selectedOrder?.amount_digital_currency)
+ .multipliedBy(p2p_config?.user_fee)
+ .dividedBy(100)
+ .toNumber();
+
+ const decimalPoint = new BigNumber(incrementUnit).dp();
+ const sourceAmount = new BigNumber(
+ selectedOrder?.amount_digital_currency - buyerFeeAmount
+ )
+ .decimalPlaces(decimalPoint)
+ .toNumber();
+ return sourceAmount;
+ };
+
+ const sendChatMessage = async () => {
+ const now = Date.now();
+ if (now - lastClickTime >= 1000 && chatMessage?.trim()?.length > 0) {
+ try {
+ await createChatMessage({
+ receiver_id:
+ user.id === selectedOrder?.merchant_id
+ ? selectedOrder?.user_id
+ : selectedOrder?.merchant_id,
+ message: chatMessage,
+ transaction_id: selectedOrder.id,
+ });
+
+ addMessage({
+ sender_id: user.id,
+ type: 'message',
+ receiver_id:
+ user.id === selectedOrder?.merchant_id
+ ? selectedOrder?.user_id
+ : selectedOrder?.merchant_id,
+ message: chatMessage,
+ id: selectedOrder.id,
+ });
+
+ setChatMessage();
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ setLastClickTime(now);
+ }
+ };
+
+ const isOrderCreated =
+ selectedOrder?.transaction_status === 'active' &&
+ selectedOrder.user_status === 'pending';
+ const isOrderVerified =
+ selectedOrder.user_status === 'confirmed' &&
+ selectedOrder.merchant_status === 'pending';
+ const isOrderConfirmed = selectedOrder.merchant_status === 'confirmed';
+
+ const formatAmount = (currency, amount) => {
+ const min = coins[currency]?.min;
+ const formattedAmount = formatToCurrency(amount, min);
+ return formattedAmount;
+ };
+
+ return (
+ <>
+
{
+ setDisplayAppealModel(false);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.APPEAL_TRANSACTION']}
+
+
+
+
+
+ {STRINGS['P2P.ENTER_REASON']}
+
+
+
{
+ setAppealReason(e.target.value);
+ }}
+ />
+
+
+
+
+ {
+ setDisplayAppealModel(false);
+ }}
+ className="purpleButtonP2P cancel-btn"
+ type="default"
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+ {
+ try {
+ if (appealSide === 'merchant') {
+ await updateTransaction({
+ id: selectedOrder?.id,
+ merchant_status: 'appeal',
+ cancellation_reason: appealReason,
+ });
+ updateP2PStatus();
+ updateStatus('appeal');
+ message.success(STRINGS['P2P.APPEALED_TRANSACTION']);
+ } else {
+ await updateTransaction({
+ id: selectedOrder.id,
+ user_status: 'appeal',
+ cancellation_reason: appealReason,
+ });
+ updateP2PStatus();
+ updateStatus('appeal');
+ message.success(STRINGS['P2P.APPEALED_TRANSACTION']);
+ }
+ setAppealSide();
+ setDisplayAppealModel(false);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ className="purpleButtonP2P okay-btn"
+ type="default"
+ >
+ {STRINGS['P2P.OKAY']}
+
+
+
+
+ {displayUserFeedback && (
+
{
+ setDisplayUserFeedback(false);
+ }}
+ >
+
+
+
+ {selectedProfile?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+ (
+
+ {STRINGS['P2P.TAB_PROFILE']}
+
+ )
+
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.TOTAL_ORDERS']}
+
+
+
+ {userProfile?.totalTransactions}
+
+
+ {STRINGS['P2P.TIMES']}
+
+
+
+
+
+
+
+ {STRINGS['P2P.COMPLETION_RATE']}
+
+
+
+ {(userProfile?.completionRate || 0).toFixed(2)}%
+
+
+
+
+
+ {STRINGS['P2P.POSITIVE_FEEDBACK']}
+
+
+
+ {(userProfile?.positiveFeedbackRate || 0).toFixed(2)}%
+
+
+
+ {STRINGS['P2P.POSITIVE']}
+
+ {userProfile?.positiveFeedbackCount} /
+
+ {STRINGS['P2P.NEGATIVE']}
+
+ {userProfile?.negativeFeedbackCount}
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.FEEDBACK']}
+
+
+ ({userFeedback?.length || 0})
+
+ {userFeedback?.length === 0 ? (
+
+
+ {STRINGS['P2P.NO_FEEDBACK']}
+
+
+ ) : (
+
+
+
+
+
+ {STRINGS['P2P.COMMENT']}
+
+
+
+
+ {STRINGS['P2P.RATING']}
+
+
+
+
+
+ {userFeedback.map((deal) => {
+ return (
+
+ {deal.comment}
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+ )}
+
+ {displayFeedbackModal && (
+
{
+ setDisplayFeedbackModel(false);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.SUBMIT_FEEDBACK']}
+
+
+
+
+
+ {STRINGS['P2P.INPUT_FEEDBACK']}
+
+
+
{
+ setFeedback(e.target.value);
+ }}
+ />
+
+
+
+
+ {STRINGS['P2P.SELECT_RATING']}
+
+
+
{
+ if (e > 0) setRating(e);
+ }}
+ value={rating}
+ />
+
+
+
+
+ {
+ setDisplayFeedbackModel(false);
+ setFeedback();
+ setRating();
+ }}
+ className="cancel-btn"
+ type="default"
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+ {
+ try {
+ if (!rating || rating === 0) {
+ message.error(STRINGS['P2P.SELECT_RATING']);
+ return;
+ }
+ if (!feedback) {
+ message.error(STRINGS['P2P.INPUT_FEEDBACK']);
+ return;
+ }
+ await createFeedback({
+ transaction_id: selectedOrder?.id,
+ comment: feedback,
+ rating: rating,
+ });
+ message.success(STRINGS['P2P.FEEDBACK_SUBMITTED']);
+ setDisplayFeedbackModel(false);
+ setFeedback();
+ setRating();
+ setHasFeedback(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ className="proceed-btn"
+ type="default"
+ >
+
+ {STRINGS['P2P.PROCEED']}
+
+
+
+
+ )}
+
+ {displayCancelWarning && (
+
{
+ setDisplayCancelWarning(false);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.CANCEL_WARNING']}
+
+
+
+
+
+ {STRINGS['WITHDRAW_PAGE.WARNING']?.toUpperCase()}
+
+
+
+
+ {STRINGS['P2P.CANCEL_WARNING_TEXT']}
+
+
+
+
+
+ {
+ setDisplayCancelWarning(false);
+ }}
+ className="cancel-btn"
+ type="default"
+ >
+ {STRINGS['P2P.NO']}
+
+ {
+ try {
+ await updateTransaction({
+ id: selectedOrder?.id,
+ user_status: 'cancelled',
+ });
+ updateP2PStatus();
+ updateStatus('cancelled');
+ message.success(STRINGS['P2P.TRANSACTION_CANCELLED']);
+ setDisplayCancelWarning(false);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ className="proceed-btn"
+ type="default"
+ >
+
+ {STRINGS['P2P.PROCEED']}
+
+
+
+
+ )}
+
+ {displayConfirmWarning && (
+
{
+ setDisplayConfirmWarning(false);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.CONFIRM_WARNING']}
+
+
+
+
+ {userReceiveAmount()}
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}{' '}
+
+
+
+ {STRINGS['P2P.AMOUNT_RECEIVE']}
+
+
+
+
+
+ {
+ setDisplayConfirmWarning(false);
+ }}
+ className="cancel-btn"
+ type="default"
+ >
+ {STRINGS['P2P.NO']}
+
+ {
+ try {
+ await updateTransaction({
+ id: selectedOrder?.id,
+ merchant_status: 'confirmed',
+ });
+ updateP2PStatus();
+ updateStatus('confirmed', 'crypto');
+ message.success(STRINGS['P2P.CONFIRMED_TRANSACTION']);
+ setDisplayConfirmWarning(false);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ className="proceed-btn"
+ type="default"
+ >
+
+ {STRINGS['P2P.PROCEED']}
+
+
+
+
+ )}
+
+ {!isChat && (
+
+ {
+ setDisplayOrder(false);
+ router.push('/p2p');
+ }}
+ className="back-text"
+ >
+
+
+ {'<'}
+ {STRINGS['BACK_TEXT']}
+
+
+
+
+ )}
+ {(isOrderCreated || isOrderVerified || isOrderConfirmed) && !isChat && (
+
+
+
+ {(isOrderCreated || isOrderVerified || isOrderConfirmed) && (
+
+ )}
+
+
+
+
+ {STRINGS['P2P.STEP_1']}:
+
+
+
+
+ {STRINGS['P2P.P2P_ORDER_CREATED']}
+
+
+
+
+
+
+
+ {(isOrderVerified || isOrderConfirmed) && }
+
+
+
+
+ {STRINGS['P2P.STEP_2']}:
+
+
+
+
+ {STRINGS['P2P.VENDOR_CHECKS_TITLE']}
+
+
+
+
+
+
+
+
+ {isOrderConfirmed && }
+
+
+
+
+ {STRINGS['P2P.STEP_3']}:
+
+
+
+
+ {STRINGS['P2P.FUND_RELEASED']}
+
+
+
+
+
+ )}
+
+ {!isMobile && (
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER']}:
+
+
+
+ {selectedOrder.transaction_id}
+
+
+
+ {user.id === selectedOrder.merchant_id ? (
+
+ {STRINGS['P2P.SELL_COIN']}
+
+ ) : (
+
+ {STRINGS['P2P.BUY_COIN']}
+
+ )}{' '}
+ {coin?.fullname} ({coin?.symbol?.toUpperCase()})
+
+
+
+ {/*
+
+
+ {STRINGS['P2P.TRANSACTION_ID']}
+
+ {': '}
+ {selectedOrder.transaction_id}
+
+
+
*/}
+
+
+
+ {STRINGS['P2P.AMOUNT_TO']}
+ {' '}
+
+ {user?.id === selectedOrder?.merchant_id
+ ? STRINGS['P2P.RELEASE']
+ : STRINGS['P2P.SEND_UPPER']}
+
+ :
+
+
+ {user.id === selectedOrder?.merchant_id && (
+
+
+ {userReceiveAmount()}
+
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+ )}
+ {user.id === selectedOrder?.user_id && (
+
+
+ {selectedOrder?.amount_fiat}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+ )}
+
+ {user.id === selectedOrder?.merchant_id ? (
+
+ {STRINGS['P2P.AMOUNT_SEND_RELEASE']}
+
+ ) : (
+
+ {STRINGS['P2P.REQUIRED_FLAT_TRANSFER_AMOUNT']}
+
+ )}
+
+
+
+
+
+
+ {STRINGS['P2P.PRICE']}
+
+ :
+
+
+
+
+ {formatAmount(
+ selectedOrder?.deal?.spending_asset,
+ selectedOrder?.price
+ )}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+
+
+
+ {STRINGS['P2P.PER_COIN']}
+ {' '}
+
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.RECEIVING_AMOUNT']}
+
+ :
+
+ {user.id === selectedOrder?.merchant_id && (
+
+
+
+ {selectedOrder?.amount_fiat}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+ {STRINGS['P2P.SPENDING_AMOUNT']}
+
+
+
+
+ )}
+
+ {user.id === selectedOrder?.user_id && (
+
+
+
+ {userReceiveAmount()}
+
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+ {STRINGS['P2P.BUYING_AMOUNT']}
+
+
+
+
+ )}
+
+
+
+
+ {STRINGS['P2P.FEE']}
+
+ :
+
+ {user.id === selectedOrder?.merchant_id && (
+
+
{p2p_config?.merchant_fee}%
+
+ )}
+
+ {user.id === selectedOrder?.user_id && (
+
+
{p2p_config?.user_fee}%
+
+ )}
+
+
+
+
+ {STRINGS['P2P.TRANSFER_DETAILS']}
+
+
+ {user.id === selectedOrder?.user_id && (
+
+
+ {STRINGS['P2P.PAYMENT_INSTRUCTIONS']}
+
+
+ )}
+
+ {user.id === selectedOrder?.merchant_id && (
+
+
+ {STRINGS['P2P.PAYMENT_ACCOUNT']}
+
+
+ )}
+
+
+
+
+
+ {STRINGS['P2P.PAYMENT_METHOD']}
+
+ :
+
+
{selectedOrder?.payment_method_used?.system_name}
+
+
+ {selectedOrder?.payment_method_used?.fields?.map((x) => {
+ return (
+
+
{x?.name}:
+
{x?.value}
+
+ );
+ })}
+
+
+
+
+
+ {STRINGS['P2P.EXPECTED_TIME']}
+
+
+
+ {user.id === selectedOrder?.user_id && (
+ <>
+ {selectedOrder.user_status === 'pending' && (
+ <>
+
+
+ {STRINGS['P2P.PAYMENT_TIME']}
+
+
+
+
+ {STRINGS['P2P.ORDER_CANCELLED']}
+
+
+ >
+ )}
+
+ {selectedOrder.user_status === 'confirmed' && (
+
+
+ {STRINGS['P2P.FUNDS_CREDITED']}
+
+
+ )}
+
+ {selectedOrder.merchant_status === 'cancelled' && (
+
+
+ {STRINGS['P2P.VENDOR_CANCELLED']}
+
+
+ )}
+
+ {selectedOrder.merchant_status === 'confirmed' && (
+
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE']}
+
+
+
+
+ {selectedOrder?.deal?.side === 'sell' ? (
+
+ {STRINGS['P2P.FUNDS_TRANSFERRED']}
+
+ ) : (
+
+ {STRINGS['P2P.FUNDS_TRANSFERRED_USER']}
+
+ )}
+
+
{
+ router.replace('/transactions?tab=deposits');
+ }}
+ >
+
+
+ {STRINGS['P2P.GO_DEPOSIT']}
+
+
+
+ {!hasFeedback && (
+
{
+ setDisplayFeedbackModel(true);
+ }}
+ ghost
+ >
+
+ {STRINGS['P2P.SUBMIT_FEEDBACK']}
+
+
+ )}
+
+ )}
+ {selectedOrder.merchant_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.VENDOR_APPEALED']}
+
+
+ >
+ )}
+ {selectedOrder.user_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ >
+ )}
+ >
+ )}
+
+ {user.id === selectedOrder?.merchant_id && (
+ <>
+ {selectedOrder.merchant_status === 'confirmed' && (
+
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE']}
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE_VENDOR']}
+
+
+
{
+ router.replace('/transactions?tab=withdrawals');
+ }}
+ >
+
+
+ {STRINGS['P2P.GO_WITHDRAWALS']}
+
+
+
+ {!hasFeedback && (
+
{
+ setDisplayFeedbackModel(true);
+ }}
+ ghost
+ >
+
+ {STRINGS['P2P.SUBMIT_FEEDBACK']}
+
+
+ )}
+
+ )}
+
+ {selectedOrder.user_status === 'pending' && (
+ <>
+
+
+ {STRINGS['P2P.PAYMENT_NOT_SENT']}
+
+
+
+
+ {STRINGS['P2P.CONFIRM_AND_RELEASE']}
+
+
+ >
+ )}
+ {selectedOrder.user_status === 'cancelled' && (
+ <>
+
+
+ {STRINGS['P2P.TRANSACTION_CANCELLED']}
+
+
+ >
+ )}
+ {selectedOrder.user_status === 'confirmed' &&
+ selectedOrder?.merchant_status !== 'confirmed' && (
+ <>
+
+
+ {STRINGS['P2P.BUYER_CONFIRMED']}
+
+
+
+
+ {STRINGS['P2P.CHECK_AND_RELEASE']}
+
+
+ >
+ )}
+ {user.id === selectedOrder.user_id &&
+ selectedOrder.user_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ >
+ )}
+
+ {user.id === selectedOrder.merchant_id &&
+ selectedOrder.user_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.BUYER_APPEALED_ORDER']}
+
+
+ >
+ )}
+ >
+ )}
+
+
+ {user.id === selectedOrder?.user_id && (
+ <>
+ {selectedOrder.user_status === 'confirmed' &&
+ selectedOrder.merchant_status === 'pending' && (
+ <>
+
{
+ try {
+ setDisplayAppealModel(true);
+ setAppealSide('user');
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+
+ {STRINGS['P2P.APPEAL']}
+
+
+
+
{
+ setDisplayCancelWarning(true);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.CANCEL_ORDER']}
+
+
+
+
+ >
+ )}
+ >
+ )}
+
+ {user.id === selectedOrder?.merchant_id &&
+ selectedOrder?.merchant_status === 'pending' && (
+
+ {
+ try {
+ setDisplayAppealModel(true);
+ setAppealSide('merchant');
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.APPEAL']}
+
+
+
+
+ {
+ try {
+ setDisplayConfirmWarning(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CONFIRM_AND_RELEASE_CRYPTO']}
+
+
+
+
+ )}
+ {user.id === selectedOrder?.merchant_id &&
+ selectedOrder?.merchant_status === 'appeal' && (
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ )}
+
+
+
+
+
+
+ {user.id === selectedOrder?.merchant_id ? (
+
+ {STRINGS['P2P.CHAT_WITH_USER']}
+
+ ) : (
+
+ {STRINGS['P2P.CHAT_WITH_VENDOR']}
+
+ )}
+
+
+
{
+ try {
+ if (user.id === selectedOrder?.merchant_id) return;
+ setSelectedProfile(selectedOrder?.merchant);
+ const feedbacks = await fetchFeedback({
+ merchant_id: selectedOrder?.merchant_id,
+ });
+ const profile = await fetchP2PProfile({
+ user_id: selectedOrder?.merchant_id,
+ });
+ setUserFeedback(feedbacks.data);
+ setUserProfile(profile);
+ setDisplayUserFeedback(true);
+ } catch (error) {
+ return error;
+ }
+ }}
+ >
+ {user.id === selectedOrder?.merchant_id ? (
+
+
+ {STRINGS['P2P.USER_NAME']}
+
+
+ ) : (
+
+
+ {STRINGS['P2P.VENDOR_NAME']}
+
+
+ )}
+ {user.id === selectedOrder?.merchant_id
+ ? selectedOrder?.buyer?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )
+ : selectedOrder?.merchant?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+ {user.id === selectedOrder?.user_id && (
+
+
+ {selectedOrder?.deal?.side === 'sell' ? (
+
+ {STRINGS['P2P.ORDER_INITIATED']}
+
+ ) : (
+
+ {STRINGS['P2P.ORDER_INITIATED_VENDOR']}
+
+ )}
+
+
+ {selectedOrder?.merchant?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+
+ (
+ {moment(selectedOrder?.created_at).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ )}
+
+ {user.id === selectedOrder?.user_id && (
+
+
+ {STRINGS['P2P.CONFIRM_PAYMENT']}
+
+
+ )}
+
+ {user.id === selectedOrder?.merchant_id && (
+
+
+
+ {STRINGS['P2P.ORDER_INITIATED_VENDOR']}
+
+
+ {selectedOrder?.buyer?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+
+ (
+ {moment(selectedOrder?.created_at).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ )}
+ {user.id === selectedOrder?.merchant_id && (
+
+
+ {STRINGS['P2P.CONFIRM_PAYMENT_VENDOR']}
+
+
+ )}
+
+
+
+
+ {selectedOrder?.messages?.map((message, index) => {
+ if (index === 0) {
+ return (
+
+
+ {message.sender_id === selectedOrder?.merchant_id
+ ? selectedOrder?.merchant?.full_name
+ : selectedOrder?.buyer?.full_name}
+ :
+
+
{message.message}
+
+ {moment(message?.created_at || new Date()).format(
+ 'DD/MMM/YYYY, hh:mmA '
+ )}
+
+
+ );
+ } else {
+ if (message.type === 'notification') {
+ return (
+
+ {message.message === 'BUYER_PAID_ORDER' &&
+ user.id === selectedOrder.user_id ? (
+ selectedOrder?.deal?.side === 'sell' ? (
+
+ {STRINGS[`P2P.BUYER_SENT_FUNDS`]}
+
+ ) : (
+
+ {STRINGS[`P2P.BUYER_SENT_FUNDS_USER`]}
+
+ )
+ ) : (
+
+ {STRINGS[`P2P.${message.message}`]}
+
+ )}
+
+ (
+ {moment(
+ message?.created_at || new Date()
+ ).format('DD/MMM/YYYY, hh:mmA')}
+ )
+
+
+ );
+ } else {
+ if (message.sender_id === user.id) {
+ return (
+
+
+
+
+ {STRINGS['P2P.YOU']}:
+
+
+
+ {message?.message}
+
+
+ {moment(
+ message?.created_at || new Date()
+ ).format('DD/MMM/YYYY, hh:mmA ')}
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+ {message?.receiver_id ===
+ selectedOrder?.merchant_id
+ ? STRINGS['P2P.BUYER']
+ : selectedOrder?.merchant?.full_name ||
+ STRINGS['P2P.ANONYMOUS']}
+ :
+
+
+ {message?.message}
+
+
+
+ {moment(
+ message?.created_at || new Date()
+ ).format('DD/MMM/YYYY, hh:mmA ')}
+
+
+
+ );
+ }
+ }
+ }
+ })}
+
+
+
+
+
{
+ setChatMessage(e.target.value);
+ }}
+ suffix={
+
+
+ {STRINGS['P2P.SEND_UPPER']}
+
+
+
+ }
+ />
+
+
+
+
+
+ )}
+ {isMobile && (
+
+ {!isChat && (
+
+ )}
+ {isChat && (
+
+ )}
+
+ )}
+
+
+ {!isMobile &&
+ user.id === selectedOrder?.user_id &&
+ selectedOrder?.transaction_status === 'active' &&
+ selectedOrder.user_status === 'pending' && (
+
+ {
+ try {
+ setDisplayCancelWarning(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+ {
+ try {
+ await updateTransaction({
+ id: selectedOrder.id,
+ user_status: 'confirmed',
+ });
+ updateP2PStatus();
+ updateStatus('confirmed');
+ message.success(STRINGS['P2P.CONFIRMED_TRANSACTION']);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CONFIRM_TRANSFER']}
+
+
+
+ )}
+ >
+ );
+};
+
+const mapStateToProps = (state) => ({
+ pairs: state.app.pairs,
+ coins: state.app.coins,
+ constants: state.app.constants,
+ transaction_limits: state.app.transaction_limits,
+ p2p_message: state.p2p.chat,
+ p2p_status: state.p2p.status,
+ p2p_transaction_id: state.p2p.transaction_id,
+ user: state.user,
+ p2p_config: state.app.constants.p2p_config,
+ isChat: state.app.isChat,
+});
+
+export default connect(mapStateToProps)(withRouter(withConfig(P2POrder)));
diff --git a/web/src/containers/P2P/P2POrder/P2POrderChat.js b/web/src/containers/P2P/P2POrder/P2POrderChat.js
new file mode 100644
index 0000000000..035f72880a
--- /dev/null
+++ b/web/src/containers/P2P/P2POrder/P2POrderChat.js
@@ -0,0 +1,373 @@
+import React, { useEffect, useRef } from 'react';
+import { isMobile } from 'react-device-detect';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Input } from 'antd';
+import { SendOutlined } from '@ant-design/icons';
+import moment from 'moment';
+
+import '../_P2P.scss';
+import STRINGS from 'config/localizedStrings';
+import { EditWrapper, Image } from 'components';
+import { fetchFeedback, fetchP2PProfile } from '../actions/p2pActions';
+import { setIsChat } from 'actions/appActions';
+
+const P2POrderChat = ({
+ user,
+ ICONS,
+ selectedOrder,
+ chatMessage,
+ setChatMessage,
+ sendChatMessage,
+ setSelectedProfile,
+ setUserFeedback,
+ setDisplayUserFeedback,
+ setUserProfile,
+ isChat,
+ setIsChat,
+}) => {
+ const ref = useRef(null);
+ const buttonRef = useRef(null);
+
+ const handleKeyDown = (event) => {
+ if (event?.key === 'Enter') {
+ buttonRef.current.click();
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ localStorage.setItem('isChat', false);
+ setIsChat(false);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ ref.current.scroll({
+ top: 9999,
+ behavior: 'smooth',
+ });
+ }, [selectedOrder.messages]);
+
+ const onHandleChat = () => {
+ setIsChat(false);
+ localStorage.setItem('isChat', false);
+ };
+
+ return (
+
+
+ {isChat && (
+
onHandleChat()}>
+ {'<'}
+
+ {STRINGS['REFERRAL_LINK.BACK_LOWER']}
+
+
+
+ {STRINGS['P2P.BACK_TO_ORDERS']}
+
+
+
+ )}
+
+
+ {user?.id === selectedOrder?.merchant_id ? (
+
+ {STRINGS['P2P.CHAT_WITH_USER']}
+
+ ) : (
+
+ {STRINGS['P2P.CHAT_WITH_VENDOR']}
+
+ )}
+
+
+
+
{
+ try {
+ if (user?.id === selectedOrder?.merchant_id) return;
+ setSelectedProfile(selectedOrder?.merchant);
+ const feedbacks = await fetchFeedback({
+ merchant_id: selectedOrder?.merchant_id,
+ });
+ const profile = await fetchP2PProfile({
+ user_id: selectedOrder?.merchant_id,
+ });
+ setUserFeedback(feedbacks?.data);
+ setUserProfile(profile);
+ setDisplayUserFeedback(true);
+ } catch (error) {
+ return error;
+ }
+ }}
+ >
+ {user?.id === selectedOrder?.merchant_id ? (
+
+
+ {STRINGS['P2P.USER_NAME']}
+
+
+ ) : (
+
+
+ {STRINGS['P2P.VENDOR_NAME']}
+
+
+ )}
+ {user?.id === selectedOrder?.merchant_id
+ ? (
+
+ {selectedOrder?.buyer?.full_name}
+
+ ) || (
+
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+
+ )
+ : (
+
+ {selectedOrder?.merchant?.full_name}{' '}
+
+ ) || (
+
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+
+ )}
+
+
+ {user?.id === selectedOrder?.user_id && (
+
+
+
+ {STRINGS['P2P.ORDER_INITIATED']}
+
+
+ {selectedOrder?.merchant?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+
+ (
+ {moment(selectedOrder?.created_at).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ )}
+
+ {user?.id === selectedOrder?.user_id && (
+
+
+ {STRINGS['P2P.CONFIRM_PAYMENT']}
+
+
+ )}
+
+ {user?.id === selectedOrder?.merchant_id && (
+
+
+
+ {STRINGS['P2P.ORDER_INITIATED_VENDOR']}
+
+
+ {selectedOrder?.buyer?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
+
+
+
+ (
+ {moment(selectedOrder?.created_at)?.format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ )}
+ {user?.id === selectedOrder?.merchant_id && (
+
+
+ {STRINGS['P2P.CONFIRM_PAYMENT_VENDOR']}
+
+
+ )}
+
+
+
+
+ {selectedOrder?.messages?.map((message, index) => {
+ if (index === 0) {
+ return (
+
+
+ {message.sender_id === selectedOrder?.merchant_id
+ ? selectedOrder?.merchant?.full_name
+ : selectedOrder?.buyer?.full_name}
+ :
+
+
{message.message}
+
+ (
+ {moment(message?.created_at || new Date()).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ );
+ } else {
+ if (message.type === 'notification') {
+ return (
+
+ {message.message === 'BUYER_PAID_ORDER' &&
+ user?.id === selectedOrder?.user_id ? (
+
+ {STRINGS[`P2P.BUYER_SENT_FUNDS`]}
+
+ ) : (
+
+ {STRINGS[`P2P.${message?.message}`]}
+
+ )}
+
+ (
+ {moment(message?.created_at || new Date())?.format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+ );
+ } else {
+ if (message?.sender_id === user?.id) {
+ return (
+
+
+
+
+ {STRINGS['P2P.YOU']}:
+
+
+
+ {message?.message}
+
+
+ (
+ {moment(message?.created_at || new Date()).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+ {message?.receiver_id ===
+ selectedOrder?.merchant_id
+ ? STRINGS['P2P.BUYER']
+ : selectedOrder?.merchant?.full_name}
+ :
+
+
+ {message?.message}
+
+
+
+ (
+ {moment(message?.created_at || new Date())?.format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+ )
+
+
+
+ );
+ }
+ }
+ }
+ })}
+
+
+
+
+
+
{
+ setChatMessage(e.target.value);
+ }}
+ suffix={
+
+
+ {STRINGS['P2P.SEND_UPPER']}
+
+
+
+ }
+ />
+
+
+
+
+ );
+};
+
+const mapDispatchToProps = (dispatch) => ({
+ setIsChat: bindActionCreators(setIsChat, dispatch),
+});
+
+export default connect('', mapDispatchToProps)(P2POrderChat);
diff --git a/web/src/containers/P2P/P2POrder/P2POrderDetails.js b/web/src/containers/P2P/P2POrder/P2POrderDetails.js
new file mode 100644
index 0000000000..136a314beb
--- /dev/null
+++ b/web/src/containers/P2P/P2POrder/P2POrderDetails.js
@@ -0,0 +1,675 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { isMobile } from 'react-device-detect';
+import { Button, message, Tooltip } from 'antd';
+import { CheckCircleTwoTone } from '@ant-design/icons';
+
+import STRINGS from 'config/localizedStrings';
+import { Coin, EditWrapper, Image } from 'components';
+import { setIsChat } from 'actions/appActions';
+
+const P2POrderDetails = ({
+ user,
+ coin,
+ coins,
+ router,
+ p2p_config,
+ hasFeedback,
+ formatAmount,
+ userReceiveAmount,
+ selectedOrder,
+ setDisplayConfirmWarning,
+ setDisplayCancelWarning,
+ setDisplayAppealModel,
+ setAppealSide,
+ setDisplayFeedbackModel,
+ setIsChat,
+ ICONS,
+ updateP2PStatus,
+ updateStatus,
+ updateTransaction,
+}) => {
+ const onHandleChat = () => {
+ setIsChat(true);
+ localStorage.setItem('isChat', true);
+ };
+
+ return (
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER']}:
+
+
+
+ {selectedOrder?.transaction_id}
+
+
+ {user?.id === selectedOrder?.merchant_id ? (
+
+ {STRINGS['P2P.SELL_COIN']}
+
+ ) : (
+
+ {STRINGS['P2P.BUY_COIN']}
+
+ )}{' '}
+ {coin?.fullname} ({coin?.symbol?.toUpperCase()})
+
+
+ {isMobile && (
+
+ onHandleChat()}>
+
+
+ {STRINGS['USER_SETTINGS.TITLE_CHAT']?.toUpperCase()}
+
+
+
+
+
+ )}
+
+ {/*
+
+
+ {STRINGS['P2P.TRANSACTION_ID']}
+
+
+
{selectedOrder.transaction_id}
+
*/}
+
+
+
+ {STRINGS['P2P.AMOUNT_TO']}
+ {' '}
+
+ {user?.id === selectedOrder?.merchant_id
+ ? STRINGS['P2P.RELEASE']
+ : STRINGS['P2P.SEND_UPPER']}
+
+ :
+
+
+ {user?.id === selectedOrder?.merchant_id && (
+
+ {userReceiveAmount()}
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+ )}
+ {user?.id === selectedOrder?.user_id && (
+
+
+ {selectedOrder?.amount_fiat}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+ )}
+
+ {user?.id === selectedOrder?.merchant_id ? (
+
+ {STRINGS['P2P.AMOUNT_SEND_RELEASE']}
+
+ ) : (
+
+ {STRINGS['P2P.REQUIRED_FLAT_TRANSFER_AMOUNT']}
+
+ )}
+
+
+
+
+
+ {STRINGS['P2P.PRICE']}
+ :
+
+
+
+
+ {formatAmount(
+ selectedOrder?.deal?.spending_asset,
+ selectedOrder?.price
+ )}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+
+
+
+ {STRINGS['P2P.PER_COIN']}
+ {' '}
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+
+
+
+ {STRINGS['P2P.RECEIVING_AMOUNT']}
+
+ :
+
+ {user?.id === selectedOrder?.merchant_id && (
+
+
+
+ {selectedOrder?.amount_fiat}
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+
+
+ {selectedOrder?.deal?.spending_asset?.toUpperCase()}
+
+
+ {STRINGS['P2P.SPENDING_AMOUNT']}
+
+
+
+
+ )}
+
+ {user?.id === selectedOrder?.user_id && (
+
+
+ {userReceiveAmount()}
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+ {selectedOrder?.deal?.buying_asset?.toUpperCase()}
+
+
+ {STRINGS['P2P.BUYING_AMOUNT']}
+
+
+
+
+ )}
+
+
+
+ {STRINGS['P2P.FEE']} :
+
+ {user?.id === selectedOrder?.merchant_id && (
+
+
{p2p_config?.merchant_fee}%
+
+ )}
+
+ {user?.id === selectedOrder?.user_id && (
+
+
{p2p_config?.user_fee}%
+
+ )}
+
+
+
+
+ {STRINGS['P2P.TRANSFER_DETAILS']}
+
+
+ {user?.id === selectedOrder?.user_id && (
+
+
+ {STRINGS['P2P.PAYMENT_INSTRUCTIONS']}
+
+
+ )}
+
+ {user?.id === selectedOrder?.merchant_id && (
+
+
+ {STRINGS['P2P.PAYMENT_ACCOUNT']}
+
+
+ )}
+
+
+
+
+
+ {STRINGS['P2P.PAYMENT_METHOD']}
+
+ :
+
+
{selectedOrder?.payment_method_used?.system_name}
+
+
+ {selectedOrder?.payment_method_used?.fields?.map((x) => {
+ return (
+
+
{x?.name}:
+
{x?.value}
+
+ );
+ })}
+
+
+
+
+ {/*
+
+ {STRINGS['P2P.EXPECTED_TIME']}
+
+
*/}
+
+ {user?.id === selectedOrder?.user_id && (
+ <>
+ {selectedOrder?.user_status === 'pending' && (
+ <>
+
+
+ {STRINGS['P2P.PAYMENT_TIME']}
+
+
+
+
+ {STRINGS['P2P.ORDER_CANCELLED']}
+
+
+ >
+ )}
+
+ {selectedOrder?.user_status === 'confirmed' && (
+
+
+ {STRINGS['P2P.FUNDS_CREDITED']}
+
+
+ )}
+
+ {selectedOrder?.merchant_status === 'cancelled' && (
+
+
+ {STRINGS['P2P.VENDOR_CANCELLED']}
+
+
+ )}
+
+ {selectedOrder?.merchant_status === 'confirmed' && (
+
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE']}
+
+
+
+
+
+ {STRINGS['P2P.FUNDS_TRANSFERRED']}
+
+
+
{
+ router.replace('/transactions?tab=deposits');
+ }}
+ >
+
+
+ {STRINGS['P2P.GO_DEPOSIT']}
+
+
+
+ {!hasFeedback && (
+
{
+ setDisplayFeedbackModel(true);
+ }}
+ ghost
+ >
+
+ {STRINGS['P2P.SUBMIT_FEEDBACK']}
+
+
+ )}
+
+ )}
+ {selectedOrder?.merchant_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.VENDOR_APPEALED']}
+
+
+ >
+ )}
+ {selectedOrder?.user_status === 'appeal' && (
+ <>
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ >
+ )}
+ >
+ )}
+
+ {user?.id === selectedOrder?.merchant_id && (
+ <>
+ {selectedOrder.merchant_status === 'confirmed' && (
+
+
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE']}
+
+
+
+
+
+ {STRINGS['P2P.ORDER_COMPLETE_VENDOR']}
+
+
+
{
+ router.replace('/transactions?tab=withdrawals');
+ }}
+ >
+
+
+ {STRINGS['P2P.GO_WITHDRAWALS']}
+
+
+
+
+ )}
+
+ {selectedOrder?.user_status === 'pending' && (
+ <>
+
+
+ {STRINGS['P2P.PAYMENT_NOT_SENT']}
+
+
+
+
+ {STRINGS['P2P.CONFIRM_AND_RELEASE']}
+
+
+ >
+ )}
+ {selectedOrder?.user_status === 'cancelled' && (
+
+
+ {STRINGS['P2P.TRANSACTION_CANCELLED']}
+
+
+ )}
+ {selectedOrder?.user_status === 'confirmed' &&
+ selectedOrder?.merchant_status !== 'confirmed' && (
+ <>
+
+
+ {STRINGS['P2P.BUYER_CONFIRMED']}
+
+
+
+
+ {STRINGS['P2P.CHECK_AND_RELEASE']}
+
+
+ >
+ )}
+ {user?.id === selectedOrder?.user_id &&
+ selectedOrder.user_status === 'appeal' && (
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ )}
+
+ {user?.id === selectedOrder?.merchant_id &&
+ selectedOrder.user_status === 'appeal' && (
+
+
+ {STRINGS['P2P.BUYER_APPEALED_ORDER']}
+
+
+ )}
+ >
+ )}
+
+
+ {user?.id === selectedOrder?.user_id && (
+ <>
+ {selectedOrder?.user_status === 'confirmed' &&
+ selectedOrder?.merchant_status === 'pending' && (
+ <>
+
{
+ try {
+ setDisplayAppealModel(true);
+ setAppealSide('user');
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+
+ {STRINGS['P2P.APPEAL']}
+
+
+
+
{
+ setDisplayCancelWarning(true);
+ }}
+ >
+
+
+
+ {STRINGS['P2P.CANCEL_ORDER']}
+
+
+
+
+ >
+ )}
+ >
+ )}
+
+ {user?.id === selectedOrder?.merchant_id &&
+ selectedOrder?.merchant_status === 'pending' && (
+
+ {
+ try {
+ setDisplayAppealModel(true);
+ setAppealSide('merchant');
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ className="appeal-link blue-link"
+ >
+
+ {STRINGS['P2P.APPEAL']}
+
+
+
+
+ {
+ try {
+ setDisplayConfirmWarning(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CONFIRM_AND_RELEASE_CRYPTO']}
+
+
+
+
+ )}
+ {user?.id === selectedOrder?.merchant_id &&
+ selectedOrder?.merchant_status === 'appeal' && (
+
+
+ {STRINGS['P2P.USER_APPEALED']}
+
+
+ )}
+
+
+ {user.id === selectedOrder?.user_id &&
+ selectedOrder?.transaction_status === 'active' &&
+ selectedOrder.user_status === 'pending' && (
+
+ {
+ try {
+ setDisplayCancelWarning(true);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CANCEL']}
+
+
+ {
+ try {
+ await updateTransaction({
+ id: selectedOrder.id,
+ user_status: 'confirmed',
+ });
+ updateP2PStatus();
+ updateStatus('confirmed');
+ message.success(STRINGS['P2P.CONFIRMED_TRANSACTION']);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }}
+ >
+
+ {STRINGS['P2P.CONFIRM_TRANSFER']}
+
+
+
+ )}
+
+ );
+};
+
+const mapDispatchToProps = (dispatch) => ({
+ setIsChat: bindActionCreators(setIsChat, dispatch),
+});
+
+export default connect('', mapDispatchToProps)(withRouter(P2POrderDetails));
diff --git a/web/src/containers/P2P/P2POrders.js b/web/src/containers/P2P/P2POrders.js
index 81d410de48..19256c33ec 100644
--- a/web/src/containers/P2P/P2POrders.js
+++ b/web/src/containers/P2P/P2POrders.js
@@ -1,18 +1,20 @@
-/* eslint-disable */
import React, { useEffect, useState } from 'react';
+import { withRouter } from 'react-router';
import { connect } from 'react-redux';
-// import { ReactSVG } from 'react-svg';
+import { isMobile } from 'react-device-detect';
+import { Button } from 'antd';
+import { CheckCircleTwoTone, PlaySquareTwoTone } from '@ant-design/icons';
-import { IconTitle, EditWrapper } from 'components';
+import './_P2P.scss';
+import classnames from 'classnames';
import STRINGS from 'config/localizedStrings';
import withConfig from 'components/ConfigProvider/withConfig';
-import { Button, Radio } from 'antd';
+import Filter from './Filters';
+import NoDealsData from './Utilis';
+import { Coin, EditWrapper } from 'components';
import { fetchTransactions } from './actions/p2pActions';
-import { withRouter } from 'react-router';
import { formatToCurrency } from 'utils/currency';
-import { isMobile } from 'react-device-detect';
-import classnames from 'classnames';
-import './_P2P.scss';
+
const P2POrders = ({
data,
onClose,
@@ -28,233 +30,305 @@ const P2POrders = ({
user,
router,
changeProfileTab,
+ tab,
}) => {
const [transactions, setTransactions] = useState([]);
const [filter, setFilter] = useState();
- const [option, setOption] = useState('2');
+ const [transactionDetails, setTransactionDetails] = useState([]);
+ // const [option, setOption] = useState('2');
+ const [transactionStatus, setTransactionStatus] = useState('P2P.ALL_ORDERS');
+ const [isFilter, setIsFilter] = useState(false);
+
+ const orderStatus = ['P2P.PROCESSING', 'P2P.ALL_ORDERS'];
+ const digitalCurrencies = localStorage?.getItem('digitalCurrencies');
+ const selectedCurrencies = JSON.parse(digitalCurrencies);
useEffect(() => {
fetchTransactions()
.then((res) => {
setTransactions(res.data);
+ setTransactionDetails(res.data);
})
.catch((err) => err);
}, [refresh]);
+ useEffect(() => {
+ if (tab !== 1 && isMobile) {
+ setIsFilter(false);
+ }
+ }, [tab]);
+
const formatAmount = (currency, amount) => {
const min = coins[currency].min;
const formattedAmount = formatToCurrency(amount, min);
return formattedAmount;
};
+ const handleStatus = (status) => {
+ setTransactionStatus(status);
+ if (status === 'P2P.PROCESSING') {
+ setFilter('active');
+ setTransactions(transactionDetails);
+ }
+ if (status === 'P2P.ALL_ORDERS') {
+ setFilter();
+ }
+ };
return (
0
+ ? 'P2pOrder p2p-order-tab-container'
+ : 'P2pOrder p2p-order-tab-container p2p-no-deals-container',
+ isMobile ? 'mobile-view-p2p' : '',
+ ]
+ )}
>
-
-
setOption(e.target.value)}>
- {
- setFilter('active');
- }}
- >
-
- {STRINGS['P2P.PROCESSING']}
-
-
- {
- setFilter();
- }}
+
+ {orderStatus?.map((status) => {
+ return (
+
handleStatus(status)}
+ >
+ {STRINGS[status]}
+
+ );
+ })}
+ {isMobile && (
+
setIsFilter(!isFilter)}
>
-
- {STRINGS['P2P.ALL_ORDERS']}
-
-
-
+ {
+
+
+ {isFilter
+ ? STRINGS['P2P.HIDE_FILTERS']
+ : STRINGS['P2P.SHOW_FILTERS']}
+
+
+ }
+
+ )}
+ {((transactionStatus === 'P2P.ALL_ORDERS' && !isMobile) || isFilter) && (
+
+ )}
+
+ {transactions?.length > 0 ? (
+
+
+
+
+
+ {STRINGS['P2P.TYPE_COIN']}
+
+
+
+
+ {STRINGS['P2P.FIAT_AMOUNT']}
+
+
+
+
+ {STRINGS['P2P.PRICE']}
+
+
+
+
+ {STRINGS['P2P.CRYPTO_AMOUNT']}
+
+
+
+
+ {STRINGS['P2P.COUNTERPARTY']}
+
+
+
+
+ {STRINGS['P2P.STATUS']}
+
+
+
+
+ {STRINGS['P2P.OPERATION']}
+
+
+
+
+
+ {transactions
+ ?.filter((x) =>
+ filter
+ ? ['active', 'appealed']?.includes(x?.transaction_status)
+ : true
+ )
+ ?.map((transaction) => {
+ const statusClassMap = {
+ complete: 'active-green',
+ appealed: 'active-orange',
+ active: 'active-yellow',
+ };
-
-
-
-
-
-
- {STRINGS['P2P.TYPE_COIN']}
-
-
-
-
- {STRINGS['P2P.FIAT_AMOUNT']}
-
-
-
-
- {STRINGS['P2P.PRICE']}
-
-
-
-
- {STRINGS['P2P.CRYPTO_AMOUNT']}
-
-
-
-
- {STRINGS['P2P.COUNTERPARTY']}
-
-
-
-
- {STRINGS['P2P.STATUS']}
-
-
-
-
- {STRINGS['P2P.OPERATION']}
-
-
-
-
-
- {transactions
- .filter((x) =>
- filter
- ? ['active', 'appealed'].includes(x.transaction_status)
- : true
- )
- .map((transaction) => {
- return (
-
-
- {transaction?.user_id === user.id ? (
-
+ const transactionStatusClass =
+ statusClassMap[transaction?.transaction_status] ||
+ 'inactive-text';
+ const isDisabled = [
+ 'expired',
+ 'cancelled',
+ 'closed',
+ ].includes(transaction?.transaction_status);
+ return (
+
+
+ {transaction?.user_id === user?.id ? (
+
+
+
+ {STRINGS['P2P.BUY_COIN']}
+
+ {` ${transaction?.deal?.buying_asset?.toUpperCase()}`}
+
+
+ ) : (
+
+
+
+ {STRINGS['P2P.SELL_COIN']}
+
+ {` ${transaction?.deal?.buying_asset?.toUpperCase()}`}
+
+
+ )}
+
+
+
+ {transaction?.amount_fiat}
+
+ {transaction?.deal?.spending_asset?.toUpperCase()}
+
+
+
+
+ {formatAmount(
+ transaction?.deal?.buying_asset,
+ transaction?.price
+ )}
+
+
+ {transaction?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+
+ {formatAmount(
+ transaction?.deal?.buying_asset,
+ transaction?.amount_digital_currency
+ )}
+
-
- {STRINGS['P2P.BUY_COIN']}
-
- {` ${transaction?.deal?.buying_asset?.toUpperCase()}`}
+ {transaction?.deal?.buying_asset?.toUpperCase()}
+
+
+
+
+
+ {transaction?.user_id === user?.id ? (
+ {
+ changeProfileTab(transaction?.merchant);
+ }}
+ >
+ {transaction?.merchant?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
-
- ) : (
-
+ ) : (
-
- {STRINGS['P2P.SELL_COIN']}
-
- {` ${transaction?.deal?.buying_asset?.toUpperCase()}`}
+ {transaction?.buyer?.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )}
-
- )}
-
+ )}
+
+
+
+
+ {transaction?.transaction_status}
+
+ {transaction?.transaction_status === 'complete' && (
+
+
+
+ )}
+ {transaction?.transaction_status === 'active' && (
+
+
+
+ )}
+
+
-
- {transaction?.amount_fiat}{' '}
- {transaction?.deal?.spending_asset?.toUpperCase()}
-
-
- {formatAmount(
- transaction?.deal?.buying_asset,
- transaction?.price
- )}{' '}
- {transaction?.deal?.buying_asset?.toUpperCase()}
-
-
- {formatAmount(
- transaction?.deal?.buying_asset,
- transaction?.amount_digital_currency
- )}{' '}
- {transaction?.deal?.buying_asset?.toUpperCase()}
-
-
- {transaction?.user_id === user.id ? (
-
+ {
- changeProfileTab(transaction?.merchant);
+ setDisplayOrder(true);
+ setSelectedTransaction(transaction);
+ router.replace(`/p2p/order/${transaction?.id}`);
}}
>
- {transaction?.merchant?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}
-
- ) : (
-
- {transaction?.buyer?.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
- )}
-
- )}
-
-
- {transaction?.transaction_status?.toUpperCase()}
-
-
-
- {
- setDisplayOrder(true);
- setSelectedTransaction(transaction);
- router.replace(`/p2p/order/${transaction.id}`);
- }}
- style={{
- display: 'flex',
- justifyContent: 'flex-end',
- cursor: 'pointer',
- }}
- className="purpleTextP2P"
- >
-
- {STRINGS['P2P.VIEW_ORDER']}
-
-
-
-
- );
- })}
-
-
+
+
+ {STRINGS['P2P.VIEW_ORDER']}
+
+
+
+
+
+ );
+ })}
+
+
+ ) : (
+
+ )}
);
diff --git a/web/src/containers/P2P/P2PPostDeal.js b/web/src/containers/P2P/P2PPostDeal.js
index b99204fa5c..6330e024b4 100644
--- a/web/src/containers/P2P/P2PPostDeal.js
+++ b/web/src/containers/P2P/P2PPostDeal.js
@@ -1,22 +1,24 @@
-/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
-import { ReactSVG } from 'react-svg';
-import { Button, Steps, message, Modal } from 'antd';
-import { IconTitle, EditWrapper } from 'components';
-import { getBroker } from 'containers/Admin/Trades/actions';
-import { createTestBroker } from 'containers/Admin/Trades/actions';
-import STRINGS from 'config/localizedStrings';
-import withConfig from 'components/ConfigProvider/withConfig';
-import { Switch, Select, Input, InputNumber } from 'antd';
-import { postDeal, editDeal, getQuickTrade } from './actions/p2pActions';
-import { CloseOutlined } from '@ant-design/icons';
-import { formatToCurrency } from 'utils/currency';
-import { COUNTRIES_OPTIONS } from 'utils/countries';
import { isMobile } from 'react-device-detect';
+import { Button, message } from 'antd';
+import { Switch, Select, Input, InputNumber } from 'antd';
+import {
+ ArrowRightOutlined,
+ ExclamationCircleFilled,
+ SyncOutlined,
+} from '@ant-design/icons';
+
+import './_P2P.scss';
import classnames from 'classnames';
+import STRINGS from 'config/localizedStrings';
import BigNumber from 'bignumber.js';
-import './_P2P.scss';
+import withConfig from 'components/ConfigProvider/withConfig';
+import P2PPostDealMobile from './P2PPostDealMobile';
+import { Coin, Dialog, EditWrapper } from 'components';
+import { COUNTRIES_OPTIONS } from 'utils/countries';
+import { createTestBroker } from 'containers/Admin/Trades/actions';
+import { editDeal, postDeal } from './actions/p2pActions';
const P2PPostDeal = ({
data,
@@ -29,6 +31,7 @@ const P2PPostDeal = ({
transaction_limits,
tiers = {},
p2p_config,
+ tab,
setTab,
setRefresh,
refresh,
@@ -52,23 +55,16 @@ const P2PPostDeal = ({
const [paymentMethods, setPaymentMethods] = useState([]);
const [selectedMethod, setSelectedMethod] = useState({});
const [addMethodDetails, setAddMethodDetails] = useState();
+ const [isEditMode, setIsEditMode] = useState(false);
const [region, setRegion] = useState();
const [brokerData, setBrokerData] = useState([]);
const [dynamicPair, setDynamicPair] = useState();
const [dynamicRate, setDynamicRate] = useState();
-
- const dataSte = [
- {
- title: STRINGS['P2P.STEP_SET_TYPE_PRICE'],
- },
- {
- title: STRINGS['P2P.STEP_SET_TOTAL_AMOUNT_PAYMENT_METHODS'],
- },
- {
- title: STRINGS['P2P.STEP_SET_TERMS_AUTO_RESPONSE'],
- },
- ];
- const { Step } = Steps;
+ const [currStep, setCurrStep] = useState({
+ stepOne: true,
+ stepTwo: false,
+ stepThree: false,
+ });
useEffect(() => {
if (selectedDealEdit) {
@@ -87,24 +83,19 @@ const P2PPostDeal = ({
setP2pSide(selectedDealEdit?.side);
setStep(1);
} else {
- setPriceType('static');
- setBuyingAsset();
- setSpendingAsset();
- setExchangeRate();
- setSpread();
- setTotalOrderAmount();
- setMinOrderValue();
- setMaxOrderValue();
- setTerms();
- setAutoResponse();
- setPaymentMethods([]);
- setRegion();
- setStep(1);
+ onHandleDeals();
}
getBrokerData();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedDealEdit]);
+ useEffect(() => {
+ return () => {
+ onHandleDeals();
+ };
+ }, [tab]);
+
const getBrokerData = async () => {
try {
const res = broker;
@@ -146,999 +137,1314 @@ const P2PPostDeal = ({
return formatAmount(asset, amount);
};
- return (
-
-
-
- {dataSte.map((item, index) => (
-
- ))}
-
-
+ const onHandleDeals = () => {
+ setDynamicRate();
+ setPriceType('static');
+ setBuyingAsset();
+ setSpendingAsset();
+ setExchangeRate();
+ setSpread();
+ setTotalOrderAmount();
+ setMinOrderValue();
+ setMaxOrderValue();
+ setTerms();
+ setAutoResponse();
+ setPaymentMethods([]);
+ setRegion();
+ setStep(1);
+ setCurrStep({
+ stepOne: true,
+ stepTwo: false,
+ stepThree: false,
+ });
+ };
+ const handleNextStep = async () => {
+ if (
+ step === 1 &&
+ (!priceType ||
+ !buyingAsset ||
+ !spendingAsset ||
+ (priceType === 'static' && !exchangeRate) ||
+ (priceType === 'dynamic' && !dynamicRate))
+ ) {
+ message.error(STRINGS['P2P.PLEASE_FILL_INPUTS']);
+ return;
+ }
-
-
-
-
-
- {STRINGS['P2P.I_WANT_TO_BUY']}
-
-
-
- {
- if (step !== 1) return;
- if (p2p_config.side === 'sell' && !checked) return;
- if (p2p_config.side === 'buy' && checked) return;
+ if (
+ step === 2 &&
+ (!totalOrderAmount ||
+ !minOrderValue ||
+ !maxOrderValue ||
+ paymentMethods.length === 0 ||
+ !region)
+ ) {
+ message.error(STRINGS['P2P.PLEASE_FILL_INPUTS']);
+ return;
+ }
- if (checked) {
- setP2pSide('sell');
- } else {
- setP2pSide('buy');
- }
- }}
- />
-
-
-
- {STRINGS['P2P.I_WANT_TO_SELL']}
-
-
-
+ if (step < 3) {
+ if (step === 1) {
+ setCurrStep({
+ ...currStep,
+ stepTwo: true,
+ });
+ }
+ if (step === 2) {
+ setCurrStep({
+ ...currStep,
+ stepThree: true,
+ });
+ }
+ setStep(step + 1);
+ } else {
+ try {
+ if (autoResponse.length > 240) {
+ message.error(STRINGS['P2P.AUTO_RESPONSE_LIMIT']);
+ return;
+ }
- {selectedDealEdit && (
-
+ if (terms.length > 240) {
+ message.error(STRINGS['P2P.TERMS_RESPONSE_LIMIT']);
+ return;
+ }
+
+ if (selectedDealEdit) {
+ await editDeal({
+ id: selectedDealEdit.id,
+ side: p2pSide,
+ price_type: priceType,
+ dynamic_pair: dynamicPair,
+ buying_asset: buyingAsset,
+ spending_asset: spendingAsset,
+ exchange_rate: Number(exchangeRate || 0),
+ spread: Number(spread),
+ region,
+ total_order_amount: Number(totalOrderAmount),
+ min_order_value: Number(minOrderValue),
+ max_order_value: Number(maxOrderValue),
+ terms: terms,
+ auto_response: autoResponse,
+ payment_methods: paymentMethods,
+ });
+ setSelectedDealEdit();
+ } else {
+ await postDeal({
+ side: p2pSide,
+ price_type: priceType,
+ dynamic_pair: dynamicPair,
+ buying_asset: buyingAsset,
+ spending_asset: spendingAsset,
+ exchange_rate: Number(exchangeRate || 0),
+ spread: Number(spread),
+ region,
+ total_order_amount: Number(totalOrderAmount),
+ min_order_value: Number(minOrderValue),
+ max_order_value: Number(maxOrderValue),
+ terms: terms,
+ auto_response: autoResponse,
+ payment_methods: paymentMethods,
+ });
+ }
+
+ setPriceType('static');
+ setBuyingAsset();
+ setSpendingAsset();
+ setExchangeRate();
+ setSpread();
+ setTotalOrderAmount();
+ setMinOrderValue();
+ setMaxOrderValue();
+ setTerms();
+ setAutoResponse();
+ setPaymentMethods([]);
+ setRegion();
+ setStep(1);
+ setCurrStep({
+ stepOne: true,
+ stepTwo: false,
+ stepThree: false,
+ });
+
+ message.success(
+ `${
+ selectedDealEdit
+ ? STRINGS['P2P.DEAL_EDITED']
+ : STRINGS['P2P.DEAL_CREATED']
+ }`
+ );
+ setTab('4');
+ setRefresh(!refresh);
+ } catch (error) {
+ message.error(error.data.message);
+ }
+ }
+ };
+
+ const handlePreviousStep = () => {
+ if (step > 1) {
+ setStep(step - 1);
+ if (step === 2) {
+ setCurrStep({
+ ...currStep,
+ stepTwo: false,
+ });
+ if (!selectedDealEdit) {
+ setTotalOrderAmount();
+ setMinOrderValue();
+ setMaxOrderValue();
+ setPaymentMethods([]);
+ setRegion();
+ }
+ }
+ if (step === 3) {
+ setCurrStep({
+ ...currStep,
+ stepThree: false,
+ });
+ if (!selectedDealEdit) {
+ setTerms();
+ setAutoResponse();
+ }
+ }
+ }
+ };
+
+ return (
+
+
+ {!isMobile && selectedDealEdit && (
+
+
+
+
+
- {STRINGS['P2P.UPDATE_DEAL']}
+
+ {STRINGS['P2P.UPDATE_DEAL']}
+
- )}
-
- {step === 1 && (
-
-
-
-
- {p2pSide === 'sell' ? (
-
- {STRINGS['P2P.SELL_UPPER']}
-
- ) : (
-
- {STRINGS['P2P.BUY_UPPER']}
+
+ )}
+ {!isMobile ? (
+
+
+
+ {STRINGS['P2P.STEP_SET_TYPE_PRICE']}
+
+
+
+ {STRINGS['P2P.STEP_SET_TOTAL_AMOUNT_PAYMENT_METHODS']}
+
+
+
+
+ {STRINGS['P2P.STEP_SET_TERMS_AUTO_RESPONSE']}
+
+
+
+
+
+ 1
+
+
+
+ 2
+
+
+
+ 3
+
+
+
+
+ {step === 1 && (
+
+
+
+ {STRINGS['P2P.I_WANT_TO_BUY']}
- )}
-
-
- {
- setBuyingAsset(e);
- }}
+
+
+ {
+ if (step !== 1) return;
+ if (p2p_config.side === 'sell' && !checked) return;
+ if (p2p_config.side === 'buy' && checked) return;
+
+ if (checked) {
+ setP2pSide('sell');
+ } else {
+ setP2pSide('buy');
+ }
+ }}
+ disabled={selectedDealEdit}
+ />
+
+
- {p2p_config?.digital_currencies.map((coin) => (
-
- {coin?.toUpperCase()}
-
- ))}
-
-
-
-
- {STRINGS['P2P.CRYPTO_WANT_TO_SELL']}
-
+
+ {STRINGS['P2P.I_WANT_TO_SELL']}
+
+
-
-
- {/* {'>'} */}
-
-
-
+ )}
+ {(step === 2 || step === 3) && (
+
{p2pSide === 'sell' ? (
-
- {STRINGS['P2P.RECEIVE']}
-
+
+ {buyingAsset?.toUpperCase()}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.SELLING'],
+ {buyingAsset?.toUpperCase()}
+ )}
+
+
) : (
-
- {STRINGS['P2P.SEND_UPPER']}
-
+
+ {spendingAsset?.toUpperCase()}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.BUYING'],
+ {spendingAsset?.toUpperCase()}
+ )}
+
+
)}
-
- {
- setSpendingAsset(e);
- }}
- >
- {p2p_config?.fiat_currencies.map((coin) => (
-
- {coin?.toUpperCase()}
-
- ))}
-
-
-
-
- {STRINGS['P2P.FIAT_CURRENCY_WANT_TO_RECEIVE']}
-
-
-
-
-
-
-
-
-
- {STRINGS['P2P.TYPE']}
-
- :
-
-
- {
- setPriceType(e);
- setExchangeRate();
- setDynamicRate();
- setDynamicPair();
- }}
- >
-
- {STRINGS['P2P.STATIC']}
-
-
- {STRINGS['P2P.DYNAMIC']}
-
-
-
-
- {priceType === 'static' && (
- <>
-
-
- {STRINGS['P2P.PRICE_UPPER']}
- {' '}
- {spendingAsset
- ? `(${spendingAsset?.toUpperCase()})`
- : ''}
-
+ )}
+ {step === 1 && (
+
+
-
{
- if (!buyingAsset) return;
- if (isNaN(e)) return;
- if (e >= 0) {
- setExchangeRate(e);
- }
- }}
- />
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.SELL_UPPER']}
+
+ ) : (
+
+ {STRINGS['P2P.BUY_UPPER']}
+
+ )}
+
+
+ {buyingAsset && (
+
+ )}
+ {
+ setBuyingAsset(e);
+ }}
+ >
+ {p2p_config?.digital_currencies.map((coin) => (
+
+ {coin?.toUpperCase()}
+
+ ))}
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.CRYPTO_WANT_TO_SELL']}
+
+ ) : (
+
+ {STRINGS['P2P.CRYPTO_WANT_TO_BUY']}
+
+ )}
+
- >
- )}
-
- {priceType === 'dynamic' && (
- <>
-
-
- {STRINGS['P2P.PRICE_UPPER']}
- {' '}
- {spendingAsset
- ? `(${spendingAsset?.toUpperCase()})`
- : ''}
+
-
{
- setDynamicPair(e);
- getDynamicRate(e);
- }}
- >
- {brokerData
- .filter((broker) => broker.type === 'dynamic')
- .map((broker) => (
-
- {broker.symbol}
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.RECEIVE']}
+
+ ) : (
+
+ {STRINGS['P2P.SEND_UPPER']}
+
+ )}
+
+
+ {
+ setSpendingAsset(e);
+ }}
+ >
+ {p2p_config?.fiat_currencies?.map((coin) => (
+
+ {coin?.toUpperCase()}
))}
-
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.FIAT_CURRENCY_WANT_TO_RECEIVE']}
+
+ ) : (
+
+ {STRINGS['P2P.FIAT_CURRENCY_WANT_TO_SPEND']}
+
+ )}
+
-
Rate: {formatAmount('', dynamicRate) || '-'}
- >
- )}
-
-
-
- {STRINGS['P2P.SPREAD_PERCENTAGE']}
-
-
-
- {
- if (isNaN(e)) return;
- if (e >= 0) {
- setSpread(e);
- }
- }}
- />
-
-
-
- {STRINGS['P2P.PRICE_PROFIT_SPREAD_SET']}
-
-
-
-
- {/* {'>'} */}
-
-
- {exchangeRate && (
-
-
-
- {STRINGS['P2P.UNIT_PRICE']}
-
-
-
- {formatRate(exchangeRate, spread, spendingAsset)}
-
-
- {p2pSide === 'sell' ? (
-
- {STRINGS['P2P.PRICE_ADVERTISE_SELL']}
-
- ) : (
-
- {STRINGS['P2P.PRICE_ADVERTISE_BUY']}
-
- )}{' '}
- {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''}
-
-
- )}
-
- {dynamicRate && (
-
-
-
- {STRINGS['P2P.UNIT_PRICE']}
-
-
-
- {formatRate(dynamicRate, spread, spendingAsset)}
-
-
- {p2pSide === 'sell' ? (
-
- {STRINGS['P2P.PRICE_ADVERTISE_SELL']}
-
- ) : (
-
- {STRINGS['P2P.PRICE_ADVERTISE_BUY']}
-
- )}{' '}
- {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''}
-
-
- )}
-
-
- )}
-
- {step === 2 && (
-
-
-
- {p2pSide === 'sell' ? (
-
-
- {STRINGS['P2P.TOTAL_ASSET_SELL_1']}
- {' '}
- {buyingAsset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.TOTAL_ASSET_SELL_2']}
-
-
- ) : (
-
-
- {STRINGS['P2P.TOTAL_ASSET_SELL_1']}
- {' '}
- {spendingAsset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.TOTAL_ASSET_SEND_2']}
-
-
- )}
-
-
- {
- setTotalOrderAmount(e.target.value);
- }}
- />
-
-
-
-
- {p2pSide === 'sell' ? (
-
-
- {STRINGS['P2P.BUY_ORDER_LIMITS']}
-
-
- ) : (
-
-
- {STRINGS['P2P.SELL_ORDER_LIMITS']}
-
-
- )}
-
- {p2pSide === 'sell' ? (
-
-
- {STRINGS['P2P.MIN_MAX_ORDER_VALUE_1']}
- {' '}
- {spendingAsset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.MIN_MAX_ORDER_VALUE_2']}
- {' '}
- {spendingAsset?.toUpperCase()}
- ) : (
-
-
- {STRINGS['P2P.MIN_MAX_ORDER_VALUE_1']}
- {' '}
- {buyingAsset?.toUpperCase()}{' '}
-
- {STRINGS['P2P.MIN_MAX_ORDER_VALUE_3']}
- {' '}
- {buyingAsset?.toUpperCase()}
-
- )}
+
+
+
+
+
+ {STRINGS['P2P.TYPE']}
+
+ :
+
+
+ {
+ setPriceType(e);
+ setExchangeRate();
+ setDynamicRate();
+ setDynamicPair();
+ }}
+ >
+
+ {STRINGS['P2P.STATIC']}
+
+
+ {STRINGS['P2P.DYNAMIC']}
+
+
+
+
+ {priceType === 'static' && (
+
+
+
+ {STRINGS['P2P.PRICE_UPPER']}
+ {' '}
+ {/* {spendingAsset
+ ? `(${spendingAsset?.toUpperCase()})`
+ : ''} */}
+
+
+ {
+ if (!buyingAsset) return;
+ if (isNaN(e)) return;
+ if (e >= 0) {
+ setExchangeRate(e);
+ }
+ }}
+ />
+
+
+ )}
-
-
-
-
{
- setMinOrderValue(e.target.value);
- }}
- />
+ {priceType === 'dynamic' && (
+
+
+
+ {STRINGS['P2P.PRICE_UPPER']}
+ {' '}
+ {/* {spendingAsset
+ ? `(${spendingAsset?.toUpperCase()})`
+ : ''} */}
+
+
+ {
+ setDynamicPair(e);
+ getDynamicRate(e);
+ }}
+ >
+ {brokerData
+ .filter((broker) => broker.type === 'dynamic')
+ .map((broker) => (
+
+ {broker.symbol}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.RATE']}
+
+
+
+ {' '}
+ {dynamicRate
+ ? `$${formatAmount('', dynamicRate)}`
+ : '-'}
+
+
+
+ )}
+
+
+
+ {STRINGS['P2P.SPREAD_PERCENTAGE']}
+
+
+
+ {
+ if (isNaN(e)) return;
+ if (e >= 0) {
+ setSpread(e);
+ }
+ }}
+ />
+
+
+
+ {STRINGS['P2P.PRICE_PROFIT_SPREAD_SET']}
+
+
+
- {p2pSide === 'sell' && (
-
- {minOrderValue
- ? (
- minOrderValue /
- formatRate(
- exchangeRate || dynamicRate,
- spread,
- spendingAsset
- )
- ).toFixed(4) +
- ' ' +
- buyingAsset?.toUpperCase()
- : ''}{' '}
+ {(exchangeRate || dynamicRate) && (
+
{'='}
+ )}
+ {exchangeRate && (
+
+
+
+ {STRINGS['P2P.UNIT_PRICE']}
+
+
+
+ ${formatRate(exchangeRate, spread, spendingAsset)}
+ {spendingAsset?.toUpperCase()}
+
+
+ {p2pSide === 'sell' ? (
+ {STRINGS['SIDES.SELL']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.SELL']}
+
+ )}
+
+ ) : (
+ {STRINGS['SIDES.BUY']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.BUY']}
+
+ )}
+
+ )}{' '}
+ {/* {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''} */}
+
)}
-
-
-
- {
- setMaxOrderValue(e.target.value);
- }}
- />
-
- {p2pSide === 'sell' && (
-
- {maxOrderValue
- ? (
- maxOrderValue /
- formatRate(
- exchangeRate || dynamicRate,
- spread,
- spendingAsset
- )
- ).toFixed(4) +
- ' ' +
- buyingAsset?.toUpperCase()
- : ''}{' '}
+
+ {dynamicRate && (
+
+
+
+ {STRINGS['P2P.UNIT_PRICE']}
+
+
+
+ ${formatRate(dynamicRate, spread, spendingAsset)}
+ {spendingAsset?.toUpperCase()}
+
+
+ {p2pSide === 'sell' ? (
+ {STRINGS['SIDES.SELL']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.SELL']}
+
+ )}
+
+ ) : (
+ {STRINGS['SIDES.BUY']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.BUY']}
+
+ )}
+
+ )}{' '}
+ {/* {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''} */}
+
)}
-
-
-
-
- {p2pSide === 'sell' ? (
-
-
-
- {STRINGS['P2P.PAYMENT_METHODS_SEND_FIAT']}
-
-
-
-
- {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
- {' '}
- {p2p_config?.bank_payment_methods?.length || 0}{' '}
-
- {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
- {' '}
- {spendingAsset?.toUpperCase()}
-
+ )}
- {p2p_config?.bank_payment_methods?.map((method) => {
- return (
-
-
x.system_name === method.system_name
- )
- ? 'whiteTextP2P'
- : 'greyTextP2P'
- }
- onClick={() => {
- const newSelected = [...paymentMethods];
+ {step === 2 && (
+
+
+
+
+ {p2pSide === 'sell' ? (
+
+
+
+ {STRINGS['P2P.TOTAL_AMOUNT']}
+
+
+
+
+ {buyingAsset?.toUpperCase()}
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.BUY_SELL_DESC'],
+ STRINGS['SIDES_VALUES.sell']
+ )}
+
+
+
+ ) : (
+
+
+
+ {STRINGS['P2P.TOTAL_AMOUNT']}
+
+
+
+
+ {spendingAsset?.toUpperCase()}
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.BUY_SELL_DESC'],
+ STRINGS['SIDES_VALUES.buy']
+ )}
+
+
+
+ )}
- if (
- newSelected.find(
- (x) => x.system_name === method.system_name
- )
- ) {
- setPaymentMethods(
- newSelected.filter(
- (x) => x.system_name !== method.system_name
- )
- );
- } else {
- newSelected.push(method);
- setPaymentMethods(newSelected);
- setSelectedMethod(method);
- setAddMethodDetails(true);
+
+
{
+ setTotalOrderAmount(e.target.value);
+ }}
+ suffix={
+
+
+ {p2pSide === 'sell'
+ ? buyingAsset?.toUpperCase()
+ : spendingAsset?.toUpperCase()}
+
+
+
}
- }}
- >
-
{method.system_name}
- {paymentMethods?.find(
- (x) => x.system_name === method.system_name
- ) &&
✔
}
+ />
- {paymentMethods?.find(
- (x) => x.system_name === method.system_name
- ) && (
-
{
- setSelectedMethod(method);
- setAddMethodDetails(true);
- }}
- className="whiteTextP2P"
- style={{ cursor: 'pointer' }}
- >
-
-
- {STRINGS['P2P.EDIT_UPPERCASE']}
-
+
+
+
+ {p2pSide === 'sell' ? (
+
+
+ {STRINGS['P2P.BUY_ORDER_LIMITS']}
+
+
+ ) : (
+
+
+ {STRINGS['P2P.SELL_ORDER_LIMITS']}
)}
+
+ {p2pSide === 'sell' ? (
+
+ {spendingAsset?.toUpperCase()},
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_3']
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_1'],
+ {spendingAsset?.toUpperCase()} ,
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_3']
+ )}
+ {' '}
+
+ ) : (
+
+ {buyingAsset?.toUpperCase()},
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_2']
+ )}
+ > {' '}
+ {STRINGS.formatString(
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_1'],
+ {buyingAsset?.toUpperCase()} ,
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_2']
+ )}
+
+ )}
+
+
+
+
+ {
+ setMinOrderValue(e.target.value);
+ }}
+ suffix={
+ p2pSide === 'sell'
+ ? spendingAsset?.toUpperCase()
+ : buyingAsset?.toUpperCase()
+ }
+ />
+
+ {p2pSide === 'sell' && (
+
+ {minOrderValue
+ ? (
+ minOrderValue /
+ formatRate(
+ exchangeRate || dynamicRate,
+ spread,
+ spendingAsset
+ )
+ ).toFixed(4) +
+ ' ' +
+ buyingAsset?.toUpperCase()
+ : ''}{' '}
+
+ )}
+
+
~
+
+
+ {
+ setMaxOrderValue(e.target.value);
+ }}
+ suffix={
+ p2pSide === 'sell'
+ ? spendingAsset?.toUpperCase()
+ : buyingAsset?.toUpperCase()
+ }
+ />
+
+ {p2pSide === 'sell' && (
+
+ {maxOrderValue
+ ? (
+ maxOrderValue /
+ formatRate(
+ exchangeRate || dynamicRate,
+ spread,
+ spendingAsset
+ )
+ ).toFixed(4) +
+ ' ' +
+ buyingAsset?.toUpperCase()
+ : ''}{' '}
+
+ )}
+
+
- );
- })}
-
- ) : (
-
-
-
- {STRINGS['P2P.PAYMENT_METHODS_SEND_FIAT']}
-
-
-
-
- {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
- {' '}
- {p2p_config?.bank_payment_methods?.length || 0}{' '}
-
- {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
- {' '}
- {spendingAsset?.toUpperCase()}
+
+
+ {p2pSide === 'sell' ? (
+
+
+
+ {STRINGS['P2P.PAYMENT_METHODS_RECEIVE_FIAT']}
+
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
+ {' '}
+ {p2p_config?.bank_payment_methods?.length || 0}{' '}
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
+ {' '}
+ {spendingAsset?.toUpperCase()}
+
- {p2p_config?.bank_payment_methods?.map((method) => {
- return (
-
-
x.system_name === method.system_name
- )
- ? 'whiteTextP2P'
- : 'greyTextP2P'
- }
- onClick={() => {
- const newSelected = [...paymentMethods];
+ {p2p_config?.bank_payment_methods?.map((method) => {
+ return (
+
+
+ x.system_name === method.system_name
+ )
+ ? 'whiteTextP2P payment-method'
+ : 'greyTextP2P payment-method'
+ }
+ onClick={() => {
+ const newSelected = [...paymentMethods];
- if (
- newSelected.find(
+ if (
+ newSelected.find(
+ (x) =>
+ x.system_name === method.system_name
+ )
+ ) {
+ setPaymentMethods(
+ newSelected.filter(
+ (x) =>
+ x.system_name !== method.system_name
+ )
+ );
+ } else {
+ newSelected.push(method);
+ setPaymentMethods(newSelected);
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ }
+ }}
+ >
+
{method.system_name}
+ {paymentMethods?.find(
+ (x) => x.system_name === method.system_name
+ ) &&
✔
}
+
+ {paymentMethods?.find(
(x) => x.system_name === method.system_name
- )
- ) {
- setPaymentMethods(
- newSelected.filter(
- (x) => x.system_name !== method.system_name
- )
- );
- } else {
- newSelected.push(method);
- setPaymentMethods(newSelected);
- }
- }}
- >
-
{method.system_name}
- {paymentMethods?.find(
- (x) => x.system_name === method.system_name
- ) &&
✔
}
+ ) && (
+
{
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ setIsEditMode(true);
+ }}
+ className="edit-link"
+ >
+
+
+ {STRINGS['P2P.EDIT_UPPERCASE']}
+
+
+
+ )}
+
+ );
+ })}
+
+ ) : (
+
+
+
+ {STRINGS['P2P.PAYMENT_METHODS_SEND_FIAT']}
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
+ {' '}
+ {p2p_config?.bank_payment_methods?.length || 0}{' '}
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
+ {' '}
+ {spendingAsset?.toUpperCase()}
+
+
+ {p2p_config?.bank_payment_methods?.map((method) => {
+ return (
+
+
+ x.system_name === method.system_name
+ )
+ ? 'whiteTextP2P payment-method'
+ : 'greyTextP2P payment-method'
+ }
+ onClick={() => {
+ const newSelected = [...paymentMethods];
+
+ if (
+ newSelected.find(
+ (x) =>
+ x.system_name === method.system_name
+ )
+ ) {
+ setPaymentMethods(
+ newSelected.filter(
+ (x) =>
+ x.system_name !== method.system_name
+ )
+ );
+ } else {
+ newSelected.push(method);
+ setPaymentMethods(newSelected);
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ }
+ }}
+ >
+
{method.system_name}
+ {paymentMethods?.find(
+ (x) => x.system_name === method.system_name
+ ) &&
✔
}
+
+
+ );
+ })}
- );
- })}
-
- )}
+ )}
-
-
-
- {STRINGS['P2P.REGION']}
-
-
-
-
- {STRINGS['P2P.SELECT_REGION']}
-
+
+
+
+ {STRINGS['P2P.REGION']}
+
+
+
+
+ {STRINGS['P2P.SELECT_REGION']}
+
+
+
+ option.props.children
+ .toLowerCase()
+ .indexOf(input.toLowerCase()) >= 0 ||
+ option.props.value
+ .toLowerCase()
+ .indexOf(input.toLowerCase()) >= 0
+ }
+ placeholder="Select Region"
+ value={region}
+ onChange={(e) => {
+ setRegion(e);
+ }}
+ >
+ {COUNTRIES_OPTIONS.map((cn) => (
+
+ {cn.label}
+
+ ))}
+
+
+
-
- option.props.children
- .toLowerCase()
- .indexOf(input.toLowerCase()) >= 0 ||
- option.props.value
- .toLowerCase()
- .indexOf(input.toLowerCase()) >= 0
- }
- style={{ width: 200 }}
- placeholder="Select Region"
- value={region}
- onChange={(e) => {
- setRegion(e);
- }}
- >
- {COUNTRIES_OPTIONS.map((cn) => (
- {cn.label}
- ))}
-
-
-
-
- )}
+ )}
- {step === 3 && (
-
-
-
-
-
- {STRINGS['P2P.TERMS']}
-
-
-
-
- {STRINGS['P2P.TERMS_CONDITIONS_DEAL']}
-
-
+ {step === 3 && (
+
+
+
+
+
+ {STRINGS['P2P.TERMS']}
+
+
+
+
+ {STRINGS['P2P.TERMS_CONDITIONS_DEAL']}
+
+
-
{
- setTerms(e.target.value);
- }}
- placeholder="Please post within 15 minutes of the deal going"
- />
-
-
-
-
-
-
-
- {STRINGS['P2P.FIRST_RESPONSE']}
-
-
-
-
- {STRINGS['P2P.CHAT_RESPONSE']}
-
+ {
+ setTerms(e.target.value);
+ }}
+ placeholder={
+ STRINGS['P2P.TERMS_AND_CONDITION_DESCRIPTION']
+ }
+ autoFocus={true}
+ />
+
+
+ {!terms && (
+
+
+
+
+ {STRINGS['P2P.TERMS_ERROR_TEXT']}
+
+
+
+ )}
+
+
+
+
+
+
+ {STRINGS['P2P.FIRST_RESPONSE']}
+
+
+
+
+ {STRINGS['P2P.CHAT_RESPONSE']}
+
+
+
{
+ setAutoResponse(e.target.value);
+ }}
+ placeholder={STRINGS['P2P.VISIT_OUR_WEBSITE']}
+ />
+
+
+ {!autoResponse && terms && (
+
+
+
+
+ {STRINGS['P2P.RESPONSE_ERROR_TEXT']}
+
+
+
+ )}
+
+
-
{
- setAutoResponse(e.target.value);
- }}
- placeholder="Visit our website"
- />
-
+ )}
- )}
-
-
-
-
- {step !== 1 && (
- {
- if (step > 1) {
- setStep(step - 1);
- }
- }}
- >
-
- {STRINGS['P2P.BACK_UPPER']}
-
-
+
+ ) : (
+
)}
-
{
- if (
- step === 1 &&
- (!priceType ||
- !buyingAsset ||
- !spendingAsset ||
- (priceType === 'static' && !exchangeRate) ||
- (priceType === 'dynamic' && !dynamicRate))
- ) {
- message.error(STRINGS['P2P.PLEASE_FILL_INPUTS']);
- return;
- }
-
- if (
- step === 2 &&
- (!totalOrderAmount ||
- !minOrderValue ||
- !maxOrderValue ||
- paymentMethods.length === 0 ||
- !region)
- ) {
- message.error(STRINGS['P2P.PLEASE_FILL_INPUTS']);
- return;
- }
-
- if (step < 3) {
- setStep(step + 1);
- } else {
- try {
- if (autoResponse.length > 240) {
- message.error(STRINGS['P2P.AUTO_RESPONSE_LIMIT']);
- return;
- }
-
- if (terms.length > 240) {
- message.error(STRINGS['P2P.TERMS_RESPONSE_LIMIT']);
- return;
- }
-
- if (selectedDealEdit) {
- await editDeal({
- id: selectedDealEdit.id,
- side: p2pSide,
- price_type: priceType,
- dynamic_pair: dynamicPair,
- buying_asset: buyingAsset,
- spending_asset: spendingAsset,
- exchange_rate: Number(exchangeRate || 0),
- spread: Number(spread),
- region,
- total_order_amount: Number(totalOrderAmount),
- min_order_value: Number(minOrderValue),
- max_order_value: Number(maxOrderValue),
- terms: terms,
- auto_response: autoResponse,
- payment_methods: paymentMethods,
- });
- setSelectedDealEdit();
- } else {
- await postDeal({
- side: p2pSide,
- price_type: priceType,
- dynamic_pair: dynamicPair,
- buying_asset: buyingAsset,
- spending_asset: spendingAsset,
- exchange_rate: Number(exchangeRate || 0),
- spread: Number(spread),
- region,
- total_order_amount: Number(totalOrderAmount),
- min_order_value: Number(minOrderValue),
- max_order_value: Number(maxOrderValue),
- terms: terms,
- auto_response: autoResponse,
- payment_methods: paymentMethods,
- });
- }
-
- setPriceType('static');
- setBuyingAsset();
- setSpendingAsset();
- setExchangeRate();
- setSpread();
- setTotalOrderAmount();
- setMinOrderValue();
- setMaxOrderValue();
- setTerms();
- setAutoResponse();
- setPaymentMethods([]);
- setRegion();
- setStep(1);
-
- message.success(
- `${
- selectedDealEdit
- ? STRINGS['P2P.DEAL_EDITED']
- : STRINGS['P2P.DEAL_CREATED']
- }`
- );
- setTab('4');
- setRefresh(!refresh);
- } catch (error) {
- message.error(error.data.message);
- }
- }
+ {
+ setAddMethodDetails(false);
+ setIsEditMode(false);
}}
>
- {STRINGS['P2P.NEXT']}
-
-
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.ADD_PAYMENT_METHOD_DETAILS'],
+ isEditMode
+ ? STRINGS['EDIT_TEXT']
+ : STRINGS['DEVELOPERS_TOKEN.ADD_IP']
+ )}
+
+
+ {selectedMethod?.fields?.map((x, index) => {
+ return (
+
+
{x?.name}:
+
{
+ if (!selectedMethod.fields[index].value)
+ selectedMethod.fields[index].value = '';
+ selectedMethod.fields[index].value = e.target.value;
-
}
- bodyStyle={{
- marginTop: 60,
- }}
- className="stake_theme"
- visible={addMethodDetails}
- footer={null}
- onCancel={() => {
- setAddMethodDetails(false);
- }}
- >
-
-
- {STRINGS['P2P.ADD_PAYMENT_METHOD_DETAILS']}
-
-
+ const newSelected = [...paymentMethods];
+ const Index = newSelected.findIndex(
+ (x) => x.system_name === selectedMethod.system_name
+ );
+
+ newSelected[Index].fields = selectedMethod.fields;
+ setPaymentMethods(newSelected);
+ }}
+ />
+
+ );
+ })}
- {selectedMethod?.fields?.map((x, index) => {
- return (
-
- );
- })}
-
+
+ {STRINGS['P2P.BACK_UPPER']}
+
+
+
{
+ setAddMethodDetails(false);
+ setIsEditMode(false);
+ }}
+ className="purpleButtonP2P complete-btn"
+ type="default"
+ >
+
+ {isEditMode
+ ? STRINGS['P2P.UPDATE'].toUpperCase()
+ : STRINGS['P2P.COMPLETE'].toUpperCase()}
+
+
+
+
+
+ {!isMobile && (
+ {step !== 1 && (
+ handlePreviousStep()}
+ >
+
+ {STRINGS['P2P.BACK_UPPER']}
+
+
+ )}
{
- setAddMethodDetails(false);
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
- >
-
- {STRINGS['P2P.BACK_UPPER']}
-
-
- {
- setAddMethodDetails(false);
- }}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
- type="default"
+ className="purpleButtonP2P next-btn"
+ onClick={() => handleNextStep()}
+ disabled={step === 3 && (!terms || !autoResponse)}
>
-
- {STRINGS['P2P.COMPLETE']}
-
+ {STRINGS['P2P.NEXT']}
-
+ )}
);
};
diff --git a/web/src/containers/P2P/P2PPostDealMobile.js b/web/src/containers/P2P/P2PPostDealMobile.js
new file mode 100644
index 0000000000..6d1b733c84
--- /dev/null
+++ b/web/src/containers/P2P/P2PPostDealMobile.js
@@ -0,0 +1,1100 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Button, Input, InputNumber, Select, Switch } from 'antd';
+import {
+ ArrowRightOutlined,
+ ExclamationCircleFilled,
+ SyncOutlined,
+} from '@ant-design/icons';
+
+import withConfig from 'components/ConfigProvider/withConfig';
+import STRINGS from 'config/localizedStrings';
+import { Coin, EditWrapper } from 'components';
+import { COUNTRIES_OPTIONS } from 'utils/countries';
+
+const P2pPostDealMobile = ({
+ p2p_config,
+ step,
+ selectedDealEdit,
+ p2pSide,
+ setP2pSide,
+ currStep,
+ priceType,
+ spread,
+ setSpread,
+ dynamicRate,
+ exchangeRate,
+ formatAmount,
+ spendingAsset,
+ formatRate,
+ setDynamicPair,
+ getDynamicRate,
+ buyingAsset,
+ setExchangeRate,
+ brokerData,
+ dynamicPair,
+ coins,
+ setBuyingAsset,
+ setPriceType,
+ setSpendingAsset,
+ setDynamicRate,
+ handleNextStep,
+ handlePreviousStep,
+ region,
+ setRegion,
+ paymentMethods,
+ setPaymentMethods,
+ setSelectedMethod,
+ totalOrderAmount,
+ setTotalOrderAmount,
+ minOrderValue,
+ setMinOrderValue,
+ maxOrderValue,
+ setMaxOrderValue,
+ setAddMethodDetails,
+ terms,
+ setTerms,
+ autoResponse,
+ setAutoResponse,
+ setIsEditMode,
+}) => {
+ return (
+
+ {selectedDealEdit && (
+
+
+
+
+
+
+
+ {STRINGS['P2P.UPDATE_DEAL']}
+
+
+
+
+ )}
+ {step === 1 && (
+
+
+
+ {STRINGS['P2P.I_WANT_TO_BUY']}
+
+
+
+ {
+ if (step !== 1) return;
+ if (p2p_config.side === 'sell' && !checked) return;
+ if (p2p_config.side === 'buy' && checked) return;
+
+ if (checked) {
+ setP2pSide('sell');
+ } else {
+ setP2pSide('buy');
+ }
+ }}
+ disabled={selectedDealEdit}
+ />
+
+
+
+ {STRINGS['P2P.I_WANT_TO_SELL']}
+
+
+
+ )}
+ {(step === 2 || step === 3) && (
+
+ {p2pSide === 'sell' ? (
+
+ {buyingAsset?.toUpperCase()}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.SELLING'],
+ {buyingAsset?.toUpperCase()}
+ )}
+
+
+ ) : (
+
+ {spendingAsset?.toUpperCase()}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.BUYING'],
+ {spendingAsset?.toUpperCase()}
+ )}
+
+
+ )}
+
+ )}
+
+
+
+ 1
+
+
+
+
{STRINGS['P2P.STEP_SET_TYPE_PRICE']}
+ {step === 1 && (
+
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.SELL_UPPER']}
+
+ ) : (
+
+ {STRINGS['P2P.BUY_UPPER']}
+
+ )}
+
+
+ {buyingAsset && (
+
+ )}
+ {
+ setBuyingAsset(e);
+ }}
+ >
+ {p2p_config?.digital_currencies.map((coin) => (
+
+ {coin?.toUpperCase()}
+
+ ))}
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.CRYPTO_WANT_TO_SELL']}
+
+ ) : (
+
+ {STRINGS['P2P.CRYPTO_WANT_TO_BUY']}
+
+ )}
+
+
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.RECEIVE']}
+
+ ) : (
+
+ {STRINGS['P2P.SEND_UPPER']}
+
+ )}
+
+
+ {
+ setSpendingAsset(e);
+ }}
+ >
+ {p2p_config?.fiat_currencies?.map((coin) => (
+
+ {coin?.toUpperCase()}
+
+ ))}
+
+
+
+ {p2pSide === 'sell' ? (
+
+ {STRINGS['P2P.FIAT_CURRENCY_WANT_TO_RECEIVE']}
+
+ ) : (
+
+ {STRINGS['P2P.FIAT_CURRENCY_WANT_TO_SPEND']}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {STRINGS['P2P.TYPE']}
+
+ :
+
+
+ {
+ setPriceType(e);
+ setExchangeRate();
+ setDynamicRate();
+ setDynamicPair();
+ }}
+ >
+
+ {STRINGS['P2P.STATIC']}
+
+
+ {STRINGS['P2P.DYNAMIC']}
+
+
+
+
+ {priceType === 'static' && (
+
+
+
+ {STRINGS['P2P.PRICE_UPPER']}
+ {' '}
+ {/* {spendingAsset
+ ? `(${spendingAsset?.toUpperCase()})`
+ : ''} */}
+
+
+ {
+ if (!buyingAsset) return;
+ if (isNaN(e)) return;
+ if (e >= 0) {
+ setExchangeRate(e);
+ }
+ }}
+ />
+
+
+ )}
+ {priceType === 'dynamic' && (
+
+
+
+ {STRINGS['P2P.PRICE_UPPER']}
+ {' '}
+ {/* {spendingAsset
+ ? `(${spendingAsset?.toUpperCase()})`
+ : ''} */}
+
+
+ {
+ setDynamicPair(e);
+ getDynamicRate(e);
+ }}
+ >
+ {brokerData
+ .filter((broker) => broker.type === 'dynamic')
+ .map((broker) => (
+
+ {broker.symbol}
+
+ ))}
+
+
+
+
+
+ {STRINGS['P2P.RATE']}
+
+
+
+ {' '}
+ {dynamicRate
+ ? `$${formatAmount('', dynamicRate)}`
+ : '-'}
+
+
+
+ )}
+
+
+
+ {STRINGS['P2P.SPREAD_PERCENTAGE']}
+
+
+
+ {
+ if (isNaN(e)) return;
+ if (e >= 0) {
+ setSpread(e);
+ }
+ }}
+ />
+
+
+
+ {STRINGS['P2P.PRICE_PROFIT_SPREAD_SET']}
+
+
+
+
+ {(exchangeRate || dynamicRate) && (
+
{'='}
+ )}
+ {exchangeRate && (
+
+
+
+ {STRINGS['P2P.UNIT_PRICE']}
+
+
+
+ ${formatRate(exchangeRate, spread, spendingAsset)}
+
+ {spendingAsset?.toUpperCase()}
+
+
+
+ {p2pSide === 'sell' ? (
+ {STRINGS['SIDES.SELL']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.SELL']}
+
+ )}
+
+ ) : (
+ {STRINGS['SIDES.BUY']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.BUY']}
+
+ )}
+
+ )}{' '}
+ {/* {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''} */}
+
+
+ )}
+ {dynamicRate && (
+
+
+
+ {STRINGS['P2P.UNIT_PRICE']}
+
+
+
+ ${formatRate(dynamicRate, spread, spendingAsset)}
+
+ {spendingAsset?.toUpperCase()}
+
+
+
+ {p2pSide === 'sell' ? (
+ {STRINGS['SIDES.SELL']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.SELL']}
+
+ )}
+
+ ) : (
+ {STRINGS['SIDES.BUY']}
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.PRICE_ADVERTISE'],
+
+ {STRINGS['SIDES.BUY']}
+
+ )}
+
+ )}{' '}
+ {/* {buyingAsset ? `${buyingAsset?.toUpperCase()}` : ''} */}
+
+
+ )}
+
+
handleNextStep()}
+ >
+
+ {STRINGS['P2P.NEXT']}
+
+
+
+ )}
+
+
+
+
+
+ 2
+
+
+
+
+
+ {STRINGS['P2P.STEP_SET_TOTAL_AMOUNT_PAYMENT_METHODS']}
+
+ {step === 2 && (
+
+
+
+
+ {p2pSide === 'sell' ? (
+
+
+
+
+ {STRINGS['P2P.TOTAL_AMOUNT']?.toUpperCase()}
+
+
+
+
+
+ {buyingAsset?.toUpperCase()}
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.BUY_SELL_DESC'],
+ STRINGS['SIDES_VALUES.sell']
+ )}
+
+
+
+ ) : (
+
+
+
+
+ {STRINGS['P2P.TOTAL_AMOUNT']?.toUpperCase()}
+
+
+
+
+
+ {spendingAsset?.toUpperCase()}
+
+
+ {STRINGS.formatString(
+ STRINGS['P2P.BUY_SELL_DESC'],
+ STRINGS['SIDES_VALUES.buy']
+ )}
+
+
+
+ )}
+
+
{
+ setTotalOrderAmount(e.target.value);
+ }}
+ suffix={
+
+
+ {p2pSide === 'sell'
+ ? buyingAsset?.toUpperCase()
+ : spendingAsset?.toUpperCase()}
+
+
+
+
+
+ }
+ />
+
+
+ {p2pSide === 'sell' ? (
+
+
+
+
+ {' '}
+ {STRINGS['P2P.PAYMENT_METHODS_RECEIVE_FIAT']}
+
+
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
+ {' '}
+ {p2p_config?.bank_payment_methods?.length || 0}{' '}
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
+ {' '}
+ {spendingAsset?.toUpperCase()}
+
+ {p2p_config?.bank_payment_methods?.map((method) => {
+ return (
+
+
x.system_name === method.system_name
+ )
+ ? 'whiteTextP2P payment-method'
+ : 'greyTextP2P payment-method'
+ }
+ onClick={() => {
+ const newSelected = [...paymentMethods];
+ if (
+ newSelected.find(
+ (x) =>
+ x.system_name === method.system_name
+ )
+ ) {
+ setPaymentMethods(
+ newSelected.filter(
+ (x) =>
+ x.system_name !== method.system_name
+ )
+ );
+ } else {
+ newSelected.push(method);
+ setPaymentMethods(newSelected);
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ }
+ }}
+ >
+
{method.system_name}
+ {paymentMethods?.find(
+ (x) => x.system_name === method.system_name
+ ) &&
✔
}
+
+ {paymentMethods?.find(
+ (x) => x.system_name === method.system_name
+ ) && (
+
{
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ setIsEditMode(true);
+ }}
+ className="edit-link"
+ >
+
+
+ {STRINGS['P2P.EDIT_UPPERCASE']}
+
+
+
+ )}
+
+ );
+ })}
+
+ ) : (
+
+
+
+
+ {STRINGS['P2P.PAYMENT_METHODS_SEND_FIAT']}
+
+
+
+
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_1']}
+ {' '}
+ {p2p_config?.bank_payment_methods?.length || 0}{' '}
+
+ {STRINGS['P2P.SELECT_PAYMENT_METHODS_2']}
+ {' '}
+ {spendingAsset?.toUpperCase()}
+
+ {p2p_config?.bank_payment_methods?.map((method) => {
+ return (
+
+
x.system_name === method.system_name
+ )
+ ? 'whiteTextP2P payment-method'
+ : 'greyTextP2P payment-method'
+ }
+ onClick={() => {
+ const newSelected = [...paymentMethods];
+ if (
+ newSelected.find(
+ (x) =>
+ x.system_name === method.system_name
+ )
+ ) {
+ setPaymentMethods(
+ newSelected.filter(
+ (x) =>
+ x.system_name !== method.system_name
+ )
+ );
+ } else {
+ newSelected.push(method);
+ setPaymentMethods(newSelected);
+ setSelectedMethod(method);
+ setAddMethodDetails(true);
+ }
+ }}
+ >
+
{method.system_name}
+ {paymentMethods?.find(
+ (x) => x.system_name === method.system_name
+ ) &&
✔
}
+
+
+ );
+ })}
+
+ )}
+
+
+
+
+ {p2pSide === 'sell' ? (
+
+
+
+ {STRINGS['P2P.BUY_ORDER_LIMITS']}
+
+
+
+ ) : (
+
+
+
+ {STRINGS['P2P.SELL_ORDER_LIMITS']}
+
+
+
+ )}
+ {p2pSide === 'sell' ? (
+
+ {spendingAsset?.toUpperCase()},
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_3']
+ )}
+ >
+ {STRINGS.formatString(
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_1'],
+ {spendingAsset?.toUpperCase()} ,
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_3']
+ )}
+ {' '}
+
+ ) : (
+
+ {buyingAsset?.toUpperCase()},
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_2']
+ )}
+ > {' '}
+ {STRINGS.formatString(
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_1'],
+ {buyingAsset?.toUpperCase()} ,
+ STRINGS['P2P.MIN_MAX_ORDER_VALUE_2']
+ )}
+
+ )}
+
+
+
+ {
+ setMinOrderValue(e.target.value);
+ }}
+ suffix={
+ p2pSide === 'sell'
+ ? spendingAsset?.toUpperCase()
+ : buyingAsset?.toUpperCase()
+ }
+ />
+
+ {p2pSide === 'sell' && (
+
+ {minOrderValue
+ ? (
+ minOrderValue /
+ formatRate(
+ exchangeRate || dynamicRate,
+ spread,
+ spendingAsset
+ )
+ ).toFixed(4) +
+ ' ' +
+ buyingAsset?.toUpperCase()
+ : ''}{' '}
+
+ )}
+
+
~
+
+
+ {
+ setMaxOrderValue(e.target.value);
+ }}
+ suffix={
+ p2pSide === 'sell'
+ ? spendingAsset?.toUpperCase()
+ : buyingAsset?.toUpperCase()
+ }
+ />
+
+ {p2pSide === 'sell' && (
+
+ {maxOrderValue
+ ? (
+ maxOrderValue /
+ formatRate(
+ exchangeRate || dynamicRate,
+ spread,
+ spendingAsset
+ )
+ ).toFixed(4) +
+ ' ' +
+ buyingAsset?.toUpperCase()
+ : ''}{' '}
+
+ )}
+
+
+
+
+
+
+
+ {STRINGS['P2P.REGION']?.toUpperCase()}
+
+
+
+
+
+ {STRINGS['P2P.SELECT_REGION']}
+
+
+
+ option.props.children
+ .toLowerCase()
+ .indexOf(input.toLowerCase()) >= 0 ||
+ option.props.value
+ .toLowerCase()
+ .indexOf(input.toLowerCase()) >= 0
+ }
+ placeholder="Select Region"
+ value={region}
+ onChange={(e) => {
+ setRegion(e);
+ }}
+ >
+ {COUNTRIES_OPTIONS.map((cn) => (
+
+ {cn.label}
+
+ ))}
+
+
+
+
+ handlePreviousStep()}
+ >
+
+ {STRINGS['P2P.BACK_UPPER']}
+
+
+ handleNextStep()}
+ >
+
+ {STRINGS['P2P.NEXT']}
+
+
+
+
+ )}
+
+
+
+
+
+ 3
+
+
+
+
+ {STRINGS['P2P.STEP_SET_TERMS_AUTO_RESPONSE']}
+
+
+
+ {step === 3 && (
+
+
+
+
+
+
+ {STRINGS['P2P.TERMS']}
+
+
+
+
+
+ {STRINGS['P2P.TERMS_CONDITIONS_DEAL']}
+
+
+
{
+ setTerms(e.target.value);
+ }}
+ placeholder={STRINGS['P2P.TERMS_AND_CONDITION_DESCRIPTION']}
+ autoFocus={true}
+ />
+
+
+ {!terms && (
+
+
+
+
+ {STRINGS['P2P.TERMS_ERROR_TEXT']}
+
+
+
+ )}
+
+
+
+
+
+
+
+ {STRINGS['P2P.FIRST_RESPONSE']}
+
+
+
+
+
+ {STRINGS['P2P.CHAT_RESPONSE']}
+
+
+
{
+ setAutoResponse(e.target.value);
+ }}
+ placeholder={STRINGS['P2P.VISIT_OUR_WEBSITE']}
+ />
+
+
+ {!autoResponse && terms && (
+
+
+
+
+ {STRINGS['P2P.RESPONSE_ERROR_TEXT']}
+
+
+
+ )}
+
+
+
+ handlePreviousStep()}
+ >
+
+ {STRINGS['P2P.BACK_UPPER']}
+
+
+ handleNextStep()}
+ disabled={step === 3 && (!terms || !autoResponse)}
+ >
+
+ {STRINGS['CONFIRM_TEXT']?.toUpperCase()}
+
+
+
+
+ )}
+
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ pairs: state.app.pairs,
+ coins: state.app.coins,
+ broker: state.app.broker,
+ constants: state.app.constants,
+ transaction_limits: state.app.transaction_limits,
+ p2p_config: state.app.constants.p2p_config,
+});
+
+export default connect(mapStateToProps)(withConfig(P2pPostDealMobile));
diff --git a/web/src/containers/P2P/P2PProfile.js b/web/src/containers/P2P/P2PProfile.js
index 9fa1e1fb47..9f60cc1eca 100644
--- a/web/src/containers/P2P/P2PProfile.js
+++ b/web/src/containers/P2P/P2PProfile.js
@@ -1,21 +1,16 @@
/* eslint-disable */
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
+import { isMobile } from 'react-device-detect';
+import { Button, message, Rate, Modal, Input, Select } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+import moment from 'moment';
-import { IconTitle, EditWrapper } from 'components';
+import './_P2P.scss';
+import classnames from 'classnames';
import STRINGS from 'config/localizedStrings';
import withConfig from 'components/ConfigProvider/withConfig';
-import {
- Button,
- Checkbox,
- message,
- Rate,
- Modal,
- Input,
- Radio,
- Space,
- Select,
-} from 'antd';
+import { Dialog, EditWrapper } from 'components';
import {
fetchFeedback,
fetchP2PProfile,
@@ -24,11 +19,7 @@ import {
updateP2PPaymentMethod,
deleteP2PPaymentMethod,
} from './actions/p2pActions';
-import { isMobile } from 'react-device-detect';
-import classnames from 'classnames';
-import moment from 'moment';
-import { CloseOutlined } from '@ant-design/icons';
-import './_P2P.scss';
+import { Loading } from 'containers/DigitalAssets/components/utils';
const P2PProfile = ({
data,
@@ -49,9 +40,9 @@ const P2PProfile = ({
p2p_config,
}) => {
const [myDeals, setMyDeals] = useState([]);
- const [checks, setCheks] = useState([]);
+ // const [checks] = useState([]);
const [myProfile, setMyProfile] = useState();
- const [selectedUser, setSelectedUser] = useState(user);
+ const [selectedUser] = useState(user);
const [selectedTab, setSelectedTab] = useState('0');
const [paymentMethods, setPaymentMethods] = useState([]);
const [selectedMethod, setSelectedMethod] = useState({
@@ -61,9 +52,11 @@ const P2PProfile = ({
});
const [addMethodDetails, setAddMethodDetails] = useState();
const [myMethods, setMyMethods] = useState([]);
- const [displayPaymentAdd, setDisplayPaymentAdd] = useState(false);
+ // const [displayPaymentAdd, setDisplayPaymentAdd] = useState(false);
const [displayNewPayment, setDisplayNewPayment] = useState(false);
const [paymentFieldAdd, setPaymentFieldAdd] = useState(false);
+ const [displayConfirmation, setDisplayConfirmation] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
const [paymentMethod, setPaymentMethod] = useState({
system_name: null,
fields: {},
@@ -82,11 +75,13 @@ const P2PProfile = ({
});
useEffect(() => {
+ setIsLoading(true);
fetchFeedback({ merchant_id: (selectedProfile || selectedUser).id })
.then((res) => {
setMyDeals(res.data);
})
.catch((err) => err);
+ setIsLoading(false);
fetchP2PProfile({ user_id: (selectedProfile || selectedUser).id })
.then((res) => {
@@ -101,6 +96,7 @@ const P2PProfile = ({
.catch((err) => err);
setDefaultPaymentMethod();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh, selectedProfile]);
const setDefaultPaymentMethod = () => {
@@ -120,25 +116,27 @@ const P2PProfile = ({
};
return (
-
-
+
+
{STRINGS['P2P.DISPLAY_NAME']}
-
- {(selectedProfile || selectedUser).full_name || (
+
+ {(selectedProfile || selectedUser)?.full_name || (
{STRINGS['P2P.ANONYMOUS']}
@@ -149,77 +147,47 @@ const P2PProfile = ({
SMS
ID
*/}
-
-
-
-
+
+
+
+
{STRINGS['P2P.TOTAL_ORDERS']}
-
- {myProfile?.totalTransactions} times
+
+ {myProfile?.totalTransactions} {STRINGS['P2P.TIMES']}
-
-
+
+
{STRINGS['P2P.COMPLETION_RATE']}
-
+
{(myProfile?.completionRate || 0).toFixed(2)}%
-
-
+
+
{STRINGS['P2P.POSITIVE_FEEDBACK']}
-
+
{(myProfile?.positiveFeedbackRate || 0).toFixed(2)}%
@@ -236,19 +204,13 @@ const P2PProfile = ({
-
+
{
setSelectedTab('0');
}}
@@ -259,62 +221,54 @@ const P2PProfile = ({
{
setSelectedTab('1');
}}
>
- Feedback({myDeals.length || 0})
+
+ {STRINGS['P2P.FEEDBACK']}
+
+ ({myDeals.length || 0})
{selectedTab === '0' && (
-
-
-
-
-
+
+
+
+
+
- {STRINGS['P2P.PAYMENT_METHODS']}
+
+ {STRINGS['P2P.PAYMENT_METHODS']}
+
-
+
{STRINGS['P2P.PAYMENT_METHODS_DEC']}
-
+
-
+
{STRINGS['P2P.PAYMENT_METHODS_SEND_FIAT']}
-
-
+
{
@@ -334,17 +288,9 @@ const P2PProfile = ({
(x) => x?.details?.system_name === method?.system_name
);
return (
-
+
{
const newSelected = [...paymentMethods];
@@ -374,94 +320,52 @@ const P2PProfile = ({
setSelectedMethod(method);
setAddMethodDetails(true);
}}
- className="whiteTextP2P"
- style={{
- cursor: 'pointer',
- position: 'relative',
- top: 5,
- }}
+ className="edit-txt blue-link"
>
-
- {STRINGS['P2P.EDIT_UPPERCASE']}
-
+ {STRINGS['P2P.EDIT_UPPERCASE']}
)}
{
- const found = myMethods.find(
- (x) =>
- x?.details?.system_name ===
- method?.system_name
- );
- await deleteP2PPaymentMethod({ id: found.id });
- message.success(
- STRINGS['P2P.PAYMENT_METHOD_DELETED']
- );
- fetchP2PPaymentMethods({ is_p2p: true })
- .then((res) => {
- setMyMethods(res.data);
- })
- .catch((err) => err);
- }}
- className="whiteTextP2P"
- style={{
- cursor: 'pointer',
- position: 'relative',
- top: 5,
+ onClick={() => {
+ setSelectedMethod(method);
+ setDisplayConfirmation(true);
}}
+ className="delete-txt blue-link"
>
-
- {STRINGS['P2P.DELETE_UPPERCASE']}
-
+ {STRINGS['P2P.DELETE_UPPERCASE']}
{info?.status === 0 && (
-
- (Unverified)
-
+
+
+ ({STRINGS['P2P.UNVERIFIED']})
+
+
+
+
+
)}
{info?.status === 1 && (
-
- (Pending)
+
+ ({STRINGS['TRANSACTION_STATUS.PENDING']})
)}
{info?.status === 2 && (
-
- (Rejected)
+
+ ({STRINGS['TRANSACTION_STATUS.REJECTED']})
)}
{info?.status === 3 && (
-
- (Verified)
-
+
+
+ ({STRINGS['P2P.VERIFIED']})
+
+
✔
+
)}
@@ -473,34 +377,17 @@ const P2PProfile = ({
)}
{selectedTab === '1' && (
-
- {myDeals.length == 0 ? (
-
+
+ {myDeals.length === 0 ? (
+
{STRINGS['P2P.NO_FEEDBACK']}
) : (
-
+
-
+
{STRINGS['P2P.DATE']}
@@ -523,40 +410,49 @@ const P2PProfile = ({
-
- {myDeals.map((deal) => {
+
+ {myDeals.map((deal, index) => {
return (
-
-
- {moment(deal.created_at).format(
- 'DD/MMM/YYYY, hh:mmA'
- )}
-
-
- {deal.user.full_name || (
-
- {STRINGS['P2P.ANONYMOUS']}
-
+
+ {isLoading ? (
+
+ ) : (
+
+ {moment(deal.created_at).format(
+ 'DD/MMM/YYYY, hh:mmA'
+ )}
+
+ )}
+
+ {isLoading ? (
+
+ ) : (
+ deal.user.full_name || (
+
+ {STRINGS['P2P.ANONYMOUS']}
+
+ )
)}
-
- {deal.comment}
+
+ {isLoading ? : deal.comment}
-
-
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
);
@@ -566,41 +462,29 @@ const P2PProfile = ({
)}
)}
- }
- bodyStyle={{
- marginTop: 60,
- }}
- className="stake_theme"
- visible={addMethodDetails}
+ {
+ onCloseDialog={() => {
setAddMethodDetails(false);
}}
>
-
+
- {STRINGS['P2P.ADD_PAYMENT_METHOD_DETAILS']}
+ {STRINGS.formatString(
+ STRINGS['P2P.ADD_PAYMENT_METHOD_DETAILS'],
+ STRINGS['EDIT_TEXT']
+ )}
{selectedMethod?.fields?.map((x, index) => {
return (
-
-
{x?.name}:
+
+
{x?.name}:
{
if (!selectedMethod.fields[index].value)
@@ -625,24 +509,12 @@ const P2PProfile = ({
);
})}
-
+
{
setAddMethodDetails(false);
}}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
+ className="purpleButtonP2P back-btn"
type="default"
>
@@ -687,36 +559,27 @@ const P2PProfile = ({
message.error(error.data.message);
}
}}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
+ className="purpleButtonP2P complete-btn"
type="default"
>
- {STRINGS['P2P.COMPLETE']}
+ {STRINGS['P2P.UPDATE'].toUpperCase()}
-
+
{displayNewPayment && (
-
}
- bodyStyle={{
- marginTop: 60,
- }}
- className="stake_theme"
- visible={displayNewPayment}
- width={600}
- footer={null}
- onCancel={() => {
+
{
setDisplayNewPayment(false);
}}
+ shouldCloseOnOverlayClick={true}
+ showCloseText={true}
>
-
+
{STRINGS['P2P.CREATE_NEW_PAYMENT_METHODS']}
@@ -726,40 +589,39 @@ const P2PProfile = ({
{STRINGS['P2P.MANUAL_PAYMENT_METHOD_ENTRY']}
{' '}
-
-
+
{STRINGS['P2P.USERS_PAYMENT_SELECTION']}
-
-
+
+
{STRINGS['P2P.METHOD_NAME_AND_DETAIL']}
-
-
-
+
+
{STRINGS['P2P.ADD_NEW_PAYMENT_METHODS']}
{/*
{
+ placeholder="Enter your system name"
+ value={paymentMethod.system_name}
+ onChange={(e) => {
setPaymentMethod({
- ...paymentMethod,
- system_name: e.target.value,
+ ...paymentMethod,
+ system_name: e.target.value,
});
}}
/> */}
{
setPaymentMethod({
@@ -783,41 +645,43 @@ const P2PProfile = ({
- {customFields.map((field) => {
+ {customFields?.map((field) => {
return (
-
-
- FIELD {field.id}#
+
+
+ {STRINGS['P2P.FIELD']}
+ {field.id}#
-
+
{/*
{STRINGS['P2P.DETAIL_NAME']}
*/}
{field.name}
{/*
{
+ placeholder="Input the payment detail name"
+ readOnly
+ value={field.name}
+ onChange={(e) => {
const newCustomFields = [...customFields];
const found = newCustomFields.find(
- (x) => x.id === field.id
+ (x) => x.id === field.id
);
if (found) {
- found.name = e?.target?.value;
+ found.name = e?.target?.value;
}
setCustomFields(newCustomFields);
- }}
- /> */}
-
+ }}
+ /> */}
+
{STRINGS['P2P.DETAIL_VALUE']}
{
const newCustomFields = [...customFields];
@@ -827,7 +691,6 @@ const P2PProfile = ({
if (found) {
found.value = e?.target?.value;
}
-
setCustomFields(newCustomFields);
}}
/>
@@ -836,41 +699,29 @@ const P2PProfile = ({
})}
{/*
{
+ }}
+ onClick={() => {
setPaymentFieldAdd(true);
- }}
- >
-
-
+ }}
+ >
+
+
{STRINGS['P2P.ADD_NEW_PAYMENT_FIELD']}
-
-
+
+
*/}
-
+
{
setDisplayNewPayment(false);
}}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
+ className="purpleButtonP2P back-btn"
type="default"
>
- Back
+ {STRINGS['BACK_TEXT'].toUpperCase()}
{
if (!field.name || !field.value) {
- message.error('Please input all method fields');
+ message.error(STRINGS['P2P.FIELD_VALIDATION_TEXT']);
hasValidation = false;
}
});
@@ -920,53 +771,43 @@ const P2PProfile = ({
]);
setRefresh(!refresh);
}}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
+ className="purpleButtonP2P add-btn"
type="default"
>
- Add
+ {STRINGS['DEVELOPERS_TOKEN.ADD_IP'].toUpperCase()}
-
+
)}
{paymentFieldAdd && (
-
}
- bodyStyle={{
- marginTop: 60,
- }}
- className="stake_theme"
- visible={paymentFieldAdd}
- width={450}
- footer={null}
- onCancel={() => {
+
{
setPaymentFieldAdd(false);
}}
>
-
+
{STRINGS['P2P.ADDITIONAL_PAYMENT_DETAILS']}
-
+
{STRINGS['P2P.PAYMENT_FIELD_INFO']}
{' '}
-
-
+
+
{STRINGS['P2P.PAYMENT_DETAIL_NAME']}
{
setCustomField({
@@ -977,28 +818,16 @@ const P2PProfile = ({
/>
-
+
{
setPaymentFieldAdd(false);
setCustomField({});
}}
- style={{
- flex: 1,
- height: 35,
- }}
- className="purpleButtonP2P"
+ className="purpleButtonP2P back-btn"
type="default"
>
- Back
+ {STRINGS['BACK_TEXT'].toUpperCase()}
- Add
+ {STRINGS['DEVELOPERS_TOKEN.ADD_IP'].toUpperCase()}
-
+
+ )}
+ {displayConfirmation && (
+
{
+ setDisplayConfirmation(false);
+ }}
+ shouldCloseOnOverlayClick={true}
+ showCloseText={true}
+ >
+
+
+
+ {STRINGS['P2P.DELETE_WARNING']}
+
+
+
+ setDisplayConfirmation(false)}
+ >
+ {STRINGS['P2P.NO']}
+
+ {
+ const found = myMethods.find(
+ (x) =>
+ x?.details?.system_name === selectedMethod?.system_name
+ );
+ await deleteP2PPaymentMethod({ id: found.id });
+ message.success(STRINGS['P2P.PAYMENT_METHOD_DELETED']);
+ fetchP2PPaymentMethods({ is_p2p: true })
+ .then((res) => {
+ setMyMethods(res.data);
+ })
+ .catch((err) => err);
+ setDisplayConfirmation(false);
+ }}
+ >
+ {STRINGS['REFERRAL_LINK.CONFIRM']}
+
+
+
+
)}
diff --git a/web/src/containers/P2P/Utilis.js b/web/src/containers/P2P/Utilis.js
new file mode 100644
index 0000000000..8877a95d5d
--- /dev/null
+++ b/web/src/containers/P2P/Utilis.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import icons from 'config/icons/dark';
+import strings from 'config/localizedStrings';
+import { IconTitle } from 'hollaex-web-lib';
+import { EditWrapper } from 'components';
+
+const NoDealsData = ({ trade }) => {
+ return (
+
+
+
+ {trade === 'deals' ? (
+
+ {strings['P2P.NO_DEALS_DESC']}
+
+ ) : (
+
+ {strings['P2P.NO_ORDERS_DESC']}
+
+ )}
+
+
+ );
+};
+
+export default NoDealsData;
diff --git a/web/src/containers/P2P/_P2P.scss b/web/src/containers/P2P/_P2P.scss
index b80b6e693a..9c77e88ce2 100644
--- a/web/src/containers/P2P/_P2P.scss
+++ b/web/src/containers/P2P/_P2P.scss
@@ -1,30 +1,5 @@
.P2pOrder {
- .ant-steps-item-active .ant-steps-item-content {
- background-color: transparent;
- }
background-color: var(--base_wallet-sidebar-and-popup);
-
- .buySideP2P {
- background-color: var(--trading_buying-related-elements);
- color: var(--calculated_base_top-bar-navigation_text) !important;
- }
- .sellSideP2P {
- background-color: var(--trading_selling-related-elements);
- color: var(--calculated_base_top-bar-navigation_text) !important;
- }
- .subTable {
- background-color: var(--base_secondary-navigation-bar);
- }
-
- .postDealButton {
- margin-top: 20px;
- }
-}
-
-.postDealWrapper {
- min-height: 600px;
- width: 100%;
- padding: 20px;
}
.greenButtonP2P {
@@ -32,22 +7,27 @@
color: var(--calculated_base_top-bar-navigation_text) !important;
border: none;
}
+
.redButtonP2P {
background-color: var(--trading_selling-related-elements) !important;
color: var(--calculated_base_top-bar-navigation_text) !important;
border: none;
}
+
.redTextP2P {
color: var(--trading_selling-related-elements) !important;
}
+
.greenTextP2P {
color: var(--specials_checks-okay-done) !important;
}
+
.greyButtonP2P {
background-color: var(--labels_inactive-button) !important;
color: var(--calculated_base_top-bar-navigation_text) !important;
border: none;
}
+
.whiteTextP2P {
color: var(--labels_important-active-labels-text-graphics) !important;
}
@@ -61,9 +41,11 @@
color: var(--calculated_base_top-bar-navigation_text) !important;
border: none;
}
+
.greyTextP2P {
color: var(--labels_inactive-button);
}
+
.openGreyTextP2P {
color: var(--labels_secondary-inactive-label-text-graphics);
}
@@ -86,3 +68,3923 @@
zoom: 0.4;
position: relative;
}
+
+.p2p-summary-container {
+ width: 85%;
+ padding: 20px;
+ height: max-content;
+ margin-left: auto;
+ margin-right: auto;
+
+ .p2p-title {
+ text-align: center;
+ font-size: 19px;
+ }
+
+ .toggle-buy-text {
+ color: var(--trading_buying-related-elements);
+ font-weight: bold;
+ }
+
+ .toggle-sell-text {
+ color: var(--trading_selling-related-elements);
+ font-weight: bold;
+ }
+
+ .toggle-buy {
+ background-color: var(--trading_buying-related-elements);
+ }
+
+ .toggle-sell {
+ background-color: var(--trading_selling-related-elements);
+ }
+
+ .p2p-order-wrapper {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .p2p-post-deal-container {
+ min-height: 30rem !important;
+ }
+
+ .no-deals-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto;
+ }
+
+ .p2p-no-deals-container {
+ min-height: fit-content !important;
+ }
+
+ .p2p-tab-container,
+ .p2p-order-tab-container,
+ .p2p-post-deal-container,
+ .p2p-order-wrapper {
+ min-height: 50rem;
+ width: 100%;
+ padding: 20px;
+ background-color: var(--base_wallet-sidebar-and-popup);
+
+ .p2p-order-search-container {
+ display: flex;
+ text-align: center;
+ text-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-top: 10px;
+
+ .p2p-fiat-currency-container,
+ .p2p-amount,
+ .p2p-payment-method,
+ .p2p-avaliable-regions {
+ display: flex;
+ gap: 10px;
+ font-size: 12px !important;
+
+ .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-weight: bold;
+ }
+
+ .p2p-select-field {
+ display: flex;
+ align-items: center;
+
+ .ant-select-selector {
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ height: 20px;
+ font-size: 12px;
+ background-color: transparent;
+ border-color: var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics);
+
+ .ant-select-selection-search {
+ input {
+ height: 100% !important;
+ font-size: 12px;
+ }
+ }
+
+ .ant-select-selection-item {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+
+ .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+
+ .p2p-amount {
+ .ant-input {
+ display: flex;
+ align-items: center;
+ border: unset !important;
+ border-bottom: 1px solid var(--calculated_important-border) !important;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 20px;
+ font-size: 12px;
+ box-shadow: unset;
+
+ input {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 12px !important;
+ }
+ }
+ }
+ }
+
+ .p2p-table-container {
+ display: flex;
+ font-weight: normal !important;
+
+ .p2p-stake-table {
+ .p2p-stake-table-header {
+ font-family: 'Raleway Extrabold';
+
+ tr {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+
+ .p2p-vendor-header {
+ .edit-wrapper__container {
+ margin-left: 15%;
+ }
+ }
+ }
+ }
+
+ .p2p-table-body-container {
+ .p2p-table-row,
+ .p2p-expendable-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ position: relative;
+
+ .vendor-title,
+ .price-value,
+ .avaliable-amount,
+ .payment-methods,
+ .trade-button {
+ padding: 10px 0;
+ }
+
+ .vendor-title:hover,
+ .price-value:hover,
+ .avaliable-amount:hover,
+ .payment-methods:hover {
+ cursor: pointer;
+ }
+
+ .vendor-title,
+ .avaliable-amount {
+ display: flex;
+
+ .p2p-avaliable-price,
+ .p2p-limit-price {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ .p2p-avaliable-price {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px;
+ flex-direction: row;
+ }
+
+ .edit-wrapper__container {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+
+ .trade-button {
+ width: 10%;
+ text-align: end;
+ }
+ }
+ }
+
+ .p2p-expendable-row {
+ .payment-description,
+ .p2p-terms-condition {
+ .payment-time-limit,
+ .deal-terms {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .title-description {
+ display: flex;
+ flex-direction: column;
+ margin-top: 5%;
+
+ .vendor-profile-description {
+ .edit-wrapper__container {
+ color: var(--specials_buttons-links-and-highlights);
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .payment-details-container {
+ padding: 10px;
+ width: 70%;
+
+ .payment-details {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+
+ .payment-method,
+ .p2p-amount-spent,
+ .p2p-amount-receive,
+ .trade-button-container {
+ display: flex;
+ width: 80%;
+ gap: 15px;
+ margin-bottom: 5px;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .amount-receive-title {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .add-payment-container {
+ width: 58%;
+ }
+
+ .error-field {
+ border: 2px solid
+ var(--specials_notifications-alerts-warnings) !important;
+ }
+
+ .amount-spent-field,
+ .amount-receive-field,
+ .payment-method-field-container {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ background-color: var(
+ --base_wallet-sidebar-and-popup
+ ) !important;
+
+ input,
+ .payment-method-field,
+ .ant-select-selector,
+ .ant-select-arrow {
+ color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ background-color: var(
+ --base_wallet-sidebar-and-popup
+ ) !important;
+ border: unset;
+ }
+
+ .ant-input-suffix {
+ text-transform: uppercase;
+ text-decoration: underline;
+ color: var(--specials_buttons-links-and-highlights);
+ }
+ }
+
+ .payment-method-field-container,
+ .amount-spent-field-container,
+ .amount-receive-field-container {
+ width: 58%;
+ }
+ }
+
+ .error-field-container {
+ height: 20px;
+
+ .error-message {
+ color: var(--specials_notifications-alerts-warnings);
+ }
+ }
+
+ .trade-button-container {
+ justify-content: flex-end;
+ margin-top: 15px;
+ gap: 10px;
+
+ .greyButtonP2P {
+ color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ background-color: var(
+ --base_wallet-sidebar-and-popup
+ ) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-buy-sell-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ margin: 2% 0;
+ font-size: 18px;
+ }
+
+ .crypto-assets {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 3%;
+ font-size: 12px;
+ gap: 15px;
+
+ .asset {
+ padding: 0 1%;
+ }
+
+ .asset:hover {
+ cursor: pointer;
+ }
+
+ .selected-asset {
+ border: 1px solid var(--calculated_important-border);
+ border-radius: 5px;
+ }
+ }
+
+ .ant-steps-item-active .ant-steps-item-content {
+ background-color: transparent;
+ }
+
+ .buySideP2P {
+ background-color: var(--trading_buying-related-elements);
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ }
+
+ .sellSideP2P {
+ background-color: var(--trading_selling-related-elements);
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ }
+
+ .subTable {
+ background-color: var(--base_background);
+ }
+
+ .postDealButton {
+ margin-top: 3%;
+ }
+ }
+
+ .p2p-order-tab-container {
+ .order-status-button-container {
+ margin-bottom: 3%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5%;
+
+ .transaction-button {
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 0.5% 1.5%;
+ border-radius: 5px;
+ width: 22%;
+ text-align: center;
+ }
+
+ .transaction-button-active {
+ border: 1px solid var(--calculated_important-border);
+ }
+
+ .transaction-button:hover {
+ cursor: pointer;
+ }
+ }
+
+ .trade-filter-container {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 90%;
+
+ .p2p-trade-select-field {
+ display: flex;
+ width: fit-content;
+
+ .filters {
+ width: fit-content;
+ display: flex;
+ gap: 10px;
+ padding: 0 2%;
+ align-items: center;
+ border-right: 2px solid var(--calculated_secondary-border);
+
+ .asset-filter,
+ .side-filter,
+ .status-filter {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .crypto-field {
+ .ant-select-selection-item {
+ div:nth-child(1) {
+ gap: 5px !important;
+ align-items: center;
+ margin-bottom: 5%;
+ }
+ }
+ }
+
+ .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 14px;
+ }
+
+ .ant-select,
+ .ant-select-selector {
+ height: 20px;
+ width: 7rem;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 5px;
+
+ .ant-select-selection-item {
+ font-size: 12px;
+ line-height: unset;
+ }
+
+ .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-select-selection-placeholder {
+ line-height: 20px;
+ }
+ }
+ }
+
+ .asset-filter {
+ .ant-select,
+ .ant-select-selector {
+ height: 20px;
+ width: 10rem;
+ }
+
+ .crypto-field {
+ .ant-select-selection-item {
+ div:nth-child(1) {
+ align-items: normal;
+ position: relative;
+ top: 0px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .date-filters {
+ width: fit-content;
+ display: flex;
+ gap: 5px;
+ padding: 0 2%;
+
+ .ant-radio-group {
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ font-size: 13px;
+
+ .date-text {
+ text-wrap: nowrap;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ background: transparent !important;
+ border: none;
+ }
+
+ .ant-radio-button-wrapper::before {
+ background-color: transparent;
+ }
+
+ .date-text:hover {
+ cursor: pointer;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .active-date-text {
+ border: 1px solid var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+
+ .custom-text-active {
+ border: 1px solid var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .custom-text {
+ padding: 0 1%;
+ }
+
+ .custom-text:hover {
+ cursor: pointer;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .custom-date-picker-container {
+ display: flex;
+ gap: 15px;
+ margin: 1% 0 0 1%;
+
+ .range-picker {
+ margin-bottom: unset !important;
+
+ .ant-form-item-control-input {
+ min-height: unset;
+
+ .ant-picker {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics) !important;
+
+ .ant-picker-clear {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .ant-picker,
+ .ant-picker-separator,
+ .ant-picker-input input {
+ background-color: var(--base_wallet-sidebar-and-popup) !important;
+ color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ }
+
+ .ant-picker:hover,
+ .ant-picker:focus {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-order-table-wrapper {
+ margin-top: 4%;
+
+ .p2p-order-table {
+ border: none;
+ border-collapse: 'collapse';
+
+ thead,
+ tbody {
+ tr {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ }
+ }
+
+ thead {
+ tr {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ font-size: 12px;
+
+ .trade-button-header {
+ .edit-wrapper__container {
+ margin-left: 5%;
+ }
+ }
+
+ th {
+ padding-bottom: 0.5%;
+ }
+ }
+ }
+
+ .table-row-inactive {
+ td:not(:last-child) {
+ opacity: 0.5;
+ }
+ }
+
+ tbody {
+ tr {
+ .trade-button,
+ .transaction-fiat-amount,
+ .transaction-currency-amount,
+ .crypto-amount,
+ .transaction-user-name,
+ .transaction-status,
+ .view-orders {
+ padding: 0.5% 0;
+ width: 15%;
+ font-weight: normal;
+
+ .active-green {
+ color: var(--specials_checks-okay-done);
+ }
+
+ .active-orange {
+ color: var(--specials_pending-waiting-caution);
+ }
+
+ .active-yellow {
+ color: var(--specials_my-username-in-chat);
+ }
+
+ .inactive-text {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .crypto-amount-detail {
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ }
+
+ .transaction-status-detail {
+ display: flex;
+ gap: 5px;
+ text-transform: capitalize;
+ }
+ }
+
+ .trade-button {
+ .p2p-sell-order-button,
+ .p2p-buy-order-button {
+ margin-left: 5%;
+ padding: 0.5% 7%;
+ width: fit-content;
+ font-size: 12px;
+ height: 25px;
+ }
+
+ .p2p-buy-order-button {
+ background-color: var(--specials_checks-okay-done);
+ }
+
+ .p2p-sell-order-button {
+ background-color: var(--trading_selling-related-elements);
+ }
+
+ .p2p-sell-order-button:hover,
+ .p2p-buy-order-button:hover {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .view-orders {
+ .purpleTextP2P {
+ color: var(--specials_buttons-links-and-highlights) !important;
+ text-transform: uppercase;
+ text-decoration: underline;
+ }
+
+ .purpleTextP2P:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-mydeals-wrapper {
+ height: 100%;
+ overflow-y: auto;
+ padding: 20px;
+ background-color: var(--base_wallet-sidebar-and-popup);
+
+ .ant-checkbox-checked {
+ .ant-checkbox-inner::after {
+ border-color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ }
+ }
+
+ .ant-checkbox-checked::after {
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important;
+ }
+
+ .ant-checkbox-checked,
+ .ant-checkbox-inner {
+ background-color: transparent;
+ border-color: var(--calculated_secondary-border) !important;
+ }
+
+ .p2p-mydeals-content-wrapper {
+ display: flex;
+ gap: 10px;
+
+ .whiteTextP2P {
+ position: relative;
+ top: 5px;
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ }
+
+ .purpleButtonP2P {
+ background-color: var(
+ --specials_buttons-links-and-highlights
+ ) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none;
+ }
+ }
+
+ .p2p-mydeals-table-wrapper {
+ display: flex;
+ margin-top: 20px;
+
+ .p2p-mydeals-table-content-wrapper {
+ border: none;
+ border-collapse: collapse;
+ font-size: 12px;
+
+ .table-bottom-border,
+ .table-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+ }
+
+ .table-row {
+ position: relative;
+
+ .ant-checkbox-checked .ant-checkbox-inner,
+ .ant-checkbox-inner {
+ background-color: transparent;
+ border-color: var(--calculated_secondary-border) !important;
+ }
+
+ .ant-checkbox-input:hover {
+ border-color: var(--calculated_secondary-border) !important;
+ }
+
+ .buySideP2P,
+ .sellSideP2P {
+ .ant-btn {
+ height: 25px !important;
+ font-size: 12px;
+ }
+ }
+
+ .edit-deal-btn {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ font-size: 12px;
+ height: fit-content;
+ }
+
+ .edit-deal-btn:hover {
+ opacity: 0.5;
+ }
+
+ .buySideP2P {
+ .ant-btn {
+ background-color: var(--specials_checks-okay-done) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: unset;
+ }
+ }
+
+ .sellSideP2P {
+ .ant-btn {
+ background-color: var(
+ --trading_selling-related-elements
+ ) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: unset;
+ }
+ }
+
+ .w-fit-content {
+ width: fit-content;
+ padding-bottom: 1%;
+ }
+
+ .pay-methods {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 5px;
+ }
+
+ .avaliable-amount-detail {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .custom-circle {
+ margin-top: 2%;
+ width: 12px;
+ height: 12px;
+ background-color: var(--specials_checks-okay-done);
+ border-radius: 25px;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-profile-wrapper {
+ height: 100%;
+ padding: 20px;
+ overflow-y: auto;
+ background-color: var(--base_wallet-sidebar-and-popup);
+
+ .p2p-profile-content-wrapper {
+ display: flex;
+ flex-direction: column;
+
+ .display-label {
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .profile-card-wrapper {
+ display: flex;
+ justify-content: center;
+
+ .fs-14 {
+ font-size: 14px;
+ }
+
+ .fs-18 {
+ font-size: 18px;
+ }
+
+ .profile-card-content-wrapper {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 10px;
+ width: 70%;
+
+ .profile-cards {
+ padding: 20px;
+ width: 100%;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border);
+ }
+ }
+ }
+
+ .p2p-btn-wrapper {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+
+ .active-btn {
+ border: 1px solid var(--labels_important-active-labels-text-graphics) !important;
+ }
+
+ .method-btn,
+ .feedback-btn {
+ margin: 10px 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: fit-content;
+ border-radius: 5px;
+ font-weight: bold;
+ cursor: pointer;
+ text-align: center;
+ }
+ }
+
+ .payment-method-wrapper {
+ .flex-1 {
+ flex: 1 1 0%;
+
+ .pay-method-desc-wrapper {
+ width: 80%;
+
+ .pay-method-label {
+ font-size: 15px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ }
+ }
+ }
+
+ .payment-fields {
+ display: flex;
+ gap: 5px;
+
+ .pay-field {
+ width: 40%;
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ cursor: pointer;
+ }
+
+ .edit-txt,
+ .delete-txt {
+ position: relative;
+ top: 5px;
+
+ .edit-wrapper__container {
+ text-decoration: underline;
+ }
+ }
+
+ .edit-txt:hover,
+ .delete-txt:hover {
+ cursor: pointer;
+ }
+
+ .pending-label,
+ .unverified-label,
+ .rejected-label,
+ .verified-label {
+ position: relative;
+ top: 5px;
+ margin-left: 5px;
+ }
+ .anticon-clock-circle {
+ svg {
+ position: relative;
+ top: 5px;
+ }
+ }
+ }
+ }
+
+ .feedback-wrapper {
+ .no-feedback {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+ border-radius: 5px;
+ }
+
+ .feedback-table-wrapper {
+ border: none;
+ border-collapse: collapse;
+
+ .table-header-wrapper {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+ }
+
+ .loading-anime {
+ height: 20px;
+ width: 75%;
+ margin: 2%;
+ border-radius: 7px;
+ animation: mymove 3s infinite;
+ }
+
+ .table-row {
+ position: relative;
+ padding: 10px;
+ border-bottom: 1px solid var(--calculated_secondary-border);
+
+ .ant-rate-star-zero {
+ .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important;
+ }
+ }
+ }
+
+ tbody {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-post-deal-container {
+ padding: unset !important;
+
+ .update-deal-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background-color: rgba(67, 112, 235, 0.2);
+ font-size: 17px;
+ padding: 5px;
+
+ .p2p-update-deal {
+ text-transform: uppercase;
+ }
+ }
+
+ .p2p-post-deal-details-container {
+ padding: 20px;
+ }
+
+ .post-deal-description,
+ .custom-step-container {
+ padding: 0 4%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .terms-content {
+ width: 20%;
+ text-align: center;
+ }
+ }
+
+ .custom-step-container {
+ margin-top: 2%;
+
+ .custom-step {
+ padding: 3px 10px;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ border-radius: 20px;
+ }
+
+ .custom-step-active {
+ border: 1.5px solid var(--labels_important-active-labels-text-graphics);
+ }
+
+ .step-active {
+ border-color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .step-one {
+ margin-left: 7%;
+ }
+
+ .step-three {
+ margin-right: 7%;
+ }
+
+ .custom-line {
+ width: 90%;
+ height: 1px;
+ background-color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .custom-line-active {
+ height: 1.5px;
+ background-color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .p2p-post-deal-content-container {
+ .p2p-custom-input-field {
+ width: 100%;
+ font-size: 12px;
+
+ .ant-select-selector {
+ font-size: 12px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 25px;
+
+ .ant-select-selection-item,
+ .ant-select-selection-placeholder {
+ line-height: 25px;
+ }
+ }
+
+ .ant-select-selector:hover,
+ .ant-select-selector {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .p2p-post-deal-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .toggle-container {
+ z-index: 1;
+ padding: 1% 2%;
+ display: flex;
+ gap: 10px;
+ width: max-content;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ background-color: var(--base_wallet-sidebar-and-popup);
+ }
+
+ .p2p-trade-field-container {
+ position: relative;
+ bottom: 2rem;
+ display: flex;
+ width: 100%;
+ padding: 3%;
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ font-size: 12px;
+
+ .p2p-buy-sell-field {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10%;
+ padding: 0 4% 0 0;
+ border-right: 2px dotted var(--calculated_secondary-border);
+
+ .select-asset-field {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ .crypto-text {
+ .edit-wrapper__container {
+ margin-top: 5%;
+ }
+ }
+
+ .p2p-buy-sell-arrow-field {
+ .anticon-arrow-right {
+ font-size: 20px;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+
+ .p2p-price-field-container {
+ padding: 0 0 0 3%;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .p2p-price-field {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ .currency-field {
+ width: 82%;
+
+ .ant-input-number {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+
+ input {
+ height: 25px;
+ }
+ }
+
+ .ant-input-number:hover,
+ .ant-input-number-focused {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .p2p-custom-input-field {
+ width: 82%;
+ }
+ }
+
+ .equal-symbol {
+ font-size: 25px;
+ position: relative;
+ left: 5px;
+ font-size: 26px;
+ }
+
+ .exchange-rate-container,
+ .dynamic-rate-container {
+ margin-left: 5%;
+ width: 48%;
+
+ .p2p-assets-rate {
+ font-size: 22px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+
+ sup {
+ font-size: 9px;
+ margin-left: 2%;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-payment-method-container {
+ .p2p-buy-sell-field {
+ justify-content: center;
+ gap: 10px;
+
+ .total-amount-text {
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .buy-sell-description-text {
+ margin-bottom: 1%;
+ font-size: 11px;
+ }
+
+ .total-amount-order-container {
+ display: flex;
+ flex-direction: column;
+
+ .p2p-total-amount-wrapper {
+ padding-bottom: 5%;
+ border-bottom: 2px dotted var(--calculated_secondary-border);
+
+ .total-amount-field {
+ display: flex;
+ flex-direction: column;
+ padding: 3% 0;
+ }
+
+ .total-amount-input-field {
+ .ant-input-affix-wrapper {
+ width: 90%;
+
+ .ant-input-suffix {
+ div {
+ display: flex;
+ gap: 5px;
+ }
+ }
+ }
+ }
+ }
+
+ .total-amount-input-field {
+ .ant-input-affix-wrapper {
+ background-color: transparent;
+ height: 25px;
+
+ .ant-input,
+ .ant-input-suffix {
+ color: var(--labels_important-active-labels-text-graphics);
+ background-color: transparent;
+ }
+ }
+
+ .ant-input-affix-wrapper,
+ .ant-input-affix-wrapper:hover,
+ .ant-input-affix-wrapper:focus {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .order-limit-container {
+ padding: 5% 0;
+
+ .max-min-field-wrapper {
+ width: 100%;
+ display: flex;
+ gap: 3%;
+ align-items: flex-start;
+
+ .min-input-field,
+ .max-input-field {
+ padding: unset !important;
+ margin-top: 5%;
+ .ant-input-affix-wrapper {
+ padding: 3%;
+ }
+ }
+
+ .value-description {
+ margin-top: 2%;
+ }
+
+ .tilt-symbol {
+ font-size: 25px;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-payment-method-wrapper {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0 0 0 7%;
+
+ .payment-receive-container {
+ .payment-text {
+ font-weight: bold;
+ }
+
+ .payment-list {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .payment-method {
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid
+ var(--labels_secondary-inactive-label-text-graphics);
+ padding: 2% 5%;
+ }
+
+ .payment-method:hover,
+ .edit-button:hover {
+ cursor: pointer;
+ }
+
+ .edit-link {
+ cursor: pointer;
+ }
+ }
+ }
+
+ .select-region-container {
+ .region-title {
+ font-weight: bold;
+ text-transform: uppercase;
+ }
+
+ .p2p-custom-input-field {
+ width: 80%;
+ }
+ }
+ }
+ }
+
+ .p2p-deal-terms-container {
+ .terms-conditions-wrapper {
+ display: flex;
+ flex-direction: column;
+ padding: 3%;
+ border-right: 2px dotted var(--calculated_secondary-border);
+
+ .terms-input-field {
+ .terms-title {
+ font-weight: bold;
+ margin-bottom: 2%;
+ }
+
+ .terms-and-condition-field {
+ margin-top: 5%;
+ font-size: 12px;
+ background-color: transparent;
+ box-shadow: none;
+ }
+
+ .terms-and-condition-field:hover,
+ .terms-and-condition-field:focus {
+ border: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ }
+ .terms-and-condition-error-field {
+ border-color: var(
+ --specials_notifications-alerts-warnings
+ ) !important;
+ }
+ }
+ .error-text {
+ color: var(--specials_notifications-alerts-warnings);
+ height: 10px;
+ }
+ }
+
+ .response-field-wrapper {
+ border: none !important;
+
+ .terms-input-field {
+ .terms-and-condition-field {
+ margin: unset !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .post-deal-button-wrapper {
+ margin-top: 3%;
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+ align-items: flex-end;
+
+ .back-btn,
+ .next-btn {
+ width: 35%;
+ height: 40px;
+ }
+ }
+
+ .back-to-orders-link {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ color: var(--specials_buttons-links-and-highlights);
+ margin-bottom: 1%;
+ font-size: 14px;
+
+ .edit-wrapper__container {
+ text-decoration: underline !important;
+ }
+ }
+
+ .back-to-order-text {
+ color: var(--labels_important-active-labels-text-graphics);
+
+ .edit-wrapper__container {
+ text-decoration: none !important;
+ }
+ }
+
+ .back-text:hover {
+ cursor: pointer;
+ }
+
+ .order-verification-container,
+ .custom-stepper-container,
+ .p2p-order-tab-container {
+ .check-icon,
+ .active-icon {
+ height: 20px;
+
+ .anticon-check-circle,
+ .anticon-play-square {
+ svg {
+ height: 2rem;
+ width: 2rem;
+
+ path:nth-child(1) {
+ fill: transparent;
+ }
+
+ path:nth-child(2) {
+ fill: var(--specials_checks-okay-done);
+ }
+
+ path:nth-child(3) {
+ fill: white;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-order-tab-container {
+ .active-icon {
+ .anticon-play-square {
+ svg {
+ path:nth-child(2) {
+ fill: var(--specials_pending-waiting-caution) !important;
+ }
+ }
+ }
+ }
+
+ .complete-check-icon,
+ .active-icon {
+ margin-top: 1.5%;
+
+ .anticon-check-circle,
+ .anticon-play-square {
+ svg {
+ height: 15px !important;
+ width: 15px !important;
+ }
+ }
+ }
+ }
+
+ .order-verification-container {
+ .anticon-check-circle {
+ svg {
+ height: 20px !important;
+ width: 20px !important;
+ }
+ }
+ }
+
+ .custom-stepper-container {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2%;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+
+ .trade-step-one,
+ .trade-step-two,
+ .trade-step-three {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+
+ .trade-step-container {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .trade-step-active {
+ font-size: 16px;
+ color: var(--labels_important-active-labels-text-graphics);
+
+ .important-text {
+ font-weight: bold;
+ }
+ }
+
+ .trade-step-one:hover,
+ .trade-step-two:hover,
+ .trade-step-three:hover {
+ cursor: pointer;
+ }
+
+ .trade-custom-line {
+ margin-top: 3%;
+ width: 10%;
+ height: 1px;
+ background-color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+
+ .order-expiry-limit-container {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1%;
+
+ .time-remaining-container,
+ .order-details-container {
+ display: flex;
+ gap: 5px;
+ }
+ }
+
+ .p2p-order-wrapper {
+ .p2p-order-container {
+ display: flex;
+ gap: 20px;
+ padding: 3%;
+ font-size: 12px;
+
+ .p2p-order-details-container {
+ .trade-assets-container {
+ padding-bottom: 2%;
+ display: flex;
+ gap: 10px;
+ border-bottom: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+
+ .order-title {
+ font-size: 12px;
+ }
+
+ .order-title,
+ .asset-name {
+ font-weight: bold;
+ }
+ }
+
+ .transaction-container,
+ .release-amount-container,
+ .asset-price-container,
+ .receive-amount-container,
+ .trading-fee-container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 2% 0;
+ border-bottom: 1px solid
+ var(--labels_secondary-inactive-label-text-graphics);
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .transaction-container {
+ border-color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .release-amount-container,
+ .asset-price-container,
+ .receive-amount-container {
+ .release-amount-title {
+ .edit-wrapper__container,
+ span {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-weight: bold;
+ }
+ }
+
+ .trading-amount-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 5px;
+
+ .amount-field {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .receive-amount {
+ font-size: 22px;
+ margin-right: 3%;
+ font-weight: bold;
+ }
+ }
+ }
+ }
+
+ .amount-transfer-container {
+ margin-top: 5%;
+
+ .transfer-title {
+ font-size: 20px;
+ font-weight: bold;
+ }
+
+ .payment-details {
+ margin: 3% 0%;
+ padding: 5%;
+ border: 1px solid var(--calculated_secondary-border);
+
+ .payment-methods-list {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ justify-content: space-between;
+
+ .payment-title {
+ font-weight: bold;
+ }
+ }
+ }
+
+ .active-buy {
+ border-left: 5px solid var(--specials_checks-okay-done);
+ }
+
+ .active-sell {
+ border-left: 5px solid var(--trading_selling-related-elements);
+ }
+ }
+
+ .order-verification-container {
+ .order-confirmed-container {
+ .order-complete-title,
+ .go-to-deposit-link,
+ .go-to-withdraw-link {
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .go-to-deposit-link,
+ .go-to-withdraw-link {
+ .edit-wrapper__container {
+ text-decoration: underline;
+ }
+ }
+
+ .go-to-deposit-link:hover,
+ .go-to-withdraw-link:hover {
+ cursor: pointer;
+ }
+
+ .feedback-submit-btn,
+ .feedback-submit-btn:hover {
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .user-appealed-text,
+ .vendor-appealed-text {
+ margin: 2% 0;
+ }
+
+ .order-cancel-container {
+ display: flex;
+ gap: 10px;
+
+ .appeal-link:hover,
+ .cancel-link:hover {
+ cursor: pointer;
+ }
+
+ .appeal-confirm-button-container-active {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ pointer-events: all;
+ opacity: 1;
+ }
+
+ .appeal-confirm-button-container {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+ }
+ }
+ }
+ }
+
+ .user-chat-container {
+ .message-time {
+ font-size: 10px;
+ }
+
+ .chat-title {
+ font-weight: bold;
+ margin-bottom: 2%;
+ display: flex;
+ gap: 5px;
+
+ .margin-aligner {
+ margin-bottom: unset;
+ margin-right: unset;
+ position: relative;
+ top: 5px;
+ }
+ }
+
+ .chat-field::-webkit-scrollbar {
+ width: 12px;
+ }
+
+ .chat-field {
+ scrollbar-color: var(--labels_secondary-inactive-label-text-graphics)
+ transparent;
+ border: 1px solid var(--calculated_secondary-border);
+ position: relative;
+ padding: 5% 0;
+ background-color: var(--base_background);
+
+ .vendor-name-field {
+ margin: 0 5%;
+ padding: 1% 0 5%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ }
+
+ .vendor-name-field:hover {
+ cursor: pointer;
+ }
+
+ .chat-details-container {
+ margin: 2% 0 3%;
+ padding: 0 5%;
+ text-align: center;
+ }
+
+ .chat-area {
+ height: 520px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ display: flex;
+ flex-direction: column-reverse;
+
+ .chat-message-container {
+ .initial-message {
+ padding: 2% 5%;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 3%;
+ text-align: center;
+ }
+ }
+
+ .chat-message-container
+ > div:nth-child(even):not(.initial-message):not(.notification-message) {
+ background-color: var(--base_secondary-navigation-bar) !important;
+ }
+
+ .notification-message {
+ padding: 2% 5%;
+ }
+
+ .user-message-wrapper {
+ padding: 2% 5%;
+ display: flex;
+ flex-direction: row-reverse;
+
+ .user-message-container {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ text-align: right;
+ }
+ }
+
+ .merchant-message-wrapper {
+ padding: 2% 5%;
+
+ .merchant-message-container {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ .user-message-container,
+ .merchant-message-container {
+ .user-name,
+ .merchant-name {
+ color: var(--specials_my-username-in-chat);
+ }
+
+ .user-message,
+ .merchant-message {
+ color: var(--specials_chat-messages);
+ }
+ }
+ }
+
+ .disable-field {
+ pointer-events: none;
+ }
+
+ .active-field {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ pointer-events: all;
+
+ .message-input-field {
+ padding: 0 5%;
+
+ .ant-input-affix-wrapper,
+ .ant-input {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-input-affix-wrapper,
+ .ant-input-affix-wrapper:hover,
+ .ant-input-affix-wrapper:focus {
+ border: 1px solid var(--calculated_secondary-border);
+ box-shadow: none;
+ }
+ }
+
+ .send-btn {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+
+ .edit-wrapper__container {
+ font-weight: bold;
+ text-decoration: underline !important;
+ }
+ }
+
+ .send-btn:hover {
+ cursor: pointer;
+ }
+
+ .disabled-btn {
+ cursor: not-allowed !important;
+ opacity: 0.5;
+ }
+ }
+ }
+ }
+ }
+
+ .confirm-notify-button-container {
+ width: 80% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2%;
+
+ .cancel-btn,
+ .confirm-btn {
+ word-break: break-word;
+ white-space: normal;
+ width: 35%;
+ height: 45px;
+ background-color: var(--labels_inactive-button);
+ border: none;
+ color: var(--calculated_base_top-bar-navigation_text);
+ }
+
+ .confirm-btn {
+ word-break: break-word;
+ white-space: normal;
+ width: 70%;
+ background-color: var(--specials_buttons-links-and-highlights);
+ }
+
+ .cancel-bth:hover,
+ .confirm-btn:hover {
+ color: var(--calculated_base_top-bar-navigation_text);
+ }
+ }
+}
+
+.p2p-order-creation-popup-wrapper {
+ .ReactModal__Content {
+ width: 50rem;
+
+ .order-creation-popup-container {
+ margin-top: 3%;
+
+ .asset-order-creation-title {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .asset-icon {
+ .edit-wrapper__container {
+ svg {
+ path {
+ margin-top: 5%;
+ }
+ }
+ }
+ }
+ }
+
+ .order-creation-description {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+
+ .edit-wrapper__container {
+ font-size: 12px;
+ }
+ }
+
+ .warning-message-container {
+ .warning-message-details {
+ padding: 4%;
+ background-color: var(--base_secondary-navigation-bar);
+ border: 1px solid var(--calculated_secondary-border);
+
+ .warning-title {
+ .edit-wrapper__container {
+ font-size: 12px;
+ }
+ }
+
+ .warning-description {
+ .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+
+ .cancelling-order-message {
+ .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--specials_pending-waiting-caution);
+ }
+ }
+ }
+
+ .confirm-order-creation {
+ .edit-wrapper__container {
+ font-size: 12px;
+ }
+ }
+ }
+
+ .order-create-button-container {
+ display: flex;
+ gap: 10px;
+
+ .back-btn,
+ .create-order-btn {
+ background-color: var(--specials_buttons-links-and-highlights);
+ border: none;
+ }
+
+ .back-btn:hover,
+ .create-order-btn:hover {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+ }
+}
+
+.payment-method-details-popup-wrapper {
+ .ReactModal__Content {
+ width: 40rem;
+
+ .add-payment-method-title {
+ .edit-wrapper__container {
+ margin-bottom: 5%;
+ font-size: 18px;
+ }
+ }
+
+ .payment-method-field {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 3%;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+
+ .ant-input {
+ width: 70%;
+ height: 25px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-input:focus,
+ .ant-input:hover {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .payment-button-container {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ justify-content: center;
+ margin-top: 3%;
+
+ .back-btn,
+ .complete-btn {
+ width: 100%;
+ height: 5%;
+ }
+ }
+ }
+}
+
+.filter-asset-dropdown {
+ .ant-select-item {
+ .ant-select-item-option-content {
+ div:nth-child(1) {
+ gap: 5px !important;
+ align-items: normal !important;
+ margin-top: 3%;
+ }
+ }
+ }
+}
+
+.p2p-custom-style-dropdown {
+ background-color: var(--base_background);
+
+ .ant-select-item {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+
+ .ant-select-item-option-content {
+ div:nth-child(1) {
+ align-items: center;
+ gap: 5px !important;
+ }
+ }
+ }
+
+ .ant-select-item:hover,
+ .ant-select-item-option-active,
+ .ant-select-item-option-selected {
+ background-color: var(--base_wallet-sidebar-and-popup) !important;
+ }
+}
+
+.p2p-profile-popup-wrapper {
+ .vender-profile-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ margin-top: 10px;
+ .vendor-close-icon {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 20px;
+ }
+
+ .vendor-details {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .profile-description-card-container {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .profile-description-cards {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 10px;
+
+ .p2p-profile-card {
+ padding: 20px;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border);
+
+ .p2p-profile-card-content {
+ font-size: 17px;
+ }
+ }
+ }
+ }
+
+ .feedback-card {
+ margin: 3% 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: 30%;
+ border-radius: 10px;
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .empty-feedback {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 2%;
+ border-radius: 5px;
+ }
+
+ .p2p-feedback-table {
+ border: none;
+ border-collapse: collapse;
+ font-size: 12px;
+ width: 100%;
+
+ .p2p-feedback-table-header {
+ .p2p-header-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+
+ th {
+ .edit-wrapper__container {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+ }
+
+ .p2p-feedback-table-body {
+ .feedback-table-body-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ position: relative;
+ }
+ .loading-anime {
+ height: 20px;
+ width: 75%;
+ margin: 2%;
+ border-radius: 7px;
+ animation: mymove 3s infinite;
+ }
+
+ .ant-rate-star-zero {
+ .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.p2p-new-payment-pop-up {
+ .ReactModal__Content {
+ .dialog-mobile-content {
+ overflow-y: auto;
+ min-height: calc(100vh - 1rem) !important;
+ }
+ }
+}
+
+.p2p-new-payment-pop-up,
+.additional-payment-detail-popup,
+.add-payment-method-detail-popup {
+ color: var(--labels_important-active-labels-text-graphics);
+
+ .ReactModal__Content {
+ width: 30%;
+
+ .new-payment-method-title {
+ .edit-wrapper__container {
+ font-weight: bold;
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 2rem;
+ }
+ }
+
+ .name-detail-title {
+ .edit-wrapper__container {
+ font-size: 1.5rem;
+ }
+ }
+
+ .new-payment-field-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .new-payment-field {
+ width: 40%;
+
+ .ant-select-selector {
+ font-size: 12px;
+ height: 25px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+
+ .ant-select-selection-item {
+ line-height: 25px;
+ }
+ }
+
+ .ant-select-selector:hover,
+ .ant-select-selector:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+
+ .new-payment-details-input-wrapper,
+ .selected-payment-method-field-wrapper {
+ .payment-method-title,
+ .payment-detail-title {
+ font-size: 14px;
+ }
+
+ .custom-input-field {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 25px;
+ font-size: 12px;
+ }
+
+ .custom-input-field:hover,
+ .custom-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-input::placeholder {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+
+ .custom-line {
+ height: 2px;
+ width: 5%;
+ background-color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .new-payment-popup-button-container {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ justify-content: space-between;
+ margin-top: 5%;
+
+ .back-btn,
+ .add-btn,
+ .complete-btn {
+ width: 100%;
+ height: 5%;
+ }
+ }
+ }
+}
+
+.additional-payment-detail-popup {
+ .new-payment-details-input-wrapper {
+ .payment-detail-label {
+ font-weight: bold;
+ font-size: 14px;
+ }
+ }
+}
+
+.confirm-delete-popup-wrapper {
+ .ReactModal__Content {
+ width: 35%;
+ color: var(--labels_important-active-labels-text-graphics);
+
+ .confirm-delete-popup-container {
+ .confirm-popup-delete-title {
+ font-size: 18px;
+ }
+
+ .confirm-popup-button-container {
+ margin-top: 5%;
+ display: flex;
+ gap: 10px;
+
+ .back-btn,
+ .confirm-btn {
+ width: 50%;
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--labels_important-active-labels-text-graphics);
+ border: none;
+ text-align: center;
+ }
+ }
+ }
+ }
+}
+
+.add-payment-method-detail-popup {
+ .ReactModal__Content {
+ width: 35%;
+
+ .add-payment-title {
+ font-weight: bold;
+ font-size: 20px;
+ margin-bottom: 3%;
+ }
+
+ .selected-payment-method-field-wrapper {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 2%;
+
+ .payment-method-title {
+ margin-bottom: 2%;
+ }
+
+ .custom-input-field {
+ width: 60%;
+ }
+ }
+ }
+}
+
+.transaction-appeal-popup-wrapper {
+ .ReactModal__Content {
+ width: 30% !important;
+
+ .transaction-appeal-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+
+ .transaction-appeal-title {
+ .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 22px;
+ font-family: 'Open Sans';
+ }
+ }
+
+ .appeal-reason-container {
+ .appeal-reason-title {
+ margin-bottom: 2%;
+ }
+
+ .appeal-input-field {
+ background-color: transparent;
+ height: 25px;
+ }
+
+ .appeal-input-field:hover,
+ .appeal-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ }
+ }
+ }
+
+ .appeal-reason-button-container {
+ display: flex;
+ gap: 15px;
+ justify-content: space-between;
+ margin-top: 5%;
+
+ .cancel-btn,
+ .okay-btn {
+ height: 10%;
+ width: 100%;
+ }
+ }
+ }
+}
+
+.display-user-feedback-popup-wrapper {
+ .ReactModal__Content {
+ width: 45%;
+
+ .display-user-feedback-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+
+ .user-feedback {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .profile-title {
+ font-size: 22px;
+ margin-bottom: 3%;
+ }
+
+ .user-feedback-details-container {
+ .user-feedback-card-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .user-feedback-card-list {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 3%;
+
+ .user-feedback-card {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border);
+
+ .order-times-text {
+ font-size: 17px;
+ }
+
+ .feedback-count {
+ display: flex;
+ gap: 5px;
+ }
+ }
+ }
+ }
+
+ .total-feedback-count {
+ margin: 3% 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: 30%;
+ border-radius: 10px;
+ cursor: default;
+ text-align: center;
+ }
+
+ .no-feedback-container {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 3%;
+ border-radius: 5px;
+ }
+
+ .feedback-table-container {
+ border: none;
+ border-collapse: collapse;
+
+ thead,
+ tbody {
+ tr {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 3%;
+ }
+ }
+
+ .ant-rate-star-zero {
+ .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.feedback-submit-popup-wrapper {
+ .ReactModal__Content {
+ width: 40%;
+
+ .feedback-submit-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+
+ .submit-feedback-title {
+ font-size: 22px;
+ }
+
+ .feedback-field-container {
+ .feedback-label {
+ text-transform: capitalize;
+ margin-bottom: 1%;
+ }
+
+ .feedback-input-field {
+ background-color: transparent;
+ height: 25px;
+ }
+
+ .feedback-input-field:hover,
+ .feedback-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ }
+ }
+
+ .select-rating-container {
+ .ant-rate-star-zero {
+ .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important;
+ }
+ }
+
+ .select-rating-title {
+ font-size: 14px;
+ }
+ }
+ }
+
+ .submit-transaction-button-container {
+ margin-top: 3%;
+ display: flex;
+ gap: 15px;
+
+ .cancel-btn,
+ .proceed-btn {
+ width: 100%;
+ background-color: var(--specials_buttons-links-and-highlights);
+ border: none;
+ color: var(--calculated_base_top-bar-navigation_text);
+ }
+
+ .cancel-btn:hover,
+ .proceed-btn:hover,
+ .proceed-btn:active,
+ .cancel-btn:active {
+ color: var(--calculated_base_top-bar-navigation_text);
+ }
+ }
+ }
+}
+
+.cancel-popup-wrapper,
+.confirm-popup-wrapper,
+.confirmation-remove-deal-popup-wrapper {
+ .ReactModal__Content {
+ width: 35%;
+
+ .feedback-submit-popup-container {
+ .submit-feedback-title {
+ font-size: 18px !important;
+ }
+
+ .cancel-warning-text {
+ padding: 3%;
+ background-color: var(--base_secondary-navigation-bar);
+ border: 1px solid var(--calculated_secondary-border);
+
+ .warning-title {
+ .edit-wrapper__container {
+ text-decoration: underline;
+ color: var(--specials_pending-waiting-caution);
+ }
+ }
+ .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+
+ .user-receive-amount-detail {
+ margin-top: 3%;
+ font-size: 14px;
+ }
+
+ .submit-transaction-button-container {
+ margin-top: 5% !important;
+ }
+ }
+}
+
+.confirmation-remove-deal-popup-wrapper {
+ .remove-deal-popup-container {
+ .remove-deal-button-container {
+ margin-top: 5%;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .cancel-btn,
+ .confirm-btn {
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--calculated_base_top-bar-navigation_text);
+ border: unset;
+ }
+
+ .cancel-btn:hover,
+ .cancel-btn:hover,
+ .confirm-btn:hover,
+ .confirm-btn:active {
+ color: var(--calculated_base_top-bar-navigation_text);
+ }
+ }
+ }
+}
+
+@media (min-width: 1920px) {
+ .p2p-summary-container {
+ .p2p-post-deal-container {
+ .p2p-post-deal-content-container {
+ .p2p-post-deal-content {
+ .p2p-deal-terms-container {
+ .terms-and-condition-field {
+ margin-top: 0% !important;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-tab-container {
+ .p2p-table-container {
+ .p2p-stake-table {
+ .p2p-expendable-row {
+ .payment-method,
+ .p2p-amount-spent,
+ .p2p-amount-receive,
+ .trade-button-container {
+ width: 60% !important;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-order-tab-container {
+ .trade-filter-container {
+ flex-direction: row;
+
+ .custom-date-picker-container {
+ margin: 0 0 0 auto;
+ }
+ }
+ }
+
+ .custom-stepper-container {
+ .trade-custom-line {
+ width: 15%;
+ }
+ }
+ }
+
+ .add-payment-method-detail-popup,
+ .transaction-appeal-popup-wrapper,
+ .feedback-submit-popup-wrapper,
+ .cancel-popup-wrapper,
+ .confirm-popup-wrapper,
+ .confirm-delete-popup-wrapper {
+ .ReactModal__Content {
+ width: 25% !important;
+ }
+ }
+
+ .display-user-feedback-popup-wrapper {
+ .ReactModal__Content {
+ width: auto;
+ }
+ }
+}
+
+.layout-mobile {
+ .p2p-summary-container {
+ width: 100%;
+ padding: unset;
+ height: 100%;
+
+ .no-deals-data {
+ font-size: 24px;
+ padding-bottom: 5%;
+ }
+
+ .back-to-orders-link {
+ width: 95% !important;
+ }
+
+ .p2p-order-wrapper {
+ width: 100% !important;
+ }
+
+ .ant-tabs-mobile {
+ height: 100%;
+ overflow-y: scroll;
+
+ .ant-tabs-nav {
+ margin: 0 0 5px 0;
+
+ .ant-tabs-nav-list {
+ overflow-x: hidden;
+ padding: 0 1%;
+
+ .ant-tabs-tab {
+ padding: 5px 0;
+ }
+ }
+ }
+
+ .ant-tabs-content {
+ height: 100%;
+ }
+
+ .toggle-buy,
+ .toggle-sell {
+ width: 8rem;
+ height: 4rem;
+
+ .ant-switch-handle {
+ top: 8%;
+ width: 3.5rem;
+ height: 3.5rem;
+ }
+
+ .ant-switch-handle::before {
+ border-radius: 50%;
+ }
+ }
+
+ .ant-switch-checked .ant-switch-handle {
+ left: calc(100% - 44% - 2px);
+ }
+
+ .p2p-tab-container {
+ padding: unset !important;
+
+ .p2p-buy-sell-toggle {
+ margin: 0 0 3% 0;
+ gap: 20px;
+ padding: 20px;
+
+ .toggle-buy-text,
+ .secondary-text,
+ .toggle-sell-text {
+ .edit-wrapper__container {
+ font-size: 30px;
+ }
+ }
+ }
+
+ .crypto-assets {
+ font-size: 24px;
+ gap: 7%;
+ }
+
+ .show-filter-text {
+ display: flex;
+ justify-content: flex-end;
+
+ .blue-link {
+ font-size: 24px;
+ }
+ }
+
+ .p2p-order-search-container {
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 5%;
+
+ .p2p-fiat-currency-container,
+ .p2p-avaliable-regions,
+ .p2p-payment-method,
+ .p2p-amount {
+ width: 100%;
+ align-items: center;
+ gap: 15px;
+ margin-top: 1%;
+
+ .edit-wrapper__container {
+ font-size: 24px;
+ }
+
+ .p2p-select-field,
+ .ant-input {
+ height: 100%;
+ font-size: 22px !important;
+ .ant-select-selector,
+ .ant-input,
+ .ant-input-suffix {
+ height: 100%;
+ font-size: 22px !important;
+ font-weight: normal;
+ }
+ }
+ }
+ }
+
+ .p2p-trade-details {
+ .p2p-trade-assets {
+ padding: 3%;
+ border-bottom: 8px solid var(--base_background);
+
+ .p2p-avaliable-price {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px;
+
+ .asset-icon {
+ position: relative;
+ top: 3px;
+ }
+ }
+
+ .p2p-limit-price {
+ .p2p-avaliable-price {
+ align-items: center;
+ }
+ }
+
+ .vendor-name,
+ .edit-wrapper__container,
+ .deal-amount,
+ .payments {
+ font-size: 22px;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .vendor-name {
+ color: var(--labels_important-active-labels-text-graphics);
+ .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ .amount-detail {
+ display: flex;
+ gap: 5px;
+
+ .amount-field,
+ .spend-asset {
+ font-size: 5.5rem !important;
+ }
+ }
+
+ .custom-line {
+ margin: 2% 0;
+ width: 10%;
+ height: 4px;
+ background-color: var(--calculated_secondary-border);
+ }
+
+ .trade-payment-container {
+ display: flex;
+ justify-content: space-between;
+
+ .trade-btn {
+ font-size: 24px;
+ height: 7rem;
+ width: 21rem;
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-post-deal-container {
+ height: 100%;
+ min-height: unset !important;
+ overflow-y: auto;
+ padding: unset;
+
+ .p2p-post-deal-mobile-container {
+ font-size: 24px;
+
+ .update-deal-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background-color: rgba(67, 112, 235, 0.2);
+
+ .sync-icon {
+ font-size: 5rem;
+ }
+
+ .p2p-update-deal {
+ font-size: 28px;
+ text-transform: uppercase;
+ }
+ }
+
+ .toggle-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ font-size: 4.5rem;
+ margin: 3% 0;
+
+ .toggle-buy,
+ .toggle-sell {
+ width: 10rem;
+ height: 5rem;
+
+ .ant-switch-handle {
+ top: 8%;
+ width: 4.5rem;
+ height: 4.5rem;
+ }
+ }
+ }
+
+ .ant-select-single:not(.ant-select-customize-input)
+ .ant-select-selector {
+ border-color: var(
+ --labels_secondary-inactive-label-text-graphics
+ ) !important;
+ }
+
+ .p2p-custom-input-field {
+ margin: 5% 0 3%;
+ width: 90%;
+ font-size: 26px;
+ height: 100%;
+
+ .ant-select-selector,
+ .ant-select-arrow,
+ .ant-select-selection-search-input {
+ border-radius: 5px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 100%;
+ font-size: 26px;
+ }
+
+ .ant-select-arrow {
+ position: absolute;
+ top: 45%;
+ font-size: 20px;
+ margin-right: 4%;
+ }
+
+ .ant-select-selection-item {
+ font-weight: normal !important;
+ line-height: 50px;
+ }
+
+ .ant-select-selector:hover,
+ .ant-select-selector:active {
+ border-color: var(
+ --labels_secondary-inactive-label-text-graphics
+ ) !important;
+ }
+
+ .ant-select-selection-placeholder {
+ font-weight: normal !important;
+ line-height: 50px;
+ font-size: 26px;
+ }
+ }
+
+ .p2p-post-deal-steps {
+ margin-top: 5%;
+ padding: 0 5%;
+
+ .custom-step-one,
+ .custom-step-two,
+ .custom-step-three {
+ display: flex;
+ width: 100%;
+ gap: 35px;
+ font-size: 26px;
+
+ .custom-stepper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .custom-circle-active {
+ padding: 4px 18px;
+ border: 5px solid
+ var(--labels_important-active-labels-text-graphics);
+ border-radius: 30px;
+ }
+
+ .custom-circle-inactive {
+ border: 1px solid
+ var(--labels_secondary-inactive-label-text-graphics) !important;
+ }
+
+ .custom-line-active,
+ .custom-line-inactive,
+ .custom-line {
+ display: block;
+ width: 5px;
+ height: 100%;
+ background-color: var(
+ --labels_secondary-inactive-label-text-graphics
+ );
+ }
+
+ .custom-line-inactive,
+ .custom-line {
+ height: 4rem;
+ }
+
+ .custom-line,
+ .custom-line-active {
+ background-color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ }
+ }
+
+ .p2p-trade-field-container {
+ margin-top: 3%;
+ font-size: 26px;
+
+ .p2p-buy-sell-field {
+ display: flex;
+ align-items: center;
+ margin: 5% 0;
+ gap: 7%;
+
+ .trade-assets-field {
+ width: 40%;
+ }
+
+ .select-asset-field {
+ display: flex;
+ gap: 15px;
+ margin: 5% 0 3%;
+
+ .p2p-custom-input-field {
+ margin: 0 !important;
+ }
+ }
+ }
+
+ .custom-border-line {
+ margin: 5% 0;
+ width: 75%;
+ border-bottom: 5px dotted
+ var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .p2p-price-field-container {
+ display: flex;
+ align-items: center;
+ gap: 5%;
+
+ .ant-select-selection-item {
+ font-weight: normal;
+ line-height: 50px;
+ }
+
+ .currency-field {
+ width: 90%;
+
+ .ant-input-number {
+ border-radius: 5px;
+ background-color: transparent;
+ line-height: 50px;
+ font-size: 26px;
+ height: 100%;
+ box-shadow: none;
+ color: var(
+ --labels_important-active-labels-text-graphics
+ );
+
+ .ant-input-number-input {
+ font-size: 26px;
+ line-height: 50px;
+ height: 100%;
+ }
+ }
+
+ .ant-input-number:hover,
+ .ant-input-number:active {
+ border-color: var(
+ --labels_secondary-inactive-label-text-graphics
+ ) !important;
+ box-shadow: none;
+ }
+ }
+ }
+
+ .exchange-rate-container,
+ .dynamic-rate-container {
+ padding: 2%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ .p2p-assets-rate {
+ font-size: 6rem;
+ }
+ }
+
+ .total-amount-input-field {
+ .ant-input-affix-wrapper,
+ .ant-input {
+ border-radius: 5px;
+ background-color: transparent;
+ font-size: 26px;
+ color: var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ font-weight: normal;
+ }
+
+ .ant-input-affix-wrapper:hover,
+ .ant-input-affix-wrapper:active {
+ border-color: var(
+ --labels_secondary-inactive-label-text-graphics
+ );
+ }
+
+ .selected-asset-icon {
+ position: relative;
+ top: 5px;
+ }
+ }
+
+ .total-amount-order-container {
+ .p2p-total-amount-wrapper {
+ width: 85%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .payment-receive-container {
+ margin-top: 5%;
+
+ .payment-list {
+ display: flex;
+ width: 50rem;
+ gap: 15px;
+
+ .payment-method {
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ padding: 2% 5%;
+ border: 1px solid
+ var(--labels_secondary-inactive-label-text-graphics);
+ font-weight: normal;
+ }
+ }
+ }
+ }
+
+ .p2p-payment-method-wrapper {
+ .order-limit-container {
+ .max-min-field-wrapper {
+ margin-top: 3%;
+ display: flex;
+ justify-content: space-between;
+ gap: 20px;
+
+ .value-description {
+ margin-top: 2%;
+ color: var(
+ --labels_secondary-inactive-label-text-graphics
+ ) !important;
+ font-weight: normal !important;
+ }
+
+ .tilt-symbol {
+ position: relative;
+ bottom: 23px;
+ font-size: 8rem;
+ }
+ }
+ }
+
+ .select-region-container {
+ margin-top: 3%;
+
+ .p2p-custom-input-field {
+ margin: 3% 0 !important;
+
+ .ant-select-selection-item {
+ font-weight: normal;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .p2p-trade-button-container {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ }
+
+ .next-btn,
+ .back-btn {
+ margin: 5% 0;
+ width: 50%;
+ padding: 2% 0 6%;
+ font-size: 22px;
+ }
+
+ .p2p-deal-terms-container {
+ padding: 3%;
+
+ .terms-conditions-wrapper {
+ .terms-description {
+ margin: 1% 0;
+ }
+
+ .terms-and-condition-field {
+ margin: 2% 0;
+ background-color: transparent;
+ font-size: 26px;
+ border-radius: 5px;
+ border: 2px solid
+ var(--labels_secondary-inactive-label-text-graphics);
+ }
+ .error-text {
+ color: var(--specials_notifications-alerts-warnings);
+ }
+
+ .terms-and-condition-error-field {
+ border-color: var(
+ --specials_notifications-alerts-warnings
+ ) !important;
+ }
+ }
+ }
+ }
+
+ .p2p-mydeals-wrapper {
+ .ant-checkbox,
+ .ant-checkbox-checked {
+ .ant-checkbox-inner {
+ width: 30px;
+ height: 30px;
+ text-align: center;
+ }
+
+ .ant-checkbox-inner::after {
+ width: 7px;
+ height: 14px;
+ }
+ }
+
+ .p2p-mydeals-table-wrapper {
+ width: 100%;
+ overflow-x: scroll;
+
+ .table-row {
+ .w-fit-content {
+ padding-bottom: unset;
+ }
+
+ .my-deals-btn {
+ font-size: 24px;
+ height: fit-content !important;
+ }
+
+ .custom-circle {
+ margin-top: unset;
+ width: 3rem;
+ height: 3rem;
+ }
+ }
+
+ thead {
+ th {
+ div {
+ padding: 0 20px 0 10px;
+ }
+ }
+ }
+
+ thead,
+ tbody {
+ font-size: 24px !important;
+ text-wrap: nowrap;
+
+ td {
+ padding: 0 20px;
+ }
+ }
+
+ .edit-deal-btn {
+ font-size: 24px;
+ }
+ }
+ }
+
+ .custom-stepper-container {
+ .trade-step-container {
+ flex-direction: column;
+ }
+ }
+
+ .p2p-mobile-profile {
+ overflow-x: hidden;
+ font-size: 24px !important;
+
+ .profile-card-content-wrapper {
+ flex-direction: column;
+ }
+
+ .p2p-btn-wrapper {
+ justify-content: center;
+ padding: 5% 0;
+
+ .method-btn,
+ .feedback-btn {
+ border-radius: 10px;
+ }
+ }
+
+ .add-payment-wrapper {
+ padding: 2% 0;
+
+ .ant-btn {
+ height: fit-content !important;
+ font-size: 24px;
+ }
+ }
+
+ .profile-cards {
+ border-radius: 10px !important;
+ }
+
+ .feedback-wrapper {
+ overflow-x: auto;
+
+ .table-header-wrapper {
+ th {
+ padding: 0 15px;
+ }
+ }
+
+ .table-row {
+ td {
+ font-size: 24px !important;
+ text-wrap: nowrap;
+ padding: 0 15px;
+ }
+ }
+ }
+ }
+
+ .p2p-order-tab-container {
+ font-size: 24px;
+
+ .crypto-assets {
+ font-size: 24px;
+ }
+
+ .trade-filter-container {
+ .custom-text {
+ padding: 2% 1%;
+ }
+
+ .p2p-trade-select-field {
+ flex-direction: column;
+ width: 100%;
+
+ .filters {
+ border-right: unset;
+
+ .asset-filter,
+ .status-filter,
+ .side-filter {
+ gap: 20px;
+ margin: 3% 3% 0 0;
+ }
+
+ .ant-select,
+ .ant-select-selector {
+ height: 100%;
+ width: 100%;
+
+ .ant-select-selection-item {
+ font-size: 24px;
+ }
+ }
+ }
+ }
+
+ .custom-date-picker-container {
+ margin: unset;
+ margin-top: 2%;
+
+ .range-picker {
+ .ant-form-item-control-input {
+ .ant-picker-input input {
+ font-size: 24px;
+ }
+ }
+ }
+ }
+
+ .custom-text {
+ width: fit-content;
+ padding: 0 1%;
+ }
+
+ .date-filters {
+ padding: 5% 0;
+
+ .date-text {
+ padding: 2%;
+ font-size: 24px;
+ height: 100%;
+ }
+ }
+ }
+
+ .active-icon .anticon-play-square svg,
+ .complete-check-icon .anticon-check-circle svg {
+ height: 3rem !important;
+ width: 3rem !important;
+ }
+
+ .order-status-button-container {
+ justify-content: start;
+ text-wrap: nowrap;
+ }
+
+ .edit-wrapper__container {
+ font-size: 24px !important;
+ }
+
+ .p2p-order-table-wrapper {
+ overflow-x: scroll;
+ text-wrap: nowrap;
+
+ .p2p-order-table {
+ thead {
+ tr {
+ font-size: 24px;
+ }
+
+ th {
+ div {
+ padding: 0 20px 0 10px;
+ }
+ }
+ }
+
+ tbody {
+ .p2p-sell-order-button,
+ .p2p-buy-order-button {
+ font-size: 24px;
+ height: fit-content;
+ }
+
+ tr {
+ .trade-button,
+ .transaction-fiat-amount,
+ .transaction-currency-amount,
+ .crypto-amount,
+ .transaction-user-name,
+ .transaction-status,
+ .view-orders {
+ font-size: 24px;
+ padding: 15px 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .custom-stepper-container {
+ .trade-step-one,
+ .trade-step-two,
+ .trade-step-three {
+ .trade-step-container {
+ flex-direction: column;
+ font-size: 10px;
+
+ .edit-wrapper__container {
+ text-align: center;
+ }
+ }
+ }
+ }
+
+ .p2p-order-chat-wrapper {
+ height: 100%;
+ }
+ .p2p-order-wrapper {
+ font-size: 24px;
+
+ .p2p-order-container {
+ height: 100%;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .trading-amount-container {
+ text-align: end;
+ }
+
+ .release-amount-title,
+ .spend-amount-title {
+ width: 50%;
+ }
+
+ .p2p-order-details-container {
+ .trade-assets-container,
+ .release-amount-container,
+ .asset-price-container,
+ .trading-amount-container,
+ .receive-amount-container,
+ .trading-fee-container,
+ .amount-transfer-container,
+ .order-verification-container,
+ .confirm-notify-button-container {
+ font-size: 24px;
+
+ .selected-asset-icon {
+ position: relative;
+ top: 4px;
+ }
+
+ .order-title,
+ .asset-name {
+ .edit-wrapper__container {
+ font-size: 18px;
+ }
+ }
+
+ .asset-name {
+ font-weight: normal !important;
+ }
+
+ .chat-link-container {
+ margin-left: auto;
+ display: flex;
+ align-items: flex-start;
+ gap: 15px;
+
+ .chat-link {
+ color: var(--specials_buttons-links-and-highlights);
+ font-size: 24px;
+ }
+ }
+ }
+
+ .order-verification-container {
+ .order-confirmed-container {
+ .order-complete-title {
+ .edit-wrapper__container {
+ font-size: 20px;
+ }
+ }
+
+ .go-to-deposit-link,
+ .go-to-withdraw-link {
+ font-size: 24px;
+ }
+
+ .ant-btn-background-ghost {
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(
+ --labels_important-active-labels-text-graphics
+ );
+ font-size: 24px;
+ height: 100%;
+ }
+ }
+
+ .order-cancel-container {
+ .purpleButtonP2P,
+ .ant-btn {
+ font-size: 20px;
+ height: 100%;
+ }
+ }
+ }
+ }
+
+ .user-chat-container {
+ font-size: 24px;
+ height: 100%;
+
+ .p2p-chat-container {
+ display: flex;
+ justify-content: space-between;
+ text-wrap: nowrap;
+
+ .back-to-orders-link {
+ font-size: 24px;
+ }
+ }
+
+ .chat-field {
+ height: 95%;
+
+ .message-time {
+ font-size: 14px;
+ }
+
+ .chat-area {
+ height: 65%;
+ }
+
+ .message-input-field {
+ .ant-input {
+ font-size: 24px;
+ padding: 1%;
+ }
+
+ .ant-input-suffix {
+ font-size: 24px;
+ }
+ }
+
+ .send-btn {
+ gap: 5px;
+ }
+ }
+ }
+
+ .confirm-notify-button-container {
+ width: 100% !important;
+
+ .cancel-btn {
+ width: 30% !important;
+ }
+ }
+ }
+ }
+
+ @media (min-width: 550px) and (max-width: 768px) {
+ .ant-tabs-mobile {
+ .p2p-post-deal-container {
+ .next-btn,
+ .back-btn {
+ padding: 1% 0 3% 0 !important;
+ }
+ }
+ }
+ }
+
+ @media (min-width: 450px) and (max-width: 550px) {
+ .ant-tabs-mobile {
+ .p2p-post-deal-container {
+ .next-btn,
+ .back-btn {
+ padding: 2% 0 5% !important;
+ }
+ }
+ }
+ }
+ }
+}
+
+.selected-asset-dropdown,
+.selected-type-dropdown {
+ min-width: unset !important;
+ width: 27% !important;
+}
+
+.selected-type-dropdown {
+ width: 35% !important;
+}
+
+.trading-popup-wrapper {
+ .trading-popup-container {
+ .close-icon {
+ font-size: 20px;
+ }
+ .trading-side-container {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .asset-buy-field {
+ color: var(--specials_checks-okay-done);
+ }
+
+ .asset-sell-field {
+ color: var(--specials_notifications-alerts-warnings);
+ }
+ }
+
+ .trading-payment-detail {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 5% 0;
+
+ .p2p-amount-spent,
+ .p2p-amount-receive {
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 10px;
+ padding: 8% 6%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ background-color: var(--base_secondary-navigation-bar);
+
+ .amount-spent-title,
+ .amount-receive-title {
+ .cs-9 {
+ position: relative;
+ top: 1px;
+ }
+
+ .edit-wrapper__container {
+ font-weight: bold;
+ font-size: 16px;
+ }
+ }
+
+ .amount-receive-title {
+ display: flex;
+ gap: 5px;
+ }
+
+ .amount-spent-field-container,
+ .amount-receive-field-container {
+ margin-top: 3%;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+
+ .ant-input-number-input-wrap,
+ .ant-input {
+ padding: 2%;
+ font-size: 18px;
+ }
+
+ .spent-asset-name {
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ padding: 2% 10% 2% 5%;
+ gap: 15%;
+ .spent-asset-icon {
+ position: relative;
+ top: 3px;
+ }
+ }
+
+ .amount-spent-field,
+ .amount-receive-field {
+ background-color: var(--base_background) !important;
+ border: none;
+ box-shadow: inset 1px 1px 3px #00000029;
+ border-radius: 5px;
+ color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ border-bottom: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+
+ .ant-input-number-input {
+ text-align: right;
+ }
+ }
+
+ .ant-input::placeholder,
+ .ant-input-number-input::placeholder {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .amount-receive-field {
+ text-align: right;
+ }
+
+ .amount-receive-field:hover,
+ .amount-receive-field:active {
+ background-color: var(--base_secondary-navigation-bar) !important;
+ border-radius: 5px;
+ border-bottom: 1px solid
+ var(--labels_important-active-labels-text-graphics);
+ }
+ }
+ }
+
+ .payment-method-error-field {
+ .ant-select-selector {
+ border-color: var(
+ --specials_notifications-alerts-warnings
+ ) !important;
+ }
+ }
+ .payment-method-field {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+
+ .payment-method-field {
+ .ant-select-selector {
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 10px;
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+
+ .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics);
+ }
+
+ .ant-select-selector:hover,
+ .ant-select-selector:active {
+ border-color: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+ }
+
+ .asset-avaliable-amount {
+ padding: 3% 0;
+ border-top: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ font-size: 13px;
+
+ .vendor-details {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+ .payment-time-limit-container {
+ padding-bottom: 18%;
+ }
+
+ .error-field-container {
+ display: flex;
+ font-size: 12px;
+ justify-content: flex-start;
+
+ .error-message {
+ color: var(--specials_notifications-alerts-warnings);
+ }
+ }
+ }
+}
diff --git a/web/src/containers/P2P/index.js b/web/src/containers/P2P/index.js
index 6b7d2cc113..1f3736f07d 100644
--- a/web/src/containers/P2P/index.js
+++ b/web/src/containers/P2P/index.js
@@ -1,20 +1,19 @@
-/* eslint-disable */
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
-import { ReactSVG } from 'react-svg';
+import { withRouter } from 'react-router';
+import { isMobile } from 'react-device-detect';
+import { Tabs, message } from 'antd';
-import { IconTitle, EditWrapper } from 'components';
import STRINGS from 'config/localizedStrings';
import withConfig from 'components/ConfigProvider/withConfig';
-import { Tabs, message } from 'antd';
import P2PDash from './P2PDash';
import P2PMyDeals from './P2PMyDeals';
import P2POrders from './P2POrders';
import P2PPostDeal from './P2PPostDeal';
import P2PProfile from './P2PProfile';
-import P2POrder from './P2POrder';
+import P2POrder from './P2POrder/P2POrder';
+import { EditWrapper } from 'components';
import { fetchTransactions } from './actions/p2pActions';
-import { withRouter } from 'react-router';
const TabPane = Tabs.TabPane;
const P2P = ({
@@ -73,6 +72,7 @@ const P2P = ({
if (arr?.[2] === 'mydeals') {
setTab('4');
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [window.location.pathname]);
const changeProfileTab = (merchant) => {
@@ -80,18 +80,15 @@ const P2P = ({
setTab('2');
};
return (
-
- {!displayOrder && (
+
+ {!displayOrder && !isMobile && (
<>
-
+
{STRINGS['P2P.TITLE']}
-
+
{STRINGS['P2P.DESCRIPTION']}
@@ -142,6 +139,7 @@ const P2P = ({
setSelectedTransaction={setSelectedTransaction}
changeProfileTab={changeProfileTab}
setTab={setTab}
+ tab={tab}
/>
@@ -154,6 +152,7 @@ const P2P = ({
setSelectedTransaction={setSelectedTransaction}
refresh={refresh}
changeProfileTab={changeProfileTab}
+ tab={tab}
/>
>
@@ -174,6 +173,7 @@ const P2P = ({
<>
{getLink(
- `fees-and-limits`,
+ `/fees-and-limits`,
STRINGS['FEES_AND_LIMITS.COIN_PAGE_LINK'],
true
)}
diff --git a/web/src/containers/QuickTrade/index.js b/web/src/containers/QuickTrade/index.js
index da0653648a..efc32e03ff 100644
--- a/web/src/containers/QuickTrade/index.js
+++ b/web/src/containers/QuickTrade/index.js
@@ -26,10 +26,26 @@ class QuickTradeContainer extends PureComponent {
}
}
- onGoBack = () => {
- const { router, pair } = this.props;
+ getFlippedPair = (pair) => {
+ let flippedPair = pair.split('-');
+ flippedPair.reverse();
+ return flippedPair.join('-');
+ };
- router.push(`/trade/${pair}`);
+ onGoBack = () => {
+ const { router, pair, quicktrade } = this.props;
+ const flippedPair = this.getFlippedPair(pair);
+ const isQuickTrade = !!quicktrade?.filter(
+ ({ symbol, active, type }) =>
+ !!active &&
+ type !== 'pro' &&
+ (symbol === pair || symbol === flippedPair)
+ )?.length;
+ if (pair && isQuickTrade) {
+ return router.push('/wallet');
+ } else if (pair && !isQuickTrade) {
+ return router.push(`/trade/${pair}`);
+ }
};
render() {
@@ -72,6 +88,7 @@ const mapStateToProps = (store) => {
constants: store.app.constants,
fetchingAuth: store.auth.fetching,
isReady: store.app.isReady,
+ quicktrade: store.app.quicktrade,
};
};
diff --git a/web/src/containers/Stake/DesktopStake.js b/web/src/containers/Stake/DesktopStake.js
index 8da29546bd..f53c571f49 100644
--- a/web/src/containers/Stake/DesktopStake.js
+++ b/web/src/containers/Stake/DesktopStake.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
+import { browserHistory, Link, withRouter } from 'react-router';
import mathjs from 'mathjs';
import classnames from 'classnames';
import { ClockCircleOutlined } from '@ant-design/icons';
@@ -16,8 +17,7 @@ import {
getAllPenalties,
getAllPots,
} from 'actions/stakingActions';
-import { setNotification, NOTIFICATIONS } from 'actions/appActions';
-import { Link, withRouter } from 'react-router';
+import { setNotification, NOTIFICATIONS, setStake } from 'actions/appActions';
import { web3 } from 'config/contracts';
import STRINGS from 'config/localizedStrings';
import { DEFAULT_COIN_DATA } from 'config/constants';
@@ -54,13 +54,14 @@ class Stake extends Component {
super(prop);
this.state = {
activeTab: '1',
- selectedStaking:
- this.props?.constants?.features?.cefi_stake &&
- this.props?.constants?.features?.stake_page
- ? 'defi'
- : this.props?.constants?.features?.cefi_stake
- ? 'cefi'
- : 'defi',
+ selectedStaking: this.props?.getStake
+ ? this.props?.getStake
+ : this.props?.constants?.features?.cefi_stake &&
+ this.props?.constants?.features?.stake_page
+ ? 'defi'
+ : this.props?.constants?.features?.cefi_stake
+ ? 'cefi'
+ : 'defi',
readBeforeAction: false,
stakeAmount: false,
duration: false,
@@ -87,7 +88,7 @@ class Stake extends Component {
getAllPots();
}
- componentDidUpdate(prevProps) {
+ componentDidUpdate(prevProps, prevState) {
const {
account,
network,
@@ -103,14 +104,32 @@ class Stake extends Component {
getAllUserStakes(account);
getPendingTransactions(account);
}
+
+ if (
+ this.props?.getStake &&
+ this.props?.getStake !== this.state?.selectedStaking
+ ) {
+ this.setState({
+ selectedStaking: this.props?.getStake,
+ });
+ }
+
+ if (
+ JSON.stringify(prevState?.selectedStaking) !==
+ JSON.stringify(this.state?.selectedStaking)
+ ) {
+ this.openCurrentTab();
+ }
}
componentDidMount() {
this.setBlockNumberInterval();
+ this.openCurrentTab();
}
componentWillUnmount() {
this.clearBlockNumberInterval();
+ this.props.setSelectedStake('defi');
}
setBlockNumberInterval = () => {
@@ -195,6 +214,16 @@ class Stake extends Component {
this.setState({ activeTab: key });
};
+ openCurrentTab = () => {
+ let currentTab = '';
+ if (this.state?.selectedStaking === 'cefi') {
+ currentTab = 'cefi';
+ } else {
+ currentTab = 'defi';
+ }
+ browserHistory.push(`/stake?${currentTab}`);
+ };
+
render() {
const {
icons: ICONS,
@@ -209,6 +238,7 @@ class Stake extends Component {
totalUserEarnings,
pending,
networksMismatch,
+ setSelectedStake,
} = this.props;
const index_display_name = coins?.[STAKING_INDEX_COIN]?.display_name;
@@ -313,6 +343,7 @@ class Stake extends Component {
this.setState({
selectedStaking: 'defi',
});
+ setSelectedStake('defi');
}}
>
{STRINGS['STAKE.DEFI_STAKING']}
@@ -327,6 +358,7 @@ class Stake extends Component {
this.setState({
selectedStaking: 'cefi',
});
+ setSelectedStake('cefi');
}}
>
{STRINGS['STAKE.CEFI_STAKING']}
@@ -755,6 +787,7 @@ const mapStateToProps = (store) => ({
contracts: store.app.contracts,
constants: store.app.constants,
theme: store.app.theme,
+ getStake: store.app.selectedStake,
});
const mapDispatchToProps = (dispatch) => ({
@@ -768,6 +801,7 @@ const mapDispatchToProps = (dispatch) => ({
setNotification: bindActionCreators(setNotification, dispatch),
getAllPenalties: bindActionCreators(getAllPenalties, dispatch),
getAllPots: bindActionCreators(getAllPots, dispatch),
+ setSelectedStake: bindActionCreators(setStake, dispatch),
});
export default connect(
diff --git a/web/src/containers/Stake/MobileStake.js b/web/src/containers/Stake/MobileStake.js
index b8879afde5..a9f6115927 100644
--- a/web/src/containers/Stake/MobileStake.js
+++ b/web/src/containers/Stake/MobileStake.js
@@ -3,34 +3,62 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import classnames from 'classnames';
import { Button as AntBtn } from 'antd';
-import { openConnectViaDesktop } from 'actions/appActions';
+import './CeFiStake.scss';
import STRINGS from 'config/localizedStrings';
-import { HeaderSection, EditWrapper, Button, Coin, Image } from 'components';
import withConfig from 'components/ConfigProvider/withConfig';
-
import Account from './components/Account';
import ConnectWrapper from './components/ConnectWrapper';
import StakesAndEarnings from './components/StakesAndEarnings';
-import { STAKING_INDEX_COIN } from 'config/contracts';
import CeFiUserStake from './components/CeFiUserStake';
-import './CeFiStake.scss';
+import { openConnectViaDesktop, setStake } from 'actions/appActions';
+import { HeaderSection, EditWrapper, Button, Coin, Image } from 'components';
+import { STAKING_INDEX_COIN } from 'config/contracts';
+import { browserHistory } from 'react-router';
class Stake extends Component {
constructor(prop) {
super(prop);
this.state = {
activeTab: '1',
- selectedStaking:
- this.props?.constants?.features?.cefi_stake &&
- this.props?.constants?.features?.stake_page
- ? 'defi'
- : this.props?.constants?.features?.cefi_stake
- ? 'cefi'
- : 'defi',
+ selectedStaking: this.props.getStake
+ ? this.props.getStake
+ : this.props?.constants?.features?.cefi_stake &&
+ this.props?.constants?.features?.stake_page
+ ? 'defi'
+ : this.props?.constants?.features?.cefi_stake
+ ? 'cefi'
+ : 'defi',
};
}
+ componentDidMount() {
+ this.openCurrentTab();
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ JSON.stringify(prevState.selectedStaking) !==
+ JSON.stringify(this.state.selectedStaking)
+ ) {
+ this.openCurrentTab();
+ }
+ }
+
+ componentWillUnmount() {
+ setStake('defi');
+ }
+
+ openCurrentTab = () => {
+ let currentTab = '';
+ if (this.state.selectedStaking === 'cefi') {
+ currentTab = 'cefi';
+ } else {
+ currentTab = 'defi';
+ }
+ browserHistory.push(`/stake?${currentTab}`);
+ };
+
render() {
const {
icons: ICONS,
@@ -249,9 +277,11 @@ const mapStateToProps = (store) => ({
constants: store.app.constants,
balance: store.user.balance,
theme: store.app.theme,
+ getStake: store.app.selectedStake,
});
const mapDispatchToProps = (dispatch) => ({
+ setSelectedStake: bindActionCreators(setStake, dispatch),
openConnectViaDesktop: bindActionCreators(openConnectViaDesktop, dispatch),
});
diff --git a/web/src/containers/Stake/components/CeFiUserStake.js b/web/src/containers/Stake/components/CeFiUserStake.js
index 7c90f14fb0..0a58a38812 100644
--- a/web/src/containers/Stake/components/CeFiUserStake.js
+++ b/web/src/containers/Stake/components/CeFiUserStake.js
@@ -107,7 +107,7 @@ const CeFiUserStake = ({ balance, coins, theme }) => {
((data?.stake?.duration -
calculateRemainingDays(
data?.stake?.duration,
- data?.created_at
+ data?.unstaked_date || data?.created_at
)) *
100) /
data?.stake?.duration
@@ -414,7 +414,10 @@ const CeFiUserStake = ({ balance, coins, theme }) => {
}}
prefix={stakePools
.filter(
- (pool) => pool.status === 'active' && pool.onboarding
+ (pool) =>
+ pool.status === 'active' &&
+ pool.onboarding &&
+ pool.id === selectedPool?.id
)
.map((pool) => {
return (
diff --git a/web/src/containers/Summary/_Summary.scss b/web/src/containers/Summary/_Summary.scss
index 634704178e..01d919d2ee 100644
--- a/web/src/containers/Summary/_Summary.scss
+++ b/web/src/containers/Summary/_Summary.scss
@@ -26,7 +26,202 @@ $trade-tab--arrow-size: 0.4rem;
.link-container {
font-size: 10px;
}
+
+ .market-wrapper {
+ .header-container {
+ padding-bottom: 0;
+ border-bottom: unset;
+
+ .icon_title-wrapper .icon_title-svg svg {
+ width: 2rem !important;
+ height: 2rem !important;
+ margin-top: 0 !important;
+ }
+
+ .icon_title-wrapper .icon_title-svg {
+ width: 2rem !important;
+ }
+ }
+
+ .market-button-container {
+ width: 100%;
+ padding: 2%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .market-buttons {
+ width: 100%;
+
+ .market-btn {
+ padding: 1% 4%;
+ }
+ }
+
+ .search-field-mobile-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+
+ .search-field-container {
+ div:first-child {
+ width: 100%;
+ }
+ }
+
+ .search-field-container,
+ .search {
+ width: 90% !important;
+
+ .trade_tabs-search-field {
+ width: 100%;
+ display: block !important;
+
+ .field-content {
+ .field-children {
+ div {
+ div {
+ width: unset !important;
+ }
+ }
+
+ input {
+ width: 100%;
+ }
+ }
+
+ .clear-field {
+ bottom: 35% !important;
+ right: 10px;
+
+ svg {
+ width: 2rem;
+ height: unset;
+ }
+ }
+ }
+
+ .field-error-content {
+ margin: unset;
+ padding-bottom: unset;
+ min-height: unset;
+ }
+ }
+ }
+
+ .blue-link {
+ font-size: 12px !important;
+ text-transform: uppercase;
+ text-decoration: underline !important;
+ }
+ }
+
+ .trade-tab-search-icon {
+ padding: 1.5%;
+ border-radius: 20px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ background-color: $link;
+ }
+ }
+ }
+
+ .market-list__container {
+ .market-list__block {
+ .market-list__block-table {
+ .sticky-col {
+ background-color: transparent;
+ .table-asset-container,
+ .coin-symbol {
+ width: 100%;
+ overflow: hidden;
+ text-wrap: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+ tr {
+ font-size: 12px !important;
+ }
+
+ .market-asset-row,
+ .ant-space {
+ .action_notification-text {
+ padding: 8px 10px;
+ font-size: 12px !important;
+ border-radius: 8px;
+ }
+ }
+
+ .trade-header {
+ padding: 5% !important;
+ }
+
+ .highcharts-container {
+ position: absolute !important;
+ top: 30% !important;
+ height: 50%;
+
+ .highcharts-root {
+ height: 100%;
+ }
+ }
+
+ td:nth-child(3) {
+ .price-change {
+ .price-diff {
+ position: absolute;
+ top: 7%;
+ }
+ }
+ }
+ }
+ }
+ }
}
+
+ .asset-cards-swipe-container {
+ min-height: 20%;
+ .assets-card-container {
+ .gainer-icon {
+ .edit-wrapper__container:nth-child(1) {
+ margin-top: 2%;
+ }
+
+ .edit-wrapper__container:nth-child(2) {
+ .icon_title-text {
+ font-size: 12px !important;
+ }
+ }
+ }
+
+ .digital-assets-cards {
+ .assets-wrapper {
+ .assets-value {
+ .gainer-price {
+ font-weight: bold;
+ }
+ }
+ }
+ }
+
+ .gainer-asset-card {
+ border-top: 3px solid $buy !important;
+ }
+
+ .losers-asset-card {
+ border-top: 3px solid $sell !important;
+ }
+
+ .new-asset-card {
+ border-top: 3px solid $colors-black !important;
+ }
+ }
+ }
+
.fee-limits-wrapper {
margin: 1rem auto 3rem;
@@ -35,47 +230,58 @@ $trade-tab--arrow-size: 0.4rem;
height: 12rem;
width: 12rem;
}
+
.icon_title-svg svg {
height: 12rem;
width: 12rem;
}
}
}
+
.logout-wrapper {
margin: 0 auto;
}
+
.confirm-text {
font-size: 2rem;
}
+
.summary-container {
.trader-account-wrapper {
.summary-block_wrapper {
.trade-account-secondary-txt {
width: 100%;
+
.account-details-content {
font-size: $font-size-mobile-txt;
}
+
.trade-account-link {
font-size: $font-size-mobile-txt;
}
}
}
}
+
.summary-section_1 {
height: auto !important;
}
+
.summary-content-txt {
font-size: $font-size-mobile-txt !important;
// width: 17rem;
}
+
.assets-wrapper {
.price-text {
font-size: $font-size-mobile-txt !important;
}
+
.donut-container {
height: 30rem !important;
width: 100%;
}
+
.rounded-loading {
width: 80px;
height: 80px;
@@ -88,6 +294,7 @@ $trade-tab--arrow-size: 0.4rem;
background-color: $colors-border !important;
animation: outer-round-anim 3s ease infinite;
}
+
.inner-round {
background-color: $app-sidebar-background;
width: 50px;
@@ -96,18 +303,22 @@ $trade-tab--arrow-size: 0.4rem;
margin: 0 auto;
border: 1px solid #808080;
}
+
.loading-wrapper {
height: 16rem;
flex-direction: column;
+
.d-none {
display: none;
}
+
.loading-txt {
text-align: center;
margin-bottom: 1rem;
margin-top: 5rem;
}
}
+
.dot-flashing {
position: relative;
width: 30px;
@@ -118,6 +329,7 @@ $trade-tab--arrow-size: 0.4rem;
animation: dotFlashing 3s infinite;
}
}
+
.account-details-wrapper {
.account-type-menu {
height: auto !important;
@@ -132,22 +344,27 @@ $trade-tab--arrow-size: 0.4rem;
background-color: $colors-border;
opacity: 0.5;
}
+
10% {
background-color: $colors-border;
opacity: 0.3;
}
+
30% {
background-color: $colors-border;
opacity: 0.2;
}
+
50% {
transform: scale(1.5, 1.5);
background-color: $colors-border;
}
+
70% {
background-color: $colors-border;
opacity: 0;
}
+
100% {
transform: scale(1, 1);
background-color: $colors-border;
@@ -160,60 +377,74 @@ $trade-tab--arrow-size: 0.4rem;
background-color: $colors-border;
opacity: 0.5;
}
+
50% {
background-color: #34363a;
opacity: 0.5;
}
}
+
.digital-market-wrapper {
display: flex;
justify-content: center;
padding-top: 2rem;
+
.market-wrapper-mobile-view {
- width: 90% !important;
+ width: 100% !important;
}
+
.market-wrapper {
width: 70%;
+
.gray-text {
color: $colors-black;
}
+
.header-container {
padding-bottom: 1rem;
border-bottom: 2px solid $colors-main-border;
+
.link-content {
color: $colors-notifications-blue;
text-decoration: underline;
cursor: pointer;
}
+
.digital-assets-icon {
display: flex !important;
flex-direction: inherit !important;
margin-top: 0;
}
+
.icon_title-wrapper .icon_title-svg svg {
width: 3.5rem !important;
height: 3.5rem !important;
margin-top: 1rem !important;
}
+
.icon_title-wrapper .icon_title-svg {
width: 3.5rem !important;
}
}
+
.link-container {
color: $colors-notifications-blue;
padding-top: 5px;
+
.link-1,
.link-2 {
border-right: 1px solid $footer-border-color;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
+
.link-3 {
padding-left: 0.5rem;
}
}
}
}
+
.summary-container {
height: inherit;
max-width: 100%;
@@ -238,16 +469,19 @@ $trade-tab--arrow-size: 0.4rem;
background-color: $app-sidebar-background;
border-radius: 3px;
border: 1px solid $colors-super-pale-black;
+
.link-text {
color: $colors-notifications-blue;
cursor: pointer;
text-decoration: underline;
}
+
.summary-block-title {
color: $colors-black;
font-size: $font-size-subhead4;
font-weight: bold;
}
+
.summary-title-icon {
width: 2rem;
}
@@ -270,6 +504,7 @@ $trade-tab--arrow-size: 0.4rem;
.trader-acc-detail-icon {
width: 8rem;
margin-right: 1rem;
+
svg {
.level_icon {
fill: $colors-black;
@@ -282,15 +517,18 @@ $trade-tab--arrow-size: 0.4rem;
width: 4.5rem;
margin-right: 1rem;
}
+
.trade-account-link {
color: $link;
font-weight: bold;
}
+
.deposit-icon {
svg {
width: 1rem;
}
}
+
.summary-section_1 {
// height: 30rem;
@@ -307,6 +545,7 @@ $trade-tab--arrow-size: 0.4rem;
background-color: $colors-border !important;
animation: outer-round-anim 3s ease infinite;
}
+
.inner-round {
background-color: $app-sidebar-background;
width: 50px;
@@ -315,22 +554,27 @@ $trade-tab--arrow-size: 0.4rem;
margin: 0 auto;
border: 1px solid #808080;
}
+
.donut-container {
height: 20rem;
width: 100%;
}
+
.loading-wrapper {
height: 16rem;
flex-direction: column;
+
.d-none {
display: none;
}
+
.loading-txt {
text-align: center;
margin-bottom: 1rem;
margin-top: 5rem;
}
}
+
.dot-flashing {
position: relative;
width: 30px;
@@ -342,18 +586,23 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.requirements-content-text {
margin: auto 0;
}
+
.requirements-content {
width: 11rem;
}
+
.requirement-verified {
color: $colors-notifications-green;
+
svg {
circle {
fill: $colors-notifications-green;
}
+
path,
polygon,
polyline {
@@ -361,12 +610,15 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.requirement-not-verified {
color: $colors-notifications-red;
+
svg {
circle {
fill: $colors-notifications-red;
}
+
path,
polygon,
polyline {
@@ -374,12 +626,15 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.requirement-rejected {
color: $colors-notifications-red;
+
svg {
circle {
fill: $colors-notifications-red;
}
+
path,
polygon,
polyline {
@@ -387,12 +642,15 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.requirement-pending {
color: $colors-notification-pending;
+
svg {
circle {
fill: $colors-notification-pending;
}
+
path,
polygon,
polyline {
@@ -400,12 +658,15 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.requirement-incomplete {
color: $colors-deactivate-color2;
+
svg {
circle {
fill: $colors-deactivate-color2;
}
+
path,
polygon,
polyline {
@@ -454,20 +715,25 @@ $trade-tab--arrow-size: 0.4rem;
.assets-description {
width: 86%;
}
+
.donut-container {
height: 23rem;
width: 100%;
}
+
.donut-container-xht {
height: 40rem;
}
+
.price-content {
padding: 0 0.5rem;
}
+
.price-text {
color: $colors-black;
font-weight: bold;
}
+
.total-assets {
background: repeating-linear-gradient(
-45deg,
@@ -481,9 +747,11 @@ $trade-tab--arrow-size: 0.4rem;
padding: 0.5rem;
color: $colors-black;
}
+
.asset-changes {
background-color: $link;
}
+
.coin-price-container {
height: 3.5rem;
}
@@ -492,6 +760,7 @@ $trade-tab--arrow-size: 0.4rem;
.asset_wrapper_width {
width: 100%;
}
+
.xht_asset_wrapper_width {
width: 100% !important;
}
@@ -511,16 +780,20 @@ $trade-tab--arrow-size: 0.4rem;
}
}
}
+
.account-details-wrapper {
.account-type-container {
width: 30%;
}
+
.mobile-account-type {
width: 80%;
}
+
.account-type-icon {
width: 4rem;
}
+
.account-type-menu {
opacity: 0.65;
border-top: 1px solid $colors-border;
@@ -548,6 +821,7 @@ $trade-tab--arrow-size: 0.4rem;
color: $colors-main-black;
text-transform: lowercase;
}
+
.trader-account-icon {
svg {
.level_icon {
@@ -560,15 +834,18 @@ $trade-tab--arrow-size: 0.4rem;
.account-type-menu-last-active {
border-bottom: none !important;
}
+
.requirement-header {
border-bottom: 1px solid $colors-border;
color: $colors-black;
font-weight: bold;
}
+
.status-header {
width: 6rem;
}
}
+
.price-diff-down {
color: $sell;
padding: 0 5px;
@@ -631,6 +908,7 @@ $trade-tab--arrow-size: 0.4rem;
position: relative;
top: calc(50% - 0.6rem);
}
+
.trade_tabs-search-field {
background-color: $app-sidebar-background;
color: $colors-deactivate-color1;
@@ -654,6 +932,7 @@ $trade-tab--arrow-size: 0.4rem;
.trader-wrapper-icon {
width: 4rem;
margin-right: 1rem;
+
svg {
.level_icon,
.hap-icon {
@@ -670,19 +949,23 @@ $trade-tab--arrow-size: 0.4rem;
cursor: pointer;
font-weight: bold;
}
+
.content-txt {
font-size: $font-size-subtext;
max-height: 70vh;
overflow-y: auto;
+
.fee-reduction-container {
border: 1px solid $colors-border;
}
}
+
.content-title {
font-size: $font-size-main;
font-weight: bold;
margin: 1.5rem 0;
}
+
.icon_title-wrapper {
margin-top: 1rem;
@@ -690,6 +973,7 @@ $trade-tab--arrow-size: 0.4rem;
height: 12rem;
width: 12rem;
}
+
.icon_title-svg svg {
height: 12rem;
width: 12rem;
@@ -698,6 +982,7 @@ $trade-tab--arrow-size: 0.4rem;
fill: $colors-black;
}
}
+
.icon_title-text {
margin: 0;
@@ -716,23 +1001,28 @@ $trade-tab--arrow-size: 0.4rem;
th {
border: 1px solid $colors-border;
}
+
.account-limits {
margin: 1rem 0;
width: 100%;
}
+
.account-limits-content {
border: 1px solid $colors-border;
}
+
.account-limits-maker {
border-left: 1px solid $colors-border;
border-right: 1px solid $colors-border;
border-top: 1px solid $colors-border;
}
+
.account-limits-taker {
border-bottom: 1px solid $colors-border;
border-left: 1px solid $colors-border;
border-right: 1px solid $colors-border;
}
+
.account-limits-coin {
border-bottom: 1px solid $colors-border;
padding: 0.25rem 0.5rem;
@@ -740,17 +1030,21 @@ $trade-tab--arrow-size: 0.4rem;
max-width: 14rem;
overflow: scroll;
}
+
.account-limits-status {
// width: 6rem;
padding: 0.25rem 0.5rem;
}
+
.account-limits-value {
padding: 0.25rem 1rem;
}
+
.limit-head-currency {
font-weight: normal !important;
padding: 0.25rem 0.5rem;
}
+
.limit-head {
font-weight: normal !important;
padding: 0.25rem 1rem;
@@ -761,6 +1055,7 @@ $trade-tab--arrow-size: 0.4rem;
.market-coin {
width: 3rem;
}
+
.price-diff-down {
color: $sell;
}
@@ -799,12 +1094,15 @@ $trade-tab--arrow-size: 0.4rem;
&.verified {
color: $colors-notifications-green;
}
+
&.pending {
color: $colors-notification-pending;
}
+
&.incompleted {
color: $colors-notification-pending;
}
+
&.rejected {
color: $colors-notifications-red;
}
@@ -816,11 +1114,13 @@ $trade-tab--arrow-size: 0.4rem;
.summary-block-secondaryTitle {
font-size: 1.8rem;
}
+
.summary-content-txt {
font-size: 1.3rem !important;
}
}
}
+
@media (min-width: 1920px) {
.summary-container {
width: $content-display-width !important;
@@ -844,18 +1144,22 @@ $trade-tab--arrow-size: 0.4rem;
.assets-wrapper {
font-size: 1rem;
}
+
.trader-account-wrapper {
font-size: 1rem;
width: 35% !important;
}
+
.trading-volume-wrapper,
.requirement-wrapper {
width: 65% !important;
}
+
// .summary-section_1 {
- // height: 31rem !important;
+ // height: 31rem !important;
// }
}
+
.fee-limits-wrapper .content-txt {
font-size: 1rem;
}
@@ -866,18 +1170,22 @@ $trade-tab--arrow-size: 0.4rem;
.summary-content-txt {
font-size: 0.9rem;
}
+
.assets-wrapper,
.trader-account-wrapper {
font-size: 0.9rem;
}
+
// .summary-section_1 {
// height: 31rem !important;
// }
}
+
.fee-limits-wrapper .content-txt {
font-size: 0.9rem;
}
}
+
// @media screen and (max-width: 960px) {
// .summary-container {
// .summary-section_1 {
diff --git a/web/src/containers/Summary/components/AccountAssets.js b/web/src/containers/Summary/components/AccountAssets.js
index 6460946ab9..db27d32168 100644
--- a/web/src/containers/Summary/components/AccountAssets.js
+++ b/web/src/containers/Summary/components/AccountAssets.js
@@ -55,7 +55,7 @@ const AccountAssets = ({ chartData = [], totalAssets, balance, coins }) => {
return (
-
+
{STRINGS['SUMMARY.ACCOUNT_ASSETS_TXT_1']}
@@ -67,6 +67,15 @@ const AccountAssets = ({ chartData = [], totalAssets, balance, coins }) => {
+
+
+
+
+ {STRINGS['VOLUME.TRADE_DESCRIPTION']}
+
+
+
+
{SHOW_SUMMARY_ACCOUNT_DETAILS ? (
diff --git a/web/src/containers/Summary/components/TraderAccounts.js b/web/src/containers/Summary/components/TraderAccounts.js
index 19789d8ea0..b7c9b088af 100644
--- a/web/src/containers/Summary/components/TraderAccounts.js
+++ b/web/src/containers/Summary/components/TraderAccounts.js
@@ -180,6 +180,26 @@ const TraderAccounts = ({
)}
+
+ {isLoggedIn() && (
+
+
+
+
+
+
+ {STRINGS['VOLUME.TRADE_VOLUME']}
+
+
+
+
+
+ {STRINGS['VOLUME.VIEW_VOLUME']}
+
+
+
+
+ )}
)}
{isAccountDetails && (
diff --git a/web/src/containers/TradeTabs/components/MiniSparkLine.js b/web/src/containers/TradeTabs/components/MiniSparkLine.js
index 7bda20e3db..77b4e3c848 100644
--- a/web/src/containers/TradeTabs/components/MiniSparkLine.js
+++ b/web/src/containers/TradeTabs/components/MiniSparkLine.js
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
+import { isMobile } from 'react-device-detect';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
@@ -54,7 +55,7 @@ const DEFAULT_CHART_OPTIONS = {
},
};
-export const MiniSparkLine = ({ chartData, isArea }) => {
+export const MiniSparkLine = ({ chartData, isArea, isNewAssets }) => {
const [finalChartData, setFinalChartData] = useState([]);
useEffect(() => {
@@ -84,7 +85,10 @@ export const MiniSparkLine = ({ chartData, isArea }) => {
],
}}
containerProps={{
- style: { height: '100%', width: '100%' },
+ style: {
+ height: isNewAssets ? (isMobile ? '6rem' : '2.5rem') : '100%',
+ width: isNewAssets ? '10rem' : '100%',
+ },
}}
/>
);
diff --git a/web/src/containers/TradeTabs/components/_MarketList.scss b/web/src/containers/TradeTabs/components/_MarketList.scss
index 1f361d19fc..bee802a5da 100644
--- a/web/src/containers/TradeTabs/components/_MarketList.scss
+++ b/web/src/containers/TradeTabs/components/_MarketList.scss
@@ -13,8 +13,10 @@
border-radius: 7px;
animation: mymove 3s infinite;
}
+
thead {
color: $colors-black;
+
& tr {
height: 3.5rem;
vertical-align: bottom;
@@ -30,6 +32,7 @@
background-color: $app-light-background;
color: $colors-black;
}
+
.icon-container {
.squar-box {
width: 15px;
@@ -37,6 +40,7 @@
border: 1px solid;
color: $colors-deactivate-color2;
}
+
.circle-icon {
width: 18px;
height: 18px;
@@ -44,6 +48,7 @@
color: $colors-deactivate-color2;
border-radius: 10px;
}
+
.triangle-icon {
width: 0;
height: 0;
@@ -52,19 +57,24 @@
border-bottom: 15px solid;
}
}
+
.td-chart {
width: 150px;
height: 50px;
+
.highcharts-container {
transform: scale(2, 2);
+
svg {
padding-top: 3px;
+
.highcharts-graph {
stroke-width: 0.6px !important;
}
}
}
}
+
.last-price-label {
color: $colors-main-black;
}
@@ -85,32 +95,39 @@
.td-name {
min-width: 200px !important;
}
+
.table-icon {
& > div {
vertical-align: middle;
margin: auto;
}
}
+
.td-amount {
min-width: 150px !important;
direction: ltr;
}
+
.td-trade {
width: 7rem;
+
.action_notification-wrapper {
right: auto;
top: 1.25rem;
}
}
}
+
.market-list__caret {
span:not(.important-text) {
opacity: 0.3;
}
+
.important-text {
opacity: 0.8;
}
}
+
.view-more-btn {
margin-bottom: 2rem;
}
@@ -126,16 +143,20 @@
vertical-align: middle;
padding: 0.5rem;
}
+
th,
td {
text-align: left;
}
+
.align-opposite {
text-align: right;
}
+
.table-icon {
padding-right: 0.5rem;
}
+
.loading-anime {
height: 20px;
width: 100px;
@@ -155,9 +176,11 @@
td {
text-align: right;
}
+
.align-opposite {
text-align: left;
}
+
.table-icon {
padding-left: 0.5rem;
}
@@ -171,20 +194,25 @@
.market-list__block {
overflow-x: auto;
position: relative;
+
.market-list__block-table {
thead {
font-size: 1.3rem !important;
}
+
.table-row {
td {
padding: 0.5rem;
min-width: 10rem;
}
+
font-size: 1.3rem !important;
+
.td-chart {
min-width: 15rem;
}
}
+
.sticky-col {
position: -webkit-sticky;
position: sticky;
@@ -195,6 +223,7 @@
max-width: 12rem !important;
z-index: 1;
}
+
.loading-anime {
height: 20px;
width: 100px;
@@ -204,33 +233,259 @@
}
}
}
+
.trade_tabs-container {
.sticky-col {
background-color: $app-background-color !important;
}
}
+
.digital-market-wrapper {
- .sticky-col {
- color: $colors-main-black;
- background-color: $app-light-background;
+ .market-wrapper-mobile-view {
+ .mobile-header-content {
+ color: $colors-main-black;
+ text-align: center;
+ font-family: 'Raleway';
+
+ .digital-assets-label {
+ font-size: 24px;
+ text-transform: capitalize;
+ }
+
+ .desc-content {
+ font-size: 12px;
+ }
+ }
}
+ .market-wrapper {
+ .market-button-container {
+ padding: 4% 2%;
+ .trade-tab-search-icon {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ .custom-card-field {
+ width: 8px;
+ height: 8px;
+ border: 1px solid $colors-main-black;
+ border-radius: 100%;
+ }
+
+ .custom-card-field-active {
+ background-color: $colors-main-black;
+ }
+
+ .assets-card-container {
+ width: 100%;
+ position: relative;
+
+ .digital-assets-cards {
+ width: 70%;
+ }
+
+ .nav-area {
+ position: absolute;
+ width: 10% !important;
+ height: 90%;
+ z-index: 1;
+ border-radius: unset !important;
+ }
+
+ .left-nav {
+ left: 0;
+ }
+
+ .right-nav {
+ right: 0;
+ }
+ }
+}
+
+.market-dropdown-style {
+ .app_bar-pair-font {
+ margin-left: 5%;
+ }
+ .ant-dropdown-menu-item-active:hover {
+ background-color: $colors-super-pale-black !important;
+ }
+}
+
+.market-dropdown-mobile {
+ .app_bar-pair-font {
+ font-size: 12px;
}
}
.digital-market-wrapper {
.market-list__block-table {
margin-bottom: 1rem;
+
+ .table-bottom-border td,
+ th {
+ line-height: unset;
+ }
+
+ .font-raleway {
+ font-family: Raleway;
+ }
+
+ thead {
+ color: $colors-black;
+ background-color: $app-light-background;
+
+ & tr {
+ height: 2.5rem !important;
+ vertical-align: bottom;
+ border-bottom: 1px solid $colors-border;
+ }
+
+ th {
+ border-bottom: unset !important;
+ text-wrap: nowrap;
+ padding: 0 0.5rem !important;
+ height: 30px;
+ }
+
+ .market-chart-header {
+ width: 15%;
+ }
+
+ .market-captial-header {
+ width: 15%;
+ }
+
+ .asset-price-header,
+ .asset-percentage {
+ width: 15%;
+ }
+
+ .trade-header {
+ // margin-top: 5%;
+ padding: 15% !important;
+ display: flex;
+ justify-content: center;
+ }
+ }
+
+ .table-row {
+ height: 3.5rem;
+
+ td {
+ text-align: center !important;
+ }
+
+ td:nth-child(1) {
+ text-align: left !important;
+ }
+
+ td:nth-child(3),
+ td:nth-child(4) {
+ text-align: right !important;
+ }
+ }
+
+ tbody {
+ tr {
+ td {
+ .asset-text,
+ .last-price-label {
+ font-weight: bold;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont,
+ 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+ 'Helvetica Neue', sans-serif;
+ }
+
+ .asset-text {
+ text-wrap: nowrap;
+ }
+
+ .price-change,
+ .market-capital {
+ display: flex;
+ justify-content: flex-end !important;
+ }
+ }
+
+ .market-chart {
+ .highcharts-container {
+ .highcharts-root {
+ height: 80%;
+ }
+ }
+ }
+ }
+ }
+
.table-row {
cursor: text !important;
+
&:hover {
background-color: unset !important;
}
+
.sticky-col {
+ width: 15%;
color: $colors-main-black;
cursor: pointer;
+
&:hover {
opacity: 0.5;
}
+
+ .coin-symbol {
+ color: $colors-black;
+ }
+ }
+
+ .td-trade {
+ .market-asset-row,
+ .ant-space {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .action_notification-text {
+ padding: 1px 5px;
+ text-decoration: none !important;
+ width: fit-content !important;
+ border: 1px solid $colors-notifications-blue;
+ border-radius: 3px;
+ text-transform: capitalize;
+ color: $colors-notifications-blue;
+ text-wrap: nowrap;
+ }
+
+ .action_notification-text:hover {
+ background-color: $colors-notifications-blue;
+ color: $colors-main-black;
+ cursor: pointer;
+ }
+ }
+
+ .market-asset-row-disable,
+ .market-asset-row-disable:hover {
+ .action_notification-text {
+ opacity: 0.3;
+ }
+ .action_notification-text:hover {
+ background-color: transparent !important;
+ cursor: text;
+ color: $colors-notifications-blue !important;
+ }
+ }
+
+ .ant-dropdown-open {
+ border-radius: 8px;
+
+ .action_notification-text {
+ background-color: $colors-notifications-blue;
+ color: $colors-main-black !important;
+ cursor: pointer;
+ }
+ }
}
}
}
@@ -241,10 +496,280 @@
font-family: 'Raleway';
font-weight: bold;
}
+
.custom-border-bottom {
border-bottom: 1px solid $colors-main-black;
margin-bottom: 10%;
}
+
+ .market-wrapper {
+ .market-button-container {
+ margin-top: 2%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .market-buttons {
+ width: 35%;
+ display: flex;
+ gap: 5px;
+
+ .opacity-full {
+ opacity: 1;
+ }
+
+ .opacity-half {
+ opacity: 0.4;
+ }
+
+ .market-btn {
+ width: max-content;
+ display: flex;
+ padding: 1% 2%;
+ border: 1px solid $colors-black;
+ border-radius: 5px;
+ align-items: center;
+ }
+
+ .market-btn:hover {
+ cursor: pointer;
+ }
+ }
+
+ .search {
+ width: 20% !important;
+ background-color: $app-light-background;
+ border: 1px solid transparent !important;
+
+ .trade_tabs-search-field {
+ background-color: $app-light-background;
+
+ .field-content {
+ .field-children {
+ input {
+ width: 8rem !important;
+ }
+ }
+ }
+ }
+
+ .open-icon {
+ width: 1.5rem;
+ text-align: center;
+ background-color: $app-background-color;
+ }
+ }
+
+ .search-field-container {
+ width: 32%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 2px;
+ padding: 0.5% 1% 0.5% 0;
+ border: 1px solid $colors-black;
+
+ .trade_tabs-search-field {
+ margin: unset;
+ border-radius: 2px;
+ width: 100%;
+
+ .field-content {
+ width: 100%;
+
+ .field-content-outline:before,
+ .field-content-outline:after {
+ background: unset !important;
+ }
+
+ .field-children {
+ input {
+ width: 15rem;
+ }
+ }
+
+ .clear-field {
+ right: 5px;
+ bottom: 0.6rem;
+ }
+ }
+ }
+ }
+
+ .search:hover {
+ border: 1px solid $colors-black !important;
+ }
+ }
+ }
+
+ .highlight-toggle-button {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-bottom: 2%;
+
+ .highlight-text {
+ color: $colors-main-black;
+ }
+
+ .ant-switch-checked,
+ .ant-switch {
+ border: 2px solid $colors-deactivate-color1;
+ background-color: $app-light-background;
+ .ant-switch-handle {
+ width: 10px;
+ }
+ }
+ .ant-switch-checked {
+ border: 2px solid $colors-main-black !important;
+ .ant-switch-handle {
+ left: calc(100% - 12px) !important;
+ }
+ }
+ .toggle-inactive {
+ .ant-switch-handle::before {
+ background-color: $colors-deactivate-color1;
+ bottom: 3px;
+ }
+ }
+ .toggle-active {
+ .ant-switch-handle::before {
+ background-color: $colors-main-black;
+ bottom: 3px;
+ }
+ }
+ }
+}
+
+.assets-card-container {
+ display: flex;
+ gap: 20px;
+ min-height: 20%;
+
+ .loading-anime {
+ margin-top: 3%;
+ height: 35px;
+ width: 100%;
+ border-radius: 7px;
+ animation: mymove 1s infinite;
+ }
+
+ .ant-card-head-title {
+ padding: unset !important;
+ font-weight: bold;
+ }
+
+ .ant-card-body {
+ padding: 0 12px !important;
+ }
+
+ .gainer-asset-card {
+ border-top: 2px solid $buy !important;
+ }
+
+ .losers-asset-card {
+ border-top: 2px solid $sell !important;
+ }
+
+ .new-asset-card {
+ border-top: 2px solid $colors-black !important;
+ }
+
+ .gainer-icon {
+ margin-top: unset;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ color: $colors-main-black;
+
+ .edit-wrapper__container:nth-child(1) {
+ margin-top: 1%;
+
+ .icon_title-svg {
+ width: 100%;
+ height: 50%;
+
+ svg {
+ width: 100%;
+ height: 50%;
+ }
+ }
+ }
+
+ .edit-wrapper__container:nth-child(2) {
+ .icon_title-text {
+ margin: unset !important;
+ padding-top: unset !important;
+ }
+ }
+ }
+
+ .digital-assets-cards {
+ width: 35%;
+ background-color: $app-sidebar-background;
+ color: $colors-main-black;
+ border: unset;
+ padding: 1%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+
+ .ant-card-head {
+ background-color: $app-sidebar-background;
+ text-align: center;
+ border: unset;
+ }
+
+ .assets-wrapper {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 1%;
+ font-size: 12px !important;
+
+ .asset-container {
+ display: flex;
+ gap: 5px;
+
+ .asset-symbol {
+ color: $colors-black;
+ }
+ }
+
+ .assets-value {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+
+ .gainer-percentage {
+ display: flex;
+ align-items: center;
+ color: $buy;
+ }
+
+ .loser-percentage {
+ color: $sell;
+ }
+ }
+
+ .right-arrow-icon {
+ display: none;
+ }
+ }
+
+ .assets-wrapper:hover {
+ background-color: $colors-super-pale-black;
+ border-radius: 5px;
+ cursor: pointer;
+
+ .right-arrow-icon {
+ display: block;
+ }
+ }
+ }
}
.trade_tabs-container {
@@ -257,7 +782,54 @@
.layout-mobile {
.digital-market-wrapper {
.view-more-btn {
- padding: 10%;
+ padding: 5%;
+ }
+ }
+ }
+}
+
+@media (min-width: 1920px) {
+ .digital-market-wrapper {
+ .market-list__block-table {
+ .table-row {
+ .market-asset-row,
+ .ant-space {
+ .action_notification-text {
+ padding: 5px;
+ }
+ }
+ }
+ }
+
+ .market-wrapper {
+ .market-button-container {
+ .search {
+ width: 15% !important;
+
+ .trade_tabs-search-field {
+ .field-content {
+ .field-children {
+ input {
+ width: 8rem !important;
+ }
+ }
+ }
+ }
+ }
+
+ .search-field-container {
+ width: 23%;
+
+ .trade_tabs-search-field {
+ .field-content {
+ .field-children {
+ input {
+ width: 15rem;
+ }
+ }
+ }
+ }
+ }
}
}
}
diff --git a/web/src/containers/TransactionsHistory/HistoryDisplay.js b/web/src/containers/TransactionsHistory/HistoryDisplay.js
index 811823157b..37a3d70f3d 100644
--- a/web/src/containers/TransactionsHistory/HistoryDisplay.js
+++ b/web/src/containers/TransactionsHistory/HistoryDisplay.js
@@ -106,6 +106,14 @@ const HistoryDisplay = (props) => {
onClick={() => browserHistory.push('wallet/deposit')}
/>
)}
+ {!isMobile && !isDepositFromWallet && (
+ browserHistory.push('wallet/volume')}
+ />
+ )}
{!isMobile && count > 0 && !isFromWallet && (
{
let currentTab = '';
if (this.state.activeTab === 1) {
@@ -398,6 +423,7 @@ class UserSecurity extends Component {
setActiveTab = (activeTab) => {
this.setState({ activeTab });
+ this.props.setSecurityTab(activeTab);
};
/*logout = (message = '') => {
@@ -771,6 +797,7 @@ const mapStateToProps = (state) => ({
...Object.keys(generateFormValues())
),
selectedStep: state.app.selectedStep,
+ getSecurityTab: state.app.selectedSecurityTab,
});
const mapDispatchToProps = (dispatch) => ({
@@ -779,6 +806,7 @@ const mapDispatchToProps = (dispatch) => ({
otpSetActivated: (active) => dispatch(otpSetActivated(active)),
openContactForm: bindActionCreators(openContactForm, dispatch),
setSelectedStep: bindActionCreators(setSelectedStep, dispatch),
+ setSecurityTab: bindActionCreators(setSecurityTab, dispatch),
});
export default connect(
diff --git a/web/src/containers/UserSettings/SettingsForm.js b/web/src/containers/UserSettings/SettingsForm.js
index f665621135..42556cafe8 100644
--- a/web/src/containers/UserSettings/SettingsForm.js
+++ b/web/src/containers/UserSettings/SettingsForm.js
@@ -16,7 +16,7 @@ const orderbook_level_step = 1;
const orderbook_level_min = 1;
const orderbook_level_max = 20;
-export const generateFormValues = ({ options = [] }) => ({
+export const generateFormValues = ({ options = [], currencyOptions = [] }) => ({
theme: {
type: 'select',
stringId: 'SETTINGS_THEME_LABEL',
@@ -24,6 +24,14 @@ export const generateFormValues = ({ options = [] }) => ({
options,
ishorizontalfield: true,
},
+ display_currency: {
+ type: 'select',
+ stringId: 'CUSTOM_NATIVE_CURRENCY',
+ label: STRINGS['CUSTOM_NATIVE_CURRENCY'],
+ options: currencyOptions,
+ ishorizontalfield: true,
+ placeholder: STRINGS['CUSTOM_NATIVE_CURRENCY'],
+ },
order_book_levels: {
type: 'number',
stringId: 'USER_SETTINGS.ORDERBOOK_LEVEL',
diff --git a/web/src/containers/UserSettings/index.js b/web/src/containers/UserSettings/index.js
index 9015bed9fd..ef3a1c4f44 100644
--- a/web/src/containers/UserSettings/index.js
+++ b/web/src/containers/UserSettings/index.js
@@ -11,6 +11,7 @@ import {
openContactForm,
openRiskPortfolioOrderWarning,
closeNotification,
+ setSettingsTab,
} from 'actions/appActions';
import { logout } from 'actions/authAction';
import {
@@ -62,26 +63,31 @@ class UserSettings extends Component {
}
if (window.location.search && window.location.search.includes('signals')) {
this.setState({ activeTab: 0 });
+ this.props.setSettingsTab(0);
} else if (
window.location.search &&
window.location.search.includes('interface')
) {
this.setState({ activeTab: 1 });
+ this.props.setSettingsTab(1);
} else if (
window.location.search &&
window.location.search.includes('language')
) {
this.setState({ activeTab: 2 });
+ this.props.setSettingsTab(2);
} else if (
window.location.search &&
window.location.search.includes('audioCue')
) {
this.setState({ activeTab: 3 });
+ this.props.setSettingsTab(3);
} else if (
window.location.search &&
window.location.search.includes('account')
) {
this.setState({ activeTab: 4 });
+ this.props.setSettingsTab(4);
}
this.openCurrentTab();
}
@@ -120,6 +126,11 @@ class UserSettings extends Component {
}
componentDidUpdate(prevProps, prevState) {
+ if (this.props.getSettingsTab !== this.state.activeTab) {
+ this.setState({
+ activeTab: this.props.getSettingsTab,
+ });
+ }
if (
JSON.stringify(prevState.activeTab) !==
JSON.stringify(this.state.activeTab)
@@ -128,6 +139,10 @@ class UserSettings extends Component {
}
}
+ componentWillUnmount() {
+ setSettingsTab(0);
+ }
+
openCurrentTab = () => {
let currentTab = '';
if (this.state.activeTab === 0) {
@@ -156,9 +171,18 @@ class UserSettings extends Component {
{ activeLanguage = '', username = '', settings = {}, coins = {} },
activeTab
) => {
- const { constants = {}, icons: ICONS, themeOptions } = this.props;
+ const {
+ constants = {},
+ icons: ICONS,
+ themeOptions,
+ selectable_native_currencies,
+ } = this.props;
const formValues = generateFormValues({
- options: themeOptions.map(({ value }) => ({ value, label: value })),
+ options: themeOptions?.map(({ value }) => ({ value, label: value })),
+ currencyOptions: selectable_native_currencies?.map((value) => ({
+ value,
+ label: value,
+ })),
});
const usernameFormValues = generateUsernameFormValues(
settings.chat.set_username
@@ -375,6 +399,15 @@ class UserSettings extends Component {
this.props.changeTheme(data.settings.interface.theme);
localStorage.setItem('theme', data.settings.interface.theme);
}
+ if (
+ data.settings.interface &&
+ data.settings.interface.display_currency
+ ) {
+ localStorage.setItem(
+ 'base_currnecy',
+ data.settings.interface.display_currency
+ );
+ }
}
this.props.closeNotification();
})
@@ -408,6 +441,7 @@ class UserSettings extends Component {
setActiveTab = (activeTab) => {
this.setState({ activeTab });
+ this.props.setSettingsTab(activeTab);
if (this.props.location.query && this.props.location.query.tab) {
this.removeQueryString();
}
@@ -499,6 +533,9 @@ const mapStateToProps = (state) => ({
//orders: state.order.activeOrders,
constants: state.app.constants,
features: state.app.features,
+ selectable_native_currencies:
+ state.app.constants.selectable_native_currencies,
+ getSettingsTab: state.app.selectedSettingsTab,
});
const mapDispatchToProps = (dispatch) => ({
@@ -513,6 +550,7 @@ const mapDispatchToProps = (dispatch) => ({
),
closeNotification: bindActionCreators(closeNotification, dispatch),
logout: bindActionCreators(logout, dispatch),
+ setSettingsTab: bindActionCreators(setSettingsTab, dispatch),
});
export default connect(
diff --git a/web/src/containers/Verification/index.js b/web/src/containers/Verification/index.js
index fac5de43a4..0e0a96cf8c 100644
--- a/web/src/containers/Verification/index.js
+++ b/web/src/containers/Verification/index.js
@@ -63,6 +63,7 @@ class Verification extends Component {
router: {
location: { search, query },
},
+ getVerificationTab,
} = this.props;
if (user) {
@@ -85,6 +86,9 @@ class Verification extends Component {
if (initial_tab !== -1) {
this.setState({ activeTab: initial_tab }, this.openCurrentTab);
}
+ if (getVerificationTab) {
+ this.setState({ activeTab: getVerificationTab });
+ }
});
}
}
@@ -776,6 +780,7 @@ const mapStateToProps = (state) => {
constants: state.app.constants,
remoteTabs,
availableRemotePlugins,
+ getVerificationTab: state.app.selectedVerificationTab,
};
};
diff --git a/web/src/containers/Volume/_Volume.scss b/web/src/containers/Volume/_Volume.scss
new file mode 100644
index 0000000000..fab0828731
--- /dev/null
+++ b/web/src/containers/Volume/_Volume.scss
@@ -0,0 +1,172 @@
+.volume-wrapper {
+ margin: 1rem auto 5rem auto !important;
+ .title-wrapper {
+ display: flex;
+ margin-top: 5%;
+ gap: 1%;
+ text-transform: capitalize;
+
+ .volume-label {
+ font-size: 2.25rem;
+ position: relative;
+ top: 25px;
+ }
+ }
+
+ .custom-line {
+ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics);
+ }
+
+ .header-wrapper {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1%;
+ margin-bottom: 2%;
+
+ .link-label {
+ display: flex;
+ gap: 5px;
+ }
+ }
+
+ .volume-cards-empty-wrapper {
+ margin-top: 5% !important;
+ font-size: 14px;
+ .volume-option-icon {
+ svg {
+ width: 2.5rem;
+ height: 5%;
+ path {
+ fill: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+ }
+
+ .volume-cards-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 2%;
+ gap: 1%;
+
+ .custom-line-inactive-one,
+ .custom-line-inactive-two,
+ .custom-line-inactive-three,
+ .custom-line-inactive-active {
+ height: 2px;
+ background-color: var(
+ --labels_important-active-labels-text-graphics
+ ) !important;
+ opacity: 0.25;
+ }
+
+ .custom-line-inactive-two {
+ opacity: 0.5;
+ }
+
+ .custom-line-inactive-three {
+ opacity: 0.75;
+ }
+ .custom-line-inactive-active {
+ opacity: 1;
+ }
+
+ .card-content-wrapper {
+ width: 25%;
+ // border-top: 2px solid var(--labels_important-active-labels-text-graphics);
+ background-color: var(--base_wallet-sidebar-and-popup);
+ border-radius: 5px;
+
+ .card-wrapper {
+ text-align: center;
+ padding: 15%;
+ background-color: var(--base_secondary-navigation-bar);
+
+ .assets-price {
+ text-wrap: nowrap;
+ font-family: 'Raleway';
+ }
+ }
+
+ .card-content {
+ padding: 5%;
+ min-height: 16rem;
+
+ .assets-content-wrapper {
+ display: flex;
+ justify-content: space-between;
+
+ .asset-name,
+ .asset-price-container {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+
+ .currency-price {
+ display: flex;
+ justify-content: flex-end;
+ gap: 3px;
+ }
+ }
+
+ .more-icon {
+ svg {
+ width: 2rem;
+ height: 2rem;
+ fill: var(--labels_secondary-inactive-label-text-graphics);
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.layout-mobile {
+ .volume-wrapper {
+ padding: 5%;
+ overflow-x: hidden;
+ font-size: 12px;
+ margin: 0 auto !important;
+
+ .title-wrapper {
+ margin-top: unset;
+ align-items: center;
+ justify-content: center;
+
+ .volume-label {
+ top: 8px;
+ }
+ }
+
+ .volume-cards-empty-wrapper {
+ margin-top: 10% !important;
+ .volume-option-icon {
+ svg {
+ width: 3.5rem;
+ }
+ }
+ }
+
+ .volume-cards-wrapper {
+ margin: 5% 0;
+ flex-direction: column;
+ gap: 10px;
+ .card-wrapper {
+ padding: 10%;
+ }
+ .card-content-wrapper {
+ width: 80%;
+ }
+ .assets-content-wrapper {
+ .more-icon {
+ svg {
+ width: 3rem !important;
+ height: 3rem !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/web/src/containers/Volume/actions/volumeActions.js b/web/src/containers/Volume/actions/volumeActions.js
new file mode 100644
index 0000000000..9ef59b9059
--- /dev/null
+++ b/web/src/containers/Volume/actions/volumeActions.js
@@ -0,0 +1,8 @@
+import querystring from 'query-string';
+import { requestAuthenticated } from 'utils';
+
+export const fetchUserVolume = (values) => {
+ const queryValues =
+ values && Object.keys(values).length ? querystring.stringify(values) : '';
+ return requestAuthenticated(`/user/trading-volume?${queryValues}`);
+};
diff --git a/web/src/containers/Volume/index.js b/web/src/containers/Volume/index.js
new file mode 100644
index 0000000000..28e2076ee3
--- /dev/null
+++ b/web/src/containers/Volume/index.js
@@ -0,0 +1,381 @@
+import React, { useState, useEffect } from 'react';
+import { browserHistory } from 'react-router';
+import { connect } from 'react-redux';
+import { isMobile } from 'react-device-detect';
+import { Dropdown, Menu, Spin } from 'antd';
+import { MoreOutlined } from '@ant-design/icons';
+import BigNumber from 'bignumber.js';
+
+import './_Volume.scss';
+import withConfig from 'components/ConfigProvider/withConfig';
+import STRINGS from 'config/localizedStrings';
+import icons from 'config/icons/dark';
+import { EditWrapper, CheckTitle, Coin, Image } from 'components';
+import { fetchUserVolume } from './actions/volumeActions';
+import { getAllAvailableMarkets, goToTrade } from 'containers/Wallet/utils';
+import { MarketsSelector } from 'containers/Trade/utils';
+
+const Volume = ({
+ coins,
+ icons: ICONS,
+ router,
+ pairs,
+ features,
+ quicktrade,
+ favourites,
+ nativeCurrency,
+ getMarkets,
+ pair,
+}) => {
+ const [isLoading, setIsLoading] = useState(false);
+ const [volumeData, setVolumeData] = useState([]);
+ const [volumeNativeData, setVolumeNativeData] = useState([]);
+ const [isEmptyData, setIsEmptyData] = useState({
+ oneDay: 0,
+ sevenDays: 0,
+ thirtyDays: 0,
+ ninetyDays: 0,
+ });
+
+ useEffect(() => {
+ fetchVolumeData();
+ }, []);
+
+ useEffect(() => {
+ Object.keys(volumeData).map((key) =>
+ setIsEmptyData((prev) => ({
+ ...prev,
+ oneDay: key === '1' ? volumeData[key]?.length : 1,
+ sevenDays: key === '7' ? volumeData[key]?.length : 1,
+ thirtyDays: key === '30' ? volumeData[key]?.length : 1,
+ ninetyDays: key === '90' ? volumeData[key]?.length : 1,
+ }))
+ );
+ }, [volumeData]);
+
+ const fetchVolumeData = async () => {
+ try {
+ setIsLoading(true);
+ const data = await fetchUserVolume();
+ setVolumeData(data.volume);
+ setVolumeNativeData(data.volumeNative);
+ setIsLoading(false);
+ } catch (error) {
+ setIsLoading(false);
+ return error;
+ }
+ };
+
+ const formatVolumeCurrency = (currency, amount) => {
+ const incrementUnit = coins[currency].increment_unit;
+
+ const decimalPoint = new BigNumber(incrementUnit).dp();
+ const sourceAmount = new BigNumber(amount)
+ .decimalPlaces(decimalPoint)
+ .toNumber();
+ return sourceAmount;
+ };
+
+ const onHandleVolume = () => {
+ if (features?.pro_trade) {
+ browserHistory.push(
+ favourites && favourites?.length
+ ? `/trade/${favourites[0]}`
+ : `/trade/${getMarkets[0]?.key}`
+ );
+ } else if (features?.quick_trade) {
+ browserHistory.push(`/quick-trade/${pair}`);
+ } else {
+ browserHistory.push('/prices');
+ }
+ };
+
+ const hasEmptyVolume =
+ isEmptyData?.oneDay === 1 &&
+ isEmptyData?.sevenDays === 1 &&
+ isEmptyData?.thirtyDays === 1 &&
+ isEmptyData?.ninetyDays === 1;
+
+ return (
+
+
+
+
+ {' '}
+
+
+
+
+ {STRINGS['VOLUME.VOLUME']}
+
+
+
+
+
+
{
+ router.goBack();
+ }}
+ className="blue-link pointer"
+ >
+ {`<`}
+
+
+ {STRINGS['VOLUME.BACK']}
+
+
+
+
+
{
+ router.push('/trade');
+ }}
+ className="blue-link pointer"
+ >
+
+
+ {STRINGS['VOLUME.MARKETS']}
+
+
+
+
|
+
{
+ router.push('/quick-trade');
+ }}
+ className="blue-link pointer"
+ >
+
+
+ {STRINGS['VOLUME.CONVERT']}
+
+
+
+
|
+
{
+ router.push('/transactions?tab=trades');
+ }}
+ className="blue-link pointer"
+ >
+
+
+ {STRINGS['VOLUME.HISTORY']}
+
+
+
+
+
+
+
+ {STRINGS['VOLUME.TRADING_VOLUME']}
+
+
+
+
+ {STRINGS['VOLUME.VOLUME_DECS']}
+
+
+
+ {hasEmptyVolume ? (
+
+
+
+
+ {STRINGS['VOLUME.NO_DATA_DESC_1']}
+ {' '}
+
+ onHandleVolume()}
+ >
+ {STRINGS['VOLUME.NO_DATA_DESC_2']}
+
+ {' '}
+
+ {STRINGS['VOLUME.NO_DATA_DESC_3']}
+
+
+
+ ) : (
+ Object.keys(volumeData).map((key) => {
+ if (volumeData[key]?.length > 1) {
+ return (
+
+
+
+
+ {key === '1' ? (
+
+ {STRINGS['VOLUME.HOUR_VOLUME']}
+
+ ) : (
+
+ {key}-{STRINGS['VOLUME.DAY_VOLUME']}
+
+ )}
+
+
+ {formatVolumeCurrency(
+ nativeCurrency,
+ volumeData[key].find((x) => x.total).total
+ )}{' '}
+ {nativeCurrency?.toUpperCase()}
+
+
+ (
+
+ {STRINGS['VOLUME.ALL_ASSETS']}
+
+ )
+
+
+
+
+
+ {STRINGS.formatString(
+ STRINGS['VOLUME.TOP'],
+ key,
+ STRINGS['VOLUME.VOL_ASSET']
+ )}
+
+
+
+ {volumeData[key].map((data) => {
+ const iconKey = Object.keys(data);
+ const market = getAllAvailableMarkets(
+ iconKey[0],
+ quicktrade
+ );
+ if (!data.total) {
+ return (
+
+
+
+
+
+ {coins?.[iconKey].fullname}
+
+
+ {coins?.[iconKey].symbol?.toUpperCase()}
+
+
+
+
+
+
+
+ {formatVolumeCurrency(
+ nativeCurrency,
+ data[iconKey]
+ )}
+
+ {nativeCurrency?.toUpperCase()}
+
+
+
+ (
+ {formatVolumeCurrency(
+ iconKey[0],
+ volumeNativeData?.[key]?.[iconKey]
+ )}
+
+
+ {coins?.[iconKey].symbol?.toUpperCase()})
+
+
+
+
+ goToTrade(key, quicktrade)
+ }
+ >
+ {market.map((market) => {
+ const { display_name, icon_id } =
+ pairs[market] ||
+ quicktrade.find(
+ ({ symbol }) => symbol === market
+ ) ||
+ {};
+ return (
+
+
+
+ );
+ })}
+
+ }
+ >
+
+
+
+
+ );
+ }
+ return <>>;
+ })}
+
+
+ );
+ }
+ return <>>;
+ })
+ )}
+
+
+
+ );
+};
+
+const mapStateToProps = (state) => ({
+ coins: state.app.coins,
+ balances: state.user.balance,
+ pricesInNative: state.asset.oraclePrices,
+ quicktrade: state.app.quicktrade,
+ pairs: state.app.pairs,
+ nativeCurrency: state.app.constants.native_currency,
+ features: state.app.features,
+ favourites: state.app.favourites,
+ getMarkets: MarketsSelector(state),
+ pair: state.app.pair,
+});
+
+export default connect(mapStateToProps)(withConfig(Volume));
diff --git a/web/src/containers/Wallet/AddressBook.js b/web/src/containers/Wallet/AddressBook.js
index 276cab36db..47fe4f36f6 100644
--- a/web/src/containers/Wallet/AddressBook.js
+++ b/web/src/containers/Wallet/AddressBook.js
@@ -284,18 +284,27 @@ const AddressBook = ({
network: selectedNetwork,
currency: selectedAsset?.selectedCurrency,
};
+ const hasAddress = getUserData?.some(
+ (val) =>
+ val?.currency === selectedAsset?.selectedCurrency &&
+ val?.network === selectedNetwork &&
+ val?.address === address
+ );
+
const restGetUserData = removeCreatedAt(getUserData);
- setGetUserData([
- { ...currValue, created_at: new Date().toISOString() },
- ...getUserData,
- ]);
+ if (!hasAddress) {
+ setGetUserData([
+ { ...currValue, created_at: new Date().toISOString() },
+ ...getUserData,
+ ]);
- try {
- await setUserLabelAndAddress({
- addresses: [currValue, ...restGetUserData],
- });
- } catch (error) {
- console.error(error);
+ try {
+ await setUserLabelAndAddress({
+ addresses: [currValue, ...restGetUserData],
+ });
+ } catch (error) {
+ console.error(error);
+ }
}
}
diff --git a/web/src/containers/Wallet/AssetsBlock.js b/web/src/containers/Wallet/AssetsBlock.js
index b17d186629..56ccfc268e 100644
--- a/web/src/containers/Wallet/AssetsBlock.js
+++ b/web/src/containers/Wallet/AssetsBlock.js
@@ -41,7 +41,7 @@ import {
CURRENCY_PRICE_FORMAT,
DEFAULT_COIN_DATA,
} from 'config/constants';
-import { unique } from 'utils/data';
+import { getAllAvailableMarkets, goToTrade } from './utils';
import withConfig from 'components/ConfigProvider/withConfig';
import TradeInputGroup from './components/TradeInputGroup';
import DustSection from './DustSection';
@@ -234,62 +234,6 @@ const AssetsBlock = ({
);
- const isMarketAvailable = (pair) => {
- return pair && pairs[pair] && pairs[pair].active;
- };
-
- const findPair = (key, field) => {
- const availableMarketsArray = [];
-
- Object.entries(pairs).map(([pairKey, pairObject]) => {
- if (
- pairObject &&
- pairObject[field] === key &&
- isMarketAvailable(pairKey)
- ) {
- availableMarketsArray.push(pairKey);
- }
-
- return pairKey;
- });
-
- return availableMarketsArray;
- };
-
- const goToTrade = (pair) => {
- const flippedPair = getFlippedPair(pair);
- const isQuickTrade = !!quicktrade.filter(
- ({ symbol, active, type }) =>
- !!active &&
- type !== 'pro' &&
- (symbol === pair || symbol === flippedPair)
- ).length;
- if (pair && isQuickTrade) {
- return navigate(`/quick-trade/${pair}`);
- } else if (pair && !isQuickTrade) {
- return navigate(`/trade/${pair}`);
- }
- };
-
- const getFlippedPair = (pair) => {
- let flippedPair = pair.split('-');
- flippedPair.reverse().join('-');
- return flippedPair;
- };
-
- const getAllAvailableMarkets = (key) => {
- const quickTrade = quicktrade
- .filter(({ symbol = '', active }) => {
- const [base, to] = symbol.split('-');
- return active && (base === key || to === key);
- })
- .map(({ symbol }) => symbol);
-
- const trade = [...findPair(key, 'pair_base'), ...findPair(key, 'pair_2')];
-
- return unique([...quickTrade, ...trade]);
- };
-
const onHandleClose = () => {
setIsSearchActive(false);
handleSearch();
@@ -662,7 +606,7 @@ const AssetsBlock = ({
],
index
) => {
- const markets = getAllAvailableMarkets(key);
+ const markets = getAllAvailableMarkets(key, quicktrade);
const baseCoin = coins[BASE_CURRENCY] || DEFAULT_COIN_DATA;
const balanceText =
key === BASE_CURRENCY
@@ -737,7 +681,11 @@ const AssetsBlock = ({
width: 130,
}}
overlay={
-
goToTrade(key)}>
+
+ goToTrade(key, quicktrade)
+ }
+ >
{markets.map((market) => {
const { display_name, icon_id } =
pairs[market] ||
@@ -770,7 +718,7 @@ const AssetsBlock = ({
{key !== BASE_CURRENCY &&
parseFloat(balanceText || 0) > 0 && (
- {`(≈ $${balanceText})`}
+ {`(≈ ${balanceText})`}
)}
@@ -860,7 +808,7 @@ const AssetsBlock = ({
text={STRINGS['TRADE_TAB_TRADE']}
iconId="BLUE_TRADE_ICON"
iconPath={ICONS['BLUE_TRADE_ICON']}
- onClick={() => goToTrade(markets[0])}
+ onClick={() => goToTrade(markets[0], quicktrade)}
className="csv-action"
showActionText={isMobile}
disable={markets.length === 0}
diff --git a/web/src/containers/Wallet/HeaderSection.js b/web/src/containers/Wallet/HeaderSection.js
index 1e87608fcb..36620fb05f 100644
--- a/web/src/containers/Wallet/HeaderSection.js
+++ b/web/src/containers/Wallet/HeaderSection.js
@@ -42,6 +42,13 @@ const HeaderSection = ({ icons: ICONS, setDepositAndWithdraw }) => {
+
+
+
+ {STRINGS['VOLUME.VOLUME']}
+
+
+
diff --git a/web/src/containers/Wallet/MainWallet.js b/web/src/containers/Wallet/MainWallet.js
index 66189f87fd..cadcfec4ea 100644
--- a/web/src/containers/Wallet/MainWallet.js
+++ b/web/src/containers/Wallet/MainWallet.js
@@ -95,7 +95,13 @@ class Wallet extends Component {
}
componentDidUpdate(_, prevState) {
- const { searchValue, isZeroBalanceHidden, showDustSection } = this.state;
+ const {
+ searchValue,
+ isZeroBalanceHidden,
+ showDustSection,
+ activeBalanceHistory,
+ } = this.state;
+ const { getActiveBalanceHistory } = this.props;
if (
searchValue !== prevState.searchValue ||
isZeroBalanceHidden !== prevState.isZeroBalanceHidden ||
@@ -117,6 +123,9 @@ class Wallet extends Component {
this.props.assets
);
}
+ if (getActiveBalanceHistory !== activeBalanceHistory) {
+ this.setState({ activeBalanceHistory: getActiveBalanceHistory });
+ }
}
getMobileSlider = (coins, oraclePrices) => {
@@ -386,6 +395,7 @@ const mapStateToProps = (store) => ({
isFetching: store.asset.isFetching,
contracts: store.app.contracts,
assets: assetsSelector(store),
+ getActiveBalanceHistory: store.wallet.activeBalanceHistory,
});
const mapDispatchToProps = (dispatch) => ({
diff --git a/web/src/containers/Wallet/ProfitLossSection.js b/web/src/containers/Wallet/ProfitLossSection.js
index 424c7c66c2..76fa14da5f 100644
--- a/web/src/containers/Wallet/ProfitLossSection.js
+++ b/web/src/containers/Wallet/ProfitLossSection.js
@@ -15,7 +15,7 @@ import { CloseOutlined } from '@ant-design/icons';
import './_ProfitLoss.scss';
import { isMobile } from 'react-device-detect';
import { BASE_CURRENCY, DEFAULT_COIN_DATA } from 'config/constants';
-import { assetsSelector } from './utils';
+import { sortedAssetsSelector } from './utils';
import {
calculateOraclePrice,
formatCurrencyByIncrementalUnit,
@@ -1261,7 +1261,7 @@ const mapStateToProps = (state) => ({
dust: state.app.constants.dust,
balance_history_config: state.app.constants.balance_history_config,
chartData: state.asset.chartData,
- assets: assetsSelector(state),
+ assets: sortedAssetsSelector(state),
quickTrade: state.app.quickTrade,
});
diff --git a/web/src/containers/Wallet/_AddressBook.scss b/web/src/containers/Wallet/_AddressBook.scss
index 94869b5453..ec5b68753e 100644
--- a/web/src/containers/Wallet/_AddressBook.scss
+++ b/web/src/containers/Wallet/_AddressBook.scss
@@ -207,7 +207,7 @@
}
.address-book-popup-wrapper {
- width: 45rem !important;
+ width: 55rem !important;
}
.address-book-popup-wrapper,
@@ -307,12 +307,13 @@
}
.select-field {
- width: 90%;
+ width: 100%;
height: 35%;
display: flex;
justify-content: space-between;
.asset-input {
+ width: 75%;
.selected-asset-btn {
width: 95%;
}
@@ -326,7 +327,7 @@
.select-field,
.network-field {
.network-input {
- width: 60%;
+ width: 75%;
}
.opacity-100 {
@@ -342,7 +343,7 @@
padding: 0.5%;
border-radius: 5px;
margin-right: 10px;
- width: 4.5rem;
+ width: 7.5rem;
display: flex;
align-items: center;
justify-content: center;
@@ -541,7 +542,7 @@
.add_withdrawal_address_wrapper {
.ReactModal__Content {
- width: 50rem;
+ width: 60rem;
}
}
@@ -631,7 +632,8 @@
width: 22%;
}
- .network-input {
+ .network-input,
+ .asset-input {
width: 100%;
}
}
diff --git a/web/src/containers/Wallet/components/TradeInputGroup.js b/web/src/containers/Wallet/components/TradeInputGroup.js
index aead759b22..46f55c839c 100644
--- a/web/src/containers/Wallet/components/TradeInputGroup.js
+++ b/web/src/containers/Wallet/components/TradeInputGroup.js
@@ -13,16 +13,24 @@ const TradeInputGroup = ({
icons: ICONS,
pairs,
tradeClassName,
+ hasTrigger,
}) => {
return (
goToTrade(key)}>
+ goToTrade(key, quicktrade)}>
{markets.map((market) => {
const { display_name, icon_id } =
pairs[market] ||
@@ -43,9 +51,23 @@ const TradeInputGroup = ({
/,
+ {STRINGS['SIDES.SELL']}
+ )
+ }
+ iconId={
+ tradeClassName !== 'market-asset-row' ? 'BLUE_TRADE_ICON' : ''
+ }
+ iconPath={
+ tradeClassName !== 'market-asset-row'
+ ? ICONS['BLUE_TRADE_ICON']
+ : ''
+ }
className="csv-action"
showActionText={isMobile}
disable={markets.length === 0}
diff --git a/web/src/containers/Wallet/utils.js b/web/src/containers/Wallet/utils.js
index d569ceb6c5..99ee978b07 100644
--- a/web/src/containers/Wallet/utils.js
+++ b/web/src/containers/Wallet/utils.js
@@ -1,4 +1,5 @@
import React from 'react';
+import { browserHistory } from 'react-router';
import { Button } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { createSelector } from 'reselect';
@@ -11,14 +12,66 @@ import { calculateOraclePrice } from 'utils/currency';
import { WALLET_SORT } from 'actions/appActions';
import { Image } from 'hollaex-web-lib';
import { networkList, renderNetworkWithLabel } from 'containers/Withdraw/utils';
+import { unique } from 'utils/data';
const getCoins = (state) => state.app.coins;
const getBalances = (state) => state.user.balance;
const getOraclePrices = (state) => state.asset.oraclePrices;
const getSortMode = (state) => state.app.wallet_sort.mode;
const getSortDir = (state) => state.app.wallet_sort.is_descending;
+const pairs = (state) => state.app.pairs;
export const getPinnedAssets = (state) => state.app.pinned_assets;
+export const goToTrade = (pair, quicktrade) => {
+ const flippedPair = getFlippedPair(pair);
+ const isQuickTrade = !!quicktrade.filter(
+ ({ symbol, active, type }) =>
+ !!active && type !== 'pro' && (symbol === pair || symbol === flippedPair)
+ ).length;
+ if (pair && isQuickTrade) {
+ return browserHistory.push(`/quick-trade/${pair}`);
+ } else if (pair && !isQuickTrade) {
+ return browserHistory.push(`/trade/${pair}`);
+ }
+};
+
+const getFlippedPair = (pair) => {
+ let flippedPair = pair.split('-');
+ flippedPair.reverse().join('-');
+ return flippedPair;
+};
+
+const isMarketAvailable = (pair) => {
+ return pair && pairs[pair] && pairs[pair].active;
+};
+
+const findPair = (key, field) => {
+ const availableMarketsArray = [];
+
+ Object.entries(pairs).map(([pairKey, pairObject]) => {
+ if (pairObject && pairObject[field] === key && isMarketAvailable(pairKey)) {
+ availableMarketsArray.push(pairKey);
+ }
+
+ return pairKey;
+ });
+
+ return availableMarketsArray;
+};
+
+export const getAllAvailableMarkets = (key, quicktrade) => {
+ const quickTrade = quicktrade
+ ?.filter(({ symbol = '', active }) => {
+ const [base, to] = symbol.split('-');
+ return active && (base === key || to === key);
+ })
+ ?.map(({ symbol }) => symbol);
+
+ const trade = [...findPair(key, 'pair_base'), ...findPair(key, 'pair_2')];
+
+ return unique([...quickTrade, ...trade]);
+};
+
export const selectAssetOptions = createSelector([getCoins], (coins) => {
const assets = Object.entries(coins).map(([key, { symbol, fullname }]) => {
return {
diff --git a/web/src/containers/Withdraw/QRScanner.js b/web/src/containers/Withdraw/QRScanner.js
index a6f2b7d3c4..3bc7b90538 100644
--- a/web/src/containers/Withdraw/QRScanner.js
+++ b/web/src/containers/Withdraw/QRScanner.js
@@ -1,10 +1,14 @@
import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
import { isMobile } from 'react-device-detect';
import BarcodeScannerComponent from 'react-qr-barcode-scanner';
-import { Button, EditWrapper } from 'components';
+
import STRINGS from 'config/localizedStrings';
+import { Button, EditWrapper } from 'components';
+import { setScannedAddress } from 'actions/walletActions';
-const QRScanner = ({ closeQRScanner, getQRData }) => {
+const QRScanner = ({ closeQRScanner, getQRData, setScannedAddress }) => {
const [result, setResult] = useState(STRINGS['QR_CODE.NO_RESULT']);
const [error, setError] = useState();
const [stopStream, setStopStream] = useState(false);
@@ -14,10 +18,12 @@ const QRScanner = ({ closeQRScanner, getQRData }) => {
const { text } = data;
setStopStream(true);
setResult(text);
+ setScannedAddress(text);
getQRData(text);
setTimeout(closeQRScanner, 2000);
} else {
setResult(STRINGS['QR_CODE.NOT_FOUND']);
+ setScannedAddress(STRINGS['QR_CODE.NOT_FOUND']);
}
};
@@ -58,4 +64,8 @@ const QRScanner = ({ closeQRScanner, getQRData }) => {
);
};
-export default QRScanner;
+const mapDispatchToProps = (dispatch) => ({
+ setScannedAddress: bindActionCreators(setScannedAddress, dispatch),
+});
+
+export default connect('', mapDispatchToProps)(QRScanner);
diff --git a/web/src/containers/Withdraw/Withdraw.js b/web/src/containers/Withdraw/Withdraw.js
index 3bbcebf516..19cafa5f6a 100644
--- a/web/src/containers/Withdraw/Withdraw.js
+++ b/web/src/containers/Withdraw/Withdraw.js
@@ -43,8 +43,10 @@ import {
} from './utils';
import { email, validAddress } from 'components/Form/validations';
import { getAddressBookDetails } from 'containers/Wallet/actions';
-import { getDecimals } from 'utils/utils';
+import { getDecimals, handlePopupContainer } from 'utils/utils';
import { roundNumber, toFixed } from 'utils/currency';
+import { BASE_CURRENCY } from 'config/constants';
+import { setScannedAddress } from 'actions/walletActions';
const RenderWithdraw = ({
coins,
@@ -87,6 +89,7 @@ const RenderWithdraw = ({
dropdownOpen: false,
isOptionalTag: false,
});
+ const hasTag = ['xrp', 'xlm', 'ton', 'pmn'];
// const [isCheck, setIsCheck] = useState(false);
// const [isVisible, setIsVisible] = useState(false);
// const [isWarning, setIsWarning] = useState(false);
@@ -106,12 +109,13 @@ const RenderWithdraw = ({
coin_customizations,
setIsValidAdress,
isValidAddress,
- getNativeCurrency,
selectedMethod,
setSelectedMethod,
setReceiverEmail,
receiverWithdrawalEmail,
setWithdrawOptionaltag,
+ scannedAddress,
+ setScannedAddress,
} = rest;
const defaultCurrency = currency !== '' && currency;
@@ -262,6 +266,22 @@ const RenderWithdraw = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getWithdrawNetworkOptions, selectedMethod, selectedCurrency]);
+ useEffect(() => {
+ if (
+ scannedAddress &&
+ scannedAddress?.length &&
+ scannedAddress !== STRINGS['QR_CODE.NOT_FOUND'] &&
+ scannedAddress !== STRINGS['QR_CODE.NO_RESULT'] &&
+ scannedAddress !== STRINGS['QR_CODE.PERMISSION_DENIED']
+ ) {
+ onHandleAddress(scannedAddress, 'address');
+ }
+ return () => {
+ setScannedAddress('');
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [scannedAddress]);
+
const isAmount = useMemo(() => {
const isCondition =
selectedMethod === STRINGS['FORM_FIELDS.EMAIL_LABEL']
@@ -317,6 +337,7 @@ const RenderWithdraw = ({
const onHandleChangeMethod = (method) => {
setWithdrawAddress('');
+ setScannedAddress('');
setWithdrawAmount('');
setReceiverEmail('');
setWithdrawOptionaltag(null);
@@ -387,6 +408,7 @@ const RenderWithdraw = ({
addressField: null,
}));
setWithdrawAddress('');
+ setScannedAddress('');
setReceiverEmail('');
setWithdrawOptionaltag(null);
setIsValidField((prev) => ({ ...prev, isOptionalTag: false }));
@@ -413,6 +435,7 @@ const RenderWithdraw = ({
setCurrStep((prev) => ({ ...prev, stepFour: false, stepFive: false }));
}
setWithdrawAddress(null);
+ setScannedAddress('');
setIsValidAdress(false);
setWithdrawOptionaltag(null);
setSelectedAsset((prev) => ({ ...prev, addressField: null }));
@@ -423,7 +446,7 @@ const RenderWithdraw = ({
const isValid = validAddress(
getWithdrawCurrency,
STRINGS[
- `WITHDRAWALS_${selectedAsset?.selectedCurrency.toUpperCase()}_INVALID_ADDRESS`
+ `WITHDRAWALS_${selectedAsset?.selectedCurrency?.toUpperCase()}_INVALID_ADDRESS`
],
currentNetwork,
val
@@ -569,6 +592,7 @@ const RenderWithdraw = ({
}
if (type === 'network') {
setWithdrawAddress(null);
+ setScannedAddress('');
setWithdrawNetworkOptions('');
setSelectedAsset((prev) => ({
...prev,
@@ -617,13 +641,15 @@ const RenderWithdraw = ({
if (val === STRINGS['WITHDRAW_PAGE.NEW_ADDRESS']) {
setWithdrawOptionaltag(null);
setWithdrawAddress(null);
+ setScannedAddress('');
setIsValidAdress(false);
}
if (val !== STRINGS['WITHDRAW_PAGE.NEW_ADDRESS']) {
+ const optionValue = val.split(',');
setIsValidField((prev) => ({ ...prev, isSelected: true }));
- onHandleAddress(val, 'address');
- if (isCondition && address?.length > 1) {
- setWithdrawOptionaltag(address[1]);
+ onHandleAddress(optionValue[0], 'address');
+ if (isCondition && optionValue?.length > 1) {
+ setWithdrawOptionaltag(optionValue[1]);
}
}
if (val === STRINGS['ADDRESS_BOOK.VIEW_ADDRESS_BOOK_LABEL']) {
@@ -645,12 +671,23 @@ const RenderWithdraw = ({
: `+ ${fee} ${
(getWithdrawCurrency || currency) && feeCoin?.toUpperCase()
}`;
- const estimatedFormat = `≈ ${Math.round(
- estimatedWithdrawValue
- )} ${getNativeCurrency?.toUpperCase()}`;
+
+ const incrementUnit = coins[BASE_CURRENCY].increment_unit;
+ const decimalPoint = new BigNumber(incrementUnit).dp();
+ const estimatedFormat = `≈ ${new BigNumber(estimatedWithdrawValue)
+ .decimalPlaces(decimalPoint)
+ .toNumber()} ${BASE_CURRENCY?.toUpperCase()}`;
+
const isCondition =
(['xrp', 'xlm'].includes(selectedAsset?.selectedCurrency) ||
- ['xlm', 'ton'].includes(network)) &&
+ ['xlm', 'ton'].includes(
+ coinLength &&
+ coinLength.length > 1 &&
+ getWithdrawNetworkOptions &&
+ getWithdrawNetworkOptions
+ ? renderNetworkField(selectedAsset?.networkData)
+ : network
+ )) &&
selectedMethod !== STRINGS['FORM_FIELDS.EMAIL_LABEL'];
const isEmailAndAddress =
coinLength &&
@@ -697,37 +734,38 @@ const RenderWithdraw = ({
);
})();
- const address = getAddress[0]?.address?.split(':');
-
const selectAddressField = [
{
value: STRINGS['WITHDRAW_PAGE.NEW_ADDRESS'],
label: STRINGS['WITHDRAW_PAGE.NEW_ADDRESS'],
},
- {
- value: address && address[0],
- label: (
-
-
{getAddress[0]?.label}
-
-
: {address && address[0]}
- {address &&
- address.length > 1 &&
- isCondition &&
- (!isValidField?.isSelected || isValidField?.dropdownOpen) && (
-
-
-
- {STRINGS['ACCORDIAN.TAG']}
-
-
{address && address[1]}
+ ...(getAddress?.map((addressObj) => {
+ const splitAddress = addressObj?.address?.split(':');
+ return {
+ value: splitAddress && splitAddress,
+ label: (
+
+
{addressObj?.label}
+
+
: {splitAddress && splitAddress[0]}
+ {splitAddress &&
+ splitAddress.length > 1 &&
+ isCondition &&
+ (!isValidField?.isSelected || isValidField?.dropdownOpen) && (
+
+
+
+ {STRINGS['ACCORDIAN.TAG']}
+
+ {splitAddress[1]}
+
-
- )}
+ )}
+
-
- ),
- },
+ ),
+ };
+ }) || []),
{
value: STRINGS['ADDRESS_BOOK.VIEW_ADDRESS_BOOK_LABEL'],
label: STRINGS['ADDRESS_BOOK.VIEW_ADDRESS_BOOK_LABEL'],
@@ -783,6 +821,7 @@ const RenderWithdraw = ({
? STRINGS['WITHDRAW_PAGE.WITHDRAWAL_CONFIRM_ADDRESS']
: selectedMethod
}
+ getPopupContainer={handlePopupContainer}
>
{methodOptions.map((val, inx) => (
@@ -870,6 +909,7 @@ const RenderWithdraw = ({
const curr = onHandleSymbol(e);
onHandleChangeSelect(curr);
}}
+ getPopupContainer={handlePopupContainer}
>
{Object.entries(coins).map(
([_, { symbol, fullname, icon_id }]) => (
@@ -991,6 +1031,7 @@ const RenderWithdraw = ({
!(coinLength && coinLength.length)
}
onClear={() => onHandleClear('network')}
+ getPopupContainer={handlePopupContainer}
>
{coinLength?.length === 1 &&
coinLength &&
@@ -1058,7 +1099,7 @@ const RenderWithdraw = ({
)}
onHandleClear('address')}
+ getPopupContainer={handlePopupContainer}
>
- {selectAddressField.map((data) => {
+ {selectAddressField?.map((data) => {
return (
-
+
- {data.label}
+ {data?.label}
);
@@ -1485,6 +1530,7 @@ const mapStateToForm = (state) => ({
selectedMethod: state.app.selectedWithdrawMethod,
receiverWithdrawalEmail: state.app.receiverWithdrawalEmail,
optionalTag: state.app.withdrawFields.optionalTag,
+ scannedAddress: state.wallet.scannedAddress,
});
const mapDispatchToProps = (dispatch) => ({
@@ -1501,6 +1547,7 @@ const mapDispatchToProps = (dispatch) => ({
setSelectedMethod: bindActionCreators(setSelectedMethod, dispatch),
setReceiverEmail: bindActionCreators(setReceiverEmail, dispatch),
setWithdrawOptionaltag: bindActionCreators(setWithdrawOptionaltag, dispatch),
+ setScannedAddress: bindActionCreators(setScannedAddress, dispatch),
});
export default connect(mapStateToForm, mapDispatchToProps)(RenderWithdraw);
diff --git a/web/src/containers/Withdraw/_Withdraw.scss b/web/src/containers/Withdraw/_Withdraw.scss
index 6af349f57d..30477eef5d 100644
--- a/web/src/containers/Withdraw/_Withdraw.scss
+++ b/web/src/containers/Withdraw/_Withdraw.scss
@@ -81,6 +81,17 @@ $content--margin: 2rem;
.withdrawal-container {
width: 75rem !important;
+ .select-wrapper {
+ .custom-select-input-style {
+ &.elevated {
+ z-index: unset;
+ }
+ .ant-select-arrow {
+ z-index: unset;
+ }
+ }
+ }
+
.transaction-history-wrapper {
max-width: 100% !important;
}
@@ -491,6 +502,16 @@ $content--margin: 2rem;
.withdrawal-remove-tag-modal {
.ant-modal-header {
border: none;
+ .ant-modal-title {
+ color: $colors-main-black;
+ }
+ }
+ .ant-modal-content {
+ .ant-modal-close-x {
+ svg {
+ fill: $colors-main-black !important;
+ }
+ }
}
.ant-modal-header,
@@ -549,6 +570,16 @@ $content--margin: 2rem;
}
}
+ .select-wrapper {
+ .custom-select-input-style {
+ &.elevated {
+ z-index: unset;
+ }
+ .ant-select-arrow {
+ z-index: unset;
+ }
+ }
+ }
.inner_container {
.result-message {
font-size: $regular--font-size;
@@ -836,9 +867,11 @@ $content--margin: 2rem;
}
}
- .withdraw-dropdown-address {
+ .withdraw-dropdown-address-options {
.asset-address-field {
- margin-bottom: 5%;
+ .address-text {
+ width: 0;
+ }
}
}
}
@@ -859,6 +892,12 @@ $content--margin: 2rem;
.withdraw-dropdown-address {
width: 100%;
- border-bottom: 1px solid $colors-black !important;
+ border-top: 1px solid $colors-black !important;
overflow: hidden;
+ padding-top: 3%;
+}
+
+.withdraw-dropdown-address-options {
+ overflow: hidden;
+ width: 100%;
}
diff --git a/web/src/containers/Withdraw/index.js b/web/src/containers/Withdraw/index.js
index 52cc1ce1f4..fffa98fa6f 100644
--- a/web/src/containers/Withdraw/index.js
+++ b/web/src/containers/Withdraw/index.js
@@ -113,7 +113,7 @@ class Withdraw extends Component {
if (currency || getWithdrawCurrency) {
const { coins } = this.props;
const coin = coins[currency];
- const networks = coin.network && coin.network.split(',');
+ const networks = coin.network && coin?.network?.split(',');
let initialNetwork;
if (networks && networks.length === 1) {
initialNetwork = networks[0];
diff --git a/web/src/containers/_containers.scss b/web/src/containers/_containers.scss
index 463299e0ee..9432706955 100644
--- a/web/src/containers/_containers.scss
+++ b/web/src/containers/_containers.scss
@@ -31,3 +31,6 @@
@import './CoinPage/CoinPage';
@import './Summary/components/ReferralList';
@import './Wallet/AddressBook';
+@import './P2P/P2P';
+@import './Volume/Volume';
+@import './Admin/Settings/CustomizeEmailForm.scss';
diff --git a/web/src/containers/index.js b/web/src/containers/index.js
index 91fdfcadf3..7a0370be61 100644
--- a/web/src/containers/index.js
+++ b/web/src/containers/index.js
@@ -1,79 +1,390 @@
-export { default as App } from './App';
-export { default as AuthContainer } from './AuthContainer';
-export { default as UserProfile } from './UserProfile';
-export { default as UserSecurity } from './UserSecurity';
-export { default as UserSettings } from './UserSettings';
-export { default as ContactForm } from './ContactForm';
-export { default as HelpfulResourcesForm } from './HelpfulResourcesForm';
-export { default as Account } from './Account';
-export * from './Wallet';
-export { default as Deposit } from './Deposit';
-export { default as Withdraw } from './Withdraw';
-export { default as WithdrawConfirmation } from './WithdrawConfirmation';
-export { default as TransactionsHistory } from './TransactionsHistory';
-export { default as Login } from './Login';
-export { default as Signup } from './Signup';
-export { default as VerificationEmailRequest } from './VerificationEmailRequest';
-export { default as VerificationEmailCode } from './VerificationEmailCode';
-export { default as Home } from './Home';
-export { default as Trade } from './Trade';
-export { default as ChartEmbed } from './ChartEmbed';
-export { default as Legal } from './Legal';
-export { default as RequestResetPassword } from './RequestResetPassword';
-export { default as ResetPassword } from './ResetPassword';
-export { default as QuickTrade } from './QuickTrade';
-export { default as Verification } from './Verification';
-export { default as Chat } from './Chat';
-export { default as Summary } from './Summary';
-export { default as AddTradeTabs } from './TradeTabs';
-export { default as ExpiredExchange } from './ExpiredExchange';
-export { default as TermsOfService } from './TermsOfService';
-export { default as DepositFunds } from './TermsOfService/DepositFunds';
-export { default as Stake } from './Stake';
-export { default as StakeDetails } from './StakeDetails';
-export { default as Apps } from './Apps';
-export { default as AppDetails } from './AppDetails';
-export { default as DigitalAssets } from './DigitalAssets';
-export { default as CoinPage } from './CoinPage';
-export { default as WhiteLabel } from './WhiteLabel';
-export { default as FeesAndLimits } from './FeesAndLimits';
-export { default as ReferralList } from './Summary/components/ReferralList';
-export { default as P2P } from './P2P';
-export { default as AddressBook } from './Wallet/AddressBook';
-
-// ADMIN PAGE
-export { default as AdminDashboard } from './Admin/Dashboard';
-export { default as User } from './Admin/User';
-export { default as AdminStake } from './Admin/Stakes';
-export { default as Session } from './Admin/Sessions';
-export { default as Audits } from './Admin/Audits';
-export { default as AppWrapper } from './Admin/AppWrapper';
-export { default as Main } from './Admin/Main';
-export { default as DepositsPage } from './Admin/DepositsPage';
-export { default as Limits } from './Admin/Limits';
-export { default as BlockchainTransaction } from './Admin/BlockchainTransaction';
-export { default as Fees } from './Admin/Fees';
-export { default as AdminChat } from './Admin/Chat';
-export { default as Wallets } from './Admin/Wallets';
-export { default as UserFees } from './Admin/UserFees';
+import React from 'react';
+import Loadable from 'react-loadable';
+import { Loader } from 'components';
export { PATHS } from './Admin/paths';
-export { default as AdminOrders } from './Admin/ActiveOrders';
-export { default as Broker } from './Admin/Broker';
-export { default as Plugins } from './Admin/Plugins';
-export { default as PluginStore } from './Admin/Plugins/PluginStore';
-export { default as Settings } from './Admin/Settings';
-export { default as MobileHome } from './MobileHome';
-export { default as Transfer } from './Admin/Transfers';
-export { default as AdminFees } from './Admin/AdminFees';
-export { default as ThemeProvider } from './ThemeProvider';
-export { default as Init } from './Init';
-export { default as AdminLogin } from './Init/Login';
-export { default as AdminFinancials } from './Admin/AdminFinancials';
-export { default as MoveToDash } from './Admin/MoveToDash';
-export { default as General } from './Admin/General';
-export { default as Tiers } from './Admin/Tiers';
-export { default as Roles } from './Admin/Roles';
-export { default as Resources } from './Admin/Resources';
-export { default as Pairs } from './Admin/Trades';
-export { default as Fiatmarkets } from './Admin/Fiat';
-export { default as AdminApps } from './Admin/Apps';
+
+const LoadingComponent = ({ isLoading, error }) => {
+ return
;
+};
+
+export const App = Loadable({
+ loader: () => import('./App'),
+ loading: LoadingComponent,
+});
+
+export const AuthContainer = Loadable({
+ loader: () => import('./AuthContainer'),
+ loading: LoadingComponent,
+});
+
+export const UserProfile = Loadable({
+ loader: () => import('./UserProfile'),
+ loading: LoadingComponent,
+});
+
+export const UserSecurity = Loadable({
+ loader: () => import('./UserSecurity'),
+ loading: LoadingComponent,
+});
+
+export const UserSettings = Loadable({
+ loader: () => import('./UserSettings'),
+ loading: LoadingComponent,
+});
+
+export const ContactForm = Loadable({
+ loader: () => import('./ContactForm'),
+ loading: LoadingComponent,
+});
+
+export const HelpfulResourcesForm = Loadable({
+ loader: () => import('./HelpfulResourcesForm'),
+ loading: LoadingComponent,
+});
+
+export const Account = Loadable({
+ loader: () => import('./Account'),
+ loading: LoadingComponent,
+});
+
+export * from './Wallet';
+
+export const Deposit = Loadable({
+ loader: () => import('./Deposit'),
+ loading: LoadingComponent,
+});
+
+export const Withdraw = Loadable({
+ loader: () => import('./Withdraw'),
+ loading: LoadingComponent,
+});
+
+export const WithdrawConfirmation = Loadable({
+ loader: () => import('./WithdrawConfirmation'),
+ loading: LoadingComponent,
+});
+
+export const TransactionsHistory = Loadable({
+ loader: () => import('./TransactionsHistory'),
+ loading: LoadingComponent,
+});
+
+export const Login = Loadable({
+ loader: () => import('./Login'),
+ loading: LoadingComponent,
+});
+
+export const Signup = Loadable({
+ loader: () => import('./Signup'),
+ loading: LoadingComponent,
+});
+
+export const VerificationEmailRequest = Loadable({
+ loader: () => import('./VerificationEmailRequest'),
+ loading: LoadingComponent,
+});
+
+export const VerificationEmailCode = Loadable({
+ loader: () => import('./VerificationEmailCode'),
+ loading: LoadingComponent,
+});
+
+export const Home = Loadable({
+ loader: () => import('./Home'),
+ loading: LoadingComponent,
+});
+
+export const Trade = Loadable({
+ loader: () => import('./Trade'),
+ loading: LoadingComponent,
+});
+
+export const ChartEmbed = Loadable({
+ loader: () => import('./ChartEmbed'),
+ loading: LoadingComponent,
+});
+
+export const Legal = Loadable({
+ loader: () => import('./Legal'),
+ loading: LoadingComponent,
+});
+
+export const RequestResetPassword = Loadable({
+ loader: () => import('./RequestResetPassword'),
+ loading: LoadingComponent,
+});
+
+export const ResetPassword = Loadable({
+ loader: () => import('./ResetPassword'),
+ loading: LoadingComponent,
+});
+
+export const QuickTrade = Loadable({
+ loader: () => import('./QuickTrade'),
+ loading: LoadingComponent,
+});
+
+export const Verification = Loadable({
+ loader: () => import('./Verification'),
+ loading: LoadingComponent,
+});
+
+export const Chat = Loadable({
+ loader: () => import('./Chat'),
+ loading: LoadingComponent,
+});
+
+export const Summary = Loadable({
+ loader: () => import('./Summary'),
+ loading: LoadingComponent,
+});
+
+export const AddTradeTabs = Loadable({
+ loader: () => import('./TradeTabs'),
+ loading: LoadingComponent,
+});
+
+export const ExpiredExchange = Loadable({
+ loader: () => import('./ExpiredExchange'),
+ loading: LoadingComponent,
+});
+
+export const TermsOfService = Loadable({
+ loader: () => import('./TermsOfService'),
+ loading: LoadingComponent,
+});
+
+export const DepositFunds = Loadable({
+ loader: () => import('./TermsOfService/DepositFunds'),
+ loading: LoadingComponent,
+});
+
+export const Stake = Loadable({
+ loader: () => import('./Stake'),
+ loading: LoadingComponent,
+});
+
+export const StakeDetails = Loadable({
+ loader: () => import('./StakeDetails'),
+ loading: LoadingComponent,
+});
+
+export const Apps = Loadable({
+ loader: () => import('./Apps'),
+ loading: LoadingComponent,
+});
+
+export const AppDetails = Loadable({
+ loader: () => import('./AppDetails'),
+ loading: LoadingComponent,
+});
+
+export const DigitalAssets = Loadable({
+ loader: () => import('./DigitalAssets'),
+ loading: LoadingComponent,
+});
+
+export const CoinPage = Loadable({
+ loader: () => import('./CoinPage'),
+ loading: LoadingComponent,
+});
+
+export const WhiteLabel = Loadable({
+ loader: () => import('./WhiteLabel'),
+ loading: LoadingComponent,
+});
+
+export const FeesAndLimits = Loadable({
+ loader: () => import('./FeesAndLimits'),
+ loading: LoadingComponent,
+});
+
+export const ReferralList = Loadable({
+ loader: () => import('./Summary/components/ReferralList'),
+ loading: LoadingComponent,
+});
+
+export const P2P = Loadable({
+ loader: () => import('./P2P'),
+ loading: LoadingComponent,
+});
+
+export const Volume = Loadable({
+ loader: () => import('./Volume'),
+ loading: LoadingComponent,
+});
+
+export const AddressBook = Loadable({
+ loader: () => import('./Wallet/AddressBook'),
+ loading: LoadingComponent,
+});
+
+export const AdminDashboard = Loadable({
+ loader: () => import('./Admin/Dashboard'),
+ loading: LoadingComponent,
+});
+
+export const User = Loadable({
+ loader: () => import('./Admin/User'),
+ loading: LoadingComponent,
+});
+
+export const AdminStake = Loadable({
+ loader: () => import('./Admin/Stakes'),
+ loading: LoadingComponent,
+});
+
+export const Session = Loadable({
+ loader: () => import('./Admin/Sessions'),
+ loading: LoadingComponent,
+});
+
+export const Audits = Loadable({
+ loader: () => import('./Admin/Audits'),
+ loading: LoadingComponent,
+});
+
+export const AppWrapper = Loadable({
+ loader: () => import('./Admin/AppWrapper'),
+ loading: LoadingComponent,
+});
+
+export const Main = Loadable({
+ loader: () => import('./Admin/Main'),
+ loading: LoadingComponent,
+});
+
+export const DepositsPage = Loadable({
+ loader: () => import('./Admin/DepositsPage'),
+ loading: LoadingComponent,
+});
+
+export const Limits = Loadable({
+ loader: () => import('./Admin/Limits'),
+ loading: LoadingComponent,
+});
+
+export const BlockchainTransaction = Loadable({
+ loader: () => import('./Admin/BlockchainTransaction'),
+ loading: LoadingComponent,
+});
+
+export const Fees = Loadable({
+ loader: () => import('./Admin/Fees'),
+ loading: LoadingComponent,
+});
+
+export const AdminChat = Loadable({
+ loader: () => import('./Admin/Chat'),
+ loading: LoadingComponent,
+});
+
+export const Wallets = Loadable({
+ loader: () => import('./Admin/Wallets'),
+ loading: LoadingComponent,
+});
+
+export const UserFees = Loadable({
+ loader: () => import('./Admin/UserFees'),
+ loading: LoadingComponent,
+});
+
+export const AdminOrders = Loadable({
+ loader: () => import('./Admin/ActiveOrders'),
+ loading: LoadingComponent,
+});
+
+export const Broker = Loadable({
+ loader: () => import('./Admin/Broker'),
+ loading: LoadingComponent,
+});
+
+export const Plugins = Loadable({
+ loader: () => import('./Admin/Plugins'),
+ loading: LoadingComponent,
+});
+
+export const PluginStore = Loadable({
+ loader: () => import('./Admin/Plugins/PluginStore'),
+ loading: LoadingComponent,
+});
+
+export const Settings = Loadable({
+ loader: () => import('./Admin/Settings'),
+ loading: LoadingComponent,
+});
+
+export const MobileHome = Loadable({
+ loader: () => import('./MobileHome'),
+ loading: LoadingComponent,
+});
+
+export const Transfer = Loadable({
+ loader: () => import('./Admin/Transfers'),
+ loading: LoadingComponent,
+});
+
+export const AdminFees = Loadable({
+ loader: () => import('./Admin/AdminFees'),
+ loading: LoadingComponent,
+});
+
+export const ThemeProvider = Loadable({
+ loader: () => import('./ThemeProvider'),
+ loading: LoadingComponent,
+});
+
+export const Init = Loadable({
+ loader: () => import('./Init'),
+ loading: LoadingComponent,
+});
+
+export const AdminLogin = Loadable({
+ loader: () => import('./Init/Login'),
+ loading: LoadingComponent,
+});
+
+export const AdminFinancials = Loadable({
+ loader: () => import('./Admin/AdminFinancials'),
+ loading: LoadingComponent,
+});
+
+export const MoveToDash = Loadable({
+ loader: () => import('./Admin/MoveToDash'),
+ loading: LoadingComponent,
+});
+
+export const General = Loadable({
+ loader: () => import('./Admin/General'),
+ loading: LoadingComponent,
+});
+
+export const Tiers = Loadable({
+ loader: () => import('./Admin/Tiers'),
+ loading: LoadingComponent,
+});
+
+export const Roles = Loadable({
+ loader: () => import('./Admin/Roles'),
+ loading: LoadingComponent,
+});
+
+export const Resources = Loadable({
+ loader: () => import('./Admin/Resources'),
+ loading: LoadingComponent,
+});
+
+export const Pairs = Loadable({
+ loader: () => import('./Admin/Trades'),
+ loading: LoadingComponent,
+});
+
+export const Fiatmarkets = Loadable({
+ loader: () => import('./Admin/Fiat'),
+ loading: LoadingComponent,
+});
+
+export const AdminApps = Loadable({
+ loader: () => import('./Admin/Apps'),
+ loading: LoadingComponent,
+});
diff --git a/web/src/index.css b/web/src/index.css
index eb2d3ba96e..110b92ffe1 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -324,7 +324,7 @@ table th {
flex-direction: column !important; }
.important-text {
- color: var(--labels_important-active-labels-text-graphics); }
+ color: var(--labels_important-active-labels-text-graphics) !important; }
.secondary-text {
color: var(--labels_secondary-inactive-label-text-graphics); }
@@ -369,6 +369,18 @@ table th {
border-top: var(--specials_notifications-alerts-warnings) 4px solid;
background-color: var(--calculated_specials_notifications-alerts-pale); }
+.fs-12 {
+ font-size: 12px; }
+
+.fs-16 {
+ font-size: 16px; }
+
+.fs-24 {
+ font-size: 24px; }
+
+.text-decoration-underline {
+ text-decoration: underline; }
+
.app_container {
min-height: 100vh;
background-color: var(--base_background);
@@ -405,7 +417,8 @@ table th {
.app_container .app_container-content .app_container-main {
width: 100%;
height: auto;
- position: relative; }
+ position: relative;
+ background-color: var(--base_background); }
.app_container .app_container-content .app_container-main .presentation_container {
width: 75rem;
height: inherit; }
@@ -589,6 +602,101 @@ table th {
.background-color-layer {
box-shadow: inset 0 0 0 1000px var(--calculated_background-overlay); }
+.p2p-chat-notification-wrapper-mobile .ant-notification-notice-message,
+.p2p-chat-notification-wrapper-mobile .ant-notification-notice-description {
+ font-size: 11px !important; }
+
+.p2p-chat-notification-wrapper {
+ background-color: var(--base_secondary-navigation-bar);
+ border-top: 2px solid var(--specials_buttons-links-and-highlights);
+ box-shadow: 4px 4px 15px var(--base_top-bar-navigation);
+ padding: 10px 10px !important;
+ width: 100%; }
+ .p2p-chat-notification-wrapper .ant-notification-notice-description,
+ .p2p-chat-notification-wrapper .ant-notification-notice-message,
+ .p2p-chat-notification-wrapper .ant-notification-notice-content,
+ .p2p-chat-notification-wrapper .ant-notification-notice-close {
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-chat-notification-wrapper .ant-notification-notice-message,
+ .p2p-chat-notification-wrapper .ant-notification-notice-description {
+ margin-left: 40px;
+ font-size: 13px; }
+ .p2p-chat-notification-wrapper .ant-notification-notice-close {
+ top: 10px;
+ right: 12px; }
+ .p2p-chat-notification-wrapper .p2p-fire-icon svg path {
+ fill: var(--specials_pending-waiting-caution); }
+
+.ant-notification-bottomLeft {
+ margin-left: 0px !important;
+ width: 100% !important;
+ max-width: unset !important; }
+
+.layout-mobile .footer-bar-more-options-container {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper {
+ flex-direction: column;
+ align-items: center !important;
+ margin: unset !important;
+ background-color: var(--base_wallet-sidebar-and-popup);
+ padding: 2%; }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .search-field,
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .input_icon {
+ width: 100%;
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .input_icon {
+ width: 2rem !important; }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .field-content-outline:after,
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .field-content-outline:before {
+ background-color: transparent !important; }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper .field-error-content {
+ display: none; }
+ .layout-mobile .footer-bar-more-options-container .field-wrapper > div:nth-child(1) {
+ width: 90%;
+ background-color: var(--base_background);
+ padding: 1%;
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ border-radius: 5px; }
+ .layout-mobile .footer-bar-more-options-container .custom-connection-circle,
+ .layout-mobile .footer-bar-more-options-container .custom-connection-error-circle {
+ height: 15px;
+ width: 15px;
+ border-radius: 12px;
+ background-color: var(--specials_checks-okay-done); }
+ .layout-mobile .footer-bar-more-options-container .custom-connection-error-circle {
+ background-color: var(--specials_notifications-alerts-warnings) !important; }
+ .layout-mobile .footer-bar-more-options-container .options-container {
+ padding: 4%;
+ font-size: 14px; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container {
+ height: max-content; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .hot-function-title {
+ font-size: 18px; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 15px;
+ padding: 5% 2%; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .icon-logo {
+ width: 25px; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .icon-logo path {
+ fill: var(--labels_important-active-labels-text-graphics); }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .image-wrapper {
+ margin-left: 15%; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .icon-field {
+ padding: 5%;
+ text-align: center; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .icon-field .assets-icon {
+ position: relative;
+ bottom: 10px;
+ margin-left: 5%; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .options-field .option-title .edit-wrapper__container {
+ font-size: 12px; }
+ .layout-mobile .footer-bar-more-options-container .options-container .hot-options-container .secondary-text {
+ font-size: 12px; }
+
.light-auth-body {
background-repeat: no-repeat;
background-size: cover;
@@ -2301,6 +2409,10 @@ table th {
.withdrawal-container {
width: 75rem !important; }
+ .withdrawal-container .select-wrapper .custom-select-input-style.elevated {
+ z-index: unset; }
+ .withdrawal-container .select-wrapper .custom-select-input-style .ant-select-arrow {
+ z-index: unset; }
.withdrawal-container .transaction-history-wrapper {
max-width: 100% !important; }
.withdrawal-container .icon_title-wrapper {
@@ -2538,6 +2650,11 @@ table th {
.withdrawal-remove-tag-modal .ant-modal-header {
border: none; }
+ .withdrawal-remove-tag-modal .ant-modal-header .ant-modal-title {
+ color: var(--labels_important-active-labels-text-graphics); }
+
+.withdrawal-remove-tag-modal .ant-modal-content .ant-modal-close-x svg {
+ fill: var(--labels_important-active-labels-text-graphics) !important; }
.withdrawal-remove-tag-modal .ant-modal-header,
.withdrawal-remove-tag-modal .ant-modal-body {
@@ -2577,6 +2694,12 @@ table th {
width: 1.5rem !important;
height: 1.5rem !important; }
+.layout-mobile .presentation_container .select-wrapper .custom-select-input-style.elevated {
+ z-index: unset; }
+
+.layout-mobile .presentation_container .select-wrapper .custom-select-input-style .ant-select-arrow {
+ z-index: unset; }
+
.layout-mobile .presentation_container .inner_container .result-message {
font-size: 1.2rem; }
@@ -2714,8 +2837,8 @@ table th {
.layout-mobile .withdrawal-container .withdraw-form-wrapper .withdraw-form .withdraw-btn-wrapper {
margin-top: 20%; } }
-.layout-mobile .withdraw-dropdown-address .asset-address-field {
- margin-bottom: 5%; }
+.layout-mobile .withdraw-dropdown-address-options .asset-address-field .address-text {
+ width: 0; }
.review_email-wrapper {
margin: auto; }
@@ -2729,8 +2852,13 @@ table th {
.withdraw-dropdown-address {
width: 100%;
- border-bottom: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important;
- overflow: hidden; }
+ border-top: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important;
+ overflow: hidden;
+ padding-top: 3%; }
+
+.withdraw-dropdown-address-options {
+ overflow: hidden;
+ width: 100%; }
.extra_information-wrapper {
margin-top: 1rem;
@@ -2904,6 +3032,25 @@ table th {
color: var(--labels_secondary-inactive-label-text-graphics);
margin: 1% 3%; }
+.layout-mobile .deposit_info-qr-wrapper .qr_code-wrapper {
+ width: 20rem;
+ max-width: 20rem; }
+ .layout-mobile .deposit_info-qr-wrapper .qr_code-wrapper .qr-code-bg > *:first-child {
+ width: 19rem !important;
+ height: 19rem !important; }
+
+.layout-mobile .deposit_info-qr-wrapper .qr-title {
+ font-size: 2rem; }
+
+.layout-mobile .deposit_info-qr-wrapper .blue-link {
+ font-size: 1.4rem !important; }
+
+.layout-mobile .deposit_info-qr-wrapper .qr-text {
+ max-width: 30rem;
+ padding: 1.5rem 0 5rem 0; }
+ .layout-mobile .deposit_info-qr-wrapper .qr-text .edit-wrapper__container {
+ font-size: 1.5rem; }
+
.layout-mobile .withdrawal-container .withdraw-form-wrapper .withdraw-form .deposit-wrapper-fields .custom-field .custom-line-large {
height: 11rem;
border: 1px solid var(--labels_important-active-labels-text-graphics);
@@ -3283,7 +3430,7 @@ table th {
display: flex;
flex-direction: row; }
.expandable-container p {
- margin-right: 1rem;
+ margin-right: 5px;
font-weight: thin;
margin-bottom: 0px; }
.expandable-container .font-bold {
@@ -4673,6 +4820,119 @@ table th {
.layout-mobile .digital-market-wrapper .link-container {
font-size: 10px; }
+.layout-mobile .digital-market-wrapper .market-wrapper .header-container {
+ padding-bottom: 0;
+ border-bottom: unset; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .header-container .icon_title-wrapper .icon_title-svg svg {
+ width: 2rem !important;
+ height: 2rem !important;
+ margin-top: 0 !important; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .header-container .icon_title-wrapper .icon_title-svg {
+ width: 2rem !important; }
+
+.layout-mobile .digital-market-wrapper .market-wrapper .market-button-container {
+ width: 100%;
+ padding: 2%;
+ display: flex;
+ align-items: center;
+ justify-content: center; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .market-buttons {
+ width: 100%; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .market-buttons .market-btn {
+ padding: 1% 4%; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container div:first-child {
+ width: 100%; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search {
+ width: 90% !important; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field {
+ width: 100%;
+ display: block !important; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field .field-content .field-children div div,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field .field-content .field-children div div {
+ width: unset !important; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field .field-content .field-children input,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field .field-content .field-children input {
+ width: 100%; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field .field-content .clear-field,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field .field-content .clear-field {
+ bottom: 35% !important;
+ right: 10px; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field .field-content .clear-field svg,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field .field-content .clear-field svg {
+ width: 2rem;
+ height: unset; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search-field-container .trade_tabs-search-field .field-error-content,
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .search .trade_tabs-search-field .field-error-content {
+ margin: unset;
+ padding-bottom: unset;
+ min-height: unset; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .search-field-mobile-container .blue-link {
+ font-size: 12px !important;
+ text-transform: uppercase;
+ text-decoration: underline !important; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .trade-tab-search-icon {
+ padding: 1.5%;
+ border-radius: 20px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ background-color: var(--specials_buttons-links-and-highlights); }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .sticky-col {
+ background-color: transparent; }
+ .layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .sticky-col .table-asset-container,
+ .layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .sticky-col .coin-symbol {
+ width: 100%;
+ overflow: hidden;
+ text-wrap: nowrap;
+ text-overflow: ellipsis; }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table tr {
+ font-size: 12px !important; }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .market-asset-row .action_notification-text,
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .ant-space .action_notification-text {
+ padding: 8px 10px;
+ font-size: 12px !important;
+ border-radius: 8px; }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .trade-header {
+ padding: 5% !important; }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .highcharts-container {
+ position: absolute !important;
+ top: 30% !important;
+ height: 50%; }
+ .layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table .highcharts-container .highcharts-root {
+ height: 100%; }
+
+.layout-mobile .digital-market-wrapper .market-list__container .market-list__block .market-list__block-table td:nth-child(3) .price-change .price-diff {
+ position: absolute;
+ top: 7%; }
+
+.layout-mobile .asset-cards-swipe-container {
+ min-height: 20%; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(1) {
+ margin-top: 2%; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(2) .icon_title-text {
+ font-size: 12px !important; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .digital-assets-cards .assets-wrapper .assets-value .gainer-price {
+ font-weight: bold; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .gainer-asset-card {
+ border-top: 3px solid var(--trading_buying-related-elements) !important; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .losers-asset-card {
+ border-top: 3px solid var(--trading_selling-related-elements) !important; }
+ .layout-mobile .asset-cards-swipe-container .assets-card-container .new-asset-card {
+ border-top: 3px solid var(--labels_secondary-inactive-label-text-graphics) !important; }
+
.layout-mobile .fee-limits-wrapper {
margin: 1rem auto 3rem; }
.layout-mobile .fee-limits-wrapper .icon_title-wrapper .icon_title-svg {
@@ -4785,7 +5045,7 @@ table th {
justify-content: center;
padding-top: 2rem; }
.digital-market-wrapper .market-wrapper-mobile-view {
- width: 90% !important; }
+ width: 100% !important; }
.digital-market-wrapper .market-wrapper {
width: 70%; }
.digital-market-wrapper .market-wrapper .gray-text {
@@ -5459,21 +5719,152 @@ table th {
.layout-mobile .trade_tabs-container .sticky-col {
background-color: var(--base_background) !important; }
-.layout-mobile .digital-market-wrapper .sticky-col {
+.layout-mobile .digital-market-wrapper .market-wrapper-mobile-view .mobile-header-content {
color: var(--labels_important-active-labels-text-graphics);
- background-color: var(--base_secondary-navigation-bar); }
+ text-align: center;
+ font-family: 'Raleway'; }
+ .layout-mobile .digital-market-wrapper .market-wrapper-mobile-view .mobile-header-content .digital-assets-label {
+ font-size: 24px;
+ text-transform: capitalize; }
+ .layout-mobile .digital-market-wrapper .market-wrapper-mobile-view .mobile-header-content .desc-content {
+ font-size: 12px; }
+
+.layout-mobile .digital-market-wrapper .market-wrapper .market-button-container {
+ padding: 4% 2%; }
+ .layout-mobile .digital-market-wrapper .market-wrapper .market-button-container .trade-tab-search-icon {
+ font-size: 12px; }
+
+.layout-mobile .custom-card-field {
+ width: 8px;
+ height: 8px;
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ border-radius: 100%; }
+
+.layout-mobile .custom-card-field-active {
+ background-color: var(--labels_important-active-labels-text-graphics); }
+
+.layout-mobile .assets-card-container {
+ width: 100%;
+ position: relative; }
+ .layout-mobile .assets-card-container .digital-assets-cards {
+ width: 70%; }
+ .layout-mobile .assets-card-container .nav-area {
+ position: absolute;
+ width: 10% !important;
+ height: 90%;
+ z-index: 1;
+ border-radius: unset !important; }
+ .layout-mobile .assets-card-container .left-nav {
+ left: 0; }
+ .layout-mobile .assets-card-container .right-nav {
+ right: 0; }
+
+.market-dropdown-style .app_bar-pair-font {
+ margin-left: 5%; }
+
+.market-dropdown-style .ant-dropdown-menu-item-active:hover {
+ background-color: var(--calculated_super-pale_label-text-graphics) !important; }
+
+.market-dropdown-mobile .app_bar-pair-font {
+ font-size: 12px; }
.digital-market-wrapper .market-list__block-table {
margin-bottom: 1rem; }
+ .digital-market-wrapper .market-list__block-table .table-bottom-border td,
+ .digital-market-wrapper .market-list__block-table th {
+ line-height: unset; }
+ .digital-market-wrapper .market-list__block-table .font-raleway {
+ font-family: Raleway; }
+ .digital-market-wrapper .market-list__block-table thead {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ background-color: var(--base_secondary-navigation-bar); }
+ .digital-market-wrapper .market-list__block-table thead tr {
+ height: 2.5rem !important;
+ vertical-align: bottom;
+ border-bottom: 1px solid var(--calculated_secondary-border); }
+ .digital-market-wrapper .market-list__block-table thead th {
+ border-bottom: unset !important;
+ text-wrap: nowrap;
+ padding: 0 0.5rem !important;
+ height: 30px; }
+ .digital-market-wrapper .market-list__block-table thead .market-chart-header {
+ width: 15%; }
+ .digital-market-wrapper .market-list__block-table thead .market-captial-header {
+ width: 15%; }
+ .digital-market-wrapper .market-list__block-table thead .asset-price-header,
+ .digital-market-wrapper .market-list__block-table thead .asset-percentage {
+ width: 15%; }
+ .digital-market-wrapper .market-list__block-table thead .trade-header {
+ padding: 15% !important;
+ display: flex;
+ justify-content: center; }
+ .digital-market-wrapper .market-list__block-table .table-row {
+ height: 3.5rem; }
+ .digital-market-wrapper .market-list__block-table .table-row td {
+ text-align: center !important; }
+ .digital-market-wrapper .market-list__block-table .table-row td:nth-child(1) {
+ text-align: left !important; }
+ .digital-market-wrapper .market-list__block-table .table-row td:nth-child(3),
+ .digital-market-wrapper .market-list__block-table .table-row td:nth-child(4) {
+ text-align: right !important; }
+ .digital-market-wrapper .market-list__block-table tbody tr td .asset-text,
+ .digital-market-wrapper .market-list__block-table tbody tr td .last-price-label {
+ font-weight: bold;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif; }
+ .digital-market-wrapper .market-list__block-table tbody tr td .asset-text {
+ text-wrap: nowrap; }
+ .digital-market-wrapper .market-list__block-table tbody tr td .price-change,
+ .digital-market-wrapper .market-list__block-table tbody tr td .market-capital {
+ display: flex;
+ justify-content: flex-end !important; }
+ .digital-market-wrapper .market-list__block-table tbody tr .market-chart .highcharts-container .highcharts-root {
+ height: 80%; }
.digital-market-wrapper .market-list__block-table .table-row {
cursor: text !important; }
.digital-market-wrapper .market-list__block-table .table-row:hover {
background-color: unset !important; }
.digital-market-wrapper .market-list__block-table .table-row .sticky-col {
+ width: 15%;
color: var(--labels_important-active-labels-text-graphics);
cursor: pointer; }
.digital-market-wrapper .market-list__block-table .table-row .sticky-col:hover {
opacity: 0.5; }
+ .digital-market-wrapper .market-list__block-table .table-row .sticky-col .coin-symbol {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row,
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .ant-space {
+ display: flex;
+ align-items: center;
+ justify-content: center; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row .action_notification-text,
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .ant-space .action_notification-text {
+ padding: 1px 5px;
+ text-decoration: none !important;
+ width: fit-content !important;
+ border: 1px solid var(--specials_buttons-links-and-highlights);
+ border-radius: 3px;
+ text-transform: capitalize;
+ color: var(--specials_buttons-links-and-highlights);
+ text-wrap: nowrap; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row .action_notification-text:hover,
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .ant-space .action_notification-text:hover {
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--labels_important-active-labels-text-graphics);
+ cursor: pointer; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row-disable .action_notification-text,
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row-disable:hover .action_notification-text {
+ opacity: 0.3; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row-disable .action_notification-text:hover,
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .market-asset-row-disable:hover .action_notification-text:hover {
+ background-color: transparent !important;
+ cursor: text;
+ color: var(--specials_buttons-links-and-highlights) !important; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .ant-dropdown-open {
+ border-radius: 8px; }
+ .digital-market-wrapper .market-list__block-table .table-row .td-trade .ant-dropdown-open .action_notification-text {
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ cursor: pointer; }
.digital-market-wrapper .custom-header-wrapper {
margin-top: 10%;
@@ -5485,12 +5876,193 @@ table th {
border-bottom: 1px solid var(--labels_important-active-labels-text-graphics);
margin-bottom: 10%; }
+.digital-market-wrapper .market-wrapper .market-button-container {
+ margin-top: 2%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between; }
+ .digital-market-wrapper .market-wrapper .market-button-container .market-buttons {
+ width: 35%;
+ display: flex;
+ gap: 5px; }
+ .digital-market-wrapper .market-wrapper .market-button-container .market-buttons .opacity-full {
+ opacity: 1; }
+ .digital-market-wrapper .market-wrapper .market-button-container .market-buttons .opacity-half {
+ opacity: 0.4; }
+ .digital-market-wrapper .market-wrapper .market-button-container .market-buttons .market-btn {
+ width: max-content;
+ display: flex;
+ padding: 1% 2%;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ border-radius: 5px;
+ align-items: center; }
+ .digital-market-wrapper .market-wrapper .market-button-container .market-buttons .market-btn:hover {
+ cursor: pointer; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search {
+ width: 20% !important;
+ background-color: var(--base_secondary-navigation-bar);
+ border: 1px solid transparent !important; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search .trade_tabs-search-field {
+ background-color: var(--base_secondary-navigation-bar); }
+ .digital-market-wrapper .market-wrapper .market-button-container .search .trade_tabs-search-field .field-content .field-children input {
+ width: 8rem !important; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search .open-icon {
+ width: 1.5rem;
+ text-align: center;
+ background-color: var(--base_background); }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container {
+ width: 32%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 2px;
+ padding: 0.5% 1% 0.5% 0;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics); }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field {
+ margin: unset;
+ border-radius: 2px;
+ width: 100%; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content {
+ width: 100%; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content .field-content-outline:before,
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content .field-content-outline:after {
+ background: unset !important; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content .field-children input {
+ width: 15rem; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content .clear-field {
+ right: 5px;
+ bottom: 0.6rem; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search:hover {
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important; }
+
+.digital-market-wrapper .highlight-toggle-button {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-bottom: 2%; }
+ .digital-market-wrapper .highlight-toggle-button .highlight-text {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .digital-market-wrapper .highlight-toggle-button .ant-switch-checked,
+ .digital-market-wrapper .highlight-toggle-button .ant-switch {
+ border: 2px solid var(--labels_inactive-button);
+ background-color: var(--base_secondary-navigation-bar); }
+ .digital-market-wrapper .highlight-toggle-button .ant-switch-checked .ant-switch-handle,
+ .digital-market-wrapper .highlight-toggle-button .ant-switch .ant-switch-handle {
+ width: 10px; }
+ .digital-market-wrapper .highlight-toggle-button .ant-switch-checked {
+ border: 2px solid var(--labels_important-active-labels-text-graphics) !important; }
+ .digital-market-wrapper .highlight-toggle-button .ant-switch-checked .ant-switch-handle {
+ left: calc(100% - 12px) !important; }
+ .digital-market-wrapper .highlight-toggle-button .toggle-inactive .ant-switch-handle::before {
+ background-color: var(--labels_inactive-button);
+ bottom: 3px; }
+ .digital-market-wrapper .highlight-toggle-button .toggle-active .ant-switch-handle::before {
+ background-color: var(--labels_important-active-labels-text-graphics);
+ bottom: 3px; }
+
+.assets-card-container {
+ display: flex;
+ gap: 20px;
+ min-height: 20%; }
+ .assets-card-container .loading-anime {
+ margin-top: 3%;
+ height: 35px;
+ width: 100%;
+ border-radius: 7px;
+ animation: mymove 1s infinite; }
+ .assets-card-container .ant-card-head-title {
+ padding: unset !important;
+ font-weight: bold; }
+ .assets-card-container .ant-card-body {
+ padding: 0 12px !important; }
+ .assets-card-container .gainer-asset-card {
+ border-top: 2px solid var(--trading_buying-related-elements) !important; }
+ .assets-card-container .losers-asset-card {
+ border-top: 2px solid var(--trading_selling-related-elements) !important; }
+ .assets-card-container .new-asset-card {
+ border-top: 2px solid var(--labels_secondary-inactive-label-text-graphics) !important; }
+ .assets-card-container .gainer-icon {
+ margin-top: unset;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(1) {
+ margin-top: 1%; }
+ .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(1) .icon_title-svg {
+ width: 100%;
+ height: 50%; }
+ .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(1) .icon_title-svg svg {
+ width: 100%;
+ height: 50%; }
+ .assets-card-container .gainer-icon .edit-wrapper__container:nth-child(2) .icon_title-text {
+ margin: unset !important;
+ padding-top: unset !important; }
+ .assets-card-container .digital-assets-cards {
+ width: 35%;
+ background-color: var(--base_wallet-sidebar-and-popup);
+ color: var(--labels_important-active-labels-text-graphics);
+ border: unset;
+ padding: 1%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px; }
+ .assets-card-container .digital-assets-cards .ant-card-head {
+ background-color: var(--base_wallet-sidebar-and-popup);
+ text-align: center;
+ border: unset; }
+ .assets-card-container .digital-assets-cards .assets-wrapper {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 1%;
+ font-size: 12px !important; }
+ .assets-card-container .digital-assets-cards .assets-wrapper .asset-container {
+ display: flex;
+ gap: 5px; }
+ .assets-card-container .digital-assets-cards .assets-wrapper .asset-container .asset-symbol {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .assets-card-container .digital-assets-cards .assets-wrapper .assets-value {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end; }
+ .assets-card-container .digital-assets-cards .assets-wrapper .assets-value .gainer-percentage {
+ display: flex;
+ align-items: center;
+ color: var(--trading_buying-related-elements); }
+ .assets-card-container .digital-assets-cards .assets-wrapper .assets-value .loser-percentage {
+ color: var(--trading_selling-related-elements); }
+ .assets-card-container .digital-assets-cards .assets-wrapper .right-arrow-icon {
+ display: none; }
+ .assets-card-container .digital-assets-cards .assets-wrapper:hover {
+ background-color: var(--calculated_super-pale_label-text-graphics);
+ border-radius: 5px;
+ cursor: pointer; }
+ .assets-card-container .digital-assets-cards .assets-wrapper:hover .right-arrow-icon {
+ display: block; }
+
.trade_tabs-container .market-pairs {
color: var(--labels_important-active-labels-text-graphics); }
@media screen and (max-width: 786px) {
.layout-mobile .digital-market-wrapper .view-more-btn {
- padding: 10%; } }
+ padding: 5%; } }
+
+@media (min-width: 1920px) {
+ .digital-market-wrapper .market-list__block-table .table-row .market-asset-row .action_notification-text,
+ .digital-market-wrapper .market-list__block-table .table-row .ant-space .action_notification-text {
+ padding: 5px; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search {
+ width: 15% !important; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search .trade_tabs-search-field .field-content .field-children input {
+ width: 8rem !important; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container {
+ width: 23%; }
+ .digital-market-wrapper .market-wrapper .market-button-container .search-field-container .trade_tabs-search-field .field-content .field-children input {
+ width: 15rem; } }
.trade_tabs-container {
color: var(--labels_secondary-inactive-label-text-graphics);
@@ -7410,6 +7982,9 @@ table th {
.hollaex-token-wrapper .token-wrapper {
width: 65%;
height: 100%; }
+ .hollaex-token-wrapper .token-wrapper .asset-icon {
+ position: relative;
+ top: 5px; }
.hollaex-token-wrapper .token-wrapper .link {
color: var(--specials_buttons-links-and-highlights);
text-decoration: underline;
@@ -8107,7 +8682,7 @@ table th {
font-size: 13px; }
.address_book_popup_wrapper .address-book-popup-wrapper {
- width: 45rem !important; }
+ width: 55rem !important; }
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-header-content .address-book-title,
.address_book_popup_wrapper .address-book-popup-wrapper .name-address-header-content .address-book-title,
@@ -8392,27 +8967,44 @@ table th {
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field,
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field,
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field {
- width: 90%;
+ width: 100%;
height: 35%;
display: flex;
justify-content: space-between; }
- .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
- .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn {
- width: 95%; }
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input {
+ width: 75%; }
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .name-address-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .confirm-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input .selected-asset-btn,
+ .address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input .selected-asset-btn {
+ width: 95%; }
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .label-content,
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .label-content,
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .label-content,
@@ -8462,7 +9054,7 @@ table th {
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .network-field .network-input,
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .network-input,
.address_book_popup_wrapper .remove-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .network-field .network-input {
- width: 60%; }
+ width: 75%; }
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .opacity-100,
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .network-field .opacity-100,
.address_book_popup_wrapper .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .opacity-100,
@@ -8565,7 +9157,7 @@ table th {
padding: 0.5%;
border-radius: 5px;
margin-right: 10px;
- width: 4.5rem;
+ width: 7.5rem;
display: flex;
align-items: center;
justify-content: center;
@@ -9113,7 +9705,7 @@ table th {
border: 1px solid var(--labels_secondary-inactive-label-text-graphics); }
.add_withdrawal_address_wrapper .ReactModal__Content {
- width: 50rem; }
+ width: 60rem; }
.layout-mobile .address-book-popup-wrapper {
width: 100% !important;
@@ -9258,13 +9850,21 @@ table th {
.layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .currency-label {
width: 22%; }
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-method-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-method-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-network-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-network-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .address-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .address-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .optional-tag-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .optional-tag-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-method-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .select-network-field .select-field .asset-input,
.layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .network-input,
- .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .network-input {
+ .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .address-field .select-field .asset-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .network-input,
+ .layout-mobile .address-book-popup-wrapper .address-book-content .generate-address-form-wrapper .optional-tag-field .select-field .asset-input {
width: 100%; }
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-method-field .input-label-field,
.layout-mobile .address-book-popup-wrapper .address-book-popup-wrapper .generate-address-form-wrapper .select-network-field .input-label-field,
@@ -9352,59 +9952,3705 @@ table th {
.address-book-form .address-book-content-wrapper .address-book-table-wrapper .table-content .table-wrapper .table_body-wrapper .table_body-row .address-field-wrapper .address-content span {
width: 80%; } }
-.sidebar-row {
- min-height: 3rem;
- min-width: 10rem; }
- .sidebar-row .cell-wrapper {
- padding-left: 1rem;
- padding-right: 1rem; }
+.P2pOrder {
+ background-color: var(--base_wallet-sidebar-and-popup); }
-.app_bar .sidebar-row {
- min-width: 3rem; }
+.greenButtonP2P {
+ background-color: var(--specials_checks-okay-done) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none; }
-.sidebar-bottom-wrapper {
- min-height: 6rem;
- max-height: 6rem;
- background-color: var(--base_top-bar-navigation);
- color: var(--calculated_base_top-bar-navigation_text);
- width: 100%;
- padding: 0.5rem 0.5rem 0.8rem 0.5rem;
- justify-content: space-around; }
- .sidebar-bottom-wrapper .sidebar-bottom-button-account .sidebar-bottom-icon svg g .assets-icon-tab {
- opacity: 0.5; }
- .sidebar-bottom-wrapper .sidebar-bottom-button {
- justify-content: space-between;
- flex-direction: column;
- display: flex;
- align-items: center;
- width: 20%; }
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .post-icon,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .chat-0,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .account-svg-1,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .assets-icon-tab,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .onramp-icon {
- fill: var(--labels_secondary-inactive-label-text-graphics); }
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .tab-wallet0,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .trade-active-2,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .chat-0,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .assets-icon-tab {
- stroke: var(--labels_secondary-inactive-label-text-graphics); }
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .tab-wallet0,
- .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active {
- fill: transparent; }
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .post-icon,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .chat-0,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .account-svg-1,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .assets-icon-tab,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .onramp-icon {
- fill: var(--calculated_base_top-bar-navigation_text); }
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .tab-wallet0,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .trade-active-2,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .chat-0,
+.redButtonP2P {
+ background-color: var(--trading_selling-related-elements) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none; }
+
+.redTextP2P {
+ color: var(--trading_selling-related-elements) !important; }
+
+.greenTextP2P {
+ color: var(--specials_checks-okay-done) !important; }
+
+.greyButtonP2P {
+ background-color: var(--labels_inactive-button) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none; }
+
+.whiteTextP2P {
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+
+.purpleTextP2P {
+ color: var(--specials_buttons-links-and-highlights) !important; }
+
+.purpleButtonP2P {
+ background-color: var(--specials_buttons-links-and-highlights) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none; }
+
+.greyTextP2P {
+ color: var(--labels_inactive-button); }
+
+.openGreyTextP2P {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+
+.transparentButtonP2P {
+ background-color: transparent !important;
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+
+.postDealP2PModel {
+ background-color: var(--base_secondary-navigation-bar) !important; }
+
+.mobile-view-p2p {
+ zoom: 0.5;
+ position: relative; }
+
+.mobile-view-p2p-post {
+ zoom: 0.4;
+ position: relative; }
+
+.p2p-summary-container {
+ width: 85%;
+ padding: 20px;
+ height: max-content;
+ margin-left: auto;
+ margin-right: auto; }
+ .p2p-summary-container .p2p-title {
+ text-align: center;
+ font-size: 19px; }
+ .p2p-summary-container .toggle-buy-text {
+ color: var(--trading_buying-related-elements);
+ font-weight: bold; }
+ .p2p-summary-container .toggle-sell-text {
+ color: var(--trading_selling-related-elements);
+ font-weight: bold; }
+ .p2p-summary-container .toggle-buy {
+ background-color: var(--trading_buying-related-elements); }
+ .p2p-summary-container .toggle-sell {
+ background-color: var(--trading_selling-related-elements); }
+ .p2p-summary-container .p2p-order-wrapper {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto; }
+ .p2p-summary-container .p2p-post-deal-container {
+ min-height: 30rem !important; }
+ .p2p-summary-container .no-deals-data {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto; }
+ .p2p-summary-container .p2p-no-deals-container {
+ min-height: fit-content !important; }
+ .p2p-summary-container .p2p-tab-container,
+ .p2p-summary-container .p2p-order-tab-container,
+ .p2p-summary-container .p2p-post-deal-container,
+ .p2p-summary-container .p2p-order-wrapper {
+ min-height: 50rem;
+ width: 100%;
+ padding: 20px;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container {
+ display: flex;
+ text-align: center;
+ text-wrap: nowrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-top: 10px; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions {
+ display: flex;
+ gap: 10px;
+ font-size: 12px !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-weight: bold; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .p2p-select-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .p2p-select-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .p2p-select-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .p2p-select-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field {
+ display: flex;
+ align-items: center; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector {
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ height: 20px;
+ font-size: 12px;
+ background-color: transparent;
+ border-color: var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-search input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-search input {
+ height: 100% !important;
+ font-size: 12px; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector .ant-select-selection-item {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .ant-input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .ant-input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .ant-input {
+ display: flex;
+ align-items: center;
+ border: unset !important;
+ border-bottom: 1px solid var(--calculated_important-border) !important;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 20px;
+ font-size: 12px;
+ box-shadow: unset; }
+ .p2p-summary-container .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-search-container .p2p-amount .ant-input input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-order-search-container .p2p-amount .ant-input input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-search-container .p2p-amount .ant-input input {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 12px !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container {
+ display: flex;
+ font-weight: normal !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-stake-table-header {
+ font-family: 'Raleway Extrabold'; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr .p2p-vendor-header .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr .p2p-vendor-header .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr .p2p-vendor-header .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-stake-table-header tr .p2p-vendor-header .edit-wrapper__container {
+ margin-left: 15%; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ position: relative; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button {
+ padding: 10px 0; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .price-value:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .payment-methods:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .price-value:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .payment-methods:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount {
+ display: flex; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .p2p-avaliable-price,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .p2p-avaliable-price {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px;
+ flex-direction: row; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .avaliable-amount .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .vendor-title .p2p-limit-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-avaliable-price .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .avaliable-amount .p2p-limit-price .edit-wrapper__container {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-table-row .trade-button,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-table-body-container .p2p-expendable-row .trade-button {
+ width: 10%;
+ text-align: end; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .payment-time-limit,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .deal-terms,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .payment-time-limit,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .deal-terms,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .payment-time-limit,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .deal-terms,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .payment-time-limit,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .deal-terms,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .payment-time-limit,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .deal-terms,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .payment-time-limit,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .deal-terms,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .payment-time-limit,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-description .deal-terms,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .payment-time-limit,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-terms-condition .deal-terms {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description {
+ display: flex;
+ flex-direction: column;
+ margin-top: 5%; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description .vendor-profile-description .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description .vendor-profile-description .edit-wrapper__container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description .vendor-profile-description .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .title-description .vendor-profile-description .edit-wrapper__container {
+ color: var(--specials_buttons-links-and-highlights);
+ text-decoration: underline;
+ cursor: pointer; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container {
+ padding: 10px;
+ width: 70%; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container {
+ display: flex;
+ width: 80%;
+ gap: 15px;
+ margin-bottom: 5px;
+ justify-content: space-between;
+ align-items: flex-start; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-title,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-title,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-title,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-title {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .add-payment-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .add-payment-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .add-payment-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .add-payment-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .add-payment-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .add-payment-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .add-payment-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .add-payment-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .add-payment-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .add-payment-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .add-payment-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .add-payment-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .add-payment-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .add-payment-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .add-payment-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .add-payment-container {
+ width: 58%; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .error-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .error-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .error-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .error-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .error-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .error-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .error-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .error-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .error-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .error-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .error-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .error-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .error-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .error-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .error-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .error-field {
+ border: 2px solid var(--specials_notifications-alerts-warnings) !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ background-color: var(--base_wallet-sidebar-and-popup) !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container input,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-select-arrow,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container input,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .payment-method-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-selector,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ background-color: var(--base_wallet-sidebar-and-popup) !important;
+ border: unset; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field .ant-input-suffix,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container .ant-input-suffix {
+ text-transform: uppercase;
+ text-decoration: underline;
+ color: var(--specials_buttons-links-and-highlights); }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field-container,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .payment-method .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-spent .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .p2p-amount-receive .amount-receive-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .payment-method-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-spent-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .amount-receive-field-container {
+ width: 58%; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container {
+ height: 20px; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container .error-message,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container .error-message,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container .error-message,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .error-field-container .error-message {
+ color: var(--specials_notifications-alerts-warnings); }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container {
+ justify-content: flex-end;
+ margin-top: 15px;
+ gap: 10px; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .greyButtonP2P,
+ .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .greyButtonP2P,
+ .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .greyButtonP2P,
+ .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .greyButtonP2P {
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ background-color: var(--base_wallet-sidebar-and-popup) !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-buy-sell-toggle,
+ .p2p-summary-container .p2p-order-tab-container .p2p-buy-sell-toggle,
+ .p2p-summary-container .p2p-post-deal-container .p2p-buy-sell-toggle,
+ .p2p-summary-container .p2p-order-wrapper .p2p-buy-sell-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ margin: 2% 0;
+ font-size: 18px; }
+ .p2p-summary-container .p2p-tab-container .crypto-assets,
+ .p2p-summary-container .p2p-order-tab-container .crypto-assets,
+ .p2p-summary-container .p2p-post-deal-container .crypto-assets,
+ .p2p-summary-container .p2p-order-wrapper .crypto-assets {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 3%;
+ font-size: 12px;
+ gap: 15px; }
+ .p2p-summary-container .p2p-tab-container .crypto-assets .asset,
+ .p2p-summary-container .p2p-order-tab-container .crypto-assets .asset,
+ .p2p-summary-container .p2p-post-deal-container .crypto-assets .asset,
+ .p2p-summary-container .p2p-order-wrapper .crypto-assets .asset {
+ padding: 0 1%; }
+ .p2p-summary-container .p2p-tab-container .crypto-assets .asset:hover,
+ .p2p-summary-container .p2p-order-tab-container .crypto-assets .asset:hover,
+ .p2p-summary-container .p2p-post-deal-container .crypto-assets .asset:hover,
+ .p2p-summary-container .p2p-order-wrapper .crypto-assets .asset:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-tab-container .crypto-assets .selected-asset,
+ .p2p-summary-container .p2p-order-tab-container .crypto-assets .selected-asset,
+ .p2p-summary-container .p2p-post-deal-container .crypto-assets .selected-asset,
+ .p2p-summary-container .p2p-order-wrapper .crypto-assets .selected-asset {
+ border: 1px solid var(--calculated_important-border);
+ border-radius: 5px; }
+ .p2p-summary-container .p2p-tab-container .ant-steps-item-active .ant-steps-item-content,
+ .p2p-summary-container .p2p-order-tab-container .ant-steps-item-active .ant-steps-item-content,
+ .p2p-summary-container .p2p-post-deal-container .ant-steps-item-active .ant-steps-item-content,
+ .p2p-summary-container .p2p-order-wrapper .ant-steps-item-active .ant-steps-item-content {
+ background-color: transparent; }
+ .p2p-summary-container .p2p-tab-container .buySideP2P,
+ .p2p-summary-container .p2p-order-tab-container .buySideP2P,
+ .p2p-summary-container .p2p-post-deal-container .buySideP2P,
+ .p2p-summary-container .p2p-order-wrapper .buySideP2P {
+ background-color: var(--trading_buying-related-elements);
+ color: var(--calculated_base_top-bar-navigation_text) !important; }
+ .p2p-summary-container .p2p-tab-container .sellSideP2P,
+ .p2p-summary-container .p2p-order-tab-container .sellSideP2P,
+ .p2p-summary-container .p2p-post-deal-container .sellSideP2P,
+ .p2p-summary-container .p2p-order-wrapper .sellSideP2P {
+ background-color: var(--trading_selling-related-elements);
+ color: var(--calculated_base_top-bar-navigation_text) !important; }
+ .p2p-summary-container .p2p-tab-container .subTable,
+ .p2p-summary-container .p2p-order-tab-container .subTable,
+ .p2p-summary-container .p2p-post-deal-container .subTable,
+ .p2p-summary-container .p2p-order-wrapper .subTable {
+ background-color: var(--base_background); }
+ .p2p-summary-container .p2p-tab-container .postDealButton,
+ .p2p-summary-container .p2p-order-tab-container .postDealButton,
+ .p2p-summary-container .p2p-post-deal-container .postDealButton,
+ .p2p-summary-container .p2p-order-wrapper .postDealButton {
+ margin-top: 3%; }
+ .p2p-summary-container .p2p-order-tab-container .order-status-button-container {
+ margin-bottom: 3%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5%; }
+ .p2p-summary-container .p2p-order-tab-container .order-status-button-container .transaction-button {
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 0.5% 1.5%;
+ border-radius: 5px;
+ width: 22%;
+ text-align: center; }
+ .p2p-summary-container .p2p-order-tab-container .order-status-button-container .transaction-button-active {
+ border: 1px solid var(--calculated_important-border); }
+ .p2p-summary-container .p2p-order-tab-container .order-status-button-container .transaction-button:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+ align-items: flex-start;
+ width: 90%; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field {
+ display: flex;
+ width: fit-content; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters {
+ width: fit-content;
+ display: flex;
+ gap: 10px;
+ padding: 0 2%;
+ align-items: center;
+ border-right: 2px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .crypto-field .ant-select-selection-item div:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .crypto-field .ant-select-selection-item div:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .crypto-field .ant-select-selection-item div:nth-child(1) {
+ gap: 5px !important;
+ align-items: center;
+ margin-bottom: 5%; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 14px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select-selector,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select-selector {
+ height: 20px;
+ width: 7rem;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 5px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select .ant-select-selection-item,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select-selector .ant-select-selection-item {
+ font-size: 12px;
+ line-height: unset; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select-selector .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select-selector .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select .ant-select-arrow,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select-selector .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select .ant-select-selection-placeholder,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select-selector .ant-select-selection-placeholder,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select .ant-select-selection-placeholder,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter .ant-select-selector .ant-select-selection-placeholder,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select .ant-select-selection-placeholder,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter .ant-select-selector .ant-select-selection-placeholder {
+ line-height: 20px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .ant-select-selector {
+ height: 20px;
+ width: 10rem; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter .crypto-field .ant-select-selection-item div:nth-child(1) {
+ align-items: normal;
+ position: relative;
+ top: 0px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters {
+ width: fit-content;
+ display: flex;
+ gap: 5px;
+ padding: 0 2%; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters .ant-radio-group {
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ font-size: 13px; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters .ant-radio-group .date-text {
+ text-wrap: nowrap;
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ background: transparent !important;
+ border: none; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters .ant-radio-group .ant-radio-button-wrapper::before {
+ background-color: transparent; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters .ant-radio-group .date-text:hover {
+ cursor: pointer;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .date-filters .ant-radio-group .active-date-text {
+ border: 1px solid var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-text-active {
+ border: 1px solid var(--calculated_important-border);
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-text {
+ padding: 0 1%; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-text:hover {
+ cursor: pointer;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container {
+ display: flex;
+ gap: 15px;
+ margin: 1% 0 0 1%; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker {
+ margin-bottom: unset !important; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input {
+ min-height: unset; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker {
+ border: 1px solid var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker .ant-picker-clear {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker-separator,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker-input input {
+ background-color: var(--base_wallet-sidebar-and-popup) !important;
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker:hover,
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper {
+ margin-top: 4%; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table {
+ border: none;
+ border-collapse: 'collapse'; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead tr,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr {
+ border-bottom: 1px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead tr {
+ color: var(--labels_secondary-inactive-label-text-graphics);
+ font-size: 12px; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead tr .trade-button-header .edit-wrapper__container {
+ margin-left: 5%; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead tr th {
+ padding-bottom: 0.5%; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table .table-row-inactive td:not(:last-child) {
+ opacity: 0.5; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders {
+ padding: 0.5% 0;
+ width: 15%;
+ font-weight: normal; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .active-green,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .active-green {
+ color: var(--specials_checks-okay-done); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .active-orange,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .active-orange {
+ color: var(--specials_pending-waiting-caution); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .active-yellow,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .active-yellow {
+ color: var(--specials_my-username-in-chat); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .inactive-text,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .inactive-text {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .crypto-amount-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .crypto-amount-detail {
+ display: flex;
+ gap: 5px;
+ align-items: center; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status .transaction-status-detail,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .transaction-status-detail {
+ display: flex;
+ gap: 5px;
+ text-transform: capitalize; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-sell-order-button,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-buy-order-button {
+ margin-left: 5%;
+ padding: 0.5% 7%;
+ width: fit-content;
+ font-size: 12px;
+ height: 25px; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-buy-order-button {
+ background-color: var(--specials_checks-okay-done); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-sell-order-button {
+ background-color: var(--trading_selling-related-elements); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-sell-order-button:hover,
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button .p2p-buy-order-button:hover {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .purpleTextP2P {
+ color: var(--specials_buttons-links-and-highlights) !important;
+ text-transform: uppercase;
+ text-decoration: underline; }
+ .p2p-summary-container .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders .purpleTextP2P:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-mydeals-wrapper {
+ height: 100%;
+ overflow-y: auto;
+ padding: 20px;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .p2p-summary-container .p2p-mydeals-wrapper .ant-checkbox-checked .ant-checkbox-inner::after {
+ border-color: var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .ant-checkbox-checked::after {
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .ant-checkbox-checked,
+ .p2p-summary-container .p2p-mydeals-wrapper .ant-checkbox-inner {
+ background-color: transparent;
+ border-color: var(--calculated_secondary-border) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-content-wrapper {
+ display: flex;
+ gap: 10px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-content-wrapper .whiteTextP2P {
+ position: relative;
+ top: 5px;
+ color: var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-content-wrapper .purpleButtonP2P {
+ background-color: var(--specials_buttons-links-and-highlights) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: none; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper {
+ display: flex;
+ margin-top: 20px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper {
+ border: none;
+ border-collapse: collapse;
+ font-size: 12px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-bottom-border,
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row {
+ position: relative; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .ant-checkbox-checked .ant-checkbox-inner,
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .ant-checkbox-inner {
+ background-color: transparent;
+ border-color: var(--calculated_secondary-border) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .ant-checkbox-input:hover {
+ border-color: var(--calculated_secondary-border) !important; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .buySideP2P .ant-btn,
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .sellSideP2P .ant-btn {
+ height: 25px !important;
+ font-size: 12px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .edit-deal-btn {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ font-size: 12px;
+ height: fit-content; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .edit-deal-btn:hover {
+ opacity: 0.5; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .buySideP2P .ant-btn {
+ background-color: var(--specials_checks-okay-done) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: unset; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .sellSideP2P .ant-btn {
+ background-color: var(--trading_selling-related-elements) !important;
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ border: unset; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .w-fit-content {
+ width: fit-content;
+ padding-bottom: 1%; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .pay-methods {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 5px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .avaliable-amount-detail {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .p2p-mydeals-table-content-wrapper .table-row .custom-circle {
+ margin-top: 2%;
+ width: 12px;
+ height: 12px;
+ background-color: var(--specials_checks-okay-done);
+ border-radius: 25px; }
+ .p2p-summary-container .p2p-profile-wrapper {
+ height: 100%;
+ padding: 20px;
+ overflow-y: auto;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper {
+ display: flex;
+ flex-direction: column; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .display-label {
+ font-weight: bold;
+ text-transform: uppercase; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .profile-card-wrapper {
+ display: flex;
+ justify-content: center; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .profile-card-wrapper .fs-14 {
+ font-size: 14px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .profile-card-wrapper .fs-18 {
+ font-size: 18px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .profile-card-wrapper .profile-card-content-wrapper {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 10px;
+ width: 70%; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .profile-card-wrapper .profile-card-content-wrapper .profile-cards {
+ padding: 20px;
+ width: 100%;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .p2p-btn-wrapper {
+ display: flex;
+ flex-direction: row;
+ gap: 10px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .p2p-btn-wrapper .active-btn {
+ border: 1px solid var(--labels_important-active-labels-text-graphics) !important; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .p2p-btn-wrapper .method-btn,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .p2p-btn-wrapper .feedback-btn {
+ margin: 10px 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: fit-content;
+ border-radius: 5px;
+ font-weight: bold;
+ cursor: pointer;
+ text-align: center; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .flex-1 {
+ flex: 1 1 0%; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .flex-1 .pay-method-desc-wrapper {
+ width: 80%; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .flex-1 .pay-method-desc-wrapper .pay-method-label {
+ font-size: 15px;
+ font-weight: bold;
+ margin-bottom: 10px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields {
+ display: flex;
+ gap: 5px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .pay-field {
+ width: 40%;
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ cursor: pointer; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .edit-txt,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .delete-txt {
+ position: relative;
+ top: 5px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .edit-txt .edit-wrapper__container,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .delete-txt .edit-wrapper__container {
+ text-decoration: underline; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .edit-txt:hover,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .delete-txt:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .pending-label,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .unverified-label,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .rejected-label,
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .verified-label {
+ position: relative;
+ top: 5px;
+ margin-left: 5px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .payment-method-wrapper .payment-fields .anticon-clock-circle svg {
+ position: relative;
+ top: 5px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .no-feedback {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 10px;
+ border-radius: 5px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper {
+ border: none;
+ border-collapse: collapse; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper .table-header-wrapper {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper .loading-anime {
+ height: 20px;
+ width: 75%;
+ margin: 2%;
+ border-radius: 7px;
+ animation: mymove 3s infinite; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper .table-row {
+ position: relative;
+ padding: 10px;
+ border-bottom: 1px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper .table-row .ant-rate-star-zero .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important; }
+ .p2p-summary-container .p2p-profile-wrapper .p2p-profile-content-wrapper .feedback-wrapper .feedback-table-wrapper tbody {
+ font-size: 12px; }
+ .p2p-summary-container .p2p-post-deal-container {
+ padding: unset !important; }
+ .p2p-summary-container .p2p-post-deal-container .update-deal-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background-color: rgba(67, 112, 235, 0.2);
+ font-size: 17px;
+ padding: 5px; }
+ .p2p-summary-container .p2p-post-deal-container .update-deal-container .p2p-update-deal {
+ text-transform: uppercase; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-details-container {
+ padding: 20px; }
+ .p2p-summary-container .p2p-post-deal-container .post-deal-description,
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container {
+ padding: 0 4%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between; }
+ .p2p-summary-container .p2p-post-deal-container .post-deal-description .terms-content,
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .terms-content {
+ width: 20%;
+ text-align: center; }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container {
+ margin-top: 2%; }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .custom-step {
+ padding: 3px 10px;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ border-radius: 20px; }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .custom-step-active {
+ border: 1.5px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .step-active {
+ border-color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .step-one {
+ margin-left: 7%; }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .step-three {
+ margin-right: 7%; }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .custom-line {
+ width: 90%;
+ height: 1px;
+ background-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .custom-step-container .custom-line-active {
+ height: 1.5px;
+ background-color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field {
+ width: 100%;
+ font-size: 12px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-selector {
+ font-size: 12px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 25px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-selector .ant-select-selection-item,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-selector .ant-select-selection-placeholder {
+ line-height: 25px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-selector:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-selector {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-custom-input-field .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .toggle-container {
+ z-index: 1;
+ padding: 1% 2%;
+ display: flex;
+ gap: 10px;
+ width: max-content;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container {
+ position: relative;
+ bottom: 2rem;
+ display: flex;
+ width: 100%;
+ padding: 3%;
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ font-size: 12px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-buy-sell-field {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10%;
+ padding: 0 4% 0 0;
+ border-right: 2px dotted var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-buy-sell-field .crypto-text .edit-wrapper__container {
+ margin-top: 5%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-buy-sell-field .p2p-buy-sell-arrow-field .anticon-arrow-right {
+ font-size: 20px;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container {
+ padding: 0 0 0 3%;
+ display: flex;
+ align-items: center;
+ gap: 10px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field {
+ display: flex;
+ flex-direction: column;
+ gap: 10px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .currency-field {
+ width: 82%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .currency-field .ant-input-number {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .currency-field .ant-input-number input {
+ height: 25px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .currency-field .ant-input-number:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .currency-field .ant-input-number-focused {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .p2p-price-field .p2p-custom-input-field {
+ width: 82%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .equal-symbol {
+ font-size: 25px;
+ position: relative;
+ left: 5px;
+ font-size: 26px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .exchange-rate-container,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .dynamic-rate-container {
+ margin-left: 5%;
+ width: 48%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .exchange-rate-container .p2p-assets-rate,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .dynamic-rate-container .p2p-assets-rate {
+ font-size: 22px;
+ font-weight: bold;
+ display: flex;
+ align-items: center; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .exchange-rate-container .p2p-assets-rate sup,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-trade-field-container .p2p-price-field-container .dynamic-rate-container .p2p-assets-rate sup {
+ font-size: 9px;
+ margin-left: 2%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field {
+ justify-content: center;
+ gap: 10px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-text {
+ font-weight: bold;
+ text-transform: uppercase; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .buy-sell-description-text {
+ margin-bottom: 1%;
+ font-size: 11px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container {
+ display: flex;
+ flex-direction: column; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .p2p-total-amount-wrapper {
+ padding-bottom: 5%;
+ border-bottom: 2px dotted var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .p2p-total-amount-wrapper .total-amount-field {
+ display: flex;
+ flex-direction: column;
+ padding: 3% 0; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .p2p-total-amount-wrapper .total-amount-input-field .ant-input-affix-wrapper {
+ width: 90%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .p2p-total-amount-wrapper .total-amount-input-field .ant-input-affix-wrapper .ant-input-suffix div {
+ display: flex;
+ gap: 5px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper {
+ background-color: transparent;
+ height: 25px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper .ant-input,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper .ant-input-suffix {
+ color: var(--labels_important-active-labels-text-graphics);
+ background-color: transparent; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .total-amount-input-field .ant-input-affix-wrapper:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container {
+ padding: 5% 0; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper {
+ width: 100%;
+ display: flex;
+ gap: 3%;
+ align-items: flex-start; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .min-input-field,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .max-input-field {
+ padding: unset !important;
+ margin-top: 5%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .min-input-field .ant-input-affix-wrapper,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .max-input-field .ant-input-affix-wrapper {
+ padding: 3%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .value-description {
+ margin-top: 2%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-buy-sell-field .total-amount-order-container .order-limit-container .max-min-field-wrapper .tilt-symbol {
+ font-size: 25px;
+ font-weight: bold; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 0 0 0 7%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-text {
+ font-weight: bold; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-list {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-list .payment-method {
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ padding: 2% 5%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-list .payment-method:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-list .edit-button:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .payment-receive-container .payment-list .edit-link {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .select-region-container .region-title {
+ font-weight: bold;
+ text-transform: uppercase; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-payment-method-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field {
+ width: 80%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper {
+ display: flex;
+ flex-direction: column;
+ padding: 3%;
+ border-right: 2px dotted var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .terms-input-field .terms-title {
+ font-weight: bold;
+ margin-bottom: 2%; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .terms-input-field .terms-and-condition-field {
+ margin-top: 5%;
+ font-size: 12px;
+ background-color: transparent;
+ box-shadow: none; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .terms-input-field .terms-and-condition-field:hover,
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .terms-input-field .terms-and-condition-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .terms-input-field .terms-and-condition-error-field {
+ border-color: var(--specials_notifications-alerts-warnings) !important; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-conditions-wrapper .error-text {
+ color: var(--specials_notifications-alerts-warnings);
+ height: 10px; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .response-field-wrapper {
+ border: none !important; }
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .response-field-wrapper .terms-input-field .terms-and-condition-field {
+ margin: unset !important; }
+ .p2p-summary-container .post-deal-button-wrapper {
+ margin-top: 3%;
+ display: flex;
+ gap: 15px;
+ justify-content: center;
+ align-items: flex-end; }
+ .p2p-summary-container .post-deal-button-wrapper .back-btn,
+ .p2p-summary-container .post-deal-button-wrapper .next-btn {
+ width: 35%;
+ height: 40px; }
+ .p2p-summary-container .back-to-orders-link {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ color: var(--specials_buttons-links-and-highlights);
+ margin-bottom: 1%;
+ font-size: 14px; }
+ .p2p-summary-container .back-to-orders-link .edit-wrapper__container {
+ text-decoration: underline !important; }
+ .p2p-summary-container .back-to-order-text {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .back-to-order-text .edit-wrapper__container {
+ text-decoration: none !important; }
+ .p2p-summary-container .back-text:hover {
+ cursor: pointer; }
+ .p2p-summary-container .order-verification-container .check-icon,
+ .p2p-summary-container .order-verification-container .active-icon,
+ .p2p-summary-container .custom-stepper-container .check-icon,
+ .p2p-summary-container .custom-stepper-container .active-icon,
+ .p2p-summary-container .p2p-order-tab-container .check-icon,
+ .p2p-summary-container .p2p-order-tab-container .active-icon {
+ height: 20px; }
+ .p2p-summary-container .order-verification-container .check-icon .anticon-check-circle svg,
+ .p2p-summary-container .order-verification-container .check-icon .anticon-play-square svg,
+ .p2p-summary-container .order-verification-container .active-icon .anticon-check-circle svg,
+ .p2p-summary-container .order-verification-container .active-icon .anticon-play-square svg,
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-check-circle svg,
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-play-square svg,
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-check-circle svg,
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-play-square svg,
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-check-circle svg,
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-play-square svg,
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-check-circle svg,
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg {
+ height: 2rem;
+ width: 2rem; }
+ .p2p-summary-container .order-verification-container .check-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .order-verification-container .check-icon .anticon-play-square svg path:nth-child(1),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-play-square svg path:nth-child(1),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-play-square svg path:nth-child(1),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-play-square svg path:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-play-square svg path:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-check-circle svg path:nth-child(1),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg path:nth-child(1) {
+ fill: transparent; }
+ .p2p-summary-container .order-verification-container .check-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .order-verification-container .check-icon .anticon-play-square svg path:nth-child(2),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-play-square svg path:nth-child(2),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-play-square svg path:nth-child(2),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-play-square svg path:nth-child(2),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-play-square svg path:nth-child(2),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-check-circle svg path:nth-child(2),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg path:nth-child(2) {
+ fill: var(--specials_checks-okay-done); }
+ .p2p-summary-container .order-verification-container .check-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .order-verification-container .check-icon .anticon-play-square svg path:nth-child(3),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .order-verification-container .active-icon .anticon-play-square svg path:nth-child(3),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .custom-stepper-container .check-icon .anticon-play-square svg path:nth-child(3),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .custom-stepper-container .active-icon .anticon-play-square svg path:nth-child(3),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .p2p-order-tab-container .check-icon .anticon-play-square svg path:nth-child(3),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-check-circle svg path:nth-child(3),
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg path:nth-child(3) {
+ fill: white; }
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg path:nth-child(2) {
+ fill: var(--specials_pending-waiting-caution) !important; }
+ .p2p-summary-container .p2p-order-tab-container .complete-check-icon,
+ .p2p-summary-container .p2p-order-tab-container .active-icon {
+ margin-top: 1.5%; }
+ .p2p-summary-container .p2p-order-tab-container .complete-check-icon .anticon-check-circle svg,
+ .p2p-summary-container .p2p-order-tab-container .complete-check-icon .anticon-play-square svg,
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-check-circle svg,
+ .p2p-summary-container .p2p-order-tab-container .active-icon .anticon-play-square svg {
+ height: 15px !important;
+ width: 15px !important; }
+ .p2p-summary-container .order-verification-container .anticon-check-circle svg {
+ height: 20px !important;
+ width: 20px !important; }
+ .p2p-summary-container .custom-stepper-container {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2%;
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .custom-stepper-container .trade-step-one,
+ .p2p-summary-container .custom-stepper-container .trade-step-two,
+ .p2p-summary-container .custom-stepper-container .trade-step-three {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px; }
+ .p2p-summary-container .custom-stepper-container .trade-step-one .trade-step-container,
+ .p2p-summary-container .custom-stepper-container .trade-step-two .trade-step-container,
+ .p2p-summary-container .custom-stepper-container .trade-step-three .trade-step-container {
+ display: flex;
+ align-items: center; }
+ .p2p-summary-container .custom-stepper-container .trade-step-active {
+ font-size: 16px;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .custom-stepper-container .trade-step-active .important-text {
+ font-weight: bold; }
+ .p2p-summary-container .custom-stepper-container .trade-step-one:hover,
+ .p2p-summary-container .custom-stepper-container .trade-step-two:hover,
+ .p2p-summary-container .custom-stepper-container .trade-step-three:hover {
+ cursor: pointer; }
+ .p2p-summary-container .custom-stepper-container .trade-custom-line {
+ margin-top: 3%;
+ width: 10%;
+ height: 1px;
+ background-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .order-expiry-limit-container {
+ width: 90% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1%; }
+ .p2p-summary-container .order-expiry-limit-container .time-remaining-container,
+ .p2p-summary-container .order-expiry-limit-container .order-details-container {
+ display: flex;
+ gap: 5px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container {
+ display: flex;
+ gap: 20px;
+ padding: 3%;
+ font-size: 12px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container {
+ padding-bottom: 2%;
+ display: flex;
+ gap: 10px;
+ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .order-title {
+ font-size: 12px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .order-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .asset-name {
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .transaction-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 2% 0;
+ border-bottom: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .transaction-container {
+ border-color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .release-amount-title .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .release-amount-title span,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .release-amount-title .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .release-amount-title span,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .release-amount-title .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .release-amount-title span {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .trading-amount-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .trading-amount-container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .trading-amount-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 5px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .trading-amount-container .amount-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .trading-amount-container .amount-field,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .trading-amount-container .amount-field {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .trading-amount-container .amount-field .receive-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .trading-amount-container .amount-field .receive-amount,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .trading-amount-container .amount-field .receive-amount {
+ font-size: 22px;
+ margin-right: 3%;
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container {
+ margin-top: 5%; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .transfer-title {
+ font-size: 20px;
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .payment-details {
+ margin: 3% 0%;
+ padding: 5%;
+ border: 1px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .payment-details .payment-methods-list {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ justify-content: space-between; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .payment-details .payment-methods-list .payment-title {
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .active-buy {
+ border-left: 5px solid var(--specials_checks-okay-done); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .active-sell {
+ border-left: 5px solid var(--trading_selling-related-elements); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .order-complete-title,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-deposit-link,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-withdraw-link {
+ font-size: 14px;
+ font-weight: bold; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-deposit-link .edit-wrapper__container,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-withdraw-link .edit-wrapper__container {
+ text-decoration: underline; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-deposit-link:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-withdraw-link:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .feedback-submit-btn,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .feedback-submit-btn:hover {
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .user-appealed-text,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .vendor-appealed-text {
+ margin: 2% 0; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container {
+ display: flex;
+ gap: 10px; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .appeal-link:hover,
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .cancel-link:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .appeal-confirm-button-container-active {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ pointer-events: all;
+ opacity: 1; }
+ .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .appeal-confirm-button-container {
+ pointer-events: none;
+ opacity: 0.5; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .message-time {
+ font-size: 10px; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-title {
+ font-weight: bold;
+ margin-bottom: 2%;
+ display: flex;
+ gap: 5px; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-title .margin-aligner {
+ margin-bottom: unset;
+ margin-right: unset;
+ position: relative;
+ top: 5px; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field::-webkit-scrollbar {
+ width: 12px; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field {
+ scrollbar-color: var(--labels_secondary-inactive-label-text-graphics) transparent;
+ border: 1px solid var(--calculated_secondary-border);
+ position: relative;
+ padding: 5% 0;
+ background-color: var(--base_background); }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .vendor-name-field {
+ margin: 0 5%;
+ padding: 1% 0 5%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+ border-bottom: 1px solid var(--calculated_secondary-border); }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .vendor-name-field:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-details-container {
+ margin: 2% 0 3%;
+ padding: 0 5%;
+ text-align: center; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area {
+ height: 520px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ display: flex;
+ flex-direction: column-reverse; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .chat-message-container .initial-message {
+ padding: 2% 5%;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 3%;
+ text-align: center; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .chat-message-container > div:nth-child(even):not(.initial-message):not(.notification-message) {
+ background-color: var(--base_secondary-navigation-bar) !important; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .notification-message {
+ padding: 2% 5%; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-wrapper {
+ padding: 2% 5%;
+ display: flex;
+ flex-direction: row-reverse; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-wrapper .user-message-container {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ text-align: right; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-wrapper {
+ padding: 2% 5%; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-wrapper .merchant-message-container {
+ width: 60%;
+ display: flex;
+ flex-direction: column; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-container .user-name,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-container .merchant-name,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-container .user-name,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-container .merchant-name {
+ color: var(--specials_my-username-in-chat); }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-container .user-message,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .user-message-container .merchant-message,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-container .user-message,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .chat-area .merchant-message-container .merchant-message {
+ color: var(--specials_chat-messages); }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .disable-field {
+ pointer-events: none; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 10px;
+ pointer-events: all; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field {
+ padding: 0 5%; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field .ant-input-affix-wrapper,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field .ant-input {
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field .ant-input-affix-wrapper,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field .ant-input-affix-wrapper:hover,
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .message-input-field .ant-input-affix-wrapper:focus {
+ border: 1px solid var(--calculated_secondary-border);
+ box-shadow: none; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .send-btn {
+ display: flex;
+ align-items: center;
+ gap: 3px; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .send-btn .edit-wrapper__container {
+ font-weight: bold;
+ text-decoration: underline !important; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .send-btn:hover {
+ cursor: pointer; }
+ .p2p-summary-container .p2p-order-wrapper .user-chat-container .chat-field .active-field .disabled-btn {
+ cursor: not-allowed !important;
+ opacity: 0.5; }
+ .p2p-summary-container .confirm-notify-button-container {
+ width: 80% !important;
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2%; }
+ .p2p-summary-container .confirm-notify-button-container .cancel-btn,
+ .p2p-summary-container .confirm-notify-button-container .confirm-btn {
+ word-break: break-word;
+ white-space: normal;
+ width: 35%;
+ height: 45px;
+ background-color: var(--labels_inactive-button);
+ border: none;
+ color: var(--calculated_base_top-bar-navigation_text); }
+ .p2p-summary-container .confirm-notify-button-container .confirm-btn {
+ word-break: break-word;
+ white-space: normal;
+ width: 70%;
+ background-color: var(--specials_buttons-links-and-highlights); }
+ .p2p-summary-container .confirm-notify-button-container .cancel-bth:hover,
+ .p2p-summary-container .confirm-notify-button-container .confirm-btn:hover {
+ color: var(--calculated_base_top-bar-navigation_text); }
+
+.p2p-order-creation-popup-wrapper .ReactModal__Content {
+ width: 50rem; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container {
+ margin-top: 3%; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .asset-order-creation-title {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .asset-order-creation-title .asset-icon .edit-wrapper__container svg path {
+ margin-top: 5%; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-creation-description {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-creation-description .edit-wrapper__container {
+ font-size: 12px; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .warning-message-container .warning-message-details {
+ padding: 4%;
+ background-color: var(--base_secondary-navigation-bar);
+ border: 1px solid var(--calculated_secondary-border); }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .warning-message-container .warning-message-details .warning-title .edit-wrapper__container {
+ font-size: 12px; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .warning-message-container .warning-message-details .warning-description .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .warning-message-container .warning-message-details .cancelling-order-message .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--specials_pending-waiting-caution); }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .warning-message-container .confirm-order-creation .edit-wrapper__container {
+ font-size: 12px; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-create-button-container {
+ display: flex;
+ gap: 10px; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-create-button-container .back-btn,
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-create-button-container .create-order-btn {
+ background-color: var(--specials_buttons-links-and-highlights);
+ border: none; }
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-create-button-container .back-btn:hover,
+ .p2p-order-creation-popup-wrapper .ReactModal__Content .order-creation-popup-container .order-create-button-container .create-order-btn:hover {
+ color: var(--labels_important-active-labels-text-graphics); }
+
+.payment-method-details-popup-wrapper .ReactModal__Content {
+ width: 40rem; }
+ .payment-method-details-popup-wrapper .ReactModal__Content .add-payment-method-title .edit-wrapper__container {
+ margin-bottom: 5%;
+ font-size: 18px; }
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-method-field {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 3%;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px; }
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-method-field .ant-input {
+ width: 70%;
+ height: 25px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-method-field .ant-input:focus,
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-method-field .ant-input:hover {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-button-container {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ justify-content: center;
+ margin-top: 3%; }
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-button-container .back-btn,
+ .payment-method-details-popup-wrapper .ReactModal__Content .payment-button-container .complete-btn {
+ width: 100%;
+ height: 5%; }
+
+.filter-asset-dropdown .ant-select-item .ant-select-item-option-content div:nth-child(1) {
+ gap: 5px !important;
+ align-items: normal !important;
+ margin-top: 3%; }
+
+.p2p-custom-style-dropdown {
+ background-color: var(--base_background); }
+ .p2p-custom-style-dropdown .ant-select-item {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-custom-style-dropdown .ant-select-item .ant-select-item-option-content div:nth-child(1) {
+ align-items: center;
+ gap: 5px !important; }
+ .p2p-custom-style-dropdown .ant-select-item:hover,
+ .p2p-custom-style-dropdown .ant-select-item-option-active,
+ .p2p-custom-style-dropdown .ant-select-item-option-selected {
+ background-color: var(--base_wallet-sidebar-and-popup) !important; }
+
+.p2p-profile-popup-wrapper .vender-profile-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ margin-top: 10px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-close-icon {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 20px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .profile-description-card-container {
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .profile-description-card-container .profile-description-cards {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 10px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .profile-description-card-container .profile-description-cards .p2p-profile-card {
+ padding: 20px;
+ text-align: center;
+ font-weight: bold;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border); }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .profile-description-card-container .profile-description-cards .p2p-profile-card .p2p-profile-card-content {
+ font-size: 17px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .feedback-card {
+ margin: 3% 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: 30%;
+ border-radius: 10px;
+ font-weight: bold;
+ text-align: center; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .empty-feedback {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 2%;
+ border-radius: 5px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table {
+ border: none;
+ border-collapse: collapse;
+ font-size: 12px;
+ width: 100%; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table .p2p-feedback-table-header .p2p-header-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 10px; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table .p2p-feedback-table-header .p2p-header-row th .edit-wrapper__container {
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table .p2p-feedback-table-body .feedback-table-body-row {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ position: relative; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table .p2p-feedback-table-body .loading-anime {
+ height: 20px;
+ width: 75%;
+ margin: 2%;
+ border-radius: 7px;
+ animation: mymove 3s infinite; }
+ .p2p-profile-popup-wrapper .vender-profile-popup-container .vendor-details .p2p-feedback-table .p2p-feedback-table-body .ant-rate-star-zero .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important; }
+
+.p2p-new-payment-pop-up .ReactModal__Content .dialog-mobile-content {
+ overflow-y: auto;
+ min-height: calc(100vh - 1rem) !important; }
+
+.p2p-new-payment-pop-up,
+.additional-payment-detail-popup,
+.add-payment-method-detail-popup {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content,
+ .additional-payment-detail-popup .ReactModal__Content,
+ .add-payment-method-detail-popup .ReactModal__Content {
+ width: 30%; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-method-title .edit-wrapper__container,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-method-title .edit-wrapper__container,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-method-title .edit-wrapper__container {
+ font-weight: bold;
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 2rem; }
+ .p2p-new-payment-pop-up .ReactModal__Content .name-detail-title .edit-wrapper__container,
+ .additional-payment-detail-popup .ReactModal__Content .name-detail-title .edit-wrapper__container,
+ .add-payment-method-detail-popup .ReactModal__Content .name-detail-title .edit-wrapper__container {
+ font-size: 1.5rem; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container {
+ display: flex;
+ align-items: center;
+ gap: 10px; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field {
+ width: 40%; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector {
+ font-size: 12px;
+ height: 25px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector .ant-select-selection-item,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector .ant-select-selection-item,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector .ant-select-selection-item {
+ line-height: 25px; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:hover,
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:focus,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:hover,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:focus,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:hover,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-selector:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-arrow,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-arrow,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-field-container .new-payment-field .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .payment-method-title,
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .payment-detail-title,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .payment-method-title,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .payment-detail-title,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .payment-method-title,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .payment-detail-title,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .payment-method-title,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .payment-detail-title,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .payment-method-title,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .payment-detail-title,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .payment-method-title,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .payment-detail-title {
+ font-size: 14px; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 25px;
+ font-size: 12px; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:hover,
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:focus,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:hover,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:focus,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:hover,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:focus,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:hover,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:focus,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:hover,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .custom-input-field:focus,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:hover,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-details-input-wrapper .ant-input::placeholder,
+ .p2p-new-payment-pop-up .ReactModal__Content .selected-payment-method-field-wrapper .ant-input::placeholder,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .ant-input::placeholder,
+ .additional-payment-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .ant-input::placeholder,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-details-input-wrapper .ant-input::placeholder,
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .ant-input::placeholder {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .custom-line,
+ .additional-payment-detail-popup .ReactModal__Content .custom-line,
+ .add-payment-method-detail-popup .ReactModal__Content .custom-line {
+ height: 2px;
+ width: 5%;
+ background-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-popup-button-container,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-popup-button-container,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-popup-button-container {
+ display: flex;
+ flex-direction: row;
+ gap: 15px;
+ justify-content: space-between;
+ margin-top: 5%; }
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-popup-button-container .back-btn,
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-popup-button-container .add-btn,
+ .p2p-new-payment-pop-up .ReactModal__Content .new-payment-popup-button-container .complete-btn,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-popup-button-container .back-btn,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-popup-button-container .add-btn,
+ .additional-payment-detail-popup .ReactModal__Content .new-payment-popup-button-container .complete-btn,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-popup-button-container .back-btn,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-popup-button-container .add-btn,
+ .add-payment-method-detail-popup .ReactModal__Content .new-payment-popup-button-container .complete-btn {
+ width: 100%;
+ height: 5%; }
+
+.additional-payment-detail-popup .new-payment-details-input-wrapper .payment-detail-label {
+ font-weight: bold;
+ font-size: 14px; }
+
+.confirm-delete-popup-wrapper .ReactModal__Content {
+ width: 35%;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .confirm-delete-popup-wrapper .ReactModal__Content .confirm-delete-popup-container .confirm-popup-delete-title {
+ font-size: 18px; }
+ .confirm-delete-popup-wrapper .ReactModal__Content .confirm-delete-popup-container .confirm-popup-button-container {
+ margin-top: 5%;
+ display: flex;
+ gap: 10px; }
+ .confirm-delete-popup-wrapper .ReactModal__Content .confirm-delete-popup-container .confirm-popup-button-container .back-btn,
+ .confirm-delete-popup-wrapper .ReactModal__Content .confirm-delete-popup-container .confirm-popup-button-container .confirm-btn {
+ width: 50%;
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--labels_important-active-labels-text-graphics);
+ border: none;
+ text-align: center; }
+
+.add-payment-method-detail-popup .ReactModal__Content {
+ width: 35%; }
+ .add-payment-method-detail-popup .ReactModal__Content .add-payment-title {
+ font-weight: bold;
+ font-size: 20px;
+ margin-bottom: 3%; }
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 2%; }
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .payment-method-title {
+ margin-bottom: 2%; }
+ .add-payment-method-detail-popup .ReactModal__Content .selected-payment-method-field-wrapper .custom-input-field {
+ width: 60%; }
+
+.transaction-appeal-popup-wrapper .ReactModal__Content {
+ width: 30% !important; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 30px; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container .transaction-appeal-title .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics);
+ font-size: 22px;
+ font-family: 'Open Sans'; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container .appeal-reason-container .appeal-reason-title {
+ margin-bottom: 2%; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container .appeal-reason-container .appeal-input-field {
+ background-color: transparent;
+ height: 25px; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container .appeal-reason-container .appeal-input-field:hover,
+ .transaction-appeal-popup-wrapper .ReactModal__Content .transaction-appeal-popup-container .appeal-reason-container .appeal-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .appeal-reason-button-container {
+ display: flex;
+ gap: 15px;
+ justify-content: space-between;
+ margin-top: 5%; }
+ .transaction-appeal-popup-wrapper .ReactModal__Content .appeal-reason-button-container .cancel-btn,
+ .transaction-appeal-popup-wrapper .ReactModal__Content .appeal-reason-button-container .okay-btn {
+ height: 10%;
+ width: 100%; }
+
+.display-user-feedback-popup-wrapper .ReactModal__Content {
+ width: 45%; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .profile-title {
+ font-size: 22px;
+ margin-bottom: 3%; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .user-feedback-card-container {
+ display: flex;
+ justify-content: center;
+ align-items: center; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .user-feedback-card-container .user-feedback-card-list {
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 3%; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .user-feedback-card-container .user-feedback-card-list .user-feedback-card {
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
+ border: 1px solid var(--calculated_secondary-border); }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .user-feedback-card-container .user-feedback-card-list .user-feedback-card .order-times-text {
+ font-size: 17px; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .user-feedback-card-container .user-feedback-card-list .user-feedback-card .feedback-count {
+ display: flex;
+ gap: 5px; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .total-feedback-count {
+ margin: 3% 0;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 5px;
+ width: 30%;
+ border-radius: 10px;
+ cursor: default;
+ text-align: center; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .no-feedback-container {
+ text-align: center;
+ font-size: 15px;
+ border: 1px solid var(--calculated_secondary-border);
+ padding: 3%;
+ border-radius: 5px; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .feedback-table-container {
+ border: none;
+ border-collapse: collapse; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .feedback-table-container thead tr,
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .feedback-table-container tbody tr {
+ border-bottom: 1px solid var(--calculated_secondary-border);
+ padding: 3%; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content .display-user-feedback-popup-container .user-feedback .user-feedback-details-container .feedback-table-container .ant-rate-star-zero .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important; }
+
+.feedback-submit-popup-wrapper .ReactModal__Content {
+ width: 40%; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .submit-feedback-title {
+ font-size: 22px; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .feedback-field-container .feedback-label {
+ text-transform: capitalize;
+ margin-bottom: 1%; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .feedback-field-container .feedback-input-field {
+ background-color: transparent;
+ height: 25px; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .feedback-field-container .feedback-input-field:hover,
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .feedback-field-container .feedback-input-field:focus {
+ border: 1px solid var(--labels_important-active-labels-text-graphics);
+ box-shadow: none; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .select-rating-container .ant-rate-star-zero .ant-rate-star-second {
+ color: var(--labels_inactive-button) !important; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .select-rating-container .select-rating-title {
+ font-size: 14px; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container {
+ margin-top: 3%;
+ display: flex;
+ gap: 15px; }
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .cancel-btn,
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .proceed-btn {
+ width: 100%;
+ background-color: var(--specials_buttons-links-and-highlights);
+ border: none;
+ color: var(--calculated_base_top-bar-navigation_text); }
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .cancel-btn:hover,
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .proceed-btn:hover,
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .proceed-btn:active,
+ .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .cancel-btn:active {
+ color: var(--calculated_base_top-bar-navigation_text); }
+
+.cancel-popup-wrapper .ReactModal__Content,
+.confirm-popup-wrapper .ReactModal__Content,
+.confirmation-remove-deal-popup-wrapper .ReactModal__Content {
+ width: 35%; }
+ .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .submit-feedback-title,
+ .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .submit-feedback-title,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .submit-feedback-title {
+ font-size: 18px !important; }
+ .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text,
+ .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text {
+ padding: 3%;
+ background-color: var(--base_secondary-navigation-bar);
+ border: 1px solid var(--calculated_secondary-border); }
+ .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .warning-title .edit-wrapper__container,
+ .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .warning-title .edit-wrapper__container,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .warning-title .edit-wrapper__container {
+ text-decoration: underline;
+ color: var(--specials_pending-waiting-caution); }
+ .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .edit-wrapper__container,
+ .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .edit-wrapper__container,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .cancel-warning-text .edit-wrapper__container {
+ font-size: 12px;
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .cancel-popup-wrapper .ReactModal__Content .user-receive-amount-detail,
+ .confirm-popup-wrapper .ReactModal__Content .user-receive-amount-detail,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .user-receive-amount-detail {
+ margin-top: 3%;
+ font-size: 14px; }
+ .cancel-popup-wrapper .ReactModal__Content .submit-transaction-button-container,
+ .confirm-popup-wrapper .ReactModal__Content .submit-transaction-button-container,
+ .confirmation-remove-deal-popup-wrapper .ReactModal__Content .submit-transaction-button-container {
+ margin-top: 5% !important; }
+
+.confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container {
+ margin-top: 5%;
+ display: flex;
+ align-items: center;
+ gap: 10px; }
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .cancel-btn,
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .confirm-btn {
+ background-color: var(--specials_buttons-links-and-highlights);
+ color: var(--calculated_base_top-bar-navigation_text);
+ border: unset; }
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .cancel-btn:hover,
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .cancel-btn:hover,
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .confirm-btn:hover,
+ .confirmation-remove-deal-popup-wrapper .remove-deal-popup-container .remove-deal-button-container .confirm-btn:active {
+ color: var(--calculated_base_top-bar-navigation_text); }
+
+@media (min-width: 1920px) {
+ .p2p-summary-container .p2p-post-deal-container .p2p-post-deal-content-container .p2p-post-deal-content .p2p-deal-terms-container .terms-and-condition-field {
+ margin-top: 0% !important; }
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-method,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-amount-spent,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .p2p-amount-receive,
+ .p2p-summary-container .p2p-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .trade-button-container {
+ width: 60% !important; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container {
+ flex-direction: row; }
+ .p2p-summary-container .p2p-order-tab-container .trade-filter-container .custom-date-picker-container {
+ margin: 0 0 0 auto; }
+ .p2p-summary-container .custom-stepper-container .trade-custom-line {
+ width: 15%; }
+ .add-payment-method-detail-popup .ReactModal__Content,
+ .transaction-appeal-popup-wrapper .ReactModal__Content,
+ .feedback-submit-popup-wrapper .ReactModal__Content,
+ .cancel-popup-wrapper .ReactModal__Content,
+ .confirm-popup-wrapper .ReactModal__Content,
+ .confirm-delete-popup-wrapper .ReactModal__Content {
+ width: 25% !important; }
+ .display-user-feedback-popup-wrapper .ReactModal__Content {
+ width: auto; } }
+
+.layout-mobile .p2p-summary-container {
+ width: 100%;
+ padding: unset;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .no-deals-data {
+ font-size: 24px;
+ padding-bottom: 5%; }
+ .layout-mobile .p2p-summary-container .back-to-orders-link {
+ width: 95% !important; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper {
+ width: 100% !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile {
+ height: 100%;
+ overflow-y: scroll; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .ant-tabs-nav {
+ margin: 0 0 5px 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .ant-tabs-nav .ant-tabs-nav-list {
+ overflow-x: hidden;
+ padding: 0 1%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab {
+ padding: 5px 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .ant-tabs-content {
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-buy,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-sell {
+ width: 8rem;
+ height: 4rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-buy .ant-switch-handle,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-sell .ant-switch-handle {
+ top: 8%;
+ width: 3.5rem;
+ height: 3.5rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-buy .ant-switch-handle::before,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .toggle-sell .ant-switch-handle::before {
+ border-radius: 50%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .ant-switch-checked .ant-switch-handle {
+ left: calc(100% - 44% - 2px); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container {
+ padding: unset !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-buy-sell-toggle {
+ margin: 0 0 3% 0;
+ gap: 20px;
+ padding: 20px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-buy-sell-toggle .toggle-buy-text .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-buy-sell-toggle .secondary-text .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-buy-sell-toggle .toggle-sell-text .edit-wrapper__container {
+ font-size: 30px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .crypto-assets {
+ font-size: 24px;
+ gap: 7%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .show-filter-text {
+ display: flex;
+ justify-content: flex-end; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .show-filter-text .blue-link {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container {
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 5%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount {
+ width: 100%;
+ align-items: center;
+ gap: 15px;
+ margin-top: 1%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .edit-wrapper__container {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input {
+ height: 100%;
+ font-size: 22px !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .p2p-select-field .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .ant-input .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .ant-input .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-fiat-currency-container .ant-input .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .p2p-select-field .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .ant-input .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .ant-input .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-avaliable-regions .ant-input .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .p2p-select-field .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .ant-input .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .ant-input .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-payment-method .ant-input .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .p2p-select-field .ant-input-suffix,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-order-search-container .p2p-amount .ant-input .ant-input-suffix {
+ height: 100%;
+ font-size: 22px !important;
+ font-weight: normal; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets {
+ padding: 3%;
+ border-bottom: 8px solid var(--base_background); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .p2p-avaliable-price {
+ display: flex;
+ align-items: flex-start;
+ gap: 5px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .p2p-avaliable-price .asset-icon {
+ position: relative;
+ top: 3px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .p2p-limit-price .p2p-avaliable-price {
+ align-items: center; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .vendor-name,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .deal-amount,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .payments {
+ font-size: 22px;
+ color: var(--labels_secondary-inactive-label-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .vendor-name {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .vendor-name .edit-wrapper__container {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .amount-detail {
+ display: flex;
+ gap: 5px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .amount-detail .amount-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .amount-detail .spend-asset {
+ font-size: 5.5rem !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .custom-line {
+ margin: 2% 0;
+ width: 10%;
+ height: 4px;
+ background-color: var(--calculated_secondary-border); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .trade-payment-container {
+ display: flex;
+ justify-content: space-between; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-tab-container .p2p-trade-details .p2p-trade-assets .trade-payment-container .trade-btn {
+ font-size: 24px;
+ height: 7rem;
+ width: 21rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container {
+ height: 100%;
+ min-height: unset !important;
+ overflow-y: auto;
+ padding: unset; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .update-deal-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background-color: rgba(67, 112, 235, 0.2); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .update-deal-container .sync-icon {
+ font-size: 5rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .update-deal-container .p2p-update-deal {
+ font-size: 28px;
+ text-transform: uppercase; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .toggle-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ font-size: 4.5rem;
+ margin: 3% 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .toggle-container .toggle-buy,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .toggle-container .toggle-sell {
+ width: 10rem;
+ height: 5rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .toggle-container .toggle-buy .ant-switch-handle,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .toggle-container .toggle-sell .ant-switch-handle {
+ top: 8%;
+ width: 4.5rem;
+ height: 4.5rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+ border-color: var(--labels_secondary-inactive-label-text-graphics) !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field {
+ margin: 5% 0 3%;
+ width: 90%;
+ font-size: 26px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selector,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-arrow,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selection-search-input {
+ border-radius: 5px;
+ background-color: transparent;
+ color: var(--labels_important-active-labels-text-graphics);
+ height: 100%;
+ font-size: 26px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-arrow {
+ position: absolute;
+ top: 45%;
+ font-size: 20px;
+ margin-right: 4%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selection-item {
+ font-weight: normal !important;
+ line-height: 50px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selector:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selector:active {
+ border-color: var(--labels_secondary-inactive-label-text-graphics) !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-custom-input-field .ant-select-selection-placeholder {
+ font-weight: normal !important;
+ line-height: 50px;
+ font-size: 26px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps {
+ margin-top: 5%;
+ padding: 0 5%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three {
+ display: flex;
+ width: 100%;
+ gap: 35px;
+ font-size: 26px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper {
+ display: flex;
+ flex-direction: column;
+ align-items: center; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-circle-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-circle-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-circle-active {
+ padding: 4px 18px;
+ border: 5px solid var(--labels_important-active-labels-text-graphics);
+ border-radius: 30px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-circle-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-circle-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-circle-inactive {
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics) !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line {
+ display: block;
+ width: 5px;
+ height: 100%;
+ background-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line-inactive,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line {
+ height: 4rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .custom-stepper .custom-line-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .custom-stepper .custom-line-active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .custom-stepper .custom-line-active {
+ background-color: var(--labels_important-active-labels-text-graphics) !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container {
+ margin-top: 3%;
+ font-size: 26px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-buy-sell-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-buy-sell-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-buy-sell-field {
+ display: flex;
+ align-items: center;
+ margin: 5% 0;
+ gap: 7%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-buy-sell-field .trade-assets-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-buy-sell-field .trade-assets-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-buy-sell-field .trade-assets-field {
+ width: 40%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field {
+ display: flex;
+ gap: 15px;
+ margin: 5% 0 3%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field .p2p-custom-input-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field .p2p-custom-input-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-buy-sell-field .select-asset-field .p2p-custom-input-field {
+ margin: 0 !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .custom-border-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .custom-border-line,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .custom-border-line {
+ margin: 5% 0;
+ width: 75%;
+ border-bottom: 5px dotted var(--labels_secondary-inactive-label-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container {
+ display: flex;
+ align-items: center;
+ gap: 5%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .ant-select-selection-item,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .ant-select-selection-item,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .ant-select-selection-item {
+ font-weight: normal;
+ line-height: 50px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .currency-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .currency-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .currency-field {
+ width: 90%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number {
+ border-radius: 5px;
+ background-color: transparent;
+ line-height: 50px;
+ font-size: 26px;
+ height: 100%;
+ box-shadow: none;
+ color: var(--labels_important-active-labels-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number .ant-input-number-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number .ant-input-number-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number .ant-input-number-input {
+ font-size: 26px;
+ line-height: 50px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-price-field-container .currency-field .ant-input-number:active {
+ border-color: var(--labels_secondary-inactive-label-text-graphics) !important;
+ box-shadow: none; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .exchange-rate-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .dynamic-rate-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .exchange-rate-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .dynamic-rate-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .exchange-rate-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .dynamic-rate-container {
+ padding: 2%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .exchange-rate-container .p2p-assets-rate,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .dynamic-rate-container .p2p-assets-rate,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .exchange-rate-container .p2p-assets-rate,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .dynamic-rate-container .p2p-assets-rate,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .exchange-rate-container .p2p-assets-rate,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .dynamic-rate-container .p2p-assets-rate {
+ font-size: 6rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-input-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-input-field .ant-input,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-input-field .ant-input {
+ border-radius: 5px;
+ background-color: transparent;
+ font-size: 26px;
+ color: var(--labels_important-active-labels-text-graphics);
+ box-shadow: none;
+ font-weight: normal; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:active,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:hover,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-input-field .ant-input-affix-wrapper:active {
+ border-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-input-field .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-input-field .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-input-field .selected-asset-icon {
+ position: relative;
+ top: 5px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-order-container .p2p-total-amount-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-order-container .p2p-total-amount-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-order-container .p2p-total-amount-wrapper {
+ width: 85%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-order-container .payment-receive-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-order-container .payment-receive-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-order-container .payment-receive-container {
+ margin-top: 5%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list {
+ display: flex;
+ width: 50rem;
+ gap: 15px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list .payment-method,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list .payment-method,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .total-amount-order-container .payment-receive-container .payment-list .payment-method {
+ width: 80%;
+ display: flex;
+ justify-content: space-between;
+ padding: 2% 5%;
+ border: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ font-weight: normal; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper {
+ margin-top: 3%;
+ display: flex;
+ justify-content: space-between;
+ gap: 20px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .value-description,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .value-description,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .value-description {
+ margin-top: 2%;
+ color: var(--labels_secondary-inactive-label-text-graphics) !important;
+ font-weight: normal !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .tilt-symbol,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .tilt-symbol,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .order-limit-container .max-min-field-wrapper .tilt-symbol {
+ position: relative;
+ bottom: 23px;
+ font-size: 8rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container {
+ margin-top: 3%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field {
+ margin: 3% 0 !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-one .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field .ant-select-selection-item,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-two .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field .ant-select-selection-item,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-post-deal-mobile-container .p2p-post-deal-steps .custom-step-three .p2p-trade-field-container .p2p-payment-method-wrapper .select-region-container .p2p-custom-input-field .ant-select-selection-item {
+ font-weight: normal; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-trade-button-container {
+ display: flex;
+ align-items: center;
+ gap: 20px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .next-btn,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .back-btn {
+ margin: 5% 0;
+ width: 50%;
+ padding: 2% 0 6%;
+ font-size: 22px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-deal-terms-container {
+ padding: 3%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-deal-terms-container .terms-conditions-wrapper .terms-description {
+ margin: 1% 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-deal-terms-container .terms-conditions-wrapper .terms-and-condition-field {
+ margin: 2% 0;
+ background-color: transparent;
+ font-size: 26px;
+ border-radius: 5px;
+ border: 2px solid var(--labels_secondary-inactive-label-text-graphics); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-deal-terms-container .terms-conditions-wrapper .error-text {
+ color: var(--specials_notifications-alerts-warnings); }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .p2p-deal-terms-container .terms-conditions-wrapper .terms-and-condition-error-field {
+ border-color: var(--specials_notifications-alerts-warnings) !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .ant-checkbox .ant-checkbox-inner,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .ant-checkbox-checked .ant-checkbox-inner {
+ width: 30px;
+ height: 30px;
+ text-align: center; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .ant-checkbox .ant-checkbox-inner::after,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .ant-checkbox-checked .ant-checkbox-inner::after {
+ width: 7px;
+ height: 14px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper {
+ width: 100%;
+ overflow-x: scroll; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .table-row .w-fit-content {
+ padding-bottom: unset; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .table-row .my-deals-btn {
+ font-size: 24px;
+ height: fit-content !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .table-row .custom-circle {
+ margin-top: unset;
+ width: 3rem;
+ height: 3rem; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper thead th div {
+ padding: 0 20px 0 10px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper thead,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper tbody {
+ font-size: 24px !important;
+ text-wrap: nowrap; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper thead td,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper tbody td {
+ padding: 0 20px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mydeals-wrapper .p2p-mydeals-table-wrapper .edit-deal-btn {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .custom-stepper-container .trade-step-container {
+ flex-direction: column; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile {
+ overflow-x: hidden;
+ font-size: 24px !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .profile-card-content-wrapper {
+ flex-direction: column; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .p2p-btn-wrapper {
+ justify-content: center;
+ padding: 5% 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .p2p-btn-wrapper .method-btn,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .p2p-btn-wrapper .feedback-btn {
+ border-radius: 10px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .add-payment-wrapper {
+ padding: 2% 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .add-payment-wrapper .ant-btn {
+ height: fit-content !important;
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .profile-cards {
+ border-radius: 10px !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .feedback-wrapper {
+ overflow-x: auto; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .feedback-wrapper .table-header-wrapper th {
+ padding: 0 15px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-mobile-profile .feedback-wrapper .table-row td {
+ font-size: 24px !important;
+ text-wrap: nowrap;
+ padding: 0 15px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .crypto-assets {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .custom-text {
+ padding: 2% 1%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field {
+ flex-direction: column;
+ width: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters {
+ border-right: unset; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .asset-filter,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .status-filter,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .side-filter {
+ gap: 20px;
+ margin: 3% 3% 0 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .ant-select,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .ant-select-selector {
+ height: 100%;
+ width: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .ant-select .ant-select-selection-item,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .p2p-trade-select-field .filters .ant-select-selector .ant-select-selection-item {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .custom-date-picker-container {
+ margin: unset;
+ margin-top: 2%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .custom-date-picker-container .range-picker .ant-form-item-control-input .ant-picker-input input {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .custom-text {
+ width: fit-content;
+ padding: 0 1%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .date-filters {
+ padding: 5% 0; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .trade-filter-container .date-filters .date-text {
+ padding: 2%;
+ font-size: 24px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .active-icon .anticon-play-square svg,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .complete-check-icon .anticon-check-circle svg {
+ height: 3rem !important;
+ width: 3rem !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .order-status-button-container {
+ justify-content: start;
+ text-wrap: nowrap; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .edit-wrapper__container {
+ font-size: 24px !important; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper {
+ overflow-x: scroll;
+ text-wrap: nowrap; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead tr {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table thead th div {
+ padding: 0 20px 0 10px; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody .p2p-sell-order-button,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody .p2p-buy-order-button {
+ font-size: 24px;
+ height: fit-content; }
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .trade-button,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-fiat-amount,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-currency-amount,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .crypto-amount,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-user-name,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .transaction-status,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-order-table tbody tr .view-orders {
+ font-size: 24px;
+ padding: 15px 20px; }
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-one .trade-step-container,
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-two .trade-step-container,
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-three .trade-step-container {
+ flex-direction: column;
+ font-size: 10px; }
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-one .trade-step-container .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-two .trade-step-container .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .custom-stepper-container .trade-step-three .trade-step-container .edit-wrapper__container {
+ text-align: center; }
+ .layout-mobile .p2p-summary-container .p2p-order-chat-wrapper {
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container {
+ height: 100%;
+ flex-direction: column;
+ justify-content: space-between; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .trading-amount-container {
+ text-align: end; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .release-amount-title,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .spend-amount-title {
+ width: 50%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .selected-asset-icon,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .selected-asset-icon {
+ position: relative;
+ top: 4px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .asset-name .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .order-title .edit-wrapper__container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .asset-name .edit-wrapper__container {
+ font-size: 18px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .asset-name,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .asset-name {
+ font-weight: normal !important; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .chat-link-container,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .chat-link-container {
+ margin-left: auto;
+ display: flex;
+ align-items: flex-start;
+ gap: 15px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .release-amount-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .asset-price-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-amount-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .receive-amount-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trading-fee-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .amount-transfer-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .chat-link-container .chat-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .confirm-notify-button-container .chat-link-container .chat-link {
+ color: var(--specials_buttons-links-and-highlights);
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .order-complete-title .edit-wrapper__container {
+ font-size: 20px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-deposit-link,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .go-to-withdraw-link {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-confirmed-container .ant-btn-background-ghost {
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(--labels_important-active-labels-text-graphics);
+ font-size: 24px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .purpleButtonP2P,
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .order-verification-container .order-cancel-container .ant-btn {
+ font-size: 20px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container {
+ font-size: 24px;
+ height: 100%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .p2p-chat-container {
+ display: flex;
+ justify-content: space-between;
+ text-wrap: nowrap; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .p2p-chat-container .back-to-orders-link {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field {
+ height: 95%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field .message-time {
+ font-size: 14px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field .chat-area {
+ height: 65%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field .message-input-field .ant-input {
+ font-size: 24px;
+ padding: 1%; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field .message-input-field .ant-input-suffix {
+ font-size: 24px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .user-chat-container .chat-field .send-btn {
+ gap: 5px; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .confirm-notify-button-container {
+ width: 100% !important; }
+ .layout-mobile .p2p-summary-container .p2p-order-wrapper .p2p-order-container .confirm-notify-button-container .cancel-btn {
+ width: 30% !important; }
+ @media (min-width: 550px) and (max-width: 768px) {
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .next-btn,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .back-btn {
+ padding: 1% 0 3% 0 !important; } }
+ @media (min-width: 450px) and (max-width: 550px) {
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .next-btn,
+ .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-post-deal-container .back-btn {
+ padding: 2% 0 5% !important; } }
+
+.selected-asset-dropdown,
+.selected-type-dropdown {
+ min-width: unset !important;
+ width: 27% !important; }
+
+.selected-type-dropdown {
+ width: 35% !important; }
+
+.trading-popup-wrapper .trading-popup-container .close-icon {
+ font-size: 20px; }
+
+.trading-popup-wrapper .trading-popup-container .trading-side-container {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .trading-popup-wrapper .trading-popup-container .trading-side-container .asset-buy-field {
+ color: var(--specials_checks-okay-done); }
+ .trading-popup-wrapper .trading-popup-container .trading-side-container .asset-sell-field {
+ color: var(--specials_notifications-alerts-warnings); }
+
+.trading-popup-wrapper .trading-popup-container .trading-payment-detail {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 5% 0; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive {
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 10px;
+ padding: 8% 6%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ background-color: var(--base_secondary-navigation-bar); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-title .cs-9,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-title .cs-9,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-title .cs-9,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-title .cs-9 {
+ position: relative;
+ top: 1px; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-title .edit-wrapper__container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-title .edit-wrapper__container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-title .edit-wrapper__container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-title .edit-wrapper__container {
+ font-weight: bold;
+ font-size: 16px; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-title,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-title {
+ display: flex;
+ gap: 5px; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container {
+ margin-top: 3%;
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .ant-input-number-input-wrap,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .ant-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .ant-input-number-input-wrap,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .ant-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .ant-input-number-input-wrap,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .ant-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .ant-input-number-input-wrap,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .ant-input {
+ padding: 2%;
+ font-size: 18px; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .spent-asset-name,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .spent-asset-name,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .spent-asset-name,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .spent-asset-name {
+ border: 1px solid var(--calculated_secondary-border);
+ border-radius: 30px;
+ display: flex;
+ align-items: center;
+ padding: 2% 10% 2% 5%;
+ gap: 15%; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .spent-asset-name .spent-asset-icon,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .spent-asset-name .spent-asset-icon,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .spent-asset-name .spent-asset-icon,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .spent-asset-name .spent-asset-icon {
+ position: relative;
+ top: 3px; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-spent-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-spent-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-spent-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-spent-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field {
+ background-color: var(--base_background) !important;
+ border: none;
+ box-shadow: inset 1px 1px 3px #00000029;
+ border-radius: 5px;
+ color: var(--labels_important-active-labels-text-graphics) !important;
+ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-spent-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-receive-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-spent-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-spent-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-spent-field .ant-input-number-input,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field .ant-input-number-input {
+ text-align: right; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .ant-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .ant-input-number-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .ant-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .ant-input-number-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .ant-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .ant-input-number-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .ant-input::placeholder,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .ant-input-number-input::placeholder {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field {
+ text-align: right; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-receive-field:hover,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-spent-field-container .amount-receive-field:active,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field:hover,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field:active,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field:hover,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field:active,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field:hover,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field:active {
+ background-color: var(--base_secondary-navigation-bar) !important;
+ border-radius: 5px;
+ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-error-field .ant-select-selector {
+ border-color: var(--specials_notifications-alerts-warnings) !important; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field {
+ display: flex;
+ justify-content: space-between;
+ width: 100%; }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field .payment-method-field .ant-select-selector {
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 10px;
+ color: var(--labels_important-active-labels-text-graphics);
+ border-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field .payment-method-field .ant-select-arrow {
+ color: var(--labels_important-active-labels-text-graphics); }
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field .payment-method-field .ant-select-selector:hover,
+ .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field .payment-method-field .ant-select-selector:active {
+ border-color: var(--labels_secondary-inactive-label-text-graphics); }
+
+.trading-popup-wrapper .trading-popup-container .asset-avaliable-amount {
+ padding: 3% 0;
+ border-top: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ font-size: 13px; }
+ .trading-popup-wrapper .trading-popup-container .asset-avaliable-amount .vendor-details {
+ display: flex;
+ justify-content: space-between;
+ align-items: center; }
+
+.trading-popup-wrapper .trading-popup-container .payment-time-limit-container {
+ padding-bottom: 18%; }
+
+.trading-popup-wrapper .trading-popup-container .error-field-container {
+ display: flex;
+ font-size: 12px;
+ justify-content: flex-start; }
+ .trading-popup-wrapper .trading-popup-container .error-field-container .error-message {
+ color: var(--specials_notifications-alerts-warnings); }
+
+.volume-wrapper {
+ margin: 1rem auto 5rem auto !important; }
+ .volume-wrapper .title-wrapper {
+ display: flex;
+ margin-top: 5%;
+ gap: 1%;
+ text-transform: capitalize; }
+ .volume-wrapper .title-wrapper .volume-label {
+ font-size: 2.25rem;
+ position: relative;
+ top: 25px; }
+ .volume-wrapper .custom-line {
+ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); }
+ .volume-wrapper .header-wrapper {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1%;
+ margin-bottom: 2%; }
+ .volume-wrapper .header-wrapper .link-label {
+ display: flex;
+ gap: 5px; }
+ .volume-wrapper .volume-cards-empty-wrapper {
+ margin-top: 5% !important;
+ font-size: 14px; }
+ .volume-wrapper .volume-cards-empty-wrapper .volume-option-icon svg {
+ width: 2.5rem;
+ height: 5%; }
+ .volume-wrapper .volume-cards-empty-wrapper .volume-option-icon svg path {
+ fill: var(--labels_secondary-inactive-label-text-graphics); }
+ .volume-wrapper .volume-cards-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 2%;
+ gap: 1%; }
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-one,
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-two,
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-three,
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-active {
+ height: 2px;
+ background-color: var(--labels_important-active-labels-text-graphics) !important;
+ opacity: 0.25; }
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-two {
+ opacity: 0.5; }
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-three {
+ opacity: 0.75; }
+ .volume-wrapper .volume-cards-wrapper .custom-line-inactive-active {
+ opacity: 1; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper {
+ width: 25%;
+ background-color: var(--base_wallet-sidebar-and-popup);
+ border-radius: 5px; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-wrapper {
+ text-align: center;
+ padding: 15%;
+ background-color: var(--base_secondary-navigation-bar); }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-wrapper .assets-price {
+ text-wrap: nowrap;
+ font-family: 'Raleway'; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content {
+ padding: 5%;
+ min-height: 16rem; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper {
+ display: flex;
+ justify-content: space-between; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper .asset-name,
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper .asset-price-container {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper .asset-name .currency-price,
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper .asset-price-container .currency-price {
+ display: flex;
+ justify-content: flex-end;
+ gap: 3px; }
+ .volume-wrapper .volume-cards-wrapper .card-content-wrapper .card-content .assets-content-wrapper .more-icon svg {
+ width: 2rem;
+ height: 2rem;
+ fill: var(--labels_secondary-inactive-label-text-graphics); }
+
+.layout-mobile .volume-wrapper {
+ padding: 5%;
+ overflow-x: hidden;
+ font-size: 12px;
+ margin: 0 auto !important; }
+ .layout-mobile .volume-wrapper .title-wrapper {
+ margin-top: unset;
+ align-items: center;
+ justify-content: center; }
+ .layout-mobile .volume-wrapper .title-wrapper .volume-label {
+ top: 8px; }
+ .layout-mobile .volume-wrapper .volume-cards-empty-wrapper {
+ margin-top: 10% !important; }
+ .layout-mobile .volume-wrapper .volume-cards-empty-wrapper .volume-option-icon svg {
+ width: 3.5rem; }
+ .layout-mobile .volume-wrapper .volume-cards-wrapper {
+ margin: 5% 0;
+ flex-direction: column;
+ gap: 10px; }
+ .layout-mobile .volume-wrapper .volume-cards-wrapper .card-wrapper {
+ padding: 10%; }
+ .layout-mobile .volume-wrapper .volume-cards-wrapper .card-content-wrapper {
+ width: 80%; }
+ .layout-mobile .volume-wrapper .volume-cards-wrapper .assets-content-wrapper .more-icon svg {
+ width: 3rem !important;
+ height: 3rem !important; }
+
+.custom-email-wrapper .ant-select-selector {
+ color: rgba(0, 0, 0, 0.85); }
+
+.sidebar-row {
+ min-height: 3rem;
+ min-width: 10rem; }
+ .sidebar-row .cell-wrapper {
+ padding-left: 1rem;
+ padding-right: 1rem; }
+
+.app_bar .sidebar-row {
+ min-width: 3rem; }
+
+.sidebar-bottom-wrapper {
+ min-height: 6rem;
+ max-height: 6rem;
+ background-color: var(--base_top-bar-navigation);
+ color: var(--calculated_base_top-bar-navigation_text);
+ width: 100%;
+ padding: 0.5rem 0.5rem 0.8rem 0.5rem;
+ justify-content: space-around; }
+ .sidebar-bottom-wrapper .sidebar-bottom-button-account .sidebar-bottom-icon svg g .assets-icon-tab {
+ opacity: 0.5; }
+ .sidebar-bottom-wrapper .sidebar-bottom-button {
+ justify-content: space-between;
+ flex-direction: column;
+ display: flex;
+ align-items: center;
+ width: 20%; }
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .post-icon,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .chat-0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .account-svg-1,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .assets-icon-tab,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .onramp-icon,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .item-options {
+ fill: var(--labels_secondary-inactive-label-text-graphics); }
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .tab-wallet0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .trade-active-2,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .chat-0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .assets-icon-tab,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .item-options {
+ stroke: var(--labels_secondary-inactive-label-text-graphics); }
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .tab-wallet0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button .sidebar-bottom-icon svg .quick-trade-tab-active {
+ fill: transparent; }
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .post-icon,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .chat-0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .account-svg-1,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .assets-icon-tab,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .onramp-icon,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .item-options {
+ fill: var(--calculated_base_top-bar-navigation_text); }
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .tab-wallet0,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .trade-active-2,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .chat-0,
.sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .quick-trade-tab-active,
- .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .assets-icon-tab {
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .assets-icon-tab,
+ .sidebar-bottom-wrapper .sidebar-bottom-button.active .sidebar-bottom-icon svg .item-options {
stroke: var(--calculated_base_top-bar-navigation_text); }
.sidebar-bottom-wrapper .sidebar-bottom-button .bottom-bar-text {
font-size: 9px;
@@ -9657,10 +13903,23 @@ table th {
.app_bar .bar-logout {
max-height: 4rem;
min-height: 4rem; }
- .app_bar .app_bar-quicktrade-container {
- margin: 0 0.25rem; }
- .app_bar .app_bar-quicktrade-container .toggle_button-wrapper .toggle-content .toggle-action_button.left {
- opacity: 1 !important; }
+ .app_bar .app-bar-dropdown-icon {
+ transform: scale(4, 4);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ top: 1.5px; }
+ .app_bar .app-bar-dropdown-icon .anticon svg {
+ position: relative;
+ height: 3px;
+ margin-bottom: 1px; }
+ .app_bar .trade-navbar-wrapper {
+ gap: 2%; }
+ .app_bar .trade-navbar-wrapper .custom-select-input-style.appbar.ant-select {
+ margin: 0 !important; }
+ .app_bar .app_bar-quicktrade-container .toggle_button-wrapper .toggle-content .toggle-action_button.left {
+ opacity: 1 !important; }
.app_bar .app_bar-quicktrade {
border: 1px solid var(--calculated_base_top-bar-navigation_text-inactive);
border-radius: 0.35rem;
@@ -9695,7 +13954,7 @@ table th {
.app_bar .app-bar-account {
color: var(--calculated_base_top-bar-navigation_text);
cursor: pointer;
- margin-right: 0.8rem; }
+ margin-right: 5px; }
.app_bar .app-bar-account svg .account-inactive {
fill: var(--calculated_base_top-bar-navigation_text-inactive);
stroke: var(--calculated_base_top-bar-navigation_text-inactive); }
@@ -9729,6 +13988,9 @@ table th {
top: 1px; }
.app_bar .active-tab-overflow svg .double-arrow {
stroke: var(--labels_important-active-labels-text-graphics); }
+ .app_bar .active-text {
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ opacity: 1 !important; }
.app_bar .app-bar-currency-icon {
margin: 0.5rem 0.3rem 0 0.3rem;
width: 1.5rem; }
@@ -10051,11 +14313,11 @@ table th {
display: flex;
align-items: center;
border-top: 3px solid transparent; }
+ .app-menu-bar .app-menu-bar-content .arrow-icon {
+ font-size: 10px; }
.app-menu-bar .app-menu-bar-content-item {
margin: auto;
position: relative; }
- .app-menu-bar .app-menu-bar-content-item:hover {
- opacity: 0.5; }
.app-menu-bar .app-menu-bar-icon {
margin-right: 0.4rem;
width: 1rem; }
@@ -10066,6 +14328,9 @@ table th {
.app-menu-bar .app-menu-bar-icon svg .tab-api0,
.app-menu-bar .app-menu-bar-icon svg .fill_secondary-color {
fill: var(--calculated_base_top-bar-navigation_text-inactive); }
+ .app-menu-bar .active-text {
+ color: var(--calculated_base_top-bar-navigation_text) !important;
+ opacity: 1 !important; }
.app-menu-bar .active-menu {
color: var(--calculated_base_top-bar-navigation_text);
border-top: 4px solid var(--specials_buttons-links-and-highlights);
@@ -10393,6 +14658,118 @@ table th {
.app-bar_add-tab-price {
color: var(--labels_important-active-labels-text-graphics); }
+.account-tab-dropdown .ant-tooltip-inner {
+ padding: unset; }
+ .account-tab-dropdown .ant-tooltip-inner .navigation-dropdown-container {
+ padding: unset; }
+ .account-tab-dropdown .ant-tooltip-inner .navigation-dropdown-container .options-container {
+ margin: 0% 4%;
+ padding: 2% 4%; }
+
+.account-tab-options-tooltip {
+ font-size: 12px;
+ z-index: 2; }
+
+.navigation-bar-wrapper {
+ max-width: 100% !important;
+ background-color: transparent;
+ top: 35px !important;
+ bottom: 25px;
+ z-index: 2; }
+ .navigation-bar-wrapper .app-bar-account-notification {
+ height: 1.2rem;
+ width: 1.2rem;
+ border-radius: 1.2rem;
+ background-color: var(--specials_notifications-alerts-warnings);
+ color: var(--calculated_specials_notifications-alerts-text);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.8rem;
+ line-height: 1;
+ font-weight: bold; }
+ .navigation-bar-wrapper .ant-tooltip-inner {
+ width: 30rem;
+ background-color: var(--base_background);
+ color: var(--labels_important-active-labels-text-graphics);
+ border-radius: 5px;
+ border: 2px solid var(--calculated_secondary-border-1);
+ box-shadow: 4px 4px 15px var(--base_top-bar-navigation); }
+ .navigation-bar-wrapper .navigation-dropdown-container {
+ padding: 2%; }
+ .navigation-bar-wrapper .navigation-dropdown-container .main-active {
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container {
+ border-radius: 5px;
+ padding: 2% 2% 2% 5%;
+ display: flex;
+ gap: 15px;
+ align-items: center; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .option-details {
+ font-size: 12px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .option-details .hot-icon {
+ margin-left: 0.3rem; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .option-details .hot-icon svg {
+ width: 1.2rem; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .option-details .hot-icon svg path {
+ fill: var(--specials_pending-waiting-caution) !important; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .filtered-option-icon svg {
+ width: 1.8rem; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container .filtered-option-icon svg path {
+ fill: var(--labels_important-active-labels-text-graphics) !important; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-container:hover,
+ .navigation-bar-wrapper .navigation-dropdown-container .icon-option-container:hover {
+ background-color: var(--base_wallet-sidebar-and-popup);
+ cursor: pointer; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-route-wrapper {
+ margin-top: 2%;
+ border-top: 1px solid var(--labels_secondary-inactive-label-text-graphics);
+ padding: 3%;
+ display: flex;
+ gap: 3%;
+ justify-content: space-around;
+ font-size: 12px; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-route-wrapper .icon-option-container {
+ display: flex;
+ flex-direction: column;
+ gap: 3%;
+ align-items: center;
+ padding: 2%;
+ min-width: 5rem; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-route-wrapper .icon-option-container svg {
+ width: 1.5rem; }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-route-wrapper .icon-option-container svg path {
+ fill: var(--labels_important-active-labels-text-graphics); }
+ .navigation-bar-wrapper .navigation-dropdown-container .options-route-wrapper .icon-option-container:hover {
+ cursor: pointer;
+ border-radius: 3px; }
+ .navigation-bar-wrapper .navigation-dropdown-container .tier-wrapper {
+ padding: 3% 7%;
+ margin-bottom: 2%;
+ display: flex;
+ gap: 3%;
+ font-size: 12px;
+ align-items: center;
+ background-color: var(--base_wallet-sidebar-and-popup); }
+ .navigation-bar-wrapper .navigation-dropdown-container .tier-wrapper .blue-link:hover {
+ cursor: pointer; }
+ .navigation-bar-wrapper .navigation-dropdown-container .tier-wrapper .trader-wrapper-icon {
+ width: 2.5rem;
+ margin-right: unset;
+ position: relative;
+ top: 3px; }
+ .navigation-bar-wrapper .navigation-dropdown-container .summary-page-link {
+ text-transform: uppercase;
+ text-align: center;
+ padding: 2% 0 6% 0; }
+ .navigation-bar-wrapper .navigation-dropdown-container .summary-page-link .blue-link {
+ font-size: 13px; }
+ .navigation-bar-wrapper .navigation-dropdown-container .summary-page-link .blue-link:hover {
+ cursor: pointer; }
+
@media (min-width: 1920px) {
.app_bar {
font-size: 1rem;
@@ -10419,7 +14796,7 @@ table th {
height: 5rem;
min-height: 5rem; }
.app-menu-bar .app-menu-bar-content {
- width: 8rem; }
+ width: unset; }
.app-bar-add-tab-menu {
width: 24rem; }
.app-bar-add-tab-menu.narrow {
@@ -12563,7 +16940,7 @@ table th {
position: absolute;
width: 100%;
height: 100vh;
- z-index: 99999; }
+ z-index: 1; }
.loader_wrapper .loader_background {
height: 100vh; }
@@ -14484,6 +18861,193 @@ table th {
.extreme-intensity {
border-color: var(--specials_notifications-alerts-warnings); }
+.check-connection-tab .connection-icon-wrapper {
+ padding: 1rem; }
+ .check-connection-tab .connection-icon-wrapper .network-connection-icon,
+ .check-connection-tab .connection-icon-wrapper .network-connection-icon-danger {
+ height: 12px;
+ width: 12px;
+ border-radius: 12px;
+ background-color: var(--specials_checks-okay-done); }
+ .check-connection-tab .connection-icon-wrapper .network-connection-icon-danger {
+ background-color: var(--specials_notifications-alerts-warnings) !important; }
+
+.check-connection-tab:hover {
+ opacity: 0.5; }
+
+.check-connection-popup-wrapper .ReactModal__Content,
+.reconnect-popup-wrapper .ReactModal__Content {
+ width: 35rem; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .loading-anime,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .loading-anime {
+ height: 20px;
+ width: 100px;
+ border-radius: 7px;
+ animation: mymove 3s infinite; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-title-wrapper,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-title-wrapper {
+ display: flex;
+ gap: 5px;
+ align-items: center;
+ margin-bottom: 3%; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-title-wrapper .check-connection-text,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-title-wrapper .check-connection-text {
+ font-size: 20px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container {
+ margin-top: 1%;
+ display: flex;
+ font-size: 14px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .status-title,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .status-title {
+ width: 25%; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .status-title .connection-icon,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .status-title .connection-icon {
+ position: relative;
+ bottom: 5px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status-details,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status-details {
+ overflow-x: scroll; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ flex-wrap: wrap; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .success-icon,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .success-icon {
+ width: 12px;
+ height: 12px;
+ background-color: var(--specials_checks-okay-done);
+ border-radius: 25px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .danger-icon,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .danger-icon {
+ background-color: var(--specials_notifications-alerts-warnings) !important; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar {
+ display: flex;
+ align-items: center;
+ gap: 5px; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .fast-ping,
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .slow-ping,
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .very-slow-ping,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .fast-ping,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .slow-ping,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .very-slow-ping {
+ height: 15px;
+ width: 2px;
+ background-color: var(--specials_checks-okay-done); }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .slow-ping,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .slow-ping {
+ background-color: var(--specials_my-username-in-chat) !important; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .very-slow-ping,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .connection-status .ping-details .ping-status-bar .very-slow-ping {
+ background-color: var(--specials_notifications-alerts-warnings) !important; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .blue-link:hover,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-details-container .blue-link:hover {
+ cursor: pointer; }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .custom-line,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .custom-line {
+ margin: 3% 0;
+ width: 7%;
+ height: 1.5px;
+ background-color: var(--labels_secondary-inactive-label-text-graphics); }
+ .check-connection-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-button-container,
+ .reconnect-popup-wrapper .ReactModal__Content .check-connection-popup-container .connection-button-container {
+ margin-top: 5%;
+ display: flex;
+ gap: 10px; }
+
+.connection-tool-tip {
+ background-color: var(--base_background); }
+
+.reconnect-popup-wrapper .reconnect-title-wrapper {
+ display: flex;
+ align-items: center;
+ font-size: 20px;
+ gap: 5px; }
+ .reconnect-popup-wrapper .reconnect-title-wrapper .reconnect-title {
+ text-transform: capitalize !important; }
+
+.reconnect-popup-wrapper .reconnect-details-container {
+ margin-top: 2%;
+ font-size: 14px; }
+ .reconnect-popup-wrapper .reconnect-details-container .reconnect-confirmation-message {
+ margin-top: 3%; }
+
+.reconnect-popup-wrapper .connection-button-container {
+ margin-top: 5%;
+ display: flex;
+ gap: 10px; }
+
+.connection-tool-tip,
+.connection-status-details {
+ max-width: fit-content !important; }
+ .connection-tool-tip .ant-tooltip-inner,
+ .connection-tool-tip .ant-tooltip-arrow-content,
+ .connection-status-details .ant-tooltip-inner,
+ .connection-status-details .ant-tooltip-arrow-content {
+ color: var(--labels_important-active-labels-text-graphics);
+ background-color: var(--base_background); }
+
+.connection-tool-tip,
+.connection-status-details,
+.connection-status-error-details {
+ max-width: fit-content !important; }
+ .connection-tool-tip .ant-tooltip-inner,
+ .connection-tool-tip .ant-tooltip-arrow-content,
+ .connection-status-details .ant-tooltip-inner,
+ .connection-status-details .ant-tooltip-arrow-content,
+ .connection-status-error-details .ant-tooltip-inner,
+ .connection-status-error-details .ant-tooltip-arrow-content {
+ color: var(--labels_important-active-labels-text-graphics);
+ background-color: var(--base_background); }
+
+.connection-status-details .ant-tooltip-inner,
+.connection-status-details .ant-tooltip-arrow-content,
+.connection-status-error-details .ant-tooltip-inner,
+.connection-status-error-details .ant-tooltip-arrow-content {
+ background-color: var(--base_background) !important; }
+
+.connection-status-details .ant-tooltip-inner,
+.connection-status-error-details .ant-tooltip-inner {
+ border-top: 2px solid var(--specials_checks-okay-done);
+ font-size: 13px; }
+ .connection-status-details .ant-tooltip-inner .conncetion-detail,
+ .connection-status-error-details .ant-tooltip-inner .conncetion-detail {
+ padding: 3% 0;
+ border-bottom: 1px solid var(--labels_secondary-inactive-label-text-graphics); }
+ .connection-status-details .ant-tooltip-inner .circle-icon,
+ .connection-status-error-details .ant-tooltip-inner .circle-icon {
+ padding: 5px;
+ background-color: var(--specials_checks-okay-done);
+ border-radius: 25px;
+ height: 2px;
+ width: 2px; }
+ .connection-status-details .ant-tooltip-inner .connection-title-wrapper,
+ .connection-status-error-details .ant-tooltip-inner .connection-title-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 3%;
+ text-wrap: nowrap;
+ padding: 4% 0; }
+ .connection-status-details .ant-tooltip-inner .connection-title-wrapper .connection-logo svg,
+ .connection-status-error-details .ant-tooltip-inner .connection-title-wrapper .connection-logo svg {
+ width: 1.5rem; }
+
+.connection-status-error-details .ant-tooltip-inner {
+ border-top: 2px solid var(--specials_notifications-alerts-warnings) !important; }
+ .connection-status-error-details .ant-tooltip-inner .circle-icon {
+ background-color: var(--specials_notifications-alerts-warnings) !important; }
+
+.connection-status-details:hover {
+ cursor: pointer; }
+
html {
font-size: 12px !important;
height: 100%; }
diff --git a/web/src/reducers/appReducer.js b/web/src/reducers/appReducer.js
index 296f7c110f..2d4df954e0 100644
--- a/web/src/reducers/appReducer.js
+++ b/web/src/reducers/appReducer.js
@@ -75,6 +75,13 @@ import {
SET_RECEIVER_EMAIL,
SET_WITHDRAW_OTIONAL_TAG,
SET_CHART_DATA,
+ SET_COINS_DATA,
+ SET_VERIFICATION_TAB,
+ SET_SECURITY_TAB,
+ SET_LIMITS_TAB,
+ SET_STAKE,
+ SET_SETTINGS_TAB,
+ SET_ACTIVE_CHAT,
} from 'actions/appActions';
import { THEME_DEFAULT } from 'config/constants';
import { getLanguage } from 'utils/string';
@@ -203,6 +210,13 @@ const INITIAL_STATE = {
isValidAddress: '',
selectedWithdrawMethod: 'Address',
receiverWithdrawalEmail: null,
+ coinsData: [],
+ selectedStake: null,
+ selectedTab: null,
+ selectedSecurityTab: 0,
+ selectedVerificationTab: 0,
+ selectedSettingsTab: 0,
+ isChat: JSON.parse(localStorage.getItem('isChat')),
};
const reducer = (state = INITIAL_STATE, { type, payload = {} }) => {
@@ -842,6 +856,48 @@ const reducer = (state = INITIAL_STATE, { type, payload = {} }) => {
receiverWithdrawalEmail: payload,
};
}
+ case SET_COINS_DATA: {
+ return {
+ ...state,
+ coinsData: payload,
+ };
+ }
+ case SET_STAKE: {
+ return {
+ ...state,
+ selectedStake: payload,
+ };
+ }
+ case SET_LIMITS_TAB: {
+ return {
+ ...state,
+ selectedTab: payload,
+ };
+ }
+ case SET_SECURITY_TAB: {
+ return {
+ ...state,
+ selectedSecurityTab: payload,
+ };
+ }
+ case SET_VERIFICATION_TAB: {
+ return {
+ ...state,
+ selectedVerificationTab: payload,
+ };
+ }
+ case SET_SETTINGS_TAB: {
+ return {
+ ...state,
+ selectedSettingsTab: payload,
+ };
+ }
+ case SET_ACTIVE_CHAT: {
+ return {
+ ...state,
+ isChat: payload,
+ };
+ }
default:
return state;
}
diff --git a/web/src/reducers/walletReducer.js b/web/src/reducers/walletReducer.js
index 03967e2310..c28a500b73 100644
--- a/web/src/reducers/walletReducer.js
+++ b/web/src/reducers/walletReducer.js
@@ -46,6 +46,7 @@ const INITIAL_STATE = {
withdrawalCancelData: INITIAL_DELETE_WHITDRAWALS_MSG,
activeTabFromWallet: '',
activeBalanceHistory: false,
+ scannedAddress: '',
};
export default function reducer(state = INITIAL_STATE, { type, payload }) {
@@ -340,6 +341,11 @@ export default function reducer(state = INITIAL_STATE, { type, payload }) {
...state,
activeBalanceHistory: payload.activeBalanceHistory,
};
+ case 'SETSCANNEDADDRESS':
+ return {
+ ...state,
+ scannedAddress: payload,
+ };
default:
return state;
}
diff --git a/web/src/routes.js b/web/src/routes.js
index 23e2a3a743..f4de35981c 100644
--- a/web/src/routes.js
+++ b/web/src/routes.js
@@ -3,82 +3,10 @@ import { Router, Route, browserHistory } from 'react-router';
import ReactGA from 'react-ga';
import { isMobile } from 'react-device-detect';
-import {
- App as Container,
- Account,
- MainWallet,
- P2P,
- CurrencyWallet,
- Login,
- Signup,
- VerificationEmailRequest,
- VerificationEmailCode,
- Home,
- Deposit,
- Withdraw,
- TransactionsHistory,
- Trade,
- ChartEmbed,
- Legal,
- AuthContainer,
- RequestResetPassword,
- ResetPassword,
- QuickTrade,
- Chat,
- WithdrawConfirmation,
- AddTradeTabs,
- Stake,
- StakeDetails,
- Apps,
- AppDetails,
- // ADMIN
- User,
- AdminStake,
- Audits,
- Session,
- AppWrapper as AdminContainer,
- // Main,
- // DepositsPage,
- Limits,
- // Wallets,
- UserFees,
- PATHS,
- AdminOrders,
- MobileHome,
- Broker,
- Plugins,
- PluginStore,
- // PluginServices,
- Settings,
- // Transfer,
- AdminFees,
- Init,
- AdminLogin,
- AdminDashboard,
- AdminFinancials,
- MoveToDash,
- General,
- Tiers,
- Roles,
- Resources,
- Pairs,
- Fiatmarkets,
- AdminApps,
- DigitalAssets,
- CoinPage,
- WhiteLabel,
- FeesAndLimits,
- ReferralList,
- AddressBook,
-} from './containers';
-import chat from './containers/Admin/Chat';
-import { Billing } from 'containers/Admin';
-
-import store from './store';
+import { PATHS } from './containers';
import { verifyToken } from './actions/authAction';
import { setLanguage } from './actions/appActions';
import { SmartTarget, NotLoggedIn } from 'components';
-
import {
isLoggedIn,
getToken,
@@ -92,10 +20,289 @@ import {
getLanguageFromLocal,
} from './utils/string';
import { getExchangeInitialized, getSetupCompleted } from './utils/initialize';
-import PluginConfig from 'containers/Admin/PluginConfig';
-import ConfirmChangePassword from 'containers/ConfirmChangePassword';
import { STAKING_INDEX_COIN, isStakingAvailable } from 'config/contracts';
+import chat from './containers/Admin/Chat';
+import store from './store';
+import PluginConfig from 'containers/Admin/PluginConfig';
+import Loadable from 'react-loadable';
+import { Loader } from 'components';
+
+const LoadingComponent = ({ isLoading, error }) => {
+ return
;
+};
+
+const Container = Loadable({
+ loader: () => import('./containers/App'),
+ loading: LoadingComponent,
+});
+
+const Account = Loadable({
+ loader: () => import('./containers/Account'),
+ loading: LoadingComponent,
+});
+
+const P2P = Loadable({
+ loader: () => import('./containers/P2P'),
+ loading: LoadingComponent,
+});
+
+const MainWallet = Loadable({
+ loader: () => import('./containers/Wallet/MainWallet'),
+ loading: LoadingComponent,
+});
+
+const Volume = Loadable({
+ loader: () => import('./containers/Volume'),
+ loading: LoadingComponent,
+});
+
+const CurrencyWallet = Loadable({
+ loader: () => import('./containers/Wallet/CurrencyWallet'),
+ loading: LoadingComponent,
+});
+
+const Login = Loadable({
+ loader: () => import('./containers/Login'),
+ loading: LoadingComponent,
+});
+
+const Signup = Loadable({
+ loader: () => import('./containers/Signup'),
+ loading: LoadingComponent,
+});
+const VerificationEmailRequest = Loadable({
+ loader: () => import('./containers/VerificationEmailRequest'),
+ loading: LoadingComponent,
+});
+const VerificationEmailCode = Loadable({
+ loader: () => import('./containers/VerificationEmailCode'),
+ loading: LoadingComponent,
+});
+const Home = Loadable({
+ loader: () => import('./containers/Home'),
+ loading: LoadingComponent,
+});
+const Deposit = Loadable({
+ loader: () => import('./containers/Deposit'),
+ loading: LoadingComponent,
+});
+const Withdraw = Loadable({
+ loader: () => import('./containers/Withdraw'),
+ loading: LoadingComponent,
+});
+const TransactionsHistory = Loadable({
+ loader: () => import('./containers/TransactionsHistory'),
+ loading: LoadingComponent,
+});
+const Trade = Loadable({
+ loader: () => import('./containers/Trade'),
+ loading: LoadingComponent,
+});
+const ChartEmbed = Loadable({
+ loader: () => import('./containers/ChartEmbed'),
+ loading: LoadingComponent,
+});
+const Legal = Loadable({
+ loader: () => import('./containers/Legal'),
+ loading: LoadingComponent,
+});
+const AuthContainer = Loadable({
+ loader: () => import('./containers/AuthContainer'),
+ loading: LoadingComponent,
+});
+const RequestResetPassword = Loadable({
+ loader: () => import('./containers/RequestResetPassword'),
+ loading: LoadingComponent,
+});
+const ResetPassword = Loadable({
+ loader: () => import('./containers/ResetPassword'),
+ loading: LoadingComponent,
+});
+const QuickTrade = Loadable({
+ loader: () => import('./containers/QuickTrade'),
+ loading: LoadingComponent,
+});
+const Chat = Loadable({
+ loader: () => import('./containers/Chat'),
+ loading: LoadingComponent,
+});
+const WithdrawConfirmation = Loadable({
+ loader: () => import('./containers/WithdrawConfirmation'),
+ loading: LoadingComponent,
+});
+const AddTradeTabs = Loadable({
+ loader: () => import('./containers/TradeTabs'),
+ loading: LoadingComponent,
+});
+const Stake = Loadable({
+ loader: () => import('./containers/Stake'),
+ loading: LoadingComponent,
+});
+const StakeDetails = Loadable({
+ loader: () => import('./containers/StakeDetails'),
+ loading: LoadingComponent,
+});
+const Apps = Loadable({
+ loader: () => import('./containers/Apps'),
+ loading: LoadingComponent,
+});
+const AppDetails = Loadable({
+ loader: () => import('./containers/AppDetails'),
+ loading: LoadingComponent,
+});
+
+// ADMIN
+const User = Loadable({
+ loader: () => import('./containers/Admin/User'),
+ loading: LoadingComponent,
+});
+
+const AdminStake = Loadable({
+ loader: () => import('./containers/Admin/Stakes'),
+ loading: LoadingComponent,
+});
+
+const Audits = Loadable({
+ loader: () => import('./containers/Admin/Audits'),
+ loading: LoadingComponent,
+});
+const Session = Loadable({
+ loader: () => import('./containers/Admin/Sessions'),
+ loading: LoadingComponent,
+});
+const AdminContainer = Loadable({
+ loader: () => import('./containers/Admin/AppWrapper'),
+ loading: LoadingComponent,
+});
+const Limits = Loadable({
+ loader: () => import('./containers/Admin/Limits'),
+ loading: LoadingComponent,
+});
+const UserFees = Loadable({
+ loader: () => import('./containers/Admin/UserFees'),
+ loading: LoadingComponent,
+});
+const AdminOrders = Loadable({
+ loader: () => import('./containers/Admin/ActiveOrders'),
+ loading: LoadingComponent,
+});
+const MobileHome = Loadable({
+ loader: () => import('./containers/MobileHome'),
+ loading: LoadingComponent,
+});
+const Broker = Loadable({
+ loader: () => import('./containers/Admin/Broker'),
+ loading: LoadingComponent,
+});
+const Plugins = Loadable({
+ loader: () => import('./containers/Admin/Plugins'),
+ loading: LoadingComponent,
+});
+const PluginStore = Loadable({
+ loader: () => import('./containers/Admin/Plugins/PluginStore'),
+ loading: LoadingComponent,
+});
+const Settings = Loadable({
+ loader: () => import('./containers/Admin/Settings'),
+ loading: LoadingComponent,
+});
+const AdminFees = Loadable({
+ loader: () => import('./containers/Admin/AdminFees'),
+ loading: LoadingComponent,
+});
+const Init = Loadable({
+ loader: () => import('./containers/Init'),
+ loading: LoadingComponent,
+});
+const AdminLogin = Loadable({
+ loader: () => import('./containers/Init/Login'),
+ loading: LoadingComponent,
+});
+const AdminDashboard = Loadable({
+ loader: () => import('./containers/Admin/Dashboard'),
+ loading: LoadingComponent,
+});
+const AdminFinancials = Loadable({
+ loader: () => import('./containers/Admin/AdminFinancials'),
+ loading: LoadingComponent,
+});
+const MoveToDash = Loadable({
+ loader: () => import('./containers/Admin/MoveToDash'),
+ loading: LoadingComponent,
+});
+
+const General = Loadable({
+ loader: () => import('./containers/Admin/General'),
+ loading: LoadingComponent,
+});
+
+const Tiers = Loadable({
+ loader: () => import('./containers/Admin/Tiers'),
+ loading: LoadingComponent,
+});
+const Roles = Loadable({
+ loader: () => import('./containers/Admin/Roles'),
+ loading: LoadingComponent,
+});
+const Resources = Loadable({
+ loader: () => import('./containers/Admin/Resources'),
+ loading: LoadingComponent,
+});
+const Pairs = Loadable({
+ loader: () => import('./containers/Admin/Trades'),
+ loading: LoadingComponent,
+});
+const Fiatmarkets = Loadable({
+ loader: () => import('./containers/Admin/Fiat'),
+ loading: LoadingComponent,
+});
+const AdminApps = Loadable({
+ loader: () => import('./containers/Admin/Apps'),
+ loading: LoadingComponent,
+});
+
+const Billing = Loadable({
+ loader: () => import('./containers/Admin/Billing'),
+ loading: LoadingComponent,
+});
+
+const DigitalAssets = Loadable({
+ loader: () => import('./containers/DigitalAssets'),
+ loading: LoadingComponent,
+});
+const CoinPage = Loadable({
+ loader: () => import('./containers/CoinPage'),
+ loading: LoadingComponent,
+});
+const WhiteLabel = Loadable({
+ loader: () => import('./containers/WhiteLabel'),
+ loading: LoadingComponent,
+});
+const FeesAndLimits = Loadable({
+ loader: () => import('./containers/FeesAndLimits'),
+ loading: LoadingComponent,
+});
+const ReferralList = Loadable({
+ loader: () => import('./containers/Summary/components/ReferralList'),
+ loading: LoadingComponent,
+});
+
+const AddressBook = Loadable({
+ loader: () => import('./containers/Wallet/AddressBook'),
+ loading: LoadingComponent,
+});
+
+const MobileBarMoreOptions = Loadable({
+ loader: () => import('./containers/App/MobileBarMoreOptions'),
+ loading: LoadingComponent,
+});
+
+const ConfirmChangePassword = Loadable({
+ loader: () => import('./containers/ConfirmChangePassword'),
+ loading: LoadingComponent,
+});
+
ReactGA.initialize('UA-154626247-1'); // Google analytics. Set your own Google Analytics values
browserHistory.listen((location) => {
if (window) {
@@ -256,7 +463,6 @@ function withAdminProps(Component, key) {
'tiers',
'roles',
'billing',
- 'fiat',
];
PATHS.map((data) => {
@@ -402,6 +608,9 @@ export const generateRoutes = (routes = []) => {
+ {isMobile && (
+
+ )}
{
component={MainWallet}
onEnter={requireAuth}
/>
+
{
.join('');
return { digit: point.length, format: `0,0.[${res}]` };
} else {
- if(amount) {
+ if (amount) {
const [digitsBeforeDecimal] = amount?.toString().split('.');
- return digitsBeforeDecimal.length > 4 ?{ digit: 0, format: `0,0` } : { digit: 4, format: `0,0.[0000]` };
- }
+ return digitsBeforeDecimal.length > 4
+ ? { digit: 0, format: `0,0` }
+ : { digit: 4, format: `0,0.[0000]` };
+ }
- return { digit: 4, format: `0,0.[0000]` };
+ return { digit: 4, format: `0,0.[0000]` };
}
};
-export const countDecimals = (val) => {
- if(Math.floor(val) === val) return 0;
- return val.toString().split(".")[1].length || 0;
- }
-
+export const countDecimals = (val) => {
+ if (Math.floor(val) === val) return 0;
+ return val.toString().split('.')[1].length || 0;
+};
export const formatToCurrency = (amount = 0, min = 0, fullFormat = false) => {
let formatObj = getFormat(min, fullFormat, amount);
- return numbro(roundNumber(amount, formatObj.digit)).format(formatObj.format);
+ return numbro(roundNumber(amount, formatObj.digit))?.format(
+ formatObj?.format
+ );
};
export const formatCurrencyByIncrementalUnit = (
diff --git a/web/src/utils/utils.js b/web/src/utils/utils.js
index 63e18d36f3..96070df9c2 100644
--- a/web/src/utils/utils.js
+++ b/web/src/utils/utils.js
@@ -316,3 +316,7 @@ export const constractPaymentOption = (paymentsData) => {
});
return _orderBy(tempData, ['orderBy'], ['asc']);
};
+
+export const handlePopupContainer = (triggerNode) => {
+ return triggerNode.parentNode;
+};
diff --git a/web/src/utils/wallet.js b/web/src/utils/wallet.js
index 879be8e266..98a53ca75a 100644
--- a/web/src/utils/wallet.js
+++ b/web/src/utils/wallet.js
@@ -34,6 +34,8 @@ export const getNetworkNameByKey = (network) => {
return 'Klaytn';
case 'matic':
return 'Polygon';
+ case 'pol':
+ return 'Polygon';
case 'sol':
return 'Solana';
case 'xlm':