From 83fbb72631b25eb5d912a9ad9ab3119fa0f3de6b Mon Sep 17 00:00:00 2001 From: AzizbekFayziyev Date: Tue, 3 Feb 2026 16:05:59 +0500 Subject: [PATCH 1/6] feat: add tooltip for badges --- src/components/UI/TooltipWrapper/index.tsx | 14 ++++++ .../UI/TooltipWrapper/styles.module.scss | 46 +++++++++++++++++++ src/components/UI/TooltipWrapper/types.ts | 6 +++ .../default/PairsTable/PairsTable.module.scss | 4 +- .../default/PairsTable/PairsTable.tsx | 16 ++++--- .../MatrixConnectionBadge/styles.module.scss | 6 ++- src/pages/dex/pairs/PairsCard/PairsCard.tsx | 5 +- 7 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 src/components/UI/TooltipWrapper/index.tsx create mode 100644 src/components/UI/TooltipWrapper/styles.module.scss create mode 100644 src/components/UI/TooltipWrapper/types.ts diff --git a/src/components/UI/TooltipWrapper/index.tsx b/src/components/UI/TooltipWrapper/index.tsx new file mode 100644 index 0000000..f9f3520 --- /dev/null +++ b/src/components/UI/TooltipWrapper/index.tsx @@ -0,0 +1,14 @@ +import styles from './styles.module.scss'; +import { TooltipWrapperProps } from './types'; + +const TooltipWrapper = ({ children, text }: TooltipWrapperProps) => { + return ( +
+ {children} + +
{text}
+
+ ); +}; + +export default TooltipWrapper; diff --git a/src/components/UI/TooltipWrapper/styles.module.scss b/src/components/UI/TooltipWrapper/styles.module.scss new file mode 100644 index 0000000..f09eb5f --- /dev/null +++ b/src/components/UI/TooltipWrapper/styles.module.scss @@ -0,0 +1,46 @@ +.tooltip { + cursor: pointer; + position: relative; + width: max-content; + + &:hover { + .tooltip__text { + opacity: 1; + } + } + + &__text { + z-index: 10; + opacity: 0; + pointer-events: none; + position: absolute; + top: calc(100% + 3px); + left: 50%; + transform: translateX(-50%); + background-color: #11316B; + padding: 10px; + border-radius: 5px; + font-size: 14px; + font-weight: 500; + line-height: 100%; + + &::before { + content: ""; + position: absolute; + width: 10px; + height: 10px; + background-color: #11316B; + top: 0; + left: 50%; + transform: rotate(45deg) translateX(-50%); + } + + [data-theme="light"] & { + background-color: #D2E8FB; + + &::before { + background-color: #D2E8FB; + } + } + } +} \ No newline at end of file diff --git a/src/components/UI/TooltipWrapper/types.ts b/src/components/UI/TooltipWrapper/types.ts new file mode 100644 index 0000000..0b9bd4b --- /dev/null +++ b/src/components/UI/TooltipWrapper/types.ts @@ -0,0 +1,6 @@ +import { ReactNode } from 'react'; + +export interface TooltipWrapperProps { + children: ReactNode; + text: string; +} diff --git a/src/components/default/PairsTable/PairsTable.module.scss b/src/components/default/PairsTable/PairsTable.module.scss index cc53eb1..82b6820 100644 --- a/src/components/default/PairsTable/PairsTable.module.scss +++ b/src/components/default/PairsTable/PairsTable.module.scss @@ -95,7 +95,7 @@ $table-radius: 10px; } } - > img { + img { width: 18px; height: 18px; background: var(--icon-bg-color); @@ -139,4 +139,4 @@ $table-radius: 10px; background-color: var(--table-button-bg-hover); } } -} +} \ No newline at end of file diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index b7d6e53..84eb806 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -8,6 +8,8 @@ import { Store } from '@/store/store-reducer'; import PairData from '@/interfaces/common/PairData'; import { ContextState } from '@/interfaces/common/ContextValue'; import { tradingKnownCurrencies, roundTo, notationToString, getAssetIcon } from '@/utils/utils'; +import Tooltip from '@/components/UI/Tooltip/Tooltip'; +import TooltipWrapper from '@/components/UI/TooltipWrapper'; import styles from './PairsTable.module.scss'; import { Row } from './types'; @@ -85,12 +87,14 @@ function PairsTable({ data }: IProps) { {featured && ( - featured + + featured + )} ); diff --git a/src/components/dex/MatrixConnectionBadge/styles.module.scss b/src/components/dex/MatrixConnectionBadge/styles.module.scss index 61504d8..a2f5ee0 100644 --- a/src/components/dex/MatrixConnectionBadge/styles.module.scss +++ b/src/components/dex/MatrixConnectionBadge/styles.module.scss @@ -16,6 +16,10 @@ width: 16px; height: 16px; } + + svg:not(.stroked):not(.no-svg-style svg) * { + fill: transparent; + } } &__tooltip { @@ -33,4 +37,4 @@ background-color: var(--trade-table-tooltip) !important; } } -} +} \ No newline at end of file diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx index b1f02e2..eea74d1 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx +++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx @@ -5,6 +5,7 @@ import ArrowRight from '@/assets/images/UI/arrow_right.svg'; import { Store } from '@/store/store-reducer'; import PairData from '@/interfaces/common/PairData'; import { getAssetIcon, notationToString, roundTo } from '@/utils/utils'; +import TooltipWrapper from '@/components/UI/TooltipWrapper'; import styles from './PairsCard.module.scss'; interface IProps { @@ -59,7 +60,9 @@ export default function PairsCard({ pair }: IProps) { {secondCurrency.name} {isFeatured && ( - featured + + featured + )}
From 8c18bb42b5bd834cf2901b00be42909f5040cd10 Mon Sep 17 00:00:00 2001 From: jejolare Date: Tue, 3 Feb 2026 18:28:41 +0700 Subject: [PATCH 2/6] add whitelisted label --- src/components/default/PairsTable/PairsTable.tsx | 1 + src/interfaces/common/CurrencyRow.ts | 1 + src/interfaces/common/PairData.ts | 1 + src/pages/dex/pairs/PairsCard/PairsCard.tsx | 6 ++++++ 4 files changed, 9 insertions(+) diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index 84eb806..e540232 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -42,6 +42,7 @@ function transformPairsToRows(pairs: PairData[], state: ContextState): Row[] { volume, volumeUSD, featured: pair.featured, + whitelisted: pair.whitelisted, code: tradingKnownCurrencies.includes(pair.first_currency?.code) ? pair.first_currency?.code : 'tsds', diff --git a/src/interfaces/common/CurrencyRow.ts b/src/interfaces/common/CurrencyRow.ts index 7b3acd6..dc97ce2 100644 --- a/src/interfaces/common/CurrencyRow.ts +++ b/src/interfaces/common/CurrencyRow.ts @@ -19,6 +19,7 @@ interface CurrencyRow { type?: CurrencyType; asset_id?: string | null; asset_info?: Asset; + whitelisted: boolean; } export default CurrencyRow; diff --git a/src/interfaces/common/PairData.ts b/src/interfaces/common/PairData.ts index e6fb9c0..0b562c0 100644 --- a/src/interfaces/common/PairData.ts +++ b/src/interfaces/common/PairData.ts @@ -10,6 +10,7 @@ interface PairData { low?: number; volume: number; featured: boolean; + whitelisted: boolean; } export default PairData; diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx index eea74d1..6ba9bba 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx +++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx @@ -20,6 +20,7 @@ export default function PairsCard({ pair }: IProps) { const secondCurrency = pair.second_currency; const isFeatured = pair.featured; + const isWhitelisted = pair.whitelisted; const secondAssetUsdPrice = state.assetsRates.get(secondCurrency.asset_id || '') ?? 0; @@ -64,6 +65,11 @@ export default function PairsCard({ pair }: IProps) { featured )} + {isWhitelisted && ( + + whitelisted + + )}
From 2503330bbc8b5970c2ded996cfc4a4bf96a2d325 Mon Sep 17 00:00:00 2001 From: jejolare Date: Tue, 3 Feb 2026 18:29:39 +0700 Subject: [PATCH 3/6] debug --- src/interfaces/common/CurrencyRow.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/interfaces/common/CurrencyRow.ts b/src/interfaces/common/CurrencyRow.ts index dc97ce2..7b3acd6 100644 --- a/src/interfaces/common/CurrencyRow.ts +++ b/src/interfaces/common/CurrencyRow.ts @@ -19,7 +19,6 @@ interface CurrencyRow { type?: CurrencyType; asset_id?: string | null; asset_info?: Asset; - whitelisted: boolean; } export default CurrencyRow; From 31198a798d3c5e51dddff0845a153e42239658c2 Mon Sep 17 00:00:00 2001 From: AzizbekFayziyev Date: Tue, 3 Feb 2026 16:43:05 +0500 Subject: [PATCH 4/6] fix: mobile pair icons --- src/pages/dex/pairs/PairsCard/PairsCard.module.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss index a9cefff..55d78bb 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss +++ b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss @@ -5,6 +5,7 @@ .card__header { padding: 10px 12px; display: flex; + align-items: center; flex-direction: row; gap: 8px; @@ -25,7 +26,7 @@ } } - > img { + img { width: 18px; height: 18px; background: var(--icon-bg-color); @@ -128,4 +129,4 @@ } } } -} +} \ No newline at end of file From 837d212ffc94749a5527c3444b4e6d03e3657a2a Mon Sep 17 00:00:00 2001 From: jejolare Date: Tue, 3 Feb 2026 18:52:18 +0700 Subject: [PATCH 5/6] add whitelisted to PC version --- src/components/default/PairsTable/PairsTable.tsx | 12 ++++++++++++ src/components/default/PairsTable/types.ts | 1 + 2 files changed, 13 insertions(+) diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index e540232..3fcff6c 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -72,6 +72,7 @@ function PairsTable({ data }: IProps) { pair: { base, quote }, featured, assetId, + whitelisted, } = row.original; return (
@@ -97,6 +98,17 @@ function PairsTable({ data }: IProps) { /> )} + + {whitelisted && ( + + whitelisted + + )}
); }, diff --git a/src/components/default/PairsTable/types.ts b/src/components/default/PairsTable/types.ts index 76a0aa9..c314617 100644 --- a/src/components/default/PairsTable/types.ts +++ b/src/components/default/PairsTable/types.ts @@ -18,5 +18,6 @@ export type Row = { volume: number; volumeUSD: string; featured: boolean; + whitelisted: boolean; code: string; }; From c613e5c73f2643ca6d488a90be59284e74b30a86 Mon Sep 17 00:00:00 2001 From: AzizbekFayziyev Date: Tue, 3 Feb 2026 16:59:48 +0500 Subject: [PATCH 6/6] fix: icon styles --- src/components/UI/TooltipWrapper/index.tsx | 5 +++-- .../UI/TooltipWrapper/styles.module.scss | 2 ++ src/components/UI/TooltipWrapper/types.ts | 1 + src/components/default/PairsTable/PairsTable.tsx | 16 ++++++++-------- .../dex/pairs/PairsCard/PairsCard.module.scss | 1 - src/pages/dex/pairs/PairsCard/PairsCard.tsx | 10 +++++----- 6 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/UI/TooltipWrapper/index.tsx b/src/components/UI/TooltipWrapper/index.tsx index f9f3520..09efc05 100644 --- a/src/components/UI/TooltipWrapper/index.tsx +++ b/src/components/UI/TooltipWrapper/index.tsx @@ -1,12 +1,13 @@ +import { classes } from '@/utils/utils'; import styles from './styles.module.scss'; import { TooltipWrapperProps } from './types'; -const TooltipWrapper = ({ children, text }: TooltipWrapperProps) => { +const TooltipWrapper = ({ children, text, className }: TooltipWrapperProps) => { return (
{children} -
{text}
+
{text}
); }; diff --git a/src/components/UI/TooltipWrapper/styles.module.scss b/src/components/UI/TooltipWrapper/styles.module.scss index f09eb5f..a3d591e 100644 --- a/src/components/UI/TooltipWrapper/styles.module.scss +++ b/src/components/UI/TooltipWrapper/styles.module.scss @@ -2,6 +2,8 @@ cursor: pointer; position: relative; width: max-content; + display: grid; + place-content: center; &:hover { .tooltip__text { diff --git a/src/components/UI/TooltipWrapper/types.ts b/src/components/UI/TooltipWrapper/types.ts index 0b9bd4b..82fbfc2 100644 --- a/src/components/UI/TooltipWrapper/types.ts +++ b/src/components/UI/TooltipWrapper/types.ts @@ -3,4 +3,5 @@ import { ReactNode } from 'react'; export interface TooltipWrapperProps { children: ReactNode; text: string; + className?: string; } diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index 3fcff6c..051fdac 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -88,22 +88,22 @@ function PairsTable({ data }: IProps) { {quote.name}
- {featured && ( - + {whitelisted && ( + featured )} - {whitelisted && ( - + {featured && ( + whitelisted diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss index 55d78bb..74d193c 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss +++ b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss @@ -8,7 +8,6 @@ align-items: center; flex-direction: row; gap: 8px; - border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: var(--table-header-bg); diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx index 6ba9bba..584d7e3 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx +++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx @@ -60,16 +60,16 @@ export default function PairsCard({ pair }: IProps) { / {secondCurrency.name}
- {isFeatured && ( - - featured - - )} {isWhitelisted && ( whitelisted )} + {isFeatured && ( + + featured + + )}