tech(active-wallet): add spinner and error state

src/components/ActiveWalletSection/index.module.scss

@@ -90,3 +90,7 @@
   font-weight: var(--semibold);
   color: var(--color-neutral-400);
 }
+
+.loadingSpinner {
+  font-size: var(--text-xs);
+}

src/components/ActiveWalletSection/index.tsx

@@ -1,9 +1,11 @@
-import { Button, Images, Alert } from '@hyperplay/ui'
+import { Button, Images, Alert, LoadingSpinner, AlertCard } from '@hyperplay/ui'
 import styles from './index.module.scss'
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
-import { TFunction } from 'i18next'
 import { truncateEthAddress } from '../truncateAddress'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuestWrapper } from '@/state/QuestWrapperProvider'
+import { useAccount } from 'wagmi'
 
 function InfoAlert({
   title,
@@ -59,22 +61,39 @@ function InputLikeContainer({
   )
 }
 
-interface ActiveWalletSectionProps {
-  connectedWallet: string | null
-  activeWallet: string | null
-  setActiveWallet: () => void
-  tOverride?: TFunction<any, string>
-}
+export default function ActiveWalletSection() {
+  const queryClient = useQueryClient()
+  const { address: connectedWallet } = useAccount()
+  const { getActiveWallet, setActiveWallet, tOverride, openDiscordLink } =
+    useQuestWrapper()
 
-export default function ActiveWalletSection({
-  connectedWallet,
-  activeWallet,
-  setActiveWallet,
-  tOverride
-}: ActiveWalletSectionProps) {
   const { t: tOriginal } = useTranslation()
   const t = tOverride || tOriginal
 
+  const { data: activeWallet } = useQuery({
+    queryKey: ['activeWallet'],
+    queryFn: async () => {
+      return getActiveWallet()
+    }
+  })
+
+  const {
+    mutate: setActiveWalletMutation,
+    isPending,
+    error
+  } = useMutation({
+    mutationFn: async () => {
+      if (!connectedWallet) {
+        throw new Error('No address found')
+      }
+
+      await setActiveWallet(connectedWallet)
+      await queryClient.invalidateQueries({
+        queryKey: ['activeWallet']
+      })
+    }
+  })
+
   const onlyConnectedWallet = (
     <InfoAlert title={t('wallet.detected.title', 'Wallet Detected')}>
       <span className="body-sm">
@@ -109,6 +128,21 @@ export default function ActiveWalletSection({
     </InfoAlert>
   )
 
+  const setButton = (
+    <Button
+      disabled={isPending}
+      type="secondaryGradient"
+      className={styles.setButton}
+      onClick={() => setActiveWalletMutation()}
+    >
+      {isPending ? (
+        <LoadingSpinner className={styles.loadingSpinner} />
+      ) : (
+        t('wallet.action.set', 'Set')
+      )}
+    </Button>
+  )
+
   const hasNoWallets = !connectedWallet && !activeWallet
   const hasOnlyConnectedWallet = connectedWallet && !activeWallet
   const hasOnlyActiveWallet = activeWallet && !connectedWallet
@@ -151,13 +185,7 @@ export default function ActiveWalletSection({
             <InputLikeBox className={styles.setConnectedWalletInput}>
               {truncateEthAddress(connectedWallet ?? '')}
             </InputLikeBox>
-            <Button
-              type="secondaryGradient"
-              className={styles.setButton}
-              onClick={setActiveWallet}
-            >
-              {t('wallet.action.set', 'Set')}
-            </Button>
+            {setButton}
           </div>
         </InputLikeContainer>
       </>
@@ -204,18 +232,29 @@ export default function ActiveWalletSection({
             <InputLikeBox className={styles.setConnectedWalletInput}>
               {truncateEthAddress(connectedWallet ?? '')}
             </InputLikeBox>
-            <Button
-              type="secondaryGradient"
-              className={styles.setButton}
-              onClick={setActiveWallet}
-            >
-              {t('wallet.action.set', 'Set')}
-            </Button>
+            {setButton}
           </div>
         </InputLikeContainer>
       </>
     )
   }
 
-  return <div className={styles.root}>{content}</div>
+  const alertProps = {
+    showClose: false,
+    title: t('wallet.error.title', 'Something went wrong'),
+    message: t(
+      'wallet.error.message',
+      "Please try once more. If it still doesn't work, create a Discord support ticket."
+    ),
+    actionText: t('wallet.error.action', 'Create Discord Ticket'),
+    onActionClick: () => openDiscordLink(),
+    variant: 'danger' as const
+  }
+
+  return (
+    <div className={styles.root}>
+      {content}
+      {error && <AlertCard {...alertProps} />}
+    </div>
+  )
 }

src/components/PlayStreakEligibilityWrapper/index.tsx

@@ -4,52 +4,25 @@ import { useGetUserPlayStreak } from '@/hooks/useGetUserPlayStreak'
 import { useHasPendingExternalSync } from '@/hooks/useHasPendingExternalSync'
 import { useQuestWrapper } from '@/state/QuestWrapperProvider'
 import { Button, Images, StreakProgress } from '@hyperplay/ui'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styles from './index.module.scss'
-import { useAccount } from 'wagmi'
 import ActiveWalletSection from '../ActiveWalletSection'
 
 export function PlayStreakEligibilityWrapper({
   questId
 }: {
   questId: number | null
 }) {
-  const queryClient = useQueryClient()
-
   const {
     syncPlayStreakWithExternalSource,
     getPendingExternalSync,
     getUserPlayStreak,
-    getQuest,
-    getActiveWallet,
-    setActiveWallet
+    getQuest
   } = useQuestWrapper()
   const { t } = useTranslation()
   const { data: questMeta } = useGetQuest(questId, getQuest)
-  const { address } = useAccount()
-
-  const { data: activeWallet } = useQuery({
-    queryKey: ['activeWallet'],
-    queryFn: async () => {
-      return getActiveWallet()
-    }
-  })
-
-  const { mutateAsync: setActiveWalletMutation } = useMutation({
-    mutationFn: async () => {
-      if (!address) {
-        throw new Error('No address found')
-      }
-
-      await setActiveWallet(address)
-      await invalidateQuestPlayStreak()
-      await queryClient.invalidateQueries({
-        queryKey: ['activeWallet']
-      })
-    }
-  })
 
   const {
     data: questPlayStreakData,
@@ -124,11 +97,7 @@ export function PlayStreakEligibilityWrapper({
 
   return (
     <div className={styles.container}>
-      <ActiveWalletSection
-        connectedWallet={address ?? null}
-        activeWallet={activeWallet ?? null}
-        setActiveWallet={setActiveWalletMutation}
-      />
+      <ActiveWalletSection />
       <StreakProgress
         {...getPlaystreakArgsFromQuestData({
           questMeta: questMeta.data,

src/components/QuestDetailsWrapper/PlayStreakQuest.stories.tsx

@@ -242,7 +242,10 @@ export const ActiveWalletConnectDefault: Story = {
       <QuestDetailsWrapper
         {...args}
         getActiveWallet={async () => Promise.resolve(activeWallet)}
-        setActiveWallet={async (wallet) => setActiveWallet(wallet)}
+        setActiveWallet={async (wallet) => {
+          setActiveWallet(wallet)
+          await new Promise((resolve) => setTimeout(resolve, 2000))
+        }}
       />
     )
   }
@@ -260,7 +263,27 @@ export const ActiveWalletSwitchWallet: Story = {
       <QuestDetailsWrapper
         {...args}
         getActiveWallet={async () => Promise.resolve(activeWallet)}
-        setActiveWallet={async (wallet) => setActiveWallet(wallet)}
+        setActiveWallet={async (wallet) => {
+          setActiveWallet(wallet)
+          await new Promise((resolve) => setTimeout(resolve, 2000))
+        }}
+      />
+    )
+  }
+}
+
+export const ActiveWalletSwitchWalletError: Story = {
+  args: {
+    ...mockProps
+  },
+  render: (args) => {
+    return (
+      <QuestDetailsWrapper
+        {...args}
+        setActiveWallet={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 3000))
+          throw new Error('Error')
+        }}
       />
     )
   }