Merge pull request #538 from oraichain/feat/reverse-symbol

reverse symbol pool oraix/usdc

src/pages/Pools/helpers.ts

@@ -1,9 +1,33 @@
 import { Cw20Coin } from '@oraichain/common-contracts-sdk';
 import { InstantiateMarketingInfo } from '@oraichain/common-contracts-sdk/build/Cw20Base.types';
-import { validateNumber } from '@oraichain/oraidex-common';
+import { validateNumber, INJECTIVE_CONTRACT, ORAI, USDC_CONTRACT, ORAIX_CONTRACT } from '@oraichain/oraidex-common';
 import { Asset, AssetInfo } from '@oraichain/oraidex-contracts-sdk';
 import { MinterResponse } from '@oraichain/oraidex-contracts-sdk/build/OraiswapToken.types';
 
+// TODO: hardcode reverse symbol for ORAI/INJ,USDC/ORAIX, need to update later
+export const reverseSymbolArr = [
+  [
+    {
+      denom: INJECTIVE_CONTRACT,
+      coinGeckoId: 'injective-protocol'
+    },
+    {
+      denom: ORAI,
+      coinGeckoId: 'orai'
+    }
+  ],
+  [
+    {
+      denom: USDC_CONTRACT,
+      coinGeckoId: 'usd-coin'
+    },
+    {
+      denom: ORAIX_CONTRACT,
+      coinGeckoId: 'oraidex'
+    }
+  ]
+];
+
 export type ListTokenJsMsg = {
   initialBalances?: Cw20Coin[];
   mint?: MinterResponse;
@@ -54,6 +78,14 @@ const getInfoLiquidityPool = ({ denom, contract_addr }) => {
   return { native_token: { denom } };
 };
 
+const getSymbolPools = (baseDenom: string, quoteDenom: string, originalSymbols: string) => {
+  let symbols = originalSymbols;
+  if (reverseSymbolArr.some((item) => item[0].denom === baseDenom && item[1].denom === quoteDenom)) {
+    symbols = originalSymbols.split('/').reverse().join('/');
+  }
+  return symbols;
+};
+
 const isBigIntZero = (value: BigInt): boolean => {
   return value === BigInt(0);
 };
@@ -131,4 +163,4 @@ export const estimateShare = ({
   return share;
 };
 
-export { generateMsgFrontierAddToken, getInfoLiquidityPool, isBigIntZero };
+export { generateMsgFrontierAddToken, getInfoLiquidityPool, isBigIntZero, getSymbolPools };

src/pages/Pools/index.tsx

@@ -5,15 +5,19 @@ import NewTokenModal from './NewTokenModal/NewTokenModal';
 import { Header } from './components/Header';
 import { ListPools } from './components/ListPool';
 import { ListPoolsMobile } from './components/ListPoolMobile';
-import { CW20_DECIMALS, INJECTIVE_CONTRACT, ORAI, TokenItemType, toDisplay } from '@oraichain/oraidex-common';
+import {
+  CW20_DECIMALS,
+  TokenItemType,
+  toDisplay,
+} from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import { oraichainTokensWithIcon } from 'config/chainInfos';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useTheme from 'hooks/useTheme';
 import isEqual from 'lodash/isEqual';
 import { PoolInfoResponse } from 'types/pool';
 import { Filter } from './components/Filter';
-import { parseAssetOnlyDenom } from './helpers';
+import { getSymbolPools, parseAssetOnlyDenom, reverseSymbolArr } from './helpers';
 import { ReactComponent as DefaultIcon } from 'assets/icons/tokens.svg';
 import {
   useFetchCacheRewardAssetForAllPools,
@@ -71,7 +75,7 @@ const Pools: React.FC<{}> = () => {
       // calculate my stake in usdt, we calculate by bond_amount from contract and totalLiquidity from backend.
       const myStakedLP = stakingToken
         ? totalRewardInfoData?.reward_infos.find((item) => isEqual(item.staking_token, stakingToken))?.bond_amount ||
-          '0'
+        '0'
         : 0;
       const lpPrice = Number(totalSupply) ? totalLiquidity / Number(totalSupply) : 0;
       const myStakeLPInUsdt = +myStakedLP * lpPrice;
@@ -87,12 +91,7 @@ const Pools: React.FC<{}> = () => {
       const [baseToken, quoteToken] = [baseDenom, quoteDenom].map((denom) =>
         oraichainTokensWithIcon.find((token) => token.denom === denom || token.contractAddress === denom)
       );
-      // TODO: hardcode reverse symbol order for ORAI/INJ pools, need to update later
-      let { symbols } = pool;
-      if (baseDenom === INJECTIVE_CONTRACT && quoteDenom === ORAI) {
-        symbols = symbols.split('/').reverse().join('/');
-      }
-
+      const symbols = getSymbolPools(baseDenom, quoteDenom, pool.symbols);
       // calc claimable of each pool
       const claimableAmount = listClaimableData.find((e) => isEqual(e.liquidityAddr, stakingToken));
 
@@ -117,8 +116,11 @@ const Pools: React.FC<{}> = () => {
     if (baseToken) BaseTokenIcon = theme === 'light' ? baseToken.IconLight : baseToken.Icon;
     if (quoteToken) QuoteTokenIcon = theme === 'light' ? quoteToken.IconLight : quoteToken.Icon;
 
-    // TODO: hardcode reverse logo for ORAI/INJ, need to update later
-    if (baseToken?.coinGeckoId === 'injective-protocol' && quoteToken?.coinGeckoId === 'oraichain-token') {
+    // TODO: hardcode reverse logo for ORAI/INJ,USDC/ORAIX, need to update later
+    const isReverseLogo = reverseSymbolArr.some(
+      (item) => item[0].coinGeckoId === baseToken?.coinGeckoId && item[1].coinGeckoId === quoteToken?.coinGeckoId
+    );
+    if (isReverseLogo) {
       return (
         <div className={styles.symbols}>
           <QuoteTokenIcon className={styles.symbols_logo_left} />

src/tests/pool.spec.ts

@@ -1,7 +1,14 @@
-import { ORAI, buildMultipleExecuteMessages } from '@oraichain/oraidex-common';
+import {
+  ORAI,
+  buildMultipleExecuteMessages,
+  INJECTIVE_CONTRACT,
+  USDC_CONTRACT,
+  ORAIX_CONTRACT,
+  WETH_CONTRACT
+} from '@oraichain/oraidex-common';
 import { flattenTokens } from 'config/bridgeTokens';
 import { getPoolTokens } from 'config/pools';
-import { estimateShare, formatDisplayUsdt, toFixedIfNecessary } from 'pages/Pools/helpers';
+import { estimateShare, formatDisplayUsdt, getSymbolPools, toFixedIfNecessary } from 'pages/Pools/helpers';
 import { ProvideQuery, Type, generateContractMessages } from 'rest/api';
 import { constants } from './listing-simulate';
 
@@ -101,4 +108,13 @@ describe('pool', () => {
     payload.totalShare = NaN;
     expect(estimateShare(payload)).toEqual(0);
   });
+
+  it.each<[string, string, string, string]>([
+    [INJECTIVE_CONTRACT, ORAI, 'INJ/ORAI', 'ORAI/INJ'],
+    [USDC_CONTRACT, ORAIX_CONTRACT, 'USDC/ORAIX', 'ORAIX/USDC'],
+    [ORAI, WETH_CONTRACT, 'ORAI/WETH', 'ORAI/WETH']
+  ])('test getSymbolPools', (baseDenom, quoteDenom, originalSymbols, expected) => {
+    const symbols = getSymbolPools(baseDenom, quoteDenom, originalSymbols);
+    expect(symbols).toEqual(expected);
+  });
 });