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 && (
+
+
+
+ )}
+
{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 && (
+
+
+
+ )}
{isFeatured && (
-
+
+
+
)}