From ccb53aef66db3f1fb53fe294efdc8f308db845dd Mon Sep 17 00:00:00 2001 From: abdegenius Date: Thu, 10 Oct 2024 19:07:26 +0100 Subject: [PATCH 1/9] Updates --- src/components/Pools.tsx | 48 +++++++++++++++++++++++++---------- src/store/protocols.ts | 55 ++++++++++++++++++++-------------------- yarn.lock | 4 +-- 3 files changed, 65 insertions(+), 42 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index 1e083f1d..42fa3bb8 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -29,12 +29,14 @@ import { filteredPools, sortAtom, } from '@/store/protocols'; -import YieldCard from './YieldCard'; +import YieldCard, { HeaderSorter } from './YieldCard'; export default function Pools() { const allPools = useAtomValue(allPoolsAtomUnSorted); const _filteredPools = useAtomValue(filteredPools); const ITEMS_PER_PAGE = 15; + const setSort = useSetAtom(sortAtom); + const sort = useAtomValue(sortAtom); const { currentPage, setCurrentPage, pagesCount, pages } = usePagination({ pagesCount: Math.floor(_filteredPools.length / ITEMS_PER_PAGE) + 1, initialState: { currentPage: 1 }, @@ -43,9 +45,17 @@ export default function Pools() { const pools = useMemo(() => { const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; return _filteredPools.slice(startIndex, startIndex + ITEMS_PER_PAGE); - }, [_filteredPools, currentPage]); + }, [_filteredPools, currentPage, sort]); - const setSortingOption = useSetAtom(sortAtom); + const handleSortChange = (field: string) => (order: 'asc' | 'desc') => { + setSort((prev) => { + const exist = prev.find((s) => s.field === field); + if (exist) { + return prev.map((s) => (s.field === field ? { ...s, order } : s)); + } + return [...prev, { field, order }]; + }); + }; return ( @@ -101,17 +111,29 @@ export default function Pools() { Pool name - {/* { - setSortingOption({field: 'APR', order}); - }} - /> */} - APY + + + + + + + - Risk - TVL diff --git a/src/store/protocols.ts b/src/store/protocols.ts index 81eeaa16..c1fcc125 100644 --- a/src/store/protocols.ts +++ b/src/store/protocols.ts @@ -213,39 +213,40 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => { // const allPoolsAtom = atom([]); -const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK']; +const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const; -export const sortAtom = atom({ - field: SORT_OPTIONS[0], - order: 'asc', -}); +export const sortAtom = atom>([ + { + field: SORT_OPTIONS[0], + order: 'asc', + }, +]); export const sortPoolsAtom = atom((get) => { + const sort = get(sortAtom); const pools = get(allPoolsAtomWithStrategiesUnSorted); - console.log('pre sort', pools); - const sortSettings = get(sortAtom); - console.log('sorting', 'initiated'); - pools.sort((a, b) => { - const sortOption = sortSettings.field; - const order = sortSettings.order; - if (sortOption === SORT_OPTIONS[2]) { - return order == 'desc' ? b.tvl - a.tvl : a.tvl - b.tvl; - } else if (sortOption === SORT_OPTIONS[3]) { - return order == 'desc' - ? b.additional.riskFactor - a.additional.riskFactor - : a.additional.riskFactor - b.additional.riskFactor; - } else if (sortOption === SORT_OPTIONS[1]) { - return order == 'desc' ? b.apr - a.apr : a.apr - b.apr; + const sortCriteria = [...sort].reverse(); + const sortedPools = [...pools].sort((a, b) => { + for (const sortItem of sortCriteria) { + let result = 0; + if (sortItem.field === SORT_OPTIONS[2]) { + result = sortItem.order === 'asc' ? a.tvl - b.tvl : b.tvl - a.tvl; + } else if (sortItem.field === SORT_OPTIONS[3]) { + result = + sortItem.order === 'asc' + ? Math.round(a.additional.riskFactor) - + Math.round(b.additional.riskFactor) + : Math.round(b.additional.riskFactor) - + Math.round(a.additional.riskFactor); + } else if (sortItem.field === SORT_OPTIONS[1]) { + result = sortItem.order === 'asc' ? a.apr - b.apr : b.apr - a.apr; + } + if (result !== 0) return result; } - // sort by risk factor, then sort by apr - // rounding to sync with risk signals shown on UI - return ( - Math.round(a.additional.riskFactor) - - Math.round(b.additional.riskFactor) || b.apr - a.apr - ); + return 0; }); - console.log('sorting', 'done'); - return pools; + + return sortedPools; }); export const filteredPools = atom((get) => { diff --git a/yarn.lock b/yarn.lock index e1c3d346..fd0bb2bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4566,7 +4566,7 @@ get-port-please@^3.1.2: resolved "https://registry.yarnpkg.com/get-port-please/-/get-port-please-3.1.2.tgz#502795e56217128e4183025c89a48c71652f4e49" integrity sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ== -get-starknet-core@^3.3.3: +get-starknet-core@3.3.3, get-starknet-core@^3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/get-starknet-core/-/get-starknet-core-3.3.3.tgz#26a5203bc29d7906b8963684374eea8c356c7fad" integrity sha512-IscL4lAigJpc/9Idkg07sdyUOXkB+/goTDQm8EhMGn/nIAW4rn04d+D47ils75drNQIfZZKDIIZrWrbIKvjoWA== @@ -4580,7 +4580,7 @@ get-starknet-core@^4.0.0-next.3: dependencies: "@starknet-io/types-js" "^0.7.7" -get-starknet@^3.3.3: +get-starknet@3.3.3: version "3.3.3" resolved "https://registry.yarnpkg.com/get-starknet/-/get-starknet-3.3.3.tgz#5cac8c9551e84bb596d5ee3d507fb121b7142b8b" integrity sha512-SdxNGKFmynRRf3p2VtaBEc1P/VbQHIt8igZC4+xCkKipm/DtZ5jptLXWhqTMYF9vARAmUNZsj8HGujKpqGEBEA== From d2823071bc34a47fb3c67779a0f05f4419819e82 Mon Sep 17 00:00:00 2001 From: abdegenius Date: Sat, 12 Oct 2024 10:11:06 +0100 Subject: [PATCH 2/9] Updates --- src/components/Pools.tsx | 7 ++----- src/store/protocols.ts | 7 ++++--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index 42fa3bb8..a9190b61 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -49,11 +49,8 @@ export default function Pools() { const handleSortChange = (field: string) => (order: 'asc' | 'desc') => { setSort((prev) => { - const exist = prev.find((s) => s.field === field); - if (exist) { - return prev.map((s) => (s.field === field ? { ...s, order } : s)); - } - return [...prev, { field, order }]; + const updatedSort = prev.filter((s) => s.field !== field); + return [...updatedSort, { field, order }]; }); }; diff --git a/src/store/protocols.ts b/src/store/protocols.ts index c1fcc125..b9504d77 100644 --- a/src/store/protocols.ts +++ b/src/store/protocols.ts @@ -229,7 +229,9 @@ export const sortPoolsAtom = atom((get) => { const sortedPools = [...pools].sort((a, b) => { for (const sortItem of sortCriteria) { let result = 0; - if (sortItem.field === SORT_OPTIONS[2]) { + if (sortItem.field === SORT_OPTIONS[1]) { + result = sortItem.order === 'asc' ? a.apr - b.apr : b.apr - a.apr; + } else if (sortItem.field === SORT_OPTIONS[2]) { result = sortItem.order === 'asc' ? a.tvl - b.tvl : b.tvl - a.tvl; } else if (sortItem.field === SORT_OPTIONS[3]) { result = @@ -238,13 +240,12 @@ export const sortPoolsAtom = atom((get) => { Math.round(b.additional.riskFactor) : Math.round(b.additional.riskFactor) - Math.round(a.additional.riskFactor); - } else if (sortItem.field === SORT_OPTIONS[1]) { - result = sortItem.order === 'asc' ? a.apr - b.apr : b.apr - a.apr; } if (result !== 0) return result; } return 0; }); + // localStorage.setItem('sort', JSON.stringify(sortCriteria)); return sortedPools; }); From 0e75c94a8b22adf20ad2d330c6713bb094480ae3 Mon Sep 17 00:00:00 2001 From: abdegenius Date: Tue, 15 Oct 2024 13:35:41 +0100 Subject: [PATCH 3/9] Updates --- src/store/protocols.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/store/protocols.ts b/src/store/protocols.ts index b9504d77..a9705506 100644 --- a/src/store/protocols.ts +++ b/src/store/protocols.ts @@ -217,7 +217,11 @@ const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const; export const sortAtom = atom>([ { - field: SORT_OPTIONS[0], + field: SORT_OPTIONS[1], + order: 'desc', + }, + { + field: SORT_OPTIONS[3], order: 'asc', }, ]); @@ -241,6 +245,12 @@ export const sortPoolsAtom = atom((get) => { : Math.round(b.additional.riskFactor) - Math.round(a.additional.riskFactor); } + // else { + // result = + // sortItem.order === 'asc' + // ? b.apr - a.apr + // : a.additional.riskFactor - b.additional.riskFactor; + // } if (result !== 0) return result; } return 0; From 4f5509f081448d5f8f9b8096661f5e5ecbc5274c Mon Sep 17 00:00:00 2001 From: abdegenius Date: Tue, 15 Oct 2024 13:45:35 +0100 Subject: [PATCH 4/9] Updates --- src/store/protocols.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/store/protocols.ts b/src/store/protocols.ts index a9705506..15a9f626 100644 --- a/src/store/protocols.ts +++ b/src/store/protocols.ts @@ -215,7 +215,7 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => { const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const; -export const sortAtom = atom>([ +const defaultSortAtom = atom>([ { field: SORT_OPTIONS[1], order: 'desc', @@ -226,10 +226,19 @@ export const sortAtom = atom>([ }, ]); +export const sortAtom = atom>([ + // { + // field: SORT_OPTIONS[0], + // order: 'asc', + // }, +]); + export const sortPoolsAtom = atom((get) => { const sort = get(sortAtom); + const default_sort = get(defaultSortAtom); const pools = get(allPoolsAtomWithStrategiesUnSorted); - const sortCriteria = [...sort].reverse(); + const sortCriteria = + sort.length > 0 ? [...sort].reverse() : [...default_sort].reverse(); const sortedPools = [...pools].sort((a, b) => { for (const sortItem of sortCriteria) { let result = 0; @@ -245,18 +254,10 @@ export const sortPoolsAtom = atom((get) => { : Math.round(b.additional.riskFactor) - Math.round(a.additional.riskFactor); } - // else { - // result = - // sortItem.order === 'asc' - // ? b.apr - a.apr - // : a.additional.riskFactor - b.additional.riskFactor; - // } if (result !== 0) return result; } return 0; }); - // localStorage.setItem('sort', JSON.stringify(sortCriteria)); - return sortedPools; }); From f3c8c74804487b716ead80e62f4a5a0972fc2709 Mon Sep 17 00:00:00 2001 From: abdegenius Date: Tue, 15 Oct 2024 14:10:06 +0100 Subject: [PATCH 5/9] Updates --- src/components/Pools.tsx | 23 ++++++++++++++++++----- src/components/YieldCard.tsx | 13 +++++++++++-- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index a9190b61..9fcf1a3e 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -48,12 +48,22 @@ export default function Pools() { }, [_filteredPools, currentPage, sort]); const handleSortChange = (field: string) => (order: 'asc' | 'desc') => { - setSort((prev) => { - const updatedSort = prev.filter((s) => s.field !== field); - return [...updatedSort, { field, order }]; - }); + if (field == 'RISK') { + setSort((prev) => { + const updatedSort = prev.filter((s) => s.field !== field); + return [...updatedSort, { field, order }]; + }); + } else if (field == 'APR' || field == 'TVL') { + const riskIndex = sort.findIndex((s) => s.field === 'RISK'); + const new_sort: any = []; + if (riskIndex >= 0) { + new_sort.push({ field: 'RISK', order: sort[riskIndex].order }); + } + new_sort.push({ field, order }); + setSort(new_sort); + } + localStorage.setItem('sort', JSON.stringify(sort)); }; - return ( @@ -113,6 +123,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('APR')} + // disabled={false} /> @@ -121,6 +132,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('RISK')} + // disabled={false} /> @@ -129,6 +141,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('TVL')} + // disabled={false} /> diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx index 8e774e64..11a3042c 100644 --- a/src/components/YieldCard.tsx +++ b/src/components/YieldCard.tsx @@ -529,6 +529,7 @@ export function HeaderSorter(props: { mainColor: string; inActiveColor: string; onClick: (order: 'asc' | 'desc') => void; + disabled?: boolean; }) { const [isAscending, setIsAscending] = useState(false); const [isDescending, setIsDescending] = useState(false); @@ -555,10 +556,18 @@ export function HeaderSorter(props: { {props.heading.toUpperCase()} From f7cd3be63b62f2b68242fab901c4b78ee9cc837c Mon Sep 17 00:00:00 2001 From: abdegenius Date: Thu, 17 Oct 2024 15:07:09 +0100 Subject: [PATCH 6/9] Updates --- src/components/Pools.tsx | 25 +++++++++++++++++++------ src/components/YieldCard.tsx | 11 +++-------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index 9fcf1a3e..ec9d8cac 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -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, @@ -37,6 +37,9 @@ export default function Pools() { const ITEMS_PER_PAGE = 15; const setSort = useSetAtom(sortAtom); const sort = useAtomValue(sortAtom); + const [aprStatus, setAprStatus] = useState(true); + const [riskStatus, setRiskStatus] = useState(true); + const [tvlStatus, setTvlStatus] = useState(true); const { currentPage, setCurrentPage, pagesCount, pages } = usePagination({ pagesCount: Math.floor(_filteredPools.length / ITEMS_PER_PAGE) + 1, initialState: { currentPage: 1 }, @@ -48,21 +51,31 @@ export default function Pools() { }, [_filteredPools, currentPage, sort]); const handleSortChange = (field: string) => (order: 'asc' | 'desc') => { - if (field == 'RISK') { + if (field === 'RISK') { + setRiskStatus(true); setSort((prev) => { const updatedSort = prev.filter((s) => s.field !== field); return [...updatedSort, { field, order }]; }); } else if (field == 'APR' || field == 'TVL') { + setRiskStatus(false); const riskIndex = sort.findIndex((s) => s.field === 'RISK'); const new_sort: any = []; if (riskIndex >= 0) { + setRiskStatus(true); new_sort.push({ field: 'RISK', order: sort[riskIndex].order }); } + if (field == 'APR') { + setTvlStatus(false); + setAprStatus(true); + } + if (field == 'TVL') { + setTvlStatus(true); + setAprStatus(false); + } new_sort.push({ field, order }); setSort(new_sort); } - localStorage.setItem('sort', JSON.stringify(sort)); }; return ( @@ -123,7 +136,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('APR')} - // disabled={false} + active={aprStatus} /> @@ -132,7 +145,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('RISK')} - // disabled={false} + active={riskStatus} /> @@ -141,7 +154,7 @@ export default function Pools() { mainColor="color2Text" inActiveColor="#d9d9f726" onClick={handleSortChange('TVL')} - // disabled={false} + active={tvlStatus} /> diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx index 11a3042c..9407f01a 100644 --- a/src/components/YieldCard.tsx +++ b/src/components/YieldCard.tsx @@ -529,11 +529,10 @@ export function HeaderSorter(props: { mainColor: string; inActiveColor: string; onClick: (order: 'asc' | 'desc') => void; - disabled?: boolean; + active?: boolean; }) { const [isAscending, setIsAscending] = useState(false); const [isDescending, setIsDescending] = useState(false); - return ( From bdb90384d38606862b5ab818b2e906263342fc8c Mon Sep 17 00:00:00 2001 From: abdegenius Date: Fri, 18 Oct 2024 13:38:59 +0100 Subject: [PATCH 7/9] Updates --- src/components/Pools.tsx | 44 +++++++++++++++++++++++++++++++--------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index ec9d8cac..8fdc6c6e 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -53,18 +53,33 @@ export default function Pools() { const handleSortChange = (field: string) => (order: 'asc' | 'desc') => { if (field === 'RISK') { setRiskStatus(true); - setSort((prev) => { - const updatedSort = prev.filter((s) => s.field !== field); - return [...updatedSort, { field, order }]; - }); - } else if (field == 'APR' || field == 'TVL') { - setRiskStatus(false); const riskIndex = sort.findIndex((s) => s.field === 'RISK'); - const new_sort: any = []; if (riskIndex >= 0) { - setRiskStatus(true); - new_sort.push({ field: 'RISK', order: sort[riskIndex].order }); + 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') { + setRiskStatus(false); + // const riskIndex = sort.findIndex((s) => s.field === 'RISK'); + // if (riskIndex >= 0) { + // setRiskStatus(true); + // new_sort.push({ + // field: 'RISK', + // order: + // sort[riskIndex].order == 'desc' ? 'asc' : sort[riskIndex].order, + // }); + // } + const new_sort: any = []; if (field == 'APR') { setTvlStatus(false); setAprStatus(true); @@ -73,7 +88,16 @@ export default function Pools() { setTvlStatus(true); setAprStatus(false); } - new_sort.push({ field, order }); + 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); } }; From 0b4573f62f122f70e26f5fea59c6280e2fe6db45 Mon Sep 17 00:00:00 2001 From: abdegenius Date: Sat, 19 Oct 2024 12:17:54 +0100 Subject: [PATCH 8/9] Updates --- src/components/Pools.tsx | 15 +++-------- src/components/YieldCard.tsx | 51 +++++++++++++++++++++++++----------- 2 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index 8fdc6c6e..fc17da70 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -37,9 +37,9 @@ export default function Pools() { const ITEMS_PER_PAGE = 15; const setSort = useSetAtom(sortAtom); const sort = useAtomValue(sortAtom); - const [aprStatus, setAprStatus] = useState(true); - const [riskStatus, setRiskStatus] = useState(true); - const [tvlStatus, setTvlStatus] = useState(true); + 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 }, @@ -70,15 +70,6 @@ export default function Pools() { } } else if (field == 'APR' || field == 'TVL') { setRiskStatus(false); - // const riskIndex = sort.findIndex((s) => s.field === 'RISK'); - // if (riskIndex >= 0) { - // setRiskStatus(true); - // new_sort.push({ - // field: 'RISK', - // order: - // sort[riskIndex].order == 'desc' ? 'asc' : sort[riskIndex].order, - // }); - // } const new_sort: any = []; if (field == 'APR') { setTvlStatus(false); diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx index 9407f01a..591b8811 100644 --- a/src/components/YieldCard.tsx +++ b/src/components/YieldCard.tsx @@ -28,7 +28,7 @@ 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'; @@ -310,7 +310,12 @@ function StrategyTVL(props: YieldCardProps) { ); } - +function sortHeading(field: string) { + if (field == 'APY') { + return 'APR'; + } + return field.toUpperCase(); +} function GetRiskLevel(riskFactor: number) { let color = ''; let bgColor = ''; @@ -533,21 +538,33 @@ export function HeaderSorter(props: { }) { const [isAscending, setIsAscending] = useState(false); const [isDescending, setIsDescending] = useState(false); + const sort = useAtomValue(sortAtom); + const currentFieldIndex = sort.findIndex( + (s) => s.field === sortHeading(props.heading), + ); + const order: 'asc' | 'desc' = + currentFieldIndex >= 0 ? sort[currentFieldIndex].order : 'desc'; return ( { - let order: 'asc' | 'desc' = 'desc'; - if (!isAscending && !isDescending) { - setIsDescending(true); - } else if (isDescending) { - setIsAscending(true); - setIsDescending(false); - order = 'asc'; - } else { - setIsAscending(false); - setIsDescending(true); - } + // if (!isAscending && !isDescending) { + // setIsDescending(true); + // } else if (isDescending) { + // setIsAscending(true); + // setIsDescending(false); + // order = 'asc'; + // } else { + // setIsAscending(false); + // setIsDescending(true); + // } + // if (order == 'asc') { + // setIsAscending(true); + // setIsDescending(false); + // } else { + // setIsAscending(false); + // setIsDescending(true); + // } props.onClick(order); }} float={'right'} @@ -556,12 +573,16 @@ export function HeaderSorter(props: { From f738594364df59ff5e20102bbec1b9b2af44c9ce Mon Sep 17 00:00:00 2001 From: abdegenius Date: Mon, 21 Oct 2024 13:49:58 +0100 Subject: [PATCH 9/9] Updates --- src/components/Pools.tsx | 8 ++++++++ src/components/YieldCard.tsx | 25 +++++-------------------- src/store/protocols.ts | 18 +++++++++++------- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/components/Pools.tsx b/src/components/Pools.tsx index fc17da70..be7e89a1 100755 --- a/src/components/Pools.tsx +++ b/src/components/Pools.tsx @@ -35,8 +35,11 @@ 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); @@ -50,10 +53,14 @@ 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') => { + // 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'); @@ -69,6 +76,7 @@ export default function Pools() { }); } } 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') { diff --git a/src/components/YieldCard.tsx b/src/components/YieldCard.tsx index 591b8811..ea10b203 100644 --- a/src/components/YieldCard.tsx +++ b/src/components/YieldCard.tsx @@ -30,7 +30,6 @@ import { FaWallet } from 'react-icons/fa'; import { UserStats, userStatsAtom } from '@/store/utils.atoms'; 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'; @@ -310,6 +309,7 @@ function StrategyTVL(props: YieldCardProps) { ); } +// return sort heading text to match with sort options heading text function sortHeading(field: string) { if (field == 'APY') { return 'APR'; @@ -534,37 +534,22 @@ 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 ( { - // if (!isAscending && !isDescending) { - // setIsDescending(true); - // } else if (isDescending) { - // setIsAscending(true); - // setIsDescending(false); - // order = 'asc'; - // } else { - // setIsAscending(false); - // setIsDescending(true); - // } - // if (order == 'asc') { - // setIsAscending(true); - // setIsDescending(false); - // } else { - // setIsAscending(false); - // setIsDescending(true); - // } props.onClick(order); }} float={'right'} diff --git a/src/store/protocols.ts b/src/store/protocols.ts index 15a9f626..4f0737dd 100644 --- a/src/store/protocols.ts +++ b/src/store/protocols.ts @@ -215,6 +215,7 @@ export const allPoolsAtomWithStrategiesUnSorted = atom((get) => { const SORT_OPTIONS = ['DEFAULT', 'APR', 'TVL', 'RISK'] as const; +// default sort atom with default options APR: high to low, RISK: low to high const defaultSortAtom = atom>([ { field: SORT_OPTIONS[1], @@ -226,19 +227,22 @@ const defaultSortAtom = atom>([ }, ]); -export const sortAtom = atom>([ - // { - // field: SORT_OPTIONS[0], - // order: 'asc', - // }, -]); - +// sort atom declared +export const sortAtom = atom>( + [], +); +// 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); + // 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;