Handle voucher claiming

packages/frontend/src/components/notifications/ErrorNotifications.tsx

@@ -3,15 +3,15 @@ import styled from 'styled-components'
 import { NotificationToast } from '@/components/notifications/NotificationToast'
 
 interface Props {
-  error: string | undefined
-  setError: (str?: string) => void
-  onClick: () => Promise<void>
+  error: Error | undefined
+  reset: () => void
+  onClick: () => Promise<void> | void
 }
 
-export const ErrorNotifications = ({ error, setError, onClick }: Props) => {
+export const ErrorNotifications = ({ error, reset, onClick }: Props) => {
   return (
     <ToastPrimitive.Provider>
-      {error && <NotificationToast message={error} setError={setError} onClick={onClick} />}
+      {error && <NotificationToast message={error.message} reset={reset} onClick={onClick} />}
       <NotificationsList />
     </ToastPrimitive.Provider>
   )

packages/frontend/src/components/notifications/NotificationToast.tsx

@@ -1,21 +1,18 @@
 import * as ToastPrimitive from '@radix-ui/react-toast'
-import { useCallback } from 'react'
 import styled from 'styled-components'
 import { ErrorIcon } from '@/components/icons/ErrorIcon'
 import { Colors } from '@/styles/colors'
 import { CrossIcon } from '@/components/icons'
 
 interface Props {
   message: string
-  setError: (str?: string) => void
-  onClick: () => Promise<void>
+  reset: () => void
+  onClick: () => Promise<void> | void
 }
 
-export const NotificationToast = ({ message, setError, onClick }: Props) => {
-  const removeNotification = useCallback(() => setError(undefined), [setError])
-
+export const NotificationToast = ({ message, reset, onClick }: Props) => {
   return (
-    <Toast onOpenChange={(open) => open || removeNotification()} duration={5000}>
+    <Toast duration={5000}>
       <NotificationIconWrapper>
         <ErrorIcon color={Colors.Red} size={24} />
       </NotificationIconWrapper>
@@ -26,7 +23,7 @@ export const NotificationToast = ({ message, setError, onClick }: Props) => {
           Try Again
         </NotificationActionText>
       </ToastContent>
-      <Close>
+      <Close onClick={reset}>
         <CrossIcon size={24} color={Colors.Grey} />
       </Close>
     </Toast>

packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx

@@ -1,25 +1,31 @@
-import { useState } from 'react'
 import styled from 'styled-components'
 
 import { VoucherTimeLeft } from './VoucherTimeLeft'
 import { useAuctionState } from '@/blockchain/hooks/useAuctionState'
 import { Button } from '@/components/buttons'
 import { ErrorNotifications } from '@/components/notifications/ErrorNotifications'
 import { Colors } from '@/styles/colors'
+import { useMutation } from '@tanstack/react-query'
 
 interface ClaimVoucherSectionProps {
   setVoucher: (val: string) => void
 }
 
 export const ClaimVoucherSection = ({ setVoucher }: ClaimVoucherSectionProps) => {
   const state = useAuctionState()
-  const [error, setError] = useState<string>()
-  const handleError = async () => {}
+
+  const { mutate, isPending, error, reset } = useMutation({
+    mutationFn: async () => {
+      await new Promise((r) => setTimeout(r, 2000))
+      return 'YOUR VOUCHER CODE'
+    },
+    onSuccess: (data) => setVoucher(data),
+  })
 
   return (
     <VoucherOption>
-      {error && <ErrorNotifications error={error} onClick={handleError} setError={setError} />}
-      <Button view="primary" wide>
+      {error && <ErrorNotifications error={error} onClick={mutate} reset={reset} />}
+      <Button view="primary" wide onClick={mutate} isLoading={isPending}>
         Claim voucher code
       </Button>
       {state !== 'ClaimingClosed' && <VoucherTimeLeft />}