+ {currency} Wallet +
+ {landing_company_name && ( ++ {display_balance} {currency} +
+From bf11e5f84110fa27168088c3f3e111ba1877d37b Mon Sep 17 00:00:00 2001 From: adrienne-deriv <103016120+adrienne-deriv@users.noreply.github.com> Date: Wed, 20 Sep 2023 11:35:26 +0800 Subject: [PATCH 01/41] adrienne/feat: added icons for add more wallets (#10123) * feat: added icons for add more wallets * chore: removed lazy loading currency icons * chore: refactored icon component * Revert "chore: removed lazy loading currency icons" This reverts commit cab994c6923b31b462bcf43585b4bde64df7dac3. * Revert "chore: refactored icon component" This reverts commit 954062c200c23544d0ba5f0c0e5da33e6f10b6e5. * Revert "Revert "chore: refactored icon component"" This reverts commit 92a0f5db76a83124fc3fa1a1f717b42a6b403627. * Revert "chore: refactored icon component" This reverts commit 954062c200c23544d0ba5f0c0e5da33e6f10b6e5. * chore: updated component name for add more icon * Update index.ts --- .../WalletAddMoreCurrencyIcon.scss | 13 ++++++ .../WalletAddMoreCurrencyIcon.tsx | 44 +++++++++++++++++++ .../WalletAddMoreCurrencyIcon/index.ts | 4 ++ .../WalletsAddMoreCard.scss | 6 +++ .../WalletsAddMoreCard/WalletsAddMoreCard.tsx | 6 ++- .../WalletsAddMoreCardBanner.scss | 16 ++++++- .../WalletsAddMoreCardBanner.tsx | 26 +++++++---- .../WalletsAddMoreCarousel.scss | 5 --- packages/wallets/src/public/images/check.svg | 3 ++ .../src/public/images/currencies/aud.svg | 1 + .../src/public/images/currencies/btc.svg | 5 +++ .../src/public/images/currencies/eth.svg | 16 +++++++ .../src/public/images/currencies/eur.svg | 15 +++++++ .../src/public/images/currencies/eusdt.svg | 9 ++++ .../src/public/images/currencies/gbp.svg | 5 +++ .../src/public/images/currencies/ltc.svg | 13 ++++++ .../src/public/images/currencies/usd.svg | 27 ++++++++++++ .../src/public/images/currencies/usdc.svg | 7 +++ packages/wallets/src/public/images/plus.svg | 3 ++ 19 files changed, 208 insertions(+), 16 deletions(-) create mode 100644 packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.scss create mode 100644 packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx create mode 100644 packages/wallets/src/components/WalletAddMoreCurrencyIcon/index.ts create mode 100644 packages/wallets/src/public/images/check.svg create mode 100644 packages/wallets/src/public/images/currencies/aud.svg create mode 100644 packages/wallets/src/public/images/currencies/btc.svg create mode 100644 packages/wallets/src/public/images/currencies/eth.svg create mode 100644 packages/wallets/src/public/images/currencies/eur.svg create mode 100644 packages/wallets/src/public/images/currencies/eusdt.svg create mode 100644 packages/wallets/src/public/images/currencies/gbp.svg create mode 100644 packages/wallets/src/public/images/currencies/ltc.svg create mode 100644 packages/wallets/src/public/images/currencies/usd.svg create mode 100644 packages/wallets/src/public/images/currencies/usdc.svg create mode 100644 packages/wallets/src/public/images/plus.svg diff --git a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.scss b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.scss new file mode 100644 index 000000000000..fc1ea8a275bd --- /dev/null +++ b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.scss @@ -0,0 +1,13 @@ +.wallets-add-more-currency-icon { + width: 7rem; + height: fit-content; + + & > svg { + width: auto; + height: 3.5rem; + + @include mobile { + height: 3rem; + } + } +} diff --git a/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx new file mode 100644 index 000000000000..8ed6549b2d17 --- /dev/null +++ b/packages/wallets/src/components/WalletAddMoreCurrencyIcon/WalletAddMoreCurrencyIcon.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import AUDIcon from '../../public/images/currencies/aud.svg'; +import BTCIcon from '../../public/images/currencies/btc.svg'; +import ETHIcon from '../../public/images/currencies/eth.svg'; +import EURIcon from '../../public/images/currencies/eur.svg'; +import TetherIcon from '../../public/images/currencies/eusdt.svg'; +import GBPIcon from '../../public/images/currencies/gbp.svg'; +import LTCIcon from '../../public/images/currencies/ltc.svg'; +import USDIcon from '../../public/images/currencies/usd.svg'; +import USDCIcon from '../../public/images/currencies/usdc.svg'; + +const currencies = { + aud: AUDIcon, + btc: BTCIcon, + eth: ETHIcon, + eur: EURIcon, + eusdt: TetherIcon, + ltc: LTCIcon, + usd: USDIcon, + gbp: GBPIcon, + usdc: USDCIcon, + tusdt: TetherIcon, + ust: TetherIcon, +}; + +type TWalletCurrencyIconProps = { + currency: string; +}; + +const WalletAddMoreCurrencyIcon = ({ currency }: TWalletCurrencyIconProps) => { + const CurrencyIcon = React.useMemo(() => currencies[currency as keyof typeof currencies], [currency]); + + if (CurrencyIcon) { + return ( +
Loading...
; + + return ( ++ {display_balance} {currency} +
+{deposit_crypto_address}
++ Send only {currency_config?.name} ({currency_config?.display_code}) to this address. +
+ ); +}; + +export default WalletDepositCryptoCurrencyDetails; diff --git a/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/index.ts b/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/index.ts new file mode 100644 index 000000000000..73dca96f3c3c --- /dev/null +++ b/packages/wallets/src/components/WalletDepositCryptoCurrencyDetails/index.ts @@ -0,0 +1 @@ +export { default as WalletDepositCryptoCurrencyDetails } from './WalletDepositCryptoCurrencyDetails'; diff --git a/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.scss b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.scss new file mode 100644 index 000000000000..ea3fdf695fd3 --- /dev/null +++ b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.scss @@ -0,0 +1,15 @@ +.wallets-deposit-crypto-disclaimers { + display: flex; + flex-direction: column; + justify-content: center; + gap: 24px; + + &__content { + line-height: 14px; + } + + &__note { + font-size: 12px; + line-height: 18px; + } +} diff --git a/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx new file mode 100644 index 000000000000..dbe3a8746c34 --- /dev/null +++ b/packages/wallets/src/components/WalletDepositCryptoDisclaimers/WalletDepositCryptoDisclaimers.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { useActiveWalletAccount } from '@deriv/api'; +import useDevice from '../../hooks/useDevice'; +import { InlineMessage } from '../InlineMessage'; +import './WalletDepositCryptoDisclaimers.scss'; + +// Check with BE to see if we can get the network name from the API. +const crypto_currency_to_network_mapper: RecordTo avoid loss of funds:
++ Note: You’ll receive an email when your deposit start being processed. +
+Error
; + + return ( +Loading...
} + {iframe_url && ( +