-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pool list interface replacement (#542)
* feat: add pagination * feat: add pagination * feat: add pools type condition * feat: delete morepools id * fix:fix pools search * fix:pool list bug fix * fix: fix pool list & and add mobile pagination * feat:add pool detail interactive & fix some bug * perf: change decimals * feat: change search interface * fix: pagination currentpage * fix: add farm_apy * fix: fix pagination & add mobile pagination * fix: client width error * fix: tab change init currentpage * feat: change 24vol interface * fix: fix url * fix: 24vol path fix * fix: init currentpage when check farmonly and lowtvl * fix: change tofixed * feat: add locklp * fix: add new format fn. * perf: merge function * feat: interface auth test * update config * feat: change url * update signature.ts * fix: pagination change * perf: dcl pool loading * update orderly tip * perf: add default height * feat: remove activeTab --------- Co-authored-by: deep-path <[email protected]> Co-authored-by: xieqian <[email protected]>
- Loading branch information
3 people
authored
Jun 20, 2024
1 parent
3f5d293
commit 134db7a
Showing
21 changed files
with
1,371 additions
and
457 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react'; | ||
|
|
||
| export const PrePage = () => { | ||
| return ( | ||
| <svg | ||
| width="11" | ||
| height="12" | ||
| viewBox="0 0 11 12" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M5.70711 1.91667V0L0 5.70711L5.70711 11.4142L5.70711 9.53304L1.82843 5.70711L5.70711 1.91667ZM10.7071 1.91667V0L5 5.70711L10.7071 11.4142L10.7071 9.53304L6.82843 5.70711L10.7071 1.91667Z" | ||
| fill="#7E8A93" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export const NextPage = () => { | ||
| return ( | ||
| <svg | ||
| width="11" | ||
| height="12" | ||
| viewBox="0 0 11 12" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M4.99992 1.91667V0L10.707 5.70711L4.99992 11.4142L4.99992 9.53304L8.8786 5.70711L4.99992 1.91667ZM-7.62939e-05 1.91667V0L5.70703 5.70711L-7.53403e-05 11.4142L-7.72476e-05 9.53304L3.8786 5.70711L-7.62939e-05 1.91667Z" | ||
| fill="white" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div> | ||
| <span className="text-white">{currentPage}</span>/ | ||
| <span className="text-primaryText">{pageCount}</span> | ||
| </div> | ||
| ); | ||
| }, [currentPage, pageCount]); | ||
|
|
||
| return ( | ||
| pageCount > 0 && ( | ||
| <div | ||
| className={`flex justify-center items-center text-white text-sm font-bold cursor-pointer`} | ||
| > | ||
| {isMobile() ? ( | ||
| <div className="flex mr-auto"> | ||
| <div | ||
| className="flex items-center justify-center" | ||
| style={ | ||
| currentPage == 1 ? disableStyleMobile : activeLinkStyleMobile | ||
| } | ||
| onClick={() => currentPage > 1 && goToPage(1)} | ||
| > | ||
| {`|<`} | ||
| </div> | ||
| <div | ||
| className="mx-6 flex items-center justify-center" | ||
| style={ | ||
| currentPage == 1 ? disableStyleMobile : activeLinkStyleMobile | ||
| } | ||
| onClick={() => currentPage > 1 && goToPage(currentPage - 1)} | ||
| > | ||
| {`<<`} | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div | ||
| style={currentPage == 1 ? disableStyle : activeLinkStyle} | ||
| onClick={() => currentPage > 1 && goToPage(currentPage - 1)} | ||
| className="mr-auto" | ||
| > | ||
| {`<< Previous`} | ||
| </div> | ||
| )} | ||
|
|
||
| {/* main page list */} | ||
| {!isMobile() ? ( | ||
| <ul className="flex w-80 justify-center"> | ||
| {pageNumbersList.map((item, index) => { | ||
| if (item === '...') { | ||
| return ( | ||
| <li | ||
| key={`ellipsis-${index}`} | ||
| className="w-6 h-6 frcc rounded" | ||
| > | ||
| <span | ||
| className="page-link" | ||
| onClick={() => goPreOrNext(index)} | ||
| > | ||
| {item} | ||
| </span> | ||
| </li> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <li | ||
| key={item} | ||
| className={`frcc w-6 h-6 rounded ${ | ||
| index % 2 == 0 ? 'mx-2' : '' | ||
| }`} | ||
| style={currentPage == item ? activePageStyle : undefined} | ||
| > | ||
| <span className="page-link" onClick={() => goToPage(item)}> | ||
| {item} | ||
| </span> | ||
| </li> | ||
| ); | ||
| } | ||
| })} | ||
| </ul> | ||
| ) : ( | ||
| pageNumbersListForMobile | ||
| )} | ||
|
|
||
| {isMobile() ? ( | ||
| <div className="flex ml-auto"> | ||
| <div | ||
| className="mx-6 flex items-center justify-center" | ||
| style={ | ||
| pageCount == 1 || currentPage == pageCount | ||
| ? disableStyleMobile | ||
| : activeLinkStyleMobile | ||
| } | ||
| onClick={() => | ||
| currentPage < pageCount && goToPage(currentPage + 1) | ||
| } | ||
| > | ||
| {`>>`} | ||
| </div> | ||
| <div | ||
| className="flex items-center justify-center" | ||
| style={ | ||
| pageCount == 1 || currentPage == pageCount | ||
| ? disableStyleMobile | ||
| : activeLinkStyleMobile | ||
| } | ||
| onClick={() => currentPage < pageCount && goToPage(pageCount)} | ||
| > | ||
| {`>|`} | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div | ||
| style={ | ||
| pageCount == 1 || currentPage == pageCount | ||
| ? disableStyle | ||
| : activeLinkStyle | ||
| } | ||
| onClick={() => currentPage < pageCount && goToPage(currentPage + 1)} | ||
| className=" ml-auto" | ||
| > | ||
| {`Next >>`} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| export default Pagination; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.