feat(playstreak-sync): add sync button logic (#22)

* feat(playstreak-sync): add sync button logic

* chore: set correct pkg version

* chore: update lock

* chore: prettier

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperplay/quests-ui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   "types": "dist/index.d.ts",
   "devDependencies": {
     "@hyperplay/chains": "^0.3.0",
-    "@hyperplay/ui": "^1.8.0",
+    "@hyperplay/ui": "^1.8.4",
     "@hyperplay/utils": "^0.2.6",
     "@tanstack/query-core": "^5.59.13",
     "@tanstack/react-query": "^5.51.23",

src/components/QuestDetailsWrapper/index.module.scss

@@ -8,3 +8,9 @@
 .markdownDescription {
   white-space: normal;
 }
+
+.syncSuccess {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}

src/components/QuestDetailsWrapper/index.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import {
+  Images,
+  Button,
   Game,
   MarkdownDescription,
   QuestDetails,
@@ -22,10 +24,7 @@ import { mintReward } from '../../helpers/mintReward'
 import { resyncExternalTasks as resyncExternalTasksHelper } from '../../helpers/resyncExternalTask'
 import useGetUserPlayStreak from '../../hooks/useGetUserPlayStreak'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import {
-  getPlaystreakArgsFromQuestData,
-  resetSessionStartedTime
-} from '../../helpers/getPlaystreakArgsFromQuestData'
+import { getPlaystreakArgsFromQuestData } from '../../helpers/getPlaystreakArgsFromQuestData'
 import { useGetRewards } from '../../hooks/useGetRewards'
 import { chainMap, parseChainMetadataToViemChain } from '@hyperplay/chains'
 import { InfoAlertProps } from '@hyperplay/ui/dist/components/AlertCard'
@@ -37,6 +36,7 @@ import { injected } from 'wagmi/connectors'
 import { TrackEventFn } from '@/types/analytics'
 import { TFunction } from 'i18next'
 import cn from 'classnames'
+import { useHasPendingExternalSync } from '@/hooks/useHasPendingExternalSync'
 
 class ClaimError extends Error {
   properties: any
@@ -70,6 +70,7 @@ export interface QuestDetailsWrapperProps {
     rewardId: number,
     tokenId?: number
   ) => Promise<RewardClaimSignature>
+  getPendingExternalSync: (questId: number) => Promise<boolean>
   confirmRewardClaim: (params: ConfirmClaimParams) => Promise<void>
   questsWithExternalPlayStreakSync: number[]
   syncPlayStreakWithExternalSource: (questId: number) => Promise<unknown>
@@ -104,7 +105,7 @@ export function QuestDetailsWrapper({
   confirmRewardClaim,
   resyncExternalTask,
   getExternalTaskCredits,
-  syncPlaySession,
+  getPendingExternalSync,
   logInfo,
   openDiscordLink,
   getDepositContracts,
@@ -115,6 +116,7 @@ export function QuestDetailsWrapper({
   syncPlayStreakWithExternalSource,
   questsWithExternalPlayStreakSync
 }: QuestDetailsWrapperProps) {
+  const [syncSuccess, setSyncSuccess] = useState(false)
   const rewardTypeClaimEnabled = flags.rewardTypeClaimEnabled
   const {
     writeContractAsync,
@@ -158,6 +160,63 @@ export function QuestDetailsWrapper({
   )
   const questPlayStreakData = questPlayStreakResult.data.data
 
+  const {
+    data: hasPendingExternalSync,
+    invalidateQuery: invalidateHasPendingExternalSync
+  } = useHasPendingExternalSync({
+    questId: selectedQuestId,
+    getPendingExternalSync
+  })
+
+  const syncWithExternalSourceMutation = useMutation({
+    mutationFn: async () => {
+      if (!selectedQuestId) {
+        return
+      }
+      return syncPlayStreakWithExternalSource(selectedQuestId)
+    },
+    onSuccess: async () => {
+      setSyncSuccess(true)
+      await questPlayStreakResult.invalidateQuery()
+      await invalidateHasPendingExternalSync()
+      setTimeout(() => {
+        setSyncSuccess(false)
+      }, 3000)
+    }
+  })
+
+  let streakRightSection = null
+
+  if (
+    selectedQuestId &&
+    questsWithExternalPlayStreakSync.includes(selectedQuestId) &&
+    hasPendingExternalSync
+  ) {
+    streakRightSection = (
+      <Button
+        disabled={syncWithExternalSourceMutation.isPending}
+        type="secondaryGradient"
+        onClick={() => syncWithExternalSourceMutation.mutate()}
+        size="small"
+      >
+        {t('quest.playstreak.sync', 'Sync Progress')}
+      </Button>
+    )
+  }
+
+  if (syncSuccess) {
+    streakRightSection = (
+      <div className={styles.syncSuccess}>
+        <Images.Checkmark
+          fill="var(--color-success-500)"
+          width={18}
+          height={18}
+        />
+        {t('quest.playstreak.syncSuccess', 'Progress synced')}
+      </div>
+    )
+  }
+
   const resyncMutation = useMutation({
     mutationFn: async (rewards: Reward[]) => {
       const isConnectedToG7 = await checkG7ConnectionStatus()
@@ -592,17 +651,7 @@ export function QuestDetailsWrapper({
           questMeta,
           questPlayStreakData,
           useModuleInitTimeForSessionStartTime: isSignedIn,
-          onSync: async () => {
-            if (questsWithExternalPlayStreakSync.includes(questMeta.id)) {
-              await syncPlayStreakWithExternalSource(questMeta.id)
-            } else {
-              await syncPlaySession(projectId, 'hyperplay')
-              resetSessionStartedTime()
-              logInfo(`Synced play session for quest ${questMeta.id}`)
-              console.log(`Synced play session for quest ${questMeta.id}`)
-            }
-            questPlayStreakResult.invalidateQuery()
-          }
+          rightSection: streakRightSection
         })
       },
       rewards: questRewards ?? [],
@@ -669,7 +718,6 @@ export function QuestDetailsWrapper({
           steamAccountLinked: false
         },
         playStreak: {
-          onSync: () => console.log('loading...'),
           currentStreakInDays: 0,
           requiredStreakInDays: 1,
           minimumSessionTimeInSeconds: 100,

src/helpers/getPlaystreakArgsFromQuestData.ts

@@ -1,5 +1,6 @@
 import { PlayStreakEligibility } from '@hyperplay/ui'
 import { Quest, UserPlayStreak } from '@hyperplay/utils'
+import { ReactNode } from 'react'
 
 // this is initialized when the overlay is started for this game
 let dateTimeCurrentSessionStartedInMsSinceEpoch = Date.now()
@@ -8,19 +9,19 @@ export function getPlaystreakArgsFromQuestData({
   questMeta,
   questPlayStreakData,
   useModuleInitTimeForSessionStartTime,
-  onSync
+  rightSection
 }: {
   questMeta: Quest
   questPlayStreakData: UserPlayStreak | undefined | null
   useModuleInitTimeForSessionStartTime?: boolean
-  onSync: () => void
+  rightSection?: ReactNode
 }): PlayStreakEligibility {
   let sessionStartedTime = undefined
   if (useModuleInitTimeForSessionStartTime) {
     sessionStartedTime = dateTimeCurrentSessionStartedInMsSinceEpoch
   }
   return {
-    onSync,
+    rightSection,
     requiredStreakInDays:
       questMeta?.eligibility?.play_streak.required_playstreak_in_days ?? 0,
     currentStreakInDays: questPlayStreakData?.current_playstreak_in_days ?? 0,

src/hooks/useHasPendingExternalSync.ts

@@ -0,0 +1,29 @@
+import { useQueryClient, useQuery } from '@tanstack/react-query'
+import { useAccount } from 'wagmi'
+
+export function useHasPendingExternalSync({
+  questId,
+  getPendingExternalSync
+}: {
+  questId: number | null
+  getPendingExternalSync: (questId: number) => Promise<boolean>
+}) {
+  const { address } = useAccount()
+  const queryClient = useQueryClient()
+  const queryKey = ['pending-external-sync', questId, address]
+  const query = useQuery({
+    queryKey,
+    queryFn: async () => {
+      if (!questId) {
+        return false
+      }
+      return getPendingExternalSync(questId)
+    },
+    enabled: questId !== undefined
+  })
+
+  return {
+    ...query,
+    invalidateQuery: async () => queryClient.invalidateQueries({ queryKey })
+  }
+}