From 201e557007ee54cd312073d7c4ace58bf3e3a1e2 Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Fri, 18 Apr 2025 12:02:10 +0700 Subject: [PATCH 1/5] update load price chart --- src/pages/UniversalSwap/Component/HeaderTab.tsx | 5 ++++- src/pages/UniversalSwap/hooks/useChartUsdPrice.ts | 12 ++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/pages/UniversalSwap/Component/HeaderTab.tsx b/src/pages/UniversalSwap/Component/HeaderTab.tsx index 20b8f8658..2bd98a818 100644 --- a/src/pages/UniversalSwap/Component/HeaderTab.tsx +++ b/src/pages/UniversalSwap/Component/HeaderTab.tsx @@ -10,6 +10,7 @@ import { ChartTokenType } from '../hooks/useChartUsdPrice'; import styles from './HeaderTab.module.scss'; import { flattenTokens } from 'initCommon'; import { getTokenIsStableCoin } from '../helpers'; +import DefaultIcon from 'assets/icons/tokens.svg?react'; const cx = cn.bind(styles); @@ -136,10 +137,12 @@ export const HeaderTop = ({ let [ToTokenIcon, FromTokenIcon] = [null, null]; const generateIconTokenByTheme = (token) => { - return theme === 'light' ? ( + return token?.icon ? theme === 'light' ? ( token ) : ( token + ) : ( + ); }; diff --git a/src/pages/UniversalSwap/hooks/useChartUsdPrice.ts b/src/pages/UniversalSwap/hooks/useChartUsdPrice.ts index 97e8f78b9..e5ffcdd8e 100644 --- a/src/pages/UniversalSwap/hooks/useChartUsdPrice.ts +++ b/src/pages/UniversalSwap/hooks/useChartUsdPrice.ts @@ -4,9 +4,11 @@ import { oraichainTokens } from 'initCommon'; import { toFixedIfNecessary } from 'pages/Pools/helpers'; import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; +import { selectCurrentFromToken, selectCurrentToToken } from 'reducer/tradingSlice'; import { FILTER_TIME_CHART } from 'reducer/type'; import axios from 'rest/request'; import { RootState } from 'store/configure'; +import { getTokenIsStableCoin } from '../helpers'; export enum ChartTokenType { Price = 'Price', @@ -34,7 +36,9 @@ export const useChartUsdPrice = ( const [currentData, setCurrentData] = useState([]); const [changePercent, setChangePercent] = useState(0); const allOraichainTokens = useSelector((state: RootState) => state.token.allOraichainTokens || []); - + const currentToToken = useSelector(selectCurrentToToken); + const currentFromToken = useSelector(selectCurrentFromToken); + const toTokenDenomIsStable = getTokenIsStableCoin(currentToToken); // TODO: add loading animation later. const [isLoading, setIsLoading] = useState(false); @@ -76,7 +80,11 @@ export const useChartUsdPrice = ( const onChangeRange = async (type: FILTER_TIME_CHART = FILTER_TIME_CHART.DAY) => { try { setIsLoading(true); - const tokenOnOraichain = allOraichainTokens.find((t) => t.contractAddress === token || t.denom === token); + // const tokenOnOraichain = allOraichainTokens.find((t) => t.contractAddress === token || t.denom === token); + const tokenOnOraichain = toTokenDenomIsStable + ? allOraichainTokens.find((t) => t.coinGeckoId === currentFromToken?.coinGeckoId) || allOraichainTokens.find((t) => t.coinGeckoId === 'tether') + : allOraichainTokens.find((t) => t.coinGeckoId === currentToToken?.coinGeckoId) || allOraichainTokens.find((t) => t.coinGeckoId === 'oraichain-token') + const tokenDenom = parseTokenInfoRawDenom(tokenOnOraichain); const data = await getDataPriceMarket(tokenDenom, type); From 4cab703a7d051df3368590010ff234f578af0b6f Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Tue, 22 Apr 2025 11:08:12 +0700 Subject: [PATCH 2/5] update check address tron --- src/helper/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helper/index.tsx b/src/helper/index.tsx index 389034058..b30dead81 100644 --- a/src/helper/index.tsx +++ b/src/helper/index.tsx @@ -426,7 +426,7 @@ export const getAddressTransfer = async (network: CustomChainInfo, walletByNetwo JSON.parse(JSON.parse(localStorage.getItem('persist:root'))?.config)?.tonAddress || toUserFriendlyAddress(window.Ton?.account?.address); // address = useTonAddress(); - } else if (network.networkType === 'evm' && isConnectSpecificNetwork(walletByNetworks.evm)) { + } else if (network.networkType === 'evm') { address = await getAddressTransferForEvm(walletByNetworks, network); } else if (network.networkType == 'svm' && isConnectSpecificNetwork(walletByNetworks.solana)) { let provider = window?.solana; From bb15778faf13c9d6aae721dbe7d26b8b908c0b3a Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Tue, 22 Apr 2025 11:23:29 +0700 Subject: [PATCH 3/5] update check address tron --- src/helper/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/helper/index.tsx b/src/helper/index.tsx index b30dead81..722ae3f44 100644 --- a/src/helper/index.tsx +++ b/src/helper/index.tsx @@ -142,7 +142,7 @@ export const getNetworkGasPrice = async (chainId): Promise => { if (findToken) { return findToken.feeCurrencies[0].gasPriceStep.average; } - } catch {} + } catch { } return 0; }; @@ -400,6 +400,7 @@ export const isConnectSpecificNetwork = (status: string | null) => { export const getAddressTransferForEvm = async (walletByNetworks: WalletsByNetwork, network: CustomChainInfo) => { let address = ''; if (network.chainId === EVM_CHAIN_ID_COMMON.TRON_CHAIN_ID) { + if (!isMobile() && isConnectSpecificNetwork(walletByNetworks.tron)) return ''; const accountTron: interfaceRequestTron = await window.tronLinkDapp.request({ method: 'tron_requestAccounts' }); From 4ff632edb771f0b7ea14424f3c51f9d2a5d94f4a Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Tue, 22 Apr 2025 14:46:29 +0700 Subject: [PATCH 4/5] update text fee bridge --- .../TransferConvertToken/index.module.scss | 8 ++++++++ .../Balance/TransferConvertToken/index.tsx | 18 +++++++++--------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/pages/Balance/TransferConvertToken/index.module.scss b/src/pages/Balance/TransferConvertToken/index.module.scss index 5ba590034..313814b3a 100644 --- a/src/pages/Balance/TransferConvertToken/index.module.scss +++ b/src/pages/Balance/TransferConvertToken/index.module.scss @@ -357,6 +357,14 @@ } white-space: pre; .bridgeFee { + display: flex; + flex-direction: row; + gap: 3px; + + @include mobile { + gap: 0px; + flex-direction: column; + } font-weight: 400; font-size: 14px; margin-top: 12px; diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx index 81d89a834..cb9661057 100644 --- a/src/pages/Balance/TransferConvertToken/index.tsx +++ b/src/pages/Balance/TransferConvertToken/index.tsx @@ -225,7 +225,7 @@ const TransferConvertToken: FC<{ if (tonTokenFee > 0) { msgTokenFee = (
- - Token fee: + Token fee: {tonTokenFee} {token.name}{' '} @@ -236,7 +236,7 @@ const TransferConvertToken: FC<{ if (relayerFeeTokenFee > 0) { msgRelayerFee = (
- - Relayer fee: + Relayer fee: {relayerFeeTokenFee} {token.name} @@ -246,7 +246,7 @@ const TransferConvertToken: FC<{ const msgReceiveAmount = ( <> - - Received amount:{' '} + Received amount:{' '} {FormatNumberFixed({ value: Math.max(Number(isSolToOraichain || isOraichainToSol ? solFee.sendAmount : receivedAmount), 0) @@ -278,12 +278,12 @@ const TransferConvertToken: FC<{ return (
- Bridge fee: {msgBridgeFee + " " + suffixe} - {msgTokenFee} - {msgRelayerFee} - {msgReceiveAmount} - {msgBTCfee} - {msgTonMax} +
Bridge fee: {msgBridgeFee + " " + suffixe}
+
{msgTokenFee}
+
{msgRelayerFee}
+
{msgReceiveAmount}
+
{msgBTCfee}
+
{msgTonMax}
); }; From 57252ae61cf5909e1eb38d5196eb6e772c6e9103 Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Wed, 23 Apr 2025 11:27:08 +0700 Subject: [PATCH 5/5] update ui mobile --- .../NewTokenModal/NewTokenModal.module.scss | 4 +--- .../Component/AssetsTab.module.scss | 4 ++++ .../UniversalSwap/Component/AssetsTab.tsx | 20 +++++++++++++++---- .../UniversalSwap/Component/HeaderTab.tsx | 4 ++-- .../Swap/components/InputSwap/InputSwap.tsx | 4 ++-- 5 files changed, 25 insertions(+), 11 deletions(-) diff --git a/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss b/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss index 323dc1400..14ffb56c3 100644 --- a/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss +++ b/src/pages/Pools/NewTokenModal/NewTokenModal.module.scss @@ -64,7 +64,6 @@ .box { width: 100%; - // background-color: #17181c; // border: 1px solid rgba(225, 240, 255, 0.2027); &.light { @@ -90,7 +89,6 @@ @include mobile { width: 100%; - &:nth-child(1) { margin-right: 0px; } @@ -99,8 +97,8 @@ margin-left: 0px; } + margin-bottom: 100px; margin-top: 10px; - margin-bottom: 10px; } padding: 24px 24px 0 24px; diff --git a/src/pages/UniversalSwap/Component/AssetsTab.module.scss b/src/pages/UniversalSwap/Component/AssetsTab.module.scss index 3b51bbf79..90f9d022a 100644 --- a/src/pages/UniversalSwap/Component/AssetsTab.module.scss +++ b/src/pages/UniversalSwap/Component/AssetsTab.module.scss @@ -206,6 +206,10 @@ .tableWrapper { overflow-x: auto; + @include mobile() { + overflow-x: hidden; + } + table { min-width: 400px; } diff --git a/src/pages/UniversalSwap/Component/AssetsTab.tsx b/src/pages/UniversalSwap/Component/AssetsTab.tsx index d55a19062..63f17f306 100644 --- a/src/pages/UniversalSwap/Component/AssetsTab.tsx +++ b/src/pages/UniversalSwap/Component/AssetsTab.tsx @@ -4,7 +4,7 @@ import { parseTokenInfoRawDenom, toAmount, toDisplay, - tokensIcon + TokenItemType, } from '@oraichain/oraidex-common'; import DefaultIcon from 'assets/icons/tokens.svg?react'; import { isMobile } from '@walletconnect/browser-utils'; @@ -16,7 +16,7 @@ import ToggleSwitch from 'components/ToggleSwitch'; import { useCoinGeckoPrices } from 'hooks/useCoingecko'; import useConfigReducer from 'hooks/useConfigReducer'; import { flattenTokens, tokenMap } from 'initCommon'; -import { getTotalUsd, toSumDisplay } from 'libs/utils'; +import { getTotalUsd, getUsd, toSumDisplay } from 'libs/utils'; import { useGetTotalLpV3 } from 'pages/Pool-V3/hooks/useGetTotalLp'; import { formatDisplayUsdt, toFixedIfNecessary } from 'pages/Pools/helpers'; import { useGetMyStake } from 'pages/Pools/hooks'; @@ -26,6 +26,8 @@ import { updateTotalLpv3 } from 'reducer/token'; import { RootState } from 'store/configure'; import { AssetInfoResponse } from 'types/swap'; import styles from './AssetsTab.module.scss'; +import { useGetMyStakeRewardInfo } from 'pages/Staking/hooks'; +import { ORAIX_TOKEN_INFO } from 'pages/Staking/constants'; const cx = cn.bind(styles); @@ -47,6 +49,16 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => { const { totalStaked } = useGetMyStake({ stakerAddress: address }); + + const { myStakeRewardInfo } = useGetMyStakeRewardInfo( + ORAIX_TOKEN_INFO.contractAddress, + address + ); + + const ORAIX_TOKEN = ORAIX_TOKEN_INFO as TokenItemType; + const stakedAmount = myStakeRewardInfo?.stakedAmount || '0'; + const stakeAmountUsd = getUsd(stakedAmount, ORAIX_TOKEN, prices); + let totalUsd: number = getTotalUsd(amounts, prices); if (networkFilter) { const subAmounts = Object.fromEntries( @@ -76,8 +88,8 @@ export const AssetsTab: FC<{ networkFilter: string }> = ({ networkFilter }) => { ...listAsset, { src: StakeIcon, - label: 'Total LP', - balance: formatDisplayUsdt(toDisplay(BigInt(Math.trunc(totalStaked)), CW20_DECIMALS) + Number(totalLpv3) || 0) + label: 'Total LP & Stake', + balance: formatDisplayUsdt(toDisplay(BigInt(Math.trunc(totalStaked)), CW20_DECIMALS) + Number(totalLpv3) + Number(stakeAmountUsd) || 0) } ]; } diff --git a/src/pages/UniversalSwap/Component/HeaderTab.tsx b/src/pages/UniversalSwap/Component/HeaderTab.tsx index 2bd98a818..638cbd839 100644 --- a/src/pages/UniversalSwap/Component/HeaderTab.tsx +++ b/src/pages/UniversalSwap/Component/HeaderTab.tsx @@ -138,9 +138,9 @@ export const HeaderTop = ({ const generateIconTokenByTheme = (token) => { return token?.icon ? theme === 'light' ? ( - token + token ) : ( - token + token ) : ( ); diff --git a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx index c06cf2f32..cdccda3b7 100644 --- a/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx +++ b/src/pages/UniversalSwap/Swap/components/InputSwap/InputSwap.tsx @@ -119,9 +119,9 @@ export default function InputSwap({
{(token.icon && isConfirmToken === 'init') || isConfirmToken === 'confirmed' ? ( - icon + icon ) : ( - icon + icon )}