From ecaddd7db9219f22ff68dc78318b13aa3e90d2f8 Mon Sep 17 00:00:00 2001
From: vuonghuuhung <vuonghuuhung2002@gmail.com>
Date: Tue, 24 Dec 2024 18:13:51 +0700
Subject: [PATCH] feat: update VSCode settings and refactor Pools and
 UniversalSwap components for improved code organization and readability

---
 .vscode/settings.json             |  3 +++
 src/pages/Pools/index.tsx         | 38 +++++++++++++++++++++++++++----
 src/pages/UniversalSwap/index.tsx | 20 ++++++++--------
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e1a49e274..73e0f7e08 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,5 +15,8 @@
   },
   "[shellscript]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx
index 279443db3..e0fcf2077 100644
--- a/src/pages/Pools/index.tsx
+++ b/src/pages/Pools/index.tsx
@@ -74,7 +74,7 @@ const Pools: React.FC<{}> = () => {
       // calculate my stake in usdt, we calculate by bond_amount from contract and totalLiquidity from backend.
       const myStakedLP = stakingToken
         ? totalRewardInfoData?.reward_infos.find((item) => isEqual(item.staking_token, stakingToken))?.bond_amount ||
-        '0'
+          '0'
         : 0;
       const lpPrice = Number(totalSupply) ? totalLiquidity / Number(totalSupply) : 0;
       const myStakeLPInUsdt = +myStakedLP * lpPrice;
@@ -122,16 +122,44 @@ const Pools: React.FC<{}> = () => {
     if (isReverseLogo) {
       return (
         <div className={styles.symbols}>
-          <img style={{ borderRadius: '100%' }} width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_left} alt="" />
-          <img style={{ borderRadius: '100%' }} width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_right} alt="" />
+          <img
+            style={{ borderRadius: '100%' }}
+            width={32}
+            height={32}
+            src={QuoteTokenIcon}
+            className={styles.symbols_logo_left}
+            alt=""
+          />
+          <img
+            style={{ borderRadius: '100%' }}
+            width={32}
+            height={32}
+            src={BaseTokenIcon}
+            className={styles.symbols_logo_right}
+            alt=""
+          />
         </div>
       );
     }
 
     return (
       <div className={styles.symbols}>
-        <img style={{ borderRadius: '100%' }} width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_left} alt="" />
-        <img style={{ borderRadius: '100%' }} width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_right} alt="" />
+        <img
+          style={{ borderRadius: '100%' }}
+          width={32}
+          height={32}
+          src={BaseTokenIcon}
+          className={styles.symbols_logo_left}
+          alt=""
+        />
+        <img
+          style={{ borderRadius: '100%' }}
+          width={32}
+          height={32}
+          src={QuoteTokenIcon}
+          className={styles.symbols_logo_right}
+          alt=""
+        />
       </div>
     );
   };
diff --git a/src/pages/UniversalSwap/index.tsx b/src/pages/UniversalSwap/index.tsx
index 5f176498a..f6bcde72c 100644
--- a/src/pages/UniversalSwap/index.tsx
+++ b/src/pages/UniversalSwap/index.tsx
@@ -1,13 +1,15 @@
-import { AssetsTab, HeaderTab, HeaderTop, HistoryTab, TabsTxs } from './Component';
-import SwapComponent from './Swap';
-import { TransactionProcess } from './Modals';
-import ModalCustom from 'components/ModalCustom';
 import { isMobile } from '@walletconnect/browser-utils';
+import classNames from 'classnames';
+import cn from 'classnames/bind';
+import ModalCustom from 'components/ModalCustom';
 import { EVENT_CONFIG_THEME } from 'config/eventConfig';
 import useTemporaryConfigReducer from 'hooks/useTemporaryConfigReducer';
 import useTheme from 'hooks/useTheme';
 import Content from 'layouts/Content';
 import { DuckDb } from 'libs/duckdb';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
 import { selectCurrentSwapFilterTime, selectCurrentSwapTabChart } from 'reducer/chartSlice';
 import {
   selectChartTimeFrame,
@@ -16,17 +18,15 @@ import {
   selectCurrentToken,
   setChartTimeFrame
 } from 'reducer/tradingSlice';
+import { FILTER_TIME_CHART } from 'reducer/type';
+import { AssetsTab, HeaderTab, HeaderTop, HistoryTab, TabsTxs } from './Component';
 import ChartUsdPrice from './Component/ChartUsdPrice';
+import { TransactionProcess } from './Modals';
+import SwapComponent from './Swap';
 import { initPairSwap } from './Swap/hooks/useFillToken';
 import { NetworkFilter, TYPE_TAB_HISTORY, initNetworkFilter } from './helpers';
 import { ChartTokenType, useChartUsdPrice } from './hooks/useChartUsdPrice';
-import { FILTER_TIME_CHART } from 'reducer/type';
-import cn from 'classnames/bind';
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
 import styles from './index.module.scss';
-import classNames from 'classnames';
 
 const cx = cn.bind(styles);