chore: update contracts

.prettierrc

@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
+  "arrowParens": "always",
   "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 }

package.json

@@ -39,6 +39,7 @@
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.105.6",
     "@react-three/fiber": "^8.16.3",
+    "@river-build/generated": "^0.0.127",
     "@styled-jsx/plugin-sass": "^4.0.1",
     "@tanstack/react-query": "^5.29.2",
     "@tanstack/react-query-devtools": "^5.45.0",

src/components/claim/claim-page.tsx

@@ -1,16 +1,26 @@
+import { useClaim } from '@/lib/hooks/use-claim'
 import { cn } from '@/lib/utils'
+import { formatUnits } from 'viem'
+import { base, baseSepolia } from 'viem/chains'
 import { useAccount, useSwitchChain } from 'wagmi'
+import { Button } from '../ui/button'
+import { Skeleton } from '../ui/skeleton'
 import { Typography } from '../ui/typography'
 import { WalletInfo } from '../wallet-info'
-import { Claimable } from './claimable'
-import {  base, baseSepolia } from 'viem/chains'
-import { Button } from '../ui/button'
 
 export const ClaimPage = () => {
-  const { chainId } = useAccount()
+  const { chainId, address } = useAccount()
   const { switchChain } = useSwitchChain()
 
   const isBase = chainId === base.id || chainId === baseSepolia.id
+  const {
+    claimReward,
+    isLoadingClaimableBalance,
+    claimableBalance,
+    isPending,
+    isTxPending,
+    isTxConfirmed,
+  } = useClaim()
 
   return (
     <section
@@ -25,21 +35,20 @@ export const ClaimPage = () => {
           {/* It's impossible to the disconnect user to get to this page without being on the base network
               But they can change the network after, that's why this toast is necessary  */}
           {!isBase && (
-            <div className="flex  items-center justify-between gap-2">
-              <Typography
-                size="sm"
-                className="text-red-400 "
-              >
+            <div className="flex items-center justify-between gap-2">
+              <Typography size="sm" className="text-red-400">
                 You can only claim on the Base chain.
               </Typography>
-                <Button size="sm" onClick={() => switchChain({ chainId: base.id })}>Switch</Button>
+              <Button size="sm" onClick={() => switchChain({ chainId: base.id })}>
+                Switch
+              </Button>
             </div>
           )}
           <Typography
             as="h1"
             size="3xl"
             className="text-2xl font-semibold leading-[44px] text-gray-10"
-            >
+          >
             Claim
           </Typography>
 
@@ -48,12 +57,57 @@ export const ClaimPage = () => {
           </Typography>
         </div>
 
-        <WalletInfo showRvrBalance showAuthorizedClaimer />
+        <WalletInfo showRvrBalance showAuthorizedClaimer showRewards />
 
-        <div className="flex flex-col gap-4 pt-6">
-          <Claimable type="mainnet" />
-          <Claimable type="delegator" />
-          <Claimable type="operator" />
+        <div className="flex flex-col pt-6">
+          <section className="flex flex-col gap-2">
+            <Typography
+              as="h2"
+              size="lg"
+              className="text-2xl font-semibold leading-[44px] text-gray-10"
+            >
+              Claimable balance
+            </Typography>
+            <div className="flex flex-col items-center justify-between gap-2">
+              {isLoadingClaimableBalance ? (
+                <Skeleton className="inline-block h-6 w-32" />
+              ) : (
+                <Typography
+                  as="span"
+                  size="md"
+                  className={cn(
+                    'text-white',
+                    !!claimableBalance && 'font-mono font-medium tabular-nums',
+                  )}
+                >
+                  {!claimableBalance ? 0 : formatUnits(claimableBalance, 18)}
+                </Typography>
+              )}
+              <Button
+                type="submit"
+                isLoading={isPending || isTxPending}
+                disabled={!claimableBalance || claimableBalance === 0n}
+                aria-label="Claim rewards"
+                className="w-full"
+                onClick={() => {
+                  claimReward({
+                    args: [
+                      // beneficiary - in the case of this button - its the connected wallet
+                      // TODO: advanced mode: allow to set any address
+                      // including wallets that the user is an authorized claimer (?)
+                      address!,
+                      // recipient - in the case of this button - its the connected wallet
+                      // but it could be any other address - including mainnet address
+                      // TODO: advanced mode: allow to set any address
+                      address!,
+                    ],
+                  })
+                }}
+              >
+                {isTxConfirmed ? 'Claimed' : isPending || isTxPending ? 'Claiming...' : 'Claim'}
+              </Button>
+            </div>
+          </section>
         </div>
       </section>
     </section>

src/components/delegate/authorize-claimer-form.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import { useReadRiverAuthorizer, useWriteRiverAuthorizerAuthorizeClaimer } from '@/contracts'
+import { useAuthorizeClaimer } from '@/lib/hooks/use-authorize-claimer'
 import { formatAddress } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useQueryClient } from '@tanstack/react-query'
 import { Check } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { isAddress } from 'viem'
 import { base, mainnet } from 'viem/chains'
-import { useAccount, useSwitchChain, useWaitForTransactionReceipt } from 'wagmi'
+import { useAccount, useSwitchChain } from 'wagmi'
 import { z } from 'zod'
 import { Button } from '../ui/button'
 import {
@@ -34,42 +33,23 @@ export const AuthorizeClaimerForm = () => {
   const [authorizedClaimerAddress, setAuthorizedClaimerAddress] = useState<`0x${string}` | null>(
     null,
   )
-
+  const { isPending, isTxConfirmed, isTxPending, writeAuthorizer } = useAuthorizeClaimer()
+  const { switchChain } = useSwitchChain()
+  const { chainId } = useAccount()
   const { toast } = useToast()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   })
 
-  const qc = useQueryClient()
-  const { chainId } = useAccount()
-  const {
-    data: hash,
-    writeContract: writeAuthorizer,
-    isPending,
-  } = useWriteRiverAuthorizerAuthorizeClaimer()
-  const { switchChain } = useSwitchChain()
-
-  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
-    hash,
-  })
-
-  const { queryKey: authorizedClaimerQueryKey } = useReadRiverAuthorizer()
-
-  useEffect(() => {
-    if (isConfirmed) {
-      qc.invalidateQueries({ queryKey: authorizedClaimerQueryKey })
-    }
-  }, [authorizedClaimerQueryKey, isConfirmed, qc])
-
   useEffect(() => {
-    if (isConfirmed && authorizedClaimerAddress) {
+    if (isTxConfirmed && authorizedClaimerAddress) {
       toast({
         title: `You've authorized ${formatAddress(
           authorizedClaimerAddress,
         )} as the wallet that can claim on your behalf.`,
       })
     }
-  }, [authorizedClaimerAddress, isConfirmed, toast])
+  }, [authorizedClaimerAddress, isTxConfirmed, toast])
 
   function onSubmit(formValue: z.infer<typeof formSchema>) {
     if (!chainId) return
@@ -81,7 +61,6 @@ export const AuthorizeClaimerForm = () => {
       switchChain({ chainId: mainnet.id })
       return
     }
-
     setAuthorizedClaimerAddress(formValue.address)
     writeAuthorizer({
       args: [formValue.address],
@@ -110,8 +89,8 @@ export const AuthorizeClaimerForm = () => {
           )}
         />
         <Button type="submit" isLoading={isPending} aria-label="Authorize">
-          {isConfirmed && <Check className="mr-2 h-4 w-4" />}
-          {isConfirmed ? 'Authorized' : isPending || isConfirming ? 'Authorizing...' : 'Authorize'}
+          {isTxConfirmed && <Check className="mr-2 h-4 w-4" />}
+          {isTxConfirmed ? 'Authorized' : isPending || isTxPending ? 'Authorizing...' : 'Authorize'}
         </Button>
       </form>
     </Form>