diff --git a/components/UI/iconsComponents/icons/checkIcon.tsx b/components/UI/iconsComponents/icons/checkIcon.tsx new file mode 100644 index 00000000..edc3fe73 --- /dev/null +++ b/components/UI/iconsComponents/icons/checkIcon.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent } from "react"; + +const CheckIcon: FunctionComponent = ({ width, color }) => { + return ( + + + + ); +}; + +export default CheckIcon; diff --git a/components/pages/home/trending.tsx b/components/pages/home/trending.tsx index 8dabf26c..cdff6edf 100644 --- a/components/pages/home/trending.tsx +++ b/components/pages/home/trending.tsx @@ -30,6 +30,7 @@ const TrendingQuests: FunctionComponent = ({ logoFavicon: quest.logo, }} reward={quest.rewards_title} + id={quest.id} /> ); }) diff --git a/components/quests/quest.tsx b/components/quests/quest.tsx index be988033..ceb2cb7d 100644 --- a/components/quests/quest.tsx +++ b/components/quests/quest.tsx @@ -1,5 +1,8 @@ -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent, useMemo } from "react"; import styles from "../../styles/quests.module.css"; +import { useContext } from "react"; +import { QuestsContext } from "../../context/QuestsProvider"; +import CheckIcon from "../UI/iconsComponents/icons/checkIcon"; type QuestProps = { onClick: () => void; @@ -7,6 +10,7 @@ type QuestProps = { title: string; issuer: Issuer; reward: string; + id: number; }; const Quest: FunctionComponent = ({ @@ -15,7 +19,14 @@ const Quest: FunctionComponent = ({ title, issuer, reward, + id, }) => { + const { completedQuestIds } = useContext(QuestsContext); + const isCompleted = useMemo( + () => completedQuestIds.includes(id), + [id, completedQuestIds] + ); + return ( <>
@@ -26,8 +37,17 @@ const Quest: FunctionComponent = ({

{issuer.name}

- -

{reward}

+ {isCompleted ? ( + <> +

Done

+ + + ) : ( + <> + +

{reward}

+ + )}
diff --git a/context/QuestsProvider.tsx b/context/QuestsProvider.tsx index a759a5fd..0cacff89 100644 --- a/context/QuestsProvider.tsx +++ b/context/QuestsProvider.tsx @@ -1,11 +1,14 @@ import { ReactNode, createContext, useMemo, useState } from "react"; import { QueryError, QuestDocument } from "../types/backTypes"; +import { useAccount } from "@starknet-react/core"; +import { hexToDecimal } from "../utils/feltService"; interface QuestsConfig { quests: QuestDocument[]; featuredQuest?: QuestDocument; categories: QuestCategory[]; trendingQuests: QuestDocument[]; + completedQuestIds: number[]; } type GetQuestsRes = @@ -19,6 +22,7 @@ export const QuestsContext = createContext({ featuredQuest: undefined, categories: [], trendingQuests: [], + completedQuestIds: [], }); export const QuestsContextProvider = ({ @@ -32,6 +36,8 @@ export const QuestsContextProvider = ({ >(); const [categories, setCategories] = useState([]); const [trendingQuests, setTrendingQuests] = useState([]); + const [completedQuestIds, setCompletedQuestIds] = useState([]); + const { address } = useAccount(); useMemo(() => { fetch(`${process.env.NEXT_PUBLIC_API_LINK}/get_quests`) @@ -61,14 +67,29 @@ export const QuestsContextProvider = ({ }); }, []); + useMemo(() => { + if (!address) return; + fetch( + `${ + process.env.NEXT_PUBLIC_API_LINK + }/get_completed_quests?addr=${hexToDecimal(address)}` + ) + .then((response) => response.json()) + .then((data: number[] | QueryError) => { + if ((data as QueryError).error) return; + setCompletedQuestIds(data as number[]); + }); + }, [address]); + const contextValues = useMemo(() => { return { quests, featuredQuest, categories, - trendingQuests: trendingQuests, + trendingQuests, + completedQuestIds, }; - }, [quests, featuredQuest, categories, trendingQuests]); + }, [quests, featuredQuest, categories, trendingQuests, completedQuestIds]); return ( diff --git a/pages/categories/[category].tsx b/pages/categories/[category].tsx index a2045af1..ed245f6e 100644 --- a/pages/categories/[category].tsx +++ b/pages/categories/[category].tsx @@ -38,6 +38,7 @@ const CategoriesPage: NextPage = () => { logoFavicon: quest.logo, }} reward={quest.rewards_title} + id={quest.id} /> ))}