feat(quest-details): add support for individual claim click

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@hyperplay/quests-ui",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "description": "",
   "main": "index.js",
   "scripts": {
     "build": "vite build",
     "lint": "eslint ./src",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "test": "jest"
   },
@@ -30,6 +30,7 @@
     "@chromatic-com/storybook": "^1.9.0",
     "@mantine/core": "^7.5.1",
     "@hyperplay/chains": "^0.3.0",
+    "@hyperplay/ui": "^1.8.13-alpha.0",
     "@storybook/addon-essentials": "^8.3.4",
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
@@ -38,7 +39,6 @@
     "@storybook/react": "^8.3.4",
     "@storybook/react-vite": "^8.3.4",
     "@storybook/test": "^8.3.4",
-    "@hyperplay/ui": "^1.8.4",
     "@hyperplay/utils": "^0.2.7",
     "@tanstack/query-core": "^5.59.13",
     "@tanstack/react-query": "^5.51.23",

src/components/QuestDetailsWrapper/QuestDetailsWrapper.stories.tsx → src/components/QuestDetailsWrapper/PlayStreakQuest.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { QuestDetailsWrapper, QuestDetailsWrapperProps } from './index'
+import styles from './story-styles.module.scss'
 
 const meta: Meta<typeof QuestDetailsWrapper> = {
   component: QuestDetailsWrapper,
@@ -11,24 +12,25 @@ export default meta
 type Story = StoryObj<typeof QuestDetailsWrapper>
 
 const mockProps: QuestDetailsWrapperProps = {
+  className: styles.root,
   selectedQuestId: 1,
-  projectId: 'test-project',
   flags: {
     rewardTypeClaimEnabled: {
-      ERC20: false,
-      ERC721: false,
-      ERC1155: false,
-      POINTS: false,
-      'EXTERNAL-TASKS': false
+      ERC20: true,
+      ERC721: true,
+      ERC1155: true,
+      POINTS: true,
+      'EXTERNAL-TASKS': true
     },
     questsOverlayClaimCtaEnabled: false
   },
+  onPlayClick: () => alert('onPlayClick'),
   getQuest: async () => {
     return {
       id: 1,
       project_id: 'test-project',
       name: '🦖 Craft World’s Ultimate Play Streak Quest 🔥 🚀',
-      type: 'PLAY-STREAK',
+      type: 'PLAYSTREAK',
       status: 'ACTIVE',
       description: `Embrace the Ultimate Play Streak Quest by Craft World! 🎮 Play daily to earn rewards, contribute to the Masterpiece, and climb the leaderboard. 🏆
 
@@ -49,6 +51,17 @@ Rise among Craft World's top ranks. 🚀 Join now and make your mark before the
           amount_per_user: '200000000000000000000000',
           chain_id: 84532,
           reward_type: 'ERC20'
+        },
+        {
+          id: 2,
+          name: 'G7 Credits',
+          contract_address: '0x0000000000000000000000000000000000000000',
+          decimals: 18,
+          image_url: 'https://gateway-b3.valist.io/hyperplay/game7passport.png',
+          token_ids: [],
+          amount_per_user: '100000000000000000000000',
+          chain_id: 84532,
+          reward_type: 'EXTERNAL-TASKS'
         }
       ],
       deposit_contracts: [],
@@ -72,13 +85,15 @@ Rise among Craft World's top ranks. 🚀 Join now and make your mark before the
       capsule_image: 'https://test.com/image.png'
     }
   },
-  isSignedIn: true,
+  isSignedIn: false,
   trackEvent: () => {},
   signInWithSteamAccount: () => {},
-  openSignInModal: () => {},
+  openSignInModal: () => alert('openSignInModal'),
   logError: () => {},
   claimPoints: async () => {},
-  completeExternalTask: async () => {},
+  completeExternalTask: async () => {
+    alert('complete external task')
+  },
   getQuestRewardSignature: async () => {
     return {
       signature: `0x123`,
@@ -87,13 +102,19 @@ Rise among Craft World's top ranks. 🚀 Join now and make your mark before the
       tokenIds: []
     }
   },
-  confirmRewardClaim: async () => {},
-  resyncExternalTask: async () => {},
+  confirmRewardClaim: async () => {
+    alert('confirm reward claim')
+  },
+  resyncExternalTask: async () => {
+    console.log('resync external task')
+  },
   getExternalTaskCredits: async () => {
     return '100'
   },
-  syncPlaySession: async () => {},
-  logInfo: () => {},
+  syncPlaySession: async () => {
+    console.log('sync play session')
+  },
+  logInfo: () => console.log,
   openDiscordLink: () => {},
   getDepositContracts: async () => {
     return []
@@ -109,6 +130,68 @@ Rise among Craft World's top ranks. 🚀 Join now and make your mark before the
   }
 }
 
-export const PlayStreakQuest: Story = {
-  args: mockProps
+export const QuestPageNotSignedIn: Story = {
+  args: {
+    ...mockProps,
+    isQuestsPage: true
+  }
+}
+
+export const QuestPageSignedIn: Story = {
+  args: {
+    ...mockProps,
+    isQuestsPage: true,
+    isSignedIn: true
+  }
+}
+
+export const QuestPageSignedInEligible: Story = {
+  args: {
+    ...mockProps,
+    isQuestsPage: true,
+    isSignedIn: true,
+    getUserPlayStreak: async () => {
+      return {
+        current_playstreak_in_days: 5
+      }
+    },
+    checkG7ConnectionStatus: async () => {
+      return true
+    }
+  }
+}
+
+export const OverlayNotSignedIn: Story = {
+  args: {
+    ...mockProps
+  }
+}
+
+export const OverlaySignedIn: Story = {
+  args: {
+    ...mockProps,
+    isSignedIn: true
+  }
+}
+
+export const OverlaySignedInEligible: Story = {
+  args: {
+    ...mockProps,
+    isSignedIn: true,
+    getUserPlayStreak: async () => {
+      return {
+        current_playstreak_in_days: 5
+      }
+    }
+  }
+}
+
+export const PendingExternalSync: Story = {
+  args: {
+    ...mockProps,
+    isSignedIn: true,
+    getPendingExternalSync: async () => {
+      return true
+    }
+  }
 }