From 1603d007b5881c72ca850e29837b88277c437f2f Mon Sep 17 00:00:00 2001 From: Farabi Date: Tue, 29 Oct 2024 16:22:59 +0800 Subject: [PATCH 1/3] fix: added all trade market icons and related run panel icons --- src/components/market/market-icon.tsx | 321 ++++++++++++++++++ .../arrow-indicator/arrow-indicator.tsx | 12 +- .../circular-progress/circular-progress.scss | 4 +- .../circular-progress/circular-progress.tsx | 7 +- .../contract-card-header.tsx | 8 +- .../toggle-card-dialog.tsx | 11 +- .../result-overlay/result-overlay.tsx | 9 +- .../progress-slider-mobile.tsx | 1 - src/components/summary/summary-card.scss | 75 +--- .../desktop-transaction-table.tsx | 5 +- .../mobile-transaction-card.tsx | 5 +- src/components/transactions/transaction.tsx | 10 +- 12 files changed, 375 insertions(+), 93 deletions(-) create mode 100644 src/components/market/market-icon.tsx diff --git a/src/components/market/market-icon.tsx b/src/components/market/market-icon.tsx new file mode 100644 index 00000000..fa972f7a --- /dev/null +++ b/src/components/market/market-icon.tsx @@ -0,0 +1,321 @@ +import { lazy, Suspense } from 'react'; +import { IconSize } from '@deriv/quill-icons'; + +const MARKET_ICONS = { + FRXAUDCAD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudcadIcon })) + ), + FRXAUDCHF: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudchfIcon })) + ), + FRXAUDJPY: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudjpyIcon })) + ), + FRXAUDNZD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudnzdIcon })) + ), + FRXAUDPLN: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudsgdIcon })) + ), + FRXAUDUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexAudusdIcon })) + ), + FRXBROUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexCadchfIcon })) + ), + FRXEURAUD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEuraudIcon })) + ), + FRXEURCAD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurcadIcon })) + ), + FRXEURCHF: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurchfIcon })) + ), + FRXEURGBP: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurgbpIcon })) + ), + FRXEURJPY: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurjpyIcon })) + ), + FRXEURNZD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurnzdIcon })) + ), + FRXEURUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexEurusdIcon })) + ), + FRXGBPAUD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpaudIcon })) + ), + FRXGBPCAD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpcadIcon })) + ), + FRXGBPCHF: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpchfIcon })) + ), + FRXGBPJPY: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpjpyIcon })) + ), + FRXGBPNOK: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpnokIcon })) + ), + FRXGBPUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexGbpusdIcon })) + ), + FRXNZDJPY: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexNzdjpnIcon })) + ), + FRXNZDUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexNzdusdIcon })) + ), + FRXUSDCAD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdcadIcon })) + ), + FRXUSDCHF: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdchfIcon })) + ), + FRXUSDJPY: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdjpyIcon })) + ), + FRXUSDNOK: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdnokIcon })) + ), + FRXUSDPLN: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdplnIcon })) + ), + FRXUSDSEK: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketForexUsdsekIcon })) + ), + FRXXAGUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCommoditySilverusdIcon })) + ), + FRXXAUUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCommodityGoldusdIcon })) + ), + FRXXPDUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCommodityPalladiumusdIcon })) + ), + FRXXPTUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCommodityPlatinumusdIcon })) + ), + OTC_AEX: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesNetherlands25Icon })) + ), + OTC_AS51: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesAustralia200Icon })) + ), + OTC_DJI: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesWallStreet30Icon })) + ), + OTC_FCHI: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesFrance40Icon })) + ), + OTC_FTSE: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesUk100Icon })) + ), + OTC_GDAXI: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesUk100Icon })) + ), + OTC_HSI: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesHongKong50Icon })) + ), + OTC_IBEX35: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesSpain35Icon })) + ), + OTC_N225: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesJapan225Icon })) + ), + OTC_NDX: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesUsTech100Icon })) + ), + OTC_SPC: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesUs500Icon })) + ), + OTC_SSMI: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesSwiss20Icon })) + ), + OTC_SX5E: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketIndicesEuro50Icon })) + ), + R_10: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility10Icon })) + ), + R_25: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility25Icon })) + ), + R_50: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility50Icon })) + ), + R_75: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility75Icon })) + ), + R_100: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility100Icon })) + ), + BOOM300N: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedBoom300Icon })) + ), + BOOM500: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedBoom500Icon })) + ), + BOOM1000: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedBoom1000Icon })) + ), + CRASH300N: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedCrash300Icon })) + ), + CRASH500: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedCrash500Icon })) + ), + CRASH1000: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedCrash1000Icon })) + ), + RDBEAR: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedBearIcon })) + ), + RDBULL: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedBullIcon })) + ), + STPRNG: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedStepIndices100Icon })) + ), + STPRNG2: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedStepIndices200Icon })) + ), + STPRNG3: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedStepIndices300Icon })) + ), + STPRNG4: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedStepIndices400Icon })) + ), + STPRNG5: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedStepIndices500Icon })) + ), + WLDAUD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedAudBasketIcon })) + ), + WLDEUR: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedEurBasketIcon })) + ), + WLDGBP: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedGbpBasketIcon })) + ), + WLDXAU: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedGoldBasketIcon })) + ), + WLDUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedUsdBasketIcon })) + ), + '1HZ10V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility101sIcon })) + ), + '1HZ25V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility251sIcon })) + ), + '1HZ50V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility501sIcon })) + ), + '1HZ75V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility751sIcon })) + ), + '1HZ100V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility1001sIcon })) + ), + '1HZ150V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility1501sIcon })) + ), + '1HZ200V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility2001sIcon })) + ), + '1HZ250V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility2501sIcon })) + ), + '1HZ300V': lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedVolatility3001sIcon })) + ), + JD10: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump10Icon })) + ), + JD25: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump25Icon })) + ), + JD50: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump50Icon })) + ), + JD75: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump75Icon })) + ), + JD100: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump100Icon })) + ), + JD150: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump150Icon })) + ), + JD200: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump200Icon })) + ), + CRYBCHUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyBchusdIcon })) + ), + CRYBNBUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyBnbusdIcon })) + ), + CRYBTCLTC: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyBtcltcIcon })) + ), + CRYIOTUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyIotusdIcon })) + ), + CRYNEOUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyNeousdIcon })) + ), + CRYOMGUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyOmgusdIcon })) + ), + CRYTRXUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyTrxusdIcon })) + ), + CRYBTCETH: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyBtcethIcon })) + ), + CRYZECUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyZecusdIcon })) + ), + CRYXMRUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyXmrusdIcon })) + ), + CRYXMLUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyXlmusdIcon })) + ), + CRYXRPUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyXrpusdIcon })) + ), + CRYBTCUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyBtcusdIcon })) + ), + CRYDSHUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyDshusdIcon })) + ), + CRYETHUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyEthusdIcon })) + ), + CRYEOSUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyEosusdIcon })) + ), + CRYLTCUSD: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyLtcusdIcon })) + ), + unknown: lazy(() => + import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump100Icon })) + ), +}; + +export const MarketIcon = ({ type, size }: { type: string; size?: IconSize }) => { + const Icon = MARKET_ICONS[type?.toUpperCase() as keyof typeof MARKET_ICONS] || MARKET_ICONS.unknown; + + return ( + + + + ); +}; diff --git a/src/components/shared_ui/arrow-indicator/arrow-indicator.tsx b/src/components/shared_ui/arrow-indicator/arrow-indicator.tsx index 94db9fa6..bf51afc8 100644 --- a/src/components/shared_ui/arrow-indicator/arrow-indicator.tsx +++ b/src/components/shared_ui/arrow-indicator/arrow-indicator.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '@/utils/tmp/dummy'; +import { StandaloneSortDownFillIcon, StandaloneSortUpFillIcon } from '@deriv/quill-icons'; type TArrowIndicatorProps = { className?: string; @@ -27,7 +27,13 @@ const ArrowIndicator = ({ className, value }: TArrowIndicatorProps) => { setIsVisible(true); setData(prev_data => { const has_increased = Number(prev_data.value) < Number(value); - const icon_name = has_increased ? 'IcProfit' : 'IcLoss'; + const icon_name = has_increased ? ( + + ) : ( +
+ +
+ ); return { icon: has_comparable_values ? icon_name : '', previous_icon: prev_data.icon, @@ -47,7 +53,7 @@ const ArrowIndicator = ({ className, value }: TArrowIndicatorProps) => { return (
{has_comparable_values && is_visible ? ( - +
{previous_value === Number(value) ? previous_icon : icon}
) : null}
); diff --git a/src/components/shared_ui/circular-progress/circular-progress.scss b/src/components/shared_ui/circular-progress/circular-progress.scss index ca068d89..5d9e6140 100644 --- a/src/components/shared_ui/circular-progress/circular-progress.scss +++ b/src/components/shared_ui/circular-progress/circular-progress.scss @@ -12,17 +12,19 @@ &--warning { stroke: var(--status-warning); } + &--danger { stroke: var(--status-danger); } } + &--clockwise { transform: rotate(-90deg); } + &__icon { position: absolute; width: 1.6rem; - height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); diff --git a/src/components/shared_ui/circular-progress/circular-progress.tsx b/src/components/shared_ui/circular-progress/circular-progress.tsx index 12a5a565..e08f4fab 100644 --- a/src/components/shared_ui/circular-progress/circular-progress.tsx +++ b/src/components/shared_ui/circular-progress/circular-progress.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { Icon } from '@/utils/tmp/dummy'; +import { LegacyTimeIcon } from '@deriv/quill-icons'; type TCircularProgressProps = { className?: string; @@ -15,7 +15,6 @@ type TCircularProgressProps = { const CircularProgress = ({ className, danger_limit = 20, - icon = '', is_clockwise = false, progress = 0, radius = 22, @@ -27,7 +26,9 @@ const CircularProgress = ({ const strokeDashoffset = circumference - (progress / 100) * circumference; return (
- +
+ +
- + +
+ +
); return ( diff --git a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx index 9737dc07..c45e62f3 100644 --- a/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx +++ b/src/components/shared_ui/contract-card/result-overlay/result-overlay.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { NavLink } from 'react-router-dom'; import { CSSTransition } from 'react-transition-group'; -import { Icon } from '@/utils/tmp/dummy'; +import { StandaloneFlagCheckeredFillIcon } from '@deriv/quill-icons'; import Money from '../../money'; import Text from '../../text'; import { TGetCardLables, TGetContractPath } from '../../types'; @@ -32,7 +32,12 @@ export const ResultStatusIcon = ({ getCardLabels, is_contract_won }: TResultStat 'dc-result__caption--lost': !is_contract_won, })} > - +
+ +
{getCardLabels().CLOSED} ); diff --git a/src/components/shared_ui/progress-slider-mobile/progress-slider-mobile.tsx b/src/components/shared_ui/progress-slider-mobile/progress-slider-mobile.tsx index 33bcc4c7..49444622 100644 --- a/src/components/shared_ui/progress-slider-mobile/progress-slider-mobile.tsx +++ b/src/components/shared_ui/progress-slider-mobile/progress-slider-mobile.tsx @@ -51,7 +51,6 @@ const ProgressSliderMobile = ({ diff --git a/src/components/summary/summary-card.scss b/src/components/summary/summary-card.scss index 6a7dc5a5..21f96cef 100644 --- a/src/components/summary/summary-card.scss +++ b/src/components/summary/summary-card.scss @@ -1,22 +1,12 @@ @use 'components/shared/styles/devices' as *; -.db-summary-card--inactive { - display: flex !important; - color: var(--text-general); - font-size: 14px; - justify-content: center; - margin: auto; - padding: 0 3rem; - text-align: center; -} +.db-summary-card { + $contract-card: &; -.summary { + box-sizing: border-box; display: flex; - align-items: center; flex-direction: column; - justify-content: center; - background: linear-gradient(180deg, var(--general-section-2) 0%, rgb(242 243 244 / 0%) 80%); - width: 100%; + position: relative; @include desktop-screen { width: 100%; @@ -26,36 +16,13 @@ color: var(--text-general); font-size: 14px; justify-content: center; - } - - &__tiles { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 24px 0; - } - - &__tile { - display: flex; - flex-direction: column; - justify-content: center; - border-radius: 0.4rem; - width: 32%; - max-width: 32%; + margin: auto; text-align: center; - background-color: var(--general-section-1); - padding: 8px 8px 0; - margin-bottom: 2%; - height: 56px; - - &-title { - height: 18px; - margin-bottom: 4px; - } + line-height: 2rem; + padding: 0 3rem; - &-content { - height: 18px; - margin-bottom: 4px; + & .dc-text { + text-align: center; } } @@ -93,28 +60,12 @@ padding: 1.5rem 3.4rem; } - &--negative { - font-weight: bold; - color: var(--text-loss-danger); + .dc-contract-card__grid-underlying-trade--mobile { + grid-template-columns: 1fr 1.25fr; } - } -} -.run-panel { - &-tab { - &__content { - .summary-panel-inactive { - color: var(--text-general); - font-size: 14px; - line-height: 2rem; - margin: auto; - padding: 0 3rem; - text-align: center; - - &__strong { - font-weight: bold; - } - } + .dc-contract-card-items-wrapper { + grid-template-columns: 1fr 1fr; } } diff --git a/src/components/transaction-details/desktop-transaction-table.tsx b/src/components/transaction-details/desktop-transaction-table.tsx index a0d1b99d..a37f6ef7 100644 --- a/src/components/transaction-details/desktop-transaction-table.tsx +++ b/src/components/transaction-details/desktop-transaction-table.tsx @@ -4,7 +4,8 @@ import ContentLoader from 'react-content-loader'; import { transaction_elements } from '@/constants/transactions'; import { getContractTypeName } from '@/external/bot-skeleton'; import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace'; -import { Icon, IconTradeTypes } from '@/utils/tmp/dummy'; +import { IconTradeTypes } from '@/utils/tmp/dummy'; +import { MarketIcon } from '../market/market-icon'; import { convertDateFormat } from '../shared'; import Popover from '../shared_ui/popover'; import { TColumn, TDesktopTransactionTable, TTableCell } from './transaction-details.types'; @@ -95,7 +96,7 @@ export default function DesktopTransactionTable({ label={ } + icon={} /> } /> diff --git a/src/components/transaction-details/mobile-transaction-card.tsx b/src/components/transaction-details/mobile-transaction-card.tsx index a8fe294d..87a0a0d9 100644 --- a/src/components/transaction-details/mobile-transaction-card.tsx +++ b/src/components/transaction-details/mobile-transaction-card.tsx @@ -3,8 +3,9 @@ import classNames from 'classnames'; import ContentLoader from 'react-content-loader'; import { getContractTypeName } from '@/external/bot-skeleton'; import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace'; -import { Icon, IconTradeTypes } from '@/utils/tmp/dummy'; +import { IconTradeTypes } from '@/utils/tmp/dummy'; import { localize } from '@deriv-com/translations'; +import { MarketIcon } from '../market/market-icon'; import { convertDateFormat } from '../shared'; import Popover from '../shared_ui/popover'; import { TTransaction } from './transaction-details.types'; @@ -78,7 +79,7 @@ export default function MobileTransactionCards({ transaction }: { transaction: T
} + icon={} /> {contract ? ( } + icon={} title={contract.display_name || ''} /> ) : ( @@ -193,14 +195,14 @@ const Transaction = ({ contract, active_transaction_id, onClickTransaction }: TT
} + icon={} title={localize('Entry spot')} message={contract?.entry_tick ?? } />
} + icon={} title={localize('Exit spot')} message={contract?.exit_tick ?? } /> From e4c13ca6401ba7d1b2569bbc3d815e94794055d3 Mon Sep 17 00:00:00 2001 From: Farabi Date: Tue, 29 Oct 2024 17:22:59 +0800 Subject: [PATCH 2/3] fix: header icons after quill-icons version update --- package-lock.json | 19 ++++++++++++++---- package.json | 4 ++-- .../layout/header/header-config.tsx | 20 ++++--------------- 3 files changed, 21 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2dc96319..d0480364 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@deriv-com/utils": "latest", "@deriv/deriv-charts": "^2.5.1", "@deriv/js-interpreter": "^3.0.0", - "@deriv/quill-icons": "~1.23.3", + "@deriv/quill-icons": "^2.1.2", "@rsbuild/plugin-basic-ssl": "^1.1.1", "@svgr/core": "^8.1.0", "@tanstack/react-query": "^5.29.2", @@ -2902,6 +2902,16 @@ "@rollup/rollup-linux-x64-gnu": "^4.22.4" } }, + "node_modules/@deriv-com/quill-ui/node_modules/@deriv/quill-icons": { + "version": "1.23.14", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.23.14.tgz", + "integrity": "sha512-I9rajWDuN6Yoqj5atWS1djVFuAQDRV7U5ZOencpYNc8JBrv96eWq+eVNHk1eeSy5QSIyxhh6aKnz59V3ViVBnA==", + "license": "ISC", + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16" + } + }, "node_modules/@deriv-com/quill-ui/node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -3069,9 +3079,10 @@ } }, "node_modules/@deriv/quill-icons": { - "version": "1.23.12", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.23.12.tgz", - "integrity": "sha512-A0OT5PBGwR2FSGA+tq4OmxG8oME3L6uYH8VGdl52WKn7Dnsyttv3LCyM+KejJPOPTkg6k30OGYyIhJGU+7zE5g==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-2.1.2.tgz", + "integrity": "sha512-CUiItM0SkN5jRfy1cM0SF5ATg8ClCjGhVDY2f6YXh5n1HBPftCN3KoB/OTVckkFjcoR8morS1WGwHC41sa7BBg==", + "license": "ISC", "peerDependencies": { "react": ">= 16", "react-dom": ">= 16" diff --git a/package.json b/package.json index 5e4e4c4e..8ac44d51 100644 --- a/package.json +++ b/package.json @@ -21,13 +21,13 @@ "dependencies": { "@deriv-com/analytics": "^1.5.3", "@deriv-com/api-hooks": "^1.6.7", + "@deriv-com/quill-ui": "1.18.1", "@deriv-com/translations": "^1.3.9", "@deriv-com/ui": "^1.36.4", "@deriv-com/utils": "latest", "@deriv/deriv-charts": "^2.5.1", "@deriv/js-interpreter": "^3.0.0", - "@deriv-com/quill-ui": "1.18.1", - "@deriv/quill-icons": "~1.23.3", + "@deriv/quill-icons": "^2.1.2", "@rsbuild/plugin-basic-ssl": "^1.1.1", "@svgr/core": "^8.1.0", "@tanstack/react-query": "^5.29.2", diff --git a/src/components/layout/header/header-config.tsx b/src/components/layout/header/header-config.tsx index 0452e562..b332b210 100644 --- a/src/components/layout/header/header-config.tsx +++ b/src/components/layout/header/header-config.tsx @@ -1,16 +1,13 @@ import { ReactNode } from 'react'; import { LegacyCashierIcon as CashierLogo, - LegacyHomeOldIcon as TradershubLogo, + LegacyHomeNewIcon as TradershubLogo, LegacyReportsIcon as ReportsLogo, } from '@deriv/quill-icons/Legacy'; import { - PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon as BinaryBotLogo, - PartnersProductSmarttraderBrandLightLogoWordmarkIcon as SmarttraderLogo, -} from '@deriv/quill-icons/Logo'; -import { - DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon as DerivBotLogo, - DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon as DerivTraderLogo, + DerivProductBrandLightDerivBotLogoWordmarkIcon as DerivBotLogo, + DerivProductBrandLightDerivTraderLogoWordmarkIcon as DerivTraderLogo, + PartnersProductBrandLightSmarttraderLogoWordmarkIcon as SmarttraderLogo, } from '@deriv/quill-icons/Logo'; export type PlatformsConfig = { @@ -66,15 +63,6 @@ export const platformsConfig: PlatformsConfig[] = [ icon: , showInEU: false, }, - { - active: false, - buttonIcon: , - description: - 'Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.', - href: 'https://bot.deriv.com', - icon: , - showInEU: false, - }, ]; export const TRADERS_HUB_LINK_CONFIG = { From 826e6c114ea46c5d9898ca2c98c81a3526076360 Mon Sep 17 00:00:00 2001 From: Farabi Date: Tue, 29 Oct 2024 18:01:33 +0800 Subject: [PATCH 3/3] fix: add unknown market icon --- src/components/market/market-icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/market/market-icon.tsx b/src/components/market/market-icon.tsx index fa972f7a..920e4bf8 100644 --- a/src/components/market/market-icon.tsx +++ b/src/components/market/market-icon.tsx @@ -306,7 +306,7 @@ const MARKET_ICONS = { import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketCryptocurrencyLtcusdIcon })) ), unknown: lazy(() => - import('@deriv/quill-icons/Markets').then(module => ({ default: module.MarketDerivedJump100Icon })) + import('@deriv/quill-icons/Illustrative').then(module => ({ default: module.IllustrativeMarketsIcon })) ), };