diff --git a/src/components/icon/Loading.tsx b/src/components/icon/Loading.tsx index 3fb511e95..f2a0f9a65 100644 --- a/src/components/icon/Loading.tsx +++ b/src/components/icon/Loading.tsx @@ -2,6 +2,31 @@ import React from 'react'; const bgGridSmallImg = 'https://i.postimg.cc/43xZN5zd/bg-image2.png'; +export function LoadingSmall() { + return ( +
+ + {' '} + {' '} + +
+ ); +} + export function Loading() { return (
diff --git a/src/components/icon/PoolsPagination.tsx b/src/components/icon/PoolsPagination.tsx new file mode 100644 index 000000000..9dbb57525 --- /dev/null +++ b/src/components/icon/PoolsPagination.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +export const PrePage = () => { + return ( + + + + ); +}; + +export const NextPage = () => { + return ( + + + + ); +}; diff --git a/src/components/pool/PoolTabV3.tsx b/src/components/pool/PoolTabV3.tsx index 16eed2d83..ce11a9d79 100644 --- a/src/components/pool/PoolTabV3.tsx +++ b/src/components/pool/PoolTabV3.tsx @@ -8,6 +8,7 @@ import { getAllTvl, getAllVolume24h, getYourPools, + getAllPoolData, } from '../../services/indexer'; import { PoolTabBanner, PoolTabBannerMask } from '../icon/Pool'; import { @@ -73,8 +74,13 @@ export const PoolTabV3 = ({ const [allVolume24h, setAllVolume24h] = useState(); useEffect(() => { - getAllTvl().then(setAllTVL); - getAllVolume24h().then(setAllVolume24h); + // getAllTvl().then(setAllTVL); + // getAllVolume24h().then(setAllVolume24h); + + getAllPoolData().then((res) => { + setAllTVL(res.tvl); + setAllVolume24h(res.volume_24h); + }); }, []); const isMobile = useClientMobile(); diff --git a/src/components/poolsPagination/Pagination.tsx b/src/components/poolsPagination/Pagination.tsx new file mode 100644 index 000000000..f9dfa9394 --- /dev/null +++ b/src/components/poolsPagination/Pagination.tsx @@ -0,0 +1,239 @@ +import React, { useState, useMemo, useEffect } from 'react'; +import { isMobile } from '../../utils/device'; + +const Pagination = ({ + totalItems, + itemsPerPage, + onChangePage, + onPageSizeChange, +}: { + totalItems: number; + itemsPerPage: number; + onChangePage: any; + onPageSizeChange: any; +}) => { + const pageCount = Math.ceil(totalItems / itemsPerPage); + + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(itemsPerPage); + useEffect(() => { + setCurrentPage(1); + onChangePage(1, 100); + }, [pageCount]); + const activePageStyle = { backgroundColor: '#566069' }; + const disableStyle = { color: '#7E8A93' }; + const activeLinkStyle = { color: '#fff' }; + + const disableStyleMobile = { + color: '#7E8A93', + width: '1.75rem', + height: '1.75rem', + borderRadius: '8px', + border: '1px solid #7E8A93', + fontSize: '12px', + }; + + const activeLinkStyleMobile = { + color: '#00FFD1', + width: '1.75rem', + height: '1.75rem', + borderRadius: '8px', + border: '1px solid #00FFD1', + fontSize: '12px', + }; + + const goToPage = (pageNumber) => { + if (pageNumber >= 1 && pageNumber <= pageCount && pageNumber !== '...') { + setCurrentPage(pageNumber); + onChangePage(pageNumber, pageSize); + } + }; + + const handlePageSizeChange = (newPageSize: number) => { + setPageSize(newPageSize); + onPageSizeChange(newPageSize); + goToPage(1); + }; + + const goPreOrNext = (index) => { + if (index + 1 > 5) { + onChangePage(currentPage + 5); + setCurrentPage((pre) => pre + 5); + } else { + onChangePage(currentPage - 5); + setCurrentPage((pre) => pre - 5); + } + }; + + const pageNumbersList = useMemo(() => { + const renderList = []; + if (pageCount <= 7) { + for (let i = 1; i <= pageCount; i++) { + renderList.push(i); + } + } else { + // Condition for current page + if (currentPage < 5) { + renderList.push(...[1, 2, 3, 4, 5, 6, '...', pageCount]); + } else if (currentPage >= 5 && currentPage < pageCount - 4) { + renderList.push( + ...[ + 1, + '...', + currentPage - 2, + currentPage - 1, + currentPage, + currentPage + 1, + currentPage + 2, + '...', + pageCount, + ] + ); + } else if (currentPage >= pageCount - 4) { + renderList.push( + ...[ + 1, + '...', + pageCount - 5, + pageCount - 4, + pageCount - 3, + pageCount - 2, + pageCount - 1, + pageCount, + ] + ); + } + } + return renderList; + }, [currentPage, pageCount]); + + const pageNumbersListForMobile = useMemo(() => { + return ( +
+ {currentPage}/ + {pageCount} +
+ ); + }, [currentPage, pageCount]); + + return ( + pageCount > 0 && ( +
+ {isMobile() ? ( +
+
currentPage > 1 && goToPage(1)} + > + {`|<`} +
+
currentPage > 1 && goToPage(currentPage - 1)} + > + {`<<`} +
+
+ ) : ( +
currentPage > 1 && goToPage(currentPage - 1)} + className="mr-auto" + > + {`<< Previous`} +
+ )} + + {/* main page list */} + {!isMobile() ? ( +
    + {pageNumbersList.map((item, index) => { + if (item === '...') { + return ( +
  • + goPreOrNext(index)} + > + {item} + +
    • + ); + } else { + return ( +
  • + goToPage(item)}> + {item} + +
    • + ); + } + })} +
+ ) : ( + pageNumbersListForMobile + )} + + {isMobile() ? ( +
+
+ currentPage < pageCount && goToPage(currentPage + 1) + } + > + {`>>`} +
+
currentPage < pageCount && goToPage(pageCount)} + > + {`>|`} +
+
+ ) : ( +
currentPage < pageCount && goToPage(currentPage + 1)} + className=" ml-auto" + > + {`Next >>`} +
+ )} +
+ ) + ); +}; + +export default Pagination; diff --git a/src/components/stableswap/CommonComp.tsx b/src/components/stableswap/CommonComp.tsx index b79fec221..939100d0f 100644 --- a/src/components/stableswap/CommonComp.tsx +++ b/src/components/stableswap/CommonComp.tsx @@ -101,6 +101,7 @@ export const TknImages = ({ if (icon) return (
1 ? '-mt-3' : 'relative z-10' } h-${size || 10} w-${size || 10} rounded-full ${ @@ -389,13 +390,13 @@ export const StableTokens = ({ }; function add_to_watchlist_tip() { const tip = intl.formatMessage({ id: 'add_to_watchlist' }); - let result: string = `
${tip}
`; + const result: string = `
${tip}
`; return result; } function remove_from_watchlist_tip() { const tip = intl.formatMessage({ id: 'remove_from_watchlist' }); - let result: string = `
${tip}
`; + const result: string = `
${tip}
`; return result; } const isMobile = isClientMobie(); diff --git a/src/global.css b/src/global.css index 071b3cd90..80a2d5c94 100644 --- a/src/global.css +++ b/src/global.css @@ -269,14 +269,28 @@ input[type='number'] { border-radius: 6px; } +.slick-loader-new { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: -1; + transition: all 0.5s; + border-radius: 6px; +} + .loadingScreen.active, -.slick-loader.active { +.slick-loader.active, +.slick-loader-new.active { z-index: 10000; opacity: 1; } .loadingScreen svg, -.slick-loader svg { +.slick-loader svg, +.slick-loader-new svg { position: absolute; top: 50%; transform: translateY(-50%); @@ -287,7 +301,8 @@ input[type='number'] { } .loadingScreen svg path, -.slick-loader svg path { +.slick-loader svg path, +.slick-loader-new svg path { animation: spin 1s linear infinite; transform-origin: center; } @@ -298,7 +313,8 @@ input[type='number'] { } .loadingScreen.slick-loader-inner, -.slick-loader.slick-loader-inner { +.slick-loader.slick-loader-inner, +.slick-loader-new.slick-loader-inner { position: absolute; } diff --git a/src/pages/Orderly/OrderlyPerpetual.tsx b/src/pages/Orderly/OrderlyPerpetual.tsx index ebb4db238..633eb8a12 100644 --- a/src/pages/Orderly/OrderlyPerpetual.tsx +++ b/src/pages/Orderly/OrderlyPerpetual.tsx @@ -49,7 +49,7 @@ import { CheckBox } from './components/Common'; import { parseSymbol } from './components/RecentTrade'; import { NewUserTip } from './components/Common/NewUserTip'; -export const REF_ORDERLY_PERP_TIP_SIG = 'REF_ORDERLY_PERP_TIP_SIGN8'; +export const REF_ORDERLY_PERP_TIP_SIG = 'REF_ORDERLY_PERP_TIP_SIGN9'; function TradingBoard() { const isLarge = useLargeScreen(); diff --git a/src/pages/Orderly/OrderlyTradingBoard.tsx b/src/pages/Orderly/OrderlyTradingBoard.tsx index bd738a33f..c61b25925 100644 --- a/src/pages/Orderly/OrderlyTradingBoard.tsx +++ b/src/pages/Orderly/OrderlyTradingBoard.tsx @@ -265,13 +265,13 @@ function OrderlyTradingBoard() { <>
{/* todo */} - {/* {!isMobile && } */} + {!isMobile && } {!isMobile && } {isMobile && }
{/* todo */} - {/* {isMobile && } */} + {isMobile && } ); } diff --git a/src/pages/Orderly/components/PerpHeader/index.tsx b/src/pages/Orderly/components/PerpHeader/index.tsx index bde28b5ee..4e40be197 100644 --- a/src/pages/Orderly/components/PerpHeader/index.tsx +++ b/src/pages/Orderly/components/PerpHeader/index.tsx @@ -25,14 +25,14 @@ export function PerpOrderlyTip() { }} > (); + const [allData, setAllData] = useState(null); + const [backToFarmsButton, setBackToFarmsButton] = useState(false); const [showFullStart, setShowFullStar] = useState(false); const [chartDisplay, setChartDisplay] = useState<'volume' | 'tvl'>('volume'); @@ -2398,6 +2405,12 @@ export default function PoolDetailsPage() { getWatchListFromDb({ pool_id: id }).then((watchlist) => { setShowFullStar(watchlist.length > 0); }); + const knownPoolIds = new Set(ALL_STABLE_POOL_IDS); + if (!knownPoolIds.has(id)) { + getPoolsDetailById({ pool_id: id }).then((pool) => { + setAllData(pool); + }); + } }, []); const tokenAmountShareRaw = ( @@ -2581,19 +2594,19 @@ export default function PoolDetailsPage() { } function valueOfNearTokenTip() { const tip = intl.formatMessage({ id: 'awesomeNear_verified_token' }); - let result: string = `
${tip}
`; + const result: string = `
${tip}
`; return result; } function add_to_watchlist_tip() { const tip = intl.formatMessage({ id: 'add_to_watchlist' }); - let result: string = `
${tip}
`; + const result: string = `
${tip}
`; return result; } function remove_from_watchlist_tip() { const tip = intl.formatMessage({ id: 'remove_from_watchlist' }); - let result: string = `
${tip}
`; + const result: string = `
${tip}
`; return result; } @@ -2790,114 +2803,213 @@ export default function PoolDetailsPage() { )} -
- - } - id="tvl" - value={ - !poolTVL - ? '-' - : `$${ - Number(poolTVL) < 0.01 && Number(poolTVL) > 0 - ? '< 0.01' - : toInternationalCurrencySystem( - poolTVL?.toString() || '0', - 2 - ) - }` - } - valueTitle={poolTVL?.toString()} - /> + {allData?.id ? ( +
+ + } + id="tvl" + value={ + !allData.tvl + ? '-' + : `$${ + Number(allData.tvl) < 0.01 && Number(allData.tvl) > 0 + ? '< 0.01' + : toInternationalCurrencySystem( + allData.tvl?.toString() || '0', + 2 + ) + }` + } + valueTitle={allData.tvl?.toString()} + /> - - } - id="volume" - value={ - dayVolume - ? '$' + toInternationalCurrencySystem(dayVolume) - : '-' - } - valueTitle={dayVolume} - /> + + } + id="volume" + value={ + allData.volume_24h + ? '$' + toInternationalCurrencySystem(allData.volume_24h) + : '-' + } + valueTitle={allData.volume_24h} + /> - - } - id="fee_24h" - value={ - dayVolume - ? `$${toInternationalCurrencySystemLongString( - getPoolFee24h(dayVolume, pool).toString(), - 2 - )}` - : '-' - } - valueTitle={ - dayVolume ? `$${getPoolFee24h(dayVolume, pool)}` : '-' - } - /> - - -   - - } - id="apr" - value={ -
- {!poolTVL + + } + id="fee_24h" + value={ + allData.fee_volume_24h + ? `$${toInternationalCurrencySystemLongString( + allData.fee_volume_24h, + 2 + )}` + : '-' + } + valueTitle={ + allData.fee_volume_24h ? `$${allData.fee_volume_24h}` : '-' + } + /> + + +   + {/* {dayVolume && seedFarms && BaseApr().rawApr > 0 && ( + <> + ( + + + ) + + )} */} + + } + id="apr" + value={ +
+ {Number(allData.apy).toFixed(2)}% + {Number(allData.farm_apy) > 0 && ( + + {` +` + formatNumber(allData.farm_apy, 2) + '%'} + + )} +
+ } + /> +
+ ) : ( +
+ + } + id="tvl" + value={ + !poolTVL ? '-' - : dayVolume - ? `${getPoolFeeApr(dayVolume, pool, poolTVL)}%` - : '-'} - {poolTVL && - dayVolume && - seedFarms && - BaseApr().rawApr > 0 ? ( - - {` +` + BaseApr().displayApr} - - ) : null} + : `$${ + Number(poolTVL) < 0.01 && Number(poolTVL) > 0 + ? '< 0.01' + : toInternationalCurrencySystem( + poolTVL?.toString() || '0', + 2 + ) + }` + } + valueTitle={poolTVL?.toString()} + /> + + + } + id="volume" + value={ + dayVolume + ? '$' + toInternationalCurrencySystem(dayVolume) + : '-' + } + valueTitle={dayVolume} + /> - {!!seedFarms && - !isMobile() && + + } + id="fee_24h" + value={ + dayVolume + ? `$${toInternationalCurrencySystemLongString( + getPoolFee24h(dayVolume, pool).toString(), + 2 + )}` + : '-' + } + valueTitle={ + dayVolume ? `$${getPoolFee24h(dayVolume, pool)}` : '-' + } + /> + + +   + {/* {dayVolume && seedFarms && BaseApr().rawApr > 0 && ( + <> + ( + + + ) + + )} */} + + } + id="apr" + value={ +
+ {!poolTVL + ? '-' + : dayVolume + ? `${getPoolFeeApr(dayVolume, pool, poolTVL)}%` + : '-'} + {poolTVL && + dayVolume && seedFarms && - BaseApr().rawApr > 0 && ( - - )} -
- } - /> -
+ BaseApr().rawApr > 0 ? ( + + {` +` + BaseApr().displayApr} + + ) : null} + {!!seedFarms && + !isMobile() && + seedFarms && + BaseApr().rawApr > 0 && ( + + )} +
+ } + /> +
+ )} {pool?.id && (
)} -
{ +export const formatNumber = (v: string | number, decimal?: number) => { const big = Big(v || 0); if (big.eq(0)) { return '0'; } else if (big.lt(0.001)) { return '<0.001'; } else { - return big.toFixed(3, 1); + return big.toFixed(decimal || 3, 1); } }; + function setIsLoading(arg0: boolean) { throw new Error('Function not implemented.'); } diff --git a/src/pages/pools/LiquidityPage/LiquidityPage.tsx b/src/pages/pools/LiquidityPage/LiquidityPage.tsx index 1f1664c61..fe78fee50 100644 --- a/src/pages/pools/LiquidityPage/LiquidityPage.tsx +++ b/src/pages/pools/LiquidityPage/LiquidityPage.tsx @@ -18,6 +18,7 @@ import { useHistory } from 'react-router'; import { Card } from '../../../components/card/Card'; import { find } from 'lodash'; import { SelectModal } from '../../../components/layout/SelectModal'; +import Pagination from '../../../components/poolsPagination/Pagination'; import { useAllPools, usePools, @@ -27,6 +28,7 @@ import { useIndexerStatus, } from '../../../state/pool'; import Loading from '../../../components/layout/Loading'; +import { LoadingSmall } from '../../../../src/components/icon/Loading'; import { useTokens, @@ -72,12 +74,9 @@ import { useMobile, useClientMobile, isClientMobie, + isMobile, } from '../../../utils/device'; -import { - usePoolsMorePoolIds, - useDayVolumesPools, - useYourliquidity, -} from '../../../state/pool'; +import { useDayVolumesPools, useYourliquidity } from '../../../state/pool'; import { PoolTabV3 } from '../../../components/pool/PoolTabV3'; import { SearchIcon } from '../../../components/icon/FarmBoost'; import { @@ -208,25 +207,25 @@ function PoolRow({ index, selectCoinClass, tokens, - morePoolIds, supportFarm, farmCount, h24volume, watched, mark, farmApr, + activeTab, }: { - pool: Pool; + pool: any; index?: number; selectCoinClass?: string; tokens?: TokenMetadata[]; - morePoolIds: string[]; supportFarm: boolean; farmCount: number; h24volume: string; watched?: boolean; mark?: boolean; farmApr?: number; + activeTab?: string; }) { const { riskTokens } = useContext(TokenPriceListContext); const curRowTokens = useTokens(pool.tokenIds, tokens); @@ -252,6 +251,18 @@ function PoolRow({ : atRiskTokens.length === 1 ? `${atRiskTokens[0].symbol} is uncertified token with high risk.` : ''; + + function formatNumber(value) { + let formattedValue = value.toFixed(2); // + if (formattedValue.endsWith('.00')) { + // + formattedValue = formattedValue.substring(0, formattedValue.length - 3); + } else if (formattedValue.endsWith('0')) { + // 0 + formattedValue = formattedValue.substring(0, formattedValue.length - 1); + } + return formattedValue; + } return (
+ + {/* fee */}
- {calculateFeePercent(pool.fee)}% + {Reflect.has(pool, 'farm_apy') + ? formatNumber(pool.fee * 100) + : calculateFeePercent(pool.fee)} + %
-
- {!h24volume ? '-' : `${getPoolFeeApr(h24volume, pool)}%`} - {supportFarm && - !Number.isNaN(farmApr) && - farmApr !== null && - farmApr !== undefined && - farmApr > 0 && - h24volume && ( - - {`+${toPrecision((farmApr * 100).toString(), 2)}%`} - + {/* apr */} + {Reflect.has(pool, 'farm_apy') ? ( +
+ {`${ + Number(pool.apy).toFixed(0) != '0' + ? formatNumber(Number(pool.apy)) + : '0' + }%`} + + {`${ + Number(pool.farm_apy).toFixed(0) != '0' + ? formatNumber(Number(pool.farm_apy)) + '%' + : '' + }`} + + {Number(pool.farm_apy).toFixed(0) != '0' && ( + )} - {supportFarm && farmApr > 0 && ( - - )} -
- -
- {!h24volume - ? '-' - : Number(h24volume) == 0 - ? '$0' - : Number(h24volume) < 0.01 - ? '$ <0.01' - : `$${toInternationalCurrencySystem(h24volume)}`} -
+
+ ) : ( +
+ {!h24volume ? '-' : `${getPoolFeeApr(h24volume, pool)}%`} + {supportFarm && + !Number.isNaN(farmApr) && + farmApr !== null && + farmApr !== undefined && + farmApr > 0 && + h24volume && ( + + {`+${toPrecision((farmApr * 100).toString(), 2)}%`} + + )} + {supportFarm && farmApr > 0 && ( + + )} +
+ )} + {/* 24h */} + {Reflect.has(pool, 'farm_apy') ? ( +
+ {!pool.volume_24h + ? '-' + : Number(pool.volume_24h) == 0 + ? '$0' + : Number(pool.volume_24h) < 0.01 + ? '$ <0.01' + : `$${toInternationalCurrencySystem(pool.volume_24h)}`} +
+ ) : ( +
+ {!h24volume + ? '-' + : Number(h24volume) == 0 + ? '$0' + : Number(h24volume) < 0.01 + ? '$ <0.01' + : `$${toInternationalCurrencySystem(h24volume)}`} +
+ )} + {/* tvl */}
; volumes: Record; watchV2Pools: PoolInfo[]; - poolsMorePoolsIds: Record; watchList: WatchList[]; tokenName: string; do_farms_v2_poos: Record; @@ -678,13 +741,12 @@ function WatchListCard({ return (
void; + handleSizeChange: (key: number) => void; pools: Pool[]; switchActiveTab: (tab: string) => void; activeTab: string; @@ -761,7 +833,7 @@ function PcLiquidityPage({ onSortChange: (by: string) => void; onOrderChange: (by: string) => void; nextPage: (...args: []) => void; - poolsMorePoolsIds: Record; + setTknType: (key: string) => void; farmCounts: Record; volumes: Record; watchV2Pools: PoolInfo[]; @@ -794,6 +866,7 @@ function PcLiquidityPage({ setTvlV2(scientificNotationToString(tvl.toString())); }, [allPoolsV2]); + // useEffect(() => { if (inputRef?.current) { inputRef.current.value = tokenName; @@ -808,6 +881,7 @@ function PcLiquidityPage({ classificationOfCoins_key.forEach((key) => { filterList[key] = intl.formatMessage({ id: key }); }); + const [selectCoinClass, setSelectCoinClass] = useState('all'); const { globalState } = useContext(WalletContext); const isSignedIn = globalState.isSignedIn; @@ -827,6 +901,10 @@ function PcLiquidityPage({ !!sessionStorage.getItem(REF_POOL_ID_SEARCHING_KEY) || false ); + useEffect(() => { + setTknType(selectCoinClass); + }, [selectCoinClass]); + const handleEnableIdSearching = () => { if (enableIdSearch) { sessionStorage.removeItem(REF_POOL_ID_SEARCHING_KEY); @@ -938,7 +1016,6 @@ function PcLiquidityPage({ const poolFilterFunc = (p: Pool) => { if (selectCoinClass === 'all') return true; - return poolTokenMetas?.[p.id]?.some((tk: TokenMetadata) => classificationOfCoins[selectCoinClass].includes(tk.symbol) ); @@ -946,6 +1023,7 @@ function PcLiquidityPage({ if (activeTab === 'v2' && !allPoolsV2) return ; const totalWatchList_length = watchPools?.length + watchV2Pools?.length; + return ( <> @@ -1160,7 +1238,7 @@ function PcLiquidityPage({ setSearchFocus(false); }} onChange={(evt) => { - inputRef.current.value = evt.target.value; + inputRef.current.value = evt.target.value.trim(); if ( enableIdSearch && @@ -1267,12 +1345,12 @@ function PcLiquidityPage({ volumes={volumes} watchV2Pools={watchV2Pools} watchList={watchList} - poolsMorePoolsIds={poolsMorePoolsIds} tokenName={tokenName} do_farms_v2_poos={do_farms_v2_poos} farmAprById={farmAprById} /> )} + {/* classic pools */} {activeTab === 'v1' && (
+ {/* check farm */}
{ @@ -1301,6 +1380,7 @@ function PcLiquidityPage({
+ {/* check low pools */}
{ @@ -1334,6 +1414,7 @@ function PcLiquidityPage({
+ {/* fee */}
- + {/* apy */}
{ - onSortChange(''); - setReSortBy('apr'); - reSortBy !== 'apr' && onOrderChange('desc'); - reSortBy === 'apr' && + onSortChange('apy'); + setReSortBy(''); + sortBy !== 'apy' && onOrderChange('desc'); + sortBy === 'apy' && onOrderChange(order === 'desc' ? 'asc' : 'desc'); }} > @@ -1391,16 +1472,18 @@ function PcLiquidityPage({ { - onSortChange(''); - setReSortBy('apr'); - reSortBy !== 'apr' && onOrderChange('desc'); - reSortBy === 'apr' && + onSortChange('apy'); + setReSortBy(''); + sortBy !== 'apy' && onOrderChange('desc'); + sortBy === 'apy' && onOrderChange(order === 'desc' ? 'asc' : 'desc'); }} > - {reSortBy === 'apr' ? ( + {sortBy === 'apy' ? ( order === 'desc' ? ( ) : ( @@ -1411,17 +1494,17 @@ function PcLiquidityPage({ )}
- + {/* 24h */}
{ - onSortChange(''); - setReSortBy('volume'); - reSortBy !== 'volume' && onOrderChange('desc'); - reSortBy === 'volume' && + onSortChange('24h'); + setReSortBy(''); + sortBy !== '24h' && onOrderChange('desc'); + sortBy === '24h' && onOrderChange(order === 'desc' ? 'asc' : 'desc'); }} > @@ -1432,18 +1515,18 @@ function PcLiquidityPage({ { - onSortChange(''); - setReSortBy('volume'); - reSortBy !== 'volume' && onOrderChange('desc'); - reSortBy === 'volume' && + onSortChange('24h'); + setReSortBy(''); + sortBy !== '24h' && onOrderChange('desc'); + sortBy === '24h' && onOrderChange(order === 'desc' ? 'asc' : 'desc'); }} > - {reSortBy === 'volume' ? ( + {sortBy === '24h' ? ( order === 'desc' ? ( ) : ( @@ -1454,7 +1537,7 @@ function PcLiquidityPage({ )}
- + {/* tvl */}
-
- {pools - ?.filter(poolFilterFunc) - .sort(poolReSortingFunc) - .map((pool, i) => { + {!cardLoading && ( +
+ {pools?.map((pool, i) => { return ( -
+
); })} -
+
+ )} + {cardLoading && ( +
+ +
+ )} )} @@ -1590,6 +1677,7 @@ function PcLiquidityPage({ className={'pr-1'} maxWidth="210px" /> + {/* total locked amounts */} ( )} + {activeTab == 'v1' && ( +
+ +
+ )}
- {isSignedIn && ( + {isSignedIn && activeTab != 'v1' && ( { @@ -1755,24 +1853,54 @@ export default function LiquidityPage() { const [hideLowTVL, setHideLowTVL] = useState(false); const riskTokens = useRiskTokens(); const [displayPools, setDisplayPools] = useState(); - const { pools, hasMore, nextPage, loading, volumes } = usePools({ - tokenName, - sortBy, - order, - }); + const tokenPriceList = useTokenPriceList(); const [farmOnly, setFarmOnly] = useState( localStorage.getItem(REF_FI_FARM_ONLY) === '1' || false ); + const [tknType, setTknType] = useState('all'); + const [activeTab, setActiveTab] = useState( localStorage.getItem(REF_FI_POOL_ACTIVE_TAB) || 'v1' ); + // pagination + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(100); + const [totalItems, setTotalItems] = useState(0); + + const handleSetTknType = (type) => { + setTknType(type); + }; + + useEffect(() => { + if (localStorage.getItem('poolsTotal')) { + setTotalItems(Number(localStorage.getItem('poolsTotal'))); + } + }, [localStorage.getItem('poolsTotal')]); + + const handlePageChange = (newPage, newSize) => { + setCurrentPage(newPage); + console.log(`Changed to page ${newPage} with size ${newSize}`); + // fetch + }; + + // + const handleSizeChange = (newSize) => { + setPageSize(newSize); + console.log(`Changed page size to ${newSize}`); + // + }; + + // pagination end + const switchActiveTab = (curTab: string) => { setActiveTab(curTab); - + if (curTab != 'v1') { + setCurrentPage(1); + } localStorage.setItem(REF_FI_POOL_ACTIVE_TAB, curTab); }; const [farmCounts, setFarmCounts] = useState>({}); @@ -1780,6 +1908,31 @@ export default function LiquidityPage() { const [do_farms_v2_poos, set_do_farms_v2_poos] = useState< Record >({}); + + const activeObj = { + v1: 'classic', + v2: 'dcl', + stable: 'stable', + }; + useEffect(() => { + setCurrentPage(1); + }, [farmOnly, hideLowTVL]); + + const { pools, hasMore, nextPage, volumes, cardLoading } = usePools({ + tokenName, + activeTab, + sortBy, + order, + getTopPoolsProps: { + farm: farmOnly, + hide_low_pool: hideLowTVL, + type: activeObj[activeTab], + sort: sortBy, + order, + offset: (currentPage - 1) * pageSize, + token_type: tknType, + }, + }); useEffect(() => { get_all_seeds().then((seeds: Seed[]) => { const activeSeeds = seeds.filter((seed: Seed) => { @@ -1846,6 +1999,7 @@ export default function LiquidityPage() { ); setDisplayPools(tempPools); }, [pools, hideLowTVL, farmOnly, farmCounts]); + const poolTokenMetas = usePoolTokens(pools); const onSearch = useCallback( @@ -1893,8 +2047,6 @@ export default function LiquidityPage() { } }, [txHash]); - const poolsMorePoolsIds = usePoolsMorePoolIds(); - const watchPoolVolumes = useDayVolumesPools(watchPools.map((p) => p.id)); const v3PoolVolumes = useV3VolumesPools(); const stablePools = useAllStablePools(); @@ -1930,13 +2082,7 @@ export default function LiquidityPage() { const allVolumes = { ...watchPoolVolumes, ...volumes, ...v3PoolVolumes }; - if ( - !displayPools || - loading || - !watchPools || - !poolTokenMetas || - !farmAprById - ) + if (!displayPools || !watchPools || !poolTokenMetas || !farmAprById) return ; return ( @@ -1946,7 +2092,7 @@ export default function LiquidityPage() { riskTokens, }} > - {!clientMobileDevice && ( + {!isMobile() && ( { localStorage.setItem(HIDE_LOW_TVL, isHide.toString()); setHideLowTVL(isHide); @@ -1980,16 +2125,21 @@ export default function LiquidityPage() { hasMore={hasMore} nextPage={nextPage} do_farms_v2_poos={do_farms_v2_poos} + totalItems={totalItems} + handlePageChange={handlePageChange} + handleSizeChange={handleSizeChange} + pageSize={pageSize} + cardLoading={cardLoading} + setTknType={handleSetTknType} /> )} - {clientMobileDevice && ( + {isMobile() && ( )} {indexerFail && ( @@ -2264,7 +2421,7 @@ const RenderDisplayTokensAmounts = ({ return ( { setChartActiveToken && setChartActiveToken(token.id); }} diff --git a/src/pages/pools/LiquidityPage/MobileLiquidityPage/LiquidityV1PoolsMobile.tsx b/src/pages/pools/LiquidityPage/MobileLiquidityPage/LiquidityV1PoolsMobile.tsx index 1894cb5c8..a27f46b2e 100644 --- a/src/pages/pools/LiquidityPage/MobileLiquidityPage/LiquidityV1PoolsMobile.tsx +++ b/src/pages/pools/LiquidityPage/MobileLiquidityPage/LiquidityV1PoolsMobile.tsx @@ -41,7 +41,6 @@ const LiquidityV1PoolsMobile = ({ selectCoinClass, poolTokenMetas, watchPools, - poolsMorePoolsIds, farmCounts, farmAprById, filterList, @@ -52,7 +51,6 @@ const LiquidityV1PoolsMobile = ({ onHide, pools, volumes, - poolFilterFunc, }: any) => { const intl = useIntl(); @@ -264,23 +262,19 @@ const LiquidityV1PoolsMobile = ({ )}
- {pools - ?.filter(poolFilterFunc) - .sort(poolSortingFunc) - .map((pool, i) => ( - - ))} + {pools.sort(poolSortingFunc).map((pool, i) => ( + + ))}
diff --git a/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobileLiquidityPage.tsx b/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobileLiquidityPage.tsx index 652377b29..6e9449432 100644 --- a/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobileLiquidityPage.tsx +++ b/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobileLiquidityPage.tsx @@ -76,8 +76,15 @@ import LiquidityV1PoolsMobile from 'src/pages/pools/LiquidityPage/MobileLiquidit import { PoolsTip } from '../../poolsComponents/poolsTip'; import CustomTooltip from 'src/components/customTooltip/customTooltip'; import { TknIcon } from 'src/components/icon/Common'; +import Pagination from '../../../../components/poolsPagination/Pagination'; function MobileLiquidityPage({ + h24VolumeV2, + totalItems, + pageSize, + handlePageChange, + handleSizeChange, + cardLoading, pools, tokenName, order, @@ -92,7 +99,6 @@ function MobileLiquidityPage({ hideLowTVL, allPools, poolTokenMetas, - poolsMorePoolsIds, farmCounts, farmOnly, setFarmOnly, @@ -103,7 +109,15 @@ function MobileLiquidityPage({ watchList, do_farms_v2_poos, farmAprById, + setTknType, }: { + cardLoading: boolean; + totalItems: number; + pageSize: number; + handlePageChange: (key: any, size: any) => void; + handleSizeChange: (key: number) => void; + h24VolumeV2: string; + farmAprById: Record; pools: Pool[]; poolTokenMetas: any; farmOnly: boolean; @@ -120,7 +134,6 @@ function MobileLiquidityPage({ onSearch: (name: string) => void; onOrderChange: (by: string) => void; nextPage: (...args: []) => void; - poolsMorePoolsIds: Record; farmCounts: Record; volumes: Record; switchActiveTab: (tab: string) => void; @@ -128,7 +141,7 @@ function MobileLiquidityPage({ watchV2Pools: PoolInfo[]; watchList: WatchList[]; do_farms_v2_poos: Record; - farmAprById: Record; + setTknType: (key: string) => void; }) { const { globalState } = useContext(WalletContext); const isSignedIn = globalState.isSignedIn; @@ -229,6 +242,10 @@ function MobileLiquidityPage({ const [selectCoinClass, setSelectCoinClass] = useState('all'); const [showAddPoolModal, setShowAddPoolModal] = useState(false); + useEffect(() => { + setTknType(selectCoinClass); + }, [selectCoinClass]); + const poolFilterFunc = (p: Pool) => { if (selectCoinClass === 'all') return true; @@ -303,7 +320,6 @@ function MobileLiquidityPage({ watchV2Pools={watchV2Pools} farmCounts={farmCounts} volumes={volumes} - poolsMorePoolsIds={poolsMorePoolsIds} watchList={watchList} do_farms_v2_poos={do_farms_v2_poos} farmAprById={farmAprById} @@ -524,7 +540,6 @@ function MobileLiquidityPage({ selectCoinClass, poolTokenMetas, watchPools, - poolsMorePoolsIds, farmCounts, farmAprById, filterList, @@ -535,7 +550,6 @@ function MobileLiquidityPage({ onHide, pools, volumes, - poolFilterFunc, }} /> )} @@ -657,6 +671,16 @@ function MobileLiquidityPage({ farmAprById={farmAprById} /> )} + {activeTab == 'v1' && ( +
+ +
+ )}
{isSignedIn && ( ; volumes: Record; watchV2Pools: PoolInfo[]; - poolsMorePoolsIds: Record; watchList: WatchList[]; do_farms_v2_poos: Record; farmAprById: Record; @@ -788,7 +810,6 @@ function MobileWatchListCard({ sortBy={sortBy} pool={pool} watched={!!find(watchPools, { id: pool.id })} - morePoolIds={poolsMorePoolsIds[pool.id]} supportFarm={!!farmCounts[pool.id]} h24volume={volumes[pool.id]} watchPool diff --git a/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobilePoolRow.tsx b/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobilePoolRow.tsx index 22a913d7a..725aa6f0f 100644 --- a/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobilePoolRow.tsx +++ b/src/pages/pools/LiquidityPage/MobileLiquidityPage/MobilePoolRow.tsx @@ -24,7 +24,6 @@ function MobilePoolRow({ sortBy, watched, tokens, - morePoolIds, supportFarm, h24volume, watchPool, @@ -32,11 +31,10 @@ function MobilePoolRow({ farmApr, farmCount, }: { - pool: Pool; + pool: any; sortBy: string; watched: Boolean; tokens?: TokenMetadata[]; - morePoolIds: string[]; supportFarm: Boolean; h24volume: string; watchPool?: boolean; @@ -54,10 +52,21 @@ function MobilePoolRow({ }; const history = useHistory(); + function formatNumber(value) { + let formattedValue = value.toFixed(2); // + if (formattedValue.endsWith('.00')) { + // + formattedValue = formattedValue.substring(0, formattedValue.length - 3); + } else if (formattedValue.endsWith('0')) { + // 0 + formattedValue = formattedValue.substring(0, formattedValue.length - 1); + } + return formattedValue; + } + if (!curRowTokens) return <>; tokens = sort_tokens_by_base(tokens); - const showSortedValue = ({ sortBy, value, @@ -67,51 +76,28 @@ function MobilePoolRow({ }) => { if (sortBy === 'tvl') return indexFail ? '-' : toInternationalCurrencySystem(value.toString()); - else if (sortBy === 'fee') return `${calculateFeePercent(value)}%`; + else if (sortBy === 'fee') + return `${ + Reflect.has(pool, 'farm_apy') + ? formatNumber(pool.fee * 100) + : calculateFeePercent(pool.fee) + }%`; else if (sortBy === 'volume_24h') - return !h24volume + return !pool.volume_24h ? '-' - : Number(h24volume) == 0 + : Number(pool.volume_24h) == 0 ? '$0' - : Number(h24volume) < 0.01 + : Number(pool.volume_24h) < 0.01 ? '$ <0.01' - : `$${toInternationalCurrencySystem(h24volume)}`; - else if (sortBy === 'apr') return `${getPoolFeeApr(h24volume, pool)}%`; + : `$${toInternationalCurrencySystem(pool.volume_24h)}`; + else if (sortBy === 'apr') + return `${ + Number(pool.apy).toFixed(0) != '0' + ? formatNumber(Number(pool.apy)) + : '0' + }%`; }; - const morePoolButton = !( - morePoolIds?.length && - morePoolIds?.length > 1 && - !watchPool - ) ? null : ( - - ); const is_muti_tokens = curRowTokens?.length > 3; const atRiskTokens = curRowTokens.filter((token) => riskTokens.some((riskToken) => riskToken.id === token.id) @@ -139,9 +125,9 @@ function MobilePoolRow({
{/*
0 ? await getUnclaimedReward(farm.farm_id) : '0'; @@ -362,7 +362,7 @@ export const getUnclaimedFarms = async ({ seeds: Record; }): Promise => { const isSignedIn = wallet.isSignedIn(); - let farms: FarmInfo[] = await getFarms({ + const farms: FarmInfo[] = await getFarms({ page, perPage, stakedList, @@ -387,7 +387,7 @@ export const getUnclaimedFarms = async ({ export const getFarmsBySeedId = async (seed_id: number): Promise => { const farms: Farm[] = await refFarmViewFunction({ methodName: 'list_farms_by_seed', - args: { seed_id: seed_id }, + args: { seed_id }, }); return farms; @@ -415,7 +415,7 @@ export const getRewardByTokenId = async ( ): Promise => { return refFarmViewFunction({ methodName: 'get_reward', - args: { account_id: accountId, token_id: token_id }, + args: { account_id: accountId, token_id }, }); }; @@ -425,7 +425,7 @@ export const getUnclaimedReward = async ( ): Promise => { return refFarmViewFunction({ methodName: 'get_unclaimed_reward', - args: { account_id: accountId, farm_id: farm_id }, + args: { account_id: accountId, farm_id }, }); }; @@ -449,7 +449,7 @@ export const claimRewardByFarm = async (farm_id: string): Promise => { functionCalls: [ { methodName: 'claim_reward_by_farm', - args: { farm_id: farm_id }, + args: { farm_id }, }, ], }); @@ -467,7 +467,7 @@ export const claimRewardBySeed = async (seed_id: string): Promise => { functionCalls: [ { methodName: 'claim_reward_by_seed', - args: { seed_id: seed_id }, + args: { seed_id }, }, ], }); @@ -515,7 +515,7 @@ export const claimAndWithDrawReward = async ( functionCalls: [ { methodName: 'claim_and_withdraw_by_seed', - args: { seed_id: farmsData[0]['seed_id'] }, + args: { seed_id: farmsData[0].seed_id }, }, ], }); @@ -525,7 +525,7 @@ export const claimAndWithDrawReward = async ( functionCalls: [ { methodName: 'claim_and_withdraw_by_farm', - args: { farm_id: farmsData[0]['farm_id'], withdraw_all_tokens: true }, + args: { farm_id: farmsData[0].farm_id, withdraw_all_tokens: true }, }, ], }); @@ -567,7 +567,7 @@ export const get_unclaimed_rewards = async (seed_id: string) => { const accountId = getCurrentWallet().wallet.getAccountId(); return await refFarmBoostViewFunction({ methodName: 'get_unclaimed_rewards', - args: { farmer_id: accountId, seed_id: seed_id }, + args: { farmer_id: accountId, seed_id }, }); }; export const get_config = async () => { @@ -628,7 +628,7 @@ export const unStake_boost = async ({ { methodName: 'unlock_and_withdraw_seed', args: { - seed_id: seed_id, + seed_id, unlock_amount, withdraw_amount, }, @@ -687,7 +687,7 @@ export const withdrawAllReward_boost = async ( functionCalls.push({ methodName: 'withdraw_reward', args: { - token_id: token_id, + token_id, }, gas: '50000000000000', }); @@ -729,7 +729,7 @@ export const claimRewardBySeed_boost = async ( ): Promise => { return refFarmBoostFunctionCall({ methodName: 'claim_reward_by_seed', - args: { seed_id: seed_id }, + args: { seed_id }, }); }; export const lock_free_seed = async ({ @@ -1076,7 +1076,7 @@ export const migrate_user_seed = async ({ { methodName: 'withdraw_seed', args: { - seed_id: seed_id, + seed_id, amount, msg, }, @@ -1209,7 +1209,7 @@ export const stake_boost_nft = async ({ { methodName: 'unlock_and_withdraw_seed', args: { - seed_id: seed_id, + seed_id, unlock_amount: '0', withdraw_amount, }, @@ -1307,7 +1307,7 @@ export const unStake_boost_nft = async ({ { methodName: 'unlock_and_withdraw_seed', args: { - seed_id: seed_id, + seed_id, unlock_amount: '0', withdraw_amount, }, @@ -1358,7 +1358,7 @@ export const batch_unStake_boost_nft = async ({ { methodName: 'unlock_and_withdraw_seed', args: { - seed_id: seed_id, + seed_id, unlock_amount: '0', withdraw_amount, }, @@ -1464,7 +1464,7 @@ export const batch_stake_boost_nft = async ({ { methodName: 'unlock_and_withdraw_seed', args: { - seed_id: seed_id, + seed_id, unlock_amount: '0', withdraw_amount, }, diff --git a/src/services/indexer.ts b/src/services/indexer.ts index 89b1fc3de..a6f2d40b2 100644 --- a/src/services/indexer.ts +++ b/src/services/indexer.ts @@ -168,7 +168,7 @@ export const getHistoryOrderSwapInfo = async ( export const get24hVolume = async (pool_id: string): Promise => { return await fetch( - config.sodakiApiUrl + `/pool/${pool_id}/rolling24hvolume/sum`, + config.newSodakiApiUrl + `/poollist/${pool_id}/24hvolume/sum`, { method: 'GET', } @@ -192,8 +192,7 @@ export const get24hVolumes = async ( for (let i = 0; i < numBatches; i++) { const batchIds = pool_ids.slice(i * batchSize, (i + 1) * batchSize); const promise = fetch( - config.sodakiApiUrl + - `/poollist/${batchIds.join('|')}/rolling24hvolume/sum`, + config.newSodakiApiUrl + `/poollist/${batchIds.join('|')}/24hvolume/sum`, { method: 'GET', } @@ -233,20 +232,6 @@ export const getYourPools = async (): Promise => { }); }; -export const getTopPoolsIndexer = async () => { - return await fetch(config.indexerUrl + '/list-top-pools', { - method: 'GET', - headers: { - 'Content-type': 'application/json; charset=UTF-8', - ...getAuthenticationHeaders('/list-top-pools'), - }, - }) - .then((res) => res.json()) - .then((poolList) => { - return poolList.map((p: any) => parsePool(p)); - }); -}; - export const getTopPoolsIndexerRaw = async () => { const timeoutDuration = 20000; // 20 seconds in milliseconds @@ -349,6 +334,138 @@ export const getTopPools = async (): Promise => { } }; +export const getTopPoolsByNewUI = async ({ + type = 'classic', + sort = 'tvl', + limit = '100', + offset = '0', + farm = 'false', + hide_low_pool = 'false', + order = 'desc', + token_type = '', +}: { + type?: string; + sort?: string; + limit?: string; + offset?: string; + farm?: string | boolean; + hide_low_pool?: string | boolean; + order: string; + token_type: string; +}): Promise => { + let tktype = token_type; + if (token_type == 'all') { + tktype = ''; + } else if (token_type == 'stablecoin') { + tktype = 'stable_coin'; + } + if (sort == 'apr') { + sort = 'apy'; + } + if (sort == 'volume_24h') { + sort = '24h'; + } + + try { + let pools: any; + + pools = await fetch( + config.indexerUrl + + `/list-pools?type=${type}&sort=${sort}&limit=${limit}&offset=${offset}&farm=${farm}&hide_low_pool=${hide_low_pool}&order_by=${order}&token_type=${tktype}`, + { + method: 'GET', + headers: { + 'Content-type': 'application/json; charset=UTF-8', + ...getAuthenticationHeaders('/list-pools'), + }, + } + ).then((res) => res.json()); + + if (pools?.data?.list.length > 0) { + localStorage.setItem('poolsTotal', pools.data.total); + pools = pools.data.list; + return pools + .filter((pool: { token_account_ids: string | any[]; id: any }) => { + return !isStablePool(pool.id) && pool.token_account_ids.length < 3; + }) + .filter(filterBlackListPools); + } else { + pools = []; + return []; + } + } catch (error) { + return []; + } +}; + +export const getSearchResult = async ({ + type = 'classic', + sort = 'tvl', + limit = '100', + offset = '0', + farm = 'false', + hide_low_pool = 'false', + order = 'desc', + token_type = '', + token_list = '', + pool_id_list = '', + onlyUseId = false, +}: { + type?: string; + sort?: string; + limit?: string; + offset?: string; + farm?: string | boolean; + hide_low_pool?: string | boolean; + order?: string; + token_list?: string; + token_type?: string; + pool_id_list?: string; + onlyUseId?: boolean; +}): Promise => { + let tktype = token_type; + if (token_type == 'all') { + tktype = ''; + } else if (token_type == 'stablecoin') { + tktype = 'stable_coin'; + } + if (sort == 'apr') { + sort = 'apy'; + } + if (sort == 'volume_24h') { + sort = '24h'; + } + + try { + let pools: any; + const url = !onlyUseId + ? `/pool/search?type=${type}&sort=${sort}&limit=${limit}&offset=${offset}&farm=${farm}&hide_low_pool=${hide_low_pool}&order_by=${order}&token_type=${tktype}&token_list=${token_list}&pool_id_list=${pool_id_list}` + : `/pool/search?pool_id_list=${pool_id_list}`; + pools = await fetch(config.indexerUrl + url, { + method: 'GET', + headers: { + 'Content-type': 'application/json; charset=UTF-8', + ...getAuthenticationHeaders('/pool/search'), + }, + }).then((res) => res.json()); + localStorage.setItem('poolsTotal', pools.data.total); + + if (pools?.data?.list.length > 0) { + pools = pools.data.list; + return pools + .filter((pool: { token_account_ids: string | any[]; id: any }) => { + return !isStablePool(pool.id) && pool.token_account_ids.length < 3; + }) + .filter(filterBlackListPools); + } else { + pools = []; + return []; + } + } catch (error) { + return []; + } +}; + export const getAllPoolsIndexer = async (amountThresh?: string) => { const rawRes = await fetch( config.indexerUrl + @@ -358,7 +475,7 @@ export const getAllPoolsIndexer = async (amountThresh?: string) => { headers: getAuthenticationHeaders('/list-pools'), } ).then((res) => res.json()); - + console.log(rawRes, 'rawRes315>>>>>'); return rawRes.map((r: any) => parsePool(r)); }; @@ -645,6 +762,52 @@ export const getPoolsByIds = async ({ }); }; +export const getPoolsDetailByIds = async ({ + pool_ids, +}: { + pool_ids: string[]; +}): Promise => { + const ids = pool_ids.join('|'); + if (!ids) return []; + + return Promise.all( + pool_ids.map((pool_id) => { + return fetch(config.indexerUrl + '/pool/detail?pool_id=' + pool_id, { + method: 'GET', + headers: { + 'Content-type': 'application/json; charset=UTF-8', + ...getAuthenticationHeaders('/pool/detail'), + }, + }) + .then((res) => res.json()) + .then((pools) => { + return pools.data; + }) + .catch(() => { + return []; + }); + }) + ); +}; + +export const getPoolsDetailById = async ({ pool_id }: { pool_id: string }) => { + return fetch(config.indexerUrl + '/pool/detail?pool_id=' + pool_id, { + method: 'GET', + headers: { + 'Content-type': 'application/json; charset=UTF-8', + ...getAuthenticationHeaders('/pool/detail'), + }, + }) + .then((res) => res.json()) + .then((pools) => { + console.log(pools); + return pools.data; + }) + .catch(() => { + return []; + }); +}; + export const getTokenPriceList = async (): Promise => { return await fetch(config.indexerUrl + '/list-token-price', { method: 'GET', @@ -687,7 +850,7 @@ export const _search = (args: any, pools: PoolRPCView[]) => { export const _order = (args: any, pools: PoolRPCView[]) => { let column = args.column || 'tvl'; - let order = args.order || 'desc'; + const order = args.order || 'desc'; column = args.column === 'fee' ? 'total_fee' : column; return _.orderBy(pools, [column], [order]); }; @@ -843,6 +1006,19 @@ export const getAllVolume24h = async () => { }); }; +export const getAllPoolData = async () => { + return await fetch(config.indexerUrl + '/all-pool-data', { + method: 'GET', + headers: { + ...getAuthenticationHeaders('/all-pool-data'), + }, + }) + .then((res) => res.json()) + .then((res) => { + return res.data; + }); +}; + export const getAssets = async (dateType: 'M' | 'W' | 'H' | 'ALL' = 'H') => { const accountId = getCurrentWallet()?.wallet?.getAccountId(); return await fetch( diff --git a/src/services/pool.ts b/src/services/pool.ts index 755155442..a58c9314f 100644 --- a/src/services/pool.ts +++ b/src/services/pool.ts @@ -23,11 +23,7 @@ import { storageDepositAction, storageDepositForFTAction, } from './creators/storage'; -import { - getTopPools, - getTopPoolsIndexer, - getTopPoolsIndexerRaw, -} from '../services/indexer'; +import { getTopPools, getTopPoolsIndexerRaw } from '../services/indexer'; import { PoolRPCView } from './api'; import { checkTokenNeedsStorageDeposit, @@ -123,6 +119,31 @@ export const parsePool = (pool: PoolRPCView, id?: number): Pool => ({ pool_kind: pool?.pool_kind, }); +export const parsePoolNew = (pool: any, id?: number): any => { + return { + id: Number(id >= 0 ? id : pool.id), + tokenIds: pool.token_account_ids, + supplies: pool.amounts.reduce( + (acc: { [tokenId: string]: string }, amount: string, i: number) => { + acc[pool.token_account_ids[i]] = amount; + return acc; + }, + {} + ), + fee: pool.total_fee, + shareSupply: pool.shares_total_supply, + tvl: pool.tvl, + token0_ref_price: pool.token0_ref_price, + pool_kind: pool?.pool_kind, + apy: pool.apy, + farm_apy: pool.farm_apy, + is_farm: pool.is_farm, + volume_24h: pool.volume_24h, + token_symbols: pool.token_symbols, + search_symbols: pool.token_symbols.join('-'), + }; +}; + export const getPools = async ({ page = 1, perPage = DEFAULT_PAGE_LIMIT, @@ -238,13 +259,13 @@ export const getCachedPoolsByTokenId = async ({ token1Id: string; token2Id: string; }) => { - let normalItems = await db + const normalItems = await db .allPoolsTokens() .where('token1Id') .equals(token1Id) .and((item) => item.token2Id === token2Id) .primaryKeys(); - let reverseItems = await db + const reverseItems = await db .allPoolsTokens() .where('token1Id') .equals(token2Id) @@ -487,7 +508,7 @@ export const getPoolsByTokensAurora = async ({ ) { setLoadingData && setLoadingData(true); - let triPools = await getAllTriPools( + const triPools = await getAllTriPools( tokenIn && tokenOut ? [ tokenIn.id === WRAP_NEAR_CONTRACT_ID ? 'wNEAR' : tokenIn.symbol, @@ -804,7 +825,7 @@ export const predictLiquidityShares = async ( ): Promise => { return refFiViewFunction({ methodName: 'predict_add_stable_liquidity', - args: { pool_id: pool_id, amounts }, + args: { pool_id, amounts }, }); }; diff --git a/src/services/signature.ts b/src/services/signature.ts index 05964c6ea..29fd4dafd 100644 --- a/src/services/signature.ts +++ b/src/services/signature.ts @@ -1,7 +1,6 @@ import crypto from 'crypto-browserify'; -// const key = process.env.NEXT_PUBLIC_CRYPTO_KEY; -const key = '8309c61008a5f5ba6c51bbf977781c55'; +const key = process.env.REACT_APP_NEAR_ENV; export const getSignature = (plaintext: string) => { if (!key) return; diff --git a/src/state/pool.ts b/src/state/pool.ts index eaa085e3b..9b212f9cb 100644 --- a/src/state/pool.ts +++ b/src/state/pool.ts @@ -20,6 +20,7 @@ import { getSharesInPool, getTotalPools, parsePool, + parsePoolNew, Pool, PoolDetails, removeLiquidityFromPool, @@ -41,6 +42,8 @@ import { _order, _search, getTopPools, + getTopPoolsByNewUI, + getSearchResult, getPool, get24hVolumes, getV3PoolVolumeById, @@ -60,6 +63,7 @@ import { getDCLTopBinFee, getTokenPriceList, getIndexerStatus, + getPoolsDetailByIds, } from '../services/indexer'; import { parsePoolView, PoolRPCView } from '../services/api'; import { @@ -283,10 +287,11 @@ export const usePool = (id: number | string) => { }; interface LoadPoolsOpts { - accumulate: boolean; + accumulate?: boolean; tokenName?: string; sortBy?: string; order?: string; + getTopPoolsProps?: any; } export function useScrollToTopOnFirstPage() { @@ -320,17 +325,25 @@ export const usePools = (props: { tokenName?: string; sortBy?: string; order?: string; + getTopPoolsProps?: any; + activeTab?: any; }) => { const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(false); const [pools, setPools] = useState([]); - const [rawPools, setRawPools] = useState([]); + const [rawPools, setRawPools] = useState([]); const [loading, setLoading] = useState(true); - + const [cardLoading, setCardLoding] = useState(true); const [requestPoolList, setRequestPoolList] = useState(); + const [shortSavePools, setShortSavePools] = useState([]); + useEffect(() => { + setPools([]); + if (props.activeTab == 'v1') setLoading(true); + }, [props.activeTab]); + useEffect(() => { - if (!loading) { + if (!loading && rawPools.length) { setRequestPoolList( rawPools.map((pool) => pool.id.toString()).concat(ALL_STABLE_POOL_IDS) ); @@ -341,7 +354,25 @@ export const usePools = (props: { const nextPage = () => setPage((page) => page + 1); - function _loadPools({ + function _loadPools({ getTopPoolsProps }: LoadPoolsOpts) { + getSearchResult({ ...getTopPoolsProps, token_list: props.tokenName }) + .then(async (res) => { + const pools = + res.length > 0 ? res.map((item) => parsePoolNew(item)) : []; + + setShortSavePools(pools); + + // setHasMore(pools.length === DEFAULT_PAGE_LIMIT); + + setPools(pools); + }) + .finally(() => { + setLoading(false); + setCardLoding(false); + }); + } + + function _loadPoolsOri({ accumulate = true, tokenName, sortBy, @@ -362,6 +393,7 @@ export const usePools = (props: { setRawPools(rawPools); setHasMore(pools.length === DEFAULT_PAGE_LIMIT); + setPools((currentPools) => pools.reduce( (acc: Pool[], pool) => { @@ -382,42 +414,93 @@ export const usePools = (props: { ) ); }) - .finally(() => setLoading(false)); + .finally(() => { + setLoading(false); + setCardLoding(false); + }); } - - const loadPools = useCallback(debounce(_loadPools, 500), []); - + const loadPools = props.activeTab == 'v1' ? _loadPools : _loadPoolsOri; useEffect(() => { - const args = { - page, - perPage: DEFAULT_PAGE_LIMIT, - tokenName: trim(props.tokenName), - column: props.sortBy, - order: props.order, - }; - - const newPools = _order(args, _search(args, rawPools)).map((rawPool) => - parsePool(rawPool) - ); - setPools(newPools); + if (props.activeTab != 'v1') { + const args = { + page, + perPage: DEFAULT_PAGE_LIMIT, + tokenName: trim(props.tokenName), + column: props.sortBy, + order: props.order, + }; + + const newPools = _order(args, _search(args, rawPools)).map((rawPool) => + parsePool(rawPool) + ); + setPools(newPools); + } }, [props.sortBy, props.order, props.tokenName, rawPools]); useEffect(() => { - setLoading(true); - loadPools({ - accumulate: true, - tokenName: props.tokenName, - sortBy: props.sortBy, - order: props.order, - }); - }, [page]); + if (props.activeTab == 'v1') { + if (props.tokenName) { + setCardLoding(true); + getSearchResult({ + ...props.getTopPoolsProps, + token_list: props.tokenName, + }) + .then(async (res) => { + const pools = + res.length > 0 ? res.map((item) => parsePoolNew(item)) : []; + setShortSavePools(pools); + setHasMore(pools.length === DEFAULT_PAGE_LIMIT); + setPools(pools); + }) + .finally(() => { + setLoading(false); + setCardLoding(false); + }); + } else { + setCardLoding(true); + loadPools({ + getTopPoolsProps: props.getTopPoolsProps, + }); + } + } + }, [props.tokenName]); + useEffect(() => { + if (props.activeTab != 'v1') { + setLoading(true); + loadPools({ + accumulate: true, + tokenName: props.tokenName, + sortBy: props.sortBy, + order: props.order, + }); + } + }, [page, props.activeTab]); + + useEffect(() => { + if (props.activeTab == 'v1') { + setCardLoding(true); + loadPools({ + getTopPoolsProps: props.getTopPoolsProps, + }); + } + }, [ + props.getTopPoolsProps.farm, + props.getTopPoolsProps.hide_low_pool, + props.getTopPoolsProps.type, + props.getTopPoolsProps.sort, + props.getTopPoolsProps.order, + props.getTopPoolsProps.order_by, + props.getTopPoolsProps.offset, + props.getTopPoolsProps.token_type, + ]); return { pools, hasMore, nextPage, loading, volumes, + cardLoading, }; }; @@ -442,48 +525,48 @@ export const useMorePoolIds = ({ return ids; }; -export const usePoolsMorePoolIds = () => { - // top pool id to more pool ids:Array - const [poolsMorePoolIds, setMorePoolIds] = useState>( - {} - ); - - const getAllPoolsTokens = async () => { - return (await getAllPoolsIndexer()).filter( - (p: Pool) => p.pool_kind && p.pool_kind === 'SIMPLE_POOL' - ); - }; - - useEffect(() => { - getAllPoolsTokens().then((res) => { - const poolsMorePoolIds = res.map((p: any) => { - const id1 = p.tokenIds[0]; - const id2 = p.tokenIds[1]; - - return res - .filter( - (resP: any) => - resP.tokenIds.includes(id1) && resP.tokenIds.includes(id2) - ) - .map((a: any) => a.id.toString()); - }); - - const parsedIds = poolsMorePoolIds.reduce( - (acc: any, cur: any, i: number) => { - return { - ...acc, - [res[i].id.toString()]: cur, - }; - }, - {} - ); - - setMorePoolIds(parsedIds); - }); - }, []); - - return poolsMorePoolIds; -}; +// export const usePoolsMorePoolIds = () => { +// // top pool id to more pool ids:Array +// const [poolsMorePoolIds, setMorePoolIds] = useState>( +// {} +// ); + +// const getAllPoolsTokens = async () => { +// return (await getAllPoolsIndexer()).filter( +// (p: Pool) => p.pool_kind && p.pool_kind === 'SIMPLE_POOL' +// ); +// }; + +// useEffect(() => { +// getAllPoolsTokens().then((res) => { +// const poolsMorePoolIds = res.map((p: any) => { +// const id1 = p.tokenIds[0]; +// const id2 = p.tokenIds[1]; + +// return res +// .filter( +// (resP: any) => +// resP.tokenIds.includes(id1) && resP.tokenIds.includes(id2) +// ) +// .map((a: any) => a.id.toString()); +// }); + +// const parsedIds = poolsMorePoolIds.reduce( +// (acc: any, cur: any, i: number) => { +// return { +// ...acc, +// [res[i].id.toString()]: cur, +// }; +// }, +// {} +// ); + +// setMorePoolIds(parsedIds); +// }); +// }, []); + +// return poolsMorePoolIds; +// }; export const useMorePools = ({ tokenIds, @@ -694,26 +777,54 @@ export const useWatchPools = () => { } }); if (ids_v1.length > 0) { - getPoolsByIds({ pool_ids: ids_v1 }) - .then((res) => { - const resPools = res.map((pool) => parsePool(pool)); + // + const knownPoolIds = new Set(ALL_STABLE_POOL_IDS); + const knownIds_v1 = ids_v1.filter((id) => knownPoolIds.has(id)); + const unknownIds_v1 = ids_v1.filter((id) => !knownPoolIds.has(id)); - return resPools; - }) - .then((resPools) => { - return Promise.all( - resPools.map(async (p) => { - return { - ...p, - metas: await ftGetTokensMetadata(p.tokenIds), - }; - }) - ); + Promise.all([ + getPoolsByIds({ pool_ids: knownIds_v1 }) + .then((res) => { + const resPools = res.map((pool) => parsePool(pool)); + + return resPools; + }) + .then((resPools) => { + return Promise.all( + resPools.map(async (p) => { + return { + ...p, + metas: await ftGetTokensMetadata(p.tokenIds), + }; + }) + ); + }), + getSearchResult({ + onlyUseId: true, + pool_id_list: unknownIds_v1.join(','), }) - .then((res) => { - setWatchPools(res); - }); + .then((res) => { + const resPools = res.map((pool) => parsePoolNew(pool)); + + return resPools; + }) + .then((resPools) => { + return Promise.all( + resPools.map(async (p) => { + return { + ...p, + metas: await ftGetTokensMetadata(p.tokenIds), + }; + }) + ); + }), + ]).then(([res1, res2]) => { + const allPools = [...res1, ...res2]; + setWatchPools(allPools); + }); } + + // if (ids_v2.length > 0) { getV2PoolsByIds(ids_v2).then((res: PoolInfo[]) => { setWatchV2Pools(