Merge pull request #1144 from oraidex/refactor-prod

refactor prod

src/pages/CoHarvest/components/HarvestInfo/index.tsx

@@ -41,7 +41,7 @@ const HarvestInfo = (props: {
                 setVisible={setVisible}
                 content={
                   <div className={`${styles.tooltip} ${styles[theme]}`}>
-                    Reward pool: 20% of all fees generated via OraiBridge, Order Book, and Futures trading are deposited
+                    Reward pool: 5% of all fees generated via OraiBridge, Order Book, and Futures trading are deposited
                     into the pool in USDC
                   </div>
                 }

src/pages/Staking/components/FAQ/index.tsx

@@ -30,7 +30,7 @@ export const LIST_FAQ = [
   {
     question: 'How does ORAIX Staking work?',
     answer:
-      'ORAIX holders can lock their tokens into the staking program, and effectively participate in the long-term development of OraiDEX. In return, they receive a share of the 10% weekly revenue generated by OraiDEX (from liquidity fee, relayer fee, derivatives fee...)'
+      'ORAIX holders can lock their tokens into the staking program, and effectively participate in the long-term development of OraiDEX. In return, they receive a share of the 45% weekly revenue generated by OraiDEX (from liquidity fee, relayer fee, derivatives fee...)'
   },
   {
     question: 'How often are rewards distributed?',
@@ -56,7 +56,7 @@ export const LIST_FAQ = [
   {
     question: 'How are rewards calculated?',
     answer:
-      'Rewards are calculated based on the proportion of ORAIX tokens staked by the participant relative to the total tokens staked in the program, as well as the amount of revenue distributed by OraiDEX (10% of total revenue).'
+      'Rewards are calculated based on the proportion of ORAIX tokens staked by the participant relative to the total tokens staked in the program, as well as the amount of revenue distributed by OraiDEX (45% of total revenue).'
   },
   {
     question: 'What are the risks of staking ORAIX?',

src/pages/Staking/components/Summary/index.tsx

@@ -61,7 +61,7 @@ const Summary = () => {
         <div className={styles.item}>
           <PercentIcon />
           <span className={styles.header}>Earn revenue sharing</span>
-          <span>30% of the revenue will be distributed to ORAIX stakers as USDC</span>
+          <span>45% of the revenue will be distributed to ORAIX stakers as USDC</span>
         </div>
       </div>
     </div>

src/pages/Staking/constants/index.ts

@@ -1,3 +1,4 @@
+import { ORAIX_CONTRACT, USDC_CONTRACT } from '@oraichain/oraidex-common';
 import { oraichainTokens } from 'initCommon';
 
 export const TIMER = {
@@ -27,5 +28,9 @@ export enum STAKE_TAB {
   UnStake = 'Unstake'
 }
 
-export const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex') ?? {};
-export const USDC_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'usd-coin') ?? {};
+export const ORAIX_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'oraidex') ?? {
+  contractAddress: ORAIX_CONTRACT
+};
+export const USDC_TOKEN_INFO = oraichainTokens.find((e) => e.coinGeckoId === 'usd-coin') ?? {
+  contractAddress: USDC_CONTRACT
+};

src/pages/UniversalSwap/Component/ChartUsdPrice.tsx

@@ -5,9 +5,9 @@ import { formatDateChart, formatNumberKMB } from 'pages/CoHarvest/helpers';
 import { numberWithCommas, toFixedIfNecessary } from 'pages/Pools/helpers';
 import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { selectCurrentToToken } from 'reducer/tradingSlice';
+import { selectCurrentFromToken, selectCurrentToToken } from 'reducer/tradingSlice';
 import { FILTER_TIME_CHART } from 'reducer/type';
-import { formatTimeDataChart } from '../helpers';
+import { formatTimeDataChart, getTokenIsStableCoin } from '../helpers';
 import { ChartTokenType, useChartUsdPrice } from '../hooks/useChartUsdPrice';
 import styles from './ChartUsdPrice.module.scss';
 
@@ -32,6 +32,8 @@ const ChartUsdPrice = ({
   const resizeObserver = useRef(null);
   const [theme] = useConfigReducer('theme');
   const currentToToken = useSelector(selectCurrentToToken);
+  const currentFromToken = useSelector(selectCurrentFromToken);
+  const toTokenDenomIsStable = getTokenIsStableCoin(currentToToken);
 
   const {
     currentData: data,
@@ -40,7 +42,7 @@ const ChartUsdPrice = ({
     onMouseLeave
   } = useChartUsdPrice(
     filterDay,
-    currentToToken?.coinGeckoId,
+    toTokenDenomIsStable ? currentFromToken?.coinGeckoId : currentToToken?.coinGeckoId,
     chartTokenType,
     onUpdateCurrentItem,
     onUpdatePricePercent

src/pages/UniversalSwap/Component/HeaderTab.tsx

@@ -9,6 +9,7 @@ import { FILTER_TIME_CHART, TAB_CHART_SWAP } from 'reducer/type';
 import { ChartTokenType } from '../hooks/useChartUsdPrice';
 import styles from './HeaderTab.module.scss';
 import { flattenTokens } from 'initCommon';
+import { getTokenIsStableCoin } from '../helpers';
 
 const cx = cn.bind(styles);
 
@@ -141,8 +142,10 @@ export const HeaderTop = ({
     );
   };
 
+  const toTokenDenomIsStable = getTokenIsStableCoin(currentToToken);
+  const currentToken = toTokenDenomIsStable ? currentFromToken : currentToToken;
   if (currentToToken) {
-    ToTokenIcon = generateIconTokenByTheme(currentToToken);
+    ToTokenIcon = generateIconTokenByTheme(currentToken);
   }
   if (currentFromToken) {
     const tokenIcon = flattenTokens.find(
@@ -162,7 +165,7 @@ export const HeaderTop = ({
               ? currentToChain && (
                   <div className={cx('tokenInfo')}>
                     {ToTokenIcon}
-                    <span>{currentToToken?.name || currentToToken?.denom}</span>
+                    <span>{currentToken?.name || currentToken?.denom}</span>
                     <span className={cx('tokenName')}>{currentToChain}</span>
                   </div>
                 )

src/pages/UniversalSwap/Swap/hooks/useHandleEffectTokenChange.ts

@@ -121,7 +121,11 @@ const useHandleEffectTokenChange = ({ fromTokenDenomSwap, toTokenDenomSwap }) =>
   }, [originalFromToken, fromToken]);
 
   const isConnectedWallet =
-    walletByNetworks.cosmos || walletByNetworks.bitcoin || walletByNetworks.evm || walletByNetworks.tron || window.Ton;
+    walletByNetworks.cosmos ||
+    walletByNetworks.bitcoin ||
+    walletByNetworks.evm ||
+    walletByNetworks.tron ||
+    (walletByNetworks.ton && window.Ton);
 
   let validAddress = {
     isValid: true

src/pages/UniversalSwap/helpers.ts

@@ -494,3 +494,7 @@ export const getTokenIconWithCommon = (baseDenom: string) => {
     [token?.contractAddress, token.denom].filter(Boolean).includes(baseDenom)
   );
 };
+
+export const getTokenIsStableCoin = (originalFromToken) => {
+  return ['tether', 'usd-coin'].includes(originalFromToken.coinGeckoId);
+};

src/pages/UniversalSwap/index.tsx

@@ -18,7 +18,7 @@ import ChartUsdPrice from './Component/ChartUsdPrice';
 import { TransactionProcess } from './Modals';
 import SwapComponent from './Swap';
 import { initPairSwap } from './Swap/hooks/useFillToken';
-import { NetworkFilter, TYPE_TAB_HISTORY, initNetworkFilter } from './helpers';
+import { NetworkFilter, TYPE_TAB_HISTORY, getTokenIsStableCoin, initNetworkFilter } from './helpers';
 import { ChartTokenType, useChartUsdPrice } from './hooks/useChartUsdPrice';
 import styles from './index.module.scss';
 import Lottie from 'lottie-react';
@@ -106,6 +106,7 @@ const Swap: React.FC = () => {
             <div>
               {!mobileMode && (
                 <Chart
+                  fromTokenDenom={fromTokenDenom}
                   toTokenDenom={toTokenDenom}
                   setPriceUsd={setPriceUsd}
                   priceUsd={priceUsd}
@@ -153,6 +154,7 @@ const Swap: React.FC = () => {
 
         <ModalCustom open={openModal} onClose={() => setOpenModal(false)} title="Chart" showOnBottom>
           <Chart
+            fromTokenDenom={fromTokenDenom}
             toTokenDenom={toTokenDenom}
             setPriceUsd={setPriceUsd}
             priceUsd={priceUsd}
@@ -167,13 +169,15 @@ const Swap: React.FC = () => {
 };
 
 const Chart = ({
+  fromTokenDenom,
   toTokenDenom,
   setPriceUsd,
   priceUsd,
   percentChangeUsd,
   setPercentChangeUsd,
   showTokenInfo = true
 }: {
+  fromTokenDenom: string;
   toTokenDenom: string;
   setPriceUsd: React.Dispatch<React.SetStateAction<number>>;
   priceUsd: number;
@@ -187,21 +191,25 @@ const Chart = ({
   const [hideChart, setHideChart] = useState<boolean>(false);
   const [isTxsProcess, setIsTxsProcress] = useState<boolean>(false);
   const [chartTokenType, setChartTokenType] = useState(ChartTokenType.Price);
+  const currentToToken = useSelector(selectCurrentToToken);
 
   const filterTimeChartUsd = useSelector(selectCurrentSwapFilterTime);
 
   const handleChangeChartTimeFrame = (resolution: number) => {
     dispatch(setChartTimeFrame(resolution));
   };
 
+  const toTokenDenomIsStable = getTokenIsStableCoin(currentToToken);
+  const tokenDenom = toTokenDenomIsStable ? fromTokenDenom : toTokenDenom;
+
   return (
     <div>
       <HeaderTab
         chartTokenType={chartTokenType}
         setChartTokenType={setChartTokenType}
         setHideChart={setHideChart}
         hideChart={hideChart}
-        toTokenDenom={toTokenDenom}
+        toTokenDenom={tokenDenom}
         priceUsd={priceUsd}
         percentChangeUsd={percentChangeUsd}
         showTokenInfo={showTokenInfo}