Feat/update btc allocation (#1055)

* fix: update BTC (Legacy) display to BTC in various components

* feat: enhance ORAI-BTC pool handling and display logic in various components

* fix: remove unnecessary console.log statements in API functions

src/pages/Pool-V3/components/PoolList/PoolItemTData.tsx

@@ -43,6 +43,8 @@ const PoolItemTData = ({
   } = item;
   const isInactive = tokenXinfo?.name === 'BTC (Legacy)' || tokenYinfo?.name === 'BTC (Legacy)';
 
+  const isOraiBtcPoolV2 = tokenXinfo?.name === 'ORAI' && tokenYinfo?.name === 'BTC (Legacy)' && type === 'Pool V2';
+
   return (
     <>
       <td>
@@ -52,7 +54,7 @@ const PoolItemTData = ({
             <ToTokenIcon />
           </div>
           <span className={styles.title}>
-            {tokenXinfo?.name} / {tokenYinfo?.name}
+            {tokenXinfo?.name} / {isOraiBtcPoolV2 ? 'BTC' : tokenYinfo?.name}
             <span className={classNames(styles.tag, { [styles.v3]: type === POOL_TYPE.V3 })}>
               {type === POOL_TYPE.V3 ? 'V3' : 'V2'}
             </span>
@@ -102,7 +104,7 @@ const PoolItemTData = ({
                 <div className={styles.itemInfo}>
                   <span>Swap fee</span>
                   <span className={styles.value}>
-                  {aprInfo.swapFee.min === aprInfo.swapFee.max
+                    {aprInfo.swapFee.min === aprInfo.swapFee.max
                       ? `${numberWithCommas(aprInfo.swapFee.min * 100, undefined, { maximumFractionDigits: 1 })}`
                       : `${numberWithCommas(aprInfo.swapFee.min * 100, undefined, {
                           maximumFractionDigits: 1

src/pages/Pools/PoolDetail.tsx

@@ -7,7 +7,7 @@ import useConfigReducer from 'hooks/useConfigReducer';
 import useLoadTokens from 'hooks/useLoadTokens';
 import useTheme from 'hooks/useTheme';
 import Content from 'layouts/Content';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
 import { updateLpPools } from 'reducer/token';
@@ -29,7 +29,8 @@ import { Button } from 'components/Button';
 import AddIcon from 'assets/icons/Add.svg?react';
 import { parseAssetOnlyDenom } from './helpers';
 import { AddLiquidityModal } from './components/AddLiquidityModal';
-import { numberWithCommas } from 'helper/format';
+import { formatNumberKMB, numberWithCommas } from 'helper/format';
+import { BTC_CONTRACT, fetchRetry, toDisplay } from '@oraichain/oraidex-common';
 
 const PoolDetail: React.FC = () => {
   const theme = useTheme();
@@ -46,6 +47,7 @@ const PoolDetail: React.FC = () => {
   const { refetchPairAmountInfo, refetchLpTokenInfoData } = useGetPairInfo(poolDetailData);
   const queryClient = useQueryClient();
   const [pairDenomsDeposit, setPairDenomsDeposit] = useState('');
+  const [ratioOraiBtc, setRatioOraiBtc] = useState(0);
 
   const { lpBalanceInfoData, refetchLpBalanceInfoData } = useGetLpBalance(poolDetailData);
   const lpTokenBalance = BigInt(lpBalanceInfoData?.balance || '0');
@@ -118,6 +120,34 @@ const PoolDetail: React.FC = () => {
 
   const isInactive = baseToken?.name === 'BTC (Legacy)' || quoteToken?.name === 'BTC (Legacy)';
 
+  const listBTCAddresses = [
+    BTC_CONTRACT,
+    'factory/orai1wuvhex9xqs3r539mvc6mtm7n20fcj3qr2m0y9khx6n5vtlngfzes3k0rq9/obtc'
+  ];
+  useEffect(() => {
+    if (!poolDetailData) return;
+    const { token2 } = poolDetailData;
+    async function getOraiBtcAllocation() {
+      const res = await fetchRetry(
+        'https://lcd.orai.io/cosmos/bank/v1beta1/balances/orai1fv5kwdv4z0gvp75ht378x8cg2j7prlywa0g35qmctez9q8u4xryspn6lrd'
+      );
+      return await res.json();
+    }
+
+    if (listBTCAddresses.includes(token2.denom) || listBTCAddresses.includes(token2.contractAddress)) {
+      getOraiBtcAllocation().then((data) => {
+        const balances = data.balances;
+        const oraiBalance = balances.find((item) => item.denom === 'orai');
+        const btcBalance = balances.find(
+          (item) => item.denom === 'factory/orai1wuvhex9xqs3r539mvc6mtm7n20fcj3qr2m0y9khx6n5vtlngfzes3k0rq9/obtc'
+        );
+        const oraiBalanceDisplay = formatNumberKMB(toDisplay(oraiBalance?.amount || '0'), false);
+        const btcBalanceDisplay = formatNumberKMB(toDisplay(btcBalance?.amount || '0', 14), false);
+        setRatioOraiBtc(Number(oraiBalanceDisplay) / Number(btcBalanceDisplay));
+      });
+    }
+  }, [poolDetailData]);
+
   return (
     <Content nonBackground otherBackground>
       <div className={styles.pool_detail}>
@@ -142,14 +172,24 @@ const PoolDetail: React.FC = () => {
                 <span className={classNames(styles.tag)}>V2</span>
               </div>
             </div>
+
             <div className={styles.price}>
-              1 {baseToken?.name} = {numberWithCommas(priceChange?.price || 0, undefined, { maximumFractionDigits: 6 })}{' '}
               {/* TODO: remove after pool close */}
-              {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name}
+              {ratioOraiBtc
+                ? `1 ${baseToken?.name} = ${numberWithCommas(1 / (ratioOraiBtc || 1), undefined, {
+                    maximumFractionDigits: 6
+                  })}`
+                : `1 ${baseToken?.name} = ${numberWithCommas(priceChange?.price || 0, undefined, {
+                    maximumFractionDigits: 6
+                  })}`}
+              {/* TODO: remove after pool close */} {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name}
               {isMobileMode ? <br /> : <div className={styles.divider}>|</div>}1{' '}
               {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name} ={' '}
-              {numberWithCommas(1 / (priceChange?.price || 1), undefined, { maximumFractionDigits: 6 })}{' '}
-              {baseToken?.name}
+              {ratioOraiBtc
+                ? `${numberWithCommas(ratioOraiBtc || 0, undefined, { maximumFractionDigits: 6 })} ${baseToken?.name}`
+                : `${numberWithCommas(1 / (priceChange?.price || 1) || 0, undefined, { maximumFractionDigits: 6 })} ${
+                    baseToken?.name
+                  }`}
             </div>
           </div>
           <div className={styles.addPosition}>

src/pages/Pools/components/WithdrawLiquidityModal/WithdrawLiquidityModal.tsx

@@ -1,4 +1,4 @@
-import { ORAI, toAmount } from '@oraichain/oraidex-common';
+import { BTC_CONTRACT, ORAI, toAmount } from '@oraichain/oraidex-common';
 import CloseIcon from 'assets/icons/ic_close_modal.svg?react';
 import cn from 'classnames/bind';
 import { Button } from 'components/Button';
@@ -90,7 +90,13 @@ export const WithdrawLiquidityModal: FC<ModalProps> = ({
   const lp1BurnAmount =
     totalSupply === BigInt(0) || !lpAmountBurn ? BigInt(0) : (token1Amount * BigInt(lpAmountBurn)) / totalSupply;
   const lp2BurnAmount =
-    totalSupply === BigInt(0) || !lpAmountBurn ? BigInt(0) : (token2Amount * BigInt(lpAmountBurn)) / totalSupply;
+    // TOODO: remove after pool ORAI/BTC close
+    totalSupply === BigInt(0) || !lpAmountBurn
+      ? BigInt(0)
+      : (token2.contractAddress === BTC_CONTRACT
+          ? (token2Amount / BigInt(10 ** 8)) * BigInt(lpAmountBurn)
+          : token2Amount * BigInt(lpAmountBurn)) / totalSupply;
+
   const lpAmountBurnUsdt = !myLpBalance ? 0 : (Number(lpAmountBurn) / Number(myLpBalance)) * Number(myLpUsdt);
   return (
     <Modal isOpen={isOpen} close={close} open={open} isCloseBtn={false} className={cx('modal')}>

src/rest/api.ts

@@ -3,6 +3,7 @@ import { Coin, coin } from '@cosmjs/stargate';
 import { CwIcs20LatestQueryClient, MulticallQueryClient, Uint128 } from '@oraichain/common-contracts-sdk';
 import { ConfigResponse, RelayerFeeResponse } from '@oraichain/common-contracts-sdk/build/CwIcs20Latest.types';
 import {
+  BTC_CONTRACT,
   IBCInfo,
   IBC_WASM_CONTRACT,
   KWT_DENOM,
@@ -99,6 +100,17 @@ async function fetchTokenInfos(tokens: TokenItemType[]): Promise<TokenInfo[]> {
 }
 
 function parsePoolAmount(poolInfo: OraiswapPairTypes.PoolResponse, trueAsset: AssetInfo): bigint {
+  // TODO: remove when pool orai/btc close
+  if ('token' in trueAsset && trueAsset.token.contract_addr === BTC_CONTRACT) {
+    return BigInt(
+      poolInfo.assets.find(
+        (asset) =>
+          'native_token' in asset.info &&
+          asset.info.native_token.denom ===
+            'factory/orai1wuvhex9xqs3r539mvc6mtm7n20fcj3qr2m0y9khx6n5vtlngfzes3k0rq9/obtc'
+      )?.amount || '0'
+    );
+  }
   return BigInt(poolInfo.assets.find((asset) => isEqual(asset.info, trueAsset))?.amount || '0');
 }