Merge pull request #53 from hyle-team/staging

Staging

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 (
+		<div className={styles.tooltip}>
+			{children}
+
+			<div className={classes(styles.tooltip__text, className)}>{text}</div>
+		</div>
+	);
+};
+
+export default TooltipWrapper;

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;
+			}
+		}
+	}
+}

src/components/UI/TooltipWrapper/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface TooltipWrapperProps {
+	children: ReactNode;
+	text: string;
+	className?: string;
+}

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);

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 (
 						<div className={styles.pair_cell}>
@@ -84,13 +88,26 @@ function PairsTable({ data }: IProps) {
 								<span>{quote.name}</span>
 							</div>
 
+							{whitelisted && (
+								<TooltipWrapper text="Whitelisted">
+									<Image
+										src="/ui/whitelisted.svg"
+										alt="whitelisted"
+										width={18}
+										height={18}
+									/>
+								</TooltipWrapper>
+							)}
+
 							{featured && (
-								<Image
-									src="/ui/featured.svg"
-									alt="featured"
-									width={24}
-									height={24}
-								/>
+								<TooltipWrapper text="Featured">
+									<Image
+										src="/ui/featured.svg"
+										alt="featured"
+										width={18}
+										height={18}
+									/>
+								</TooltipWrapper>
 							)}
 						</div>
 					);

src/components/default/PairsTable/types.ts

@@ -18,5 +18,6 @@ export type Row = {
 	volume: number;
 	volumeUSD: string;
 	featured: boolean;
+	whitelisted: boolean;
 	code: string;
 };

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 {

src/interfaces/common/PairData.ts

@@ -10,6 +10,7 @@ interface PairData {
 	low?: number;
 	volume: number;
 	featured: boolean;
+	whitelisted: boolean;
 }
 
 export default PairData;

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);

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) {
 					<span>/</span>
 					<span>{secondCurrency.name}</span>
 				</div>
+				{isWhitelisted && (
+					<TooltipWrapper text="Whitelisted">
+						<Image src="/ui/whitelisted.svg" alt="whitelisted" width={24} height={24} />
+					</TooltipWrapper>
+				)}
 				{isFeatured && (
-					<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
+					<TooltipWrapper text="Featured">
+						<Image src="/ui/featured.svg" alt="featured" width={24} height={24} />
+					</TooltipWrapper>
 				)}
 			</div>
 			<div className={styles.card__body}>