[Feat] Add g7 credits modal (#1004)

* add g7 credits modal

* prettier

* add navigate and close modal to earn credits click

* fix summary table search text re-render

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",

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."

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;
+}

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 (
+    <Modal
+      isOpen={showModal}
+      onClose={closeModal}
+      className={styles.modalContainer}
+      classNames={{ root: styles.root }}
+      withCloseButton={true}
+    >
+      <div className="title">
+        {t('quests.g7CreditsModal.title', 'Introducing Game7 Credits 🔥')}
+      </div>
+      <div className="caption">
+        {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!`
+        )}
+      </div>
+      <img src={screenshot} />
+      <Button
+        type="secondary"
+        onClick={() => {
+          navigate('/quests?search=Game7')
+          closeModal()
+        }}
+      >
+        {t('quests.g7CreditsModal.title', 'Earn Game7 Credits')}
+      </Button>
+    </Modal>
+  )
+}

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<QuestFilter>('all')
 
   const achievementsSortOptions = [

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 (
     <>
       <Background style={{ position: 'absolute' }}></Background>
+      <G7CreditsModal />
       <div
         className={classNames(
           'contentContainer',

yarn.lock

@@ -1664,13 +1664,25 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz#76467a94aa888aeb22aafa43eb6ff889df3a5a7f"
   integrity sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==
 
+"@fortawesome/[email protected]":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz#31ab07ca6a06358c5de4d295d4711b675006163f"
+  integrity sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==
+
 "@fortawesome/fontawesome-svg-core@^6.1.1":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz#11856eaf4dd1d865c442ddea1eed8ee855186ba2"
   integrity sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.2.0"
 
+"@fortawesome/fontawesome-svg-core@^6.4.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz#2a24c32ef92136e98eae2ff334a27145188295ff"
+  integrity sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
 "@fortawesome/free-brands-svg-icons@^6.1.1":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.0.tgz#ce072179677f9b5d6767f918cfbf296f357cc1d0"
@@ -1685,20 +1697,41 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.2.0"
 
+"@fortawesome/free-regular-svg-icons@^6.4.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz#fc49a947ac8dfd20403c9ea5f37f0919425bdf04"
+  integrity sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
 "@fortawesome/free-solid-svg-icons@^6.1.1":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz#8dcde48109354fd7a5ece8ea48d678bb91d4b5f0"
   integrity sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.2.0"
 
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz#061751ca43be4c4d814f0adbda8f006164ec9f3b"
+  integrity sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.6.0"
+
 "@fortawesome/react-fontawesome@^0.1.18":
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz#2b36917578596f31934e71f92b7cf9c425fd06e4"
   integrity sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==
   dependencies:
     prop-types "^15.8.1"
 
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
+  integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.10.5":
   version "0.10.7"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.7.tgz#6d53769fd0c222767e6452e8ebda825c22e9f0dc"
@@ -1718,6 +1751,13 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@hyperplay/chains@^0.2.9":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@hyperplay/chains/-/chains-0.2.10.tgz#6c9d4e175146d79e4556039db487c182d60c533d"
+  integrity sha512-TUe9vJo9jXx23pb5QlGuW6xo6JmXYjqXKJSma//aUPZ99HU8I/lATlyqdXwozPfQ2qGsAYn58FCTo2kbF+J+8w==
+  dependencies:
+    axios "^1.4.0"
+
 "@hyperplay/chains@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@hyperplay/chains/-/chains-0.3.0.tgz#f0cc73e1fde33678328249e40bf0d02bccd14625"
@@ -1794,10 +1834,10 @@
     supertest "^6.3.3"
     zod "^3.22.4"
 
-"@hyperplay/ui@^1.6.0":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@hyperplay/ui/-/ui-1.7.3.tgz#e2f21325b8af616e55e857a24a13508122531c64"
-  integrity sha512-RAObJmXo8QtIGy7R5bcgH1WuHAHbbcXfexeXLABttinonp25KRGyVZ4VmQfnxvCeO+mGgL/YBsL7snNceTJbxw==
+"@hyperplay/ui@^1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@hyperplay/ui/-/ui-1.7.6.tgz#e9487ff3834ea8b4d6c67304a94d2607ab349bd0"
+  integrity sha512-Kn/hyAeDqbUl3Gp6N3IRYBceI2OTSfdhvW07TjYHgv8X0vngsSq9S0jCFaNgl3Bu4wZnwmgkzyCnazPfFuQ5dg==
 
 "@hyperplay/utils@^0.0.12":
   version "0.0.12"
@@ -1827,6 +1867,13 @@
   dependencies:
     bignumber.js "^9.1.2"
 
+"@hyperplay/utils@^0.1.0":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@hyperplay/utils/-/utils-0.1.4.tgz#e36cfd82febaae1c54cec1e65649169ede518dae"
+  integrity sha512-brHHvhSl5fOLIX2hCp2ZP0dfdMHb8uGME3o3NjK0imVdYlspUVe1YXp5x9P5O2iJn+7C3oPlbLARsC/KTDWSJw==
+  dependencies:
+    bignumber.js "^9.1.2"
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
@@ -3469,6 +3516,19 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tabler/icons-react@^2.46.0":
+  version "2.47.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-2.47.0.tgz#b704e7ae98f95be8bd6e938b4b2e84cd20b0cf31"
+  integrity sha512-iqly2FvCF/qUbgmvS8E40rVeYY7laltc5GUjRxQj59DuX0x/6CpKHTXt86YlI2whg4czvd/c8Ce8YR08uEku0g==
+  dependencies:
+    "@tabler/icons" "2.47.0"
+    prop-types "^15.7.2"
+
+"@tabler/[email protected]":
+  version "2.47.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.47.0.tgz#c41c680d1947e3ab2d60af3febc4132287c60596"
+  integrity sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==
+
 "@tanstack/[email protected]":
   version "5.40.0"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.40.0.tgz#c74ae8303752ed4b5a0ab848ec71a0e6e8179f83"
@@ -4269,7 +4329,7 @@
     "@typescript-eslint/types" "6.13.2"
     eslint-visitor-keys "^3.4.1"
 
-"@valist/sdk@^2.9.5":
+"@valist/sdk@^2.9.1", "@valist/sdk@^2.9.5":
   version "2.9.17"
   resolved "https://registry.yarnpkg.com/@valist/sdk/-/sdk-2.9.17.tgz#05969eba1d6165be76cb89350b78cec1e99456e6"
   integrity sha512-5l2DHfoX70cErmCnyN3wjhzlvHvR2mQixsUI8mjA5YDjIBO4+dN86kfttA1kt8Feb8nN6hZRcGbO949kDRQcng==
@@ -7543,6 +7603,13 @@ eth-rpc-errors@^4.0.2, eth-rpc-errors@^4.0.3:
   dependencies:
     fast-safe-stringify "^2.0.6"
 
+ethereum-blockies-base64@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz#4aebca52142bf4d16a3144e6e2b59303e39ed2b3"
+  integrity sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w==
+  dependencies:
+    pnglib "0.0.1"
+
 ethereum-cryptography@^2.0.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ethereum-cryptography/-/ethereum-cryptography-2.1.2.tgz#18fa7108622e56481157a5cb7c01c0c6a672eb67"
@@ -11552,6 +11619,11 @@ pngjs@^5.0.0:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
   integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
 
+[email protected]:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/pnglib/-/pnglib-0.0.1.tgz#f9ab6f9c688f4a9d579ad8be28878a716e30c096"
+  integrity sha512-95ChzOoYLOPIyVmL+Y6X+abKGXUJlvOVLkB1QQkyXl7Uczc6FElUy/x01NS7r2GX6GRezloO/ecCX9h4U9KadA==
+
 pony-cause@^2.1.10:
   version "2.1.11"
   resolved "https://registry.yarnpkg.com/pony-cause/-/pony-cause-2.1.11.tgz#d69a20aaccdb3bdb8f74dd59e5c68d8e6772e4bd"