@@ -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 ? (
-
-
-
-
+
) : (
<>
-
- {qrcode_header || header_note}
-
+ {minimum_deposit ? (
+
+ ) : (
+
+ {qrcode_header || header_note}
+
+ )}
{
<>
{((currency === 'ETH' && option_list_value !== option_list[4].value) ||
diff --git a/packages/components/src/components/icon/common/ic-alert-warning-dark.svg b/packages/components/src/components/icon/common/ic-alert-warning-dark.svg
new file mode 100644
index 000000000000..022a7a984c67
--- /dev/null
+++ b/packages/components/src/components/icon/common/ic-alert-warning-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
index bea7e8994bc4..c51f50ca4e17 100644
--- a/packages/components/src/components/icon/icons.js
+++ b/packages/components/src/components/icon/icons.js
@@ -255,6 +255,7 @@ import './common/ic-alert-danger.svg';
import './common/ic-alert-info.svg';
import './common/ic-alert-success.svg';
import './common/ic-alert-trustpilot.svg';
+import './common/ic-alert-warning-dark.svg';
import './common/ic-alert-warning.svg';
import './common/ic-amplifier.svg';
import './common/ic-archive.svg';