diff --git a/web/src/config/lang/en.json b/web/src/config/lang/en.json index abf32c8328..e48f04990d 100644 --- a/web/src/config/lang/en.json +++ b/web/src/config/lang/en.json @@ -2092,6 +2092,8 @@ "USER_NAME": "Buyer name:", "ORDER_INITIATED_VENDOR": "Order has been initiated by", "CONFIRM_PAYMENT_VENDOR": "Please communicate with the buyer to confirm this transaction.", + "CONFIRM_PAYMENT_RELEASE": "You must confirm and release the crypto.", + "CONFIRM_PAYMENT_TRANSFER": "You must confirm that you've transferred the money", "ORDER_INITIATED": "You've initiated and created an order with", "CONFIRM_PAYMENT": "Please communicate with the seller to confirm your incoming payment.", "YOU": "You", @@ -2244,7 +2246,7 @@ "INPUT_PAYMENT_DETAIL_TEXT": "Input the payment detail name", "UNVERIFIED": "Unverified", "VERIFIED": "Verified", - "AMOUNT_RECEIVE": "will be released from your balance", + "AMOUNT_RECEIVE": "{0} {1} was released from your wallet balance.", "DELETE_WARNING": "Are you sure you want to delete this payment method?", "STEP_1": "Step 1/3", "STEP_2": "Step 2/3", @@ -2278,7 +2280,13 @@ "CANCEL_WARNING_TEXT": "Please note that frequent order cancellations may negatively affect your public P2P profile and could result in your account being suspended.", "UPDATE": "Update", "TERMS_ERROR_TEXT": "Please Input Terms field", - "RESPONSE_ERROR_TEXT": "Please Input Response field" + "RESPONSE_ERROR_TEXT": "Please Input Response field", + "CHECK_CONFIRM_TITLE": "Check, confirm and release", + "CHECK_CONFIRM_PAYMENT_DESC_1": "Check that you have indeed received the payment: {0} {1}", + "CHECK_CONFIRM_PAYMENT_DESC_2": "After confirming below the crypto ({0} {1}) will be released.", + "CHECK_CONFIRM_DECLARATION": "I confirm that I have received the correct payment", + "P2P_ORDER_COMPLETE": "P2P Order Complete", + "EXIST_PAYMENT_METHOD_DESC": "You’ve already added a payment method for {0}" }, "VOLUME": { "VOLUME": "VOLUME", diff --git a/web/src/containers/Admin/Trades/index.css b/web/src/containers/Admin/Trades/index.css index 87e35983e7..2b541ee076 100644 --- a/web/src/containers/Admin/Trades/index.css +++ b/web/src/containers/Admin/Trades/index.css @@ -791,3 +791,31 @@ .p2p-admin-select-asset .ant-select-item { cursor: text; } + +.p2p-admin-confirm-warning-popup-wrapper .ant-modal-body { + background-color: #27339d; + color: white; +} + +.p2p-admin-confirm-warning-popup-wrapper .p2p-admin-confirm-popup .title { + font-size: 18px; +} + +.p2p-admin-confirm-warning-popup-wrapper + .p2p-admin-confirm-popup + .confirm-button-container { + margin-top: 5%; + display: flex; + gap: 5%; +} + +.p2p-admin-confirm-warning-popup-wrapper + .p2p-admin-confirm-popup + .confirm-button-container + .green-btn { + border: none; +} + +.p2p-admin-confirm-warning-popup-wrapper .ant-modal-close-x { + color: white; +} diff --git a/web/src/containers/Admin/Trades/p2p.js b/web/src/containers/Admin/Trades/p2p.js index b7bebe550a..1d104c1978 100644 --- a/web/src/containers/Admin/Trades/p2p.js +++ b/web/src/containers/Admin/Trades/p2p.js @@ -1,14 +1,16 @@ /* eslint-disable */ import React, { useState } from 'react'; -import { Tabs } from 'antd'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import { Tabs } from 'antd'; + +import './index.css'; import P2PDeals from './p2pDeals'; import P2PDisputes from './p2pDisputes'; import P2PSettings from './p2pSettings'; - +import P2PActive from './p2pActive'; +import P2PUnverifiedPayments from './p2punverifiedPayments'; import { setExchange } from 'actions/assetActions'; -import './index.css'; const TabPane = Tabs.TabPane; @@ -39,9 +41,15 @@ const P2P = () => { - + + + + + + + ); diff --git a/web/src/containers/Admin/Trades/p2pActive.js b/web/src/containers/Admin/Trades/p2pActive.js new file mode 100644 index 0000000000..fb42a2034e --- /dev/null +++ b/web/src/containers/Admin/Trades/p2pActive.js @@ -0,0 +1,226 @@ +import React, { useEffect, useState } from 'react'; +import { connect } from 'react-redux'; +import { Table, Button, Modal } from 'antd'; +import { CloseOutlined } from '@ant-design/icons'; + +import { + fetchTransactions, + updateTransaction, +} from 'containers/P2P/actions/p2pActions'; +import { getToken } from 'utils/token'; +import { WS_URL } from 'config/constants'; + +const dataSource = (setIsConfirmWarning, setUserData) => { + return [ + { title: 'Order Id', dataIndex: 'id', key: 'id' }, + { + title: 'Buyer Name', + render: (data) => + data?.buyer?.full_name ? data?.buyer?.full_name : 'Anonymous', + }, + { + title: 'Seller Name', + render: (data) => + data?.merchant?.full_name ? data?.merchant?.full_name : 'Anonymous', + }, + { + title: 'Payment Method', + render: (data) => data?.payment_method_used?.system_name, + }, + { + title: 'Buying Asset', + render: (data) => data?.deal?.buying_asset?.toUpperCase(), + }, + { + title: 'Selling Asset', + render: (data) => data?.deal?.spending_asset?.toUpperCase(), + }, + { + title: 'Cancel', + render: (data) => { + return ( + + ); + }, + }, + ]; +}; + +const P2PActive = ({ user }) => { + const [getOrders, setGetOrders] = useState(); + const [selectedTransaction, setSelectedTransaction] = useState(); + const [webSocket, setWebSocket] = useState(); + const [isConfirmWarning, setIsConfirmWarning] = useState(false); + const [userData, setUserData] = useState(); + + const fetchData = async () => { + try { + const orders = await fetchTransactions(); + setGetOrders(orders); + } catch (error) { + console.error(error); + } + }; + + useEffect(() => { + let pingInterval; + + const connectWebSocket = () => { + const url = `${WS_URL}/stream?authorization=Bearer ${getToken()}`; + const p2pWebSocket = new WebSocket(url); + + p2pWebSocket.onopen = () => { + setWebSocket(p2pWebSocket); + + if (selectedTransaction?.first_created) { + p2pWebSocket.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 (p2pWebSocket.readyState === WebSocket.OPEN) { + p2pWebSocket.send(JSON.stringify({ op: 'ping' })); + } + }, 55000); + }; + + p2pWebSocket.onclose = (event) => { + clearInterval(pingInterval); + setTimeout(connectWebSocket, 3000); + }; + + p2pWebSocket.onerror = (error) => { + clearInterval(pingInterval); + p2pWebSocket.close(); + }; + + return p2pWebSocket; + }; + + const p2pWebSocket = connectWebSocket(); + + fetchData(); + + return () => { + clearInterval(pingInterval); + p2pWebSocket.close(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const notificationStatus = (status, title = '') => { + webSocket.send( + JSON.stringify({ + op: 'p2pChat', + args: [ + { + action: 'getStatus', + data: { + id: userData?.id, + status, + title, + receiver_id: + user?.id === userData?.merchant_id + ? userData?.user_id + : userData?.merchant_id, + }, + }, + ], + }) + ); + }; + + const onHandleCancel = async (data) => { + try { + await updateTransaction({ + id: data?.id, + user_status: 'cancelled', + }); + fetchData(); + notificationStatus('cancelled'); + setSelectedTransaction(data); + } catch (error) { + console.error(error); + } + }; + + const filteredOrders = getOrders?.data?.filter( + (data) => data?.transaction_status === 'active' + ); + + return ( +
+ } + visible={isConfirmWarning} + footer={null} + onCancel={() => { + setIsConfirmWarning(false); + }} + width={400} + className="p2p-admin-confirm-warning-popup-wrapper" + > +
+
+ {' '} + Are you sure you want to cancel this order? +
+
+ + +
+
+ + + + ); +}; + +const mapStateToProps = (state) => ({ + user: state.user, +}); + +export default connect(mapStateToProps)(P2PActive); diff --git a/web/src/containers/Admin/Trades/p2pDisputes.js b/web/src/containers/Admin/Trades/p2pDisputes.js index ea8399827e..5296012167 100644 --- a/web/src/containers/Admin/Trades/p2pDisputes.js +++ b/web/src/containers/Admin/Trades/p2pDisputes.js @@ -1,12 +1,12 @@ import React, { useState, useEffect } from 'react'; +import { connect } from 'react-redux'; +import { Link } from 'react-router'; +import { ClockCircleOutlined, CloseOutlined } from '@ant-design/icons'; import { Table, Button, Spin, Input, Modal, message } from 'antd'; import { requestDisputes, editDispute } from './actions'; import moment from 'moment'; // import BigNumber from 'bignumber.js'; // import { ExclamationCircleFilled } from '@ant-design/icons'; -import { connect } from 'react-redux'; -import { CloseOutlined } from '@ant-design/icons'; -import { Link } from 'react-router'; const P2PDisputes = ({ coins }) => { const [userData, setUserData] = useState([]); @@ -83,7 +83,12 @@ const P2PDisputes = ({ coins }) => { render: (user_id, data) => { return (
- {data?.resolution?.toUpperCase() || 'Not adjudicated'} + {data?.resolution?.toUpperCase() || ( + + Not adjudicated + + + )}
); }, diff --git a/web/src/containers/Admin/Trades/p2pSettings.js b/web/src/containers/Admin/Trades/p2pSettings.js index 2df7aa36a5..66f34de34f 100644 --- a/web/src/containers/Admin/Trades/p2pSettings.js +++ b/web/src/containers/Admin/Trades/p2pSettings.js @@ -103,7 +103,7 @@ const P2PSettings = ({ coins, pairs, p2p_config, features, constants }) => { getAllUserData({ id: p2p_config?.source_account }).then((res) => { let emailData = {}; res && - res.forEach((item) => { + res?.forEach((item) => { if (item.value === p2p_config?.source_account) { emailData = item; } diff --git a/web/src/containers/Admin/Trades/p2punverifiedPayments.js b/web/src/containers/Admin/Trades/p2punverifiedPayments.js new file mode 100644 index 0000000000..6fcec5b3d9 --- /dev/null +++ b/web/src/containers/Admin/Trades/p2punverifiedPayments.js @@ -0,0 +1,87 @@ +import React, { useEffect, useState } from 'react'; +import { Link } from 'react-router'; +import { Table, Button } from 'antd'; + +import { fetchP2PPaymentMethods } from '../User/actions'; + +const users = [ + { + title: 'User ID', + dataIndex: 'user_id', + key: 'user_id', + render: (user_id, data) => { + return ( +
+ +
+ ); + }, + }, + { + title: 'Payment Method', + dataIndex: 'payment_method', + key: 'payment_method', + render: (user_id, data) => { + return
{data?.name}
; + }, + }, + { + title: 'Details', + dataIndex: 'details', + key: 'details', + render: (user_id, data) => { + return ( +
+
    + {data?.details?.fields.map((field) => ( +
  • + {field?.name}: {field?.value} +
    • + ))} +
+
+ ); + }, + }, + { + title: 'Status', + dataIndex: 'status', + key: 'status', + render: (user_id, data) => { + return
{data?.status === 0 && 'Unverified'}
; + }, + }, +]; + +const P2PUnverifiedPayments = () => { + const [userList, setUserList] = useState([]); + + const fetchPayment = async () => { + try { + const payment = await fetchP2PPaymentMethods(); + setUserList(payment); + } catch (err) { + console.error('err', err); + } + }; + + useEffect(() => { + fetchPayment(); + }, []); + + const filterByPayment = userList?.data?.filter((data) => data?.status === 0); + + return ( +
+
+ + ); +}; + +export default P2PUnverifiedPayments; diff --git a/web/src/containers/App/Socket.js b/web/src/containers/App/Socket.js index abf004a300..7c5c473dfa 100644 --- a/web/src/containers/App/Socket.js +++ b/web/src/containers/App/Socket.js @@ -455,23 +455,39 @@ class Container extends Component { const notificationDetails = { key, - message: - data.action === 'getStatus' && data?.data?.status === 'appeal' - ? STRINGS['P2P.APPEAL_STATUS_MESSAGE'] - : data?.action === 'getStatus' && - data?.data?.status === 'cancelled' - ? STRINGS['P2P.CANCEL_STATUS_MESSAGE'] - : data?.action === 'getStatus' && - data?.data?.status === 'confirmed' && - data?.data?.title === 'crypto' - ? STRINGS['P2P.CRYPTO_RELEASE_STATUS_MESSAGE'] - : data?.data?.status === 'confirmed' - ? STRINGS['P2P.CONFIRM_STATUS_MESSAGE'] - : data?.data?.status === 'created' - ? STRINGS['P2P.NEW_ORDER_CREATED'] - : data?.action === 'getStatus' - ? STRINGS['P2P.STATUS_UPDATE'] - : STRINGS['P2P.NEW_MESSAGE'], + message: ( +
+ + {data.action === 'getStatus' && + data?.data?.status === 'appeal' + ? STRINGS['P2P.APPEAL_STATUS_MESSAGE'] + : data?.action === 'getStatus' && + data?.data?.status === 'cancelled' + ? STRINGS['P2P.CANCEL_STATUS_MESSAGE'] + : data?.action === 'getStatus' && + data?.data?.status === 'confirmed' && + data?.data?.title === 'crypto' + ? STRINGS['P2P.CRYPTO_RELEASE_STATUS_MESSAGE'] + : data?.data?.status === 'confirmed' + ? STRINGS['P2P.CONFIRM_STATUS_MESSAGE'] + : data?.data?.status === 'created' + ? STRINGS['P2P.NEW_ORDER_CREATED'] + : data?.action === 'getStatus' + ? STRINGS['P2P.STATUS_UPDATE'] + : STRINGS['P2P.NEW_MESSAGE']} + + {data?.data?.message && ( + + + {data?.data?.sender_name}:{' '} + + + {data?.data?.message} + + + )} +
+ ), description: (
- ) : previousMessage === STRINGS['P2P.NEW_MESSAGE'] ? ( + ) : previousNotificationMessage === + STRINGS['P2P.NEW_MESSAGE'] ? ( ) : ( diff --git a/web/src/containers/App/_App.scss b/web/src/containers/App/_App.scss index 60f2a120cf..a6ba2a6d7d 100644 --- a/web/src/containers/App/_App.scss +++ b/web/src/containers/App/_App.scss @@ -354,7 +354,7 @@ $inner_container-border: 1px solid $colors-super-pale-black; border-top: 2px solid $colors-notifications-blue; box-shadow: 4px 4px 15px $app-bar-background-color; padding: 10px 10px !important; - width: 100%; + width: 27rem; .ant-notification-notice-description, .ant-notification-notice-message, @@ -366,6 +366,17 @@ $inner_container-border: 1px solid $colors-super-pale-black; .ant-notification-notice-description { margin-left: 40px; font-size: 13px; + max-width: 85%; + .sender-name { + color: $chat-own-message--color; + } + .chat-message { + color: $chat-message-color; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } .ant-notification-notice-close { top: 10px; @@ -384,6 +395,9 @@ $inner_container-border: 1px solid $colors-super-pale-black; margin-left: 0px !important; width: 100% !important; max-width: unset !important; + .p2p-chat-notification-wrapper { + width: 100% !important; + } } .layout-mobile { diff --git a/web/src/containers/P2P/P2PDash.js b/web/src/containers/P2P/P2PDash.js index 6f6a952a4e..ae0ed6286c 100644 --- a/web/src/containers/P2P/P2PDash.js +++ b/web/src/containers/P2P/P2PDash.js @@ -54,6 +54,7 @@ const P2PDash = ({ changeProfileTab, tab, }) => { + const isBuySell = JSON.parse(localStorage.getItem('isBuySelected')); const [expandRow, setExpandRow] = useState(false); const [selectedDeal, setSelectedDeal] = useState(); const [selectedMethod, setSelectedMethod] = useState(); @@ -75,7 +76,7 @@ const P2PDash = ({ const [selectedProfile, setSelectedProfile] = useState(); const [myMethods, setMyMethods] = useState([]); // const inputRef = useRef(null); - const [isBuySelected, setIsBuySelected] = useState(true); + const [isBuySelected, setIsBuySelected] = useState(isBuySell); const [buyValue, setBuyValue] = useState([]); const [selectedCoin, setSelectedCoin] = useState('USDT'); const [isFilter, setIsFilter] = useState(false); @@ -86,7 +87,9 @@ const P2PDash = ({ fetchDeals({ status: true }) .then((res) => { setDeals(res.data); - const buyDeals = res.data?.filter((deal) => deal?.side === 'sell'); + const buyDeals = res.data?.filter((deal) => + !isBuySelected ? deal?.side === 'buy' : deal?.side === 'sell' + ); const filteredDeals = buyDeals?.filter((deal) => selectedCoin?.includes(deal?.buying_asset?.toUpperCase()) ); @@ -141,6 +144,7 @@ const P2PDash = ({ const cryptoAsset = filteredDeals?.filter((deal) => selectedCoin?.includes(deal?.buying_asset?.toUpperCase()) ); + localStorage.setItem('isBuySelected', newIsBuySelected); setIsBuySelected(newIsBuySelected); setBuyValue(cryptoAsset); }; @@ -816,6 +820,14 @@ const P2PDash = ({
{filteredDeals?.map((deal) => { + const isDisabled = + loading || + !user?.id || + !amountFiat || + amountFiat <= 0 || + !selectedMethod?.system_name || + deal?.min_order_value > amountFiat || + deal?.max_order_value < amountFiat; return ( <>
- - - - - - - - {userFeedback.map((deal) => { - return ( - - - - - ); - })} - -
- - {STRINGS['P2P.COMMENT']} - - - - {STRINGS['P2P.RATING']} - -
{deal.comment} - -
- )} -
- - - - )} + {displayUserFeedback && + renderFeedback( + displayUserFeedback, + setDisplayUserFeedback, + selectedProfile, + userProfile, + userFeedback + )} {displayFeedbackModal && ( { setDisplayConfirmWarning(false); + setIsDecalred(false); }} >
-
- - {STRINGS['P2P.CONFIRM_WARNING']} - +
+ + +
-
-
- {userReceiveAmount()} - - {selectedOrder?.deal?.buying_asset?.toUpperCase()}{' '} - - - - {STRINGS['P2P.AMOUNT_RECEIVE']} +
+ + {STRINGS['P2P.CHECK_CONFIRM_TITLE']} - +
+
+ + + {STRINGS.formatString( + STRINGS['P2P.CHECK_CONFIRM_PAYMENT_DESC_1'], + + {selectedOrder?.amount_fiat} + , + + {selectedOrder?.deal?.spending_asset?.toUpperCase()} + + )} + + + + + {STRINGS.formatString( + STRINGS['P2P.CHECK_CONFIRM_PAYMENT_DESC_2'], + + {userReceiveAmount()} + , + + {selectedOrder?.deal?.buying_asset?.toUpperCase()} + + )} + + +
+ setIsDecalred(!isDecalred)} + /> + +
+
-
)} - {!isChat && ( + setDisplayReleasedAmountPopup(false)} + className="release-amount-popup-wrapper feedback-submit-popup-wrapper" + > +
+
+ + {STRINGS['P2P.P2P_ORDER_COMPLETE']} + +
+
+ + + + {STRINGS.formatString( + STRINGS['P2P.AMOUNT_RECEIVE'], + + {userReceiveAmount()} + , + + {selectedOrder?.deal?.buying_asset?.toUpperCase()} + + )} + + +
+
+ +
+
+ + + {((isMobile && !isChat) || !isMobile) && (
{ @@ -795,84 +772,87 @@ const P2POrder = ({
)} - {(isOrderCreated || isOrderVerified || isOrderConfirmed) && !isChat && ( -
-
-
- {(isOrderCreated || isOrderVerified || isOrderConfirmed) && ( - - )} -
-
-
- - {STRINGS['P2P.STEP_1']}: - + {(isOrderCreated || isOrderVerified || isOrderConfirmed) && + ((isMobile && !isChat) || !isMobile) && ( +
+
+
+ {(isOrderCreated || isOrderVerified || isOrderConfirmed) && ( + + )}
-
- - {STRINGS['P2P.P2P_ORDER_CREATED']} - +
+
+ + {STRINGS['P2P.STEP_1']}: + +
+
+ + {STRINGS['P2P.P2P_ORDER_CREATED']} + +
-
-
-
-
- {(isOrderVerified || isOrderConfirmed) && } -
-
-
- - {STRINGS['P2P.STEP_2']}: - +
+
+
+ {(isOrderVerified || isOrderConfirmed) && ( + + )}
-
- - {STRINGS['P2P.VENDOR_CHECKS_TITLE']} - +
+
+ + {STRINGS['P2P.STEP_2']}: + +
+
+ + {STRINGS['P2P.VENDOR_CHECKS_TITLE']} + +
-
-
-
-
- {isOrderConfirmed && } -
-
-
- - {STRINGS['P2P.STEP_3']}: - +
+
+
+ {isOrderConfirmed && }
-
- - {STRINGS['P2P.FUND_RELEASED']} - +
+
+ + {STRINGS['P2P.STEP_3']}: + +
+
+ + {STRINGS['P2P.FUND_RELEASED']} + +
-
- )} + )}
-
+
@@ -901,7 +881,13 @@ const P2POrder = ({ {selectedOrder.transaction_id}
-
+ {user.id === selectedOrder.merchant_id ? ( {STRINGS['P2P.SELL_COIN']} @@ -912,7 +898,7 @@ const P2POrder = ({ )}{' '} {coin?.fullname} ({coin?.symbol?.toUpperCase()}) -
+
{/*
{ - try { - setDisplayAppealModel(true); - setAppealSide('merchant'); - } catch (error) { - message.error(error.data.message); + if (selectedOrder?.user_status === 'confirmed') { + try { + setDisplayAppealModel(true); + setAppealSide('merchant'); + } catch (error) { + message.error(error.data.message); + } } }} > @@ -1581,7 +1573,7 @@ const P2POrder = ({ )}
-
+
{user.id === selectedOrder?.user_id && (
@@ -1651,6 +1643,15 @@ const P2POrder = ({
)} + {user?.id === selectedOrder?.user_id && + selectedOrder?.transaction_status === 'active' && + selectedOrder?.user_status === 'pending' && ( +
+ + {STRINGS['P2P.CONFIRM_PAYMENT_TRANSFER']} + +
+ )}
@@ -1676,7 +1677,7 @@ const P2POrder = ({ } else { if (message.type === 'notification') { return ( -
+
{message.message === 'BUYER_PAID_ORDER' && user.id === selectedOrder.user_id ? ( selectedOrder?.deal?.side === 'sell' ? ( @@ -1706,6 +1707,15 @@ const P2POrder = ({ ).format('DD/MMM/YYYY, hh:mmA')} ) + {user?.id === selectedOrder?.merchant_id && + selectedOrder?.merchant_status === + 'pending' && ( +
+ + {STRINGS['P2P.CONFIRM_PAYMENT_RELEASE']} + +
+ )}
); } else { diff --git a/web/src/containers/P2P/P2POrder/P2POrderChat.js b/web/src/containers/P2P/P2POrder/P2POrderChat.js index 035f72880a..2268d13e45 100644 --- a/web/src/containers/P2P/P2POrder/P2POrderChat.js +++ b/web/src/containers/P2P/P2POrder/P2POrderChat.js @@ -154,7 +154,7 @@ const P2POrderChat = ({
)}
-
+
{user?.id === selectedOrder?.user_id && (
@@ -217,9 +217,27 @@ const P2POrderChat = ({
)} + {user?.id === selectedOrder?.user_id && + selectedOrder?.transaction_status === 'active' && + selectedOrder?.user_status === 'pending' && ( +
+ + {STRINGS['P2P.CONFIRM_PAYMENT_TRANSFER']} + +
+ )}
-
+
{selectedOrder?.messages?.map((message, index) => { if (index === 0) { @@ -244,7 +262,7 @@ const P2POrderChat = ({ } else { if (message.type === 'notification') { return ( -
+
{message.message === 'BUYER_PAID_ORDER' && user?.id === selectedOrder?.user_id ? ( @@ -262,6 +280,14 @@ const P2POrderChat = ({ )} ) + {user?.id === selectedOrder?.merchant_id && + selectedOrder?.merchant_status === 'pending' && ( +
+ + {STRINGS['P2P.CONFIRM_PAYMENT_RELEASE']} + +
+ )}
); } else { diff --git a/web/src/containers/P2P/P2POrder/P2POrderDetails.js b/web/src/containers/P2P/P2POrder/P2POrderDetails.js index 136a314beb..b55ba8b250 100644 --- a/web/src/containers/P2P/P2POrder/P2POrderDetails.js +++ b/web/src/containers/P2P/P2POrder/P2POrderDetails.js @@ -46,7 +46,7 @@ const P2POrderDetails = ({ >
-
+
{STRINGS['P2P.ORDER']}: @@ -55,7 +55,13 @@ const P2POrderDetails = ({ {selectedOrder?.transaction_id} -
+ {user?.id === selectedOrder?.merchant_id ? ( {STRINGS['P2P.SELL_COIN']} @@ -66,7 +72,7 @@ const P2POrderDetails = ({ )}{' '} {coin?.fullname} ({coin?.symbol?.toUpperCase()}) -
+
{isMobile && (
@@ -574,14 +580,20 @@ const P2POrderDetails = ({ >
{ - try { - setDisplayAppealModel(true); - setAppealSide('merchant'); - } catch (error) { - message.error(error.data.message); + if (selectedOrder?.user_status === 'confirmed') { + try { + setDisplayAppealModel(true); + setAppealSide('merchant'); + } catch (error) { + message.error(error.data.message); + } } }} - className="appeal-link blue-link" + className={ + selectedOrder?.user_status !== 'confirmed' + ? 'appeal-link blue-link disable-link' + : 'appeal-link blue-link' + } > {STRINGS['P2P.APPEAL']} diff --git a/web/src/containers/P2P/P2POrders.js b/web/src/containers/P2P/P2POrders.js index 19256c33ec..bf3e6d766b 100644 --- a/web/src/containers/P2P/P2POrders.js +++ b/web/src/containers/P2P/P2POrders.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { withRouter } from 'react-router'; import { connect } from 'react-redux'; import { isMobile } from 'react-device-detect'; -import { Button } from 'antd'; +import { Button, Card } from 'antd'; import { CheckCircleTwoTone, PlaySquareTwoTone } from '@ant-design/icons'; import './_P2P.scss'; @@ -10,9 +10,13 @@ import classnames from 'classnames'; import STRINGS from 'config/localizedStrings'; import withConfig from 'components/ConfigProvider/withConfig'; import Filter from './Filters'; -import NoDealsData from './Utilis'; +import NoDealsData, { renderFeedback } from './Utilis'; import { Coin, EditWrapper } from 'components'; -import { fetchTransactions } from './actions/p2pActions'; +import { + fetchFeedback, + fetchP2PProfile, + fetchTransactions, +} from './actions/p2pActions'; import { formatToCurrency } from 'utils/currency'; const P2POrders = ({ @@ -31,6 +35,14 @@ const P2POrders = ({ router, changeProfileTab, tab, + displayUserFeedback, + setDisplayUserFeedback, + selectedProfile, + userProfile, + userFeedback, + setSelectedProfile, + setUserFeedback, + setUserProfile, }) => { const [transactions, setTransactions] = useState([]); const [filter, setFilter] = useState(); @@ -74,6 +86,32 @@ const P2POrders = ({ setFilter(); } }; + + const onHandleFeedback = async (transaction) => { + const isMerchant = + transaction?.user_id === user?.id + ? transaction?.merchant + : transaction?.buyer; + const isMerchantId = + transaction?.user_id === user?.id + ? transaction?.merchant_id + : transaction?.buyer?.id; + try { + setSelectedProfile(isMerchant); + const feedbacks = await fetchFeedback({ + merchant_id: isMerchantId, + }); + const profile = await fetchP2PProfile({ + user_id: isMerchantId, + }); + setUserFeedback(feedbacks?.data); + setUserProfile(profile); + setDisplayUserFeedback(true); + } catch (error) { + console.error(error); + } + }; + return (
+ {displayUserFeedback && + renderFeedback( + displayUserFeedback, + setDisplayUserFeedback, + selectedProfile, + userProfile, + userFeedback + )}
{orderStatus?.map((status) => { return ( @@ -136,47 +182,202 @@ const P2POrders = ({ )}
{transactions?.length > 0 ? ( - - - - - - - - - - - - - + !isMobile ? ( +
- - {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', + }; + + const transactionStatusClass = + statusClassMap[transaction?.transaction_status] || + 'inactive-text'; + const isDisabled = [ + 'expired', + 'cancelled', + 'closed', + ].includes(transaction?.transaction_status); + return ( + + + + + + + + + + + + ); + })} + +
+ + {STRINGS['P2P.TYPE_COIN']} + + + + {STRINGS['P2P.FIAT_AMOUNT']} + + + + {STRINGS['P2P.PRICE']} + + + + {STRINGS['P2P.CRYPTO_AMOUNT']} + + + + {STRINGS['P2P.COUNTERPARTY']} + + + + {STRINGS['P2P.STATUS']} + + + + {STRINGS['P2P.OPERATION']} + +
+ {transaction?.user_id === user?.id ? ( + + ) : ( + + )} + + {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 ? ( + { + onHandleFeedback(transaction); + }} + > + {transaction?.merchant?.full_name || ( + + {STRINGS['P2P.ANONYMOUS']} + + )} + + ) : ( + { + onHandleFeedback(transaction); + }} + > + {transaction?.buyer?.full_name || ( + + {STRINGS['P2P.ANONYMOUS']} + + )} + + )} + +
+ + {transaction?.transaction_status} + + {transaction?.transaction_status === 'complete' && ( + + + + )} + {transaction?.transaction_status === 'active' && ( + + + + )} +
+ 		+
{ + setDisplayOrder(true); + setSelectedTransaction(transaction); + router.replace(`/p2p/order/${transaction?.id}`); + }} + > + + + {STRINGS['P2P.VIEW_ORDER']} + + +
+
+ ) : ( +
{transactions ?.filter((x) => filter @@ -197,135 +398,145 @@ const P2POrders = ({ 'expired', 'cancelled', 'closed', - ].includes(transaction?.transaction_status); + ]?.includes(transaction?.transaction_status); return ( - - - {transaction?.user_id === user?.id ? ( - - ) : ( - - )} - - - - {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.FIAT_AMOUNT']}: + - - {transaction?.deal?.buying_asset?.toUpperCase()} + + {transaction?.amount_fiat} + + {transaction?.deal?.spending_asset?.toUpperCase()} + -
- - - {transaction?.user_id === user?.id ? ( - { - changeProfileTab(transaction?.merchant); - }} - > - {transaction?.merchant?.full_name || ( - - {STRINGS['P2P.ANONYMOUS']} - - )} - - ) : ( +
- {transaction?.buyer?.full_name || ( - - {STRINGS['P2P.ANONYMOUS']} - - )} + + {STRINGS['P2P.CRYPTO_AMOUNT']}: + - )} - - -
- - {transaction?.transaction_status} - - {transaction?.transaction_status === 'complete' && ( - - +
+ + {formatAmount( + transaction?.deal?.buying_asset, + transaction?.amount_digital_currency + )} - )} - {transaction?.transaction_status === 'active' && ( - - + + {transaction?.deal?.buying_asset?.toUpperCase()} - )} + +
- - -
{ - setDisplayOrder(true); - setSelectedTransaction(transaction); - router.replace(`/p2p/order/${transaction?.id}`); - }} - > - - - {STRINGS['P2P.VIEW_ORDER']} +
+
+ + + {STRINGS['P2P.STATUS']}: + - +
+ + {transaction?.transaction_status} + + {transaction?.transaction_status === + 'complete' && ( + + + + )} + {transaction?.transaction_status === 'active' && ( + + + + )} +
+
+
+
{ + setDisplayOrder(true); + setSelectedTransaction(transaction); + router.replace(`/p2p/order/${transaction?.id}`); + }} + > + + + {STRINGS['P2P.VIEW_ORDER']} + + +
+
- - +
+ ); })} - - +
+ ) ) : ( )} diff --git a/web/src/containers/P2P/P2PPostDeal.js b/web/src/containers/P2P/P2PPostDeal.js index 6330e024b4..173ca7f7f4 100644 --- a/web/src/containers/P2P/P2PPostDeal.js +++ b/web/src/containers/P2P/P2PPostDeal.js @@ -18,7 +18,11 @@ 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'; +import { + editDeal, + fetchP2PPaymentMethods, + postDeal, +} from './actions/p2pActions'; const P2PPostDeal = ({ data, @@ -65,6 +69,7 @@ const P2PPostDeal = ({ stepTwo: false, stepThree: false, }); + const [myMethods, setMyMethods] = useState([]); useEffect(() => { if (selectedDealEdit) { @@ -96,6 +101,28 @@ const P2PPostDeal = ({ }; }, [tab]); + useEffect(() => { + try { + fetchP2PPaymentMethods({ is_p2p: true }) + .then((res) => { + setMyMethods(res.data); + }) + .catch((err) => err); + } catch (error) { + console.error(error); + } + if (!selectedDealEdit) { + setPaymentMethods(() => + p2p_config?.bank_payment_methods?.filter((method) => + myMethods?.map( + (payment) => method?.system_name === payment?.system_name + ) + ) + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [step]); + const getBrokerData = async () => { try { const res = broker; diff --git a/web/src/containers/P2P/P2PProfile.js b/web/src/containers/P2P/P2PProfile.js index 9f60cc1eca..dcff9e1a85 100644 --- a/web/src/containers/P2P/P2PProfile.js +++ b/web/src/containers/P2P/P2PProfile.js @@ -114,6 +114,11 @@ const P2PProfile = ({ }); } }; + + const isPaymentMethod = myMethods?.filter((method) => { + return method?.name === paymentMethod?.system_name; + }); + return (
{ - const payload = { - system_name: paymentMethod.system_name, - fields: customFields, - }; - paymentMethods.push(payload); - - if (!payload.system_name) { - message.error(STRINGS['P2P.INPUT_METHOD_NAME_TEXT']); - return; - } - - let hasValidation = true; - payload.fields?.forEach((field) => { - if (!field.name || !field.value) { - message.error(STRINGS['P2P.FIELD_VALIDATION_TEXT']); - hasValidation = false; + if (isPaymentMethod?.length === 0) { + const payload = { + system_name: paymentMethod.system_name, + fields: customFields, + }; + paymentMethods.push(payload); + + if (!payload.system_name) { + message.error(STRINGS['P2P.INPUT_METHOD_NAME_TEXT']); + return; } - }); - if (!hasValidation) return; - await createP2PPaymentMethod({ - name: payload.system_name, - details: payload, - is_p2p: true, - }); - message.success(STRINGS['P2P.PAYMENT_METHOD_CREATED']); + let hasValidation = true; + payload.fields?.forEach((field) => { + if (!field.name || !field.value) { + message.error(STRINGS['P2P.FIELD_VALIDATION_TEXT']); + hasValidation = false; + } + }); + if (!hasValidation) return; + await createP2PPaymentMethod({ + name: payload.system_name, + details: payload, + is_p2p: true, + }); - fetchP2PPaymentMethods({ is_p2p: true }) - .then((res) => { - setMyMethods(res.data); - }) - .catch((err) => err); + message.success(STRINGS['P2P.PAYMENT_METHOD_CREATED']); - setPaymentMethods(paymentMethods); - setDisplayNewPayment(false); - setDefaultPaymentMethod(); - setCustomFields([ - { - id: 1, - name: null, - required: true, - }, - ]); - setRefresh(!refresh); + fetchP2PPaymentMethods({ is_p2p: true }) + .then((res) => { + setMyMethods(res.data); + }) + .catch((err) => err); + + setPaymentMethods(paymentMethods); + setDisplayNewPayment(false); + setDefaultPaymentMethod(); + setCustomFields([ + { + id: 1, + name: null, + required: true, + }, + ]); + setRefresh(!refresh); + } else { + message.error( + STRINGS.formatString( + STRINGS['P2P.EXIST_PAYMENT_METHOD_DESC'], + paymentMethod?.system_name + ) + ); + setDisplayNewPayment(false); + } }} className="purpleButtonP2P add-btn" type="default" diff --git a/web/src/containers/P2P/Utilis.js b/web/src/containers/P2P/Utilis.js index 8877a95d5d..51c3d2d6f0 100644 --- a/web/src/containers/P2P/Utilis.js +++ b/web/src/containers/P2P/Utilis.js @@ -1,9 +1,10 @@ import React from 'react'; +import { Rate } from 'antd'; import icons from 'config/icons/dark'; -import strings from 'config/localizedStrings'; +import STRINGS from 'config/localizedStrings'; import { IconTitle } from 'hollaex-web-lib'; -import { EditWrapper } from 'components'; +import { Dialog, EditWrapper } from 'components'; const NoDealsData = ({ trade }) => { return ( @@ -12,16 +13,16 @@ const NoDealsData = ({ trade }) => { stringId="ACCOUNTS.P2P" textType="title" iconPath={icons['TAB_P2P']} - iconId={strings['ACCOUNTS.P2P']} + iconId={STRINGS['ACCOUNTS.P2P']} /> {trade === 'deals' ? ( - {strings['P2P.NO_DEALS_DESC']} + {STRINGS['P2P.NO_DEALS_DESC']} ) : ( - {strings['P2P.NO_ORDERS_DESC']} + {STRINGS['P2P.NO_ORDERS_DESC']} )} @@ -29,4 +30,142 @@ const NoDealsData = ({ trade }) => { ); }; +export const renderFeedback = ( + displayUserFeedback, + setDisplayUserFeedback, + selectedProfile, + userProfile, + userFeedback +) => { + return ( + { + 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']} + +
+ ) : ( + + + + + + + + + {userFeedback?.map((deal) => { + return ( + + + + + ); + })} + +
+ + {STRINGS['P2P.COMMENT']} + + + + {STRINGS['P2P.RATING']} + +
{deal?.comment} + +
+ )} +
+
+
+ + ); +}; + export default NoDealsData; diff --git a/web/src/containers/P2P/_P2P.scss b/web/src/containers/P2P/_P2P.scss index 9c77e88ce2..fa127c8fbb 100644 --- a/web/src/containers/P2P/_P2P.scss +++ b/web/src/containers/P2P/_P2P.scss @@ -387,6 +387,10 @@ margin-top: 15px; gap: 10px; + .inactive-btn { + background-color: var(--labels_inactive-button) !important; + } + .greyButtonP2P { color: var( --labels_important-active-labels-text-graphics @@ -695,6 +699,9 @@ tbody { tr { + .transaction-user-name:hover { + cursor: pointer; + } .trade-button, .transaction-fiat-amount, .transaction-currency-amount, @@ -1686,6 +1693,19 @@ .asset-name { font-weight: bold; } + + .asset-buy, + .asset-sell { + padding: 0.5% 2%; + background-color: var(--specials_checks-okay-done); + width: max-content; + } + + .asset-sell { + background-color: var( + --trading_selling-related-elements + ) !important; + } } .transaction-container, @@ -1813,6 +1833,10 @@ cursor: pointer; } + .disable-link { + cursor: not-allowed !important; + } + .appeal-confirm-button-container-active { display: flex; align-items: center; @@ -1822,7 +1846,6 @@ } .appeal-confirm-button-container { - pointer-events: none; opacity: 0.5; } } @@ -2686,6 +2709,51 @@ } } +.confirm-popup-wrapper { + .feedback-submit-popup-container { + align-items: center; + } + .submit-transaction-button-container { + .inactive-btn { + background-color: var(--labels_inactive-button) !important; + } + } +} + +.release-amount-popup-wrapper { + .ReactModal__Content { + width: 30%; + .release-amount-details-container { + .user-receive-amount-detail { + font-size: 14px; + display: flex; + align-items: flex-start; + } + .order-complete-title { + font-size: 22px; + } + .check-icon { + 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: #ffffff; + } + } + } + } + } +} + .cancel-popup-wrapper, .confirm-popup-wrapper, .confirmation-remove-deal-popup-wrapper { @@ -2697,6 +2765,43 @@ font-size: 18px !important; } + .warning-icon { + background-color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25px; + + svg { + width: 6rem; + height: 6rem; + path { + fill: var(--specials_pending-waiting-caution); + } + } + } + + .confirm-payment-description { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 5px; + .payment-declaration-text { + margin-top: 5%; + display: flex; + .ant-checkbox-inner { + background-color: var(--base_wallet-sidebar-and-popup); + } + + .ant-checkbox-checked { + .ant-checkbox-inner::after { + border-color: var(--labels_important-active-labels-text-graphics); + } + } + } + } + .cancel-warning-text { padding: 3%; background-color: var(--base_secondary-navigation-bar); @@ -2715,11 +2820,6 @@ } } - .user-receive-amount-detail { - margin-top: 3%; - font-size: 14px; - } - .submit-transaction-button-container { margin-top: 5% !important; } @@ -3579,6 +3679,82 @@ overflow-x: scroll; text-wrap: nowrap; + .p2p-orders-details-card-wrapper { + display: flex; + flex-direction: column; + gap: 15px; + + .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); + } + + .p2p-orders-card-details { + background-color: var(--base_wallet-sidebar-and-popup) !important; + border: none; + font-size: 24px; + border-bottom: 5px solid var(--base_background); + .p2p-orders-details-inactive { + opacity: 0.5; + } + .p2p-orders-details { + display: flex; + flex-direction: column; + gap: 10px; + + .p2p-sell-order-button, + .p2p-buy-order-button { + background-color: var(--trading_selling-related-elements); + padding: 1% 2%; + font-size: 24px; + } + + .p2p-buy-order-button { + background-color: var(--specials_checks-okay-done) !important; + } + + .transaction-user-name { + font-size: 26px; + } + + .transaction-fiat-amount-wrapper { + display: flex; + gap: 2%; + align-items: center; + + .edit-wrapper__container { + color: var(--labels_important-active-labels-text-graphics); + } + } + + .transaction-status { + display: flex; + justify-content: space-between; + gap: 4%; + font-weight: normal; + + .transaction-status-detail { + display: flex; + gap: 4%; + font-weight: bold; + text-transform: capitalize; + } + } + } + } + } + .p2p-order-table { thead { tr { @@ -3672,7 +3848,7 @@ .order-title, .asset-name { .edit-wrapper__container { - font-size: 18px; + font-size: 24px; } } @@ -3751,6 +3927,10 @@ height: 65%; } + .chat-area-wrapper { + height: 60% !important; + } + .message-input-field { .ant-input { font-size: 24px; @@ -3837,11 +4017,34 @@ gap: 10px; padding: 5% 0; + .active-payment-field { + border-color: var(--specials_buttons-links-and-highlights) !important; + } + + .active-focus { + border: 2px solid #5d63ff !important; + + .amount-spent-field, + .amount-receive-field { + background-color: var(--base_background) !important; + border: none; + box-shadow: inset 1px 1px 3px #00000029; + border-radius: 5px; + border-bottom: 1px solid + var(--labels_important-active-labels-text-graphics) !important; + } + } + + .p2p-amount-spent:hover, + .p2p-amount-receive:hover { + border: 2px solid var(--labels_important-active-labels-text-graphics); + } + .p2p-amount-spent, .p2p-amount-receive { - border: 1px solid var(--calculated_secondary-border); + border: 2px solid var(--calculated_secondary-border); border-radius: 10px; - padding: 8% 6%; + padding: 6%; display: flex; flex-direction: column; gap: 10px; @@ -3870,6 +4073,7 @@ margin-top: 3%; display: flex; width: 100%; + gap: 5%; justify-content: space-between; align-items: center; @@ -3894,15 +4098,13 @@ .amount-spent-field, .amount-receive-field { - background-color: var(--base_background) !important; + background-color: transparent; border: none; - box-shadow: inset 1px 1px 3px #00000029; + box-shadow: none; 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; @@ -3925,6 +4127,14 @@ border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); } + .amount-receive-field:focus { + background-color: var(--base_background) !important; + border: none; + box-shadow: inset 1px 1px 3px #00000029; + border-radius: 5px; + border-bottom: 1px solid + var(--labels_important-active-labels-text-graphics) !important; + } } } @@ -3940,6 +4150,10 @@ justify-content: space-between; width: 100%; + .inactive-btn { + background-color: var(--labels_inactive-button) !important; + } + .payment-method-field { .ant-select-selector { background-color: transparent; diff --git a/web/src/containers/P2P/index.js b/web/src/containers/P2P/index.js index 1f3736f07d..a8c60d8077 100644 --- a/web/src/containers/P2P/index.js +++ b/web/src/containers/P2P/index.js @@ -35,6 +35,9 @@ const P2P = ({ const [refresh, setRefresh] = useState(false); const [selectedDealEdit, setSelectedDealEdit] = useState(); const [selectedProfile, setSelectedProfile] = useState(); + const [displayUserFeedback, setDisplayUserFeedback] = useState(false); + const [userFeedback, setUserFeedback] = useState([]); + const [userProfile, setUserProfile] = useState(); useEffect(() => { const arr = window.location.pathname.split('/'); @@ -102,6 +105,14 @@ const P2P = ({ setSelectedTransaction={setSelectedTransaction} selectedTransaction={selectedTransaction} changeProfileTab={changeProfileTab} + displayUserFeedback={displayUserFeedback} + setDisplayUserFeedback={setDisplayUserFeedback} + userProfile={userProfile} + setUserProfile={setUserProfile} + userFeedback={userFeedback} + setUserFeedback={setUserFeedback} + selectedProfile={selectedProfile} + setSelectedProfile={setSelectedProfile} /> )} {!displayOrder && ( @@ -151,7 +162,15 @@ const P2P = ({ setDisplayOrder={setDisplayOrder} setSelectedTransaction={setSelectedTransaction} refresh={refresh} - changeProfileTab={changeProfileTab} + // changeProfileTab={changeProfileTab} + displayUserFeedback={displayUserFeedback} + setDisplayUserFeedback={setDisplayUserFeedback} + userFeedback={userFeedback} + setUserFeedback={setUserFeedback} + selectedProfile={selectedProfile} + setSelectedProfile={setSelectedProfile} + userProfile={userProfile} + setUserProfile={setUserProfile} tab={tab} /> diff --git a/web/src/index.css b/web/src/index.css index 110b92ffe1..f81ddea12f 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -611,7 +611,7 @@ table th { 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%; } + width: 27rem; } .p2p-chat-notification-wrapper .ant-notification-notice-description, .p2p-chat-notification-wrapper .ant-notification-notice-message, .p2p-chat-notification-wrapper .ant-notification-notice-content, @@ -620,7 +620,18 @@ table th { .p2p-chat-notification-wrapper .ant-notification-notice-message, .p2p-chat-notification-wrapper .ant-notification-notice-description { margin-left: 40px; - font-size: 13px; } + font-size: 13px; + max-width: 85%; } + .p2p-chat-notification-wrapper .ant-notification-notice-message .sender-name, + .p2p-chat-notification-wrapper .ant-notification-notice-description .sender-name { + color: var(--specials_my-username-in-chat); } + .p2p-chat-notification-wrapper .ant-notification-notice-message .chat-message, + .p2p-chat-notification-wrapper .ant-notification-notice-description .chat-message { + color: var(--specials_chat-messages); + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .p2p-chat-notification-wrapper .ant-notification-notice-close { top: 10px; right: 12px; } @@ -631,6 +642,8 @@ table th { margin-left: 0px !important; width: 100% !important; max-width: unset !important; } + .ant-notification-bottomLeft .p2p-chat-notification-wrapper { + width: 100% !important; } .layout-mobile .footer-bar-more-options-container { display: flex; @@ -10931,6 +10944,11 @@ table th { 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 .inactive-btn, + .p2p-summary-container .p2p-order-tab-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .inactive-btn, + .p2p-summary-container .p2p-post-deal-container .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .inactive-btn, + .p2p-summary-container .p2p-order-wrapper .p2p-table-container .p2p-stake-table .p2p-expendable-row .payment-details-container .payment-details .trade-button-container .inactive-btn { + background-color: var(--labels_inactive-button) !important; } .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, @@ -11161,6 +11179,8 @@ table 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 .transaction-user-name:hover { + cursor: pointer; } .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, @@ -11841,6 +11861,13 @@ table th { .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 .trade-assets-container .asset-buy, + .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .asset-sell { + padding: 0.5% 2%; + background-color: var(--specials_checks-okay-done); + width: max-content; } + .p2p-summary-container .p2p-order-wrapper .p2p-order-container .p2p-order-details-container .trade-assets-container .asset-sell { + background-color: var(--trading_selling-related-elements) !important; } .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, @@ -11925,6 +11952,8 @@ table th { .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 .disable-link { + cursor: not-allowed !important; } .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; @@ -11932,7 +11961,6 @@ table th { 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; } @@ -12510,6 +12538,30 @@ table th { .feedback-submit-popup-wrapper .ReactModal__Content .submit-transaction-button-container .cancel-btn:active { color: var(--calculated_base_top-bar-navigation_text); } +.confirm-popup-wrapper .feedback-submit-popup-container { + align-items: center; } + +.confirm-popup-wrapper .submit-transaction-button-container .inactive-btn { + background-color: var(--labels_inactive-button) !important; } + +.release-amount-popup-wrapper .ReactModal__Content { + width: 30%; } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .user-receive-amount-detail { + font-size: 14px; + display: flex; + align-items: flex-start; } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .order-complete-title { + font-size: 22px; } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .check-icon svg { + height: 2rem; + width: 2rem; } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .check-icon svg path:nth-child(1) { + fill: transparent; } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .check-icon svg path:nth-child(2) { + fill: var(--specials_checks-okay-done); } + .release-amount-popup-wrapper .ReactModal__Content .release-amount-details-container .check-icon svg path:nth-child(3) { + fill: #FFFFFF; } + .cancel-popup-wrapper .ReactModal__Content, .confirm-popup-wrapper .ReactModal__Content, .confirmation-remove-deal-popup-wrapper .ReactModal__Content { @@ -12518,6 +12570,44 @@ table th { .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 .warning-icon, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25px; } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg { + width: 6rem; + height: 6rem; } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg path, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg path, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .warning-icon svg path { + fill: var(--specials_pending-waiting-caution); } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 5px; } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text { + margin-top: 5%; + display: flex; } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-inner, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-inner, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-inner { + background-color: var(--base_wallet-sidebar-and-popup); } + .cancel-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-checked .ant-checkbox-inner::after, + .confirm-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-checked .ant-checkbox-inner::after, + .confirmation-remove-deal-popup-wrapper .ReactModal__Content .feedback-submit-popup-container .confirm-payment-description .payment-declaration-text .ant-checkbox-checked .ant-checkbox-inner::after { + border-color: var(--labels_important-active-labels-text-graphics); } .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 { @@ -12534,11 +12624,6 @@ table th { .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 { @@ -13152,6 +13237,54 @@ table th { .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-orders-details-card-wrapper { + display: flex; + flex-direction: column; + gap: 15px; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .active-green { + color: var(--specials_checks-okay-done); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .active-orange { + color: var(--specials_pending-waiting-caution); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .active-yellow { + color: var(--specials_my-username-in-chat); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .inactive-text { + color: var(--labels_secondary-inactive-label-text-graphics); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details { + background-color: var(--base_wallet-sidebar-and-popup) !important; + border: none; + font-size: 24px; + border-bottom: 5px solid var(--base_background); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details-inactive { + opacity: 0.5; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details { + display: flex; + flex-direction: column; + gap: 10px; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .p2p-sell-order-button, + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .p2p-buy-order-button { + background-color: var(--trading_selling-related-elements); + padding: 1% 2%; + font-size: 24px; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .p2p-buy-order-button { + background-color: var(--specials_checks-okay-done) !important; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .transaction-user-name { + font-size: 26px; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .transaction-fiat-amount-wrapper { + display: flex; + gap: 2%; + align-items: center; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .transaction-fiat-amount-wrapper .edit-wrapper__container { + color: var(--labels_important-active-labels-text-graphics); } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .transaction-status { + display: flex; + justify-content: space-between; + gap: 4%; + font-weight: normal; } + .layout-mobile .p2p-summary-container .ant-tabs-mobile .p2p-order-tab-container .p2p-order-table-wrapper .p2p-orders-details-card-wrapper .p2p-orders-card-details .p2p-orders-details .transaction-status .transaction-status-detail { + display: flex; + gap: 4%; + font-weight: bold; + text-transform: capitalize; } .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 { @@ -13230,7 +13363,7 @@ table th { .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; } + font-size: 24px; } .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, @@ -13294,6 +13427,8 @@ table th { 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 .chat-area-wrapper { + height: 60% !important; } .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%; } @@ -13339,11 +13474,25 @@ table th { flex-direction: column; gap: 10px; padding: 5% 0; } + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .active-payment-field { + border-color: var(--specials_buttons-links-and-highlights) !important; } + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .active-focus { + border: 2px solid #5d63ff !important; } + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .active-focus .amount-spent-field, + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .active-focus .amount-receive-field { + background-color: var(--base_background) !important; + border: none; + box-shadow: inset 1px 1px 3px #00000029; + border-radius: 5px; + border-bottom: 1px solid var(--labels_important-active-labels-text-graphics) !important; } + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent:hover, + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive:hover { + border: 2px solid var(--labels_important-active-labels-text-graphics); } .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: 2px solid var(--calculated_secondary-border); border-radius: 10px; - padding: 8% 6%; + padding: 6%; display: flex; flex-direction: column; gap: 10px; @@ -13371,6 +13520,7 @@ table th { margin-top: 3%; display: flex; width: 100%; + gap: 5%; 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, @@ -13407,12 +13557,11 @@ table th { .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; + background-color: transparent; border: none; - box-shadow: inset 1px 1px 3px #00000029; + box-shadow: none; border-radius: 5px; - color: var(--labels_important-active-labels-text-graphics) !important; - border-bottom: 1px solid var(--labels_important-active-labels-text-graphics); } + color: var(--labels_important-active-labels-text-graphics) !important; } .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, @@ -13447,12 +13596,23 @@ table th { 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 .p2p-amount-spent .amount-spent-field-container .amount-receive-field:focus, + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-spent .amount-receive-field-container .amount-receive-field:focus, + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-spent-field-container .amount-receive-field:focus, + .trading-popup-wrapper .trading-popup-container .trading-payment-detail .p2p-amount-receive .amount-receive-field-container .amount-receive-field:focus { + background-color: var(--base_background) !important; + border: none; + box-shadow: inset 1px 1px 3px #00000029; + border-radius: 5px; + border-bottom: 1px solid var(--labels_important-active-labels-text-graphics) !important; } .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 .inactive-btn { + background-color: var(--labels_inactive-button) !important; } .trading-popup-wrapper .trading-popup-container .trading-payment-detail .payment-method-field .payment-method-field .ant-select-selector { background-color: transparent; box-shadow: none;