diff --git a/package.json b/package.json index ca00dacda..e110828ee 100644 --- a/package.json +++ b/package.json @@ -169,7 +169,7 @@ "@fortawesome/react-fontawesome": "^0.1.18", "@hyperplay/chains": "^0.3.0", "@hyperplay/check-disk-space": "^3.5.2", - "@hyperplay/ui": "^1.6.0", + "@hyperplay/ui": "^1.7.6", "@hyperplay/utils": "^0.0.16", "@mantine/carousel": "^7.5.1", "@mantine/core": "^7.5.1", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index f46e2645a..daceafe12 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -683,6 +683,10 @@ "View Game": "View Game" }, "quests": { + "g7CreditsModal": { + "description": "Dive into HyperPlay's top games with exciting Play Streak Challenges. Each activity encourages you to engage with a different game, showcasing the best of web3 gaming. Your playtime matters!", + "title": "Earn Game7 Credits" + }, "noneFound": { "message": "There were no quests found.", "title": "No Quests Found." diff --git a/src/frontend/assets/g7PortalScreenshot.png b/src/frontend/assets/g7PortalScreenshot.png new file mode 100644 index 000000000..ce60d8f2b Binary files /dev/null and b/src/frontend/assets/g7PortalScreenshot.png differ diff --git a/src/frontend/components/UI/G7CreditsModal/index.module.scss b/src/frontend/components/UI/G7CreditsModal/index.module.scss new file mode 100644 index 000000000..2e538ceaf --- /dev/null +++ b/src/frontend/components/UI/G7CreditsModal/index.module.scss @@ -0,0 +1,13 @@ +.modalContainer { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + backdrop-filter: blur(10px); + background-color: rgba(12, 11, 15, 0.6) !important; +} + +.root { + max-width: 600px; + z-index: 1000; +} diff --git a/src/frontend/components/UI/G7CreditsModal/index.tsx b/src/frontend/components/UI/G7CreditsModal/index.tsx new file mode 100644 index 000000000..f39d28374 --- /dev/null +++ b/src/frontend/components/UI/G7CreditsModal/index.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react' +import { Button, Modal } from '@hyperplay/ui' +import screenshot from 'frontend/assets/g7PortalScreenshot.png' +import styles from './index.module.scss' +import { useTranslation } from 'react-i18next' +import { useNavigate } from 'react-router-dom' + +let isShown = true + +export function G7CreditsModal() { + const [showModal, setShowModal] = useState(isShown) + const { t } = useTranslation() + const navigate = useNavigate() + + function closeModal() { + isShown = false + setShowModal(false) + } + + return ( + +
+ {t('quests.g7CreditsModal.title', 'Introducing Game7 Credits 🔥')} +
+
+ {t( + 'quests.g7CreditsModal.description', + `Dive into HyperPlay's top games with exciting Play Streak Challenges. Each activity encourages you to engage with a different game, showcasing the best of web3 gaming. Your playtime matters!` + )} +
+ + + + ) +} diff --git a/src/frontend/screens/Quests/components/QuestsSummaryTableWrapper/index.tsx b/src/frontend/screens/Quests/components/QuestsSummaryTableWrapper/index.tsx index 3533945d4..0a0f3389b 100644 --- a/src/frontend/screens/Quests/components/QuestsSummaryTableWrapper/index.tsx +++ b/src/frontend/screens/Quests/components/QuestsSummaryTableWrapper/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { QuestsSummaryTable, QuestCard, QuestFilter } from '@hyperplay/ui' import useGetQuests from 'frontend/hooks/useGetQuests' import { useTranslation } from 'react-i18next' @@ -28,6 +28,10 @@ export function QuestsSummaryTableWrapper({ const [searchText, setSearchText] = useState(searchParam ?? '') + useEffect(() => { + setSearchText(searchParam ?? '') + }, [searchParam]) + const [activeFilter, setActiveFilter] = useState('all') const achievementsSortOptions = [ diff --git a/src/frontend/screens/Quests/index.tsx b/src/frontend/screens/Quests/index.tsx index 4fdaa10b7..acf3981a5 100644 --- a/src/frontend/screens/Quests/index.tsx +++ b/src/frontend/screens/Quests/index.tsx @@ -7,6 +7,7 @@ import classNames from 'classnames' import useAuthSession from 'frontend/hooks/useAuthSession' import { useTranslation } from 'react-i18next' import { useParams } from 'react-router-dom' +import { G7CreditsModal } from 'frontend/components/UI/G7CreditsModal' export function QuestsPage() { const { questId = null } = useParams() @@ -38,6 +39,7 @@ export function QuestsPage() { return ( <> +