Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated the rewards display #217

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Updated the rewards display #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
82f746c
Updated the rewards display
mikhail-concero Jan 10, 2025
d8164c8
Updated the display in the modal as well
mikhail-concero Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/Navigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ export const Navigator = () => {
const [loading, setIsLoading] = useState<boolean>(false)
const [user, setUser] = useState<IUser | null>(null)

const getUser = async () => {
const user = await handleFetchUser(address!)
const getUser = async (addressArg: `0x${string}`) => {
const user = await handleFetchUser(addressArg)
setUser(user)
}

useEffect(() => {
if (isConnected && address) {
setIsLoading(true)
void getUser()
void getUser(address)
.catch(e => {
console.error(e)
})
Expand Down
8 changes: 5 additions & 3 deletions src/api/concero/quest/questType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,11 @@ export interface IQuest {
endDate: number
steps: IQuestStep[]
rewards: {
points: number
multiplier: number
role?: boolean
points: number // Mandatory field, for automatic reward after completing the quest
pointsToShow?: string
multiplier: number // Temporary field, adds a multiplier to the user for a limited time
isCustomReward?: boolean
role: '${boolean}'
}
type: QuestType
category: QuestCategory
Expand Down
60 changes: 60 additions & 0 deletions src/assets/icons/CersIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
export const CersIcon = () => (
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_1317_22113)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.5604 25.9048L17.4622 24.7395C18.186 23.4363 19.7125 22.804 21.1458 23.2137L20.4862 25.5213C20.126 25.4183 19.7423 25.5772 19.5604 25.9048ZM12.4396 25.9048C13.9912 28.6984 18.0088 28.6984 19.5604 25.9048L17.4622 24.7395C16.825 25.8868 15.175 25.8868 14.5378 24.7395L12.4396 25.9048ZM25.5213 20.4862C26.3996 23.5587 23.5587 26.3995 20.4862 25.5213L21.1458 23.2137C22.4077 23.5744 23.5744 22.4077 23.2137 21.1458L25.5213 20.4862ZM25.9048 19.5604C25.5772 19.7423 25.4183 20.126 25.5213 20.4862L23.2137 21.1458C22.804 19.7125 23.4363 18.186 24.7395 17.4622L25.9048 19.5604ZM6.09521 19.5604C3.3016 18.0088 3.3016 13.9912 6.09521 12.4396C6.42275 12.2577 6.58168 11.874 6.47871 11.5138C5.60045 8.4413 8.4413 5.60045 11.5138 6.4787C11.874 6.58168 12.2577 6.42275 12.4396 6.09521C13.9912 3.3016 18.0088 3.3016 19.5604 6.09521C19.7423 6.42275 20.126 6.58168 20.4862 6.4787C23.5587 5.60045 26.3996 8.4413 25.5213 11.5138C25.4183 11.874 25.5772 12.2577 25.9048 12.4396C28.6984 13.9912 28.6984 18.0088 25.9048 19.5604L24.7395 17.4622C25.8868 16.825 25.8868 15.175 24.7395 14.5378C23.4363 13.814 22.804 12.2874 23.2137 10.8542C23.5744 9.59232 22.4077 8.42558 21.1458 8.78628C19.7125 9.19597 18.186 8.56367 17.4622 7.2605C16.825 6.11317 15.175 6.11317 14.5378 7.2605C13.814 8.56366 12.2875 9.19597 10.8542 8.78628C9.59232 8.42558 8.42558 9.59232 8.78628 10.8542C9.19597 12.2875 8.56366 13.814 7.2605 14.5378C6.11317 15.175 6.11317 16.825 7.2605 17.4622L6.09521 19.5604ZM6.09521 19.5604C6.42275 19.7423 6.58168 20.126 6.47871 20.4862C5.60045 23.5587 8.4413 26.3995 11.5138 25.5213C11.874 25.4183 12.2577 25.5772 12.4396 25.9048L14.5378 24.7395C13.814 23.4363 12.2875 22.804 10.8542 23.2137C9.59232 23.5744 8.42559 22.4077 8.78628 21.1458C9.19597 19.7125 8.56366 18.186 7.2605 17.4622L6.09521 19.5604Z"
fill="url(#paint0_radial_1317_22113)"
/>
</g>
<defs>
<filter
id="filter0_dd_1317_22113"
x="0"
y="0"
width="32"
height="32"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="0.5" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.129412 0 0 0 0 0.0431373 0 0 0 0 0.372549 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1317_22113" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.623529 0 0 0 0 0.964706 0 0 0 1 0" />
<feBlend mode="normal" in2="effect1_dropShadow_1317_22113" result="effect2_dropShadow_1317_22113" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1317_22113" result="shape" />
</filter>
<radialGradient
id="paint0_radial_1317_22113"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(16 4) rotate(90) scale(24)"
>
<stop offset="0.05" stop-color="#D9D2FB" />
<stop offset="0.6" stop-color="#AD9FF6" />
<stop offset="1" stop-color="#5925E6" />
</radialGradient>
</defs>
</svg>
)
9 changes: 9 additions & 0 deletions src/components/rewards/Quests/QuestCard/QuestCard.module.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,15 @@

.points {
color: var(--color-primary-700);
font-size: 24px;
}
.rewards {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-weight: 500;
line-height: 28px;
}

@media (max-width: 580px) {
Expand Down
14 changes: 12 additions & 2 deletions src/components/rewards/Quests/QuestCard/QuestCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { type IQuest, QuestCategory, QuestType } from '../../../../api/concero/q
import { config } from '../../../../constants/config'
import { getQuestDaysLeft } from './getQuestStatus'
import { QuestStatus } from '../QuestStatus'

import { CersIcon } from '../../../../assets/icons/CersIcon'
interface QuestCardProps {
variant?: 'big' | 'normal' | 'small'
quest: IQuest
Expand Down Expand Up @@ -104,6 +104,13 @@ export const QuestCard = ({ variant = 'big', quest, user, className }: QuestCard
// don't display daily social quest if they don't have a link
if (isDailyQuest && isSocialQuest && !quest.steps[0].options?.link) return null

let rewardsToShow: string = '0'
// Display either pointsToshow or points
if (quest.rewards.pointsToShow && quest.rewards.pointsToShow.length > 0) {
rewardsToShow = quest.rewards.pointsToShow
} else if (quest.rewards.points) {
rewardsToShow = String(quest.rewards.points)
}
return (
<>
<div
Expand Down Expand Up @@ -133,7 +140,10 @@ export const QuestCard = ({ variant = 'big', quest, user, className }: QuestCard
<h4 className={classNames.title}>{name}</h4>
)}
{!!quest.rewards.points && (
<h6 className={classNames.points}>+ {quest.rewards.points} CERs</h6>
<div className={classNames.rewards}>
<h6 className={classNames.points}>+ {rewardsToShow}</h6>
<CersIcon />
</div>
)}
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/components/rewards/Quests/QuestModal/QuestModal.module.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,15 @@

.points {
color: var(--color-primary-700);
font-size: 24px;
}
.rewards {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
font-weight: 500;
line-height: 28px;
}

.category {
Expand Down
17 changes: 13 additions & 4 deletions src/components/rewards/Quests/QuestModal/QuestModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { claimQuestReward } from '../../../../api/concero/quest/claimQuestReward
import { useAppKit } from '@reown/appkit/react'
import { Stepper } from '../../../layout/Stepper/Stepper'
import { useAccount } from 'wagmi'
import { CersIcon } from '../../../../assets/icons/CersIcon'

interface QuestModalProps {
isOpen: boolean
Expand Down Expand Up @@ -146,7 +147,13 @@ export const QuestModal = ({
/>
)
}

let rewardsToShow: string = '0'
// Display either pointsToshow or points
if (quest.rewards.pointsToShow && quest.rewards.pointsToShow.length > 0) {
rewardsToShow = quest.rewards.pointsToShow
} else if (quest.rewards.points) {
rewardsToShow = String(quest.rewards.points)
}
return (
<Modal position="top" className={classNames.questModal} show={isOpen} setShow={setIsOpen} title={questTitle}>
<div className={classNames.mainInfo}>
Expand All @@ -155,9 +162,11 @@ export const QuestModal = ({
{quest.subtitle && quest.name !== 'Lancardio' && (
<h2 className={classNames.subtitle}>{quest.subtitle}</h2>
)}
<h6 className={classNames.points}>
{rewards.points ? `${rewards.points} CERs` : ''} {rewards?.role ? '+ Role' : ''}
</h6>
<div className={classNames.rewards}>
<h6 className={classNames.points}>+ {rewardsToShow}</h6>
<CersIcon />
{rewards?.role ? '+ Role' : ''}
</div>
</div>

{questImage}
Expand Down
Loading