-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(quest-details): add claim in quest page (#1132)
* wip: quest page * tech(quest-details): add play click * chore: add npm packages * feat(quest-details): add reward claim toast * chore(i18n): add missing quest translations * chore(i18n): align comments * chore(i18n): align comments * chore(i18n): add missing translation keys * chore(claim-reward): remove auto claim * chore(quest-detail): no longer needed hook * fix(i18n): bad translation * fix(i18n): bad translation * tech(quest-details): remove empty file * tech(quest-details): replace hook with mobx class * tech(quest-detail): remove claim toast timeout * tech(quest-detail): make claimed toast observer * tech(quest-details): add on show metamask * tech(quest-detail): use claimedRewardToastState from quest-ui * chore: use latest ui package * tech(quest-details): show popup only if MM * tech(quest-detail): add missing change * tech(quest-detail): use latest quest-ui package * refactor(quest-detail): remove claim toast from overlay * chore: add ts-expect error link * chore: use stable quest-ui version
- Loading branch information
1 parent
9c5375e
commit 0fb9df3
Showing
16 changed files
with
417 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| import React, { useCallback } from 'react' | ||
| import { | ||
| QuestDetailsWrapper, | ||
| claimedRewardToastState, | ||
| useGetUserPlayStreak | ||
| } from '@hyperplay/quests-ui' | ||
| import { Reward, Quest } from '@hyperplay/utils' | ||
| import useAuthSession from 'frontend/hooks/useAuthSession' | ||
| import authState from 'frontend/state/authState' | ||
| import { useFlags } from 'launchdarkly-react-client-sdk' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useAccount } from 'wagmi' | ||
| import { useSyncPlayStreakWithExternalSource } from 'frontend/hooks/useSyncPlayStreakWithExternalSource' | ||
| import extensionState from 'frontend/state/ExtensionState' | ||
|
|
||
| /** | ||
| * Don't delete this comment block since it's used for translation parsing for keys that are on the quests-ui library. | ||
| * As a heads up, everytime you add a new key on any library, you need to add it as a block comment anywhere in the code as well. | ||
| * | ||
| * t("quest.noG7ConnectionClaim", "You need to have a Game7 account linked to {{email}} to claim your rewards.") | ||
| * t("quest.noG7ConnectionSync", "You need to have a Game7 account linked to {{email}} to resync your tasks.") | ||
| * t("quest.notEnoughGas", "Insufficient wallet balance to claim your reward due to gas fees. Try a different wallet or replenish this one before retrying.") | ||
| * t("quest.playstreak.syncSuccess", "Progress synced") | ||
| * t("quest.claim", "Claim") | ||
| * t('quest.notSignedIn.title', 'Not signed in') | ||
| * t('quest.notSignedIn.message', 'You need to be signed in to claim your reward.') | ||
| * t('quest.notEligible.title', 'Not eligible yet') | ||
| * t('quest.notEligible.message', 'You have not completed the required play streak days and can not claim your reward at this time.') | ||
| * t('quest.playstreak.sync', 'Sync Progress') | ||
| * t('quest.noG7ConnectionSync.title', 'No G7 account linked') | ||
| * t('quest.noG7ConnectionSync.message', 'You need to have a Game7 account linked to {{email}} to claim your rewards.') | ||
| * t('quest.notEnoughBalance.title', 'Low balance') | ||
| * t('quest.notEnoughGas.message', 'Insufficient wallet balance to claim your reward due to gas fees. Try a different wallet or replenish this one before retrying.') | ||
| * t('quest.claimFailed', 'Claim failed') | ||
| * t('quest.claimFailedMessage', 'Please try once more. If it still doesn\'t work, create a Discord support ticket.') | ||
| * t('quest.createDiscordTicket', 'Create Discord Ticket') | ||
| * t('quest.reward', 'Rewards') | ||
| * t('quest.associatedGames', 'Associated games') | ||
| * t('quest.linkAccount', 'Link your Steam account to check eligibility.') | ||
| * t('quest.needMoreAchievements', 'You need to have completed {{percent}}% of the achievements in one of these games.') | ||
| * t('quest.claim', 'Claim') | ||
| * t('quest.signIn', 'Sign in') | ||
| * t('quest.connectSteamAccount', 'Connect Steam account') | ||
| * t('quest.type.reputation', 'Reputation') | ||
| * t('quest.type.playstreak', 'Play Streak') | ||
| * t('quest.sync', 'Sync') | ||
| * t('quest.playstreak.streakProgress', 'Streak Progress') | ||
| * t('quest.playstreak.days', 'days') | ||
| * t('quest.playstreak.playToStart', 'Play this game to start your streak!') | ||
| * t('quest.playstreak.playEachDay', 'Play each day so your streak won\'t reset!') | ||
| * t('quest.playstreak.streakCompleted', 'Streak completed! Claim your rewards now.') | ||
| * t('quest.playstreak.now', 'Now') | ||
| * t('quest.playstreak.dayResets', 'Day resets:') | ||
| * t('quest.playstreak.progressTowardsStreak', 'progress towards today\'s streak.') | ||
| * t('quest.points', 'Points') | ||
| * t('quest.claimWarning.body', '<bold>IMPORTANT:</bold> Please ensure that you are allocating enough gas on the {{networkName}} network for the transaction to be successfully confirmed <bold>within 7 days.</bold>') | ||
| * t('quest.claimWarning.body2', 'Otherwise, the Quest Reward <bold>will expire and will no longer be claimable.</bold>') | ||
| * t('quest.claimWarning.cancel', 'Cancel') | ||
| * t('quest.claimWarning.confirm', 'Confirm') | ||
| */ | ||
|
|
||
| export default function QuestDetails({ | ||
| questId, | ||
| className, | ||
| isQuestsPage, | ||
| onPlayClick | ||
| }: { | ||
| questId: number | null | ||
| className?: string | ||
| isQuestsPage?: boolean | ||
| onPlayClick?: (quest: Quest) => void | ||
| }) { | ||
| const { address } = useAccount() | ||
| const { isSignedIn, data } = useAuthSession() | ||
| const { t } = useTranslation() | ||
| const flags = useFlags() | ||
| const sessionEmail = data?.linkedAccounts.get('email') | ||
| const { invalidateQuery } = useGetUserPlayStreak( | ||
| questId, | ||
| window.api.getUserPlayStreak | ||
| ) | ||
|
|
||
| const getPendingExternalSync = useCallback(async () => { | ||
| if (!address || !questId || !isSignedIn) return false | ||
| return window.api.checkPendingSync({ | ||
| questId, | ||
| wallet: address | ||
| }) | ||
| }, [address, questId, isSignedIn]) | ||
|
|
||
| const { syncPlayStreakWithExternalSource } = | ||
| useSyncPlayStreakWithExternalSource({ | ||
| refreshPlayStreak: invalidateQuery | ||
| }) | ||
|
|
||
| return ( | ||
| <QuestDetailsWrapper | ||
| // @ts-expect-error - see: https://github.com/qmhc/vite-plugin-dts/issues/330 | ||
| onRewardClaimed={(reward) => | ||
| claimedRewardToastState.showClaimedReward(reward) | ||
| } | ||
| onShowMetaMaskPopup={async () => { | ||
| const currentProvider = await window.api.getConnectedProvider() | ||
| if (currentProvider === 'MetaMaskExtension') { | ||
| extensionState.showPopup() | ||
| } | ||
| }} | ||
| onPlayClick={onPlayClick} | ||
| getPendingExternalSync={getPendingExternalSync} | ||
| syncPlayStreakWithExternalSource={syncPlayStreakWithExternalSource} | ||
| tOverride={t} | ||
| sessionEmail={sessionEmail} | ||
| className={className} | ||
| checkG7ConnectionStatus={window.api.checkG7ConnectionStatus} | ||
| logInfo={window.api.logInfo} | ||
| logError={window.api.logError} | ||
| flags={{ | ||
| rewardTypeClaimEnabled: { | ||
| ERC20: flags.erc20RewardsClaim, | ||
| ERC721: flags.erc721RewardsClaim, | ||
| ERC1155: flags.erc1155RewardsClaim, | ||
| POINTS: flags.pointsRewardsClaim, | ||
| 'EXTERNAL-TASKS': flags.externalTasksRewardsClaim | ||
| }, | ||
| questsOverlayClaimCtaEnabled: flags.questsOverlayClaimCtaEnabled | ||
| }} | ||
| trackEvent={window.api.trackEvent} | ||
| signInWithSteamAccount={() => window.api.signInWithProvider('steam')} | ||
| openDiscordLink={window.api.openDiscordLink} | ||
| selectedQuestId={questId} | ||
| getQuest={window.api.getQuest} | ||
| getUserPlayStreak={window.api.getUserPlayStreak} | ||
| getSteamGameMetadata={window.api.getSteamGameMetadata} | ||
| claimPoints={async (reward: Reward) => | ||
| window.api.claimQuestPointsReward(reward.id.toString()) | ||
| } | ||
| completeExternalTask={async (reward: Reward) => | ||
| window.api.completeExternalTask(reward.id.toString()) | ||
| } | ||
| getQuestRewardSignature={window.api.getQuestRewardSignature} | ||
| confirmRewardClaim={window.api.confirmRewardClaim} | ||
| getExternalTaskCredits={window.api.getExternalTaskCredits} | ||
| syncPlaySession={window.api.syncPlaySession} | ||
| getDepositContracts={window.api.getDepositContracts} | ||
| openSignInModal={authState.openSignInModal} | ||
| resyncExternalTask={async (rewardId: string) => { | ||
| window.api.resyncExternalTask(rewardId) | ||
| }} | ||
| isSignedIn={isSignedIn} | ||
| isQuestsPage={isQuestsPage} | ||
| key={'questDetailsLoading'} | ||
| /> | ||
| ) | ||
| } |
50 changes: 50 additions & 0 deletions
50
src/frontend/components/UI/QuestRewardClaimedToast/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react' | ||
| import { ToastQuest } from '@hyperplay/ui' | ||
| import Draggable from 'react-draggable' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { observer } from 'mobx-react-lite' | ||
| import { claimedRewardToastState } from '@hyperplay/quests-ui' | ||
|
|
||
| type QuestRewardClaimedToastProps = { | ||
| draggable?: boolean | ||
| className?: string | ||
| } | ||
|
|
||
| export const QuestRewardClaimedToast = observer( | ||
| ({ draggable = true, className }: QuestRewardClaimedToastProps) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| if (!claimedRewardToastState.claimedReward) { | ||
| return null | ||
| } | ||
|
|
||
| const toast = ( | ||
| <div className={className}> | ||
| <ToastQuest | ||
| i18n={{ | ||
| overlayToggleKey: 'X', | ||
| overlayToggleModKey: 'option', | ||
| plus: '+', | ||
| questAvailable: t('quest.questAvailable', 'Quest available!'), | ||
| questComplete: t('quest.questComplete', 'Quest complete!'), | ||
| rewardClaimed: t('quest.rewardClaimed', 'Claim successful'), | ||
| toClaimReward: t('quest.toClaimReward', 'to claim your reward.'), | ||
| toSeeDetails: t('quest.toSeeDetails', 'to see details.'), | ||
| youHaveClaimed: t( | ||
| 'quest.youHaveClaimed', | ||
| 'You have claimed {{totalRewards}} reward{{plural}}.', | ||
| { | ||
| totalRewards: 1, | ||
| plural: '' | ||
| } | ||
| ) | ||
| }} | ||
| onCloseClick={() => claimedRewardToastState.clearReward()} | ||
| status="claimed" | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| return draggable ? <Draggable>{toast}</Draggable> : toast | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,5 @@ | |
| margin: 0 var(--space-sm) 0 0; | ||
| min-width: 320px; | ||
| max-width: 400px; | ||
| width: 100%; | ||
| } | ||
Oops, something went wrong.