From c2202f90980739a88fbc52d8462465f27e6fd3cf Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Wed, 8 Nov 2023 23:25:39 +0300 Subject: [PATCH 01/22] feat: mobile layout --- .../TransactionsPending.scss | 2 + .../TransactionsPendingRow.scss | 48 ++++- .../TransactionsPendingRow.tsx | 199 ++++++++++-------- 3 files changed, 162 insertions(+), 87 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss index 1ab16ace2b1b..8ce0988bf1a4 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss @@ -1,5 +1,7 @@ .wallets-transactions-pending { position: relative; + width: 100%; + max-width: 80rem; &__group-title { width: 7.4rem; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss index 3266e184e6be..fade7c39b0c6 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss @@ -1,24 +1,53 @@ .wallets-transactions-pending-row { + $root: &; width: 100%; height: 7.8rem; - display: grid; - grid-template-columns: 1.8fr repeat(4, 1fr) repeat(2, 2fr); + display: flex; gap: 1.6rem; - align-items: center; + align-items: flex-start; border-top: 0.1rem solid var(--system-light-3-border, #e5e5e5); - padding-inline: 1.6rem; + padding: 1.6rem; + + @include mobile { + height: unset; + flex-wrap: wrap; + gap: 0.4rem; + } &__column { display: flex; flex-direction: column; + + @include mobile { + flex: 1 1 34%; // basis width for columns on mobile is "more than a third of parent's". This way we get 2 columns + } } - &__details { + &__wallet-info { display: flex; + align-items: center; width: max-content; gap: 0.8rem; } + &__fields-container { + height: 100%; + display: flex; + flex-grow: 1; + gap: 1.6rem; + align-items: flex-start; + + @include mobile { + order: 3; + flex-wrap: wrap; + gap: 0.8rem; + + #{$root}__column { + gap: 0.4rem; + } + } + } + &__transaction { &-address { width: 7rem; @@ -26,6 +55,7 @@ &-amount { width: max-content; + align-self: center; } &-confirmations { @@ -39,8 +69,16 @@ &-status { width: 10.3rem; display: flex; + flex-grow: 1; justify-content: flex-end; align-items: center; + align-self: center; + justify-self: flex-end; + + @include mobile { + align-self: flex-start; + order: 2; + } &-dot { margin-right: 0.4rem; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 1c8731a8e0d1..6f71e38b3cbd 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -5,6 +5,7 @@ import { useActiveWalletAccount, useCancelCryptoTransaction } from '@deriv/api'; import { WalletText } from '../../../../../../components/Base'; import { useModal } from '../../../../../../components/ModalProvider'; import { WalletCurrencyCard } from '../../../../../../components/WalletCurrencyCard'; +import useDevice from '../../../../../../hooks/useDevice'; import IcCrossLight from '../../../../../../public/images/ic-cross-light.svg'; import { THooks } from '../../../../../../types'; import { WalletActionModal } from '../../../../components/WalletActionModal'; @@ -16,6 +17,7 @@ type TProps = { const TransactionsCryptoRow: React.FC = ({ transaction }) => { const { data } = useActiveWalletAccount(); + const { isMobile } = useDevice(); const displayCode = useMemo(() => data?.currency_config?.display_code || 'USD', [data]); const { hide, show } = useModal(); @@ -26,9 +28,30 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { hide(); }, [hide, mutate, transaction.id]); + const onCancelButtonClick = useCallback(() => { + show( + + ); + }, [cancelTransaction, hide, show]); + return (
-
+
@@ -39,68 +62,99 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {
-
- - Transaction hash - - - {transaction.formatted_transaction_hash} - -
-
- - Address - - - {transaction.formatted_address_hash} - -
-
- - Confirmations - - - {transaction.formatted_confirmations} - -
-
+
+ + Transaction hash + + + {transaction.formatted_transaction_hash} + +
+
+ + Address + + + {transaction.formatted_address_hash} + +
+
+ + Confirmations + + + {transaction.formatted_confirmations} + +
+ {isMobile && ( + +
+ + Amount + + + {transaction.is_deposit ? '+' : '-'} + {transaction.formatted_amount} + +
+
+ + Date + + + {moment.unix(transaction.submit_date).format('DD MMM YYYY')} + +
+ )} - > - - Time - - - {moment.unix(transaction.submit_date).format('DD MMM YYYY HH:mm:ss [GMT]')} - -
-
+ + Time + + + {moment + .unix(transaction.submit_date) + .format(isMobile ? 'HH:mm:ss [GMT]' : 'DD MMM YYYY HH:mm:ss [GMT]')} + +
+ {!isMobile && ( +
+ + {transaction.is_deposit ? '+' : '-'} + {transaction.formatted_amount} + +
)} - > - - {transaction.is_deposit ? '+' : '-'} - {transaction.formatted_amount} -
= ({ transaction }) => { {transaction.status_name} - {transaction.is_valid_to_cancel && ( + {!isMobile && transaction.is_valid_to_cancel && ( From 6d1d331ad8717b0b49a870ed3e9a5050b4fceedf Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 03:29:27 +0300 Subject: [PATCH 02/22] refactor: extract logic from jsx to memo value --- .../TransactionsPendingRow.scss | 5 +- .../TransactionsPendingRow.tsx | 165 ++++++++++-------- 2 files changed, 92 insertions(+), 78 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss index fade7c39b0c6..90d73241e776 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss @@ -25,6 +25,7 @@ &__wallet-info { display: flex; + order: -2; align-items: center; width: max-content; gap: 0.8rem; @@ -38,7 +39,7 @@ align-items: flex-start; @include mobile { - order: 3; + order: 0; flex-wrap: wrap; gap: 0.8rem; @@ -77,7 +78,7 @@ @include mobile { align-self: flex-start; - order: 2; + order: -1; } &-dot { diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 6f71e38b3cbd..572a91e737c0 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react'; import classNames from 'classnames'; import moment from 'moment'; import { useActiveWalletAccount, useCancelCryptoTransaction } from '@deriv/api'; -import { WalletText } from '../../../../../../components/Base'; +import { WalletButton, WalletText } from '../../../../../../components/Base'; import { useModal } from '../../../../../../components/ModalProvider'; import { WalletCurrencyCard } from '../../../../../../components/WalletCurrencyCard'; import useDevice from '../../../../../../hooks/useDevice'; @@ -49,6 +49,71 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ); }, [cancelTransaction, hide, show]); + const transactionFields: { + class?: classNames.ArgumentArray[number]; + name: string; + value: number | string; + valueTextProps?: Omit, 'children'>; + }[] = useMemo( + () => [ + { + class: { 'wallets-transactions-pending-row__transaction-hash': !isMobile }, + name: 'Transaction hash', + value: transaction.formatted_transaction_hash, + }, + { + class: { 'wallets-transactions-pending-row__transaction-address': !isMobile }, + name: 'Address', + value: transaction.formatted_address_hash, + }, + { + class: { 'wallets-transactions-pending-row__transaction-confirmations': !isMobile }, + name: 'Confirmations', + value: transaction.formatted_confirmations, + valueTextProps: { + align: isMobile ? 'start' : 'center', + }, + }, + ...(isMobile + ? ([ + { + name: 'Amount', + value: `${transaction.is_deposit ? '+' : '-'}${transaction.formatted_amount}`, + valueTextProps: { + color: transaction.is_deposit ? 'success' : 'red', + }, + }, + { + name: 'Date', + value: moment.unix(transaction.submit_date).format('DD MMM YYYY'), + valueTextProps: { color: 'general' }, + }, + ] as const) + : []), + { + class: { 'wallets-transactions-pending-row__transaction-time': !isMobile }, + name: 'Time', + value: moment + .unix(transaction.submit_date) + .format(isMobile ? 'HH:mm:ss [GMT]' : 'DD MMM YYYY HH:mm:ss [GMT]'), + valueTextProps: { + color: 'general', + size: isMobile ? 'xs' : '2xs', + weight: isMobile ? 'bold' : 'regular', + }, + }, + ], + [ + isMobile, + transaction.formatted_address_hash, + transaction.formatted_amount, + transaction.formatted_confirmations, + transaction.formatted_transaction_hash, + transaction.is_deposit, + transaction.submit_date, + ] + ); + return (
@@ -63,80 +128,19 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {
-
- - Transaction hash - - - {transaction.formatted_transaction_hash} - -
-
- - Address - - - {transaction.formatted_address_hash} - -
-
- - Confirmations - - - {transaction.formatted_confirmations} - -
- {isMobile && ( - -
- - Amount - - - {transaction.is_deposit ? '+' : '-'} - {transaction.formatted_amount} - -
-
- - Date - - - {moment.unix(transaction.submit_date).format('DD MMM YYYY')} - -
- - )} -
- - Time - - - {moment - .unix(transaction.submit_date) - .format(isMobile ? 'HH:mm:ss [GMT]' : 'DD MMM YYYY HH:mm:ss [GMT]')} - -
+ {transactionFields.map(field => ( +
+ + {field.name} + + + {field.value} + +
+ ))} {!isMobile && (
= ({ transaction }) => {
)}
-
+
= ({ transaction }) => { )}
+ {isMobile && transaction.is_valid_to_cancel && ( + + )}
); }; From 8ee9c97b1ba85252332e62c70cedbb71ae2632e9 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 04:00:18 +0300 Subject: [PATCH 03/22] feat: adding `onInteraction` --- .../TransactionsPendingRow.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 572a91e737c0..030b1137879b 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -52,6 +52,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { const transactionFields: { class?: classNames.ArgumentArray[number]; name: string; + onInteraction?: VoidFunction; value: number | string; valueTextProps?: Omit, 'children'>; }[] = useMemo( @@ -59,6 +60,20 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { { class: { 'wallets-transactions-pending-row__transaction-hash': !isMobile }, name: 'Transaction hash', + onInteraction: () => + show( + {}, + text: 'View', + }, + ]} + description='View transaction hash on Blockchain.' + title='Transaction details' + /> + ), value: transaction.formatted_transaction_hash, }, { @@ -105,6 +120,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ], [ isMobile, + show, transaction.formatted_address_hash, transaction.formatted_amount, transaction.formatted_confirmations, @@ -137,7 +153,9 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { {field.name} - {field.value} + + {field.value} +
))} From 423db7a7dbf9366e3102ac1e5af24b1281838403 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 10:48:04 +0300 Subject: [PATCH 04/22] feat: add transaction description --- .../api/src/hooks/useCryptoTransactions.ts | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/api/src/hooks/useCryptoTransactions.ts b/packages/api/src/hooks/useCryptoTransactions.ts index 18e7c5a41441..ec0fe0cb3802 100644 --- a/packages/api/src/hooks/useCryptoTransactions.ts +++ b/packages/api/src/hooks/useCryptoTransactions.ts @@ -58,6 +58,45 @@ const getStatusName = (status_code: TModifiedTransaction['status_code']) => { } }; +const getStatusDescription = ( + transaction_type: TModifiedTransaction['transaction_type'], + status_code: TModifiedTransaction['status_code'] +) => { + switch (status_code) { + // deposit-specific: + case 'CONFIRMED': + return 'Your deposit is successful.'; + case 'PENDING': + return "We've received your request and are waiting for more blockchain confirmations."; + // withdrawal-specific: + case 'CANCELLED': + return "You've cancelled your withdrawal request."; + case 'LOCKED': + return "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel."; + case 'PERFORMING_BLOCKCHAIN_TXN': + return "We're sending your request to the blockchain."; + case 'PROCESSING': + return "We're awaiting confirmation from the blockchain."; + case 'REJECTED': + case 'REVERTED': + return "Your withdrawal is unsuccessful. We've sent you an email with more information."; + case 'REVERTING': + case 'VERIFIED': + return "We're processing your withdrawal."; + case 'SENT': + return 'Your withdrawal is successful.'; + // both: + case 'ERROR': + return `Your ${ + transaction_type === 'deposit' ? 'deposit' : 'withdrawal' + } is unsuccessful due to an error on the blockchain. Please contact ${ + transaction_type === 'deposit' ? 'your crypto wallet service provider' : 'us via live chat' + } for more info.`; + default: + return ''; + } +}; + /** A custom hook that returns the list of pending crypto transactions for the current user. */ const useCryptoTransactions = () => { const { subscribe, data, ...rest } = useSubscription('cashier_payments'); @@ -109,6 +148,8 @@ const useCryptoTransactions = () => { return transactions.map(transaction => ({ ...transaction, + /** Description of a transaction status */ + description: getStatusDescription(transaction.transaction_type, transaction.status_code), /** Formatted amount */ formatted_amount: displayMoney(transaction.amount || 0, display_code, { fractional_digits, From 12824c8a469af65288cc3f68e77351763fd4e0af Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 10:59:39 +0300 Subject: [PATCH 05/22] feat: more `WalletActionModal` --- .../TransactionsPendingRow.tsx | 87 ++++++++++++++----- 1 file changed, 63 insertions(+), 24 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 030b1137879b..ed4e28c68735 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -19,21 +19,21 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { const { data } = useActiveWalletAccount(); const { isMobile } = useDevice(); const displayCode = useMemo(() => data?.currency_config?.display_code || 'USD', [data]); - const { hide, show } = useModal(); + const modal = useModal(); const { mutate } = useCancelCryptoTransaction(); const cancelTransaction = useCallback(() => { mutate({ payload: { id: transaction.id } }); - hide(); - }, [hide, mutate, transaction.id]); + modal.hide(); + }, [modal, mutate, transaction.id]); const onCancelButtonClick = useCallback(() => { - show( + modal.show( = ({ transaction }) => { title='Cancel transaction' /> ); - }, [cancelTransaction, hide, show]); + }, [cancelTransaction, modal]); const transactionFields: { class?: classNames.ArgumentArray[number]; @@ -61,24 +61,42 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { class: { 'wallets-transactions-pending-row__transaction-hash': !isMobile }, name: 'Transaction hash', onInteraction: () => - show( - {}, - text: 'View', - }, - ]} - description='View transaction hash on Blockchain.' - title='Transaction details' - /> - ), + transaction.transaction_url + ? modal.show( + window.open(transaction.transaction_url), + text: 'View', + }, + ]} + description='View transaction hash on Blockchain.' + title='Transaction details' + /> + ) + : null, value: transaction.formatted_transaction_hash, }, { class: { 'wallets-transactions-pending-row__transaction-address': !isMobile }, name: 'Address', + onInteraction: () => + transaction.address_url + ? modal.show( + window.open(transaction.address_url), + text: 'View', + }, + ]} + description='View address on Blockchain.' + title='Transaction details' + /> + ) + : null, value: transaction.formatted_address_hash, }, { @@ -120,13 +138,15 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ], [ isMobile, - show, + modal, + transaction.address_url, transaction.formatted_address_hash, transaction.formatted_amount, transaction.formatted_confirmations, transaction.formatted_transaction_hash, transaction.is_deposit, transaction.submit_date, + transaction.transaction_url, ] ); @@ -153,9 +173,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { {field.name} - - {field.value} - + {field.value}
))} @@ -178,7 +196,28 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {
)}
-
+
+ modal.show( + + ) + : undefined + } + >
Date: Thu, 9 Nov 2023 11:08:41 +0300 Subject: [PATCH 06/22] style: a little fix --- .../src/features/cashier/modules/Transactions/Transactions.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss index 831eed632e31..6634f41be697 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss @@ -26,7 +26,7 @@ display: flex; gap: 1.6rem; justify-content: flex-end; - z-index: 9999; + z-index: 10; background-color: var(--system-light-8-primary-background, #fff); @include mobile { From 330aab723dd52b1de129eb22b44863f71d9a7139 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 14:16:51 +0300 Subject: [PATCH 07/22] style: use https://github.com/binary-com/deriv-app/pull/11215/ --- .../Base/ModalWrapper/ModalWrapper.scss | 4 ++++ .../ModalProvider/ModalProvider.tsx | 24 +++++++++++-------- .../WalletActionModal/WalletActionModal.tsx | 1 + .../TransactionsPendingRow.tsx | 12 ++++++---- 4 files changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss b/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss index 4dff43a5c843..ff4a704f1978 100644 --- a/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss +++ b/packages/wallets/src/components/Base/ModalWrapper/ModalWrapper.scss @@ -1,6 +1,10 @@ .wallets-modal-wrapper { position: relative; + @include mobile { + width: calc(100vw - 3.2rem); + } + &__close-icon { position: absolute; top: 2rem; diff --git a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx index a638c7b731a4..281299ad6acd 100644 --- a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx +++ b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx @@ -1,8 +1,8 @@ -import React, { RefObject, createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { useOnClickOutside } from 'usehooks-ts'; import useDevice from '../../hooks/useDevice'; -import { TPlatforms, TMarketTypes } from '../../types'; +import { TMarketTypes, TPlatforms } from '../../types'; type TModalState = { marketType?: TMarketTypes.All; @@ -15,10 +15,11 @@ type TModalContext = { isOpen: boolean; modalState?: Map; setModalState: (key: T, value: TModalState[T]) => void; - show: (ModalContent: React.ReactNode) => void; + show: (ModalContent: React.ReactNode, options?: TModalOptions) => void; }; -type TModalShowOptions = { +type TModalOptions = { + defaultRootId?: 'wallets_modal_responsive_root' | 'wallets_modal_root'; rootRef?: React.RefObject; }; @@ -35,10 +36,10 @@ export const useModal = () => { const ModalProvider = ({ children }: React.PropsWithChildren) => { const modalRef = useRef(null); const [content, setContent] = useState(); + const [modalOptions, setModalOptions] = useState({}); const [modalState, setModalState] = useState>(new Map()); const { isDesktop } = useDevice(); - const [customRootRef, setCustomRootRef] = useState | null>(null); const rootRef = useRef(document.getElementById('wallets_modal_root')); const rootResponsiveRef = useRef(document.getElementById('wallets_modal_responsive_root')); @@ -50,9 +51,12 @@ const ModalProvider = ({ children }: React.PropsWithChildren) => { setModalState(new Map(modalState.set(key, value))); }; - const show = (ModalContent: React.ReactNode, options?: TModalShowOptions) => { + const show = (ModalContent: React.ReactNode, options?: TModalOptions) => { setContent(ModalContent); - setCustomRootRef(options?.rootRef?.current ? options?.rootRef : null); + setModalOptions({ + ...modalOptions, + ...options, + }); }; useEffect(() => { @@ -68,10 +72,10 @@ const ModalProvider = ({ children }: React.PropsWithChildren) => { useOnClickOutside(modalRef, isDesktop ? hide : () => undefined); const modalRootRef = useMemo(() => { - if (customRootRef?.current) return customRootRef; - if (isDesktop) return rootRef; + if (modalOptions?.rootRef?.current) return modalOptions?.rootRef; + if (isDesktop || modalOptions?.defaultRootId === 'wallets_modal_root') return rootRef; return rootResponsiveRef; - }, [isDesktop, customRootRef]); + }, [isDesktop, modalOptions]); return ( = ({ title, }) => { const { isMobile } = useDevice(); + return (
diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index ed4e28c68735..b0d759106f7a 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -45,7 +45,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { description='Are you sure you want to cancel this transaction?' hideCloseButton={true} title='Cancel transaction' - /> + />, + { defaultRootId: 'wallets_modal_root' } ); }, [cancelTransaction, modal]); @@ -73,7 +74,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ]} description='View transaction hash on Blockchain.' title='Transaction details' - /> + />, + { defaultRootId: 'wallets_modal_root' } ) : null, value: transaction.formatted_transaction_hash, @@ -94,7 +96,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ]} description='View address on Blockchain.' title='Transaction details' - /> + />, + { defaultRootId: 'wallets_modal_root' } ) : null, value: transaction.formatted_address_hash, @@ -213,7 +216,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { description={transaction.description} hideCloseButton title='Transaction details' - /> + />, + { defaultRootId: 'wallets_modal_root' } ) : undefined } From d6c39eea1cc738c8e9383f3e63f84feed2644208 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 14:22:20 +0300 Subject: [PATCH 08/22] Merge remote-tracking branch 'upstream/master' into rostislav/wall-2473/pending-transaction-list-mobile From a10ed5349278a463ac292a86b88d6a640d405efc Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 16:16:19 +0300 Subject: [PATCH 09/22] refactor: `Tooltip` --- .../src/components/Base/Tooltip/Tooltip.scss | 4 +- .../TransactionsPendingRow.tsx | 57 ++++++++++++++----- 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/packages/wallets/src/components/Base/Tooltip/Tooltip.scss b/packages/wallets/src/components/Base/Tooltip/Tooltip.scss index b5d1684150c3..155bb0f1072d 100644 --- a/packages/wallets/src/components/Base/Tooltip/Tooltip.scss +++ b/packages/wallets/src/components/Base/Tooltip/Tooltip.scss @@ -7,6 +7,7 @@ display: flex; align-items: center; position: absolute; + z-index: 1; &--right { top: 50%; @@ -60,7 +61,8 @@ } &__message { - max-height: 3.4rem; + width: max-content; + max-width: 28rem; padding: 0.8rem; border-radius: 4px; font-size: 1.2rem; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index b0d759106f7a..7c09d0dda366 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -1,8 +1,9 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo, useRef } from 'react'; import classNames from 'classnames'; import moment from 'moment'; +import { useHover } from 'usehooks-ts'; import { useActiveWalletAccount, useCancelCryptoTransaction } from '@deriv/api'; -import { WalletButton, WalletText } from '../../../../../../components/Base'; +import { Tooltip, WalletButton, WalletText } from '../../../../../../components/Base'; import { useModal } from '../../../../../../components/ModalProvider'; import { WalletCurrencyCard } from '../../../../../../components/WalletCurrencyCard'; import useDevice from '../../../../../../hooks/useDevice'; @@ -21,6 +22,13 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { const displayCode = useMemo(() => data?.currency_config?.display_code || 'USD', [data]); const modal = useModal(); + const transactionHashRef = useRef(null); + const isTransactionHashHovered = useHover(transactionHashRef); + const addressHashRef = useRef(null); + const isAddressHashHovered = useHover(addressHashRef); + const statusRef = useRef(null); + const isStatusHovered = useHover(statusRef); + const { mutate } = useCancelCryptoTransaction(); const cancelTransaction = useCallback(() => { @@ -52,14 +60,18 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { const transactionFields: { class?: classNames.ArgumentArray[number]; + hoverMessage?: string; name: string; onInteraction?: VoidFunction; + ref?: ReturnType; + shouldShouldHoverMessage?: boolean; value: number | string; valueTextProps?: Omit, 'children'>; }[] = useMemo( () => [ { class: { 'wallets-transactions-pending-row__transaction-hash': !isMobile }, + hoverMessage: 'View transaction hash on Blockchain', name: 'Transaction hash', onInteraction: () => transaction.transaction_url @@ -78,10 +90,13 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { { defaultRootId: 'wallets_modal_root' } ) : null, + ref: transactionHashRef, + shouldShouldHoverMessage: isTransactionHashHovered, value: transaction.formatted_transaction_hash, }, { class: { 'wallets-transactions-pending-row__transaction-address': !isMobile }, + hoverMessage: 'View address on Blockchain', name: 'Address', onInteraction: () => transaction.address_url @@ -100,6 +115,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { { defaultRootId: 'wallets_modal_root' } ) : null, + ref: addressHashRef, + shouldShouldHoverMessage: isAddressHashHovered, value: transaction.formatted_address_hash, }, { @@ -140,7 +157,9 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { }, ], [ + isAddressHashHovered, isMobile, + isTransactionHashHovered, modal, transaction.address_url, transaction.formatted_address_hash, @@ -175,9 +194,17 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { {field.name} - - {field.value} - + + + + {field.value} + + +
))} {!isMobile && ( @@ -221,15 +248,18 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ) : undefined } + ref={statusRef} > -
+ +
+ {transaction.status_name} @@ -242,6 +272,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { )}
+ {isMobile && transaction.is_valid_to_cancel && ( Date: Thu, 9 Nov 2023 18:44:11 +0300 Subject: [PATCH 10/22] style: sort everything out --- .../TransactionsPendingRow.scss | 4 - .../TransactionsPendingRow.tsx | 209 ++++++------------ .../TransactionsPendingRowField.scss | 13 ++ .../TransactionsPendingRowField.tsx | 84 +++++++ .../TransactionsPendingRowField/index.ts | 1 + 5 files changed, 162 insertions(+), 149 deletions(-) create mode 100644 packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.scss create mode 100644 packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx create mode 100644 packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/index.ts diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss index 90d73241e776..3dfe45ee1d3f 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss @@ -17,10 +17,6 @@ &__column { display: flex; flex-direction: column; - - @include mobile { - flex: 1 1 34%; // basis width for columns on mobile is "more than a third of parent's". This way we get 2 columns - } } &__wallet-info { diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 7c09d0dda366..e3a7d25f958d 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -10,6 +10,7 @@ import useDevice from '../../../../../../hooks/useDevice'; import IcCrossLight from '../../../../../../public/images/ic-cross-light.svg'; import { THooks } from '../../../../../../types'; import { WalletActionModal } from '../../../../components/WalletActionModal'; +import { TransactionsPendingRowField } from './components/TransactionsPendingRowField'; import './TransactionsPendingRow.scss'; type TProps = { @@ -22,10 +23,6 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { const displayCode = useMemo(() => data?.currency_config?.display_code || 'USD', [data]); const modal = useModal(); - const transactionHashRef = useRef(null); - const isTransactionHashHovered = useHover(transactionHashRef); - const addressHashRef = useRef(null); - const isAddressHashHovered = useHover(addressHashRef); const statusRef = useRef(null); const isStatusHovered = useHover(statusRef); @@ -58,120 +55,6 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ); }, [cancelTransaction, modal]); - const transactionFields: { - class?: classNames.ArgumentArray[number]; - hoverMessage?: string; - name: string; - onInteraction?: VoidFunction; - ref?: ReturnType; - shouldShouldHoverMessage?: boolean; - value: number | string; - valueTextProps?: Omit, 'children'>; - }[] = useMemo( - () => [ - { - class: { 'wallets-transactions-pending-row__transaction-hash': !isMobile }, - hoverMessage: 'View transaction hash on Blockchain', - name: 'Transaction hash', - onInteraction: () => - transaction.transaction_url - ? modal.show( - window.open(transaction.transaction_url), - text: 'View', - }, - ]} - description='View transaction hash on Blockchain.' - title='Transaction details' - />, - { defaultRootId: 'wallets_modal_root' } - ) - : null, - ref: transactionHashRef, - shouldShouldHoverMessage: isTransactionHashHovered, - value: transaction.formatted_transaction_hash, - }, - { - class: { 'wallets-transactions-pending-row__transaction-address': !isMobile }, - hoverMessage: 'View address on Blockchain', - name: 'Address', - onInteraction: () => - transaction.address_url - ? modal.show( - window.open(transaction.address_url), - text: 'View', - }, - ]} - description='View address on Blockchain.' - title='Transaction details' - />, - { defaultRootId: 'wallets_modal_root' } - ) - : null, - ref: addressHashRef, - shouldShouldHoverMessage: isAddressHashHovered, - value: transaction.formatted_address_hash, - }, - { - class: { 'wallets-transactions-pending-row__transaction-confirmations': !isMobile }, - name: 'Confirmations', - value: transaction.formatted_confirmations, - valueTextProps: { - align: isMobile ? 'start' : 'center', - }, - }, - ...(isMobile - ? ([ - { - name: 'Amount', - value: `${transaction.is_deposit ? '+' : '-'}${transaction.formatted_amount}`, - valueTextProps: { - color: transaction.is_deposit ? 'success' : 'red', - }, - }, - { - name: 'Date', - value: moment.unix(transaction.submit_date).format('DD MMM YYYY'), - valueTextProps: { color: 'general' }, - }, - ] as const) - : []), - { - class: { 'wallets-transactions-pending-row__transaction-time': !isMobile }, - name: 'Time', - value: moment - .unix(transaction.submit_date) - .format(isMobile ? 'HH:mm:ss [GMT]' : 'DD MMM YYYY HH:mm:ss [GMT]'), - valueTextProps: { - color: 'general', - size: isMobile ? 'xs' : '2xs', - weight: isMobile ? 'bold' : 'regular', - }, - }, - ], - [ - isAddressHashHovered, - isMobile, - isTransactionHashHovered, - modal, - transaction.address_url, - transaction.formatted_address_hash, - transaction.formatted_amount, - transaction.formatted_confirmations, - transaction.formatted_transaction_hash, - transaction.is_deposit, - transaction.submit_date, - transaction.transaction_url, - ] - ); - return (
@@ -186,34 +69,70 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {
- {transactionFields.map(field => ( -
- - {field.name} - - - - - {field.value} - - - -
- ))} + + + + {isMobile && ( + + + + + )} + {!isMobile && ( -
+
['alignment']; + }; + name: string; + value: string; + valueTextProps?: Omit, 'children'>; +}; + +const TransactionsPendingRowField: React.FC = ({ className, hint, name, value, valueTextProps }) => { + const { isMobile } = useDevice(); + const { show } = useModal(); + const fieldRef = useRef(null); + const isFieldHovered = useHover(fieldRef); + + const onValueClick = useCallback(() => { + if (hint) + isMobile + ? show( + window.open(hint.link), + text: 'View', + }, + ]} + description={hint.text} + title='Transaction details' + />, + { defaultRootId: 'wallets_modal_root' } + ) + : window.open(hint?.link); + }, [hint, isMobile, show]); + + return ( +
+ + {name} + + {hint ? ( + + + {isMobile ? ( + + {value} + + ) : ( + + {value} + + )} + + + ) : ( + {value} + )} +
+ ); +}; + +export default TransactionsPendingRowField; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/index.ts b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/index.ts new file mode 100644 index 000000000000..e552e8e835b6 --- /dev/null +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/index.ts @@ -0,0 +1 @@ +export { default as TransactionsPendingRowField } from './TransactionsPendingRowField'; From 6b70e5e4b0c1f7a19a935fd54bccf7b677825971 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 18:58:28 +0300 Subject: [PATCH 11/22] refactor: sonarcloud role=button --- .../TransactionsPendingRow/TransactionsPendingRow.tsx | 1 + .../TransactionsPendingRowField/TransactionsPendingRowField.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index e3a7d25f958d..9a14494bd86d 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -168,6 +168,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { : undefined } ref={statusRef} + role={isMobile ? 'button' : 'generic'} >
= ({ className, hint, name, > {isMobile ? ( - + {value} ) : ( From 0330da2f73e21b2c343bb292f455ffb635352b35 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Thu, 9 Nov 2023 19:23:31 +0300 Subject: [PATCH 12/22] fix: sonarcloud --- packages/api/src/hooks/useCryptoTransactions.ts | 2 +- .../wallets/src/components/Base/Tooltip/Tooltip.scss | 1 + .../TransactionsPendingRow.scss | 6 ++++++ .../TransactionsPendingRow/TransactionsPendingRow.tsx | 5 ++--- .../TransactionsPendingRowField.scss | 11 +++++++++++ .../TransactionsPendingRowField.tsx | 8 ++++++-- 6 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/api/src/hooks/useCryptoTransactions.ts b/packages/api/src/hooks/useCryptoTransactions.ts index ec0fe0cb3802..ed107983a776 100644 --- a/packages/api/src/hooks/useCryptoTransactions.ts +++ b/packages/api/src/hooks/useCryptoTransactions.ts @@ -72,7 +72,7 @@ const getStatusDescription = ( case 'CANCELLED': return "You've cancelled your withdrawal request."; case 'LOCKED': - return "We're reviewing your withdrawal request. You may still cancel this transaction if you wish. Once we start processing, you won't be able to cancel."; + return "We're reviewing your withdrawal request. You may still cancel this transaction if you wish.\nOnce we start processing, you won't be able to cancel."; case 'PERFORMING_BLOCKCHAIN_TXN': return "We're sending your request to the blockchain."; case 'PROCESSING': diff --git a/packages/wallets/src/components/Base/Tooltip/Tooltip.scss b/packages/wallets/src/components/Base/Tooltip/Tooltip.scss index 155bb0f1072d..88ee88ffe3e1 100644 --- a/packages/wallets/src/components/Base/Tooltip/Tooltip.scss +++ b/packages/wallets/src/components/Base/Tooltip/Tooltip.scss @@ -66,6 +66,7 @@ padding: 0.8rem; border-radius: 4px; font-size: 1.2rem; + white-space: pre-wrap; background: var(--system-light-5-active-background, #d6dadb); } diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss index 3dfe45ee1d3f..8500002edc96 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss @@ -72,6 +72,12 @@ align-self: center; justify-self: flex-end; + // unset default button style + border: unset; + padding: unset; + background-color: unset; + text-align: unset; + @include mobile { align-self: flex-start; order: -1; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 9a14494bd86d..bc9c44a5c56d 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -145,7 +145,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {
)}
-
= ({ transaction }) => { : undefined } ref={statusRef} - role={isMobile ? 'button' : 'generic'} >
= ({ transaction }) => { )} -
+ {isMobile && transaction.is_valid_to_cancel && ( = ({ className, hint, name, > {isMobile ? ( - + ) : ( Date: Thu, 9 Nov 2023 19:51:54 +0300 Subject: [PATCH 13/22] refactor: remove unnecessary fallback --- .../TransactionsPendingRowField.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx index 2a9fb9b5a8d1..c220a5bea379 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx @@ -51,11 +51,7 @@ const TransactionsPendingRowField: React.FC = ({ className, hint, name, {name} {hint ? ( - + {isMobile ? (
); From 383d70ff08d61ee6fc78f443ced1074efaaaf611 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Mon, 13 Nov 2023 15:46:28 +0300 Subject: [PATCH 17/22] refactor: some css reverted --- .../cashier/modules/Transactions/Transactions.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss index cade6bd8cde1..5721521ab5d9 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss @@ -1,7 +1,6 @@ .wallets-transactions { $root: &; - position: relative; - width: 100%; + width: 100vw; height: 100%; display: flex; flex-direction: column; @@ -17,14 +16,19 @@ &--crypto-mobile { @include mobile { padding-top: 11.2rem; // accounting for the list header when it's a crypto wallet on mobile + + #{$root}__header { + margin-top: -11.2rem; // make absolutely positioned header ignore parent's padding + } } } &__header { position: absolute; - top: 0; // make absolutely positioned header ignore parent's padding + margin-top: -7.2rem; // make absolutely positioned header ignore parent's padding width: 100%; max-width: 80rem; + padding: 2.4rem 0 0.8rem; display: flex; gap: 1.6rem; justify-content: flex-end; @@ -32,6 +36,7 @@ background-color: var(--system-light-8-primary-background, #fff); @include mobile { + padding: 1.6rem; flex-direction: column; } } From aace92de84f9b0f44a8b0c60baa53bc7221b3a6a Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Tue, 14 Nov 2023 14:52:56 +0300 Subject: [PATCH 18/22] refactor: better css --- .../modules/Transactions/Transactions.scss | 31 ++++++------------- .../TransactionsCompleted.scss | 13 +++----- .../TransactionsCompleted.tsx | 10 ++++-- .../TransactionsCompletedRow.scss | 4 +++ .../TransactionsPending.scss | 14 +++------ .../TransactionsPending.tsx | 9 ++++-- .../TransactionsPendingRow.scss | 1 + 7 files changed, 37 insertions(+), 45 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss index 5721521ab5d9..2cf36149c393 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss @@ -1,42 +1,31 @@ .wallets-transactions { - $root: &; - width: 100vw; - height: 100%; + width: 100%; + height: fit-content; display: flex; flex-direction: column; align-items: center; - padding-top: 7.2rem; // accounting for the list header - // accounting for CashierContent padding - margin: -4.8rem -1.6rem 0; + // ignore CashierContent top padding + margin-top: -4.8rem; @include mobile { - margin: -2.4rem -1.6rem 0; - } - - &--crypto-mobile { - @include mobile { - padding-top: 11.2rem; // accounting for the list header when it's a crypto wallet on mobile - - #{$root}__header { - margin-top: -11.2rem; // make absolutely positioned header ignore parent's padding - } - } + margin-top: -2.4rem; } &__header { - position: absolute; - margin-top: -7.2rem; // make absolutely positioned header ignore parent's padding + position: sticky; + top: -4.8rem; // ignore CashierContent padding width: 100%; max-width: 80rem; padding: 2.4rem 0 0.8rem; display: flex; gap: 1.6rem; justify-content: flex-end; - z-index: 10; + z-index: 1; background-color: var(--system-light-8-primary-background, #fff); @include mobile { - padding: 1.6rem; + top: -2.4rem; + padding: 1.6rem 0; flex-direction: column; } } diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.scss index 0b5a7378d04c..26a2e6985778 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.scss @@ -3,15 +3,10 @@ &__group-title { margin-bottom: 0.8rem; - width: 7.4rem; - height: 1.4rem; - color: var(--system-light-3-less-prominent-text, #999); - text-align: right; + margin-left: 1.6rem; - /* desktop/extra small/XS - regular */ - font-size: 1rem; - font-style: normal; - font-weight: 400; - line-height: 1.4rem; /* 140% */ + @include mobile { + margin-left: 0; + } } } diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx index a3cd01919067..f7684c2dcfd2 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompleted/TransactionsCompleted.tsx @@ -3,6 +3,7 @@ import moment from 'moment'; import { useTransactions } from '@deriv/api'; import { TSocketRequestPayload } from '@deriv/api/types'; import { Loader } from '../../../../../../components'; +import { WalletText } from '../../../../../../components/Base'; import { TransactionsCompletedRow } from '../TransactionsCompletedRow'; import { TransactionsNoDataState } from '../TransactionsNoDataState'; import { TransactionsTable } from '../TransactionsTable'; @@ -51,9 +52,12 @@ const TransactionsCompleted: React.FC = ({ filter }) => { fetchMore={fetchMoreOnBottomReached} groupBy={['date']} rowGroupRender={transaction => ( -

- {transaction.transaction_time && moment.unix(transaction.transaction_time).format('DD MMM YYYY')} -

+
+ + {transaction.transaction_time && + moment.unix(transaction.transaction_time).format('DD MMM YYYY')} + +
)} rowRender={transaction => } /> diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.scss index 37ea36c2033e..3d01137fabd7 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsCompletedRow/TransactionsCompletedRow.scss @@ -5,6 +5,10 @@ align-items: center; border-top: 0.1rem solid var(--system-light-3-border, #e5e5e5); + @include mobile { + padding: 1.6rem 0; + } + &__type-and-wallet-name { display: flex; flex-direction: column; diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss index 8ce0988bf1a4..926232682470 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.scss @@ -4,15 +4,11 @@ max-width: 80rem; &__group-title { - width: 7.4rem; - height: 1.4rem; - color: var(--system-light-3-less-prominent-text, #999); - text-align: right; + margin-bottom: 0.8rem; + margin-left: 1.6rem; - /* desktop/extra small/XS - regular */ - font-size: 1rem; - font-style: normal; - font-weight: 400; - line-height: 1.4rem; /* 140% */ + @include mobile { + margin-left: 0; + } } } diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx index a55f9b3b71d3..b180c2a269d8 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPending/TransactionsPending.tsx @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import moment from 'moment'; import { useCryptoTransactions } from '@deriv/api'; import { Loader } from '../../../../../../components'; +import { WalletText } from '../../../../../../components/Base'; import { TransactionsNoDataState } from '../TransactionsNoDataState'; import { TransactionsPendingRow } from '../TransactionsPendingRow'; import { TransactionsTable } from '../TransactionsTable'; @@ -40,9 +41,11 @@ const TransactionsPending: React.FC = ({ filter = 'all' }) => { data={transactions} groupBy={['date']} rowGroupRender={transaction => ( -

- {moment.unix(transaction.submit_date).format('DD MMM YYYY')} -

+
+ + {transaction.submit_date && moment.unix(transaction.submit_date).format('DD MMM YYYY')} + +
)} rowRender={transaction => } /> diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss index 8500002edc96..57e4aeb05b86 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.scss @@ -12,6 +12,7 @@ height: unset; flex-wrap: wrap; gap: 0.4rem; + padding: 1.6rem 0; } &__column { From 4f1203f7574d9f05b68daa749632860b5042bbb8 Mon Sep 17 00:00:00 2001 From: Rostik Kayko Date: Tue, 14 Nov 2023 15:10:11 +0300 Subject: [PATCH 19/22] refactor: `ToggleSwitch` --- .../modules/Transactions/Transactions.scss | 33 ------------------- .../modules/Transactions/Transactions.tsx | 13 ++------ 2 files changed, 2 insertions(+), 44 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss index 2cf36149c393..ede739ffb995 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.scss @@ -43,38 +43,5 @@ @include mobile { align-self: flex-end; } - - &-switch { - height: 0; - width: 0; - visibility: hidden; - - &__label { - height: 2.4rem; - width: 4.4rem; - display: flex; - align-items: center; - padding-left: 0.3rem; - background: var(--general-disabled); - border-radius: 4.9rem; - transition: background-color 0.25s; - cursor: pointer; - } - - &__button { - width: 1.8rem; - height: 1.8rem; - border-radius: 1.8rem; - transition: transform 0.25s; - background: var(--text-colored-background); - } - - &:checked + &__label { - background: #4bb4b3; - } - &:checked + &__label &__button { - transform: translateX(2rem); - } - } } } diff --git a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx index ce066e4df59b..710df9e4d3e7 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/Transactions.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; import { useActiveWalletAccount } from '@deriv/api'; -import { WalletDropdown, WalletText } from '../../../../components'; +import { ToggleSwitch, WalletDropdown, WalletText } from '../../../../components'; import useDevice from '../../../../hooks/useDevice'; import FilterIcon from '../../../../public/images/filter.svg'; import { TransactionsCompleted, TransactionsPending } from './components'; @@ -71,16 +71,7 @@ const Transactions = () => { {wallet?.currency_config?.is_crypto && (
Pending Transactions - setIsPendingActive(!isPendingActive)} - type='checkbox' - /> - + setIsPendingActive(!isPendingActive)} value={isPendingActive} />
)} Date: Tue, 14 Nov 2023 16:03:50 +0300 Subject: [PATCH 20/22] refactor: `onMobileStatusClick` --- .../TransactionsPendingRow.tsx | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index 0f6f27f244e0..657885debada 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -55,6 +55,26 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { ); }, [cancelTransaction, modal]); + const onMobileStatusClick = useCallback( + () => + modal.show( + , + { defaultRootId: 'wallets_modal_root' } + ), + [modal, transaction.description] + ); + return (
@@ -147,26 +167,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => {