🥸 Implement claiming review

packages/frontend/src/blockchain/hooks/useClaimFunds.ts

@@ -0,0 +1,36 @@
+import { AUCTION_ABI } from '@/blockchain/abi/auction'
+import { AUCTION_ADDRESSES } from '@/blockchain/auctionAddresses'
+import { TransactionAction, Transactions } from '@/blockchain/transaction'
+import { useCallback, useState } from 'react'
+import { Hex } from 'viem'
+import { useChainId, useWriteContract } from 'wagmi'
+import { useUserSettledBid } from './useUserSettledBid'
+
+export function useClaimFunds(bidderId: bigint): TransactionAction {
+  const { writeContractAsync, status, reset } = useWriteContract()
+  const { refetch } = useUserSettledBid()
+  const onBackHome = async () => {
+    reset()
+    refetch()
+  }
+  const chainId = useChainId()
+  const [transactionHash, setTransactionHash] = useState<Hex>()
+  const send = useCallback(
+    () =>
+      writeContractAsync(
+        {
+          chainId,
+          abi: AUCTION_ABI,
+          address: AUCTION_ADDRESSES[chainId],
+          functionName: 'claim',
+          args: [bidderId],
+        },
+        {
+          onSuccess: setTransactionHash,
+        },
+      ),
+    [writeContractAsync, chainId, bidderId],
+  )
+
+  return { send, status, onBackHome, type: Transactions.Withdraw, transactionHash }
+}

packages/frontend/src/blockchain/hooks/useUserSettledBid.ts

@@ -5,11 +5,11 @@ import { Hex } from 'viem'
 import { UserBid } from '@/types/bid'
 import { useUserBid } from '@/blockchain/hooks/useUserBid'
 
-export const useUserSettledBid = (): UserBid | undefined => {
+export const useUserSettledBid = () => {
   const chainId = useChainId()
   const bid = useUserBid()
 
-  const { data } = useReadContracts({
+  const { data, refetch } = useReadContracts({
     contracts: [
       {
         chainId,
@@ -32,13 +32,14 @@ export const useUserSettledBid = (): UserBid | undefined => {
     },
   })
 
-  if (!data || !bid) {
-    return undefined
-  }
+  const userBid: UserBid | undefined =
+    !data || !bid
+      ? undefined
+      : {
+          ...bid,
+          claimed: data[0].claimed,
+          winType: data[1],
+        }
 
-  return {
-    ...bid,
-    claimed: data[0].claimed,
-    winType: data[1],
-  }
+  return { userBid, refetch }
 }

packages/frontend/src/blockchain/transaction/TransactionAction.ts

@@ -6,6 +6,6 @@ export interface TransactionAction {
   type: Transactions
   send: () => Promise<Hex>
   status: MutationStatus
-  resetStatus: () => void
+  onBackHome: () => Promise<void> | void
   transactionHash: Hex | undefined
 }

packages/frontend/src/components/auction/AuctionTransaction.tsx

@@ -29,7 +29,7 @@ export const AuctionTransaction = ({ action, amount, impact, view, setView }: Au
       <TransactionWrapper>
         <TransactionHeading>
           {view !== TxFlowSteps.Confirmation && (
-            <BackButton view={view} setView={setView} resetState={action.resetStatus} />
+            <BackButton view={view} setView={setView} resetState={action.onBackHome} />
           )}
           <FormSubHeading>{heading[action.type]}</FormSubHeading>
         </TransactionHeading>
@@ -41,7 +41,7 @@ export const AuctionTransaction = ({ action, amount, impact, view, setView }: Au
             action={action.type}
             txHash={action.transactionHash}
             setView={setView}
-            resetStatus={action.resetStatus}
+            onBackHome={action.onBackHome}
           />
         )}
       </TransactionWrapper>

packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx

@@ -15,15 +15,15 @@ interface Props {
   txHash: Hex | undefined
   action: Transactions
   setView: (state: TxFlowSteps) => void
-  resetStatus: () => void
+  onBackHome: () => Promise<void> | void
 }
 
-export const TransactionSuccess = ({ txHash, action, setView, resetStatus }: Props) => {
+export const TransactionSuccess = ({ txHash, action, setView, onBackHome }: Props) => {
   const transactionLink = useExplorerTxLink(txHash ?? '0x')
 
-  const goHome = () => {
+  const goHome = async () => {
+    await onBackHome()
     setView(0)
-    resetStatus()
   }
 
   if (!txHash) {

packages/frontend/src/components/form/ReviewForm.tsx

@@ -20,13 +20,7 @@ interface ReviewFormProps {
   setView: (state: TxFlowSteps) => void
 }
 
-export const ReviewForm = ({
-  action: { status, resetStatus, ...action },
-  amount,
-  impact,
-  view,
-  setView,
-}: ReviewFormProps) => {
+export const ReviewForm = ({ action: { status, ...action }, amount, impact, view, setView }: ReviewFormProps) => {
   const { address } = useAccount()
   const etherBalance = useBalance({ address }).data?.value
   const isPending = status === 'pending'

packages/frontend/src/components/userActious/bid/PlaceBid/usePlaceBid.ts

@@ -33,5 +33,5 @@ export function usePlaceBid({ score, proof, value }: Props): TransactionAction {
     [writeContractAsync, chainId, score, proof, value],
   )
 
-  return { send, status, resetStatus: reset, type: Transactions.Place, transactionHash }
+  return { send, status, onBackHome: reset, type: Transactions.Place, transactionHash }
 }

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

@@ -3,7 +3,7 @@ import { WinBidFlow } from '@/components/userActious/claim/WinBidFlow'
 import { useUserSettledBid } from '@/blockchain/hooks/useUserSettledBid'
 
 export const ClaimingFlow = () => {
-  const userBid = useUserSettledBid()
+  const { userBid } = useUserSettledBid()
 
   return userBid ? <WinBidFlow userBid={userBid} /> : <NoBidding />
 }

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

@@ -5,6 +5,8 @@ import { WinType } from '@/types/winType'
 import { WinForm } from '@/components/userActious/claim/WinForm'
 import { TxFlowSteps } from '@/components/auction/TxFlowSteps'
 import { useAccount } from 'wagmi'
+import { AuctionTransaction } from '@/components/auction/AuctionTransaction'
+import { useClaimFunds } from '@/blockchain/hooks/useClaimFunds'
 
 interface WinBidFlowProps {
   userBid: UserBid
@@ -13,13 +15,22 @@ interface WinBidFlowProps {
 export const WinBidFlow = ({ userBid }: WinBidFlowProps) => {
   const { address } = useAccount()
   const minimumBid = useMinimumBid()
-  const [, setView] = useState<TxFlowSteps>(TxFlowSteps.Placing)
+  const [view, setView] = useState<TxFlowSteps>(TxFlowSteps.Placing)
+  const claimAction = useClaimFunds(userBid.bidderId)
 
   useEffect(() => setView(TxFlowSteps.Placing), [address])
 
   const withdrawalAmount = useMemo(() => calculateWithdrawalAmount(userBid, minimumBid), [userBid, minimumBid])
 
-  return <WinForm userBid={userBid} withdrawalAmount={withdrawalAmount} setView={setView} />
+  return (
+    <>
+      {view == TxFlowSteps.Placing ? (
+        <WinForm userBid={userBid} withdrawalAmount={withdrawalAmount} setView={setView} />
+      ) : (
+        <AuctionTransaction action={claimAction} amount={withdrawalAmount} view={view} setView={setView} />
+      )}
+    </>
+  )
 }
 
 function calculateWithdrawalAmount(userBid: UserBid, minimumBid: bigint) {