Add remove pending allocation button

src/components/cards/AppInfoCard.tsx

@@ -17,9 +17,9 @@ import {
 } from '@/lib/utils'
 import {
   LDNActorType,
+  RefillUnit,
   type Allocation,
   type Application,
-  RefillUnit,
 } from '@/type'
 import {
   Dialog,
@@ -88,6 +88,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
     message,
     loadMoreAccounts,
     mutationRequestKyc,
+    mutationRemovePendingAllocation,
   } = useApplicationActions(initialApplication, repo, owner)
   const [buttonText, setButtonText] = useState('')
   const [modalMessage, setModalMessage] = useState<string | null>(null)
@@ -681,6 +682,20 @@ const AppInfoCard: React.FC<ComponentProps> = ({
     setApiCalling(false)
   }
 
+  const handleRemovePendingAllocation = async (): Promise<void> => {
+    setApiCalling(true)
+    const userName = session.data?.user?.githubUsername
+    if (!userName) return
+    try {
+      await mutationRemovePendingAllocation.mutateAsync({
+        userName,
+      })
+    } catch (error) {
+      handleMutationError(error as Error)
+    }
+    setApiCalling(false)
+  }
+
   return (
     <>
       <AccountSelectionDialog
@@ -835,6 +850,22 @@ const AppInfoCard: React.FC<ComponentProps> = ({
                         </Button>
                       </div>
                     )}
+                    {application?.Lifecycle?.State === 'ReadyToSign' && (
+                      <div className="flex gap-2">
+                        <Button
+                          onClick={() => {
+                            void handleRemovePendingAllocation()
+                          }}
+                          disabled={isApiCalling}
+                          style={{
+                            width: '250px',
+                          }}
+                          className="bg-red-400 text-black rounded-lg px-4 py-2 hover:bg-green-500"
+                        >
+                          Remove Pending Allocation
+                        </Button>
+                      </div>
+                    )}
                     {buttonText &&
                       (walletConnected ||
                         [

src/hooks/useApplicationActions.ts

@@ -1,21 +1,22 @@
-import { useState } from 'react'
-import {
-  useQueryClient,
-  useMutation,
-  type UseMutationResult,
-} from 'react-query'
+import useWallet from '@/hooks/useWallet'
 import {
-  postApplicationTrigger,
-  postApplicationProposal,
+  postAdditionalInfoRequest,
   postApplicationApproval,
-  postApproveChanges,
   postApplicationDecline,
-  postAdditionalInfoRequest,
+  postApplicationProposal,
+  postApplicationTrigger,
+  postApproveChanges,
+  postRemoveAlloc,
   postRequestKyc,
   triggerSSA,
 } from '@/lib/apiClient'
-import useWallet from '@/hooks/useWallet'
-import { type RefillUnit, type Application } from '@/type'
+import { type Application, type RefillUnit } from '@/type'
+import { useState } from 'react'
+import {
+  useMutation,
+  useQueryClient,
+  type UseMutationResult,
+} from 'react-query'
 
 interface ApplicationActions {
   application: Application
@@ -40,6 +41,12 @@ interface ApplicationActions {
     { userName: string },
     unknown
   >
+  mutationRemovePendingAllocation: UseMutationResult<
+    Application | undefined,
+    unknown,
+    { userName: string },
+    unknown
+  >
   mutationDecline: UseMutationResult<
     Application | undefined,
     unknown,
@@ -230,6 +237,26 @@ const useApplicationActions = (
     },
   )
 
+  const mutationRemovePendingAllocation = useMutation<
+    Application | undefined,
+    unknown,
+    { userName: string },
+    unknown
+  >(
+    async ({ userName }) => {
+      return await postRemoveAlloc(initialApplication.ID, userName, repo, owner)
+    },
+    {
+      onSuccess: (data) => {
+        setApiCalling(false)
+        if (data != null) updateCache(data)
+      },
+      onError: () => {
+        setApiCalling(false)
+      },
+    },
+  )
+
   /**
    * Mutation function to handle the triggering of an application.
    * It makes an API call to trigger the application and updates the cache on success.
@@ -489,6 +516,7 @@ const useApplicationActions = (
     accounts,
     loadMoreAccounts,
     mutationTriggerSSA,
+    mutationRemovePendingAllocation,
   }
 }
 

src/lib/apiClient.ts

@@ -1,13 +1,13 @@
 import {
-  type LDNActorsResponse,
-  type Application,
-  type Allocator,
   type Allocation,
+  type Allocator,
+  type Application,
+  type LDNActorsResponse,
   type RefillUnit,
 } from '@/type'
 import axios from 'axios'
-import { getCurrentDate } from './utils'
 import { getAccessToken } from './session'
+import { getCurrentDate } from './utils'
 
 /**
  * Axios client instance with a predefined base URL for making API requests.
@@ -265,6 +265,31 @@ export const postRequestKyc = async (
   }
 }
 
+export const postRemoveAlloc = async (
+  id: string,
+  actor: string,
+  repo: string,
+  owner: string,
+): Promise<Application | undefined> => {
+  try {
+    const { data } = await apiClient.post(
+      `verifier/application/remove_pending_allocation`,
+      { github_username: actor, repo, owner, id },
+      {
+        params: {
+          github_username: actor,
+          repo,
+          owner,
+          id,
+        },
+      },
+    )
+    return data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
 /**
  * Triggers a LDN application based on its ID.
  *