Call transfer trpc mutation from frontend

packages/app/features/send/confirm/screen.tsx

@@ -13,11 +13,11 @@ import {
   type ParagraphProps,
   type YStackProps,
 } from '@my/ui'
-import { baseMainnet } from '@my/wagmi'
+import { baseMainnet, baseMainnetClient, entryPointAddress } from '@my/wagmi'
 import { useQueryClient } from '@tanstack/react-query'
-import { IconAccount, IconUSDC } from 'app/components/icons'
+import { IconAccount } from 'app/components/icons'
 import { IconCoin } from 'app/components/icons/IconCoin'
-import { coins, coinsDict } from 'app/data/coins'
+import { coinsDict } from 'app/data/coins'
 import { useTokenActivityFeed } from 'app/features/home/utils/useTokenActivityFeed'
 import { useSendScreenParams } from 'app/routers/params'
 import { assert } from 'app/utils/assert'
@@ -30,10 +30,7 @@ import { useProfileHref } from 'app/utils/useProfileHref'
 import { useProfileLookup } from 'app/utils/useProfileLookup'
 import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
 import { useUSDCFees } from 'app/utils/useUSDCFees'
-import {
-  useGenerateTransferUserOp,
-  useUserOpTransferMutation,
-} from 'app/utils/useUserOpTransferMutation'
+import { useGenerateTransferUserOp } from 'app/utils/useUserOpTransferMutation'
 import { useAccountNonce } from 'app/utils/userop'
 import {
   isSendAccountReceiveEvent,
@@ -44,6 +41,11 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'solito/router'
 import { formatUnits, isAddress, parseUnits, type Hex } from 'viem'
 import { useEstimateFeesPerGas } from 'wagmi'
+import { api } from 'app/utils/api'
+import { TRPCClientError } from '@trpc/client'
+import { getUserOperationHash } from 'permissionless'
+import { signUserOp } from 'app/utils/signUserOp'
+import { byteaToBase64 } from 'app/utils/byteaToBase64'
 
 export function SendConfirmScreen() {
   const [queryParams] = useSendScreenParams()
@@ -73,6 +75,11 @@ export function SendConfirmScreen() {
 export function SendConfirm() {
   const [queryParams] = useSendScreenParams()
   const { sendToken, recipient, idType } = queryParams
+  const {
+    mutateAsync: transfer,
+    isPending: isTransferPending,
+    isError: isTransferError,
+  } = api.transfer.withUserOp.useMutation()
 
   const queryClient = useQueryClient()
   const { data: sendAccount } = useSendAccount()
@@ -122,11 +129,6 @@ export function SendConfirm() {
   const { data: feesPerGas, error: feesPerGasError } = useEstimateFeesPerGas({
     chainId: baseMainnet.id,
   })
-  const {
-    mutateAsync: sendUserOp,
-    isPending: isTransferPending,
-    isError: isTransferError,
-  } = useUserOpTransferMutation()
 
   const [error, setError] = useState<Error>()
 
@@ -160,6 +162,7 @@ export function SendConfirm() {
       assert(nonce !== undefined, 'Nonce is not available')
       throwIf(feesPerGasError)
       assert(!!feesPerGas, 'Fees per gas is not available')
+      assert(!!profile?.address, 'Could not resolve recipients send account')
 
       assert(tokenBalance >= amount, 'Insufficient balance')
       const sender = sendAccount?.address as `0x${string}`
@@ -173,12 +176,32 @@ export function SendConfirm() {
       console.log('gasEstimate', usdcFees)
       console.log('feesPerGas', feesPerGas)
       console.log('userOp', _userOp)
-      const receipt = await sendUserOp({
-        userOp: _userOp,
-        webauthnCreds,
+      const chainId = baseMainnetClient.chain.id
+      const entryPoint = entryPointAddress[chainId]
+      const userOpHash = getUserOperationHash({
+        userOperation: userOp,
+        entryPoint,
+        chainId,
+      })
+      const signature = await signUserOp({
+        userOpHash,
+        allowedCredentials:
+          webauthnCreds?.map((c) => ({
+            id: byteaToBase64(c.raw_credential_id),
+            userHandle: c.name,
+          })) ?? [],
+      })
+      userOp.signature = signature
+
+      const { data: workflowId, error } = await transfer(userOp).catch((e) => {
+        console.error("Couldn't send the userOp", e)
+        if (e instanceof TRPCClientError) {
+          return { data: undefined, error: { message: e.message } }
+        }
+        return { data: undefined, error: { message: e.message } }
       })
-      assert(receipt.success, 'Failed to send user op')
-      setSentTxHash(receipt.receipt.transactionHash)
+      console.log('workflowId', workflowId)
+      console.log('error', error)
     } catch (e) {
       console.error(e)
       setError(e)

packages/app/utils/useUserOpTransferMutation.ts

@@ -130,6 +130,7 @@ export async function sendUserOpTransfer({
     throwNiceError(e)
   }
 }
+
 export function useGenerateTransferUserOp({
   sender,
   to,