Feat/permissionless todo (#1093)

* remove redundant files in public * test develop-v3 * add vconssole * fix: update router API URLs to staging endpoints and add vConsole for debugging * fix: remove unnecessary console logs and adjust refetch interval in useGetPairInfo hook * feat: enable source maps in Vite configuration * fix: update axios baseURL to staging API endpoint * fix: increase NODE_OPTIONS memory limit for build script * fix: update Sentry initialization for staging environment and disable source maps in Vite configuration * pump sdk * fix: update Sentry initialization to use production environment and new DSN * fix: remove debug log and update token selection state handling in Swap component * fix: update network icon rendering in MyWalletMobile component * fix: update network icon rendering logic in MyWalletMobile component * fix: remove vConsole script from index.html * fix: update modal styles and improve token display in PoolMobileItem component * fix: update Sentry initialization logic and improve responsiveness in Pool-V3 styles * fix: remove console.log statements for cleaner code in PoolDetail and OverviewPool components * fix: update router API URLs to production in ZapOutForm and useZapIn hooks * fix: update axios baseURL to use environment variable for API endpoint --------- Co-authored-by: Hau Nguyen Van <[email protected]> Co-authored-by: vuonghuuhung <[email protected]> Co-authored-by: Pham Tu <[email protected]>
oraidex · Dec 27, 2024 · e5bc47d · e5bc47d
1 parent 60c04fa
commit e5bc47d
Show file tree

Hide file tree

Showing 18 changed files with 124 additions and 114 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@oraichain/orai-token-inspector": "^0.1.24",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
-    "@oraichain/oraidex-universal-swap": "1.2.0-beta27",
+    "@oraichain/oraidex-universal-swap": "1.2.0-beta28",
     "@oraichain/oraiswap-v3": "1.2.0-beta26",
     "@oraichain/ton-bridge-contracts": "^0.15.8",
     "@oraichain/tonbridge-contracts-sdk": "^1.3.1",
@@ -138,7 +138,7 @@
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "vite",
-    "build": "NODE_OPTIONS='--max-old-space-size=12288' vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=15000' vite build",
     "serve": "vite serve",
     "ts-check": "tsc --noEmit",
     "postinstall": "patch-package",

diff --git a/public/mascot.png b/public/mascot.png
diff --git a/public/oraiswap_v3_wasm_bg.wasm b/public/oraiswap_v3_wasm_bg.wasm
diff --git a/src/components/Modal.module.scss b/src/components/Modal.module.scss
@@ -12,7 +12,7 @@
   position: relative;
 
   @include mobile {
-    width: 90vw;
+    width: 93vw;
     margin: 0 auto;
   }
 }
@@ -43,6 +43,7 @@
 
   .close-icon {
     cursor: pointer;
+
     &.light {
       svg {
         path {
@@ -51,4 +52,4 @@
       }
     }
   }
-}
+}
diff --git a/src/components/Modals/ModalConfirmUnverifiedToken/ModalConfirmUnverifiedToken.module.scss b/src/components/Modals/ModalConfirmUnverifiedToken/ModalConfirmUnverifiedToken.module.scss
@@ -2,7 +2,7 @@
     z-index: 1021;
 
     .confirmationModalWrapper {
-        width: 470px;
+
         background: #fff;
         display: flex;
         flex-direction: column;
@@ -102,6 +102,11 @@
             button {
                 width: 47%;
                 padding: 12px;
+
+                @media (max-width: 767px) {
+                    width: 49%;
+                    font-size: 13px;
+                }
             }
         }
     }

diff --git a/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx b/src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx
@@ -117,16 +117,14 @@ export const MyWalletMobile: React.FC<{
       <div className={styles.addressByNetworkItem}>
         {evmNetworksIconWithoutTron.map((network, index) => {
           const chainAddress = metamaskAddress;
+          let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
+          if (!NetworkIcon) NetworkIcon = OraiIcon;
           return (
             <div className={styles.addressByChainInNetwork} key={network.chainId}>
               <div className={styles.left}>
                 <div className={styles.icon}>
                   <div className={styles.iconChain}>
-                    {theme === 'light' ? (
-                      <network.IconLight width={30} height={30} />
-                    ) : (
-                      <network.Icon width={30} height={30} />
-                    )}
+                    <img src={NetworkIcon} width={30} height={30} />
                   </div>
                 </div>
                 <div className={styles.info}>
@@ -163,7 +161,8 @@ export const MyWalletMobile: React.FC<{
               <div className={styles.left}>
                 <div className={styles.icon}>
                   <div className={styles.iconChain}>
-                    <NetworkIcon width={30} height={30} />
+                    {/* <NetworkIcon width={30} height={30} /> */}
+                    <img src={NetworkIcon} width={30} height={30} alt="network-icon" />
                   </div>
                 </div>
                 <div className={styles.info}>
@@ -199,7 +198,8 @@ export const MyWalletMobile: React.FC<{
               <div className={styles.left}>
                 <div className={styles.icon}>
                   <div className={styles.iconChain}>
-                    <NetworkIcon width={30} height={30} />
+                    {/* <NetworkIcon width={30} height={30} /> */}
+                    <img src={NetworkIcon} width={30} height={30} alt="network-icon" />
                   </div>
                 </div>
                 <div className={styles.info}>

diff --git a/src/hooks/useLoadTokens.ts b/src/hooks/useLoadTokens.ts
@@ -1,51 +1,40 @@
 import { fromBinary, toBinary } from '@cosmjs/cosmwasm-stargate';
 import { StargateClient } from '@cosmjs/stargate';
 import { MulticallQueryClient } from '@oraichain/common-contracts-sdk';
+import { ContractCallResults, Multicall } from '@oraichain/ethereum-multicall';
+import { COSMOS_CHAIN_ID_COMMON, CustomChainInfo, ERC20__factory, EVM_BALANCE_RETRY_COUNT, solChainId, TON_CONTRACT, tronToEthAddress } from '@oraichain/oraidex-common';
 import { OraiswapTokenTypes } from '@oraichain/oraidex-contracts-sdk';
+import { UniversalSwapHelper } from '@oraichain/oraidex-universal-swap';
+import { JettonMinter, JettonWallet } from '@oraichain/ton-bridge-contracts';
+import { getHttpEndpoint } from '@orbs-network/ton-access';
+import { Dispatch } from '@reduxjs/toolkit';
+import { Connection, PublicKey } from '@solana/web3.js';
+import { Address, TonClient } from '@ton/ton';
+import { ethers } from 'ethers';
+import {
+  genAddressCosmos,
+  getAddress,
+  getWalletByNetworkCosmosFromStorage,
+  handleCheckWallet,
+  handleErrorRateLimit
+} from 'helper';
+import { bitcoinChainId } from 'helper/constants';
 import {
   btcTokens,
   chainInfos,
-  cosmosTokens,
   evmChains,
   evmTokens,
   network,
   oraichainTokens,
-  solTokens,
   tonNetworkMainnet
 } from 'initCommon';
-import flatten from 'lodash/flatten';
-import { ContractCallResults, Multicall } from '@oraichain/ethereum-multicall';
-import { COSMOS_CHAIN_ID_COMMON, TON_CONTRACT } from '@oraichain/oraidex-common';
-import { Dispatch } from '@reduxjs/toolkit';
-import { useDispatch } from 'react-redux';
-import {
-  CustomChainInfo,
-  EVM_BALANCE_RETRY_COUNT,
-  ERC20__factory,
-  getEvmAddress,
-  tronToEthAddress,
-  solChainId
-} from '@oraichain/oraidex-common';
-import { UniversalSwapHelper } from '@oraichain/oraidex-universal-swap';
-import { ethers } from 'ethers';
 import { reduce } from 'lodash';
-import { bitcoinChainId } from 'helper/constants';
+import flatten from 'lodash/flatten';
 import { getUtxos } from 'pages/Balance/helpers';
-import { generateError } from '../libs/utils';
+import { useDispatch } from 'react-redux';
 import { updateAmounts } from 'reducer/token';
-import {
-  genAddressCosmos,
-  getAddress,
-  handleCheckWallet,
-  getWalletByNetworkCosmosFromStorage,
-  handleErrorRateLimit
-} from 'helper';
-import { Connection, PublicKey } from '@solana/web3.js';
-import { getHttpEndpoint } from '@orbs-network/ton-access';
-import { Address, TonClient } from '@ton/ton';
-import { JettonMinter, JettonWallet } from '@oraichain/ton-bridge-contracts';
 import { store } from 'store/configure';
-import { TON_ZERO_ADDRESS } from '@oraichain/common';
+import { generateError } from '../libs/utils';
 
 export type LoadTokenParams = {
   refresh?: boolean;
@@ -66,6 +55,12 @@ async function loadNativeBalance(dispatch: Dispatch, address: string, tokenInfo:
 
     let amountDetails: AmountDetails = {};
 
+    const storage = store.getState();
+    const allOraichainTokens = storage.token.allOraichainTokens || [];
+    const allOtherChainTokens = storage.token.allOtherChainTokens || [];
+
+    const cosmosTokens = [...allOraichainTokens, ...allOtherChainTokens].filter((token => token.denom && token.cosmosBased && !token.contractAddress));
+
     // reset native balances
     cosmosTokens
       .filter((t) => t.chainId === tokenInfo.chainId && !t.contractAddress)
@@ -192,8 +187,11 @@ async function loadTokensCosmos(dispatch: Dispatch, kwtAddress: string, oraiAddr
 async function loadCw20Balance(dispatch: Dispatch, address: string) {
   if (!address) return;
 
+  const storage = store.getState();
+  const allOraichainTokens = storage.token.allOraichainTokens || [];
+
   // get all cw20 token contract
-  const cw20Tokens = [...oraichainTokens.filter((t) => t.contractAddress)];
+  const cw20Tokens = [...allOraichainTokens.filter((t) => t.contractAddress)];
 
   const data = toBinary({
     balance: { address }

diff --git a/src/pages/Pool-V3/index.module.scss b/src/pages/Pool-V3/index.module.scss
@@ -92,7 +92,7 @@
       font-size: 14px;
       display: flex;
       gap: 8px;
-      
+
       span {
         padding-left: 1rem;
       }
@@ -146,12 +146,13 @@
           border-color: theme-get('border-color');
         }
 
-        @media (max-width: 575px) {
+        @media (max-width: 300px) {
           width: 100%;
         }
       }
 
       .dropdownContent {
+        z-index: 1;
         cursor: pointer;
         position: absolute;
         top: 100%;
@@ -172,6 +173,7 @@
           .icon {
             &.light {
               color: black;
+
               svg {
                 path {
                   stroke: #000;

diff --git a/src/pages/Pools/PoolDetail.tsx b/src/pages/Pools/PoolDetail.tsx
@@ -37,21 +37,27 @@ const PoolDetail: React.FC = () => {
   const dispatch = useDispatch();
 
   const [address] = useConfigReducer('address');
-  const poolDetailData = useGetPoolDetail({ pairDenoms: poolUrl });
-  const loadTokenAmounts = useLoadTokens();
-  const setCachedLpPools = (payload: LpPoolDetails) => dispatch(updateLpPools(payload));
+
+  const poolDetailData = useGetPoolDetail({ pairDenoms: poolUrl }); // ok
+
+  const loadTokenAmounts = useLoadTokens(); // ok
+
+  const setCachedLpPools = (payload: LpPoolDetails) => dispatch(updateLpPools(payload)); // ok
+
   const pools = useGetPools();
-  const lpAddresses = pools.map((pool) => pool.liquidityAddr);
+
   const { refetchPairAmountInfo, refetchLpTokenInfoData, pairAmountInfoData } = useGetPairInfo(poolDetailData);
+
+  const { lpBalanceInfoData, refetchLpBalanceInfoData } = useGetLpBalance(poolDetailData);
+
+  const lpAddresses = pools.map((pool) => pool.liquidityAddr);
   const queryClient = useQueryClient();
   const [pairDenomsDeposit, setPairDenomsDeposit] = useState('');
   const [ratioOraiBtc, setRatioOraiBtc] = useState(0);
-
-  const { lpBalanceInfoData, refetchLpBalanceInfoData } = useGetLpBalance(poolDetailData);
   const lpTokenBalance = BigInt(lpBalanceInfoData?.balance || '0');
 
   const allOraichainTokens = useSelector((state: RootState) => state.token.allOraichainTokens || []);
-  console.log({ pairAmountInfoData });
+
   useEffect(() => {
     refetchAllLpPools();
   }, [lpAddresses]);

diff --git a/src/pages/Pools/components/ItemPoolMobile/ItemPoolMobile.tsx b/src/pages/Pools/components/ItemPoolMobile/ItemPoolMobile.tsx
@@ -7,6 +7,8 @@ import { PoolTableData } from 'pages/Pools';
 import { formatDisplayUsdt, parseAssetOnlyDenom } from 'pages/Pools/helpers';
 import { useNavigate } from 'react-router-dom';
 import styles from './ItemPoolMobile.module.scss';
+import { useSelector } from 'react-redux';
+import { RootState } from 'store/configure';
 
 type PoolMobileItemProps = {
   pool: PoolTableData;
@@ -16,6 +18,7 @@ type PoolMobileItemProps = {
 export const PoolMobileItem: React.FC<PoolMobileItemProps> = ({ pool, setPairDenomsDeposit, generateIcon }) => {
   const navigate = useNavigate();
   const [theme] = useConfigReducer('theme');
+  const allOraichainTokens = useSelector((state: RootState) => state.token.allOraichainTokens || []);
 
   const handleClickRow = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     event.stopPropagation();
@@ -28,12 +31,19 @@ export const PoolMobileItem: React.FC<PoolMobileItemProps> = ({ pool, setPairDen
     );
   };
 
+  const firstTokenDenom = parseAssetOnlyDenom(JSON.parse(pool.firstAssetInfo));
+  const secondTokenDenom = parseAssetOnlyDenom(JSON.parse(pool.secondAssetInfo));
+
+  const tokens = [firstTokenDenom, secondTokenDenom].map(
+    (symbol) => allOraichainTokens.find((token) => token.denom === symbol || token.contractAddress === symbol)?.name
+  );
+
   return (
     <article className={styles.pool} onClick={(e) => handleClickRow(e)}>
       <div className={styles.poolHead}>
         <div className={styles.symbols}>
           <div>{generateIcon(pool.baseToken, pool.quoteToken)}</div>
-          <span className={styles.symbols_name}>{pool.symbols}</span>
+          <span className={styles.symbols_name}>{tokens?.join('/')}</span>
         </div>
         <div className={styles.apr}>
           <div className={styles.title}>APR</div>

diff --git a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
@@ -122,7 +122,7 @@ export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail })
               <div className={classNames(styles.tokenItem, styles[theme])}>
                 <span className={styles.value}>
                   {formatNumberKMB(
-                    toDisplay(pairAmountInfoData?.token1Amount || '0', token1?.decimals, 0),
+                    toDisplay(pairAmountInfoData?.token1Amount || '0', token1?.decimals),
                     false,
                     token1?.decimals
                   )}
@@ -145,7 +145,7 @@ export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail })
               <div className={classNames(styles.tokenItem, styles[theme])}>
                 <span className={styles.value}>
                   {formatNumberKMB(
-                    toDisplay(pairAmountInfoData?.token2Amount || '0', token2?.decimals, 0),
+                    toDisplay(pairAmountInfoData?.token2Amount || '0', token2?.decimals),
                     false,
                     token2?.decimals
                   )}