Skip to content

Commit

Permalink
Updates sort (#178)
Browse files Browse the repository at this point in the history 
* Updates

* Updates

* Updates

* Updates

* Updates

* Updates

* Updates

* Updates

* Updates

---------

Co-authored-by: abdegenius <[email protected]>
  • Loading branch information
@martinvibes @abdegenius
martinvibes and abdegenius authored Nov 2, 2024
1 parent ef96ace commit e80b6e5
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 30 deletions.
61 changes: 55 additions & 6 deletions src/components/Pools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
Tr,
} from '@chakra-ui/react';
import { useAtomValue, useSetAtom } from 'jotai';
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import {
Pagination,
PaginationContainer,
Expand All @@ -35,8 +35,14 @@ export default function Pools() {
const allPools = useAtomValue(allPoolsAtomUnSorted);
const _filteredPools = useAtomValue(filteredPools);
const ITEMS_PER_PAGE = 15;
// set sort atom declared
const setSort = useSetAtom(sortAtom);
// get current sort atom
const sort = useAtomValue(sortAtom);
// declare react states for apr,risk,tvl to manage active? states
const [aprStatus, setAprStatus] = useState(false);
const [riskStatus, setRiskStatus] = useState(false);
const [tvlStatus, setTvlStatus] = useState(false);
const { currentPage, setCurrentPage, pagesCount, pages } = usePagination({
pagesCount: Math.floor(_filteredPools.length / ITEMS_PER_PAGE) + 1,
initialState: { currentPage: 1 },
Expand All @@ -47,13 +53,53 @@ export default function Pools() {
return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE);
}, [_filteredPools, currentPage, sort]);

// handle sort click function
const handleSortChange = (field: string) => (order: 'asc' | 'desc') => {
setSort((prev) => {
const updatedSort = prev.filter((s) => s.field !== field);
return [...updatedSort, { field, order }];
});
// if RISK is click
if (field === 'RISK') {
setRiskStatus(true);
// check if risk exists in sort atom
const riskIndex = sort.findIndex((s) => s.field === 'RISK');
// if risk exist update the order else set risk with selected order
if (riskIndex >= 0) {
setSort((prev) => {
const updatedSort = prev.filter((s) => s.field !== 'RISK');
return [
...updatedSort,
{ field, order: sort[riskIndex].order == 'desc' ? 'asc' : 'desc' },
];
});
} else {
setSort((prev) => {
const updatedSort = prev.filter((s) => s.field !== field);
return [...updatedSort, { field, order: 'asc' }];
});
}
} else if (field == 'APR' || field == 'TVL') {
// if APR or TVL is clicked clear sort atom, check if exist in sort atom if exist then set order else clear sort atom and set
setRiskStatus(false);
const new_sort: any = [];
if (field == 'APR') {
setTvlStatus(false);
setAprStatus(true);
}
if (field == 'TVL') {
setTvlStatus(true);
setAprStatus(false);
}
const currentFieldIndex = sort.findIndex((s) => s.field === field);
new_sort.push({
field,
order:
sort[currentFieldIndex]?.order &&
sort[currentFieldIndex]?.order == 'desc'
? 'asc'
: 'desc',
});
setSort([]);
setSort(new_sort);
}
};

return (
<Box float="left" width={'100%'}>
<ProtocolFilters />
Expand Down Expand Up @@ -113,6 +159,7 @@ export default function Pools() {
mainColor="color2Text"
inActiveColor="#d9d9f726"
onClick={handleSortChange('APR')}
active={aprStatus}
/>
</Th>
<Th textAlign={'right'}>
Expand All @@ -121,6 +168,7 @@ export default function Pools() {
mainColor="color2Text"
inActiveColor="#d9d9f726"
onClick={handleSortChange('RISK')}
active={riskStatus}
/>
</Th>
<Th textAlign={'right'}>
Expand All @@ -129,6 +177,7 @@ export default function Pools() {
mainColor="color2Text"
inActiveColor="#d9d9f726"
onClick={handleSortChange('TVL')}
active={tvlStatus}
/>
</Th>
</Tr>
Expand Down
48 changes: 29 additions & 19 deletions src/components/YieldCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@ import { getDisplayCurrencyAmount } from '@/utils';
import { addressAtom } from '@/store/claims.atoms';
import { FaWallet } from 'react-icons/fa';
import { UserStats, userStatsAtom } from '@/store/utils.atoms';
import { getPoolInfoFromStrategy } from '@/store/protocols';
import { getPoolInfoFromStrategy, sortAtom } from '@/store/protocols';
import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
import { useState } from 'react';
import mixpanel from 'mixpanel-browser';
import { STRKFarmStrategyAPIResult } from '@/store/strkfarm.atoms';

Expand Down Expand Up @@ -310,7 +309,13 @@ function StrategyTVL(props: YieldCardProps) {
</Box>
);
}

// return sort heading text to match with sort options heading text
function sortHeading(field: string) {
if (field == 'APY') {
return 'APR';
}
return field.toUpperCase();
}
function GetRiskLevel(riskFactor: number) {
let color = '';
let bgColor = '';
Expand Down Expand Up @@ -529,36 +534,41 @@ export function HeaderSorter(props: {
mainColor: string;
inActiveColor: string;
onClick: (order: 'asc' | 'desc') => void;
// added active? boolean to handle sort status...
active?: boolean;
}) {
const [isAscending, setIsAscending] = useState(false);
const [isDescending, setIsDescending] = useState(false);

// get the current sort atom
const sort = useAtomValue(sortAtom);
// get corrent index for a particular sort option from the current sort atom
const currentFieldIndex = sort.findIndex(
(s) => s.field === sortHeading(props.heading),
);
// get the order of the clicked sort option
const order: 'asc' | 'desc' =
currentFieldIndex >= 0 ? sort[currentFieldIndex].order : 'desc';
return (
<HStack
as="button"
onClick={() => {
let order: 'asc' | 'desc' = 'desc';
if (!isAscending && !isDescending) {
setIsDescending(true);
} else if (isDescending) {
setIsAscending(true);
setIsDescending(false);
order = 'asc';
} else {
setIsAscending(false);
setIsDescending(true);
}
props.onClick(order);
}}
float={'right'}
>
<Text color={props.mainColor}>{props.heading.toUpperCase()}</Text>
<VStack gap={0} spacing={0}>
<TriangleUpIcon
color={isAscending ? props.mainColor : props.inActiveColor}
color={
order == 'asc' && props.active
? props.mainColor
: props.inActiveColor
}
/>
<TriangleDownIcon
color={isDescending ? props.mainColor : props.inActiveColor}
color={
order == 'desc' && props.active
? props.mainColor
: props.inActiveColor
}
/>
</VStack>
</HStack>
Expand Down
25 changes: 20 additions & 5 deletions src/store/protocols.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,17 +212,34 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => {

const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const;

export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
// default sort atom with default options APR: high to low, RISK: low to high
const defaultSortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>([
{
field: SORT_OPTIONS[0],
field: SORT_OPTIONS[1],
order: 'desc',
},
{
field: SORT_OPTIONS[3],
order: 'asc',
},
]);

// sort atom declared
export const sortAtom = atom<Array<{ field: string; order: 'asc' | 'desc' }>>(
[],
);
// sort pool results function
export const sortPoolsAtom = atom((get) => {
// get current sort atom
const sort = get(sortAtom);
// get default sort atom
const default_sort = get(defaultSortAtom);
// get unsort pool data
const pools = get(allPoolsAtomWithStrategiesUnSorted);
const sortCriteria = [...sort].reverse();
// if current sort atom exist then reverse the atom else reverse default sort
const sortCriteria =
sort.length > 0 ? [...sort].reverse() : [...default_sort].reverse();
// loop through unsort pools and apply sort
const sortedPools = [...pools].sort((a, b) => {
for (const sortItem of sortCriteria) {
let result = 0;
Expand All @@ -242,8 +259,6 @@ export const sortPoolsAtom = atom((get) => {
}
return 0;
});
// localStorage.setItem('sort', JSON.stringify(sortCriteria));

return sortedPools;
});

Expand Down

0 comments on commit e80b6e5

Please sign in to comment.