Merge branch 'hyle-team:master' into feat_add_ssr

.github/workflows/codeql.yml

@@ -0,0 +1,99 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: '21 18 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

src/components/default/OrderNotification/OrderNotification.tsx

@@ -72,7 +72,9 @@ export default function OrderNotification({
 			</div>
 			<div className={styles['dex__order-notification_delimiter']} />
 			<div className={styles['dex__order-notification_details']}>
-				<Link href={pairLink}>Details</Link>
+				<Link href={pairLink} onClick={onCloseClick}>
+					Details
+				</Link>
 			</div>
 		</div>
 	);

src/components/dex/AliasCell/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import Tooltip from '@/components/UI/Tooltip/Tooltip';
-import { classes, cutAddress } from '@/utils/utils';
+import { cutAddress } from '@/utils/utils';
 import MatrixConnectionBadge from '@/components/dex/MatrixConnectionBadge';
 import BadgeStatus from '@/components/dex/BadgeStatus';
 import { createPortal } from 'react-dom';

src/components/dex/InputPanelItem/index.tsx

@@ -71,6 +71,11 @@ function InputPanelItem(props: InputPanelItemProps) {
 		setRangeInputValue('50');
 	}
 
+	const numericBalance = Number(balance);
+	const numericZanoBalance = Number(zanoBalance);
+	const hasValidAssetBalance = Number.isFinite(numericBalance);
+	const hasValidZanoBalance = Number.isFinite(numericZanoBalance);
+
 	async function postOrder() {
 		const price = new Decimal(priceState);
 		const amount = new Decimal(amountState);
@@ -85,22 +90,21 @@ function InputPanelItem(props: InputPanelItemProps) {
 
 		if (!isFull) return;
 
+		const assetAmount = new Decimal(hasValidAssetBalance ? String(numericBalance) : '0');
+		const zanoAmount = new Decimal(hasValidZanoBalance ? String(numericZanoBalance) : '0');
+
 		if (isBuy) {
-			const zanoAmount = new Decimal(zanoBalance);
 			if (zanoAmount.lessThan(total)) {
 				setAlertState('error');
 				setAlertSubtitle('Insufficient ZANO balance');
 				setTimeout(() => setAlertState(null), 3000);
 				return;
 			}
-		} else {
-			const assetAmount = new Decimal(balance);
-			if (assetAmount.lessThan(amount)) {
-				setAlertState('error');
-				setAlertSubtitle(`Insufficient ${firstCurrencyName} balance`);
-				setTimeout(() => setAlertState(null), 3000);
-				return;
-			}
+		} else if (assetAmount.lessThan(amount)) {
+			setAlertState('error');
+			setAlertSubtitle(`Insufficient ${firstCurrencyName} balance`);
+			setTimeout(() => setAlertState(null), 3000);
+			return;
 		}
 
 		const orderData: CreateOrderData = {

src/components/dex/InputPanelItem/styles.module.scss

@@ -109,7 +109,7 @@
 }
 
 .disabled {
-	opacity: .5;
+	opacity: 0.5;
 	pointer-events: none;
 }
 

src/components/dex/OrdersPool/columns/index.tsx

@@ -5,6 +5,7 @@ import { Trade } from '@/interfaces/responses/trades/GetTradeRes';
 import { BuildColumnsArgs } from './types';
 import TotalUsdCell from '../../TotalUsdCell';
 import styles from '../styles.module.scss';
+import BadgeStatus from '../../BadgeStatus';
 
 export function buildOrderPoolColumns({
 	firstCurrencyName,
@@ -16,8 +17,16 @@ export function buildOrderPoolColumns({
 			header: <>Price ({secondCurrencyName})</>,
 			width: '80px',
 			cell: (row) => (
-				<p style={{ color: row.type === 'buy' ? '#16D1D6' : '#FF6767' }}>
+				<p
+					style={{
+						color: row.type === 'buy' ? '#16D1D6' : '#FF6767',
+						display: 'flex',
+						alignItems: 'center',
+						gap: 8,
+					}}
+				>
 					{notationToString(row.price, 8)}
+					{row.isInstant && <BadgeStatus type="instant" icon />}
 				</p>
 			),
 		},

src/components/dex/OrdersPool/styles.module.scss

@@ -78,48 +78,29 @@
 				&__body {
 					tr {
 						cursor: pointer;
-						position: relative;
+						position: relative !important;
 
 						&:hover {
 							background-color: var(--table-tr-hover-color);
 						}
 
 						&.buy {
-							td {
-								&:last-child {
-									&::before {
-										background-color: var(--dex-buy-percentage);
-									}
-								}
-							}
+							background: linear-gradient(
+								to left,
+								var(--dex-buy-percentage) var(--precentage),
+								transparent var(--precentage)
+							);
 						}
 
 						&.sell {
-							td {
-								&:last-child {
-									&::before {
-										background-color: var(--dex-sell-percentage);
-									}
-								}
-							}
+							background: linear-gradient(
+								to left,
+								var(--dex-sell-percentage) var(--precentage),
+								transparent var(--precentage)
+							);
 						}
 
 						td {
-							position: static !important;
-
-							&:last-child {
-								&::before {
-									content: '';
-									pointer-events: none;
-									position: absolute;
-									z-index: 1;
-									right: 0;
-									top: 0;
-									width: var(--precentage);
-									height: 100%;
-								}
-							}
-
 							p,
 							span {
 								position: relative;
@@ -199,6 +180,7 @@
 	padding: 10px;
 	transform: translateX(-50%);
 	background-color: var(--dex-tooltip-bg);
+	transition: none !important;
 
 	&__arrow {
 		border-top: 1px solid var(--dex-tooltip-border-color);

src/styles/Dex.module.scss

@@ -8,7 +8,7 @@
 		height: 54px;
 		padding: 0 12px;
 
-		>div {
+		> div {
 			display: flex;
 			align-items: center;
 			gap: 10px;
@@ -136,12 +136,12 @@
 				width: 240px;
 				height: 42px;
 
-				>div:nth-child(1) {
+				> div:nth-child(1) {
 					border-radius: 10px;
 					padding: 11px 20px;
 
-					>div {
-						>div p {
+					> div {
+						> div p {
 							font-size: 14px;
 							font-weight: 500;
 						}
@@ -160,12 +160,12 @@
 					}
 				}
 
-				>div:nth-child(2) {
-					>div {
-						>div {
+				> div:nth-child(2) {
+					> div {
+						> div {
 							padding: 11px 20px;
 
-							>div {
+							> div {
 								p {
 									font-size: 14px;
 									font-weight: 500;
@@ -305,7 +305,7 @@
 					left: 50%;
 					transform: translateX(-50%);
 
-					>p {
+					> p {
 						width: 100%;
 						font-size: 16px;
 						text-wrap: wrap;
@@ -323,11 +323,11 @@
 				}
 			}
 
-			>p {
+			> p {
 				margin-right: 6px;
 			}
 
-			>input {
+			> input {
 				margin-left: 33px;
 				height: 18px;
 				width: 18px;
@@ -389,7 +389,7 @@
 							left: 50%;
 							transform: translateX(-50%);
 
-							>p {
+							> p {
 								width: 100%;
 								font-size: 16px;
 								text-wrap: wrap;
@@ -401,14 +401,14 @@
 								display: block;
 							}
 
-							>svg>* {
+							> svg > * {
 								opacity: 1;
 							}
 						}
 					}
 				}
 
-				>.curve__chart {
+				> .curve__chart {
 					display: block;
 					width: 100%;
 					height: 50px;
@@ -419,7 +419,7 @@
 					align-items: center;
 					gap: 15px;
 
-					>div:first-child {
+					> div:first-child {
 						width: 48px;
 						height: 48px;
 						padding: 10px;
@@ -429,13 +429,13 @@
 						background: var(--icon-bg-color);
 						border-radius: 50%;
 
-						>img {
+						> img {
 							width: auto;
 							height: 100%;
 						}
 					}
 
-					>div:last-child {
+					> div:last-child {
 						height: 48px;
 						display: flex;
 						flex-direction: column;
@@ -504,4 +504,4 @@
 			}
 		}
 	}
-}
+}