From c4780d157d820bd15d2d7b00d73f7ac292d719f4 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 21 Oct 2024 16:10:14 +0100 Subject: [PATCH 1/9] feat: add share value from BE --- .../[category]/components/RankingRow.tsx | 20 ++++--- app/allocation/[category]/page.tsx | 56 +++++++++++++++++-- .../components/CategoryAllocation.tsx | 11 +++- 3 files changed, 75 insertions(+), 12 deletions(-) diff --git a/app/allocation/[category]/components/RankingRow.tsx b/app/allocation/[category]/components/RankingRow.tsx index 28a9e1c..8718062 100644 --- a/app/allocation/[category]/components/RankingRow.tsx +++ b/app/allocation/[category]/components/RankingRow.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC } from 'react'; import Image from 'next/image'; import { NumericFormat } from 'react-number-format'; import { IProjectRanking } from '@/app/comparison/utils/types'; @@ -7,17 +7,20 @@ import { ExpandVertical } from '@/public/assets/icon-components/ExpandVertical'; import { LockIcon } from '@/public/assets/icon-components/Lock'; import { UnlockIcon } from '@/public/assets/icon-components/Unlock'; import styles from '@/app/styles/Project.module.css'; -// @ts-ignore interface IRankingRowProps { project: IProjectRanking selected: boolean onSelect: (id: number) => void + onVote: (id: number, share: number) => void } -const RankingRow: FC = ({ project, selected, onSelect }) => { - const [value, setValue] = useState(0); - +const RankingRow: FC = ({ + project, + selected, + onSelect, + onVote, +}) => { const handleAllowdValue = (values: any) => { const { floatValue } = values; return !floatValue || floatValue <= 100; @@ -61,9 +64,12 @@ const RankingRow: FC = ({ project, selected, onSelect }) => { { - setValue(values?.floatValue || 0); + onVote( + project.projectId, + values?.floatValue ? values.floatValue / 100 : 0 + ); }} className="w-24 rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-center focus:outline-none focus:ring-1" placeholder="0.00%" diff --git a/app/allocation/[category]/page.tsx b/app/allocation/[category]/page.tsx index 31b68de..c6ce76f 100644 --- a/app/allocation/[category]/page.tsx +++ b/app/allocation/[category]/page.tsx @@ -1,17 +1,23 @@ 'use client'; -import { useState } from 'react'; -import { useParams } from 'next/navigation'; +import { useEffect, useState } from 'react'; +import { useParams, useRouter } from 'next/navigation'; import RankingRow from './components/RankingRow'; import HeaderRF6 from '../../comparison/card/Header-RF6'; import Spinner from '@/app/components/Spinner'; import SearchBar from './components/SearchBar'; -import { categorySlugIdMap, categoryIdTitleMap } from '../../comparison/utils/helpers'; +import { + categorySlugIdMap, + categoryIdTitleMap, +} from '../../comparison/utils/helpers'; import { Checkbox } from '@/app/utils/Checkbox'; import { LockIcon } from '@/public/assets/icon-components/Lock'; import NotFoundComponent from '@/app/components/404'; import { useProjectsRankingByCategoryId } from '@/app/comparison/utils/data-fetching/ranking'; import { CheckIcon } from '@/public/assets/icon-components/Check'; +import { IProjectRanking } from '@/app/comparison/utils/types'; +import { ArrowLeft2Icon } from '@/public/assets/icon-components/ArrowLeft2'; +import { ArrowRightIcon } from '@/public/assets/icon-components/ArrowRight'; enum VotingStatus { VOTED, @@ -29,14 +35,15 @@ const votingStatusMap = { const RankingPage = () => { const params = useParams(); + const router = useRouter(); const category = categorySlugIdMap.get((params?.category as string) || ''); const [search, setSearch] = useState(''); const [checkedItems, setCheckedItems] = useState([]); + const [projects, setProjects] = useState(null); const { data: ranking, isLoading } = useProjectsRankingByCategoryId(category); - const projects = ranking?.ranking; console.log(projects); @@ -51,6 +58,24 @@ const RankingPage = () => { } }; + const handleVote = (id: number, share: number) => { + if (!projects) return; + + const updatedProjects = projects.map(project => + project.projectId === id ? { ...project, share } : project + ); + + setProjects(updatedProjects); + }; + + const submitVotes = () => { + console.log(projects); + }; + + useEffect(() => { + if (ranking) setProjects(ranking?.ranking); + }, [ranking]); + if (!category) return ; return ( @@ -135,6 +160,7 @@ const RankingPage = () => { setCheckedItems([...checkedItems, id]); } }} + onVote={handleVote} /> ))} @@ -143,6 +169,28 @@ const RankingPage = () => { : (

No projects found

)} + +
+

+ Percentages must add up to 100% (remove 5.4% from your ballot) +

+
+
+ + +
diff --git a/app/allocation/components/CategoryAllocation.tsx b/app/allocation/components/CategoryAllocation.tsx index 0fd9531..a460be8 100644 --- a/app/allocation/components/CategoryAllocation.tsx +++ b/app/allocation/components/CategoryAllocation.tsx @@ -1,6 +1,7 @@ import debounce from 'lodash.debounce'; import Image from 'next/image'; import { ChangeEventHandler, FC, useEffect, useRef } from 'react'; +import { useRouter } from 'next/navigation'; import Link from 'next/link'; import { roundFractions } from '../utils'; import { useAuth } from '@/app/utils/wallet/AuthProvider'; @@ -13,6 +14,8 @@ import { } from '@/app/comparison/utils/types'; import { CheckIcon } from '@/public/assets/icon-components/Check'; import { UserColabGroupIcon } from '@/public/assets/icon-components/UserColabGroup'; +import { categoryIdSlugMap } from '@/app/comparison/utils/helpers'; + export interface Category { id: number imageSrc: string @@ -34,6 +37,7 @@ interface CategoryAllocationProps extends Category { } const CategoryAllocation: FC = ({ + id, allocatingBudget, imageSrc, title, @@ -49,6 +53,7 @@ const CategoryAllocation: FC = ({ onPercentageChange, }) => { const { isAutoConnecting } = useAuth(); + const router = useRouter(); const inputRef = useRef(null); const handleInputChange: ChangeEventHandler = debounce( @@ -188,7 +193,11 @@ const CategoryAllocation: FC = ({ : status === CollectionProgressStatusEnum.Finished ? (
-
From 6a79adc0b3345fd399fb377b8676e8aaf87b38ea Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 22 Oct 2024 10:59:22 +0100 Subject: [PATCH 2/9] feat: update header to be responsive --- app/allocation/[category]/page.tsx | 7 +- app/allocation/page.tsx | 22 ++- app/comparison/[category]/page.tsx | 4 +- app/comparison/card/DropDown.tsx | 57 ++++++ app/comparison/card/Header-RF6.tsx | 176 ++++++++++++++---- app/comparison/card/Header.tsx | 6 +- app/comparison/utils/helpers.ts | 23 +++ app/delegation/DelegationModal.tsx | 2 +- app/utils/wallet/AuthProvider.tsx | 2 +- app/utils/wallet/ConnectedButton.tsx | 25 +-- .../assets/icon-components/PairwiseLogo.tsx | 50 ++--- public/assets/icon-components/Power.tsx | 14 +- 12 files changed, 273 insertions(+), 115 deletions(-) create mode 100644 app/comparison/card/DropDown.tsx diff --git a/app/allocation/[category]/page.tsx b/app/allocation/[category]/page.tsx index c6ce76f..0357c7b 100644 --- a/app/allocation/[category]/page.tsx +++ b/app/allocation/[category]/page.tsx @@ -80,12 +80,7 @@ const RankingPage = () => { return (
- +

Edit your votes diff --git a/app/allocation/page.tsx b/app/allocation/page.tsx index a62df81..56c28ef 100644 --- a/app/allocation/page.tsx +++ b/app/allocation/page.tsx @@ -113,8 +113,11 @@ const AllocationPage = () => { null ); - const [delegationState, setDelegationState] = useState(DelegationState.Initial); - const [categoryToDelegate, setCategoryToDelegate] = useState>(); + const [delegationState, setDelegationState] = useState( + DelegationState.Initial + ); + const [categoryToDelegate, setCategoryToDelegate] + = useState>(); const [targetDelegate, setTargetDelegate] = useState(); const handleDelegate = async (username: string, target: TargetDelegate) => { @@ -186,14 +189,18 @@ const AllocationPage = () => { return (

{delegationState === DelegationState.DelegationMethod && ( { setDelegationState(DelegationState.Lookup); }} + onFindDelegatesFarcaster={() => { + setDelegationState(DelegationState.Lookup); + }} onFindDelegatesTwitter={() => {}} /> )} @@ -225,12 +232,7 @@ const AllocationPage = () => { selectedCategoryId={selectedCategoryId} /> - + { diff --git a/app/comparison/[category]/page.tsx b/app/comparison/[category]/page.tsx index c529fdf..d89cbb6 100644 --- a/app/comparison/[category]/page.tsx +++ b/app/comparison/[category]/page.tsx @@ -7,7 +7,7 @@ import { useAccount } from 'wagmi'; import { JWTPayload } from '@/app/utils/wallet/types'; import { AutoScrollAction, ProjectCard } from '../card/ProjectCard'; import ConflictButton from '../card/CoIButton'; -import Header from '../card/Header'; +import HeaderRF6 from '../card/Header-RF6'; import { Rating } from '../card/Rating'; import UndoButton from '../card/UndoButton'; import VoteButton from '../card/VoteButton'; @@ -476,7 +476,7 @@ export default function Home() { /> )} -
= ({ children, customClass }) => { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + + // Close the dropdown when clicking outside of it + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current + && !dropdownRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + return ( +
+ + + {isOpen && ( +
+ {children} +
+ )} +
+ ); +}; + +export default Dropdown; diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx index 2cf6ccd..b7d8a96 100644 --- a/app/comparison/card/Header-RF6.tsx +++ b/app/comparison/card/Header-RF6.tsx @@ -1,29 +1,34 @@ -import React from 'react'; -import { ConnectButton } from '@/app/utils/wallet/Connect'; -import { PwLogo } from '@/public/assets/icon-components/PairwiseLogo'; -import { ThinExternalLinkIcon } from '@/public/assets/icon-components/ThinExternalLink'; -import ActiveBadges, { BadgesEnum, IActiveBadge } from './ActiveBadges'; -import Modal from '../../utils/Modal'; -import BadgesModal from './modals/BadgesModal'; +import React, { useState, useEffect } from "react"; +import { useDisconnect } from "wagmi"; +import { ConnectButton } from "@/app/utils/wallet/Connect"; +import { PwLogo } from "@/public/assets/icon-components/PairwiseLogo"; +import { ThinExternalLinkIcon } from "@/public/assets/icon-components/ThinExternalLink"; +import ActiveBadges, { BadgesEnum, IActiveBadge } from "./ActiveBadges"; +import Modal from "../../utils/Modal"; +import BadgesModal from "./modals/BadgesModal"; +import Dropdown from "./DropDown"; +import { shortenWalletAddress } from "@/app/comparison/utils/helpers"; +import { useAuth } from "@/app/utils/wallet/AuthProvider"; +import { PowerIcon } from "@/public/assets/icon-components/Power"; interface HeaderProps { - progress: number - category: string - question: string - isFirstSelection?: boolean + progress?: number; + category?: string; + question?: string; + isFirstSelection?: boolean; } -const PAIRWISE_REPORT_URL = `https://github.com/GeneralMagicio/pairwise-rf6/issues/new? - assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+`; +const PAIRWISE_REPORT_URL = + "https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+"; const activeBadges: IActiveBadge[] = [ { type: BadgesEnum.HOLDER, - variation: 'whale', + variation: "whale", }, { type: BadgesEnum.DELEGATE, - variation: 'whale', + variation: "whale", }, { type: BadgesEnum.BADGE_HOLDER, @@ -33,42 +38,141 @@ const activeBadges: IActiveBadge[] = [ }, ]; -const HeaderRF6: React.FC = ({ isFirstSelection, question }) => { +const HeaderRF6: React.FC = ({ + progress, + category, + question, + isFirstSelection = false, +}) => { + const { disconnectAsync } = useDisconnect(); + const { signOut, loginAddress } = useAuth(); + const [isBadgesModalOpen, setIsBadgesModalOpen] = React.useState(false); + const [isBarFixed, setIsBarFixed] = useState(false); + + useEffect(() => { + const handleScroll = () => { + if (window.scrollY > 100) { + setIsBarFixed(true); + } else { + setIsBarFixed(false); + } + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, []); + + const logout = async () => { + await disconnectAsync(); + signOut(); + }; return ( <> - { setIsBadgesModalOpen(false); }} showCloseButton> + { + setIsBadgesModalOpen(false); + }} + showCloseButton + >
-
+
{!isFirstSelection && ( -
-
- -
+
+ +
+ )} + {question && ( +
+

{question}

)}
- - - + + + +
+ + +
+
+

Your budges

+ +
+
+
+ {loginAddress?.value && ( +

+ {shortenWalletAddress(loginAddress?.value)} +

+ )} +
+ +
+ +
+
+ + {category && ( +
+
+
+ )}
); diff --git a/app/comparison/card/Header.tsx b/app/comparison/card/Header.tsx index 4fab16d..6abd2a3 100644 --- a/app/comparison/card/Header.tsx +++ b/app/comparison/card/Header.tsx @@ -2,9 +2,7 @@ import React, { useState, useEffect } from 'react'; import Image from 'next/image'; import { ConnectButton } from '@/app/utils/wallet/Connect'; -const PAIRWISE_REPPORT_URL - = `https://github.com/GeneralMagicio/pairwise-rpgf5/issues/new? - assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+`; +const PAIRWISE_REPORT_URL = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+'; interface HeaderProps { progress: number @@ -72,7 +70,7 @@ const Header: React.FC = ({ diff --git a/app/comparison/utils/helpers.ts b/app/comparison/utils/helpers.ts index bcc176e..9b11395 100644 --- a/app/comparison/utils/helpers.ts +++ b/app/comparison/utils/helpers.ts @@ -48,3 +48,26 @@ export const getCategoryCount = (category: JWTPayload['category']) => { }; return category in labels ? labels[category] : 30; }; + +export function shortenWalletAddress( + address: string, + startLength: number = 7, + endLength: number = 7 +): string { + // Check if the address is valid (starts with '0x' and has 42 characters) + if (!address.startsWith('0x') || address.length !== 42) { + throw new Error('Invalid wallet address format'); + } + + // Ensure start and end lengths are not greater than half the remaining address length + const maxLength = Math.floor((address.length - 2) / 2); + startLength = Math.min(startLength, maxLength); + endLength = Math.min(endLength, maxLength); + + // Extract the start and end parts of the address + const start = address.slice(0, startLength); + const end = address.slice(-endLength); + + // Combine the parts with ellipsis + return `${start}...${end}`; +} diff --git a/app/delegation/DelegationModal.tsx b/app/delegation/DelegationModal.tsx index 92f1d8a..c9fcfb1 100644 --- a/app/delegation/DelegationModal.tsx +++ b/app/delegation/DelegationModal.tsx @@ -39,7 +39,7 @@ const DelegateModal: React.FC = ({ to someone you trust -

+

If you don't have the time or resources to actively participate in this decision, you can still make your voice heard by delegating your voting power to a delegate. diff --git a/app/utils/wallet/AuthProvider.tsx b/app/utils/wallet/AuthProvider.tsx index 6b897a8..5a58844 100644 --- a/app/utils/wallet/AuthProvider.tsx +++ b/app/utils/wallet/AuthProvider.tsx @@ -153,7 +153,7 @@ export const useAuth = () => { const redirectToComparisonPage = useCallback(() => { if (loggedToPw !== LogginToPwBackendState.LoggedIn) return; - router.push('/allocation'); + // router.push('/allocation'); }, [loggedToPw, router]); const checkLoggedInToPw = useCallback(async () => { diff --git a/app/utils/wallet/ConnectedButton.tsx b/app/utils/wallet/ConnectedButton.tsx index 3a6d6cf..9a09dfb 100644 --- a/app/utils/wallet/ConnectedButton.tsx +++ b/app/utils/wallet/ConnectedButton.tsx @@ -2,35 +2,12 @@ import { FC, useState } from 'react'; import { ArrowDownIcon } from '@/public/assets/icon-components/ArrowDown'; import { ArrowUpIcon } from '@/public/assets/icon-components/ArrowUp'; import { PowerIcon } from '@/public/assets/icon-components/Power'; - +import { shortenWalletAddress } from '@/app/comparison/utils/helpers'; interface Props { wallet: string onLogout: () => void } -export function shortenWalletAddress( - address: string, - startLength: number = 7, - endLength: number = 7 -): string { - // Check if the address is valid (starts with '0x' and has 42 characters) - if (!address.startsWith('0x') || address.length !== 42) { - throw new Error('Invalid wallet address format'); - } - - // Ensure start and end lengths are not greater than half the remaining address length - const maxLength = Math.floor((address.length - 2) / 2); - startLength = Math.min(startLength, maxLength); - endLength = Math.min(endLength, maxLength); - - // Extract the start and end parts of the address - const start = address.slice(0, startLength); - const end = address.slice(-endLength); - - // Combine the parts with ellipsis - return `${start}...${end}`; -} - const LogoutButton: FC> = ({ onLogout }) => { return (

- +

Your budges

@@ -143,7 +144,7 @@ const HeaderRF6: React.FC = ({
)}
From 1e1af8fdacfa11416ca5df173075dce47b720500 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 22 Oct 2024 12:32:34 +0100 Subject: [PATCH 4/9] feat: add post ranking endpoint --- app/allocation/[category]/page.tsx | 58 ++++++++++++++++--- app/comparison/utils/data-fetching/ranking.ts | 46 ++++++++++++++- 2 files changed, 96 insertions(+), 8 deletions(-) diff --git a/app/allocation/[category]/page.tsx b/app/allocation/[category]/page.tsx index 24b0b10..86ef611 100644 --- a/app/allocation/[category]/page.tsx +++ b/app/allocation/[category]/page.tsx @@ -13,7 +13,11 @@ import { import { Checkbox } from '@/app/utils/Checkbox'; import { LockIcon } from '@/public/assets/icon-components/Lock'; import NotFoundComponent from '@/app/components/404'; -import { useProjectsRankingByCategoryId } from '@/app/comparison/utils/data-fetching/ranking'; +import { + useProjectsRankingByCategoryId, + useUpdateProjectRanking, + IProjectRankingObj, +} from '@/app/comparison/utils/data-fetching/ranking'; import { CheckIcon } from '@/public/assets/icon-components/Check'; import { IProjectRanking } from '@/app/comparison/utils/types'; import { ArrowLeft2Icon } from '@/public/assets/icon-components/ArrowLeft2'; @@ -42,8 +46,14 @@ const RankingPage = () => { const [search, setSearch] = useState(''); const [checkedItems, setCheckedItems] = useState([]); const [projects, setProjects] = useState(null); + const [rankingArray, setRankingArray] = useState([]); + const [totalShareError, setTotalShareError] = useState(null); const { data: ranking, isLoading } = useProjectsRankingByCategoryId(category); + const { mutate: updateProjectRanking } = useUpdateProjectRanking({ + cid: category, + ranking: rankingArray, + }); console.log(projects); @@ -69,7 +79,39 @@ const RankingPage = () => { }; const submitVotes = () => { - console.log(projects); + if (!projects) return; + + const totalShare = projects.reduce( + (acc, project) => acc + project.share * 100, + 0 + ); + + if (totalShare !== 100) { + if (totalShare > 100) { + setTotalShareError( + `Percentages must add up to 100% (remove ${ + totalShare - 100 + }% from your ballot)` + ); + } + else { + setTotalShareError( + `Percentages must add up to 100% (add ${ + 100 - totalShare + }% to your ballot)` + ); + } + return; + } + + const rankingArray = projects.map(project => ({ + id: project.projectId, + share: project.share, + })); + + setRankingArray(rankingArray); + + updateProjectRanking(); }; useEffect(() => { @@ -165,11 +207,13 @@ const RankingPage = () => {

No projects found

)} -
-

- Percentages must add up to 100% (remove 5.4% from your ballot) -

-
+ {totalShareError && ( +
+

+ {totalShareError} +

+
+ )}
diff --git a/app/allocation/[category]/page.tsx b/app/allocation/[category]/page.tsx index 86ef611..72cf6e9 100644 --- a/app/allocation/[category]/page.tsx +++ b/app/allocation/[category]/page.tsx @@ -9,6 +9,7 @@ import SearchBar from './components/SearchBar'; import { categorySlugIdMap, categoryIdTitleMap, + formatBudget, } from '../../comparison/utils/helpers'; import { Checkbox } from '@/app/utils/Checkbox'; import { LockIcon } from '@/public/assets/icon-components/Lock'; @@ -16,6 +17,7 @@ import NotFoundComponent from '@/app/components/404'; import { useProjectsRankingByCategoryId, useUpdateProjectRanking, + useCategoryRankings, IProjectRankingObj, } from '@/app/comparison/utils/data-fetching/ranking'; import { CheckIcon } from '@/public/assets/icon-components/Check'; @@ -48,15 +50,15 @@ const RankingPage = () => { const [projects, setProjects] = useState(null); const [rankingArray, setRankingArray] = useState([]); const [totalShareError, setTotalShareError] = useState(null); + const [lockedItems, setLockedItems] = useState([]); + const { data: categoryRankings } = useCategoryRankings(); const { data: ranking, isLoading } = useProjectsRankingByCategoryId(category); const { mutate: updateProjectRanking } = useUpdateProjectRanking({ cid: category, ranking: rankingArray, }); - console.log(projects); - const handleBulkSelection = () => { if (!projects) return; @@ -78,6 +80,24 @@ const RankingPage = () => { setProjects(updatedProjects); }; + const handleLocck = (id: number) => { + if (lockedItems.includes(id)) { + setLockedItems(lockedItems.filter(lockedId => lockedId !== id)); + } + else { + setLockedItems([...lockedItems, id]); + } + }; + + const selectItem = (id: number) => { + if (checkedItems.includes(id)) { + setCheckedItems(checkedItems.filter(checkedId => checkedId !== id)); + } + else { + setCheckedItems([...checkedItems, id]); + } + }; + const submitVotes = () => { if (!projects) return; @@ -136,7 +156,9 @@ const RankingPage = () => {

OP calculations in this ballot are based on your budget of {' '} - 3,333,333 + + {formatBudget(categoryRankings?.budget)} +

@@ -182,21 +204,16 @@ const RankingPage = () => { ? ( - {projects.map(project => ( + {projects.map((project, index) => ( { - if (checkedItems.includes(id)) { - setCheckedItems( - checkedItems.filter(checkedId => checkedId !== id) - ); - } - else { - setCheckedItems([...checkedItems, id]); - } - }} + locked={lockedItems.includes(project.projectId)} + onLock={handleLocck} + onSelect={selectItem} onVote={handleVote} /> ))} diff --git a/app/comparison/utils/data-fetching/ranking.ts b/app/comparison/utils/data-fetching/ranking.ts index 8c2c0dc..b2941dd 100644 --- a/app/comparison/utils/data-fetching/ranking.ts +++ b/app/comparison/utils/data-fetching/ranking.ts @@ -1,12 +1,18 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { axiosInstance } from '@/app/utils/axiosInstance'; -import { IProjectRanking } from '@/app/comparison/utils/types'; +import { IProjectRanking, ICategory } from '@/app/comparison/utils/types'; + +interface ICategoryRankingResponse + extends Omit { + ranking: ICategory[] +} export interface IProjectsRankingResponse { ranking: IProjectRanking[] hasRanking: boolean isFinished: boolean progress: string + budget: number name: string share: number id: number @@ -17,6 +23,20 @@ export interface IProjectRankingObj { share: number } +export const getCategoryRankings + = async (): Promise => { + const res = await axiosInstance.get('flow/ranking'); + + return res.data; + }; + +export const useCategoryRankings = () => { + return useQuery({ + queryKey: ['category-ranking'], + queryFn: () => getCategoryRankings(), + }); +}; + export const getProjectsRankingByCategoryId = async ( cid: number | undefined ): Promise => { diff --git a/app/comparison/utils/helpers.ts b/app/comparison/utils/helpers.ts index 9b11395..6532038 100644 --- a/app/comparison/utils/helpers.ts +++ b/app/comparison/utils/helpers.ts @@ -71,3 +71,10 @@ export function shortenWalletAddress( // Combine the parts with ellipsis return `${start}...${end}`; } + +export function formatBudget(budget: number | undefined): string { + if (budget === undefined) { + return 'N/A'; + } + return budget.toLocaleString('en-US'); +} diff --git a/app/components/Spinner.tsx b/app/components/Spinner.tsx index 88ab040..ed23bfb 100644 --- a/app/components/Spinner.tsx +++ b/app/components/Spinner.tsx @@ -1,7 +1,7 @@ import styles from '../styles/Spinner.module.css'; const Spinner = () => ( -
+
); From c8e6f7b0a3dcd22a94b9cd97f760c4cfb61dd47d Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 22 Oct 2024 15:28:35 +0100 Subject: [PATCH 8/9] fix: uncomment rediredtion --- app/utils/wallet/AuthProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/utils/wallet/AuthProvider.tsx b/app/utils/wallet/AuthProvider.tsx index 8a8f80a..e26fae2 100644 --- a/app/utils/wallet/AuthProvider.tsx +++ b/app/utils/wallet/AuthProvider.tsx @@ -155,7 +155,7 @@ export const useAuth = () => { const redirectToComparisonPage = useCallback(() => { if (loggedToPw !== LogginToPwBackendState.LoggedIn) return; - // router.push('/allocation'); + router.push('/allocation'); }, [loggedToPw, router]); const checkLoggedInToPw = useCallback(async () => { From 3b3eff9f94080034a947d4645bd16de5e3b84603 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 22 Oct 2024 16:01:10 +0100 Subject: [PATCH 9/9] fix: conflict issues --- app/comparison/card/Header-RF6.tsx | 49 ++++++++++++++------------ app/utils/wallet/modals/NotBhModal.tsx | 2 +- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/app/comparison/card/Header-RF6.tsx b/app/comparison/card/Header-RF6.tsx index 4f7145c..40518e6 100644 --- a/app/comparison/card/Header-RF6.tsx +++ b/app/comparison/card/Header-RF6.tsx @@ -36,13 +36,10 @@ const HeaderRF6: React.FC = ({ const [isBarFixed, setIsBarFixed] = useState(false); const activeBadges = useMemo(() => { - if (!badges) return []; - const { - recipientsPoints, - badgeholderPoints, - holderType, - delegateType, - } = badges; + if (!badges || !Object.keys(badges).length) return []; + + const { recipientsPoints, badgeholderPoints, holderType, delegateType } + = badges; const activeBadgesArray: IActiveBadge[] = []; if (holderType) { activeBadgesArray.push({ @@ -126,12 +123,14 @@ const HeaderRF6: React.FC = ({ category ? 'hidden 2xl:flex' : 'flex' } items-center gap-4`} > - + {activeBadges.length > 0 && ( + + )} -
-
+ {activeBadges.length > 0 && ( + <> +
+

Your budges

+ +
+
+ + )}
{loginAddress?.value && (

diff --git a/app/utils/wallet/modals/NotBhModal.tsx b/app/utils/wallet/modals/NotBhModal.tsx index 7ee27f4..46e7920 100644 --- a/app/utils/wallet/modals/NotBhModal.tsx +++ b/app/utils/wallet/modals/NotBhModal.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { useAccount } from 'wagmi'; import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import { shortenWalletAddress } from '../ConnectedButton'; +import { shortenWalletAddress } from '@/app/comparison/utils/helpers'; import { BadgeData, getBadgeAmount, getBadgeMedal, useGetPublicBadges } from '../../getBadges'; import BadgeCard, { BadgeCardEntryType } from '../../BadgeCard'; import { XIcon } from '@/public/assets/icon-components/XIcon';