diff --git a/src/components/UI/TooltipWrapper/index.tsx b/src/components/UI/TooltipWrapper/index.tsx new file mode 100644 index 0000000..09efc05 --- /dev/null +++ b/src/components/UI/TooltipWrapper/index.tsx @@ -0,0 +1,15 @@ +import { classes } from '@/utils/utils'; +import styles from './styles.module.scss'; +import { TooltipWrapperProps } from './types'; + +const TooltipWrapper = ({ children, text, className }: 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..a3d591e --- /dev/null +++ b/src/components/UI/TooltipWrapper/styles.module.scss @@ -0,0 +1,48 @@ +.tooltip { + cursor: pointer; + position: relative; + width: max-content; + display: grid; + place-content: center; + + &: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..82fbfc2 --- /dev/null +++ b/src/components/UI/TooltipWrapper/types.ts @@ -0,0 +1,7 @@ +import { ReactNode } from 'react'; + +export interface TooltipWrapperProps { + children: ReactNode; + text: string; + className?: 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..051fdac 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'; @@ -40,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', @@ -69,6 +72,7 @@ function PairsTable({ data }: IProps) { pair: { base, quote }, featured, assetId, + whitelisted, } = row.original; return (
@@ -84,13 +88,26 @@ function PairsTable({ data }: IProps) { {quote.name}
+ {whitelisted && ( + + whitelisted + + )} + {featured && ( - featured + + featured + )} ); 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; }; 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/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.module.scss b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss index a9cefff..74d193c 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.module.scss +++ b/src/pages/dex/pairs/PairsCard/PairsCard.module.scss @@ -5,9 +5,9 @@ .card__header { padding: 10px 12px; display: flex; + align-items: center; flex-direction: row; gap: 8px; - border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: var(--table-header-bg); @@ -25,7 +25,7 @@ } } - > img { + img { width: 18px; height: 18px; background: var(--icon-bg-color); @@ -128,4 +128,4 @@ } } } -} +} \ 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..584d7e3 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 { @@ -19,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; @@ -58,8 +60,15 @@ export default function PairsCard({ pair }: IProps) { / {secondCurrency.name} + {isWhitelisted && ( + + whitelisted + + )} {isFeatured && ( - featured + + featured + )}