setIsModalVisible(true)}
+ />
)}
keyMapper={(row: TCryptoTransactionDetails) => row.id}
row_gap={isMobile() ? 8 : 0}
@@ -95,6 +99,19 @@ const CryptoTransactionsHistory = observer(() => {
)}
+ setIsModalVisible(old => !old)}
+ width='44rem'
+ height='14rem'
+ className='crypto-transactions-history__modal'
+ >
+
+ {localize('The details of this transaction is available on CoinsPaid.')}
+
+
);
});
diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
index 2891b398837d..00770b9e8a8c 100644
--- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
+++ b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
@@ -10,9 +10,10 @@ import { useCashierStore } from '../../stores/useCashierStores';
type TCryptoTransactionsRendererProps = {
row: TCryptoTransactionDetails;
+ onTooltipClick: VoidFunction;
};
-const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransactionsRendererProps) => {
+const CryptoTransactionsRenderer = observer(({ row: crypto, onTooltipClick }: TCryptoTransactionsRendererProps) => {
const { client } = useStore();
const { transaction_history } = useCashierStore();
const { cancelCryptoTransaction, showCryptoTransactionsCancelModal, showCryptoTransactionsStatusModal } =
@@ -61,6 +62,8 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction
showCryptoTransactionsStatusModal(description, name);
};
+ const is_third_party_transaction = transaction_url?.includes('CP:');
+
if (isMobile()) {
return (
@@ -130,6 +133,15 @@ const CryptoTransactionsRenderer = observer(({ row: crypto }: TCryptoTransaction
{localize('Transaction hash')}
+ {is_third_party_transaction && (
+
+ )}
{transaction_url ? (
-
-
+
-
- {status.transaction_hash}
-
-
-
+
+
+ {status.transaction_hash}
+
+
+
+ {is_third_party_transaction && (
+
+
+
+ )}
+
) : (
{status.transaction_hash}
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
index c2ac74412861..e32e9fa80906 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/__tests__/crypto-deposit.spec.tsx
@@ -6,6 +6,7 @@ import { getCurrencyName, isMobile } from '@deriv/shared';
import CryptoDeposit from '../crypto-deposit';
import { TRootStore } from 'Types';
import CashierProviders from '../../../../cashier-providers';
+import { mockStore } from '@deriv/stores';
jest.mock('@deriv/components', () => ({
...jest.requireActual('@deriv/components'),
@@ -27,6 +28,24 @@ jest.mock('Components/recent-transaction', () => {
return RecentTransactions;
});
+jest.mock('@deriv/api', () => {
+ return {
+ ...jest.requireActual('@deriv/api'),
+ useFetch: jest.fn(() => ({
+ data: {
+ currencies_config: {
+ tUSDT: {
+ minimum_deposit: 2,
+ minimum_withdrawal: 4.54,
+ },
+ },
+ },
+ isLoading: false,
+ isSuccess: true,
+ })),
+ };
+});
+
describe('', () => {
let history: ReturnType;
const renderWithRouter = (component: JSX.Element, mockRootStore: TRootStore) => {
@@ -437,4 +456,45 @@ describe('', () => {
expect(screen.getByText('RecentTransactions')).toBeInTheDocument();
});
+
+ it('should show AlertBanner for minimum deposit when third-party payment processor is used (CoinsPaid)', () => {
+ const minimum_deposit = 2;
+ const currency = 'tUSDT';
+ const mock = mockStore({
+ client: {
+ currency: 'tUSDT',
+ },
+ modules: {
+ cashier: {
+ onramp: {
+ is_deposit_address_loading: false,
+ api_error: '',
+ deposit_address: 'tb1ql7w62elx9ucw4pj5lgw4l028hmuw80sndtntxt',
+ pollApiForDepositAddress: jest.fn(),
+ },
+ transaction_history: {
+ crypto_transactions: [{}],
+ onMount: jest.fn(),
+ },
+ general_store: {
+ setIsDeposit: jest.fn(),
+ },
+ },
+ },
+ });
+
+ const wrapper = ({ children }: { children: JSX.Element }) => {
+ return (
+
+ {children};
+
+ );
+ };
+ render(, { wrapper });
+ expect(
+ screen.getByText(
+ `A minimum deposit value of ${minimum_deposit} ${currency} is required. Otherwise, the funds will be lost and cannot be recovered.`
+ )
+ ).toBeInTheDocument();
+ });
});
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
index f4b558219df0..1856aab2b9e6 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.scss
@@ -25,24 +25,24 @@
flex-direction: column;
align-items: center;
- &__text {
- display: flex;
- justify-content: space-between;
- width: auto;
- padding: 0.8rem;
- margin: 2.4rem 0;
- border-radius: $BORDER_RADIUS;
- background-color: $alpha-color-yellow-1;
-
- svg {
- margin-right: 0.3rem;
- }
- }
.dc-btn {
max-width: 6rem;
padding: 0.3rem 0.8rem;
}
}
+
+ .crypto-third-party-alert {
+ background-color: $color-yellow;
+
+ .dc-text {
+ background-color: $color-yellow;
+ color: $color-black-1;
+ }
+
+ .dc-icon {
+ --fill-color1: $color-black-1;
+ }
+ }
}
&__transaction-currency {
margin: 2.4rem 0 0.8rem;
diff --git a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
index daf1fa20be0e..2709c417697e 100644
--- a/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
+++ b/packages/cashier/src/pages/deposit/crypto-deposit/crypto-deposit.tsx
@@ -3,9 +3,11 @@ import { Button, ButtonLink, Clipboard, Dropdown, Icon, Loading, Text } from '@d
import { localize, Localize } from '@deriv/translations';
import { CryptoConfig, getCurrencyName, isCryptocurrency, isMobile } from '@deriv/shared';
import { useStore, observer } from '@deriv/stores';
+import { useFetch } from '@deriv/api';
import CashierBreadcrumb from '../../../components/cashier-breadcrumb';
import QRCode from 'qrcode.react';
import RecentTransaction from '../../../components/recent-transaction';
+import AlertBanner from '../../../components/alert-banner/alert-banner';
import { useCashierStore } from '../../../stores/useCashierStores';
import './crypto-deposit.scss';
@@ -17,6 +19,9 @@ const CryptoDeposit = observer(() => {
const { crypto_transactions, onMount: recentTransactionOnMount } = transaction_history;
const { setIsDeposit } = general_store;
+ const { data } = useFetch('crypto_config', { payload: { currency_code: currency } });
+ const minimum_deposit = data?.currencies_config[currency]?.minimum_deposit;
+
React.useEffect(() => {
recentTransactionOnMount();
}, [recentTransactionOnMount]);
@@ -150,10 +155,12 @@ const CryptoDeposit = observer(() => {
{api_error ? (
-
-
-
-
+