From e12d90d3e33b641f88eb20f29ec95109d3559b22 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Fri, 3 Jan 2025 16:51:38 -0400 Subject: [PATCH 01/20] feat: follow design spec on quest main content area --- .../components/QuestContentSection.tsx | 18 +++++-- .../questing/components/QuestDetails.tsx | 51 ++++++++----------- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx index 8eab9185..3189b70b 100644 --- a/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx @@ -1,4 +1,5 @@ import HtmlRender from "@/components/ui/HtmlRender"; +import { cn } from "@/lib/utils"; import type React from "react"; interface QuestContentSectionProps { title: string; @@ -12,10 +13,19 @@ const QuestContentSection: React.FC = ({ content, }) => { return ( -
-

{title}

- - +
+
+
+
+
+ {title} +
+
+
+
+
+ +
); }; diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx index 796bd057..b35444a8 100644 --- a/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx @@ -23,39 +23,32 @@ const QuestDetails = ({ quest }: QuestDetailsProps) => { return (
- - {/* Main content area */} -
-
-
-
- - - QUEST - -
-
- {quest.rewardPools.map(({ rewardDefinition: reward }) => ( - - ))} +
+
+
+ +
+

+ # QUEST + {quest.displayData.title} +

+
+ {quest.rewardPools.map(({ rewardDefinition: reward }) => ( + + ))} +
-
-

- {quest.displayData.title} -

-
-
Date: Mon, 6 Jan 2025 08:15:50 -0400 Subject: [PATCH 02/20] feat: create divider header component and change steps section --- apps/govquests-api/rails_app/schema.graphql | 3 +- .../src/components/ui/DividerHeader.tsx | 22 +++++++++++++ .../components/QuestContentSection.tsx | 10 ++---- .../questing/components/QuestDetails.tsx | 33 +++++-------------- 4 files changed, 35 insertions(+), 33 deletions(-) create mode 100644 apps/govquests-frontend/src/components/ui/DividerHeader.tsx diff --git a/apps/govquests-api/rails_app/schema.graphql b/apps/govquests-api/rails_app/schema.graphql index 1fd52ba4..9e0645ee 100644 --- a/apps/govquests-api/rails_app/schema.graphql +++ b/apps/govquests-api/rails_app/schema.graphql @@ -527,7 +527,7 @@ type Query { notificationTypes: [String!] = [] readStatus: String = "all" ): NotificationConnection! - quest(id: ID!): Quest + quest(slug: String!): Quest quests: [Quest!]! unreadNotificationsCount: Int! } @@ -538,6 +538,7 @@ type Quest { displayData: DisplayData! id: ID! rewardPools: [RewardPool!]! + slug: String! status: String! userQuests: [UserQuest!]! } diff --git a/apps/govquests-frontend/src/components/ui/DividerHeader.tsx b/apps/govquests-frontend/src/components/ui/DividerHeader.tsx new file mode 100644 index 00000000..3e224598 --- /dev/null +++ b/apps/govquests-frontend/src/components/ui/DividerHeader.tsx @@ -0,0 +1,22 @@ +import { cn } from "@/lib/utils"; +import { ComponentProps, ReactNode } from "react"; + +export const DividerHeader = ({ + children, + className, +}: ComponentProps<"div">) => { + return ( +
+
+
+ {children} +
+
+
+ ); +}; diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx index 3189b70b..46843e6e 100644 --- a/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/QuestContentSection.tsx @@ -1,6 +1,8 @@ +import { DividerHeader } from "@/components/ui/DividerHeader"; import HtmlRender from "@/components/ui/HtmlRender"; import { cn } from "@/lib/utils"; import type React from "react"; + interface QuestContentSectionProps { title: string; content: string; @@ -15,13 +17,7 @@ const QuestContentSection: React.FC = ({ return (
-
-
-
- {title} -
-
-
+ {title}
diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx index b35444a8..50977e31 100644 --- a/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/QuestDetails.tsx @@ -8,6 +8,7 @@ import { redirect } from "next/navigation"; import { useAccount } from "wagmi"; import QuestButton from "./QuestButton"; import QuestContentSection from "./QuestContentSection"; +import { DividerHeader } from "@/components/ui/DividerHeader"; interface QuestDetailsProps { quest: Quest; @@ -66,33 +67,15 @@ const QuestDetails = ({ quest }: QuestDetailsProps) => {
{/* Steps section */} -
-
-
-

- Steps to -
- complete -

-
-
- -
+
+ Steps to earn +
+
- - {/* Action button */} -
- alert("Coming soon")} - /> -
); From dcc83dd4bfe613e978fa0c163a787b58b83c6ac5 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 08:47:54 -0400 Subject: [PATCH 03/20] feat: add accordion on action handler --- .../components/ActionHandler.tsx | 39 +++++++++++++++---- .../action_tracking/components/ActionList.tsx | 18 ++++----- .../strategies/DefaultStrategy.tsx | 16 ++++---- 3 files changed, 48 insertions(+), 25 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx index 491b48de..80797ca0 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx @@ -2,13 +2,24 @@ import { useFetchQuest } from "@/domains/questing/hooks/useFetchQuest"; import { Action } from "@/domains/questing/types/questTypes"; import React from "react"; import { ActionStrategyFactory } from "../strategies/ActionStrategyFactory"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; interface ActionHandlerProps { questSlug: string; action: Action; + actionIndex: number; } -const ActionHandler: React.FC = ({ questSlug, action }) => { +const ActionHandler: React.FC = ({ + questSlug, + action, + actionIndex, +}) => { const { data, isLoading, refetch } = useFetchQuest(questSlug); const quest = data?.quest || null; @@ -27,13 +38,25 @@ const ActionHandler: React.FC = ({ questSlug, action }) => { } return ( - + + + + + #{actionIndex} + {action.displayData.title} + + + + + + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/components/ActionList.tsx b/apps/govquests-frontend/src/domains/action_tracking/components/ActionList.tsx index c836a542..efb32a1e 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/components/ActionList.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/components/ActionList.tsx @@ -10,19 +10,17 @@ interface ActionListProps { const ActionList: React.FC = ({ questSlug, actions }) => { return ( -
+
{actions.every((action) => action.actionType === "read_document") && ( -

Read

+

Read

)} {actions.map((action, index) => ( -
- +
+
))}
diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx index b12231ed..015cd4ed 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx @@ -4,6 +4,12 @@ import ActionButton from "../components/ActionButton"; import { ActionType, VerifyWalletStatus } from "../types/actionButtonTypes"; import { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; import { BaseStrategy } from "./BaseStrategy"; +import { + Accordion, + AccordionContent, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { AccordionItem } from "@radix-ui/react-accordion"; export const DefaultStrategy: ActionStrategy = (props) => { const [errorMessage, setErrorMessage] = useState(); @@ -53,18 +59,14 @@ const DefaultContent: StrategyChildComponent = ({ ], ); return ( -
-
- - {action.displayData.title} - - +
+
{errorMessage && ( {errorMessage} )}
- +
); }; From 33e8531c0579f3794c4dc854a217663c033eee45 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 10:04:28 -0400 Subject: [PATCH 04/20] feat: add action content, action footer and adjust all actions --- .../components/ActionButton.tsx | 1 - .../components/ActionHandler.tsx | 2 +- .../strategies/BaseStrategy.tsx | 20 +++++++- .../strategies/DefaultStrategy.tsx | 22 ++++----- .../DiscourseVerificationStrategy.tsx | 44 ++++++++++------- .../strategies/EnsStrategy.tsx | 48 +++++++++++-------- .../strategies/GitcoinScoreStrategy.tsx | 48 +++++++++++-------- .../strategies/ReadDocumentStrategy.tsx | 10 ++-- .../strategies/SendEmailStrategy.tsx | 15 +++--- .../strategies/VerifyAgora.tsx | 17 +++---- .../strategies/VerifyPositionStrategy.tsx | 48 ++++++++++--------- 11 files changed, 156 insertions(+), 119 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/components/ActionButton.tsx b/apps/govquests-frontend/src/domains/action_tracking/components/ActionButton.tsx index 25fd05e5..f49e2445 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/components/ActionButton.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/components/ActionButton.tsx @@ -99,7 +99,6 @@ function ActionButton({ variant="secondary" size="sm" className={cn( - "mr-6", disabled && "pointer-events-none", status === "completed" && "opacity-50", )} diff --git a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx index 80797ca0..46972fb3 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx @@ -42,7 +42,7 @@ const ActionHandler: React.FC = ({ - #{actionIndex} + #{actionIndex + 1} {action.displayData.title} diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx index ead53996..5fe2c6fc 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx @@ -1,5 +1,5 @@ import { useSIWE } from "connectkit"; -import React, { useCallback } from "react"; +import React, { ComponentProps, useCallback } from "react"; import { useAccount } from "wagmi"; import { useCompleteActionExecution } from "../hooks/useCompleteActionExecution"; import { useStartActionExecution } from "../hooks/useStartActionExecution"; @@ -118,3 +118,21 @@ export const BaseStrategy = (props: BaseStrategyProps) => { return <>{children({ ...contextValue, ...props })}; }; + +export const ActionContent = (props: ComponentProps<"div">) => { + return ( +
+ ); +}; + +export const ActionFooter = (props: ComponentProps<"div">) => { + return ( +
+ ); +}; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx index 015cd4ed..e6247ad9 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DefaultStrategy.tsx @@ -3,13 +3,7 @@ import { useCallback, useMemo, useState } from "react"; import ActionButton from "../components/ActionButton"; import { ActionType, VerifyWalletStatus } from "../types/actionButtonTypes"; import { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; -import { - Accordion, - AccordionContent, - AccordionTrigger, -} from "@/components/ui/accordion"; -import { AccordionItem } from "@radix-ui/react-accordion"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const DefaultStrategy: ActionStrategy = (props) => { const [errorMessage, setErrorMessage] = useState(); @@ -59,14 +53,16 @@ const DefaultContent: StrategyChildComponent = ({ ], ); return ( -
-
+ +
+
+ + {errorMessage && ( - {errorMessage} + {errorMessage} )} -
- -
+ + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx index 0b371ba0..49b3ad1f 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx @@ -6,7 +6,7 @@ import type { DiscourseVerificationStatus, } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const DiscourseVerificationStrategy: ActionStrategy = (props) => { const [encryptedKey, setEncryptedKey] = useState(""); @@ -136,7 +136,10 @@ const DiscourseVerificationContent: StrategyChildComponent< actionType: action.actionType as ActionType, status, disabled: - !isSignedIn || !isConnected || status === "completed" || !encryptedKey, + !isSignedIn || + !isConnected || + status === "completed" || + (status == "started" && !encryptedKey), loading: startMutation.isPending || completeMutation.isPending, onClick: handleSubmit, }; @@ -152,21 +155,28 @@ const DiscourseVerificationContent: StrategyChildComponent< ]); return ( -
-
- - {action.displayData.title} - - - {action.displayData.description} - + + +
+ + {action.displayData.description} + - {renderedContent} - {errorMessage && ( - {errorMessage} - )} -
- - + {renderedContent} + {errorMessage && ( + {errorMessage} + )} +
+ + + {errorMessage && ( + {errorMessage} + )} + + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx index 8ed1bb44..4327a80a 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react"; import ActionButton from "../components/ActionButton"; import type { ActionType, EnsStatus } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const EnsStrategy: ActionStrategy = (props) => { const [errorMessage, setErrorMessage] = useState(null); @@ -60,43 +60,49 @@ const EnsStrategyContent: StrategyChildComponent = ({ const renderedContent = useMemo(() => { if (errorMessage) { - return ( - <> + return { + message: ( ENS verification failed. 😕 - {errorMessage} - - ); + ), + description: {errorMessage}, + }; } if (getStatus() === "completed") { - return ( - <> + return { + message: ( ENS verification succeeded! ✅ + ), + description: ( Your ENS name is {execution?.startData.domains[0].name}. - - ); + ), + }; } - return ( - - {action.displayData.description} - - ); + return { + description: ( + + {action.displayData.description} + + ), + }; }, [errorMessage, getStatus, action.displayData, execution?.startData]); return ( -
+
- - {action.displayData.title} + + {renderedContent.description} - {renderedContent}
- -
+ + + {renderedContent.message} + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx index 5fe60f83..f657c752 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx @@ -4,7 +4,7 @@ import ActionButton from "../components/ActionButton"; import { GitcoinScoreStatus } from "../types/actionButtonTypes"; import { CompleteActionExecutionResult } from "../types/actionTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const GitcoinScoreStrategy: ActionStrategy = (props) => { const { refetch, execution } = props; @@ -133,37 +133,41 @@ const GitcoinScoreContent: StrategyChildComponent = ({ const renderedContent = useMemo(() => { if (errorMessage) { - return ( - <> + return { + message: ( Verification failed. Sorry, you look like a bot. 🤖 - {errorMessage} - - ); + ), + description: {errorMessage}, + }; } if (getStatus() === "completed") { // invariant( // execution?.completionData?.__typename === "GitcoinScoreCompletionData", // ); - return ( - <> + return { + message: ( Verification succeeded! Seems like you're human. ✅ + ), + description: ( Your Unique Humanity Score is currently{" "} {execution?.completionData.score}. - - ); + ), + }; } - return ( - - {action.displayData.description} - - ); + return { + description: ( + + {action.displayData.description} + + ), + }; }, [ errorMessage, getStatus, @@ -172,14 +176,16 @@ const GitcoinScoreContent: StrategyChildComponent = ({ ]); return ( -
+
- - {action.displayData.title} + + {renderedContent.description} - {renderedContent}
- -
+ + + {renderedContent.message} + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx index 817fd6f4..549395ed 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react"; import ActionButton from "../components/ActionButton"; import type { ReadDocumentStatus } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const ReadDocumentStrategy: ActionStrategy = (props) => { const { refetch, action } = props; @@ -70,14 +70,16 @@ const ReadDocumentContent: StrategyChildComponent = ({ }; return ( -
+ {action.displayData.title} - -
+ + + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx index c2506669..0c4e51a4 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx @@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from "react"; import ActionButton from "../components/ActionButton"; import type { ActionType, SendEmailStatus } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const SendEmailStrategy: ActionStrategy = (props) => { const [email, setEmail] = useState(""); @@ -105,11 +105,8 @@ const SendEmailContent: StrategyChildComponent = ({ }, [getStatus, errorMessage]); return ( -
+
- - {action.displayData.title} - {action.displayData.description} @@ -122,9 +119,11 @@ const SendEmailContent: StrategyChildComponent = ({ onChange={(e) => setEmail(e.target.value)} disabled={getStatus() === "completed"} /> - {renderedContent}
- -
+ + + {renderedContent} + + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx index aa44043e..e02e44b9 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx @@ -6,7 +6,7 @@ import type { VerifyWalletStatus, } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; export const VerifyAgora: ActionStrategy = (props) => { const [errorMessage, setErrorMessage] = useState(); @@ -57,17 +57,14 @@ const VerifyAgoraChild: StrategyChildComponent = ({ ); return ( -
-
- - {action.displayData.title} - - + + + + {errorMessage && ( {errorMessage} )} -
- -
+ + ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx index cf4d79f3..fbd4f621 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx @@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react"; import ActionButton from "../components/ActionButton"; import type { VerifyPositionStatus } from "../types/actionButtonTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; -import { BaseStrategy } from "./BaseStrategy"; +import { ActionFooter, BaseStrategy } from "./BaseStrategy"; export const VerifyPositionStrategy: ActionStrategy = (props) => { const { refetch } = props; @@ -75,46 +75,50 @@ const VerifyPositionContent: StrategyChildComponent< const renderedContent = useMemo(() => { if (errorMessage) { - return ( - <> + return { + message: ( Verification failed. 👎 - {errorMessage} - - ); + ), + description: {errorMessage}, + }; } const status = getStatus(); if (status === "completed") { - return ( - <> + return { + message: ( Verification succeeded. ✅ + ), + description: ( Congratulations! You're in the Top 100 Delegates for Season 6. Claim your reward and celebrate your accomplishment! - - ); + ), + }; } - return ( - - Click to verify your status as a Top 100 Delegate. - - ); + return { + description: ( + + {action.displayData.description} + + ), + }; }, [getStatus, errorMessage]); return (
-
- - {action.displayData.title} - - {renderedContent} -
- + + {renderedContent.description} + + + + {renderedContent.message} +
); }; From 2b4e478a4aa30992491a066df0ed4f13207c8904 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 10:07:07 -0400 Subject: [PATCH 05/20] fix: fix spacing --- .../src/domains/action_tracking/strategies/BaseStrategy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx index 5fe2c6fc..ccaa8e48 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx @@ -122,7 +122,7 @@ export const BaseStrategy = (props: BaseStrategyProps) => { export const ActionContent = (props: ComponentProps<"div">) => { return (
); From ba818f045674c8a17efcc0ee88bdae37b0b13c6c Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 11:01:49 -0400 Subject: [PATCH 06/20] feat: add quest peels component --- .../src/components/RewardIndicator.tsx | 9 +--- .../components/ActionHandler.tsx | 2 +- .../strategies/ReadDocumentStrategy.tsx | 4 +- .../domains/questing/components/QuestCard.tsx | 20 +++------ .../questing/components/QuestDetails.tsx | 19 ++------ .../questing/components/QuestPeels.tsx | 44 +++++++++++++++++++ .../domains/questing/graphql/questsQuery.ts | 4 ++ 7 files changed, 64 insertions(+), 38 deletions(-) create mode 100644 apps/govquests-frontend/src/domains/questing/components/QuestPeels.tsx diff --git a/apps/govquests-frontend/src/components/RewardIndicator.tsx b/apps/govquests-frontend/src/components/RewardIndicator.tsx index 11fb21b6..5e350cb0 100644 --- a/apps/govquests-frontend/src/components/RewardIndicator.tsx +++ b/apps/govquests-frontend/src/components/RewardIndicator.tsx @@ -12,16 +12,11 @@ const RewardIndicator: React.FC = ({ reward, className }) => { return ( - {reward.amount}{" "} - {reward.type == "Token" ? ( - OP Icon - ) : ( - reward.type - )} + {reward.amount} {reward.type} ); }; diff --git a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx index 46972fb3..c70e4556 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/components/ActionHandler.tsx @@ -41,7 +41,7 @@ const ActionHandler: React.FC = ({ - + #{actionIndex + 1} {action.displayData.title} diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx index 549395ed..833d6679 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx @@ -72,10 +72,10 @@ const ReadDocumentContent: StrategyChildComponent = ({ return ( - {action.displayData.title} + Read {action.displayData.title} diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx index 847bd6f1..9a4d4cc2 100644 --- a/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/QuestCard.tsx @@ -1,33 +1,27 @@ -import { Map as MapIcon } from "lucide-react"; import Link from "next/link"; import type React from "react"; -import RewardIndicator from "@/components/RewardIndicator"; import Image from "@/components/ui/Image"; import { Quests } from "../types/questTypes"; +import { QuestPeels } from "./QuestPeels"; interface QuestProps { quest: Quests[number]; } const QuestCard: React.FC = ({ quest }) => { - console.log(quest); return (
-
- {quest.rewardPools - .toReversed() - .map(({ rewardDefinition: reward }) => ( - - ))} +
+
{quest.displayData.imageUrl ? ( { if (!quest) return null; - const { isConnected } = useAccount(); - const { isSignedIn, signIn } = useSIWE(); - const status = quest.userQuests?.[0]?.status || "unstarted"; - return (
@@ -42,11 +35,7 @@ const QuestDetails = ({ quest }: QuestDetailsProps) => { # QUEST {quest.displayData.title} -
- {quest.rewardPools.map(({ rewardDefinition: reward }) => ( - - ))} -
+
diff --git a/apps/govquests-frontend/src/domains/questing/components/QuestPeels.tsx b/apps/govquests-frontend/src/domains/questing/components/QuestPeels.tsx new file mode 100644 index 00000000..76bc693f --- /dev/null +++ b/apps/govquests-frontend/src/domains/questing/components/QuestPeels.tsx @@ -0,0 +1,44 @@ +import RewardIndicator from "@/components/RewardIndicator"; +import { cn } from "@/lib/utils"; +import { Quest, Quests } from "../types/questTypes"; + +interface QuestPeelsProps { + quest: Quest | Quests[number]; + variant: "ghost" | "primary"; + className?: string; +} + +export const QuestPeels = ({ quest, variant, className }: QuestPeelsProps) => { + const status = quest.userQuests?.[0]?.status || "unstarted"; + const disabled = status === "completed"; + + const peelClassName = cn( + "text-white backdrop-blur-sm border", + variant == "primary" + ? "bg-primary/50 bg-primary/50 text-white border-primary/20" + : "text-black/80 bg-background", + ); + + return ( +
+ {disabled ? ( + + Completed + + ) : ( + quest.rewardPools.map(({ rewardDefinition: reward }) => ( + + )) + )} +
+ ); +}; diff --git a/apps/govquests-frontend/src/domains/questing/graphql/questsQuery.ts b/apps/govquests-frontend/src/domains/questing/graphql/questsQuery.ts index d8290255..ededcf06 100644 --- a/apps/govquests-frontend/src/domains/questing/graphql/questsQuery.ts +++ b/apps/govquests-frontend/src/domains/questing/graphql/questsQuery.ts @@ -27,6 +27,10 @@ export const QuestsQuery = graphql(` description } } + userQuests { + id + status + } } } `); From 5d498042538bf13d857e10f478948c96eb88e9dd Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 11:29:38 -0400 Subject: [PATCH 07/20] fix: add verification status of gitcoin score --- .../strategies/GitcoinScoreStrategy.tsx | 59 +++++++++---------- .../strategies/SendEmailStrategy.tsx | 2 +- 2 files changed, 29 insertions(+), 32 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx index f657c752..0dcc7fda 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx @@ -5,6 +5,7 @@ import { GitcoinScoreStatus } from "../types/actionButtonTypes"; import { CompleteActionExecutionResult } from "../types/actionTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; +import QuestButton from "@/domains/questing/components/QuestButton"; export const GitcoinScoreStrategy: ActionStrategy = (props) => { const { refetch, execution } = props; @@ -131,43 +132,39 @@ const GitcoinScoreContent: StrategyChildComponent = ({ handleComplete, ]); - const renderedContent = useMemo(() => { + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } if (errorMessage) { - return { - message: ( - - Verification failed. Sorry, you look like a bot. 🤖 - - ), - description: {errorMessage}, - }; + return ( + + Verification failed. Sorry, you look like a bot. 🤖 + + ); } - if (getStatus() === "completed") { + const status = getStatus(); + if (status === "completed") { // invariant( // execution?.completionData?.__typename === "GitcoinScoreCompletionData", // ); - return { - message: ( - - Verification succeeded! Seems like you're human. ✅ - - ), - description: ( - - Your Unique Humanity Score is currently{" "} - {execution?.completionData.score}. - - ), - }; - } - return { - description: ( + return ( - {action.displayData.description} + Verification succeeded! Seems like you're human. ✅ - ), - }; + ); + } else if (status === "unstarted") { + return ( + + Connect your passport to start. + + ); + } }, [ errorMessage, getStatus, @@ -179,12 +176,12 @@ const GitcoinScoreContent: StrategyChildComponent = ({
- {renderedContent.description} + {action.displayData.description}
- {renderedContent.message} + {verificationStatus} ); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx index 0c4e51a4..6a1813d6 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx @@ -112,7 +112,7 @@ const SendEmailContent: StrategyChildComponent = ({ Date: Mon, 6 Jan 2025 12:45:45 -0400 Subject: [PATCH 08/20] fix: fix font size of verification status --- .../domains/action_tracking/strategies/BaseStrategy.tsx | 2 +- .../action_tracking/strategies/GitcoinScoreStrategy.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx index ccaa8e48..639edddd 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/BaseStrategy.tsx @@ -131,7 +131,7 @@ export const ActionContent = (props: ComponentProps<"div">) => { export const ActionFooter = (props: ComponentProps<"div">) => { return (
); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx index 0dcc7fda..5288b9db 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx @@ -5,7 +5,6 @@ import { GitcoinScoreStatus } from "../types/actionButtonTypes"; import { CompleteActionExecutionResult } from "../types/actionTypes"; import type { ActionStrategy, StrategyChildComponent } from "./ActionStrategy"; import { ActionContent, ActionFooter, BaseStrategy } from "./BaseStrategy"; -import QuestButton from "@/domains/questing/components/QuestButton"; export const GitcoinScoreStrategy: ActionStrategy = (props) => { const { refetch, execution } = props; @@ -135,14 +134,14 @@ const GitcoinScoreContent: StrategyChildComponent = ({ const verificationStatus = useMemo(() => { if (!isConnected) { return ( - + Connect your wallet to start the quest. ); } if (errorMessage) { return ( - + Verification failed. Sorry, you look like a bot. 🤖 ); @@ -154,13 +153,13 @@ const GitcoinScoreContent: StrategyChildComponent = ({ // ); return ( - + Verification succeeded! Seems like you're human. ✅ ); } else if (status === "unstarted") { return ( - + Connect your passport to start. ); From d47e34983c36c45f72e3b3e911ba4269ca11bb43 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 13:03:48 -0400 Subject: [PATCH 09/20] chore: add verification status on discourse verification --- .../DiscourseVerificationStrategy.tsx | 79 ++++++++++--------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx index 49b3ad1f..d61df23d 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx @@ -68,15 +68,51 @@ const DiscourseVerificationContent: StrategyChildComponent< return "unstarted"; }, [execution]); - const renderedContent = useMemo(() => { + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } + if (errorMessage) { + return {errorMessage}; + } + if ( + getStatus() === "completed" && + execution?.completionData && + "discourseUsername" in execution.completionData + ) { + return ( + + Verified as: {execution.completionData.discourseUsername} + + ); + } + }, [execution?.completionData, getStatus]); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); if (getStatus() === "started") { + handleComplete(); + } else if (getStatus() === "unstarted") { + handleStart(); + } + }; + + const APIKeyComponent = useMemo(() => { + if (getStatus() === "started") return ( ); - } - if ( - getStatus() === "completed" && - execution?.completionData && - "discourseUsername" in execution.completionData - ) { - return ( - - Verified as: {execution.completionData.discourseUsername} - - ); - } - }, [ - completeMutation.isPending, - execution?.startData, - execution?.completionData, - getStatus, - encryptedKey, - ]); - - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); - if (getStatus() === "started") { - handleComplete(); - } else if (getStatus() === "unstarted") { - handleStart(); - } - }; + }, [getStatus, execution?.startData, encryptedKey]); const buttonProps = useMemo(() => { const status = getStatus(); @@ -164,17 +173,11 @@ const DiscourseVerificationContent: StrategyChildComponent< {action.displayData.description} - - {renderedContent} - {errorMessage && ( - {errorMessage} - )} + {APIKeyComponent}
- {errorMessage && ( - {errorMessage} - )} + {verificationStatus} From 6007f63d9ff2b033419f00b146c09f371a9d6b2a Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 13:31:10 -0400 Subject: [PATCH 10/20] feat: add verification status on remaining action types --- .../DiscourseVerificationStrategy.tsx | 4 +- .../strategies/EnsStrategy.tsx | 77 +++++++++++-------- .../strategies/GitcoinScoreStrategy.tsx | 1 + .../strategies/ReadDocumentStrategy.tsx | 11 +++ .../strategies/SendEmailStrategy.tsx | 19 +++-- .../strategies/VerifyAgora.tsx | 17 +++- .../strategies/VerifyPositionStrategy.tsx | 65 ++++++++-------- 7 files changed, 122 insertions(+), 72 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx index d61df23d..5ff8d688 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx @@ -85,12 +85,12 @@ const DiscourseVerificationContent: StrategyChildComponent< "discourseUsername" in execution.completionData ) { return ( - + Verified as: {execution.completionData.discourseUsername} ); } - }, [execution?.completionData, getStatus]); + }, [execution?.completionData, getStatus, isConnected, errorMessage]); const handleSubmit = (e: FormEvent) => { e.preventDefault(); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx index 4327a80a..ab1eaca3 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx @@ -58,50 +58,67 @@ const EnsStrategyContent: StrategyChildComponent = ({ handleStart, ]); + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } + if (errorMessage) { + return ( + ENS verification failed. 😕 + ); + } + const status = getStatus(); + if (status === "completed") { + return ( + + ENS verification succeeded! ✅ + + ); + } else if (status === "unstarted") { + return Connect ENS to start.; + } + }, [ + errorMessage, + getStatus, + execution?.completionData, + action.displayData.description, + isConnected, + ]); + const renderedContent = useMemo(() => { if (errorMessage) { - return { - message: ( - - ENS verification failed. 😕 - - ), - description: {errorMessage}, - }; + return {errorMessage}; } if (getStatus() === "completed") { - return { - message: ( - - ENS verification succeeded! ✅ - - ), - description: ( - - Your ENS name is {execution?.startData.domains[0].name}. - - ), - }; - } - return { - description: ( - - {action.displayData.description} + return ( + + Your ENS name is {execution?.startData.domains[0].name}. - ), - }; - }, [errorMessage, getStatus, action.displayData, execution?.startData]); + ); + } + }, [ + errorMessage, + getStatus, + action.displayData, + execution?.startData, + isConnected, + ]); return (
- {renderedContent.description} + {action.displayData.description} + {renderedContent}
- {renderedContent.message} + {verificationStatus} ); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx index 5288b9db..53307b8f 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx @@ -169,6 +169,7 @@ const GitcoinScoreContent: StrategyChildComponent = ({ getStatus, execution?.completionData, action.displayData.description, + isConnected, ]); return ( diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx index 833d6679..82986a8e 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx @@ -61,6 +61,16 @@ const ReadDocumentContent: StrategyChildComponent = ({ ], ); + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } + }, [isConnected]); + const handleTitleClick = () => { if (getStatus() === "unstarted") { handleStart(); @@ -79,6 +89,7 @@ const ReadDocumentContent: StrategyChildComponent = ({ + {verificationStatus} ); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx index 6a1813d6..1de756ce 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx @@ -82,14 +82,21 @@ const SendEmailContent: StrategyChildComponent = ({ ], ); - const renderedContent = useMemo(() => { + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } if (errorMessage) { - return {errorMessage}; + return {errorMessage}; } if (getStatus() === "started") { return ( - + An email has been sent to {email} with a verification link. 📧 ); @@ -97,12 +104,12 @@ const SendEmailContent: StrategyChildComponent = ({ if (getStatus() === "completed") { return ( - + Your email has been successfully verified! ✅ ); } - }, [getStatus, errorMessage]); + }, [getStatus, errorMessage, isConnected]); return ( @@ -122,7 +129,7 @@ const SendEmailContent: StrategyChildComponent = ({
- {renderedContent} + {verificationStatus} ); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx index e02e44b9..dfaf922c 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx @@ -56,14 +56,25 @@ const VerifyAgoraChild: StrategyChildComponent = ({ ], ); + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); + } + if (errorMessage) { + return {errorMessage}; + } + }, [errorMessage, isConnected]); + return ( - {errorMessage && ( - {errorMessage} - )} + {verificationStatus} ); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx index fbd4f621..a2908089 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx @@ -75,49 +75,52 @@ const VerifyPositionContent: StrategyChildComponent< const renderedContent = useMemo(() => { if (errorMessage) { - return { - message: ( - - Verification failed. 👎 - - ), - description: {errorMessage}, - }; + return {errorMessage}; } - const status = getStatus(); - if (status === "completed") { - return { - message: ( - - Verification succeeded. ✅ - - ), - description: ( - - Congratulations! You're in the Top 100 Delegates for Season 6. Claim - your reward and celebrate your accomplishment! - - ), - }; + if (getStatus() === "completed") { + return ( + + Congratulations! You're in the Top 100 Delegates for Season 6. Claim + your reward and celebrate your accomplishment! + + ); + } + }, [getStatus, errorMessage]); + + const verificationStatus = useMemo(() => { + if (!isConnected) { + return ( + + Connect your wallet to start the quest. + + ); } - return { - description: ( + if (errorMessage) { + return ( - {action.displayData.description} + Verification failed. 👎 - ), - }; - }, [getStatus, errorMessage]); + ); + } + if (getStatus() === "completed") { + return ( + + Verification succeeded. ✅ + + ); + } + }, [errorMessage, isConnected, getStatus]); return (
- {renderedContent.description} + {action.displayData.description} + {renderedContent} - {renderedContent.message} + {verificationStatus}
); From c1c51c4c806f95c8b61710be7004d59fb7fb5b00 Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 13:38:11 -0400 Subject: [PATCH 11/20] fix: add isSignedIn as condition of connected wallet --- .../strategies/DiscourseVerificationStrategy.tsx | 10 ++++++++-- .../action_tracking/strategies/EnsStrategy.tsx | 3 ++- .../strategies/GitcoinScoreStrategy.tsx | 3 ++- .../strategies/ReadDocumentStrategy.tsx | 4 ++-- .../action_tracking/strategies/SendEmailStrategy.tsx | 12 ++++++++++-- .../action_tracking/strategies/VerifyAgora.tsx | 4 ++-- .../strategies/VerifyPositionStrategy.tsx | 4 ++-- 7 files changed, 28 insertions(+), 12 deletions(-) diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx index 5ff8d688..94cdac19 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/DiscourseVerificationStrategy.tsx @@ -69,7 +69,7 @@ const DiscourseVerificationContent: StrategyChildComponent< }, [execution]); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || !isSignedIn) { return ( Connect your wallet to start the quest. @@ -90,7 +90,13 @@ const DiscourseVerificationContent: StrategyChildComponent< ); } - }, [execution?.completionData, getStatus, isConnected, errorMessage]); + }, [ + execution?.completionData, + getStatus, + isConnected, + errorMessage, + isSignedIn, + ]); const handleSubmit = (e: FormEvent) => { e.preventDefault(); diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx index ab1eaca3..e98b3cc9 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/EnsStrategy.tsx @@ -59,7 +59,7 @@ const EnsStrategyContent: StrategyChildComponent = ({ ]); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || !isSignedIn) { return ( Connect your wallet to start the quest. @@ -87,6 +87,7 @@ const EnsStrategyContent: StrategyChildComponent = ({ execution?.completionData, action.displayData.description, isConnected, + isSignedIn, ]); const renderedContent = useMemo(() => { diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx index 53307b8f..f1a1cf46 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/GitcoinScoreStrategy.tsx @@ -132,7 +132,7 @@ const GitcoinScoreContent: StrategyChildComponent = ({ ]); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || !isSignedIn) { return ( Connect your wallet to start the quest. @@ -170,6 +170,7 @@ const GitcoinScoreContent: StrategyChildComponent = ({ execution?.completionData, action.displayData.description, isConnected, + isSignedIn, ]); return ( diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx index 82986a8e..6a651380 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/ReadDocumentStrategy.tsx @@ -62,14 +62,14 @@ const ReadDocumentContent: StrategyChildComponent = ({ ); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || !isSignedIn) { return ( Connect your wallet to start the quest. ); } - }, [isConnected]); + }, [isConnected, isSignedIn]); const handleTitleClick = () => { if (getStatus() === "unstarted") { diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx index 1de756ce..45011de3 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/SendEmailStrategy.tsx @@ -83,7 +83,7 @@ const SendEmailContent: StrategyChildComponent = ({ ); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || !isSignedIn) { return ( Connect your wallet to start the quest. @@ -94,6 +94,14 @@ const SendEmailContent: StrategyChildComponent = ({ return {errorMessage}; } + if (getStatus() === "unstarted") { + return ( + + Type your email and click to send the verification link. + + ); + } + if (getStatus() === "started") { return ( @@ -109,7 +117,7 @@ const SendEmailContent: StrategyChildComponent = ({ ); } - }, [getStatus, errorMessage, isConnected]); + }, [getStatus, errorMessage, isConnected, isSignedIn, email]); return ( diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx index dfaf922c..153733f2 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyAgora.tsx @@ -57,7 +57,7 @@ const VerifyAgoraChild: StrategyChildComponent = ({ ); const verificationStatus = useMemo(() => { - if (!isConnected) { + if ((!isConnected || !isSignedIn)) { return ( Connect your wallet to start the quest. @@ -67,7 +67,7 @@ const VerifyAgoraChild: StrategyChildComponent = ({ if (errorMessage) { return {errorMessage}; } - }, [errorMessage, isConnected]); + }, [errorMessage, isConnected, isSignedIn]); return ( diff --git a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx index a2908089..a904826e 100644 --- a/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx +++ b/apps/govquests-frontend/src/domains/action_tracking/strategies/VerifyPositionStrategy.tsx @@ -89,7 +89,7 @@ const VerifyPositionContent: StrategyChildComponent< }, [getStatus, errorMessage]); const verificationStatus = useMemo(() => { - if (!isConnected) { + if (!isConnected || isSignedIn) { return ( Connect your wallet to start the quest. @@ -110,7 +110,7 @@ const VerifyPositionContent: StrategyChildComponent< ); } - }, [errorMessage, isConnected, getStatus]); + }, [errorMessage, isConnected, getStatus, isSignedIn]); return (
From 466bc71007425472370dd3b2686cb5ba35cbb5ff Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 15:51:37 -0400 Subject: [PATCH 12/20] feat: change colors, theme to black and add background image --- .../public/backgrounds/first_tier.svg | 9 +++++++++ apps/govquests-frontend/public/logo.svg | 10 ++++++++++ apps/govquests-frontend/src/app/globals.css | 6 +++--- apps/govquests-frontend/src/app/layout.tsx | 2 +- apps/govquests-frontend/src/components/Layout.tsx | 13 ++++++++++++- .../questing/components/track/TrackAccordion.tsx | 8 ++++++-- .../components/track/TrackAccordionHeader.tsx | 4 ++-- .../domains/questing/components/track/TrackList.tsx | 4 ++-- 8 files changed, 45 insertions(+), 11 deletions(-) create mode 100644 apps/govquests-frontend/public/backgrounds/first_tier.svg create mode 100644 apps/govquests-frontend/public/logo.svg diff --git a/apps/govquests-frontend/public/backgrounds/first_tier.svg b/apps/govquests-frontend/public/backgrounds/first_tier.svg new file mode 100644 index 00000000..c835924a --- /dev/null +++ b/apps/govquests-frontend/public/backgrounds/first_tier.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/govquests-frontend/public/logo.svg b/apps/govquests-frontend/public/logo.svg new file mode 100644 index 00000000..9e3c7e8e --- /dev/null +++ b/apps/govquests-frontend/public/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/govquests-frontend/src/app/globals.css b/apps/govquests-frontend/src/app/globals.css index 07ddd702..e61a5bb3 100644 --- a/apps/govquests-frontend/src/app/globals.css +++ b/apps/govquests-frontend/src/app/globals.css @@ -45,7 +45,7 @@ .dark { /* Optimism-inspired colors for dark mode */ - --background: 230 11% 11%; /* Dark background #191B1F */ + --background: 228 9% 11%; /* Dark background #1a1b1f */ --foreground: 0 0% 100%; --card: 230 11% 11%; @@ -54,8 +54,8 @@ --popover: 230 11% 11%; --popover-foreground: 0 0% 100%; - --primary: 352 100% 50%; /* Optimism Red */ - --primary-foreground: 0 0% 100%; + --primary: 0 0% 100%; /* White */ + --primary-foreground: 0 0% 0% /* Black text */; --secondary: 228 9% 23%; /* Dark grey #333640 */ --secondary-foreground: 0 0% 100%; diff --git a/apps/govquests-frontend/src/app/layout.tsx b/apps/govquests-frontend/src/app/layout.tsx index 77a657a3..e55ab484 100644 --- a/apps/govquests-frontend/src/app/layout.tsx +++ b/apps/govquests-frontend/src/app/layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ return ( ) { return ( -
{children}
+
+ background_tier +
+
{children}
+
); diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx index 3647fa68..f747b39d 100644 --- a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordion.tsx @@ -27,9 +27,13 @@ export type Track = { export const TrackAccordion = ({ track }: { track: Track }) => { return ( - + - + diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx index c2bb180b..53ad745e 100644 --- a/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackAccordionHeader.tsx @@ -7,8 +7,8 @@ interface TrackAccordionHeader { export const TrackAccordionHeader = ({ track }: TrackAccordionHeader) => { return (
-

-

#TRACK

{track.title} +

+

#TRACK

{track.title}

diff --git a/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx b/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx index da889123..8e2b2ccf 100644 --- a/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx +++ b/apps/govquests-frontend/src/domains/questing/components/track/TrackList.tsx @@ -36,8 +36,8 @@ export const TrackList = () => { return (
-

# Tracks

-

+

# Tracks

+

Complete quests to earn points and unlock rewards.

From 7b40b9e5e237131db8f84509d3f830933639278e Mon Sep 17 00:00:00 2001 From: Juliano Quatrin Nunes Date: Mon, 6 Jan 2025 16:14:45 -0400 Subject: [PATCH 13/20] feat: follow design spec for header --- .../src/components/Header.tsx | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/apps/govquests-frontend/src/components/Header.tsx b/apps/govquests-frontend/src/components/Header.tsx index fec84833..aba0b183 100644 --- a/apps/govquests-frontend/src/components/Header.tsx +++ b/apps/govquests-frontend/src/components/Header.tsx @@ -4,6 +4,7 @@ import SignInButton from "@/domains/authentication/components/SignInButton"; import { NotificationBell } from "@/domains/notifications/components/NotificationBell"; import { cn } from "@/lib/utils"; import { HomeIcon, MapIcon, StarIcon } from "lucide-react"; +import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; import type React from "react"; @@ -12,51 +13,47 @@ const Header: React.FC = () => { const currentPath = usePathname(); return ( -
+
- - Logo + + logo -