diff --git a/.github/workflows/reuseable-sonar.yml b/.github/workflows/reuseable-sonar.yml
index 285c6ecd6..e2c58b0ca 100644
--- a/.github/workflows/reuseable-sonar.yml
+++ b/.github/workflows/reuseable-sonar.yml
@@ -1,18 +1,22 @@
 name: Reuseable Sonaqube
 
 on:
-  workflow_call:
+  workflow_dispatch:
   pull_request:
+  push:
+    branches:
+      - 'feat/sonarqube'
 
 jobs:
-  scan-repository:
-    name: scan repository with Sonaqube
+  sonarcloud:
+    name: SonarCloud
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
-          fetch-depth: 0
-      - uses: sonarsource/sonarqube-scan-action@master
+          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
+      - name: SonarCloud Scan
+        uses: SonarSource/sonarcloud-github-action@master
         env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
diff --git a/jest.setup.ts b/jest.setup.ts
index e663d238c..a6ed26bae 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -1,13 +1,12 @@
 // @ts-nocheck
-import { TextEncoder, TextDecoder } from "util";
-import { randomFillSync } from "crypto";
-import type { Config } from "jest";
+import { TextEncoder, TextDecoder } from 'util';
+import { randomFillSync } from 'crypto';
 
 // polyfill for jest crypto function (because of Injective ts sdk)
 window.crypto = {
   getRandomValues(buffer) {
     return randomFillSync(buffer);
-  },
+  }
 };
 
 // polyfill for jest formatToJson function
@@ -16,31 +15,10 @@ Intl.DateTimeFormat.prototype.formatToJson = function (date: Date) {
   return Object.fromEntries(
     _this
       .formatToParts(date)
-      .filter((item) => item.type !== "literal")
-      .map((item) => [item.type, item.value]),
+      .filter((item) => item.type !== 'literal')
+      .map((item) => [item.type, item.value])
   ) as Record<Intl.DateTimeFormatPartTypes, string>;
 };
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
-
-// const config: Config = {
-//   preset: "ts-jest/presets/js-with-ts",
-//   testEnvironment: "node",
-//   globals: {
-//     "ts-jest": {
-//       tsconfig: "<rootDir>/test/tsconfig.json",
-//     },
-//   },
-//   transform: {
-//     "^.+\\.ts?$": ["ts-jest", { isolatedModules: true }],
-//   },
-//   projects: [
-//     {
-//       displayName: "migrate-staking",
-//       testMatch: "<rootDir>/src/tests/migrate-staking.test.ts",
-//     },
-//   ],
-// };
-//
-// export default config;
diff --git a/public/v3/index.html b/public/v3/index.html
index 000c6bafe..68ec421fb 100644
--- a/public/v3/index.html
+++ b/public/v3/index.html
@@ -8,7 +8,6 @@
         return this.toString();
       };
     </script>
-    <!-- <script type="module" src="/src/shims.ts"></script> -->
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="utf-8" />
diff --git a/remove_scss_comments.sh b/remove_scss_comments.sh
new file mode 100755
index 000000000..70e28d6f4
--- /dev/null
+++ b/remove_scss_comments.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# Function to remove single-line comments starting with //
+remove_single_line_comments() {
+    sed -i '' 's#//.*$##' "$1"
+}
+
+# Find and remove comments in all .scss files
+find . -name '*.scss' | while read filename; do
+    echo "Removing comments from $filename"
+    remove_single_line_comments "$filename"
+done
+
+echo "Comments removed from all .scss files."
diff --git a/scripts/vendor.js b/scripts/vendor.js
index 6f2dcc42b..cbf4c018d 100644
--- a/scripts/vendor.js
+++ b/scripts/vendor.js
@@ -14,7 +14,7 @@ require('react-scripts/config/env');
 const webpack = require('webpack');
 const path = require('path');
 const fs = require('fs');
-const package = require('../package.json');
+const packageJson = require('../package.json');
 const { fallback } = require('../config-overrides');
 const ignores = [];
 const chalk = require('react-dev-utils/chalk');
@@ -32,7 +32,7 @@ const config = {
   target: 'web',
   cache: true,
   entry: {
-    vendor: Object.keys(package.dependencies).filter((dep) => !ignores.includes(dep))
+    vendor: Object.keys(packageJson.dependencies).filter((dep) => !ignores.includes(dep))
   },
   module: {
     rules: [
@@ -80,12 +80,9 @@ const config = {
       path: path.join(vendorPath, `manifest.${vendorHash}.json`)
     }),
     // fix error 'UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins'
-    new webpack.NormalModuleReplacementPlugin(
-      /node:crypto/,
-      (resource) => {
-        resource.request = resource.request.replace(/^node:/, '');
-      }
-    )
+    new webpack.NormalModuleReplacementPlugin(/node:crypto/, (resource) => {
+      resource.request = resource.request.replace(/^node:/, '');
+    })
   ]
 };
 
diff --git a/sonar-project.properties b/sonar-project.properties
index aa0c0913e..b479fc332 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1 +1,20 @@
-sonar.projectKey=oraichain_oraiswap-frontend_AYpL50t8tGfUdSAJ_QO4
\ No newline at end of file
+sonar.projectKey=oraichain_oraiswap-frontend
+sonar.organization=oraichain
+sonar.exclusions=src/tests/**,src/components/LuckyDraw/luckyDrawClient/LuckyWheelContract.client.ts,src/components/LuckyDraw/luckyDrawClient/LuckyWheelContract.types.ts
+sonar.issue.ignore.multicriteria=e1,e2,e3,e4
+
+# Non-interactive elements shouldn't have event handlers.
+sonar.issue.ignore.multicriteria.e1.ruleKey=typescript:S6847
+sonar.issue.ignore.multicriteria.e1.resourceKey=**
+
+# Remove this commented out code.
+sonar.issue.ignore.multicriteria.e2.ruleKey=typescript:S125
+sonar.issue.ignore.multicriteria.e2.resourceKey=**
+
+# Prefer using an optional chain expression instead, as it's more concise and easier to read.
+sonar.issue.ignore.multicriteria.e3.ruleKey=typescript:S6582
+sonar.issue.ignore.multicriteria.e3.resourceKey=**
+ 
+# Avoid non-native interactive elements.
+sonar.issue.ignore.multicriteria.e4.ruleKey=typescript:S6848
+sonar.issue.ignore.multicriteria.e4.resourceKey=**
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index e3e24da08..d7913437f 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -45,7 +45,6 @@
 
   @include theme() {
     background-color: theme-get('neutral-surface-bg-section-3');
-    // border-color: theme-get('neutral-text-text-token-name');
     color: theme-get('neutral-text-text-token-name');
   }
 }
@@ -58,14 +57,7 @@
 
   @include theme() {
     background-color: theme-get('neutral-surface-bg-section-3');
-    // border-color: theme-get('neutral-text-text-token-name');
     color: theme-get('neutral-text-text-token-name');
-
-    svg {
-      path {
-        // fill: theme-get('neutral-text-text-token-name');
-      }
-    }
   }
 
   font-size: 16px;
@@ -131,4 +123,4 @@
   border: 1px;
   padding: 4px 16px;
   border-radius: 99px;
-}
+}
\ No newline at end of file
diff --git a/src/components/Input.module.scss b/src/components/Input.module.scss
index 1ac0de5cb..e69de29bb 100644
--- a/src/components/Input.module.scss
+++ b/src/components/Input.module.scss
@@ -1,3 +0,0 @@
-.input{
-    
-}
\ No newline at end of file
diff --git a/src/components/InputSwap/InputSwap.tsx b/src/components/InputSwap/InputSwap.tsx
index baac15f52..b5396e6e2 100644
--- a/src/components/InputSwap/InputSwap.tsx
+++ b/src/components/InputSwap/InputSwap.tsx
@@ -35,7 +35,7 @@ export default function InputSwap({ Icon, setIsSelectFrom, token, amount, onChan
           type="text"
           value={amount}
           onValueChange={({ floatValue }) => {
-            onChangeAmount && onChangeAmount(floatValue);
+            onChangeAmount?.(floatValue);
           }}
         />
       </div>
diff --git a/src/components/LuckyDraw/index.module.scss b/src/components/LuckyDraw/index.module.scss
index 6f34915e6..a8074cce6 100644
--- a/src/components/LuckyDraw/index.module.scss
+++ b/src/components/LuckyDraw/index.module.scss
@@ -5,19 +5,19 @@
 .btn {
   margin-bottom: 10px;
   cursor: pointer;
-  // background: $aqua;
+  
 
-  // position: fixed;
-  // bottom: 10px;
-  // right: 10px;
-  // z-index: 100;
+  
+  
+  
+  
 
-  // animation: bounce ease-in-out 0.8s infinite;
-  // -webkit-animation: bounce ease-in-out 0.8s infinite;
+  
+  
 
-  // &:hover {
-  //   animation: unset;
-  // }
+  
+  
+  
 
   img {
     width: 100%;
@@ -50,7 +50,7 @@
     width: 100%;
     display: flex;
     flex-direction: column-reverse;
-    // justify-content: space-between;
+    
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
@@ -80,13 +80,13 @@
 
   .spin {
     position: relative;
-    // border-radius: 50%;
-    // background: $aqua;
+    
+    
 
     .spinMask {
       z-index: 100;
       position: absolute;
-      // background: rgba(7, 10, 19, 0.2);
+      
       background: #d7f5bf;
       border-radius: 50%;
       width: 72px;
@@ -125,7 +125,7 @@
         gap: 4px;
 
         img {
-          // filter: grayscale(100%);
+          
           filter: saturate(3);
         }
       }
@@ -152,7 +152,7 @@
     text-align: center;
 
     &.done {
-      animation-iteration-count: 4; // infinite
+      animation-iteration-count: 4; 
       animation: wiggle ease-in-out 0.8s;
       -webkit-animation: wiggle ease-in-out 0.8s;
     }
@@ -208,8 +208,8 @@
         @include theme {
           background-color: $primary-text-link;
           border-color: theme-get('neutral-white');
-          // background-color: theme-get('primary-text-text-link');
-          // border-color: theme-get('neutral-white');
+          
+          
         }
 
         transition: 0.2s ease-in-out;
@@ -239,7 +239,7 @@
   height: 100%;
   width: 100%;
 
-  // background: $aqua;
+  
 
   & > div {
     height: 100%;
@@ -283,7 +283,7 @@
   }
 }
 
-// Bounce animation
+
 
 @keyframes bounce {
   0%,
diff --git a/src/components/ModalCustom/index.module.scss b/src/components/ModalCustom/index.module.scss
index 89e2a952c..a0810d778 100644
--- a/src/components/ModalCustom/index.module.scss
+++ b/src/components/ModalCustom/index.module.scss
@@ -34,11 +34,9 @@
 
   transition: all 0.5s;
   transform: translateY(100%);
-  // visibility: hidden;
 
   &.open {
     transform: translateY(0);
-    // visibility: visible;
   }
 
   &.isBottomSheet {
@@ -62,12 +60,7 @@
     border-radius: 12px;
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
 
-    // transition: all 0.5s;
-    // transform: translateY(100%);
 
-    // &.openContent {
-    //   transform: translateY(0);
-    // }
 
     visibility: hidden;
     opacity: 0;
@@ -144,27 +137,15 @@
     .content {
       width: 100%;
 
-      // display: flex;
-      // flex-direction: column;
-      // align-items: center;
-      // gap: 24px;
 
       padding: 0px 12px;
       overflow-y: auto;
       height: 100%;
-      // max-height: calc(100vh - 250px);
 
       @include mobile {
         padding: 0px 5px;
       }
 
-      // @include theme {
-      //   color: theme-get('neutral-text-text-token-name');
-      // }
-      // font-size: 16px;
-      // font-weight: 400;
-      // line-height: 150%;
-      // text-align: center;
     }
   }
 }
diff --git a/src/components/Modals/ModalDownloadOwallet/ModalDownloadOwallet.module.scss b/src/components/Modals/ModalDownloadOwallet/ModalDownloadOwallet.module.scss
index f0f22b8c7..80156ea10 100644
--- a/src/components/Modals/ModalDownloadOwallet/ModalDownloadOwallet.module.scss
+++ b/src/components/Modals/ModalDownloadOwallet/ModalDownloadOwallet.module.scss
@@ -67,8 +67,5 @@
   .chooseWalletModalWrapper {
     color: #f7f7f7;
     background: #121511;
-
-    .downloadPlatform {
-    }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss b/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss
index 02323f193..4c6e1aa08 100644
--- a/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss
+++ b/src/components/Modals/SelectTokenModal/SelectTokenModal.module.scss
@@ -63,7 +63,6 @@
 
       /* aiRight/White */
 
-      // color: #ffffff;f
       @include theme() {
         color: theme-get('text-color');
       }
diff --git a/src/components/Modals/SlippageModal/SlippageModal.module.scss b/src/components/Modals/SlippageModal/SlippageModal.module.scss
index 44c83271d..45c67e4bb 100644
--- a/src/components/Modals/SlippageModal/SlippageModal.module.scss
+++ b/src/components/Modals/SlippageModal/SlippageModal.module.scss
@@ -35,7 +35,6 @@
 
       path {
         fill: #777E91;
-        ;
       }
     }
   }
diff --git a/src/components/Toasts/Toast.module.scss b/src/components/Toasts/Toast.module.scss
index 037505845..34235e407 100644
--- a/src/components/Toasts/Toast.module.scss
+++ b/src/components/Toasts/Toast.module.scss
@@ -56,24 +56,6 @@
   margin: 0 15px;
 }
 
-.cw20_section {
-  padding-bottom: 10px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-
-  &_label {
-    color: $blue-color;
-  }
-
-  &_value {
-    color: $lavender-gray;
-    padding-left: 6px;
-    padding-right: 6px;
-
-  }
-}
-
 .cw20_section {
   padding-bottom: 10px;
   font-size: 14px;
diff --git a/src/components/Tooltip.module.scss b/src/components/Tooltip.module.scss
index 8a87c01de..351ab537d 100644
--- a/src/components/Tooltip.module.scss
+++ b/src/components/Tooltip.module.scss
@@ -39,10 +39,4 @@
 .flex {
   @include flex(flex-start);
   display: inline-flex;
-}
-.icon {
-  svg {
-    path {
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/WalletManagement/ConnectedMobile/ConnectedMobile.module.scss b/src/components/WalletManagement/ConnectedMobile/ConnectedMobile.module.scss
index 3227409eb..069c0327c 100644
--- a/src/components/WalletManagement/ConnectedMobile/ConnectedMobile.module.scss
+++ b/src/components/WalletManagement/ConnectedMobile/ConnectedMobile.module.scss
@@ -30,8 +30,6 @@
         padding: 6px;
     }
 
-    .down_icon {}
-
     .content {
         display: flex;
         justify-content: space-between;
diff --git a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.module.scss b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.module.scss
index e0c4d5b3d..7b1f2cfa0 100644
--- a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.module.scss
+++ b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.module.scss
@@ -7,7 +7,6 @@
     width: 47%;
 
     .header {
-        // background-color: theme-get('neutral-border-border-bold');
         background-color: #dfe0de;
         padding: 6px;
         border-top-left-radius: 12px;
diff --git a/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.module.scss b/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.module.scss
index 010bfb6eb..6cf48dbcd 100644
--- a/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.module.scss
+++ b/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.module.scss
@@ -98,6 +98,13 @@
     }
   }
 
+  .actions {
+    .cancel_btn {
+      background: #121511;
+      color: #f7f7f7;
+      border: 1px solid #f7f7f7;
+    }
+  }
 
 }
 
@@ -194,14 +201,4 @@
       border: none;
     }
   }
-}
-
-.dark {
-  .actions {
-    .cancel_btn {
-      background: #121511;
-      color: #f7f7f7;
-      border: 1px solid #f7f7f7;
-    }
-  }
 }
\ No newline at end of file
diff --git a/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx b/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx
index 69181c9a8..629072103 100644
--- a/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx
+++ b/src/components/WalletManagement/ModalDisconnect/ModalDisconnect.tsx
@@ -17,7 +17,7 @@ export const ModalDisconnect: React.FC<{
   close: () => void;
   currentDisconnectingNetwork: NetworkType;
   setCurrentDisconnectingNetwork: React.Dispatch<React.SetStateAction<NetworkType>>;
-}> = ({ close, currentDisconnectingNetwork, setCurrentDisconnectingNetwork }) => {
+}> = ({ close, currentDisconnectingNetwork }) => {
   const [theme] = useConfigReducer('theme');
   const [walletByNetworks, setWalletByNetworks] = useWalletReducer('walletsByNetwork');
   const [oraiAddress, setOraiAddress] = useConfigReducer('address');
diff --git a/src/components/WalletManagement/MyWallet/MyWallet.module.scss b/src/components/WalletManagement/MyWallet/MyWallet.module.scss
index 44544429f..3b6a077e7 100644
--- a/src/components/WalletManagement/MyWallet/MyWallet.module.scss
+++ b/src/components/WalletManagement/MyWallet/MyWallet.module.scss
@@ -79,7 +79,7 @@
       background-color: #f7f7f7;
       border-radius: 8px;
 
-      & > div:last-child {
+      &>div:last-child {
         border-bottom: none;
       }
 
@@ -177,16 +177,7 @@
 
       .addressByNetworkItem {
         border-bottom: 1px solid #494949;
-
-        .addressByChainInNetwork {
-          .left {
-            .icon {
-              .iconWalletByChain {
-              }
-            }
-          }
-        }
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/WalletManagement/MyWallet/MyWallet.tsx b/src/components/WalletManagement/MyWallet/MyWallet.tsx
index 05f2e55ee..60e851b37 100644
--- a/src/components/WalletManagement/MyWallet/MyWallet.tsx
+++ b/src/components/WalletManagement/MyWallet/MyWallet.tsx
@@ -139,7 +139,7 @@ export const MyWallet: React.FC<{
     return renderWalletAddress(
       cosmosNetworksWithIcon,
       cosmosWalletConnected,
-      (network) => cosmosAddresses && cosmosAddresses[network.chainId]
+      (network) => cosmosAddresses?.[network.chainId]
     );
   };
 
diff --git a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.module.scss b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.module.scss
index 5ce8e3d21..1250fda54 100644
--- a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.module.scss
+++ b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.module.scss
@@ -204,14 +204,6 @@
 
       .addressByNetworkItem {
         border-bottom: 1px solid #494949;
-
-        .addressByChainInNetwork {
-          .left {
-            .icon {
-              .iconWalletByChain {}
-            }
-          }
-        }
       }
     }
   }
diff --git a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx
index e35336171..138913b13 100644
--- a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx
+++ b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx
@@ -77,7 +77,7 @@ export const MyWalletMobile: React.FC<{
     return (
       <div className={styles.addressByNetworkItem}>
         {cosmosNetworksWithIcon.map((network) => {
-          const chainAddress = cosmosAddresses && cosmosAddresses[network.chainId];
+          const chainAddress = cosmosAddresses?.[network.chainId];
           let NetworkIcon = theme === 'dark' ? network.Icon : network.IconLight;
           if (!NetworkIcon) NetworkIcon = DefaultIcon;
 
diff --git a/src/components/WalletManagement/WalletManagement.tsx b/src/components/WalletManagement/WalletManagement.tsx
index 610720f43..e5fdf4e1d 100644
--- a/src/components/WalletManagement/WalletManagement.tsx
+++ b/src/components/WalletManagement/WalletManagement.tsx
@@ -15,7 +15,7 @@ import { MyWalletMobile } from './MyWalletMobile';
 import styles from './WalletManagement.module.scss';
 import type { Wallet as WalletResetType } from './useResetBalance';
 import { useResetBalance } from './useResetBalance';
-import { WalletProvider, walletProvider } from './walletConfig';
+import { WalletNetwork, WalletProvider, walletProvider } from './walletConfig';
 const cx = cn.bind(styles);
 
 export const WalletManagement: FC<{}> = () => {
@@ -44,32 +44,34 @@ export const WalletManagement: FC<{}> = () => {
 
   // update wallet provider with status is active or not
   useEffect(() => {
+    function updateWalletStatus(wallet: WalletNetwork) {
+      let isActive = true;
+      switch (wallet.nameRegistry) {
+        case 'keplr':
+          isActive = isCheckKeplr;
+          break;
+        case 'owallet':
+          isActive = isCheckOwallet;
+          break;
+        case 'metamask':
+          isActive = isMetamask;
+          break;
+        case 'tronLink':
+          isActive = isTronLink;
+          break;
+        case 'eip191':
+          isActive = isMetamask;
+          break;
+        case 'bitcoin':
+          isActive = isCheckOwallet;
+          break;
+      }
+      return { ...wallet, isActive };
+    }
+
     async function updateWalletProvider() {
       const updatedWalletProvider = walletProviderWithStatus.map((item) => {
-        const updatedWallets = item.wallets.map((wallet) => {
-          let isActive = true;
-          switch (wallet.nameRegistry) {
-            case 'keplr':
-              isActive = isCheckKeplr;
-              break;
-            case 'owallet':
-              isActive = isCheckOwallet;
-              break;
-            case 'metamask':
-              isActive = isMetamask;
-              break;
-            case 'tronLink':
-              isActive = isTronLink;
-              break;
-            case 'eip191':
-              isActive = isMetamask;
-              break;
-            case 'bitcoin':
-              isActive = isCheckOwallet;
-              break;
-          }
-          return { ...wallet, isActive };
-        });
+        const updatedWallets = item.wallets.map(updateWalletStatus);
         return {
           ...item,
           wallets: updatedWallets
@@ -78,6 +80,7 @@ export const WalletManagement: FC<{}> = () => {
       setWalletProviderWithStatus(updatedWalletProvider);
     }
     updateWalletProvider();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isCheckOwallet, isCheckKeplr, isMetamask, isTronLink]);
 
   // load balance every time change address
@@ -93,6 +96,7 @@ export const WalletManagement: FC<{}> = () => {
     if (Object.keys(filteredAddresses).length > 0) {
       loadTokenAmounts(filteredAddresses);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [oraiAddress, tronAddress, metamaskAddress, btcAddress]);
 
   // reset balance when disconnect
diff --git a/src/helper/index.tsx b/src/helper/index.tsx
index 089e59c99..b42cd970c 100644
--- a/src/helper/index.tsx
+++ b/src/helper/index.tsx
@@ -312,7 +312,7 @@ export const owalletCheck = (type: WalletCosmosType) => {
 
 export const isUnlockMetamask = async (): Promise<boolean> => {
   const ethereum = window.ethereum;
-  if (!ethereum || !ethereum.isMetaMask || !ethereum._metamask) return false;
+  if (!ethereum?.isMetaMask || !ethereum._metamask) return false;
   return await window.ethereum._metamask.isUnlocked();
 };
 
@@ -365,27 +365,45 @@ export const switchWalletTron = async (walletType: WalletType) => {
   };
 };
 
+export const isConnectTronInMobile = (walletByNetworks: WalletsByNetwork) => {
+  return isMobile() && !!walletByNetworks.tron;
+};
+
+export const isConnectCosmos = (walletByNetworks: WalletsByNetwork) => {
+  return !!walletByNetworks.cosmos || isMobile();
+};
+
+export const isConnectSpecificNetwork = (status: string | null) => {
+  return !!status || isMobile();
+};
+
+export const getAddressTransferForEvm = async (walletByNetworks: WalletsByNetwork) => {
+  let address = '';
+  if (network.chainId === EVM_CHAIN_ID_COMMON.TRON_CHAIN_ID) {
+    if (isConnectTronInMobile(walletByNetworks)) {
+      const accountTron: interfaceRequestTron = await window.tronLinkDapp.request({
+        method: 'tron_requestAccounts'
+      });
+      address = accountTron.base58;
+    } else {
+      address = window?.tronWebDapp?.defaultAddress?.base58;
+    }
+  } else if (isConnectSpecificNetwork(walletByNetworks.evm)) {
+    if (walletByNetworks.evm === 'owallet') window.ethereumDapp = window.eth_owallet;
+    const check = window.Metamask.isWindowEthereum();
+    if (check) {
+      address = await window.Metamask.getEthAddress();
+    }
+  }
+  return address;
+};
+
 export const getAddressTransfer = async (network: CustomChainInfo, walletByNetworks: WalletsByNetwork) => {
   try {
-    let address;
+    let address = '';
     if (network.networkType === 'evm') {
-      if (network.chainId === EVM_CHAIN_ID_COMMON.TRON_CHAIN_ID) {
-        if (isMobile() && walletByNetworks.tron) {
-          const accountTron: interfaceRequestTron = await window.tronLinkDapp.request({
-            method: 'tron_requestAccounts'
-          });
-          address = accountTron.base58;
-        } else {
-          address = window?.tronWebDapp?.defaultAddress?.base58;
-        }
-      } else if (walletByNetworks.evm || isMobile()) {
-        if (walletByNetworks.evm === 'owallet') window.ethereumDapp = window.eth_owallet;
-        const check = window.Metamask.isWindowEthereum();
-        if (check) {
-          address = await window.Metamask.getEthAddress();
-        }
-      }
-    } else if (walletByNetworks.cosmos || isMobile()) {
+      address = await getAddressTransferForEvm(walletByNetworks);
+    } else if (isConnectSpecificNetwork(walletByNetworks.cosmos)) {
       address = await window.Keplr.getKeplrAddr(network.chainId);
     }
     return address;
@@ -494,13 +512,11 @@ export const chainInfoWithoutIcon = (): ChainInfoWithoutIcons[] => {
     });
 
     const stakeCurrencyyWithoutIcons = checkErrorObj(info.stakeCurrency);
-    const feeCurrenciesWithoutIcons =
-      info?.feeCurrencies &&
-      info.feeCurrencies.map((feeCurrency) => {
-        const feeCurrencyyWithoutIcon = checkErrorObj(feeCurrency);
+    const feeCurrenciesWithoutIcons = info?.feeCurrencies?.map((feeCurrency) => {
+      const feeCurrencyyWithoutIcon = checkErrorObj(feeCurrency);
 
-        return feeCurrencyyWithoutIcon;
-      });
+      return feeCurrencyyWithoutIcon;
+    });
 
     return {
       ...infoWithoutIcon,
@@ -544,3 +560,9 @@ export const getAddressByEIP191 = async (isSwitchWallet?: boolean) => {
   const accounts = await metamaskOfflineSinger.getAccounts(isSwitchWallet);
   return accounts[0].address;
 };
+
+export const assert = (condition: any, msg?: string) => {
+  if (!condition) {
+    throw new Error(msg || 'Condition is not truthy');
+  }
+};
diff --git a/src/hooks/useMetamask.ts b/src/hooks/useMetamask.ts
index 5abd66605..048f32719 100644
--- a/src/hooks/useMetamask.ts
+++ b/src/hooks/useMetamask.ts
@@ -82,12 +82,10 @@ export function useInactiveConnect() {
 
   useEffect(() => {
     const { ethereum } = window;
-    if (ethereum && ethereum.on) {
-      // ethereum.on('connect', connect);
+    if (ethereum?.on) {
       ethereum.on('accountsChanged', connect);
       return () => {
         if (ethereum.removeListener) {
-          // ethereum.removeListener('connect', connect);
           ethereum.removeListener('accountsChanged', connect);
         }
       };
diff --git a/src/hooks/useTronLink.ts b/src/hooks/useTronLink.ts
index dd3605b6f..3071715b4 100644
--- a/src/hooks/useTronLink.ts
+++ b/src/hooks/useTronLink.ts
@@ -26,11 +26,15 @@ export function useTronEventListener() {
     }
   }, [mobileMode]);
 
+  function checkEventSetAccount(e: MessageEvent<any>) {
+    return e?.data?.message && e.data.message.action === 'setAccount';
+  }
+
   async function handleTronLink() {
     window.addEventListener('message', async function (e) {
       const walletByNetworks = await getWalletByNetworkFromStorage();
       if (walletByNetworks?.tron === 'tronLink') {
-        if (e?.data?.message && e.data.message.action === 'setAccount') {
+        if (checkEventSetAccount(e)) {
           if (window.tronLink) {
             window.tronLinkDapp = window.tronLink;
             await window.tronLink.request({ method: 'tron_requestAccounts' });
diff --git a/src/index.tsx b/src/index.tsx
index 3c9568986..c71b4f304 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -83,7 +83,7 @@ const initApp = async () => {
   const walletType = getWalletByNetworkCosmosFromStorage();
   if (walletType) {
     const cosmWasmClient = await getCosmWasmClient({ chainId: network.chainId });
-    if (cosmWasmClient && cosmWasmClient.client) window.client = cosmWasmClient.client;
+    if (cosmWasmClient?.client) window.client = cosmWasmClient.client;
   }
 };
 
diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx
index 80196e9c9..b50308b5d 100644
--- a/src/layouts/App.tsx
+++ b/src/layouts/App.tsx
@@ -7,27 +7,25 @@ import { isMobile } from '@walletconnect/browser-utils';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { network } from 'config/networks';
 import { ThemeProvider } from 'context/theme-context';
-import { getListAddressCosmos, getNetworkGasPrice, interfaceRequestTron } from 'helper';
-import { leapWalletType } from 'helper/constants';
+import { getListAddressCosmos, interfaceRequestTron } from 'helper';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useLoadTokens from 'hooks/useLoadTokens';
+import { useTronEventListener } from 'hooks/useTronLink';
 import useWalletReducer from 'hooks/useWalletReducer';
 import Keplr from 'libs/keplr';
 import Metamask from 'libs/metamask';
 import { buildUnsubscribeMessage, buildWebsocketSendMessage, processWsResponseMsg } from 'libs/utils';
 import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import useWebSocket from 'react-use-websocket';
+import { setAddressBookList } from 'reducer/addressBook';
 import routes from 'routes';
 import { persistor } from 'store/configure';
 import { ADDRESS_BOOK_KEY_BACKUP, PERSIST_VER } from 'store/constants';
-import Menu from './Menu';
 import './index.scss';
+import Menu from './Menu';
 import { NoticeBanner } from './NoticeBanner';
 import Sidebar from './Sidebar';
-import { useDispatch, useSelector } from 'react-redux';
-import { selectAddressBookList, setAddressBookList } from 'reducer/addressBook';
-import FutureCompetition from 'components/FutureCompetitionModal';
-import { useTronEventListener } from 'hooks/useTronLink';
 
 const App = () => {
   const [address, setOraiAddress] = useConfigReducer('address');
@@ -40,11 +38,9 @@ const App = () => {
   const [theme] = useConfigReducer('theme');
   const [walletByNetworks] = useWalletReducer('walletsByNetwork');
   const [, setCosmosAddress] = useConfigReducer('cosmosAddress');
-  const [bannerTime] = useConfigReducer('bannerTime');
   const mobileMode = isMobile();
   const ethOwallet = window.eth_owallet;
 
-  const currentAddressBook = useSelector(selectAddressBookList);
   const dispatch = useDispatch();
 
   useTronEventListener();
@@ -146,49 +142,74 @@ const App = () => {
     };
   }, []);
 
-  const keplrHandler = async () => {
-    try {
-      let metamaskAddress, oraiAddress, tronAddress, btcAddress;
-
-      if (mobileMode) {
-        window.tronWebDapp = window.tronWeb;
-        window.tronLinkDapp = window.tronLink;
-        window.ethereumDapp = window.ethereum;
-        window.Keplr = new Keplr('owallet');
-        window.Metamask = new Metamask(window.tronWebDapp);
-      }
+  const polyfillForMobileMode = () => {
+    if (mobileMode) {
+      window.tronWebDapp = window.tronWeb;
+      window.tronLinkDapp = window.tronLink;
+      window.ethereumDapp = window.ethereum;
+      window.Keplr = new Keplr('owallet');
+      window.Metamask = new Metamask(window.tronWebDapp);
+    }
+  };
 
-      if (walletByNetworks.cosmos || mobileMode) {
-        oraiAddress = await window.Keplr.getKeplrAddr();
-        if (oraiAddress) {
-          const { listAddressCosmos } = await getListAddressCosmos(oraiAddress, walletByNetworks.cosmos);
-          setCosmosAddress(listAddressCosmos);
-          setOraiAddress(oraiAddress);
-        }
+  const handleAddressCosmos = async () => {
+    let oraiAddress;
+    if (walletByNetworks.cosmos || mobileMode) {
+      oraiAddress = await window.Keplr.getKeplrAddr();
+      if (oraiAddress) {
+        const { listAddressCosmos } = await getListAddressCosmos(oraiAddress, walletByNetworks.cosmos);
+        setCosmosAddress(listAddressCosmos);
+        setOraiAddress(oraiAddress);
       }
+    }
+    return oraiAddress;
+  };
 
-      if (walletByNetworks.evm === 'owallet' || mobileMode) {
-        if (window.ethereumDapp) {
-          if (mobileMode) await window.Metamask.switchNetwork(Networks.bsc);
-          metamaskAddress = await window.Metamask.getEthAddress();
-          if (metamaskAddress) setMetamaskAddress(metamaskAddress);
-        }
+  const handleAddressEvmOwallet = async () => {
+    let metamaskAddress;
+    if (walletByNetworks.evm === 'owallet' || mobileMode) {
+      if (window.ethereumDapp) {
+        if (mobileMode) await window.Metamask.switchNetwork(Networks.bsc);
+        metamaskAddress = await window.Metamask.getEthAddress();
+        if (metamaskAddress) setMetamaskAddress(metamaskAddress);
       }
-      if (walletByNetworks.bitcoin === 'owallet' || mobileMode) {
-        if (window.Bitcoin) {
-          btcAddress = await window.Bitcoin.getAddress();
-          if (btcAddress) setBtcAddress(btcAddress);
-        }
+    }
+    return metamaskAddress;
+  };
+
+  const handleAddressBtcOwallet = async () => {
+    let btcAddress;
+    if (walletByNetworks.bitcoin === 'owallet' || mobileMode) {
+      if (window.Bitcoin) {
+        btcAddress = await window.Bitcoin.getAddress();
+        if (btcAddress) setBtcAddress(btcAddress);
       }
-      if (walletByNetworks.tron === 'owallet' || mobileMode) {
-        if (window.tronWebDapp && window.tronLinkDapp) {
-          const res: interfaceRequestTron = await window.tronLinkDapp.request({
-            method: 'tron_requestAccounts'
-          });
-          tronAddress = res?.base58;
-          if (tronAddress) setTronAddress(tronAddress);
-        }
+    }
+    return btcAddress;
+  };
+
+  const handleAddressTronOwallet = async () => {
+    let tronAddress;
+
+    if (walletByNetworks.tron === 'owallet' || mobileMode) {
+      if (window.tronWebDapp && window.tronLinkDapp) {
+        const res: interfaceRequestTron = await window.tronLinkDapp.request({
+          method: 'tron_requestAccounts'
+        });
+        tronAddress = res?.base58;
+        if (tronAddress) setTronAddress(tronAddress);
       }
+    }
+    return tronAddress;
+  };
+
+  const keplrHandler = async () => {
+    try {
+      polyfillForMobileMode();
+      const oraiAddress = await handleAddressCosmos();
+      const metamaskAddress = await handleAddressEvmOwallet();
+      const btcAddress = await handleAddressBtcOwallet();
+      const tronAddress = await handleAddressTronOwallet();
 
       loadTokenAmounts({
         oraiAddress,
diff --git a/src/layouts/Menu.module.scss b/src/layouts/Menu.module.scss
index f2466d7a4..c3744034f 100644
--- a/src/layouts/Menu.module.scss
+++ b/src/layouts/Menu.module.scss
@@ -201,9 +201,6 @@
     width: 1px;
     height: 40px;
 
-    // @include medium-desktop {
-    //   display: none;
-    // }
   }
 
   .menu_list_right {
diff --git a/src/layouts/Menu.tsx b/src/layouts/Menu.tsx
index ad8cb029a..04d9e6fb9 100644
--- a/src/layouts/Menu.tsx
+++ b/src/layouts/Menu.tsx
@@ -97,7 +97,7 @@ const Menu: React.FC = () => {
           {
             [styles.active]:
               !otherActive &&
-              ((link && link.includes(to) && link?.length === to?.length) || (link === '/' && to === '/universalswap'))
+              ((link?.includes(to) && link?.length === to?.length) || (link === '/' && to === '/universalswap'))
           },
           styles[theme],
           styles.spin
diff --git a/src/layouts/Sidebar.module.scss b/src/layouts/Sidebar.module.scss
index 0f266e3d8..bdb0fbdb9 100644
--- a/src/layouts/Sidebar.module.scss
+++ b/src/layouts/Sidebar.module.scss
@@ -12,7 +12,6 @@
   position: fixed;
   top: $menu-height;
   bottom: 0;
-
   overflow-y: auto;
 
   @include mobile {
@@ -30,9 +29,6 @@
   @include theme() {
     background-color: theme-get('neutral-surface-bg-section');
   }
-
-  .luckyDraw {
-  }
 }
 
 .menu_items {
@@ -80,6 +76,7 @@
     font-size: 14px;
     line-height: 100%;
     margin-left: 16px;
+
     @include theme() {
       color: theme-get('neutral-text-title');
     }
@@ -88,10 +85,11 @@
       height: 100%;
       width: 100%;
 
-      & > div {
+      &>div {
         height: 40px;
         width: 40px;
       }
+
       svg {
         path {
           stroke: unset !important;
@@ -127,4 +125,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/layouts/Sidebar.tsx b/src/layouts/Sidebar.tsx
index 7f22a2952..7dc7763fc 100644
--- a/src/layouts/Sidebar.tsx
+++ b/src/layouts/Sidebar.tsx
@@ -1,25 +1,24 @@
+import { ReactComponent as OraidexBetaIcon } from 'assets/icons/ic_beta.svg';
 import { ReactComponent as BridgeIcon } from 'assets/icons/ic_bridge.svg';
-import { ReactComponent as CohavestIcon } from 'assets/icons/ic_cohavest.svg';
 import { ReactComponent as BtcDashboardIcon } from 'assets/icons/ic_btc_dashboard.svg';
+import { ReactComponent as CohavestIcon } from 'assets/icons/ic_cohavest.svg';
 import { ReactComponent as PoolIcon } from 'assets/icons/ic_pools.svg';
-import { ReactComponent as PoolV3Icon } from 'assets/icons/pool-v3.svg';
 import { ReactComponent as StakingIcon } from 'assets/icons/ic_staking.svg';
 import { ReactComponent as UniversalSwapIcon } from 'assets/icons/ic_universalswap.svg';
-import { ReactComponent as OraidexBetaIcon } from 'assets/icons/ic_beta.svg';
 import { ReactComponent as LogoDownloadOwalletIcon } from 'assets/icons/logo_download.svg';
 import { ReactComponent as DownloadOwalletIcon } from 'assets/icons/logo_owallet_gateway.svg';
 import { ReactComponent as DownloadOwalletIconDark } from 'assets/icons/logo_owallet_gateway_dark.svg';
+import { ReactComponent as PoolV3Icon } from 'assets/icons/pool-v3.svg';
+import PoolV3Lottie from 'assets/lottie/poolv3-beta.json';
 import classNames from 'classnames';
 import ModalDownloadOwallet from 'components/Modals/ModalDownloadOwallet/ModalDownloadOwallet';
 import useTheme from 'hooks/useTheme';
+import Lottie from 'lottie-react';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import styles from './Sidebar.module.scss';
-import LuckyDraw from 'components/LuckyDraw';
-import PoolV3Lottie from 'assets/lottie/poolv3-beta.json';
-import Lottie from 'lottie-react';
 
-const Sidebar: React.FC<{}> = React.memo((props) => {
+const Sidebar: React.FC<{}> = React.memo(() => {
   const location = useLocation();
   const [link, setLink] = useState('');
   const theme = useTheme();
@@ -58,7 +57,7 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
           styles.menu_item,
           {
             [styles.active]:
-              (link && link.includes(to) && link?.length === to?.length) || (link === '/' && to === '/universalswap')
+              (link.includes(to) && link?.length === to?.length) || (link === '/' && to === '/universalswap')
           },
           styles[theme]
         )}
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index decc76ff6..2dcbce5ff 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -3,7 +3,6 @@
 @import 'src/styles/variables';
 @import 'src/styles/reboot';
 @import 'src/styles/utils';
-@import 'src/styles/mixins';
 
 html {
   background-color: $primary-background-other;
@@ -43,4 +42,4 @@ html {
       margin-top: 50px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/libs/bitcoin.ts b/src/libs/bitcoin.ts
index d25825adf..6fa807a44 100644
--- a/src/libs/bitcoin.ts
+++ b/src/libs/bitcoin.ts
@@ -24,8 +24,10 @@ export interface IBitcoin {
 }
 
 export default class Bitcoin {
-  constructor() {}
-  disconnect() {}
+  disconnect() {
+    // not implemented
+  }
+
   async getBitcoinKey(chainId?: string): Promise<Key | undefined> {
     try {
       chainId = chainId ?? network.chainId;
diff --git a/src/libs/cosmjs.ts b/src/libs/cosmjs.ts
index 97a71fc48..01df182c8 100644
--- a/src/libs/cosmjs.ts
+++ b/src/libs/cosmjs.ts
@@ -43,12 +43,14 @@ const getCosmWasmClient = async (
 
 export const connectWithSigner = async (rpc: string, signer: OfflineSigner, clientType: clientType, options?: any) => {
   switch (clientType) {
-    case 'cosmwasm':
+    case 'cosmwasm': {
       const { client } = await getCosmWasmClient({ signer, rpc }, options);
       return client;
-    case 'injective':
+    }
+    case 'injective': {
       const tmClient = await Tendermint37Client.connect(rpc);
       return Stargate.InjectiveSigningStargateClient.createWithSigner(tmClient as any, signer, options);
+    }
   }
 };
 
@@ -61,7 +63,7 @@ class CosmJs {
     walletAddr: string;
     address: string;
     handleMsg: cosmwasm.ExecuteInstruction;
-    funds?: readonly Coin[] | undefined;
+    funds?: readonly Coin[];
     gasAmount: Coin;
     gasLimits?: { exec: number };
     memo?: string;
diff --git a/src/libs/keplr.ts b/src/libs/keplr.ts
index 29903c704..93dcef76f 100644
--- a/src/libs/keplr.ts
+++ b/src/libs/keplr.ts
@@ -3,8 +3,7 @@ import { ChainInfo, FeeCurrency, Keplr as keplr, Key } from '@keplr-wallet/types
 import { CosmosChainId, CosmosWallet, NetworkChainId, TokenItemType, WalletType } from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import { displayToast, TToastType } from 'components/Toasts/Toast';
-import { cosmosTokens } from 'config/bridgeTokens';
-import { OraiBTCBridgeNetwork, chainInfos } from 'config/chainInfos';
+import { chainInfos, OraiBTCBridgeNetwork } from 'config/chainInfos';
 import { network } from 'config/networks';
 import { getAddress, getAddressByEIP191 } from 'helper';
 import { EIP_EIP_STORAGE_KEY_ACC, MetamaskOfflineSigner } from './eip191';
@@ -71,14 +70,6 @@ export default class Keplr extends CosmosWallet {
       const keplrChainInfos = await this.keplr.getChainInfosWithoutEndpoints();
       const keplrChain = keplrChainInfos.find((keplrChain) => keplrChain.chainId === chainInfo.chainId);
       if (!keplrChain) return;
-
-      const findFeeCurrencies = keplrChain.feeCurrencies.find((fee) => fee.gasPriceStep);
-      // check to update newest chain info
-      if (keplrChain.bip44.coinType !== chainInfo.bip44.coinType || !keplrChain.feeCurrencies?.[0]?.gasPriceStep) {
-        // displayToast(TToastType.TX_INFO, {
-        //   message: `${keplrChain.chainName} has Keplr cointype ${keplrChain.bip44.coinType}, while the chain info config cointype is ${chainInfo.bip44.coinType}. Please reach out to the developers regarding this problem!`
-        // });
-      }
     }
   }
 
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 7333e3321..c31c8feb8 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -1,83 +1,83 @@
 import {
-    COSMOS_CHAIN_ID_COMMON,
-    NetworkChainId,
-    TokenItemType,
-    getSubAmountDetails,
-    toAmount,
-    toDisplay
+  COSMOS_CHAIN_ID_COMMON,
+  NetworkChainId,
+  TokenItemType,
+  getSubAmountDetails,
+  toAmount,
+  toDisplay
 } from '@oraichain/oraidex-common';
-import {isMobile} from '@walletconnect/browser-utils';
+import { isMobile } from '@walletconnect/browser-utils';
 import WalletConnectProvider from '@walletconnect/ethereum-provider';
 import bech32 from 'bech32';
-import {cosmosTokens, tokenMap} from 'config/bridgeTokens';
-import {chainInfos} from 'config/chainInfos';
-import {network} from 'config/networks';
-import {CoinGeckoPrices} from 'hooks/useCoingecko';
-import {getCosmWasmClient} from 'libs/cosmjs';
+import { cosmosTokens, tokenMap } from 'config/bridgeTokens';
+import { chainInfos } from 'config/chainInfos';
+import { network } from 'config/networks';
+import { CoinGeckoPrices } from 'hooks/useCoingecko';
+import { getCosmWasmClient } from 'libs/cosmjs';
 
 export const checkRegex = (str: string, regex?: RegExp) => {
-    const re = regex ?? /^[a-zA-Z\-]{3,12}$/;
-    return re.test(str);
+  const re = regex ?? /^[a-zA-Z\-]{3,12}$/;
+  return re.test(str);
 };
 
 export const validateAddressCosmos = (bech32Address: string, prefix?: string): boolean => {
-    try {
-        const {prefix: decodedPrefix} = bech32.decode(bech32Address);
-        return prefix && prefix === decodedPrefix;
-    } catch (error) {
-        return false;
-    }
+  try {
+    const { prefix: decodedPrefix } = bech32.decode(bech32Address);
+    return prefix && prefix === decodedPrefix;
+  } catch (error) {
+    return false;
+  }
 };
 
 export const getUsd = (
-    amount: string | bigint,
-    tokenInfo: TokenItemType,
-    prices: CoinGeckoPrices<string>,
-    pricesAmount?: number
+  amount: string | bigint,
+  tokenInfo: TokenItemType,
+  prices: CoinGeckoPrices<string>,
+  pricesAmount?: number
 ): number => {
-    if (!tokenInfo || !tokenInfo.decimals) return 0;
-    if (pricesAmount) {
-        return toDisplay(amount, tokenInfo.decimals) * pricesAmount;
-    }
-    return toDisplay(amount, tokenInfo.decimals) * (prices[tokenInfo.coinGeckoId] ?? 0);
+  if (!tokenInfo?.decimals) return 0;
+  if (pricesAmount) {
+    return toDisplay(amount, tokenInfo.decimals) * pricesAmount;
+  }
+  return toDisplay(amount, tokenInfo.decimals) * (prices[tokenInfo.coinGeckoId] ?? 0);
 };
 
 export const getTotalUsd = (amounts: AmountDetails, prices: CoinGeckoPrices<string>): number => {
-    let usd = 0;
-    for (const denom in amounts) {
-        const tokenInfo = tokenMap[denom];
-        if (!tokenInfo) continue;
-        const amount = toDisplay(amounts[denom], tokenInfo.decimals);
-        usd += amount * (prices[tokenInfo.coinGeckoId] ?? 0);
-    }
-    return usd;
+  let usd = 0;
+  for (const denom in amounts) {
+    const tokenInfo = tokenMap[denom];
+    if (!tokenInfo) continue;
+    const amount = toDisplay(amounts[denom], tokenInfo.decimals);
+    usd += amount * (prices[tokenInfo.coinGeckoId] ?? 0);
+  }
+  return usd;
 };
 
 export const toSubDisplay = (amounts: AmountDetails, tokenInfo: TokenItemType): number => {
-    const subAmounts = getSubAmountDetails(amounts, tokenInfo);
-    return toSumDisplay(subAmounts);
+  const subAmounts = getSubAmountDetails(amounts, tokenInfo);
+  return toSumDisplay(subAmounts);
 };
 
 export const toTotalDisplay = (amounts: AmountDetails, tokenInfo: TokenItemType): number => {
-    return toDisplay(amounts[tokenInfo.denom], tokenInfo.decimals) + toSubDisplay(amounts, tokenInfo);
+  return toDisplay(amounts[tokenInfo.denom], tokenInfo.decimals) + toSubDisplay(amounts, tokenInfo);
 };
 
 export const toSubAmount = (amounts: AmountDetails, tokenInfo: TokenItemType): bigint => {
-    const displayAmount = toSubDisplay(amounts, tokenInfo);
-    return toAmount(displayAmount, tokenInfo.decimals);
+  const displayAmount = toSubDisplay(amounts, tokenInfo);
+  return toAmount(displayAmount, tokenInfo.decimals);
 };
 
 export const toSumDisplay = (amounts: AmountDetails): number => {
-    // get all native balances that are from oraibridge (ibc/...)
-    let amount = 0;
+  // get all native balances that are from oraibridge (ibc/...)
+  let amount = 0;
 
-    for (const denom in amounts) {
-        // update later
-        const balance = amounts[denom];
-        if (!balance) continue;
-        amount += toDisplay(balance, tokenMap[denom].decimals);
-    }
-    return amount;
+  for (const denom in amounts) {
+    // update later
+    const balance = amounts[denom];
+    if (!balance) continue;
+    amount += toDisplay(balance, tokenMap[denom].decimals);
+  }
+  return amount;
 };
 
 /**
@@ -88,173 +88,173 @@ export const toSumDisplay = (amounts: AmountDetails): number => {
  * @returns The shortened string, or '-' if the input string is null or undefined.
  */
 export const reduceString = (str: string, from: number, end: number) => {
-    return str ? str.substring(0, from) + '...' + str.substring(str.length - end) : '-';
+  return str ? str.substring(0, from) + '...' + str.substring(str.length - end) : '-';
 };
 
 export const formateNumberDecimals = (price, decimals = 2) => {
-    return new Intl.NumberFormat('en-US', {
-        currency: 'USD',
-        maximumFractionDigits: decimals
-    }).format(price);
+  return new Intl.NumberFormat('en-US', {
+    currency: 'USD',
+    maximumFractionDigits: decimals
+  }).format(price);
 };
 
 export const detectBestDecimalsDisplay = (price, minDecimal = 2, minPrice = 1, maxDecimal) => {
-    if (price && price > minPrice) return minDecimal;
-    let decimals = minDecimal;
-    if (price !== undefined) {
-        // Find out the number of leading floating zeros via regex
-        const priceSplit = price?.toString().split('.');
-        if (priceSplit?.length === 2 && priceSplit[0] === '0') {
-            const leadingZeros = priceSplit[1].match(/^0+/);
-            decimals += leadingZeros ? leadingZeros[0]?.length + 1 : 1;
-        }
+  if (price && price > minPrice) return minDecimal;
+  let decimals = minDecimal;
+  if (price !== undefined) {
+    // Find out the number of leading floating zeros via regex
+    const priceSplit = price?.toString().split('.');
+    if (priceSplit?.length === 2 && priceSplit[0] === '0') {
+      const leadingZeros = priceSplit[1].match(/^0+/);
+      decimals += leadingZeros ? leadingZeros[0]?.length + 1 : 1;
     }
-    if (maxDecimal && decimals > maxDecimal) decimals = maxDecimal;
-    return decimals;
+  }
+  if (maxDecimal && decimals > maxDecimal) decimals = maxDecimal;
+  return decimals;
 };
 
 interface FormatNumberDecimal {
-    price: number;
-    maxDecimal?: number;
-    unit?: string;
-    minDecimal?: number;
-    minPrice?: number;
-    unitPosition?: 'prefix' | 'suffix';
+  price: number;
+  maxDecimal?: number;
+  unit?: string;
+  minDecimal?: number;
+  minPrice?: number;
+  unitPosition?: 'prefix' | 'suffix';
 }
 
 export const formateNumberDecimalsAuto = ({
-                                              price,
-                                              maxDecimal,
-                                              unit,
-                                              minDecimal,
-                                              minPrice,
-                                              unitPosition
-                                          }: FormatNumberDecimal) => {
-    minDecimal = minDecimal ? minDecimal : 2;
-    minPrice = minPrice ? minPrice : 1;
-    unit = unit ? unit : '';
-    const priceFormat = formateNumberDecimals(price, detectBestDecimalsDisplay(price, minDecimal, minPrice, maxDecimal));
-    const res = unitPosition === 'prefix' ? unit + priceFormat : priceFormat + unit;
-    return res;
+  price,
+  maxDecimal,
+  unit,
+  minDecimal,
+  minPrice,
+  unitPosition
+}: FormatNumberDecimal) => {
+  minDecimal = minDecimal ? minDecimal : 2;
+  minPrice = minPrice ? minPrice : 1;
+  unit = unit ? unit : '';
+  const priceFormat = formateNumberDecimals(price, detectBestDecimalsDisplay(price, minDecimal, minPrice, maxDecimal));
+  const res = unitPosition === 'prefix' ? unit + priceFormat : priceFormat + unit;
+  return res;
 };
 
 export const buildWebsocketSendMessage = (message: string, id = 1) => {
-    return {
-        jsonrpc: '2.0',
-        method: 'subscribe',
-        params: [`tm.event='Tx' AND ${message}`],
-        id
-    };
+  return {
+    jsonrpc: '2.0',
+    method: 'subscribe',
+    params: [`tm.event='Tx' AND ${message}`],
+    id
+  };
 };
 
 export const buildUnsubscribeMessage = () => {
-    return {
-        jsonrpc: '2.0',
-        method: 'unsubscribe_all',
-        params: [],
-        id: 99
-    };
+  return {
+    jsonrpc: '2.0',
+    method: 'unsubscribe_all',
+    params: [],
+    id: 99
+  };
 };
 
 export const processWsResponseMsg = (message: any): string => {
-    try {
-        if (message === null || message.result === null) {
-            return null;
+  try {
+    if (message === null || message.result === null) {
+      return null;
+    }
+    const { result } = message;
+    if (
+      result && // 👈 null and undefined check
+      (Object.keys(result).length !== 0 || result.constructor !== Object)
+    ) {
+      if (!result.events) return null;
+      const events = result.events;
+      const packets = events['recv_packet.packet_data'];
+      if (!packets) return null;
+      let tokens = '';
+      for (let packetRaw of packets) {
+        const packet = JSON.parse(packetRaw);
+        // we look for the true denom information with decimals to process
+        // format: {"amount":"100000000000000","denom":"oraib0xA325Ad6D9c92B55A3Fc5aD7e412B1518F96441C0","receiver":"orai...","sender":"oraib..."}
+        const receivedToken = cosmosTokens.find((token) => token.denom === packet.denom);
+        //TODO: Not show socket received amount with usat token;
+        if (receivedToken.denom === 'usat') {
+          return null;
         }
-        const {result} = message;
-        if (
-            result && // 👈 null and undefined check
-            (Object.keys(result).length !== 0 || result.constructor !== Object)
-        ) {
-            if (!result.events) return null;
-            const events = result.events;
-            const packets = events['recv_packet.packet_data'];
-            if (!packets) return null;
-            let tokens = '';
-            for (let packetRaw of packets) {
-                const packet = JSON.parse(packetRaw);
-                // we look for the true denom information with decimals to process
-                // format: {"amount":"100000000000000","denom":"oraib0xA325Ad6D9c92B55A3Fc5aD7e412B1518F96441C0","receiver":"orai...","sender":"oraib..."}
-                const receivedToken = cosmosTokens.find((token) => token.denom === packet.denom);
-                //TODO: Not show socket received amount with usat token;
-                if (receivedToken.denom === 'usat') {
-                    return null;
-                }
-                const displayAmount = toDisplay(packet?.amount, receivedToken?.decimals);
+        const displayAmount = toDisplay(packet?.amount, receivedToken?.decimals);
 
-                tokens = tokens.concat(`${displayAmount} ${receivedToken?.name}, `);
-            }
-            return tokens.substring(0, tokens.length - 2); // remove , due to concat
-        }
-        return null;
-    } catch (error) {
-        console.error({errorProcessWsResponseMsg: error});
+        tokens = tokens.concat(`${displayAmount} ${receivedToken?.name}, `);
+      }
+      return tokens.substring(0, tokens.length - 2); // remove , due to concat
     }
+    return null;
+  } catch (error) {
+    console.error({ errorProcessWsResponseMsg: error });
+  }
 };
 
 export const generateError = (message: string) => {
-    return {ex: {message}};
+  return { ex: { message } };
 };
 
 export const initEthereum = async () => {
-    // support only https
-    if (isMobile() && !window.ethereumDapp && window.location.protocol === 'https:') {
-        const bscChain = chainInfos.find((c) => c.chainId === '0x38');
-        const provider = new WalletConnectProvider({
-            chainId: Networks.bsc,
-            storageId: 'metamask',
-            qrcode: true,
-            rpc: {[Networks.bsc]: bscChain.rpc},
-            qrcodeModalOptions: {
-                mobileLinks: ['metamask']
-            }
-        });
-        await provider.enable();
-        (window.ethereumDapp as any) = provider;
-    }
+  // support only https
+  if (isMobile() && !window.ethereumDapp && window.location.protocol === 'https:') {
+    const bscChain = chainInfos.find((c) => c.chainId === '0x38');
+    const provider = new WalletConnectProvider({
+      chainId: Networks.bsc,
+      storageId: 'metamask',
+      qrcode: true,
+      rpc: { [Networks.bsc]: bscChain.rpc },
+      qrcodeModalOptions: {
+        mobileLinks: ['metamask']
+      }
+    });
+    await provider.enable();
+    (window.ethereumDapp as any) = provider;
+  }
 };
 
 export const initClient = async () => {
-    try {
-        // suggest our chain
-        const arrChainIds = [
-            network.chainId,
-            COSMOS_CHAIN_ID_COMMON.ORAIBRIDGE_CHAIN_ID,
-            COSMOS_CHAIN_ID_COMMON.INJECTVE_CHAIN_ID
-        ] as NetworkChainId[];
-        for (const chainId of arrChainIds) {
-            await window.Keplr.suggestChain(chainId);
-        }
-        const {client} = await getCosmWasmClient({chainId: network.chainId});
-        window.client = client;
-    } catch (ex) {
-        console.log({errorInitClient: ex});
-        throw new Error(ex?.message ?? 'Error when suggestChain');
+  try {
+    // suggest our chain
+    const arrChainIds = [
+      network.chainId,
+      COSMOS_CHAIN_ID_COMMON.ORAIBRIDGE_CHAIN_ID,
+      COSMOS_CHAIN_ID_COMMON.INJECTVE_CHAIN_ID
+    ] as NetworkChainId[];
+    for (const chainId of arrChainIds) {
+      await window.Keplr.suggestChain(chainId);
     }
+    const { client } = await getCosmWasmClient({ chainId: network.chainId });
+    window.client = client;
+  } catch (ex) {
+    console.log({ errorInitClient: ex });
+    throw new Error(ex?.message ?? 'Error when suggestChain');
+  }
 };
 
 export const timeSince = (date: number): string => {
-    const seconds = Math.floor((Date.now() - date) / 1000);
-    let interval = seconds / 31536000;
+  const seconds = Math.floor((Date.now() - date) / 1000);
+  let interval = seconds / 31536000;
 
-    if (interval > 1) {
-        return Math.floor(interval) + ' years';
-    }
-    interval = seconds / 2592000;
-    if (interval > 1) {
-        return Math.floor(interval) + ' months';
-    }
-    interval = seconds / 86400;
-    if (interval > 1) {
-        return Math.floor(interval) + ' days';
-    }
-    interval = seconds / 3600;
-    if (interval > 1) {
-        return Math.floor(interval) + ' hours';
-    }
-    interval = seconds / 60;
-    if (interval > 1) {
-        return Math.floor(interval) + ' minutes';
-    }
-    return Math.floor(seconds) + ' seconds';
+  if (interval > 1) {
+    return Math.floor(interval) + ' years';
+  }
+  interval = seconds / 2592000;
+  if (interval > 1) {
+    return Math.floor(interval) + ' months';
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return Math.floor(interval) + ' days';
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return Math.floor(interval) + ' hours';
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return Math.floor(interval) + ' minutes';
+  }
+  return Math.floor(seconds) + ' seconds';
 };
diff --git a/src/pages/Balance/TransferConvertToken/index.module.scss b/src/pages/Balance/TransferConvertToken/index.module.scss
index ccc337598..bd40e2c47 100644
--- a/src/pages/Balance/TransferConvertToken/index.module.scss
+++ b/src/pages/Balance/TransferConvertToken/index.module.scss
@@ -6,7 +6,6 @@
   width: 100%;
   margin-top: 20px;
 
-  // @include flex(space-between);
   .tfBtn {
     @include theme() {
       background-color: theme-get('bg-btn-primary');
@@ -110,8 +109,6 @@
     margin-top: 10px;
   }
 
-  // padding-left: 24px;
-  // padding-left: 12px;
   .balanceBtn {
     cursor: pointer;
     background: #191b21;
@@ -177,11 +174,6 @@
     .amount {
       height: 48px;
       font-size: 16px;
-
-      @include mobile {
-        // width: 106px;
-      }
-
       border-radius: 8px;
     }
 
diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
index 7708327ba..00a86a941 100644
--- a/src/pages/Balance/TransferConvertToken/index.tsx
+++ b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -1,15 +1,10 @@
 import {
-  ChainIdEnum,
-  CustomChainInfo,
-  GAS_ESTIMATION_BRIDGE_DEFAULT,
+  BigDecimal,
+  // flattenTokens
   NetworkChainId,
-  ORAI,
   toDisplay,
-  TokenItemType,
-  BigDecimal
-  // flattenTokens
+  TokenItemType
 } from '@oraichain/oraidex-common';
-import { isMobile } from '@walletconnect/browser-utils';
 import loadingGif from 'assets/gif/loading.gif';
 import { ReactComponent as ArrowDownIcon } from 'assets/icons/arrow.svg';
 import { ReactComponent as ArrowDownIconLight } from 'assets/icons/arrow_light.svg';
@@ -17,23 +12,23 @@ import { ReactComponent as SuccessIcon } from 'assets/icons/toast_success.svg';
 import classNames from 'classnames';
 import Input from 'components/Input';
 import Loader from 'components/Loader';
+import PowerByOBridge from 'components/PowerByOBridge';
 import { displayToast, TToastType } from 'components/Toasts/Toast';
 import TokenBalance from 'components/TokenBalance';
-import { cosmosTokens, tokenMap, flattenTokens } from 'config/bridgeTokens';
+import { cosmosTokens, flattenTokens, tokenMap } from 'config/bridgeTokens';
 import { btcChains, evmChains } from 'config/chainInfos';
 import copy from 'copy-to-clipboard';
-import { feeEstimate, filterChainBridge, getAddressTransfer, networks, subNumber } from 'helper';
+import { filterChainBridge, getAddressTransfer, networks } from 'helper';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useTokenFee, { useRelayerFeeToken } from 'hooks/useTokenFee';
+import useWalletReducer from 'hooks/useWalletReducer';
 import { reduceString } from 'libs/utils';
 import { AMOUNT_BALANCE_ENTRIES } from 'pages/UniversalSwap/helpers';
 import { FC, useEffect, useState } from 'react';
 import NumberFormat from 'react-number-format';
-import styles from './index.module.scss';
 import { calcMaxAmount, useDepositFeesBitcoin, useGetWithdrawlFeesBitcoin } from '../helpers';
-import useWalletReducer from 'hooks/useWalletReducer';
-import PowerByOBridge from 'components/PowerByOBridge';
+import styles from './index.module.scss';
 
 interface TransferConvertProps {
   token: TokenItemType;
@@ -131,11 +126,13 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
   const toNetwork = bridgeNetworks.find((n) => n.chainId === toNetworkChainId);
   const to = flattenTokens.find((t) => t.coinGeckoId === token.coinGeckoId && t.chainId === toNetworkChainId);
 
-  let remoteTokenDenomFrom;
-  let remoteTokenDenomTo;
+  const getRemoteTokenDenom = (token: TokenItemType) => {
+    if (!token) return null;
+    return token.contractAddress ? token.prefix + token.contractAddress : token.denom;
+  };
 
-  if (token) remoteTokenDenomFrom = token.contractAddress ? token.prefix + token.contractAddress : token.denom;
-  if (to) remoteTokenDenomTo = to.contractAddress ? to.prefix + to.contractAddress : to.denom;
+  const remoteTokenDenomFrom = getRemoteTokenDenom(token);
+  const remoteTokenDenomTo = getRemoteTokenDenom(to);
 
   // token fee
   const fromTokenFee = useTokenFee(remoteTokenDenomFrom);
@@ -143,12 +140,6 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
 
   // bridge fee & relayer fee
   const bridgeFee = fromTokenFee + toTokenFee;
-  console.log({
-    token,
-    to,
-    toNetwork,
-    toNetworkChainId
-  });
 
   const isFromOraichainToBitcoin = token.chainId === 'Oraichain' && toNetworkChainId === ('bitcoin' as any);
   const isFromBitcoinToOraichain = token.chainId === ('bitcoin' as string) && toNetworkChainId === 'Oraichain';
diff --git a/src/pages/Balance/helpers.ts b/src/pages/Balance/helpers.ts
index 526e08e99..60b8ec6e5 100644
--- a/src/pages/Balance/helpers.ts
+++ b/src/pages/Balance/helpers.ts
@@ -92,10 +92,10 @@ export const transferIBCKwt = async (
   const toAddress = await window.Keplr.getKeplrAddr(toToken.chainId);
   if (!fromAddress || !toAddress) throw generateError('Please login keplr!');
 
-  var amount = coin(toAmount(transferAmount, fromToken.decimals).toString(), fromToken.denom);
+  const amount = coin(toAmount(transferAmount, fromToken.decimals).toString(), fromToken.denom);
 
   const ibcInfo: IBCInfo = ibcInfos[fromToken.chainId][toToken.chainId];
-  var customMessages: any[];
+  let customMessages: any[];
 
   // check if from token has erc20 map then we need to convert back to bep20 / erc20 first. TODO: need to filter if convert to ERC20 or BEP20
   if (fromToken.evmDenoms) {
diff --git a/src/pages/Balance/index.tsx b/src/pages/Balance/index.tsx
index cd5c0a1df..f93353b3d 100644
--- a/src/pages/Balance/index.tsx
+++ b/src/pages/Balance/index.tsx
@@ -32,6 +32,7 @@ import { tokens } from 'config/bridgeTokens';
 import { chainInfos } from 'config/chainInfos';
 import { NomicContext } from 'context/nomic-context';
 import {
+  assert,
   EVM_CHAIN_ID,
   getSpecialCoingecko,
   getTransactionUrl,
@@ -83,7 +84,7 @@ interface BalanceProps {}
 const Balance: React.FC<BalanceProps> = () => {
   // hook
   const [searchParams] = useSearchParams();
-  let tokenUrl = searchParams.get('token');
+  const tokenUrl = searchParams.get('token');
   const navigate = useNavigate();
   const amounts = useSelector((state: RootState) => state.token.amounts);
   const nomic = useContext(NomicContext);
@@ -102,7 +103,7 @@ const Balance: React.FC<BalanceProps> = () => {
   const [metamaskAddress] = useConfigReducer('metamaskAddress');
   const [filterNetworkUI, setFilterNetworkUI] = useConfigReducer('filterNetwork');
   const [tronAddress] = useConfigReducer('tronAddress');
-  const [btcAddress, setBtcAddress] = useConfigReducer('btcAddress');
+  const [btcAddress] = useConfigReducer('btcAddress');
   const [addressRecovery, setAddressRecovery] = useState('');
 
   const ref = useRef(null);
@@ -353,6 +354,17 @@ const Balance: React.FC<BalanceProps> = () => {
     }
   };
 
+  const checkTransferBtc = async (fromAmount: number) => {
+    const isBTCtoOraichain = from.chainId === bitcoinChainId && to.chainId === 'Oraichain';
+    const isOraichainToBTC = from.chainId === 'Oraichain' && to.chainId === bitcoinChainId;
+    if (isBTCtoOraichain || isOraichainToBTC)
+      return handleTransferBTC({
+        isBTCToOraichain: isBTCtoOraichain,
+        fromToken: from,
+        transferAmount: fromAmount
+      });
+  };
+
   const handleTransferBTC = async ({ isBTCToOraichain, fromToken, transferAmount }) => {
     const btcAddr = await window.Bitcoin.getAddress();
     if (!btcAddr) throw Error('Not found your bitcoin address!');
@@ -363,100 +375,86 @@ const Balance: React.FC<BalanceProps> = () => {
     return handleTransferOraichainToBTC(fromToken, transferAmount, btcAddr);
   };
 
+  const checkTransferKwt = async (fromAmount: number) => {
+    let result: DeliverTxResponse | string | any;
+    // convert erc20 to native ==> ORAICHAIN
+    if (from.contractAddress) result = await convertTransferIBCErc20Kwt(from, to, fromAmount);
+    else result = await transferIBCKwt(from, to, fromAmount, amounts);
+    processTxResult(from.rpc, result, `${KWT_SCAN}/tx/${result.transactionHash}`);
+  };
+
+  const getLatestEvmAddress = async (toNetworkChainId: NetworkChainId) => {
+    const isFromEvmNotTron = from.chainId !== '0x2b6653dc' && EVM_CHAIN_ID.includes(from.chainId);
+    const isToNetworkEvmNotTron = toNetworkChainId !== '0x2b6653dc' && EVM_CHAIN_ID.includes(toNetworkChainId);
+    // switch network for metamask, exclude TRON
+    if (isFromEvmNotTron) {
+      await window.Metamask.switchNetwork(from.chainId);
+    }
+
+    let latestEvmAddress = metamaskAddress;
+    // need to get latest tron address if cached
+    if (isFromEvmNotTron || isToNetworkEvmNotTron) {
+      latestEvmAddress = await window.Metamask.getEthAddress();
+    }
+    return latestEvmAddress;
+  };
+
   const onClickTransfer = async (
     fromAmount: number,
     from: TokenItemType,
     to: TokenItemType,
     toNetworkChainId?: NetworkChainId
   ) => {
-    await handleCheckWallet();
+    try {
+      await handleCheckWallet();
 
-    // await handleCheckChainEvmWallet(from.chainId);
-    // disable send amount < 0
-    if (!from || !to) {
-      displayToast(TToastType.TX_FAILED, {
-        message: 'Please choose both from and to tokens'
-      });
-      return;
-    }
+      assert(from && to, 'Please choose both from and to tokens');
 
-    // get & check balance
-    const initFromBalance = amounts[from.denom];
+      // get & check balance
+      const initFromBalance = amounts[from.denom];
 
-    const subAmounts = getSubAmountDetails(amounts, from);
-    const subAmount = toAmount(toSumDisplay(subAmounts), from.decimals);
+      const subAmounts = getSubAmountDetails(amounts, from);
+      const subAmount = toAmount(toSumDisplay(subAmounts), from.decimals);
 
-    const fromBalance = from && initFromBalance ? subAmount + BigInt(initFromBalance) : BigInt(0);
+      const fromBalance = from && initFromBalance ? subAmount + BigInt(initFromBalance) : BigInt(0);
 
-    if (fromAmount <= 0 || toAmount(fromAmount, from.decimals) > fromBalance) {
-      displayToast(TToastType.TX_FAILED, {
-        message: 'Your balance is insufficient to make this transfer'
-      });
-      return;
-    }
+      const condition = fromAmount > 0 && toAmount(fromAmount, from.decimals) <= fromBalance;
+      assert(condition, 'Your balance is insufficient to make this transfer');
 
-    displayToast(TToastType.TX_BROADCASTING);
-    try {
+      displayToast(TToastType.TX_BROADCASTING);
       let result: DeliverTxResponse | string | any;
 
       // [(ERC20)KWT, (ERC20)MILKY] ==> ORAICHAIN
       if (from.chainId === 'kawaii_6886-1' && to.chainId === 'Oraichain') {
-        // convert erc20 to native ==> ORAICHAIN
-        if (from.contractAddress) result = await convertTransferIBCErc20Kwt(from, to, fromAmount);
-        else result = await transferIBCKwt(from, to, fromAmount, amounts);
-        processTxResult(from.rpc, result, `${KWT_SCAN}/tx/${result.transactionHash}`);
+        await checkTransferKwt(fromAmount);
         return;
       }
 
-      // TODO: hardcode check bitcoinTestnet need update later
       // [BTC Native] <==> ORAICHAIN
-      const isBTCtoOraichain = from.chainId === bitcoinChainId && to.chainId === 'Oraichain';
-      const isOraichainToBTC = from.chainId === 'Oraichain' && to.chainId === bitcoinChainId;
-      if (isBTCtoOraichain || isOraichainToBTC)
-        return handleTransferBTC({
-          isBTCToOraichain: isBTCtoOraichain,
-          fromToken: from,
-          transferAmount: fromAmount
-        });
+      await checkTransferBtc(fromAmount);
 
       let newToToken = to;
       if (toNetworkChainId) {
         // ORAICHAIN -> EVM (BSC/ETH/TRON) ( TO: TOKEN ORAIBRIDGE)
-        // newToToken = findToTokenOnOraiBridge(from.coinGeckoId, toNetworkChainId);
         newToToken = flattenTokens.find(
-          (flat) => flat.chainId == toNetworkChainId && flat.coinGeckoId === from.coinGeckoId
+          (flat) => flat.chainId === toNetworkChainId && flat.coinGeckoId === from.coinGeckoId
         );
-
-        // const isBridgeToCosmosNetwork = !EVM_CHAIN_ID.includes(toNetworkChainId);
-        // if (isBridgeToCosmosNetwork) {
-        //   newToToken = cosmosTokens.find((t) => t.chainId === toNetworkChainId && t.coinGeckoId === from.coinGeckoId);
-        // }
-        if (!newToToken) throw generateError('Cannot find newToToken token that matches from token to bridge!');
+        assert(newToToken, 'Cannot find newToToken token that matches from token to bridge!');
       }
 
-      if (newToToken.coinGeckoId !== from.coinGeckoId)
-        throw generateError(`From token ${from.coinGeckoId} is different from to token ${newToToken.coinGeckoId}`);
+      assert(
+        newToToken.coinGeckoId === from.coinGeckoId,
+        `From token ${from.coinGeckoId} is different from to token ${newToToken.coinGeckoId}`
+      );
 
-      // TODO: hardcode case Neutaro-1 & Noble-1
+      // hardcode case Neutaro-1 & Noble-1
       if (from.chainId === 'Neutaro-1') return await handleTransferIBC(from, newToToken, fromAmount);
+
       // remaining tokens, we override from & to of onClickTransfer on index.tsx of Balance based on the user's token destination choice
       // to is Oraibridge tokens
       // or other token that have same coingeckoId that show in at least 2 chain.
       const cosmosAddress = await handleCheckAddress(from.cosmosBased ? (from.chainId as CosmosChainId) : 'Oraichain');
-
-      const isFromEvmNotTron = from.chainId !== '0x2b6653dc' && EVM_CHAIN_ID.includes(from.chainId);
-      const isToNetworkEvmNotTron = toNetworkChainId !== '0x2b6653dc' && EVM_CHAIN_ID.includes(toNetworkChainId);
-      // switch network for metamask, exclude TRON
-      if (isFromEvmNotTron) {
-        await window.Metamask.switchNetwork(from.chainId);
-      }
-
-      let latestEvmAddress = metamaskAddress;
-      // TODO: need to get latest tron address if cached
-      if (isFromEvmNotTron || isToNetworkEvmNotTron) {
-        latestEvmAddress = await window.Metamask.getEthAddress();
-      }
-
+      const latestEvmAddress = await getLatestEvmAddress(toNetworkChainId);
       let amountsBalance = amounts;
       let simulateAmount = toAmount(fromAmount).toString();
 
@@ -624,9 +622,8 @@ const Balance: React.FC<BalanceProps> = () => {
                 const isOwallet =
                   walletByNetworks.cosmos &&
                   walletByNetworks.cosmos === 'owallet' &&
-                  window.owallet &&
                   //@ts-ignore
-                  window.owallet?.isOwallet;
+                  window?.owallet?.isOwallet;
 
                 const isBtcToken = t.chainId === bitcoinChainId && t?.coinGeckoId === 'bitcoin';
                 const TokenItemELement: React.FC<TokenItemProps> = isBtcToken ? TokenItemBtc : TokenItem;
diff --git a/src/pages/BitcoinDashboard/components/Checkpoint/Checkpoint.tsx b/src/pages/BitcoinDashboard/components/Checkpoint/Checkpoint.tsx
index 347f16a05..3d27dcb7c 100644
--- a/src/pages/BitcoinDashboard/components/Checkpoint/Checkpoint.tsx
+++ b/src/pages/BitcoinDashboard/components/Checkpoint/Checkpoint.tsx
@@ -1,6 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import styles from './Checkpoint.module.scss';
+import { toDisplay } from '@oraichain/oraidex-common';
+import { ReactComponent as TooltipIcon } from 'assets/icons/icon_tooltip.svg';
+import Search from 'components/SearchInput';
 import TokenBalance from 'components/TokenBalance';
+import useConfigReducer from 'hooks/useConfigReducer';
+import { useDebounce } from 'hooks/useDebounce';
+import useTheme from 'hooks/useTheme';
 import {
   useGetCheckpointData,
   useGetCheckpointFeeInfo,
@@ -8,14 +12,9 @@ import {
   useGetDepositFee,
   useGetWithdrawalFee
 } from 'pages/BitcoinDashboard/hooks';
-import useConfigReducer from 'hooks/useConfigReducer';
-import { toDisplay } from '@oraichain/oraidex-common';
-import Search from 'components/SearchInput';
-import useTheme from 'hooks/useTheme';
-import { useDebounce } from 'hooks/useDebounce';
+import React, { useEffect, useState } from 'react';
+import styles from './Checkpoint.module.scss';
 import { TransactionInput, TransactionOutput } from './Transactions';
-import { ReactComponent as TooltipIcon } from 'assets/icons/icon_tooltip.svg';
-import { isMobile } from '@walletconnect/browser-utils';
 
 const Checkpoint: React.FC<{}> = ({}) => {
   const theme = useTheme();
@@ -27,7 +26,6 @@ const Checkpoint: React.FC<{}> = ({}) => {
   const withdrawalFee = useGetWithdrawalFee(btcAddress, checkpointIndex);
   const checkpointData = useGetCheckpointData(checkpointIndex);
   const checkpointFeeInfo = useGetCheckpointFeeInfo();
-  const mobileMode = isMobile();
 
   useEffect(() => {
     (async () => {
diff --git a/src/pages/BitcoinDashboard/components/Checkpoint/Transactions/Transaction.module.scss b/src/pages/BitcoinDashboard/components/Checkpoint/Transactions/Transaction.module.scss
index 2dbdc2e3a..be16507d0 100644
--- a/src/pages/BitcoinDashboard/components/Checkpoint/Transactions/Transaction.module.scss
+++ b/src/pages/BitcoinDashboard/components/Checkpoint/Transactions/Transaction.module.scss
@@ -104,7 +104,6 @@
   &_list {
     display: flex;
     gap: 35px;
-    // margin-top: 16px;
     flex-wrap: wrap;
   }
 }
diff --git a/src/pages/BitcoinDashboard/components/Escrow/Escrow.module.scss b/src/pages/BitcoinDashboard/components/Escrow/Escrow.module.scss
index e29e94451..789d5c0b1 100644
--- a/src/pages/BitcoinDashboard/components/Escrow/Escrow.module.scss
+++ b/src/pages/BitcoinDashboard/components/Escrow/Escrow.module.scss
@@ -58,9 +58,6 @@
       font-weight: 400;
       line-height: 100%;
 
-      // @include theme {
-      //   color: theme-get('primary-surface-default-dark');
-      // }
 
       @include theme {
         color: theme-get('primary-surface-default');
diff --git a/src/pages/BitcoinDashboard/components/Escrow/Escrow.tsx b/src/pages/BitcoinDashboard/components/Escrow/Escrow.tsx
index f90986762..fb188651d 100644
--- a/src/pages/BitcoinDashboard/components/Escrow/Escrow.tsx
+++ b/src/pages/BitcoinDashboard/components/Escrow/Escrow.tsx
@@ -18,7 +18,6 @@ import { calculateTimeoutTimestamp, IBC_TRANSFER_TIMEOUT } from '@oraichain/orai
 import { OraiBtcSubnetChain } from 'libs/nomic/models/ibc-chain';
 
 const Escrow = () => {
-  const [theme] = useConfigReducer('theme');
   const [address] = useConfigReducer('address');
   const [loading, setLoading] = useState<boolean>(false);
   const data = useGetEscrowBalance(deriveNomicAddress(address));
@@ -28,7 +27,7 @@ const Escrow = () => {
     if (!addr) {
       return undefined;
     }
-    let address = fromBech32(addr);
+    const address = fromBech32(addr);
     return toBech32(OraiBTCBridgeNetwork.bech32Config.bech32PrefixAccAddr, address.data);
   }
 
diff --git a/src/pages/BitcoinDashboard/components/Header/Header.module.scss b/src/pages/BitcoinDashboard/components/Header/Header.module.scss
index b66ffcf30..af9b5d6b6 100644
--- a/src/pages/BitcoinDashboard/components/Header/Header.module.scss
+++ b/src/pages/BitcoinDashboard/components/Header/Header.module.scss
@@ -13,10 +13,6 @@
     flex-wrap: wrap;
     margin-bottom: 16px;
 
-    // // TODO: disable when has filter day
-    // @include mobile() {
-    //   display: none;
-    // }
 
     &_text {
       display: flex;
@@ -64,7 +60,6 @@
       border-radius: 99px;
       color: $neutron-text-body-light;
 
-      // TODO: hide filter
       display: none;
 
       @include mobile() {
@@ -122,11 +117,7 @@
       padding: 16px;
       flex-direction: column;
       flex: 1 0 0;
-      // transition: all ease-in-out 0.5s;
 
-      // &.activeChart {
-      //   gap: 16px;
-      // }
 
       color: $neutron-text-body-light;
       font-size: 16px;
@@ -151,7 +142,6 @@
       }
 
       .chart {
-        // display: none;
         max-height: 0px;
         padding: 0px 16px;
         border-radius: 12px;
@@ -165,7 +155,6 @@
         }
 
         &.active {
-          // display: block;
           padding: 16px;
           margin-top: 16px;
           max-height: 300px;
@@ -176,7 +165,6 @@
         border-start-end-radius: 12px;
         border-end-end-radius: 12px;
 
-        // odd
         @include theme() {
           background-color: theme-get('neutral-surface-bg-section-3');
         }
diff --git a/src/pages/BitcoinDashboard/components/Header/Header.tsx b/src/pages/BitcoinDashboard/components/Header/Header.tsx
index 5ae7053f5..5b0164a4e 100644
--- a/src/pages/BitcoinDashboard/components/Header/Header.tsx
+++ b/src/pages/BitcoinDashboard/components/Header/Header.tsx
@@ -1,11 +1,11 @@
 import { toDisplay } from '@oraichain/oraidex-common';
 import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
 import TokenBalance from 'components/TokenBalance';
+import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { FC, useEffect, useState } from 'react';
-import styles from './Header.module.scss';
-import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import { useGetBitcoinConfig, useGetCheckpointQueue, useGetTotalValueLocked } from '../../hooks';
+import styles from './Header.module.scss';
 
 // TODO: Update this method when BTC is added to pool
 // CURRENT REPLACEMENT: Fetch price from other platform
@@ -28,10 +28,6 @@ export const Header: FC<{}> = ({}) => {
   const valueLocked = useGetTotalValueLocked();
   const bitcoinConfig = useGetBitcoinConfig();
   const checkpointQueue = useGetCheckpointQueue();
-  //   const withdrawalFees = useGetWithdrawalFee(checkpointIndex);
-
-  //   const isMobileMode = isMobile(); // not use yet
-  //   const [openChart, setOpenChart] = useState(!isMobileMode); // not use yet
 
   const BITCOIN_INFO = {
     name: 'Bitcoin Price',
diff --git a/src/pages/BitcoinDashboard/components/PendingDeposits/PendingDeposits.module.scss b/src/pages/BitcoinDashboard/components/PendingDeposits/PendingDeposits.module.scss
index 07def88f9..1cb39c5d1 100644
--- a/src/pages/BitcoinDashboard/components/PendingDeposits/PendingDeposits.module.scss
+++ b/src/pages/BitcoinDashboard/components/PendingDeposits/PendingDeposits.module.scss
@@ -104,7 +104,6 @@
   &_list {
     display: flex;
     gap: 35px;
-    // margin-top: 16px;
     flex-wrap: wrap;
   }
 }
diff --git a/src/pages/BitcoinDashboard/components/PendingWithdraws/PendingWithdraw.module.scss b/src/pages/BitcoinDashboard/components/PendingWithdraws/PendingWithdraw.module.scss
index 974dd1161..27e201bf9 100644
--- a/src/pages/BitcoinDashboard/components/PendingWithdraws/PendingWithdraw.module.scss
+++ b/src/pages/BitcoinDashboard/components/PendingWithdraws/PendingWithdraw.module.scss
@@ -104,7 +104,6 @@
   &_list {
     display: flex;
     gap: 35px;
-    // margin-top: 16px;
     flex-wrap: wrap;
   }
 }
diff --git a/src/pages/BitcoinDashboard/components/Tabs/style.module.scss b/src/pages/BitcoinDashboard/components/Tabs/style.module.scss
index ced07f426..0ba1e6ed0 100644
--- a/src/pages/BitcoinDashboard/components/Tabs/style.module.scss
+++ b/src/pages/BitcoinDashboard/components/Tabs/style.module.scss
@@ -18,7 +18,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // flex: 1;
 
     @include mobile {
       width: 100%;
@@ -92,7 +91,4 @@
       color: $neutron-text-body-light;
     }
   }
-
-  @include mobile {
-  }
-}
+}
\ No newline at end of file
diff --git a/src/pages/CoHarvest/components/AllBidding/index.module.scss b/src/pages/CoHarvest/components/AllBidding/index.module.scss
index 5c7e2c11f..b18200d16 100644
--- a/src/pages/CoHarvest/components/AllBidding/index.module.scss
+++ b/src/pages/CoHarvest/components/AllBidding/index.module.scss
@@ -22,7 +22,6 @@
 
     @include theme {
       background: theme-get('neutral-6');
-      // color: theme-get('neutral-text-text-token-name');
       color: them-get('neutral-8');
     }
     font-size: 14px;
diff --git a/src/pages/CoHarvest/components/Bidding/index.module.scss b/src/pages/CoHarvest/components/Bidding/index.module.scss
index 46eb128d4..723b1fd87 100644
--- a/src/pages/CoHarvest/components/Bidding/index.module.scss
+++ b/src/pages/CoHarvest/components/Bidding/index.module.scss
@@ -8,6 +8,7 @@
   gap: 24px;
   padding: 24px;
   border-radius: 24px;
+
   @include theme {
     background: theme-get('bg-section-05');
   }
@@ -67,6 +68,7 @@
 
       gap: 16px;
       padding: 16px;
+
       @include theme {
         background: theme-get('neutral-surface-bg');
       }
@@ -102,6 +104,7 @@
           input[type='range' i]::-webkit-slider-container {
             height: 20px;
           }
+
           &[type='range'] {
             -webkit-appearance: none;
             appearance: none;
@@ -112,6 +115,7 @@
             border-radius: 99px;
 
             height: 6px;
+
             @include theme {
               background: theme-get('neutral-surface-bg-section-2');
             }
@@ -124,6 +128,7 @@
             width: 32px;
             border-radius: 50%;
             border: 4px solid;
+
             @include theme {
               background-color: theme-get('primary-text-text-link');
               border-color: theme-get('neutral-white');
@@ -138,6 +143,7 @@
             width: 15px;
             border-radius: 50%;
             border: 4px solid;
+
             @include theme {
               background-color: theme-get('primary-text-text-link');
               border-color: theme-get('neutral-white');
@@ -145,29 +151,7 @@
 
             transition: 0.2s ease-in-out;
           }
-          /* Hover, active & focus Thumb: Webkit */
-
-          // &[type='range']::-webkit-slider-thumb:hover {
-          //   box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
-          // }
-          // &[type='range']:active::-webkit-slider-thumb {
-          //   box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
-          // }
-          // &[type='range']:focus::-webkit-slider-thumb {
-          //   box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
-          // }
-
-          // /* Hover, active & focus Thumb: Firfox */
-
-          // &[type='range']::-moz-range-thumb:hover {
-          //   box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
-          // }
-          // &[type='range']:active::-moz-range-thumb {
-          //   box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
-          // }
-          // &[type='range']:focus::-moz-range-thumb {
-          //   box-shadow: 0 0 0 13px rgba(255, 85, 0, 0.2);
-          // }
+
         }
 
         div {
@@ -183,12 +167,13 @@
 
             @include theme() {
               background: theme-get('neutral-surface-bg-section-2');
-              color: theme-get('sea-stone-200'); // theme-get('text-color');
+              color: theme-get('sea-stone-200');
             }
 
             font-size: 18px;
             font-weight: 600;
-            line-height: 150%; /* 27px */
+            line-height: 150%;
+            /* 27px */
           }
         }
       }
@@ -197,9 +182,11 @@
         @include theme {
           color: theme-get('primary-surface-default');
         }
+
         font-size: 14px;
         font-weight: 400;
-        line-height: 150%; /* 21px */
+        line-height: 150%;
+        /* 21px */
       }
     }
   }
@@ -218,6 +205,7 @@
       @include theme() {
         color: theme-get('text-color');
       }
+
       font-size: 16px;
       font-weight: 500;
       line-height: 150%;
@@ -238,11 +226,13 @@
       padding: 16px;
       border-radius: 8px;
       border: 1px solid;
+
       @include theme() {
         background: theme-get('primary-surface-default-subtle');
         border-color: theme-get('primary-text-text-link');
         color: theme-get('text-color');
       }
+
       font-size: 16px;
       font-weight: 500;
       line-height: 150%;
@@ -257,9 +247,11 @@
           display: flex;
           justify-content: flex-end;
           align-items: center;
+
           @include theme {
             color: theme-get('primary-surface-default');
           }
+
           font-size: 18px;
           font-weight: 600;
           line-height: 150%;
@@ -287,9 +279,11 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
+
           @include theme {
             color: theme-get('neutral-9');
           }
+
           font-size: 14px;
           font-weight: 400;
           line-height: 150%;
@@ -313,7 +307,8 @@
     .calcExplain {
       font-size: 14px;
       font-weight: 400;
-      line-height: 150%; /* 21px */
+      line-height: 150%;
+      /* 21px */
       letter-spacing: 0.1px;
 
       display: flex;
@@ -385,8 +380,7 @@
         font-weight: 500;
         line-height: 150%;
 
-        // max-width: 340px;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/CoHarvest/components/Bidding/index.tsx b/src/pages/CoHarvest/components/Bidding/index.tsx
index cc5ee13bf..9c00c543d 100644
--- a/src/pages/CoHarvest/components/Bidding/index.tsx
+++ b/src/pages/CoHarvest/components/Bidding/index.tsx
@@ -1,10 +1,10 @@
 import { toBinary } from '@cosmjs/cosmwasm-stargate';
 import { BigDecimal, ORAIX_CONTRACT, oraichainTokens, toAmount, toDisplay, tokenMap } from '@oraichain/oraidex-common';
 import { OraiswapRouterQueryClient } from '@oraichain/oraidex-contracts-sdk';
+import { ReactComponent as TooltipIcon } from 'assets/icons/icon_tooltip.svg';
 import { ReactComponent as OraiXIcon } from 'assets/icons/oraix.svg';
 import { ReactComponent as OraiXLightIcon } from 'assets/icons/oraix_light.svg';
 import { ReactComponent as UsdcIcon } from 'assets/icons/usd_coin.svg';
-import { ReactComponent as TooltipIcon } from 'assets/icons/icon_tooltip.svg';
 import { Button } from 'components/Button';
 import Loader from 'components/Loader';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
@@ -12,9 +12,10 @@ import { network } from 'config/networks';
 import { getTransactionUrl, handleErrorTransaction } from 'helper';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
-import { getUsd } from 'libs/utils';
-import { INIT_AMOUNT_SIMULATE, TF_PRICE_CHANGE, TIMER } from 'pages/CoHarvest/constants';
 import { useDebounce } from 'hooks/useDebounce';
+import { useLoadOraichainTokens } from 'hooks/useLoadTokens';
+import { getUsd } from 'libs/utils';
+import { INIT_AMOUNT_SIMULATE, TIMER } from 'pages/CoHarvest/constants';
 import {
   useGetAllBidPoolInRound,
   useGetBidding,
@@ -29,7 +30,6 @@ import { RootState } from 'store/configure';
 import InputBalance from '../InputBalance';
 import InputRange from '../InputRange';
 import styles from './index.module.scss';
-import { useLoadOraichainTokens } from 'hooks/useLoadTokens';
 
 export type BiddingProps = {
   openExplainModal: () => void;
@@ -194,7 +194,7 @@ const Bidding = ({ openExplainModal, isEnd, round, isStarted, isCurrentRound, ba
                 },
                 'auto'
               );
-              if (result && result.transactionHash) {
+              if (result?.transactionHash) {
                 displayToast(TToastType.TX_SUCCESSFUL, {
                   customLink: getTransactionUrl(network.chainId, result.transactionHash)
                 });
diff --git a/src/pages/CoHarvest/components/BiddingHistory/index.module.scss b/src/pages/CoHarvest/components/BiddingHistory/index.module.scss
index ed1fe23a1..f421a25c5 100644
--- a/src/pages/CoHarvest/components/BiddingHistory/index.module.scss
+++ b/src/pages/CoHarvest/components/BiddingHistory/index.module.scss
@@ -62,7 +62,6 @@
         border-color: transparent;
 
         width: 100%;
-        // max-width: 120px;
         cursor: pointer;
         white-space: nowrap;
 
@@ -119,8 +118,6 @@
 
     .wrapperFilter {
       position: relative;
-      // top: 0;
-      // right: 0;
       display: none;
       transition: all ease-in-out 0.5s;
       border-radius: 6px;
@@ -147,7 +144,6 @@
         }
 
         &:hover {
-          // opacity: 0.7;
           @include theme {
             color: theme-get('neutral-9');
           }
diff --git a/src/pages/CoHarvest/components/ChartColumn/index.module.scss b/src/pages/CoHarvest/components/ChartColumn/index.module.scss
index b4bd578e4..b110d99f8 100644
--- a/src/pages/CoHarvest/components/ChartColumn/index.module.scss
+++ b/src/pages/CoHarvest/components/ChartColumn/index.module.scss
@@ -45,7 +45,6 @@
   .percentWrapper {
     display: flex;
     flex-direction: column-reverse;
-    // height: 250px;
 
     width: 12px;
     gap: 8px;
diff --git a/src/pages/CoHarvest/components/CountDownTime/index.module.scss b/src/pages/CoHarvest/components/CountDownTime/index.module.scss
index cc1d3788f..3f6faa19b 100644
--- a/src/pages/CoHarvest/components/CountDownTime/index.module.scss
+++ b/src/pages/CoHarvest/components/CountDownTime/index.module.scss
@@ -95,7 +95,6 @@
       height: 28px;
       width: 28px;
       border-radius: 99px;
-      //   background: conic-gradient(#232521 80%, #efefef 80%);
     }
   }
   .button {
diff --git a/src/pages/CoHarvest/components/CountDownTime/index.tsx b/src/pages/CoHarvest/components/CountDownTime/index.tsx
index ba9f72bac..493ad1924 100644
--- a/src/pages/CoHarvest/components/CountDownTime/index.tsx
+++ b/src/pages/CoHarvest/components/CountDownTime/index.tsx
@@ -6,7 +6,7 @@ import { TooltipIconBtn } from '../Tooltip';
 import styles from './index.module.scss';
 
 const CountDownTime = ({ bidInfo, onStart, onEnd, isCurrentRound }: CountDownType & { isCurrentRound: boolean }) => {
-  const { timeRemaining, percent, isEnd, start, end, isStarted } = useCountdown({
+  const { timeRemaining, percent, start, end, isStarted } = useCountdown({
     bidInfo,
     onStart,
     onEnd
diff --git a/src/pages/CoHarvest/components/ExplainReturnModal/index.module.scss b/src/pages/CoHarvest/components/ExplainReturnModal/index.module.scss
index 23d156b91..3b15e586a 100644
--- a/src/pages/CoHarvest/components/ExplainReturnModal/index.module.scss
+++ b/src/pages/CoHarvest/components/ExplainReturnModal/index.module.scss
@@ -82,26 +82,22 @@
       .distribution {
         display: flex;
         width: 100%;
-        // justify-content: space-between;
         align-items: flex-start;
         gap: 24px;
         flex-wrap: wrap;
 
         .lottieWrapper {
           display: flex;
-          // align-items: center;
           justify-content: center;
           flex-direction: column;
           flex: 1;
 
           border-radius: 12px;
-          // background: #fff;
 
           img {
             width: 100%;
           }
 
-          // color: #686a66;
           text-align: right;
           font-size: 12px;
           font-weight: 400;
@@ -111,7 +107,6 @@
         .desc {
           display: flex;
           flex-direction: column;
-          // align-items: center;
           gap: 16px;
           width: 100%;
           max-width: 326px;
diff --git a/src/pages/CoHarvest/components/HarvestInfo/index.module.scss b/src/pages/CoHarvest/components/HarvestInfo/index.module.scss
index 0f466bb90..90f2893ae 100644
--- a/src/pages/CoHarvest/components/HarvestInfo/index.module.scss
+++ b/src/pages/CoHarvest/components/HarvestInfo/index.module.scss
@@ -92,7 +92,6 @@
       width: calc(100% - 10px);
       z-index: 0;
       border-radius: 24px;
-      // theme
       @include theme() {
         background: theme-get('primary-surface-default-dark-2');
       }
diff --git a/src/pages/CoHarvest/components/InputBalance/index.module.scss b/src/pages/CoHarvest/components/InputBalance/index.module.scss
index 011bbb6f3..a2d23c54b 100644
--- a/src/pages/CoHarvest/components/InputBalance/index.module.scss
+++ b/src/pages/CoHarvest/components/InputBalance/index.module.scss
@@ -73,7 +73,6 @@
     }
 
     .symbol {
-      // color: #c7c8c6;
       @include theme {
         color: theme-get('neutral-text-text-disabled');
       }
diff --git a/src/pages/CoHarvest/components/InputBalance/index.tsx b/src/pages/CoHarvest/components/InputBalance/index.tsx
index a1813fa28..922f0bbdb 100644
--- a/src/pages/CoHarvest/components/InputBalance/index.tsx
+++ b/src/pages/CoHarvest/components/InputBalance/index.tsx
@@ -43,7 +43,7 @@ const InputBalance = ({ amount, onChangeAmount, disable = false, balance }: Inpu
             return !floatValue || (floatValue >= 0 && floatValue <= 1e10);
           }}
           onValueChange={({ floatValue }) => {
-            onChangeAmount && onChangeAmount(floatValue);
+            onChangeAmount?.(floatValue);
           }}
         />
         <span className={styles.symbol}>ORAIX</span>
diff --git a/src/pages/CoHarvest/components/ListHistory/index.module.scss b/src/pages/CoHarvest/components/ListHistory/index.module.scss
index 67583c8b8..2a2c6d1d4 100644
--- a/src/pages/CoHarvest/components/ListHistory/index.module.scss
+++ b/src/pages/CoHarvest/components/ListHistory/index.module.scss
@@ -3,7 +3,6 @@
 @import 'src/styles/themes';
 
 .listHistory {
-  // margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 16px;
diff --git a/src/pages/CoHarvest/components/MyBidding/index.module.scss b/src/pages/CoHarvest/components/MyBidding/index.module.scss
index f6907be09..4a43808c1 100644
--- a/src/pages/CoHarvest/components/MyBidding/index.module.scss
+++ b/src/pages/CoHarvest/components/MyBidding/index.module.scss
@@ -36,7 +36,6 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    // color: #686a66;
     font-size: 14px;
     font-weight: 400;
     line-height: 150%; /* 21px */
diff --git a/src/pages/CoHarvest/hooks/useGetBidRound.ts b/src/pages/CoHarvest/hooks/useGetBidRound.ts
index 09d27578c..32370ba54 100644
--- a/src/pages/CoHarvest/hooks/useGetBidRound.ts
+++ b/src/pages/CoHarvest/hooks/useGetBidRound.ts
@@ -216,7 +216,6 @@ export const useGetAllBidPoolInRound = (round: number) => {
 
   const {
     data: allBidPoolRound,
-    isLoading,
     isFetching,
     refetch: refetchAllBidPoolRound
   } = useQuery(['all-bid-pool-round', round], () => getAllBidPoolRound(), {
@@ -366,7 +365,6 @@ export const useGetBidHistoryWithPotentialReturn = (props: {
   const {
     data: listPotentialReturn,
     isFetching,
-    isRefetching,
     refetch: refetchPotentialReturn
   } = useQuery(
     ['all-potential-return', listBidHistories, biddingInfo?.bid_info.end_time, biddingInfo?.bid_info.round],
@@ -456,7 +454,6 @@ export const useGetAllBids = (
 
   const {
     data: historyAllBidPool,
-    isLoading,
     isFetching,
     refetch: refetchAllHistoryBidPool
   } = useQuery(['history-bid-pool-all', round], () => getHistoryBidPool(), {
diff --git a/src/pages/CoHarvest/index.module.scss b/src/pages/CoHarvest/index.module.scss
index 85bd8a358..02b068462 100644
--- a/src/pages/CoHarvest/index.module.scss
+++ b/src/pages/CoHarvest/index.module.scss
@@ -36,7 +36,6 @@
     justify-content: space-between;
     flex: 1;
 
-    // flex-wrap: wrap;
 
     @include mobile {
       flex-direction: column-reverse;
diff --git a/src/pages/Pool-V3/index.module.scss b/src/pages/Pool-V3/index.module.scss
index 1c0bb915a..467ebf6f7 100644
--- a/src/pages/Pool-V3/index.module.scss
+++ b/src/pages/Pool-V3/index.module.scss
@@ -25,10 +25,6 @@
   }
 
   .banner {
-    // position: fixed;
-    // top: 68px;
-    // left: 218px;
-    // width: calc(100% - 218px);
 
     font-size: 16px;
     font-weight: 400;
diff --git a/src/pages/Pools/NewPoolModal/NewPoolModal.module.scss b/src/pages/Pools/NewPoolModal/NewPoolModal.module.scss
index 25897cb84..080e0e773 100644
--- a/src/pages/Pools/NewPoolModal/NewPoolModal.module.scss
+++ b/src/pages/Pools/NewPoolModal/NewPoolModal.module.scss
@@ -1,4 +1,5 @@
 @import 'src/styles/themes';
+
 .modal {
   max-width: 568px;
 
@@ -25,8 +26,10 @@
 
       color: #ffffff;
     }
+
     .steps {
       margin: 20px 0;
+
       .progress {
         margin: 25px 0 8px 0;
         height: 32px;
@@ -141,7 +144,6 @@
       display: flex;
       flex-direction: column;
       margin: 10px 0;
-      // justify-content: center;
 
       padding: 16px 24px;
       gap: 15px;
@@ -156,14 +158,11 @@
       border-radius: 16px;
 
       border: 1px solid;
-      border-image: linear-gradient(
-          99.99deg,
+      border-image: linear-gradient(99.99deg,
           rgba(255, 255, 255, 0) 0%,
           rgba(255, 255, 255, 0.15) 26.06%,
           rgba(225, 240, 255, 0.202656) 64.17%,
-          rgba(232, 241, 255, 0) 98.89%
-        )
-        1;
+          rgba(232, 241, 255, 0) 98.89%) 1;
 
       /* Inside auto layout */
 
@@ -191,7 +190,6 @@
 
           /* Inside auto layout */
 
-          // flex-grow: 1;
         }
 
         .btn {
@@ -304,6 +302,7 @@
           align-items: center;
 
           gap: 10px;
+
           .logo {
             width: 44px;
             height: 44px;
@@ -372,6 +371,7 @@
               padding: 2px 6px;
             }
           }
+
           .arrow-down {
             width: 0;
             height: 0;
@@ -397,6 +397,7 @@
             text-align: right;
             width: 90%;
           }
+
           span {
             color: #505665;
           }
@@ -441,6 +442,7 @@
 
       margin: 32px 0 0 0;
     }
+
     .back-btn {
       width: 100%;
       background: #1e1e21;
@@ -503,7 +505,6 @@
     .receive {
       display: flex;
       flex-direction: column;
-      // justify-content: center;
 
       padding: 16px 24px;
       gap: 15px;
@@ -518,14 +519,11 @@
       border-radius: 16px;
 
       border: 1px solid;
-      border-image: linear-gradient(
-          99.99deg,
+      border-image: linear-gradient(99.99deg,
           rgba(255, 255, 255, 0) 0%,
           rgba(255, 255, 255, 0.15) 26.06%,
           rgba(225, 240, 255, 0.202656) 64.17%,
-          rgba(232, 241, 255, 0) 98.89%
-        )
-        1;
+          rgba(232, 241, 255, 0) 98.89%) 1;
 
       /* Inside auto layout */
 
@@ -623,6 +621,7 @@
           flex-direction: column;
           justify-content: space-between;
           height: 44px;
+
           .des {
             font-style: normal;
             font-weight: 600;
@@ -674,6 +673,7 @@
           flex-direction: column;
           justify-content: space-between;
           height: 44px;
+
           .des {
             font-style: normal;
             font-weight: 600;
@@ -766,14 +766,17 @@
           align-items: center;
           gap: 5px;
         }
+
         .stats_info_cl {
           width: 16px;
           height: 16px;
         }
+
         .stats_info_lg {
           width: 20px;
           height: 20px;
         }
+
         .stats_info_name {
           font-style: normal;
           font-weight: 600;
@@ -789,6 +792,7 @@
           color: #ffffff;
           text-transform: uppercase;
         }
+
         .stats_info_percent {
           font-style: normal;
           font-weight: 500;
@@ -842,4 +846,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss b/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss
index c406742b7..deb1776ff 100644
--- a/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss
+++ b/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss
@@ -185,7 +185,6 @@
               display: flex;
               width: 50%;
               align-items: center;
-              // position: relative;
               .logo {
                 width: 40px;
                 height: 40px;
diff --git a/src/pages/Pools/NewTokenModal/NewTokenModal.tsx b/src/pages/Pools/NewTokenModal/NewTokenModal.tsx
index 96a0b23dd..1c17a70a2 100644
--- a/src/pages/Pools/NewTokenModal/NewTokenModal.tsx
+++ b/src/pages/Pools/NewTokenModal/NewTokenModal.tsx
@@ -1,6 +1,7 @@
 import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
 import { AccountData } from '@cosmjs/proto-signing';
 // import { OraidexListingContractClient } from '@oraichain/oraidex-contracts-sdk';
+import { toAmount, toDisplay } from '@oraichain/oraidex-common';
 import { ReactComponent as PlusIcon } from 'assets/icons/plus.svg';
 import { ReactComponent as RewardIcon } from 'assets/icons/reward.svg';
 import { ReactComponent as TrashIcon } from 'assets/icons/trash.svg';
@@ -12,18 +13,16 @@ import Modal from 'components/Modal';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { network } from 'config/networks';
 import { handleErrorTransaction } from 'helper';
-import useOnClickOutside from 'hooks/useOnClickOutside';
 import useConfigReducer from 'hooks/useConfigReducer';
+import useOnClickOutside from 'hooks/useOnClickOutside';
 import { getCosmWasmClient } from 'libs/cosmjs';
 import { checkRegex, validateAddressCosmos } from 'libs/utils';
 import sumBy from 'lodash/sumBy';
 import { FC, useRef, useState } from 'react';
 import NumberFormat from 'react-number-format';
-import { generateMsgFrontierAddToken, getInfoLiquidityPool } from '../helpers';
 import { InitBalancesItems, RewardItems } from './ItemsComponent';
 import { ModalDelete, ModalListToken } from './ModalComponent';
 import styles from './NewTokenModal.module.scss';
-import { toAmount, toDisplay } from '@oraichain/oraidex-common';
 const cx = cn.bind(styles);
 
 interface ModalProps {
@@ -229,9 +228,13 @@ const NewTokenModal: FC<ModalProps> = ({ isOpen, close, open }) => {
     }
   };
 
+  const generateOverlay = () => {
+    return isAddListToken || typeDelete ? <div className={cx('overlay')} /> : null;
+  };
+
   return (
     <Modal isOpen={isOpen} close={close} open={open} isCloseBtn={true} className={cx('modal')}>
-      {isAddListToken || typeDelete ? <div className={cx('overlay')} /> : null}
+      {generateOverlay()}
       <div className={cx('container', theme)}>
         <div className={cx('container-inner')}>
           <RewardIcon />
diff --git a/src/pages/Pools/PoolDetail.module.scss b/src/pages/Pools/PoolDetail.module.scss
index 5b00a8f8b..e2232f0d0 100644
--- a/src/pages/Pools/PoolDetail.module.scss
+++ b/src/pages/Pools/PoolDetail.module.scss
@@ -115,595 +115,106 @@
   }
 }
 
-// .pool-detail {
-//   padding: 40px;
-
-//   @media (max-width: 500px) {
-//     padding: 20px;
-//   }
-
-// .header {
-//   display: flex;
-//   align-items: center;
-//   margin-bottom: 40px;
-//   flex-wrap: wrap;
-//   justify-content: space-between;
-//   gap: 20px;
-
-//   .token-info {
-//     display: flex;
-//     gap: 20px;
-
-//     .logo {
-//       position: relative;
-//       width: 75px;
-//       height: 80px;
-
-//       .token1 {
-//         width: 48px;
-//         height: 48px;
-//       }
-
-//       .token2 {
-//         width: 48px;
-//         height: 48px;
-//         position: absolute;
-//         bottom: 0;
-//         right: 0;
-//         z-index: 1;
-//       }
-//     }
-
-//     .title {
-//       display: flex;
-//       flex-direction: column;
-//       justify-content: space-between;
-//       flex-grow: 1;
-
-//       .name {
-//         font-style: normal;
-//         font-weight: 600;
-//         font-size: 22px;
-//         line-height: 100%;
-//         /* identical to box height, or 22px */
-
-//         font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
-
-//         /* aiRight/White */
-
-//         color: #ffffff;
-
-//         &.light {
-//           color: $light-text-color;
-//         }
-//       }
-
-//       .value {
-//         font-style: normal;
-//         font-weight: 600;
-//         font-size: 40px;
-//         line-height: 100%;
-//         /* identical to box height, or 40px */
-//         margin-top: 10px;
-//         font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
-
-//         color: #ffffff;
-
-//         &.light {
-//           color: $light-text-color;
-//         }
-//       }
-//     }
-//   }
-
-//   .des {
-//     font-style: normal;
-//     font-weight: 600;
-//     font-size: 16px;
-//     line-height: 100%;
-//     /* identical to box height, or 16px */
-
-//     text-align: center;
-//     font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
-
-//     /* aiRight/Gray 3 */
-
-//     color: #777e90;
-//   }
-// }
-
-// .info {
-//   .row {
-//     display: flex;
-//     justify-content: space-between;
-//     gap: 30px;
-//     flex-wrap: wrap;
-
-//     &:first-child {
-//       padding-bottom: 40px;
-
-//       @include theme() {
-//         border-bottom: theme-get('hr-color');
-//       }
-//     }
-//   }
-
-//   .label {
-//     font-style: normal;
-//     font-weight: 500;
-//     font-size: 14px;
-//     line-height: 150%;
-//     color: #777e90;
-
-//     &--bold {
-//       font-weight: 600;
-//       font-size: 18px;
-//       line-height: 100%;
-//       color: #fff;
-//     }
-
-//     &--sub {
-//       font-weight: 500;
-//       font-size: 14px;
-//       line-height: 150%;
-//       color: #777e90;
-//       margin-top: 10px;
-//     }
-//   }
-
-//   .container {
-//     padding: 25px;
-//     border-radius: 16px;
-
-//     @include theme() {
-//       background-color: theme-get('bg-container');
-//       box-shadow: theme-get('shadow-pair');
-//     }
-
-//     font-style: normal;
-//     font-weight: 600;
-//     font-size: 22px;
-//     line-height: 100%;
-//     /* identical to box height, or 22px */
-
-//     font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
-
-//     /* aiRight/White */
-
-//     color: #ffffff;
-//     display: flex;
-//     flex-direction: column;
-//     // margin-top: 25px;
-
-//     &.tokens {
-//       min-width: 500px;
-//       display: flex;
-//       flex: 1;
-//       flex-direction: row;
-//       gap: 30px;
-
-//       .available-tokens {
-//         width: 30%;
-//         text-align: center;
-//         display: flex;
-//         flex-direction: column;
-//         // justify-content: space-between;
-//         align-items: center;
-//         gap: 30px;
-
-//         .amount {
-//           font-weight: 600;
-//           font-size: 18px;
-//           line-height: 100%;
-
-//           &.light {
-//             background-color: $light-bg-primary-box;
-//             color: $light-text-color;
-//           }
-//         }
-
-//         .amount-usd {
-//           font-weight: 600;
-//           font-size: 14px;
-//           line-height: 100%;
-//           color: $light-text-color-gray;
-//         }
-//       }
-
-//       .liquidity {
-//         width: 70%;
-
-//         .liquidity_token {
-//           display: flex;
-//           margin-top: 30px;
-
-//           .liquidity_token_name {
-//             display: flex;
-//             gap: 5px;
-//             flex-grow: 2;
-
-//             .mark {
-//               width: 16px;
-//               height: 16px;
-//               border-radius: 4px;
-//             }
-
-//             .token-name {
-//               font-weight: 600;
-//               font-size: 18px;
-//               line-height: 100%;
-
-//               &.light {
-//                 color: $light-text-color;
-//               }
-//             }
-//           }
-
-//           .liquidity_token_value {
-//             flex-grow: 1;
-//             display: flex;
-//             flex-direction: column;
-//             align-items: flex-end;
-//             gap: 10px;
-
-//             .amount {
-//               font-weight: 600;
-//               font-size: 18px;
-//               line-height: 100%;
-
-//               &.light {
-//                 color: $light-text-color;
-//               }
-//             }
-
-//             .amount-usd {
-//               font-weight: 600;
-//               font-size: 14px;
-//               line-height: 100%;
-//               color: #777e90;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     &.pool-catalyst {
-//       min-width: calc(30% - 30px);
-
-//       .pool-catalyst_token {
-//         display: flex;
-//         margin-top: 30px;
-
-//         .pool-catalyst_token_name {
-//           display: flex;
-//           gap: 5px;
-//           flex-grow: 2;
-
-//           .token-name {
-//             font-weight: 600;
-//             font-size: 18px;
-//             line-height: 100%;
-
-//             &.light {
-//               color: $light-text-color;
-//             }
-//           }
-
-//           .icon {
-//             width: 18px;
-//             height: 18px;
-//           }
-//         }
-
-//         .pool-catalyst_token_value {
-//           flex-grow: 1;
-//           padding-left: 40px;
-//           display: flex;
-//           flex-direction: column;
-//           align-items: flex-end;
-//           gap: 10px;
-
-//           .amount {
-//             font-weight: 600;
-//             font-size: 18px;
-//             line-height: 100%;
-
-//             &.light {
-//               color: $light-text-color;
-//             }
-//           }
-
-//           .amount-usd {
-//             font-weight: 600;
-//             font-size: 14px;
-//             line-height: 100%;
-//             color: #777e90;
-//           }
-//         }
-//       }
-
-//       .pool-catalyst_token_lp {
-//         display: flex;
-
-//         .pool-catalyst_token_name {
-//           display: flex;
-//           gap: 5px;
-//           flex-grow: 2;
-
-//           .token-name {
-//             font-weight: 600;
-//             font-size: 18px;
-//             line-height: 100%;
-
-//             &.light {
-//               color: $light-text-color;
-//             }
-//           }
-
-//           .icon {
-//             width: 18px;
-//             height: 18px;
-//           }
-//         }
-
-//         .pool-catalyst_token_value {
-//           flex-grow: 1;
-//           padding-left: 40px;
-//           display: flex;
-//           flex-direction: column;
-//           align-items: flex-end;
-//           gap: 10px;
-
-//           .amount {
-//             font-weight: 600;
-//             font-size: 18px;
-//             line-height: 100%;
-
-//             &.light {
-//               color: $light-text-color;
-//             }
-//           }
-
-//           .amount-usd {
-//             font-weight: 600;
-//             font-size: 14px;
-//             line-height: 100%;
-//             color: #777e90;
-//           }
-//         }
-//       }
-//     }
-//   }
-
-//   .btn {
-//     @include theme() {
-//       background-color: theme-get('bg-btn-primary');
-//       box-shadow: theme-get('shadow-btn');
-//     }
-
-//     padding: 16px;
-//     width: 100%;
-//     text-align: center;
-//     border-radius: 8px;
-
-//     font-style: normal;
-//     font-weight: 600;
-//     font-size: 16px;
-//     line-height: 100%;
-//     text-align: center;
-//     color: $white-color;
-//     cursor: pointer;
-//     display: flex;
-//     justify-content: center;
-//     margin: 10px auto;
-//     display: flex;
-//     gap: 10px;
-//     justify-content: center;
-//     align-items: center;
-
-//     &--dark {
-//       background: #2d2938;
-//       border: none;
-//       box-shadow: none;
-//     }
-//   }
-
-//   .mining {
-//     // margin-top: 50px;
-//     min-width: 70%;
-
-//     .container_mining {
-//       display: flex;
-//       flex-direction: row;
-//       gap: 30px;
-//       height: 100%;
-
-//       .icon {
-//         width: 30%;
-//       }
-
-//       .bonded {
-//         width: 70%;
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: space-between;
-
-//         &-apr,
-//         &-unbouding {
-//           display: flex;
-//           // margin-top: 20px;
-//           justify-content: space-between;
-//         }
-
-//         &-apr {
-//           .bonded-value {
-//             background: $blue-color;
-//             border-radius: 8px;
-//             padding: 5px;
-//           }
-//         }
-
-//         &-name {
-//           font-weight: 500;
-//           font-size: 16px;
-//           line-height: 100%;
-//           color: #777e90;
-//         }
-
-//         &-value {
-//           font-weight: 500;
-//           font-size: 16px;
-//           line-height: 100%;
-//         }
-//       }
-
-//       .amount {
-//         font-weight: 600;
-//         font-size: 18px;
-//         line-height: 100%;
-//         // margin-top: 20px;
-//       }
-
-//       .amount-usd {
-//         font-weight: 600;
-//         font-size: 14px;
-//         line-height: 100%;
-//         color: #777e90;
-//         margin-top: 10px;
-//       }
-//     }
-//   }
-
-//   .earning {
-//     // margin-top: 50px;
-//     width: 27%;
-
-//     .container_earning {
-//       display: flex;
-//       flex-direction: column;
-//       justify-content: space-between;
-//       gap: 14px;
-//       // margin-top: 15px;
-//       height: 100%;
-
-//       .amount {
-//         font-weight: 600;
-//         font-size: 18px;
-//         line-height: 100%;
-//         margin-top: 20px;
-//       }
-
-//       .amount-usd {
-//         font-weight: 600;
-//         font-size: 14px;
-//         line-height: 100%;
-//         color: #777e90;
-//       }
-//     }
-//   }
-// }
-// }
-
-//responsive mobile
-// @media (max-width: 575px) {
-//   .pool-detail {
-//     padding: 0;
-//     margin-top: 20px;
-
-//     .header {
-//       margin-bottom: 20px;
-
-//       .token-info {
-//         gap: 16px;
-
-//         .logo {
-//           width: 45px;
-//           height: 50px;
-
-//           .token1,
-//           .token2 {
-//             width: 32px;
-//             height: 32px;
-//           }
-//         }
-
-//         .title {
-//           .name {
-//             font-size: 16px;
-//           }
-
-//           .value {
-//             font-size: 24px;
-//           }
-//         }
-//       }
-
-//       .des {
-//         font-size: 14px;
-//       }
-//     }
-
-//     .info {
-//       .container {
-//         padding: 16px;
-//         width: 100%;
-
-//         &.tokens {
-//           flex-wrap: wrap;
-//           min-width: auto;
-//           gap: 15px;
-
-//           .available-tokens {
-//             width: 100%;
-//           }
-
-//           .liquidity {
-//             width: 100%;
-
-//             .liquidity_token {
-//               margin-top: 15px;
-
-//               .liquidity_token_name {
-//                 .token-name {
-//                   font-size: 16px;
-//                 }
-
-//                 .amount {
-//                   font-size: 16px;
-//                 }
-//               }
-
-//               .liquidity_token_value {
-//                 .amount {
-//                   font-size: 16px;
-//                 }
-//               }
-//             }
-//           }
-//         }
-
-//         .btn {
-//           font-size: 14px;
-//         }
-
-//         &.pool-catalyst {
-//           .pool-catalyst_token {
-//             margin-top: 15px;
-
-//             .pool-catalyst_token_name {
-//               .token-name {
-//                 font-size: 16px;
-//               }
-//             }
-
-//             .pool-catalyst_token_value {
-//               .amount {
-//                 font-size: 16px;
-//               }
-//             }
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/Pools/components/AddLiquidityModal/AddLiquidityModal.module.scss b/src/pages/Pools/components/AddLiquidityModal/AddLiquidityModal.module.scss
index 8c138b2a6..a6715291f 100644
--- a/src/pages/Pools/components/AddLiquidityModal/AddLiquidityModal.module.scss
+++ b/src/pages/Pools/components/AddLiquidityModal/AddLiquidityModal.module.scss
@@ -229,7 +229,6 @@
   }
 }
 
-//responsive
 @media (max-width: 575px) {
   .modal {
     .container {
diff --git a/src/pages/Pools/components/ChartDetailContent/index.module.scss b/src/pages/Pools/components/ChartDetailContent/index.module.scss
index 454431f64..03d412880 100644
--- a/src/pages/Pools/components/ChartDetailContent/index.module.scss
+++ b/src/pages/Pools/components/ChartDetailContent/index.module.scss
@@ -67,7 +67,6 @@
       border-radius: 99px;
       color: $neutron-text-body-light;
 
-      // TODO: hide filter
       display: none;
 
       @include mobile() {
@@ -131,9 +130,6 @@
       border-radius: 12px;
       margin-top: 0px;
 
-      // @include theme {
-      //   background: theme-get('neutral-surface-bg-2');
-      // }
 
       &.activeChart {
         display: block;
diff --git a/src/pages/Pools/components/ChartDetailSection/index.module.scss b/src/pages/Pools/components/ChartDetailSection/index.module.scss
index 6879cc241..eee90e448 100644
--- a/src/pages/Pools/components/ChartDetailSection/index.module.scss
+++ b/src/pages/Pools/components/ChartDetailSection/index.module.scss
@@ -104,9 +104,6 @@
       border-radius: 12px;
       margin-top: 0px;
 
-      // @include theme {
-      //   background: theme-get('neutral-surface-bg-2');
-      // }
 
       &.activeChart {
         display: block;
diff --git a/src/pages/Pools/components/Earning/Earning.module.scss b/src/pages/Pools/components/Earning/Earning.module.scss
index 50433638a..2019de7e7 100644
--- a/src/pages/Pools/components/Earning/Earning.module.scss
+++ b/src/pages/Pools/components/Earning/Earning.module.scss
@@ -116,7 +116,6 @@
 
         @include mobile {
           font-size: 12px;
-          // flex-direction: column-reverse;
         }
       }
     }
@@ -132,7 +131,6 @@
   padding: 24px 40px;
 
   gap: 32px;
-  // flex-wrap: wrap;
 
   @include theme() {
     background-color: theme-get('primary-surface-default-subtle');
@@ -140,7 +138,6 @@
   }
 
   @include small-mobile() {
-    // flex-wrap: wrap;
     padding: 24px 16px;
     gap: 24px;
   }
@@ -239,7 +236,6 @@
       .assetEarning:first-child {
         width: 100%;
         margin-right: 0;
-        // margin-bottom: 24px;
 
         .amount {
           margin-bottom: 0;
@@ -254,8 +250,6 @@
 
   .claim {
     display: flex;
-    // flex-direction: column;
-    // justify-content: center;
 
     .earnMore {
       margin-top: 15px;
diff --git a/src/pages/Pools/components/Filter/style.module.scss b/src/pages/Pools/components/Filter/style.module.scss
index da910f95b..f7fe5f9af 100644
--- a/src/pages/Pools/components/Filter/style.module.scss
+++ b/src/pages/Pools/components/Filter/style.module.scss
@@ -17,7 +17,6 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    // flex: 1;
 
     @include mobile {
       width: 100%;
@@ -96,7 +95,4 @@
       color: $neutron-text-body-light;
     }
   }
-
-  @include mobile {
-  }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Pools/components/Header/Header.module.scss b/src/pages/Pools/components/Header/Header.module.scss
index ba442697a..c4d0732a4 100644
--- a/src/pages/Pools/components/Header/Header.module.scss
+++ b/src/pages/Pools/components/Header/Header.module.scss
@@ -13,10 +13,6 @@
     flex-wrap: wrap;
     margin-bottom: 16px;
 
-    // // TODO: disable when has filter day
-    // @include mobile() {
-    //   display: none;
-    // }
 
     &_text {
       display: flex;
@@ -34,9 +30,11 @@
         @include theme() {
           color: theme-get('neutral-9');
         }
+
         font-size: 24px;
         font-weight: 500;
-        line-height: 120%; /* 28.8px */
+        line-height: 120%;
+        /* 28.8px */
       }
 
       @include mobile() {
@@ -53,7 +51,6 @@
     font-size: 18px;
     font-weight: 600;
     line-height: 150%;
-    /* 27px */
 
     .filter_day_wrapper {
       display: flex;
@@ -64,7 +61,6 @@
       border-radius: 99px;
       color: $neutron-text-body-light;
 
-      // TODO: hide filter
       display: none;
 
       @include mobile() {
@@ -122,11 +118,7 @@
       padding: 16px;
       flex-direction: column;
       flex: 1 0 0;
-      // transition: all ease-in-out 0.5s;
 
-      // &.activeChart {
-      //   gap: 16px;
-      // }
 
       color: $neutron-text-body-light;
       font-size: 16px;
@@ -151,7 +143,6 @@
       }
 
       .chart {
-        // display: none;
         max-height: 0px;
         padding: 0px 16px;
         border-radius: 12px;
@@ -165,7 +156,6 @@
         }
 
         &.active {
-          // display: block;
           padding: 16px;
           margin-top: 16px;
           max-height: 300px;
@@ -176,7 +166,6 @@
         border-start-end-radius: 12px;
         border-end-end-radius: 12px;
 
-        // odd
         @include theme() {
           background-color: theme-get('neutral-surface-bg-section-3');
         }
@@ -350,4 +339,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Pools/components/LiquidityChart/index.tsx b/src/pages/Pools/components/LiquidityChart/index.tsx
index 087943847..de47a3296 100644
--- a/src/pages/Pools/components/LiquidityChart/index.tsx
+++ b/src/pages/Pools/components/LiquidityChart/index.tsx
@@ -32,19 +32,22 @@ const LiquidityChart = ({
     onMouseLiquidityLeave: onMouseLeave
   } = useLiquidityEventChart(filterDay, onUpdateCurrentItem, pair);
 
+  function handleResizeObserver(entries: ResizeObserverEntry[]) {
+    window.requestAnimationFrame(() => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
+
+      const { width, height } = entries[0].contentRect;
+      chartRef.current.applyOptions({ width, height });
+      setTimeout(() => {
+        chartRef.current.timeScale().fitContent();
+      }, 0);
+    });
+  }
   useEffect(() => {
     resizeObserver.current = new ResizeObserver((entries, b) => {
-      window.requestAnimationFrame((): void | undefined => {
-        if (!Array.isArray(entries) || !entries.length) {
-          return;
-        }
-
-        const { width, height } = entries[0].contentRect;
-        chartRef.current.applyOptions({ width, height });
-        setTimeout(() => {
-          chartRef.current.timeScale().fitContent();
-        }, 0);
-      });
+      handleResizeObserver(entries);
     });
 
     resizeObserver.current.observe(containerRef.current, {
diff --git a/src/pages/Pools/components/ListPool/ListPool.module.scss b/src/pages/Pools/components/ListPool/ListPool.module.scss
index 19e6895f8..03ecb9474 100644
--- a/src/pages/Pools/components/ListPool/ListPool.module.scss
+++ b/src/pages/Pools/components/ListPool/ListPool.module.scss
@@ -96,7 +96,6 @@
   &_list {
     display: flex;
     gap: 35px;
-    // margin-top: 16px;
     flex-wrap: wrap;
   }
 }
diff --git a/src/pages/Pools/components/ListPoolMobile/ListPoolModule.module.scss b/src/pages/Pools/components/ListPoolMobile/ListPoolModule.module.scss
index 1d041df4e..21830e126 100644
--- a/src/pages/Pools/components/ListPoolMobile/ListPoolModule.module.scss
+++ b/src/pages/Pools/components/ListPoolMobile/ListPoolModule.module.scss
@@ -2,7 +2,6 @@
 @import 'src/styles/themes';
 
 .listpools {
-    // margin-top: 40px;
 
     .listpools_all {
         display: flex;
diff --git a/src/pages/Pools/components/OverviewPool/OverviewPool.module.scss b/src/pages/Pools/components/OverviewPool/OverviewPool.module.scss
index 2049cc182..0b48cdb5a 100644
--- a/src/pages/Pools/components/OverviewPool/OverviewPool.module.scss
+++ b/src/pages/Pools/components/OverviewPool/OverviewPool.module.scss
@@ -27,7 +27,6 @@
 
     @include small-mobile {
       flex-direction: row;
-      // justify-content: space-between;
       align-items: center;
       gap: 0px;
       margin-bottom: 16px;
@@ -321,7 +320,6 @@
     .volume,
     .apr {
       width: 50%;
-      // display: none;
       transition: display 0.2s ease-in-out;
     }
 
diff --git a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
index efdebfa11..253acb228 100644
--- a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
+++ b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
@@ -8,7 +8,6 @@ import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { useState } from 'react';
 import { PoolDetail } from 'types/pool';
 import styles from './OverviewPool.module.scss';
-import { isMobile } from '@walletconnect/browser-utils';
 
 export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail }) => {
   const theme = useTheme();
@@ -16,7 +15,7 @@ export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail })
   const { pairAmountInfoData, lpTokenInfoData } = useGetPairInfo(poolDetailData);
   const { token1, token2 } = poolDetailData;
 
-  const [isShowMore, setIsShowMore] = useState(false);
+  const [isShowMore] = useState(false);
 
   let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon];
   if (token1) BaseTokenIcon = theme === 'light' ? token1.IconLight || token1.Icon : token1.Icon;
diff --git a/src/pages/Pools/components/StakeLPModal/StakeLPModal.module.scss b/src/pages/Pools/components/StakeLPModal/StakeLPModal.module.scss
index fa20f36c3..ef6f00593 100644
--- a/src/pages/Pools/components/StakeLPModal/StakeLPModal.module.scss
+++ b/src/pages/Pools/components/StakeLPModal/StakeLPModal.module.scss
@@ -199,7 +199,6 @@
   }
 }
 
-//responsive
 @media (max-width: 575px) {
   .modal {
     .container {
diff --git a/src/pages/Pools/components/TransactionHistory/index.module.scss b/src/pages/Pools/components/TransactionHistory/index.module.scss
index 44702eca5..5f4bdeac5 100644
--- a/src/pages/Pools/components/TransactionHistory/index.module.scss
+++ b/src/pages/Pools/components/TransactionHistory/index.module.scss
@@ -9,9 +9,6 @@
     border-radius: 24px;
     overflow-x: auto;
 
-    // &::-webkit-scrollbar {
-    //   height: 8px;
-    // }
     border: 1px solid;
 
     @include theme {
@@ -22,12 +19,15 @@
 
   .title {
     margin-bottom: 8px;
+
     @include theme {
       color: theme-get('sea-stone-200');
     }
+
     font-size: 16px;
     font-weight: 500;
-    line-height: 150%; /* 24px */
+    line-height: 150%;
+    /* 24px */
   }
 
   .nodata {
@@ -35,10 +35,10 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    // color: #686a66;
     font-size: 14px;
     font-weight: 400;
-    line-height: 150%; /* 21px */
+    line-height: 150%;
+    /* 21px */
     border-radius: 12px;
 
     @include theme {
@@ -46,22 +46,27 @@
     }
 
     height: 200px;
+
     span {
       margin-top: 8px;
     }
   }
 
   table {
+
     /* required css to make the rows rounded */
     thead {
       white-space: nowrap;
+
       th:first-child {
         border-top-left-radius: 24px;
       }
+
       th:last-child {
         border-top-right-radius: 24px;
       }
     }
+
     tbody {
       @include theme {
         background: theme-get('neutral-6');
@@ -78,6 +83,7 @@
       tr:last-child td:first-child {
         border-bottom-left-radius: 24px;
       }
+
       tr:last-child td:last-child {
         border-bottom-right-radius: 24px;
       }
@@ -85,29 +91,31 @@
 
     th {
       padding: 10px 24px;
+
       @include theme {
         color: theme-get('neutral-9');
       }
 
       font-size: 14px;
       font-weight: 400;
-      line-height: 150%; /* 21px */
+      line-height: 150%;
+      /* 21px */
       letter-spacing: 0.1px;
     }
 
     td {
       padding: 24px;
+
       @include theme {
         color: theme-get('neutral-text-text-dropdown');
       }
+
       font-size: 14px;
       font-weight: 400;
-      line-height: 100%; /* 27px */
+      line-height: 100%;
+      /* 27px */
     }
 
-    .alignRight {
-      // text-align: right;
-    }
   }
 
   .hash {
@@ -161,7 +169,7 @@
       color: theme-get('neutral-9');
     }
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
@@ -193,6 +201,7 @@
     @include theme {
       color: theme-get('neutral-9');
     }
+
     font-size: 14px;
     font-weight: 400;
     line-height: 100%;
@@ -209,9 +218,10 @@
     @include theme {
       color: theme-get('neutral-text-text-dropdown');
     }
+
     font-size: 14px;
     font-weight: 400;
-    line-height: 100%; /* 27px */
+    line-height: 100%;
 
     .item {
       width: 100%;
@@ -230,6 +240,7 @@
 
       .titleItem {
         margin-bottom: 12px;
+
         @include theme {
           color: theme-get('neutral-9');
         }
@@ -317,4 +328,4 @@
 .loadingDivWrapper {
   border-radius: 24px;
   background: rgba(79, 79, 79, 0.5);
-}
+}
\ No newline at end of file
diff --git a/src/pages/Pools/components/UnstakeLPModal/UnstakeLPModal.module.scss b/src/pages/Pools/components/UnstakeLPModal/UnstakeLPModal.module.scss
index fa20f36c3..ef6f00593 100644
--- a/src/pages/Pools/components/UnstakeLPModal/UnstakeLPModal.module.scss
+++ b/src/pages/Pools/components/UnstakeLPModal/UnstakeLPModal.module.scss
@@ -199,7 +199,6 @@
   }
 }
 
-//responsive
 @media (max-width: 575px) {
   .modal {
     .container {
diff --git a/src/pages/Pools/components/VolumeChart/index.tsx b/src/pages/Pools/components/VolumeChart/index.tsx
index b69fba724..63b959db5 100644
--- a/src/pages/Pools/components/VolumeChart/index.tsx
+++ b/src/pages/Pools/components/VolumeChart/index.tsx
@@ -33,19 +33,23 @@ const VolumeChart = ({
     // onClickChart
   } = useVolumeEventChart(filterDay, onUpdateCurrentItem, pair);
 
+  function handleResizeObserver(entries: ResizeObserverEntry[]) {
+    window.requestAnimationFrame((): void | undefined => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
+
+      const { width, height } = entries[0].contentRect;
+      chartRef.current.applyOptions({ width, height });
+      setTimeout(() => {
+        chartRef.current.timeScale().fitContent();
+      }, 0);
+    });
+  }
+
   useEffect(() => {
-    resizeObserver.current = new ResizeObserver((entries, b) => {
-      window.requestAnimationFrame((): void | undefined => {
-        if (!Array.isArray(entries) || !entries.length) {
-          return;
-        }
-
-        const { width, height } = entries[0].contentRect;
-        chartRef.current.applyOptions({ width, height });
-        setTimeout(() => {
-          chartRef.current.timeScale().fitContent();
-        }, 0);
-      });
+    resizeObserver.current = new ResizeObserver((entries) => {
+      handleResizeObserver(entries);
     });
 
     resizeObserver.current.observe(containerRef.current, {
diff --git a/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.module.scss b/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.module.scss
index 35b2ddfab..3a29ea549 100644
--- a/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.module.scss
+++ b/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.module.scss
@@ -240,7 +240,6 @@
   }
 }
 
-//responsive
 @media (max-width: 575px) {
   .modal {
     .container {
diff --git a/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.tsx b/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.tsx
index 8d6391ec9..ac61e9b5c 100644
--- a/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.tsx
+++ b/src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.tsx
@@ -1,4 +1,4 @@
-import { CW20_DECIMALS, ORAI, toAmount } from '@oraichain/oraidex-common';
+import { ORAI, toAmount } from '@oraichain/oraidex-common';
 import { ReactComponent as CloseIcon } from 'assets/icons/ic_close_modal.svg';
 import cn from 'classnames/bind';
 import { Button } from 'components/Button';
@@ -10,8 +10,8 @@ import { network } from 'config/networks';
 import { handleCheckAddress, handleErrorTransaction } from 'helper';
 import useConfigReducer from 'hooks/useConfigReducer';
 import CosmJs from 'libs/cosmjs';
-import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { useGetPoolDetail } from 'pages/Pools/hooks';
+import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { FC, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -32,25 +32,19 @@ export const WithdrawLiquidityModal: FC<ModalProps> = ({
   myLpBalance
 }) => {
   const [theme] = useConfigReducer('theme');
-  let { poolUrl } = useParams();
+  const { poolUrl } = useParams();
   const poolDetail = useGetPoolDetail({ pairDenoms: poolUrl });
 
   const { token1, token2, info: pairInfoData } = poolDetail;
   const { lpTokenInfoData, pairAmountInfoData } = useGetPairInfo(poolDetail);
   const lpPools = useSelector((state: RootState) => state.token.lpPools);
-  const [chosenWithdrawPercent, setChosenWithdrawPercent] = useState(-1);
   const [lpAmountBurn, setLpAmountBurn] = useState<bigint | null>(null);
   const [actionLoading, setActionLoading] = useState(false);
-  const [isFocus, setIsFocus] = useState(true);
 
   const lpTokenBalance = BigInt(pairInfoData ? lpPools[pairInfoData?.liquidityAddr]?.balance ?? '0' : 0);
   const token1Amount = BigInt(pairAmountInfoData?.token1Amount || 0);
   const token2Amount = BigInt(pairAmountInfoData?.token2Amount || 0);
 
-  const onChangeWithdrawPercent = (option: number) => {
-    setLpAmountBurn((toAmount(option, CW20_DECIMALS) * lpTokenBalance) / BigInt(100000000));
-  };
-
   const handleWithdrawLiquidity = async (amount: string) => {
     if (!pairInfoData) return;
     setActionLoading(true);
@@ -124,11 +118,6 @@ export const WithdrawLiquidityModal: FC<ModalProps> = ({
         />
 
         <div className={cx('detail')}>
-          {/* <div className={cx('arrow-down', theme)}>
-            <div className={cx('inner-arrow', theme)}>
-              <ArrowDownIcon />
-            </div>
-          </div> */}
           <div className={cx('row', theme)}>
             <div className={cx('row-title')}>
               <span>Receive</span>
diff --git a/src/pages/Pools/hooks/useLiquidityEventChart.ts b/src/pages/Pools/hooks/useLiquidityEventChart.ts
index 7c296cee5..37be7be5d 100644
--- a/src/pages/Pools/hooks/useLiquidityEventChart.ts
+++ b/src/pages/Pools/hooks/useLiquidityEventChart.ts
@@ -1,5 +1,4 @@
-import { sleep } from 'helper';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FILTER_DAY } from 'reducer/type';
 import axios from 'rest/request';
 
@@ -9,16 +8,11 @@ export const useLiquidityEventChart = (
   pair?: string
 ) => {
   const [currentDataLiquidity, setCurrentDataLiquidity] = useState([]);
-
-  const [isLoading, setIsLoading] = useState(false);
-
   const [currentItem, setCurrentItem] = useState<{
     value: number;
     time: string | number;
   }>({ value: 0, time: 0 });
 
-  const dataClick = useRef({ time: { day: 1, month: 1, year: 1 }, value: 0, clickedTwice: true });
-
   const onCrossMove = (item) => {
     setCurrentItem(item);
     onUpdateCurrentItem && onUpdateCurrentItem(item?.value || 0);
@@ -33,7 +27,6 @@ export const useLiquidityEventChart = (
 
   const onChangeRangeLiquidity = async (value: FILTER_DAY = FILTER_DAY.DAY) => {
     try {
-      setIsLoading(true);
       let data = [];
 
       if (pair) {
@@ -47,10 +40,8 @@ export const useLiquidityEventChart = (
         setCurrentItem({ ...data[data.length - 1] });
         onUpdateCurrentItem && onUpdateCurrentItem(data[data.length - 1]?.value || 0);
       }
-      setIsLoading(false);
     } catch (e) {
-      console.log('Liquidity ERROR: e', 'background: #FF0000; color:#FFFFFF', e);
-      setIsLoading(false);
+      console.log('Liquidity ERROR:', e);
     }
   };
 
diff --git a/src/pages/Pools/hooks/useVolumeEventChart.ts b/src/pages/Pools/hooks/useVolumeEventChart.ts
index 2fe68ba40..9558d0fca 100644
--- a/src/pages/Pools/hooks/useVolumeEventChart.ts
+++ b/src/pages/Pools/hooks/useVolumeEventChart.ts
@@ -11,12 +11,9 @@ export const useVolumeEventChart = (
 ) => {
   const [currentDataVolume, setCurrentDataVolume] = useState([]);
 
-  const [isLoading, setIsLoading] = useState(false);
-
   const [currentItem, setCurrentItem] = useState<{
     value: number;
     time: string | number;
-    //| { day: number; month: number; year: number };
   }>({ value: 0, time: 0 });
 
   const dataClick = useRef({ time: { day: 1, month: 1, year: 1 }, value: 0, clickedTwice: true });
@@ -29,22 +26,18 @@ export const useVolumeEventChart = (
   const onMouseVolumeLeave = () => {
     if (currentDataVolume.length > 0)
       if (dataClick.current.clickedTwice) {
-        let lastElt = currentDataVolume[currentDataVolume.length - 1];
+        const lastElt = currentDataVolume[currentDataVolume.length - 1];
         setCurrentItem({ time: lastElt.time, value: lastElt.value });
         onUpdateCurrentItem && onUpdateCurrentItem(lastElt?.value || 0);
       }
-    // else {
-    //   setCurrentItem({ time: dataClick.current.time, value: dataClick.current.value });
-    //   onUpdateCurrentItem && onUpdateCurrentItem(dataClick?.current?.value || 0);
-    // }
   };
 
   const onClickChart = (e) => {
-    let index = getInclude(currentDataVolume, (item) => {
+    const index = getInclude(currentDataVolume, (item) => {
       return item.time.year === e.time.year && item.time.month === e.time.month && item.time.day === e.time.day;
     });
     if (index > -1) {
-      let same =
+      const same =
         e.time.year === dataClick.current.time.year &&
         e.time.month === dataClick.current.time.month &&
         e.time.day === dataClick.current.time.day;
@@ -59,7 +52,6 @@ export const useVolumeEventChart = (
 
   const onChangeRangeVolume = async (value: FILTER_DAY = FILTER_DAY.DAY) => {
     try {
-      setIsLoading(true);
       let data = [];
 
       if (pair) {
@@ -73,11 +65,8 @@ export const useVolumeEventChart = (
         setCurrentItem({ ...data[data.length - 1] });
         onUpdateCurrentItem && onUpdateCurrentItem(data[data.length - 1]?.value || 0);
       }
-
-      setIsLoading(false);
     } catch (e) {
-      console.log('Volume ERROR: e', 'background: #FF0000; color:#FFFFFF', e);
-      setIsLoading(false);
+      console.log('Volume ERROR: e', e);
     }
   };
 
diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx
index 5add96709..43974a5b7 100644
--- a/src/pages/Pools/index.tsx
+++ b/src/pages/Pools/index.tsx
@@ -34,7 +34,6 @@ export type PoolTableData = PoolInfoResponse & {
 };
 
 const Pools: React.FC<{}> = () => {
-  const [isOpenNewPoolModal, setIsOpenNewPoolModal] = useState(false);
   const [isOpenNewTokenModal, setIsOpenNewTokenModal] = useState(false);
   const [filteredPools, setFilteredPools] = useState<PoolInfoResponse[]>([]);
 
diff --git a/src/pages/Staking/components/Collapse/index.module.scss b/src/pages/Staking/components/Collapse/index.module.scss
index e47d7394e..f17124e88 100644
--- a/src/pages/Staking/components/Collapse/index.module.scss
+++ b/src/pages/Staking/components/Collapse/index.module.scss
@@ -51,7 +51,6 @@
     font-weight: 400;
     line-height: 150%;
 
-    // transition: all ease-in-out 0.3s;
     padding: 0;
     max-height: 0px;
     overflow: hidden;
diff --git a/src/pages/Staking/components/Header/index.module.scss b/src/pages/Staking/components/Header/index.module.scss
index c88a89c44..3ecd132d0 100644
--- a/src/pages/Staking/components/Header/index.module.scss
+++ b/src/pages/Staking/components/Header/index.module.scss
@@ -3,12 +3,8 @@
 @import 'src/styles/themes';
 
 .headerWrapper {
-  // height: 298px;
   width: 100%;
 
-  // @include theme {
-  //   background: theme-get('bg-linear-highlight');
-  // }
 
   padding-top: 24px;
   padding-bottom: 24px;
diff --git a/src/pages/Staking/components/InputBalance/index.module.scss b/src/pages/Staking/components/InputBalance/index.module.scss
index f7eadeefc..532173563 100644
--- a/src/pages/Staking/components/InputBalance/index.module.scss
+++ b/src/pages/Staking/components/InputBalance/index.module.scss
@@ -106,7 +106,6 @@
 
       @include small-mobile {
         width: 100%;
-        // max-width: 100px;
         font-size: 14px;
       }
     }
diff --git a/src/pages/Staking/components/InputBalance/index.tsx b/src/pages/Staking/components/InputBalance/index.tsx
index 280a28c01..41b92fe7b 100644
--- a/src/pages/Staking/components/InputBalance/index.tsx
+++ b/src/pages/Staking/components/InputBalance/index.tsx
@@ -1,4 +1,3 @@
-import { isMobile } from '@walletconnect/browser-utils';
 import { useState } from 'react';
 import NumberFormat from 'react-number-format';
 import styles from './index.module.scss';
@@ -44,8 +43,6 @@ const InputBalance = ({
   const isInsufficient = amount && amount > toDisplay(balance);
   const disabled = loading || !amount || amount <= 0 || isInsufficient;
 
-  const isMobileMode = isMobile();
-
   return (
     <div className={styles.inputBalance}>
       <div className={styles.title}>
diff --git a/src/pages/Staking/components/StakeInfo/index.module.scss b/src/pages/Staking/components/StakeInfo/index.module.scss
index 3054b0ceb..f4368b031 100644
--- a/src/pages/Staking/components/StakeInfo/index.module.scss
+++ b/src/pages/Staking/components/StakeInfo/index.module.scss
@@ -49,9 +49,6 @@
     font-weight: 400;
     line-height: 100%;
 
-    // @include theme {
-    //   color: theme-get('primary-surface-default-dark');
-    // }
 
     @include theme {
       color: theme-get('primary-surface-default');
@@ -123,9 +120,6 @@
         color: theme-get('neutral-text-title-2');
       }
 
-      svg {
-      }
-
       @include medium-desktop {
         padding-bottom: 0;
       }
@@ -151,4 +145,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Staking/components/StakeInfo/index.tsx b/src/pages/Staking/components/StakeInfo/index.tsx
index 2e1fbb261..c2131d6f0 100644
--- a/src/pages/Staking/components/StakeInfo/index.tsx
+++ b/src/pages/Staking/components/StakeInfo/index.tsx
@@ -37,11 +37,9 @@ const StakeInfo = () => {
 
   const stakedAmount = myStakeRewardInfo?.stakedAmount || '0';
   const reward = myStakeRewardInfo?.rewardPending || '0';
-  const lockAmount = lockInfo?.lockAmount || '0';
 
   const stakeAmountUsd = getUsd(stakedAmount, ORAIX_TOKEN_INFO, prices);
   const rewardUsd = getUsd(reward, USDC_TOKEN_INFO, prices);
-  const lockUsd = getUsd(lockAmount, ORAIX_TOKEN_INFO, prices);
   const [openCompound, setOpenCompound] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [loadingCompound, setLoadingCompound] = useState<boolean>(false);
diff --git a/src/pages/Staking/components/StakeTab/index.tsx b/src/pages/Staking/components/StakeTab/index.tsx
index ebf388a67..f34123256 100644
--- a/src/pages/Staking/components/StakeTab/index.tsx
+++ b/src/pages/Staking/components/StakeTab/index.tsx
@@ -1,23 +1,12 @@
-import { ORAI, USDC_CONTRACT, toAmount } from '@oraichain/oraidex-common';
-import { ReactComponent as BlinkIcon } from 'assets/icons/blinkIcon.svg';
-import { ReactComponent as UsdcIcon } from 'assets/icons/usd_coin.svg';
+import { ORAI, toAmount } from '@oraichain/oraidex-common';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { network } from 'config/networks';
 import { handleCheckAddress, handleErrorTransaction } from 'helper';
-import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
-import useLoadTokens, { useLoadOraichainTokens } from 'hooks/useLoadTokens';
+import { useLoadOraichainTokens } from 'hooks/useLoadTokens';
 import CosmJs from 'libs/cosmjs';
-import { getUsd } from 'libs/utils';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
-import { MONTHLY_SECOND, ORAIX_TOKEN_INFO, USDC_TOKEN_INFO, YEARLY_SECOND } from 'pages/Staking/constants';
-import { calcAPY, calcYearlyReward } from 'pages/Staking/helpers';
-import {
-  useGetAllStakerRewardInfo,
-  useGetMyStakeRewardInfo,
-  useGetRewardPerSecInfo,
-  useGetStakeInfo
-} from 'pages/Staking/hooks';
+import { ORAIX_TOKEN_INFO } from 'pages/Staking/constants';
+import { useGetMyStakeRewardInfo, useGetStakeInfo } from 'pages/Staking/hooks';
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Type, generateMiningMsgs } from 'rest/api';
@@ -27,36 +16,15 @@ import styles from './index.module.scss';
 
 const StakeTab = () => {
   const [address] = useConfigReducer('address');
-  const { data: prices } = useCoinGeckoPrices();
   const amounts = useSelector((state: RootState) => state.token.amounts);
-  const loadTokenAmounts = useLoadTokens();
   const loadOraichainToken = useLoadOraichainTokens();
 
   const balance = amounts['oraix'];
   const [amount, setAmount] = useState<number>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const { rewardPerSec } = useGetRewardPerSecInfo(ORAIX_TOKEN_INFO.contractAddress);
-  const { stakeInfo, refetchStakeInfo } = useGetStakeInfo(ORAIX_TOKEN_INFO.contractAddress);
+  const { refetchStakeInfo } = useGetStakeInfo(ORAIX_TOKEN_INFO.contractAddress);
   const { refetchMyStakeRewardInfo } = useGetMyStakeRewardInfo(ORAIX_TOKEN_INFO.contractAddress, address);
-  // const { refetchAllStakerRewardInfo } = useGetAllStakerRewardInfo(ORAIX_TOKEN_INFO.contractAddress);
-
-  const rewardPerSecInfo = rewardPerSec?.[0] || {
-    amount: '0',
-    info: {
-      token: {
-        contract_addr: USDC_CONTRACT
-      }
-    },
-    token: USDC_TOKEN_INFO
-  };
-
-  const apy = calcAPY(rewardPerSecInfo.amount, stakeInfo?.total_bond_amount || '0', prices);
-  const yearlyReward = calcYearlyReward(amount, apy, prices) || 0;
-  const monthlyReward = (MONTHLY_SECOND / YEARLY_SECOND) * yearlyReward;
-
-  const monthlyUSD = getUsd(toAmount(monthlyReward), rewardPerSecInfo.token, prices);
-  const yearlyUSD = getUsd(toAmount(yearlyReward), rewardPerSecInfo.token, prices);
 
   const handleBond = async () => {
     if (!amount) return displayToast(TToastType.TX_FAILED, { message: 'Stake Amount is required' });
@@ -89,7 +57,6 @@ const StakeTab = () => {
 
         refetchMyStakeRewardInfo();
         refetchStakeInfo();
-        // refetchAllStakerRewardInfo();
         loadOraichainToken(address, [ORAIX_TOKEN_INFO.contractAddress]);
       }
     } catch (error) {
@@ -103,43 +70,6 @@ const StakeTab = () => {
   return (
     <div className={styles.stakeTab}>
       <InputBalance loading={loading} onSubmit={handleBond} balance={balance} amount={amount} setAmount={setAmount} />
-
-      {/* <div className={styles.result}>
-        <div className={styles.header}>
-          <span>You’ll earn</span>
-
-          <div className={styles.highlight}>
-            <BlinkIcon />
-            <span>More benefits to come</span>
-          </div>
-        </div>
-
-        <div className={styles.list}>
-          <div className={styles.item}>
-            <div className={styles.title}>
-              <div className={styles.usd}>{formatDisplayUsdt(monthlyUSD)}</div>
-              <span>Monthly</span>
-            </div>
-
-            <div className={styles.value}>
-              <UsdcIcon />
-              <span>{numberWithCommas(monthlyReward)}</span>
-            </div>
-          </div>
-
-          <div className={styles.item}>
-            <div className={styles.title}>
-              <div className={styles.usd}>{formatDisplayUsdt(yearlyUSD)}</div>
-              <span>Yearly</span>
-            </div>
-
-            <div className={styles.value}>
-              <UsdcIcon />
-              <span>{numberWithCommas(yearlyReward)}</span>
-            </div>
-          </div>
-        </div>
-      </div> */}
     </div>
   );
 };
diff --git a/src/pages/Staking/components/UnStakeTab/index.module.scss b/src/pages/Staking/components/UnStakeTab/index.module.scss
index 54bfacb58..3b9f908a9 100644
--- a/src/pages/Staking/components/UnStakeTab/index.module.scss
+++ b/src/pages/Staking/components/UnStakeTab/index.module.scss
@@ -204,7 +204,6 @@
             height: 24px;
             width: 24px;
             border-radius: 99px;
-            //   background: conic-gradient(#232521 80%, #efefef 80%);
           }
         }
       }
diff --git a/src/pages/Staking/index.module.scss b/src/pages/Staking/index.module.scss
index 3acdf7780..fc999a879 100644
--- a/src/pages/Staking/index.module.scss
+++ b/src/pages/Staking/index.module.scss
@@ -46,9 +46,6 @@
   .action {
     width: calc(66% - 40px);
 
-    // @include medium-desktop {
-    //   width: calc(54% - 40px);
-    // }
 
     @include mobile {
       width: 100%;
@@ -58,9 +55,6 @@
   .info {
     width: 34%;
 
-    // @include medium-desktop {
-    //   width: 44%;
-    // }
 
     @include mobile {
       width: 100%;
diff --git a/src/pages/UniversalSwap/Component/AssetsTab.tsx b/src/pages/UniversalSwap/Component/AssetsTab.tsx
index bbf5a72d7..6d8c128f2 100644
--- a/src/pages/UniversalSwap/Component/AssetsTab.tsx
+++ b/src/pages/UniversalSwap/Component/AssetsTab.tsx
@@ -10,7 +10,7 @@ import { tokensIcon } from 'config/chainInfos';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getTotalUsd, toSumDisplay } from 'libs/utils';
-import { formatDisplayUsdt, numberWithCommas, toFixedIfNecessary } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, toFixedIfNecessary } from 'pages/Pools/helpers';
 import { useGetMyStake } from 'pages/Pools/hooks';
 import { FC, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -61,6 +61,12 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => {
     ];
   }
 
+  const checkShouldHide = (value: number) => {
+    const SMALL_BALANCE = 0.5;
+    const isHide = hideOtherSmallAmount && value < SMALL_BALANCE;
+    return isHide;
+  };
+
   const data = flattenTokens
     .reduce((result, token) => {
       // not display because it is evm map and no bridge to option, also no smart contract and is ibc native
@@ -70,12 +76,12 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => {
           const amount = BigInt(amounts[token.denom] ?? 0);
           const isHaveSubAmounts = token.contractAddress && token.evmDenoms;
           const subAmounts = isHaveSubAmounts ? getSubAmountDetails(amounts, token) : {};
-          const totalAmount = amount + (isHaveSubAmounts ? toAmount(toSumDisplay(subAmounts), token.decimals) : 0n);
-          const value = toDisplay(totalAmount.toString(), token.decimals) * (prices[token.coinGeckoId] || 0);
+          const totalAmount = amount + toAmount(toSumDisplay(subAmounts), token.decimals);
+
+          const tokenPrice = prices[token.coinGeckoId] || 0;
+          const value = toDisplay(totalAmount.toString(), token.decimals) * tokenPrice;
 
-          const SMALL_BALANCE = 0.5;
-          const isHide = hideOtherSmallAmount && value < SMALL_BALANCE;
-          if (isHide) return result;
+          if (checkShouldHide(value)) return result;
 
           const tokenIcon = tokensIcon.find((tIcon) => tIcon.coinGeckoId === token.coinGeckoId);
           result.push({
@@ -83,7 +89,7 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => {
             chain: token.org,
             icon: tokenIcon?.Icon,
             iconLight: tokenIcon?.IconLight,
-            price: prices[token.coinGeckoId] || 0,
+            price: tokenPrice,
             balance: toDisplay(totalAmount.toString(), token.decimals),
             denom: token.denom,
             value,
diff --git a/src/pages/UniversalSwap/Component/ChartUsdPrice.tsx b/src/pages/UniversalSwap/Component/ChartUsdPrice.tsx
index eeac8bc74..c2ac544dc 100644
--- a/src/pages/UniversalSwap/Component/ChartUsdPrice.tsx
+++ b/src/pages/UniversalSwap/Component/ChartUsdPrice.tsx
@@ -46,19 +46,23 @@ const ChartUsdPrice = ({
     onUpdatePricePercent
   );
 
-  useEffect(() => {
-    resizeObserver.current = new ResizeObserver((entries, b) => {
-      window.requestAnimationFrame((): void | undefined => {
-        if (!Array.isArray(entries) || !entries.length) {
-          return;
-        }
+  function handleResizeObserver(entries: ResizeObserverEntry[]) {
+    window.requestAnimationFrame((): void | undefined => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
 
-        const { width, height } = entries[0].contentRect;
-        chartRef.current.applyOptions({ width, height });
-        setTimeout(() => {
-          chartRef.current.timeScale().fitContent();
-        }, 0);
-      });
+      const { width, height } = entries[0].contentRect;
+      chartRef.current.applyOptions({ width, height });
+      setTimeout(() => {
+        chartRef.current.timeScale().fitContent();
+      }, 0);
+    });
+  }
+
+  useEffect(() => {
+    resizeObserver.current = new ResizeObserver((entries) => {
+      handleResizeObserver(entries);
     });
 
     resizeObserver.current.observe(containerRef.current, {
diff --git a/src/pages/UniversalSwap/Component/HeaderTab.module.scss b/src/pages/UniversalSwap/Component/HeaderTab.module.scss
index 523649938..3d2fb9364 100644
--- a/src/pages/UniversalSwap/Component/HeaderTab.module.scss
+++ b/src/pages/UniversalSwap/Component/HeaderTab.module.scss
@@ -179,7 +179,6 @@
   }
 
   @include theme {
-    // color: $neutron-text-body-light;
     color: theme-get('neutral-1');
   }
 
diff --git a/src/pages/UniversalSwap/Component/HeaderTab.tsx b/src/pages/UniversalSwap/Component/HeaderTab.tsx
index 7dffe8190..943bf6a7e 100644
--- a/src/pages/UniversalSwap/Component/HeaderTab.tsx
+++ b/src/pages/UniversalSwap/Component/HeaderTab.tsx
@@ -1,10 +1,11 @@
+import { isMobile } from '@walletconnect/browser-utils';
 import ChartImg from 'assets/icons/chart.svg';
 import HideImg from 'assets/icons/show.svg';
 import { ReactComponent as DefaultIcon } from 'assets/icons/tokens.svg';
 import cn from 'classnames/bind';
+import { flattenTokensWithIcon } from 'config/chainInfos';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useTheme from 'hooks/useTheme';
-import useWindowSize from 'hooks/useWindowSize';
 import { numberWithCommas, reverseSymbolArr } from 'pages/Pools/helpers';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -23,8 +24,6 @@ import { FILTER_TIME_CHART, TAB_CHART_SWAP } from 'reducer/type';
 import { calculateFinalPriceChange } from '../helpers';
 import { ChartTokenType } from '../hooks/useChartUsdPrice';
 import styles from './HeaderTab.module.scss';
-import { isMobile } from '@walletconnect/browser-utils';
-import { flattenTokensWithIcon } from 'config/chainInfos';
 
 const cx = cn.bind(styles);
 
@@ -55,7 +54,6 @@ export const HeaderTab: React.FC<HeaderTabPropsType> = ({
   setChartTokenType,
   showTokenInfo = true
 }) => {
-  const { isSmallMobileView } = useWindowSize();
   const filterTime = useSelector(selectCurrentSwapFilterTime);
   const tab = useSelector(selectCurrentSwapTabChart);
   const dispatch = useDispatch();
@@ -179,21 +177,10 @@ export const UsdPrice = ({
   const isOchOraiPair = baseDenom === 'OCH' && quoteDenom === 'ORAI';
   const currentPrice = isOchOraiPair ? priceChange.price * prices['oraichain-token'] : priceChange.price;
 
-  return (
-    <div className={cx('priceUsd')}>
-      {tab === TAB_CHART_SWAP.TOKEN ? (
-        <div>
-          <span>${!priceUsd ? '--' : numberWithCommas(priceUsd, undefined, { maximumFractionDigits: 6 })}</span>
-          <span
-            className={cx('percent', isIncrementUsd ? 'increment' : 'decrement', {
-              hidePercent: chartTokenType === ChartTokenType.Volume
-            })}
-          >
-            {(isIncrementUsd ? '+' : '') + Number(percentChangeUsd).toFixed(2)}%
-          </span>
-        </div>
-      ) : (
-        !priceChange.isError && (
+  const headerTabAdvance = () => {
+    return priceChange.isError
+      ? null
+      : priceChange.isError && (
           <div className={cx('bottom')}>
             <div className={cx('balance')}>
               {`1 ${baseDenom} ≈ ${
@@ -204,10 +191,25 @@ export const UsdPrice = ({
               {(isIncrement ? '+' : '') + percentPriceChange.toFixed(2)}%
             </div>
           </div>
-        )
-      )}
-    </div>
-  );
+        );
+  };
+
+  const headerTabSimple = () => {
+    return (
+      <div>
+        <span>${!priceUsd ? '--' : numberWithCommas(priceUsd, undefined, { maximumFractionDigits: 6 })}</span>
+        <span
+          className={cx('percent', isIncrementUsd ? 'increment' : 'decrement', {
+            hidePercent: chartTokenType === ChartTokenType.Volume
+          })}
+        >
+          {(isIncrementUsd ? '+' : '') + Number(percentChangeUsd).toFixed(2)}%
+        </span>
+      </div>
+    );
+  };
+
+  return <div className={cx('priceUsd')}>{tab === TAB_CHART_SWAP.TOKEN ? headerTabSimple() : headerTabAdvance()}</div>;
 };
 
 export const HeaderTop = ({
@@ -231,21 +233,24 @@ export const HeaderTop = ({
   const currentToChain = useSelector(selectCurrentToChain);
   const currentToToken = useSelector(selectCurrentToToken);
 
-  const { isSmallMobileView } = useWindowSize();
-
   const mobileMode = isMobile();
   let [ToTokenIcon, FromTokenIcon] = [DefaultIcon, DefaultIcon];
+
+  const generateIconTokenByTheme = (token) => {
+    return theme === 'light' ? token.IconLight : token.Icon;
+  };
+
   if (currentToToken) {
     const tokenIcon = flattenTokensWithIcon.find(
       (tokenWithIcon) => tokenWithIcon.coinGeckoId === currentToToken.coinGeckoId
     );
-    if (tokenIcon) ToTokenIcon = theme === 'light' ? tokenIcon.IconLight : tokenIcon.Icon;
+    if (tokenIcon) ToTokenIcon = generateIconTokenByTheme(tokenIcon);
   }
   if (currentFromToken) {
     const tokenIcon = flattenTokensWithIcon.find(
       (tokenWithIcon) => tokenWithIcon.coinGeckoId === currentFromToken.coinGeckoId
     );
-    if (tokenIcon) FromTokenIcon = theme === 'light' ? tokenIcon.IconLight : tokenIcon.Icon;
+    if (tokenIcon) FromTokenIcon = generateIconTokenByTheme(tokenIcon);
   }
 
   return (
diff --git a/src/pages/UniversalSwap/Component/HistoryTab.tsx b/src/pages/UniversalSwap/Component/HistoryTab.tsx
index 303403591..f1cc34913 100644
--- a/src/pages/UniversalSwap/Component/HistoryTab.tsx
+++ b/src/pages/UniversalSwap/Component/HistoryTab.tsx
@@ -1,20 +1,17 @@
 import ArrowImg from 'assets/icons/arrow_right.svg';
-import { ReactComponent as SuccessIcon } from 'assets/icons/ic_status_done.svg';
-import { ReactComponent as ErrorIcon } from 'assets/icons/ic_status_failed.svg';
 import OpenNewWindowImg from 'assets/icons/open_new_window.svg';
 import cn from 'classnames/bind';
 import { FallbackEmptyData } from 'components/FallbackEmptyData';
 import { Table, TableHeaderProps } from 'components/Table';
 import { chainInfosWithIcon, flattenTokensWithIcon } from 'config/chainInfos';
-import { network } from 'config/networks';
 import useTheme from 'hooks/useTheme';
 import { TransactionHistory } from 'libs/duckdb';
 import { reduceString, timeSince } from 'libs/utils';
 import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { useState } from 'react';
+import { getExplorerScan } from '../helpers';
 import { useGetTransHistory } from '../Swap/hooks';
 import styles from './HistoryTab.module.scss';
-import { getExplorerScan } from '../helpers';
-import { useState } from 'react';
 
 const cx = cn.bind(styles);
 const RowsComponent: React.FC<{
@@ -33,24 +30,10 @@ const RowsComponent: React.FC<{
   ];
   if (!fromChain || !toChain) return <></>;
 
-  const generateTransactionStatus = (status: string) => {
-    if (status === 'error') return <ErrorIcon />;
-    if (status === 'success') return <SuccessIcon />;
-    return (
-      <div className={styles.loadingTrans}>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    );
-  };
-
   return (
     <div>
       <div className={styles.history}>
         {/* TODO: show later */}
-        {/* <div className={styles.status}>{generateTransactionStatus(rows.status)}</div> */}
         <div className={styles.time}>
           <div className={styles.type}>{rows.type}</div>
           <div className={styles.timestamp}>{timeSince(Number(rows.timestamp))}</div>
@@ -132,6 +115,7 @@ export const HistoryTab: React.FC<{
 }> = ({ networkFilter }) => {
   const { transHistory } = useGetTransHistory();
   const [selectedData, setSelectedData] = useState(null);
+  console.log({ selectedData });
 
   const headers: TableHeaderProps<TransactionHistory> = {
     assets: {
@@ -143,35 +127,24 @@ export const HistoryTab: React.FC<{
   };
 
   return (
-    <>
-      <div className={cx('historyTab')}>
-        {/* <div className={cx('info')}>
-        <div className={cx('filter')}>
-          <img src={FilterIcon} className={cx('filter-icon')} alt="filter" />
-          <span className={cx('filter-title')}>Transaction</span>
-        </div>
-        <div className={cx('search')}>
-          <SearchInput placeholder="Search by address, asset, type" onSearch={(tokenName) => {}} />
-        </div>
-      </div> */}
-        <div className={styles.historyData}>
-          <h2>Latest 20 transactions</h2>
-          {transHistory && transHistory.length > 0 ? (
-            <Table
-              headers={headers}
-              data={transHistory}
-              stylesColumn={{
-                padding: '16px 0'
-              }}
-              handleClickRow={(e, data) => {
-                setSelectedData(data);
-              }}
-            />
-          ) : (
-            <FallbackEmptyData />
-          )}
-        </div>
+    <div className={cx('historyTab')}>
+      <div className={styles.historyData}>
+        <h2>Latest 20 transactions</h2>
+        {transHistory && transHistory.length > 0 ? (
+          <Table
+            headers={headers}
+            data={transHistory}
+            stylesColumn={{
+              padding: '16px 0'
+            }}
+            handleClickRow={(e, data) => {
+              setSelectedData(data);
+            }}
+          />
+        ) : (
+          <FallbackEmptyData />
+        )}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/src/pages/UniversalSwap/Component/StepByStep.module.scss b/src/pages/UniversalSwap/Component/StepByStep.module.scss
index 26eafb6ba..fa7429bb8 100644
--- a/src/pages/UniversalSwap/Component/StepByStep.module.scss
+++ b/src/pages/UniversalSwap/Component/StepByStep.module.scss
@@ -53,10 +53,10 @@
         &::before {
           content: url('../../../assets/images/iconoir_check.png');
           @include theme() {
-            border-color: theme-get('sea-stone-200'); // green;
-            color: theme-get('sea-stone-200'); // green
-            border: 1px solid theme-get('sea-stone-200'); // #2f5711;
-            background: theme-get('sea-stone-200'); // #aee67f;
+            border-color: theme-get('sea-stone-200'); 
+            color: theme-get('sea-stone-200'); 
+            border: 1px solid theme-get('sea-stone-200'); 
+            background: theme-get('sea-stone-200'); 
           }
         }
       }
diff --git a/src/pages/UniversalSwap/Modals/SelectTokenModalV2.module.scss b/src/pages/UniversalSwap/Modals/SelectTokenModalV2.module.scss
index e40f5256c..9706aa654 100644
--- a/src/pages/UniversalSwap/Modals/SelectTokenModalV2.module.scss
+++ b/src/pages/UniversalSwap/Modals/SelectTokenModalV2.module.scss
@@ -15,7 +15,6 @@
   height: calc(100% - 200px);
   max-height: 700px;
   max-width: 460px;
-  // overflow-y: auto;
   position: relative;
   z-index: 30;
   font-weight: 600;
diff --git a/src/pages/UniversalSwap/Modals/SettingTooltip/SettingTooltip.module.scss b/src/pages/UniversalSwap/Modals/SettingTooltip/SettingTooltip.module.scss
index 8e29d1caa..351ab537d 100644
--- a/src/pages/UniversalSwap/Modals/SettingTooltip/SettingTooltip.module.scss
+++ b/src/pages/UniversalSwap/Modals/SettingTooltip/SettingTooltip.module.scss
@@ -39,23 +39,4 @@
 .flex {
   @include flex(flex-start);
   display: inline-flex;
-}
-.icon {
-  // color: fade-out($slate, 0.25);
-  // cursor: pointer;
-  // background: $cultured;
-  // border-radius: 8px;
-  // padding: 12px;
-
-  // @include theme() {
-  //   background-color: theme-get('bg-color-secondary');
-  // }
-
-  svg {
-    path {
-      // @include theme() {
-      //   fill: theme-get('svg-fill-color');
-      // }
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/pages/UniversalSwap/Modals/SmartRouteModal.module.scss b/src/pages/UniversalSwap/Modals/SmartRouteModal.module.scss
index c186d31b6..c8066710e 100644
--- a/src/pages/UniversalSwap/Modals/SmartRouteModal.module.scss
+++ b/src/pages/UniversalSwap/Modals/SmartRouteModal.module.scss
@@ -14,7 +14,6 @@
 
     z-index: 1;
     width: 100%;
-    // height: 100%;
 
     border: 1px solid $dropdown-border-color-light;
   }
diff --git a/src/pages/UniversalSwap/Swap/components/AddressBook/index.module.scss b/src/pages/UniversalSwap/Swap/components/AddressBook/index.module.scss
index 4da2a582d..a068edcfe 100644
--- a/src/pages/UniversalSwap/Swap/components/AddressBook/index.module.scss
+++ b/src/pages/UniversalSwap/Swap/components/AddressBook/index.module.scss
@@ -135,7 +135,8 @@ $padding-default: 16px;
 
       font-size: 14px;
       font-weight: 400;
-      line-height: 150%; /* 21px */
+      line-height: 150%;
+      /* 21px */
 
       .titleNodata {
         @include theme {
@@ -144,7 +145,8 @@ $padding-default: 16px;
 
         font-size: 14px;
         font-weight: 400;
-        line-height: 150%; /* 21px */
+        line-height: 150%;
+        /* 21px */
       }
     }
 
@@ -187,6 +189,7 @@ $padding-default: 16px;
           align-items: center;
 
           border-radius: 20px;
+
           @include theme {
             background: theme-get('neutral-surface-bg-section-6');
           }
@@ -208,12 +211,6 @@ $padding-default: 16px;
             vertical-align: middle;
             width: 30px;
             height: 30px;
-
-            @include theme {
-              path {
-                // stroke: theme-get('neutral-text-text-token-name-2');
-              }
-            }
           }
         }
 
@@ -227,18 +224,22 @@ $padding-default: 16px;
             @include theme {
               color: theme-get('neutral-text-text-token-name-2');
             }
+
             font-size: 16px;
             font-weight: 500;
-            line-height: 150%; /* 24px */
+            line-height: 150%;
+            /* 24px */
           }
 
           .address {
             @include theme {
               color: theme-get('neutral-text-title-2');
             }
+
             font-size: 12px;
             font-weight: 500;
-            line-height: 150%; /* 18px */
+            line-height: 150%;
+            /* 18px */
 
             word-break: break-word;
           }
@@ -260,7 +261,8 @@ $padding-default: 16px;
 
               font-size: 12px;
               font-weight: 500;
-              line-height: 150%; /* 18px */
+              line-height: 150%;
+              /* 18px */
             }
 
             .memo {
@@ -274,11 +276,13 @@ $padding-default: 16px;
 
               font-size: 12px;
               font-weight: 500;
-              line-height: 150%; /* 18px */
+              line-height: 150%;
+              /* 18px */
             }
           }
         }
       }
+
       .edit {
         cursor: pointer;
 
@@ -339,7 +343,8 @@ $padding-default: 16px;
 
   font-size: 14px;
   font-weight: 500;
-  line-height: 150%; /* 21px */
+  line-height: 150%;
+  /* 21px */
 
   span {
     color: $yellow-brown-color;
@@ -357,6 +362,7 @@ $padding-default: 16px;
 
   &.dark {
     background: $warning-surface-default-subtle;
+
     span {
       color: $warning-surface-default;
     }
@@ -367,4 +373,4 @@ $padding-default: 16px;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/UniversalSwap/Swap/components/InputCommon/index.module.scss b/src/pages/UniversalSwap/Swap/components/InputCommon/index.module.scss
index e191299bd..7e8932448 100644
--- a/src/pages/UniversalSwap/Swap/components/InputCommon/index.module.scss
+++ b/src/pages/UniversalSwap/Swap/components/InputCommon/index.module.scss
@@ -77,7 +77,6 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    // gap: 8px;
 
     .title {
       display: flex;
@@ -100,9 +99,6 @@
       padding: 0;
       height: 0;
 
-      // @include small-mobile {
-      //   width: 70%;
-      // }
 
       &.activeInput {
         height: 100%;
diff --git a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss
index ff89c1553..e7448b8c9 100644
--- a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss
+++ b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.module.scss
@@ -98,11 +98,12 @@
         font-size: 24px;
       }
     }
+
     .usd {
       @include theme() {
         color: theme-get('colors-neutral-text-body');
       }
-      // max-width: 100%;
+
       display: flex;
       justify-content: flex-end;
     }
@@ -113,7 +114,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // padding-bottom: 16px;
   padding-bottom: 10px;
   font-size: 14px;
 
@@ -238,16 +238,14 @@
       }
     }
 
-    & > span {
+    &>span {
       text-align: right;
     }
 
     &.is-enable-coeff {
       cursor: pointer;
-      &:hover {
-        // font-weight: 500;
-      }
     }
+
     .coeff {
       display: flex;
       gap: 6px;
@@ -280,4 +278,4 @@
   padding-top: 6px;
   font-size: 14px;
   font-weight: 400;
-}
+}
\ No newline at end of file
diff --git a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx
index 92aecdf29..62def98b2 100644
--- a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx
+++ b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx
@@ -148,7 +148,7 @@ export default function InputSwapV4({
                 return !floatValue || (floatValue >= 0 && floatValue <= 1e14);
               }}
               onValueChange={({ floatValue }) => {
-                onChangeAmount && onChangeAmount(floatValue);
+                onChangeAmount?.(floatValue);
               }}
             />
           </div>
diff --git a/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.module.scss b/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.module.scss
index 1f1924022..e79615f5c 100644
--- a/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.module.scss
+++ b/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.module.scss
@@ -11,6 +11,7 @@
 
   transition: all 0.3s;
   transform: translateY(100%);
+
   &.active {
     transform: translateY(0);
   }
@@ -31,11 +32,13 @@
 
 .selectChain {
   border-radius: 12px;
+
   @include theme() {
     background-color: theme-get('colors-neutral-surface-bg');
     color: theme-get('colors-neutral-text-text-token-name');
     border: 1px solid theme-get('colors-neutral-border-border-bold');
   }
+
   overflow: auto;
   padding: 16px;
   display: flex;
@@ -48,12 +51,14 @@
 
   transition: all 0.5s;
   transform: translateY(100%);
+
   &.active {
     transform: translateY(0);
   }
 
   font-family: 'IBM Plex Sans';
   font-style: normal;
+
   .selectChainHeader {
     display: flex;
     justify-content: space-between;
@@ -71,9 +76,6 @@
     }
   }
 
-  .selectChainSearch {
-  }
-
   .selectChainNetwork {
     .selectChainNetworkTitle {
       font-size: 14px;
@@ -95,12 +97,15 @@
         padding: 8px;
         height: 40px;
         text-align: center;
+
         @include theme() {
           background: theme-get('colors-neutral-surface-bg-section-2');
         }
+
         border-radius: 99px;
         width: calc(100% / 7);
         border: 1px solid inherit;
+
         &:hover {
           @include theme() {
             border: 1px solid theme-get('colors-neutral-surface-bg-dropdown-hover');
@@ -138,9 +143,11 @@
       @include theme() {
         color: theme-get('colors-neutral-text-title');
       }
+
       font-size: 18px;
       line-height: 150%;
     }
+
     .selectChainItems {
       font-size: 18px;
       font-weight: 500;
@@ -150,13 +157,16 @@
 
       .selectChainItemAll {
         margin-bottom: 10px;
+
         @include theme() {
           border-bottom: 1px solid theme-get('colors-neutral-surface-bg-dropdown-hover');
         }
       }
+
       .selectChainItem {
         &:hover {
           border-radius: 6px;
+
           @include theme() {
             background-color: theme-get('colors-neutral-surface-bg-dropdown-hover');
           }
@@ -172,6 +182,7 @@
         height: 66px;
 
         cursor: pointer;
+
         .selectChainItemLeft {
           display: flex;
           align-items: center;
@@ -185,4 +196,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/UniversalSwap/Swap/components/SelectToken/SelectToken.tsx b/src/pages/UniversalSwap/Swap/components/SelectToken/SelectToken.tsx
index 93efb3a31..d12c01ef0 100644
--- a/src/pages/UniversalSwap/Swap/components/SelectToken/SelectToken.tsx
+++ b/src/pages/UniversalSwap/Swap/components/SelectToken/SelectToken.tsx
@@ -1,22 +1,17 @@
-import { CoinIcon, TokenItemType, CustomChainInfo, truncDecimals, toDisplay } from '@oraichain/oraidex-common';
-import { TokenInfo } from 'types/token';
-import styles from './SelectToken.module.scss';
-import SearchInput from 'components/SearchInput';
-import cn from 'classnames/bind';
-import { chainIcons, flattenTokensWithIcon } from 'config/chainInfos';
-import { ReactComponent as OraiIcon } from 'assets/icons/oraichain.svg';
+import { CustomChainInfo, TokenItemType, truncDecimals } from '@oraichain/oraidex-common';
 import { ReactComponent as IconoirCancel } from 'assets/icons/iconoir_cancel.svg';
-import { ReactComponent as NoResultLight } from 'assets/images/no-result.svg';
 import { ReactComponent as NoResultDark } from 'assets/images/no-result-dark.svg';
-import { ReactComponent as WarningIcon } from 'assets/icons/warning_icon.svg';
-
-import { getUsd, toSumDisplay } from 'libs/utils';
-import { getSubAmountDetails } from 'rest/api';
+import { ReactComponent as NoResultLight } from 'assets/images/no-result.svg';
+import cn from 'classnames/bind';
+import SearchInput from 'components/SearchInput';
+import { chainIcons, flattenTokensWithIcon } from 'config/chainInfos';
+import styles from './SelectToken.module.scss';
+import { Themes } from 'context/theme-context';
 import { CoinGeckoPrices } from 'hooks/useCoingecko';
+import { toSumDisplay } from 'libs/utils';
 import { formatDisplayUsdt } from 'pages/Pools/helpers';
-import React, { useState, useEffect } from 'react';
-import { Themes } from 'context/theme-context';
-import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { getSubAmountDetails } from 'rest/api';
 
 const cx = cn.bind(styles);
 interface InputSwapProps {
@@ -80,15 +75,8 @@ export default function SelectToken({
       (textSearch ? item.name.toLowerCase().includes(textSearch.toLowerCase()) : true)
   );
 
-  const unsupportedTokens = [].filter(
-    (item) =>
-      (textChain ? item.chainId === textChain : true) &&
-      (textSearch ? item.name.toLowerCase().includes(textSearch.toLowerCase()) : true)
-  );
-
   return (
     <>
-      {/* {isSelectToken && <div className={styles.selectTokenOverlay} onClick={() => setIsSelectToken(false)}></div>} */}
       <div className={`${styles.selectToken} ${isSelectToken ? styles.active : ''}`}>
         <div className={styles.selectTokenHeader}>
           <div />
@@ -144,7 +132,6 @@ export default function SelectToken({
                   sumAmountDetails = { ...sumAmountDetails, ...subAmounts };
                   sumAmount = toSumDisplay(sumAmountDetails);
                 }
-                // const usd = getUsd(BigInt(sumAmount), token, prices);
                 const balance = sumAmount > 0 ? sumAmount.toFixed(truncDecimals) : '0';
                 const usd =
                   sumAmount > 0 && token && prices[token.coinGeckoId] ? sumAmount * prices[token.coinGeckoId] : '0';
diff --git a/src/pages/UniversalSwap/Swap/components/TooltipSwapBridge/index.module.scss b/src/pages/UniversalSwap/Swap/components/TooltipSwapBridge/index.module.scss
index 15645b7ed..903142de6 100644
--- a/src/pages/UniversalSwap/Swap/components/TooltipSwapBridge/index.module.scss
+++ b/src/pages/UniversalSwap/Swap/components/TooltipSwapBridge/index.module.scss
@@ -2,10 +2,8 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  // background-color: #232521;
   padding: 10px;
 
-  // border-radius: 8px;
   .tooltipUniversalSwapType {
     text-align: center;
     text-transform: capitalize;
diff --git a/src/pages/UniversalSwap/Swap/hooks/useCalculateDataSwap.ts b/src/pages/UniversalSwap/Swap/hooks/useCalculateDataSwap.ts
index 74331db7f..f28190d3e 100644
--- a/src/pages/UniversalSwap/Swap/hooks/useCalculateDataSwap.ts
+++ b/src/pages/UniversalSwap/Swap/hooks/useCalculateDataSwap.ts
@@ -76,8 +76,8 @@ const useCalculateDataSwap = ({ originalFromToken, originalToToken, fromToken, t
   const usdPriceShowFrom = (prices?.[originalFromToken?.coinGeckoId] * fromAmountToken).toFixed(6);
   const usdPriceShowTo = (prices?.[originalToToken?.coinGeckoId] * simulateData?.displayAmount).toFixed(6);
 
-  const isAverageRatio = averageRatio && averageRatio.amount;
-  const isSimulateDataDisplay = simulateData && simulateData.displayAmount;
+  const isAverageRatio = averageRatio?.amount;
+  const isSimulateDataDisplay = simulateData?.displayAmount;
   const minimumReceive =
     isAverageRatio && fromAmountTokenBalance
       ? calculateMinReceive(
diff --git a/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts b/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts
index d27f2a3b2..75679450a 100644
--- a/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts
+++ b/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts
@@ -20,8 +20,8 @@ export const useSwapFee = ({ fromToken, toToken }) => {
   useEffect(() => {
     if (!fromToken || !toToken) return;
 
-    const { denom: fromDenom, name: fromName = '', chainId: fromChainId } = fromToken;
-    const { denom: toDenom, name: toName = '', chainId: toChainId } = toToken;
+    const { name: fromName = '', chainId: fromChainId } = fromToken;
+    const { name: toName = '', chainId: toChainId } = toToken;
 
     // case: same chainId as evm, or bnb => swap fee = 0
     // case: same Token Name and !== chainId => bridge token => swap fee = 0
diff --git a/src/pages/UniversalSwap/Swap/index.module.scss b/src/pages/UniversalSwap/Swap/index.module.scss
index 81bd0263f..c035134ae 100644
--- a/src/pages/UniversalSwap/Swap/index.module.scss
+++ b/src/pages/UniversalSwap/Swap/index.module.scss
@@ -714,7 +714,6 @@
   line-height: 150%;
   /* identical to box height, or 21px */
 
-  // text-align: center;
   font-feature-settings: 'ss03' on;
 
   /* aiRight/Gray 3 */
@@ -736,7 +735,6 @@
       width: 70%;
       display: flex;
       justify-content: flex-start;
-      // align-items: center;
       gap: 5px;
     }
 
@@ -850,7 +848,6 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  // transition: all 0.2s ease;
   visibility: visible;
 
   &.hidden {
@@ -884,7 +881,6 @@
         flex: 1;
 
         .smart-router-item-line-detail {
-          // background: linear-gradient(90deg, #2f5711 0%, #78ca11 42.71%, #d0e54c 71.35%, #2f5711 100%);
           background: linear-gradient(
             90deg,
             rgb(115 255 11) 0%,
@@ -1031,18 +1027,6 @@
         }
       }
 
-      // .smart-router-price-impact-time {
-      //   @include theme() {
-      //     color: #2f5711;
-      //   }
-      //   font-family: 'IBM Plex Sans';
-      //   font-size: 14px;
-      //   font-weight: 400;
-      //   border-radius: 6px;
-      //   border: 1px solid #2f5711;
-      //   background-color: #eef9e5;
-      //   padding: 0 2px;
-      // }
     }
   }
 }
diff --git a/src/pages/UniversalSwap/Swap/index.tsx b/src/pages/UniversalSwap/Swap/index.tsx
index 4f0a50f93..b80032d4a 100644
--- a/src/pages/UniversalSwap/Swap/index.tsx
+++ b/src/pages/UniversalSwap/Swap/index.tsx
@@ -32,7 +32,7 @@ import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { flattenTokens } from 'config/bridgeTokens';
 import { chainIcons } from 'config/chainInfos';
 import { ethers } from 'ethers';
-import { getSpecialCoingecko, getTransactionUrl, handleCheckAddress, handleErrorTransaction } from 'helper';
+import { assert, getSpecialCoingecko, getTransactionUrl, handleCheckAddress, handleErrorTransaction } from 'helper';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { useCopyClipboard } from 'hooks/useCopyClipboard';
@@ -135,12 +135,10 @@ const SwapComponent: React.FC<{
   } = useHandleEffectTokenChange({ fromTokenDenomSwap, toTokenDenomSwap });
   const { addressTransfer, initAddressTransfer, setAddressTransfer } = addressInfo;
 
-  const [selectChainFrom, setSelectChainFrom] = useState<NetworkChainId>(
-    originalFromToken?.chainId || ('OraiChain' as NetworkChainId)
-  );
-  const [selectChainTo, setSelectChainTo] = useState<NetworkChainId>(
-    originalToToken?.chainId || ('OraiChain' as NetworkChainId)
-  );
+  const getDefaultChainFrom = () => originalFromToken?.chainId || ('OraiChain' as NetworkChainId);
+  const getDefaultChainTo = () => originalToToken?.chainId || ('OraiChain' as NetworkChainId);
+  const [selectChainFrom, setSelectChainFrom] = useState<NetworkChainId>(getDefaultChainFrom());
+  const [selectChainTo, setSelectChainTo] = useState<NetworkChainId>(getDefaultChainTo());
 
   // hooks
   useGetFeeConfig();
@@ -228,16 +226,11 @@ const SwapComponent: React.FC<{
   };
 
   const handleSubmit = async () => {
-    if (fromAmountToken <= 0)
-      return displayToast(TToastType.TX_FAILED, {
-        message: 'From amount should be higher than 0!'
-      });
-
-    setSwapLoading(true);
-    displayToast(TToastType.TX_BROADCASTING);
     try {
-      // await handleCheckChainEvmWallet(originalFromToken.chainId);
+      assert(fromAmountToken > 0, 'From amount should be higher than 0!');
 
+      setSwapLoading(true);
+      displayToast(TToastType.TX_BROADCASTING);
       const cosmosAddress = await handleCheckAddress(
         originalFromToken.cosmosBased ? (originalFromToken.chainId as CosmosChainId) : 'Oraichain'
       );
@@ -285,7 +278,7 @@ const SwapComponent: React.FC<{
       }
 
       const isCustomRecipient = validAddress.isValid && addressTransfer !== initAddressTransfer;
-      const alphaSmartRoutes = useAlphaSmartRouter && simulateData && simulateData?.routes;
+      const alphaSmartRoutes = useAlphaSmartRouter && simulateData?.routes;
 
       let initSwapData = {
         sender: { cosmos: cosmosAddress, evm: checksumMetamaskAddress, tron: tronAddress },
@@ -397,10 +390,16 @@ const SwapComponent: React.FC<{
 
   const handleChangeToken = (token: TokenItemType, type) => {
     const isFrom = type === 'from';
-    const setSelectChain = isFrom ? setSelectChainFrom : setSelectChainTo;
-    const setIsSelect = isFrom ? setIsSelectTokenFrom : setIsSelectTokenTo;
+    let setSelectChain = setSelectChainTo;
+    let setIsSelect = setIsSelectTokenTo;
+    let tokenDenomSwap = fromTokenDenomSwap;
+    if (isFrom) {
+      setSelectChain = setSelectChainFrom;
+      setIsSelect = setIsSelectTokenFrom;
+      tokenDenomSwap = toTokenDenomSwap;
+    }
 
-    if (token.denom === (isFrom ? toTokenDenomSwap : fromTokenDenomSwap)) {
+    if (token.denom === tokenDenomSwap) {
       setFromTokenDenom(toTokenDenomSwap);
       setToTokenDenom(fromTokenDenomSwap);
       setSelectChainFrom(selectChainTo);
@@ -408,10 +407,17 @@ const SwapComponent: React.FC<{
 
       handleUpdateQueryURL([toTokenDenomSwap, fromTokenDenomSwap]);
     } else {
-      setFromTokenDenom(isFrom ? token.denom : fromTokenDenomSwap);
-      setToTokenDenom(isFrom ? toTokenDenomSwap : token.denom);
+      let fromTokenDenom = fromTokenDenomSwap;
+      let toTokenDenom = token.denom;
+      if (isFrom) {
+        fromTokenDenom = token.denom;
+        toTokenDenom = toTokenDenomSwap;
+      }
+
+      setFromTokenDenom(fromTokenDenom);
+      setToTokenDenom(toTokenDenom);
       setSelectChain(token.chainId);
-      handleUpdateQueryURL(isFrom ? [token.denom, toTokenDenomSwap] : [fromTokenDenomSwap, token.denom]);
+      handleUpdateQueryURL(isFrom ? [fromTokenDenom, toTokenDenomSwap] : [fromTokenDenomSwap, toTokenDenom]);
     }
 
     if (coe && isFrom) {
@@ -465,23 +471,64 @@ const SwapComponent: React.FC<{
   }
   const isRoutersSwapData = +routersSwapData.amount;
 
-  const isImpactPrice = !!debouncedFromAmount && !!simulateData?.displayAmount && !!averageRatio?.amount;
-  let impactWarning = 0;
-  if (
-    isImpactPrice &&
-    simulateData?.displayAmount &&
-    averageRatio?.displayAmount &&
-    useAlphaSmartRouter &&
-    averageSimulateData
-  ) {
-    const calculateImpactPrice = new BigDecimal(simulateData.displayAmount)
-      .div(debouncedFromAmount)
-      .div(averageSimulateData.displayAmount)
-      .mul(100)
-      .toNumber();
-
-    if (calculateImpactPrice) impactWarning = 100 - calculateImpactPrice;
+  function caculateImpactWarning() {
+    let impactWarning = 0;
+    const isImpactPrice = !!debouncedFromAmount && !!simulateData?.displayAmount && !!averageRatio?.amount;
+    if (
+      isImpactPrice &&
+      simulateData?.displayAmount &&
+      averageRatio?.displayAmount &&
+      useAlphaSmartRouter &&
+      averageSimulateData
+    ) {
+      const calculateImpactPrice = new BigDecimal(simulateData.displayAmount)
+        .div(debouncedFromAmount)
+        .div(averageSimulateData.displayAmount)
+        .mul(100)
+        .toNumber();
+
+      if (calculateImpactPrice) impactWarning = 100 - calculateImpactPrice;
+    }
+    return impactWarning;
   }
+  const impactWarning = caculateImpactWarning();
+
+  const waringImpactBiggerTen = impactWarning > 10;
+  const waringImpactBiggerFive = impactWarning > 5;
+
+  const generateRatioComp = () => {
+    const getClassRatio = () => {
+      let classRatio = '';
+      const classWarningImpactBiggerFive = waringImpactBiggerFive && 'ratio-five';
+      if (isPreviousSimulate) classRatio = waringImpactBiggerTen ? 'ratio-ten' : classWarningImpactBiggerFive;
+      return classRatio;
+    };
+
+    return (
+      <div className={cx('ratio', getClassRatio())} onClick={() => isRoutersSwapData && setOpenRoutes(!openRoutes)}>
+        <span className={cx('text')}>
+          {waringImpactBiggerFive && <WarningIcon />}
+          {`1 ${originalFromToken.name} ≈ ${
+            averageRatio
+              ? numberWithCommas(averageRatio.displayAmount / SIMULATE_INIT_AMOUNT, undefined, {
+                  maximumFractionDigits: 6
+                })
+              : averageSimulateData
+              ? numberWithCommas(averageSimulateData?.displayAmount / SIMULATE_INIT_AMOUNT, undefined, {
+                  maximumFractionDigits: 6
+                })
+              : '0'
+          }
+      ${originalToToken.name}`}
+        </span>
+        {!!isRoutersSwapData && useAlphaSmartRouter && !isPreviousSimulate && (
+          <img src={!openRoutes ? DownArrowIcon : UpArrowIcon} alt="arrow" />
+        )}
+      </div>
+    );
+  };
+
+  const getSwitchIcon = () => (isLightMode ? SwitchLightImg : SwitchDarkImg);
 
   return (
     <div className={cx('swap-box-wrapper')}>
@@ -541,43 +588,13 @@ const SwapComponent: React.FC<{
           </div>
           <div className={cx('swap-center')}>
             <div className={cx('wrap-img')} onClick={handleRotateSwapDirection}>
-              <img src={isLightMode ? SwitchLightImg : SwitchDarkImg} onClick={handleRotateSwapDirection} alt="ant" />
+              <img src={getSwitchIcon()} onClick={handleRotateSwapDirection} alt="ant" />
             </div>
             <div className={cx('swap-ai-dot')}>
               {isAllowAlphaSmartRouter(originalFromToken, originalToToken) && (
                 <AIRouteSwitch isLoading={isPreviousSimulate} />
               )}
-              <div
-                className={cx(
-                  'ratio',
-                  isPreviousSimulate
-                    ? ''
-                    : Number(impactWarning) > 10
-                    ? 'ratio-ten'
-                    : Number(impactWarning) > 5 && 'ratio-five'
-                )}
-                onClick={() => isRoutersSwapData && setOpenRoutes(!openRoutes)}
-              >
-                <span className={cx('text')}>
-                  {Number(impactWarning) > 5 && <WarningIcon />}
-                  {`1 ${originalFromToken.name} ≈ ${
-                    averageRatio
-                      ? numberWithCommas(averageRatio.displayAmount / SIMULATE_INIT_AMOUNT, undefined, {
-                          maximumFractionDigits: 6
-                        })
-                      : averageSimulateData
-                      ? numberWithCommas(averageSimulateData?.displayAmount / SIMULATE_INIT_AMOUNT, undefined, {
-                          maximumFractionDigits: 6
-                        })
-                      : '0'
-                  }
-                  ${originalToToken.name}`}
-                </span>
-
-                {!!isRoutersSwapData && useAlphaSmartRouter && !isPreviousSimulate && (
-                  <img src={!openRoutes ? DownArrowIcon : UpArrowIcon} alt="arrow" />
-                )}
-              </div>
+              {generateRatioComp()}
             </div>
           </div>
 
@@ -627,13 +644,13 @@ const SwapComponent: React.FC<{
                   <div
                     className={cx(
                       'smart-router-price-impact-warning',
-                      Number(impactWarning) > 10
+                      waringImpactBiggerTen
                         ? 'smart-router-price-impact-warning-ten'
-                        : Number(impactWarning) > 5 && 'smart-router-price-impact-warning-five'
+                        : waringImpactBiggerFive && 'smart-router-price-impact-warning-five'
                     )}
                   >
                     <span>
-                      {Number(impactWarning) > 5 && <WarningIcon />} ≈{' '}
+                      {waringImpactBiggerFive && <WarningIcon />} ≈{' '}
                       {numberWithCommas(impactWarning, undefined, { minimumFractionDigits: 2 })}%
                     </span>
                   </div>
diff --git a/src/pages/UniversalSwap/helpers.ts b/src/pages/UniversalSwap/helpers.ts
index 222f113dc..90de73f4e 100644
--- a/src/pages/UniversalSwap/helpers.ts
+++ b/src/pages/UniversalSwap/helpers.ts
@@ -411,7 +411,6 @@ export const transformSwapInfo = (data) => {
 };
 
 export const processPairInfo = (actionSwap, flattenTokens, flattenTokensWithIcon, isLightMode) => {
-  let info;
   let [TokenInIcon, TokenOutIcon]: any = [DefaultIcon, DefaultIcon];
   const infoPair = PAIRS_CHART.find(
     (pair) => pair.assets.includes(actionSwap.tokenIn) && pair.assets.includes(actionSwap.tokenOut)
@@ -428,10 +427,11 @@ export const processPairInfo = (actionSwap, flattenTokens, flattenTokensWithIcon
     isLightMode
   );
 
-  TokenInIcon = TokenInIconPair;
-  TokenOutIcon = TokenOutIconPair;
+  if (TokenInIconPair) TokenInIcon = TokenInIconPair;
+
+  if (TokenOutIconPair) TokenOutIcon = TokenOutIconPair;
 
-  info = {
+  const info = {
     ...infoPair,
     tokenIn: infoPair.symbols[findIndexIn],
     tokenOut: infoPair.symbols[findIndexIn ? 0 : 1]
diff --git a/src/pages/UniversalSwap/index.module.scss b/src/pages/UniversalSwap/index.module.scss
index a799565f0..c8a7a1d30 100644
--- a/src/pages/UniversalSwap/index.module.scss
+++ b/src/pages/UniversalSwap/index.module.scss
@@ -24,7 +24,6 @@
     &.w60 {
       width: 100%;
       max-width: 1000px;
-      // min-width: 500px;
     }
 
     &.w40 {
@@ -77,9 +76,6 @@
     overflow: hidden;
   }
 
-  // @include theme {
-  //   background: theme-get('neutral-surface-bg-2');
-  // }
 
   &.activeChart {
     display: block;
diff --git a/src/pages/UniversalSwap/index.tsx b/src/pages/UniversalSwap/index.tsx
index f5c66a39f..eea0e837b 100644
--- a/src/pages/UniversalSwap/index.tsx
+++ b/src/pages/UniversalSwap/index.tsx
@@ -159,7 +159,7 @@ const Chart = ({
   const tabChart = useSelector(selectCurrentSwapTabChart);
   const tf = useSelector(selectChartTimeFrame);
 
-  const { isLoading, priceChange } = useGetPriceChange({
+  const {  priceChange } = useGetPriceChange({
     base_denom: currentPair.info.split('-')[0],
     quote_denom: currentPair.info.split('-')[1],
     tf
diff --git a/src/polyfill.ts b/src/polyfill.ts
index d84ef5481..cd4f1b452 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -138,7 +138,7 @@ if (typeof BigInt === 'undefined') {
     }
   }
 
-  var _old = MyBigInt;
+  const _old = MyBigInt;
   MyBigInt = function (...args) {
     return new _old(...args);
   };
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 813bd5c50..8178eb72a 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -67,11 +67,11 @@
     $theme-map: $map !global;
 
     :global(.#{$theme}) & {
-      @content; // the content inside @include theme() {...}
+      @content; 
     }
 
     :global(.#{$theme}-modal) & {
-      @content; // the content inside @include theme() {...}
+      @content; 
     }
   }
 
diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss
index 6f8ea11b1..ed51430d9 100644
--- a/src/styles/_themes.scss
+++ b/src/styles/_themes.scss
@@ -50,7 +50,7 @@ $primary-surface-default-subtle-2: #292f23;
 $primary-border-highlight: #89a571;
 $primary-text-highlight: #d7f5bf;
 
-// for dark-light mode
+
 $themes: (
   dark: ('colors-neutral-text-text-token-name': #f7f7f7,
     'colors-neutral-text-body-on-section': #979995,
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index a154604af..e2bf6fa71 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -12,7 +12,6 @@ $light: #f0f0f0;
 $white: #ffffff;
 $black: #000000;
 $primary-background: #111111;
-// $primary-background-other: #181a17;
 $primary-background-other: #111111;
 $modal-background: #191b21;
 $battleship: #6d738c;
diff --git a/src/tests/bridge-contract.spec.ts b/src/tests/bridge-contract.spec.ts
index 4810dc6f9..84f5d6563 100644
--- a/src/tests/bridge-contract.spec.ts
+++ b/src/tests/bridge-contract.spec.ts
@@ -19,6 +19,7 @@ import { oraib2oraichain } from '@oraichain/oraidex-common';
 import { ORAI } from '@oraichain/oraidex-common';
 import { AssetInfo, TransferBackMsg } from '@oraichain/common-contracts-sdk/build/CwIcs20Latest.types';
 import { toDisplay } from '@oraichain/oraidex-common';
+import { Attribute } from '@cosmjs/tendermint-rpc/build/tendermint37';
 
 let cosmosChain: CWSimulateApp;
 // oraichain support cosmwasm
@@ -31,10 +32,13 @@ const routerContractAddress = 'placeholder'; // we will update the contract conf
 const cosmosSenderAddress = bech32.encode('cosmos', bech32.decode(oraiSenderAddress).words);
 const relayerAddress = 'orai1704r4dhuwdqvt7vs35m0360py6ep6cwwxeyfxn';
 const oraibridgeSenderAddress = bech32.encode('oraib', bech32.decode(oraiSenderAddress).words);
-console.log({ cosmosSenderAddress });
 const ibcTransferAmount = '100000000';
 const initialBalanceAmount = '10000000000000';
 
+const assertKeyValue = (event: Event, key: string, value: string) => {
+  return event.attributes.find((attr) => attr.key === key && attr.value === value);
+};
+
 describe.only('IBCModule', () => {
   let oraiPort: string;
   let oraiIbcDenom: string = 'tron-testnet0xA325Ad6D9c92B55A3Fc5aD7e412B1518F96441C0';
@@ -500,9 +504,7 @@ describe.only('IBCModule', () => {
       memo: ''
     };
     const findWasmEvent = (events: Event[], key: string, value: string) =>
-      events.find(
-        (event) => event.type === 'wasm' && event.attributes.find((attr) => attr.key === key && attr.value === value)
-      );
+      events.find((event) => event.type === 'wasm' && assertKeyValue(event, key, value));
     beforeEach(async () => {
       assetInfos = [{ native_token: { denom: ORAI } }, { token: { contract_addr: airiToken.contractAddress } }];
       // upload pair & lp token code id
@@ -709,9 +711,7 @@ describe.only('IBCModule', () => {
         expect(bobBalance[0].denom).toEqual(ORAI);
         expect(parseInt(bobBalance[0].amount)).toBeGreaterThan(0);
         const transferEvent = result.events.find(
-          (event) =>
-            event.type === 'transfer' &&
-            event.attributes.find((attr) => attr.key === 'recipient' && attr.value === expectedRecipient)
+          (event) => event.type === 'transfer' && assertKeyValue(event, 'recipient', expectedRecipient)
         );
         expect(transferEvent).not.toBeUndefined();
         const ibcErrorMsg = result.attributes.find((attr) => attr.key === 'ibc_error_msg');
@@ -844,10 +844,7 @@ describe.only('IBCModule', () => {
       // for ibc native transfer case, we wont have refund either
       expect(
         result.events.find(
-          (ev) =>
-            ev.type === 'wasm' &&
-            ev.attributes.find((attr) => attr.key === 'action' && attr.value === 'transfer') &&
-            ev.attributes.find((attr) => attr.key === 'to' && attr.value === bobAddress)
+          (ev) => ev.type === 'wasm' && assertKeyValue(ev, 'action', 'transfer') && assertKeyValue(ev, 'to', bobAddress)
         )
       ).toBeUndefined();
     });
@@ -902,10 +899,7 @@ describe.only('IBCModule', () => {
       // for ibc native transfer case, we wont have refund either
       expect(
         result.events.find(
-          (ev) =>
-            ev.type === 'wasm' &&
-            ev.attributes.find((attr) => attr.key === 'action' && attr.value === 'transfer') &&
-            ev.attributes.find((attr) => attr.key === 'to' && attr.value === bobAddress)
+          (ev) => ev.type === 'wasm' && assertKeyValue(ev, 'action', 'transfer') && assertKeyValue(ev, 'to', bobAddress)
         )
       ).toBeUndefined();
     });
@@ -1462,8 +1456,8 @@ describe.only('IBCModule', () => {
         const hasFees = result.events.find(
           (event) =>
             event.type === 'wasm' &&
-            event.attributes.find((attr) => attr.key === 'to' && attr.value === senderAddress) &&
-            event.attributes.find((attr) => attr.key === 'amount' && attr.value === expectedTotalFee)
+            assertKeyValue(event, 'to', senderAddress) &&
+            assertKeyValue(event, 'amount', expectedTotalFee)
         );
         console.dir(result, { depth: null });
         expect(hasFees).not.toBeUndefined();
diff --git a/yarn.lock b/yarn.lock
index e785d6bf8..771596b71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3130,15 +3130,10 @@
   resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.42.tgz#600910cd841ed14436e5ab49d7ba85e3712d81fd"
   integrity sha512-fxfzYJWYFl4eLFwnENTm1CeL838cTU4MriLA8AwzFGodQyoxaxs4f/uqFbS/mDjWct4yVJm9rqi0T3UOIkTW4g==
 
-"@oraichain/oraidex-contracts-sdk@^1.0.43":
-  version "1.0.43"
-  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.43.tgz#d8c8e425d8104356dc0afaa78530d2e9df3c4fe9"
-  integrity sha512-FpCnSjgMPsyTnkwiq/myYtOE4fN6B0gStJfskDen3TxYZc0SKxYzCt7jLP02gkEHnMl4QAiaa4QFBlnC2Lcm8g==
-
-"@oraichain/oraidex-contracts-sdk@latest":
-  version "1.0.44"
-  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.44.tgz#9ff41ec388dd92ba112c2eef545d11fd6e18c684"
-  integrity sha512-fMY/QOzO/afPlAVkLGH1bcpJTs6V/URrJju2r4UoE9f5HUWC/6OC6+H5dWuIgq26frp8wjH23mNCQAlmHzji8g==
+"@oraichain/oraidex-contracts-sdk@^1.0.43", "@oraichain/oraidex-contracts-sdk@latest":
+  version "1.0.45"
+  resolved "https://registry.yarnpkg.com/@oraichain/oraidex-contracts-sdk/-/oraidex-contracts-sdk-1.0.45.tgz#42dae0fdd9e005f920ba305b987009f791acc365"
+  integrity sha512-/nYztdxEX5LQM4DMJQmi9HvZrBVoY3nLAmYqSKZGZ0U1h1SxU7O/o22R3/pQwB+sAJdcibaI8ygC0ov7jC8paA==
 
 "@oraichain/oraidex-universal-swap@1.0.93":
   version "1.0.93"
@@ -5485,7 +5480,7 @@ axios@^0.27.2:
     follow-redirects "^1.14.9"
     form-data "^4.0.0"
 
-axios@^1.6.0, axios@^1.6.2, axios@^1.6.7:
+axios@^1.6.0, axios@^1.6.7:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66"
   integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==
@@ -5494,6 +5489,15 @@ axios@^1.6.0, axios@^1.6.2, axios@^1.6.7:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axios@^1.6.2:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
@@ -9515,11 +9519,16 @@ google-p12-pem@^4.0.0:
   dependencies:
     node-forge "^1.3.1"
 
-google-protobuf@^3.14.0, google-protobuf@^3.15.5, google-protobuf@^3.19.4, google-protobuf@^3.21.0:
+google-protobuf@^3.14.0, google-protobuf@^3.19.4, google-protobuf@^3.21.0:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
   integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==
 
+google-protobuf@^3.15.5:
+  version "3.21.4"
+  resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.4.tgz#2f933e8b6e5e9f8edde66b7be0024b68f77da6c9"
+  integrity sha512-MnG7N936zcKTco4Jd2PX2U96Kf9PxygAPKBug+74LHzmHXmceN16MmRcdgZv+DGef/S9YvQAfRsNCn4cjf9yyQ==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -15522,7 +15531,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15540,6 +15549,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -15619,7 +15637,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15640,6 +15658,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -17292,7 +17317,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -17319,6 +17344,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"