Prevent request to pay being clicked twice (#70)

* Request to Pay

* Remove console log

* Rename mint to pay

* Don't  fetch if there is no bill id

* Invalidate query on press

Author: stefanbitcr

src/generated/client/sdk.gen.ts

@@ -1,7 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import type { Options as ClientOptions, TDataShape, Client } from '@hey-api/client-fetch';
-import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData, KeysetInfoData, KeySetInfo, RequestToMintData, RequestToMintResponseInfo, IdentityDetailData,  IdentityDetailInfo} from './types.gen';
+import type { ListQuotesData, ListQuotesResponse, ListPendingQuotesData, ListPendingQuotesResponse, AdminLookupQuoteData, AdminLookupQuoteResponse, AdminUpdateQuoteData, AdminUpdateQuoteResponse, ResolveOfferData, EnquireQuoteData, EnquireQuoteResponse, LookupQuoteData, LookupQuoteResponse, ActivateKeysetData, ActivateKeysetResponse, DebitData, CreditData, ECashBalance, OnChainBalanceData, OnChainData, KeysetInfoData, KeySetInfo, RequestToMintData, RequestToMintResponseInfo, IdentityDetailData,  IdentityDetailInfo, BillPaymentData, BillPaymentState} from './types.gen';
 
 import { client as _heyApiClient } from './client.gen';
 
@@ -168,3 +168,18 @@ export const identityDetail = <ThrowOnError extends boolean = false>(options?: O
         }
     });
 };
+
+/**
+  * --------------------------- BillPaymentStatus
+*/
+
+export const paymentStatus = <ThrowOnError extends boolean = false>(options?: Options<BillPaymentData, ThrowOnError>) => {
+    return (_heyApiClient).get<BillPaymentState, unknown, ThrowOnError>({
+        url: '/v1/admin/bill/payment_status/{bill_id}',
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options?.headers
+        }
+    });
+};

src/generated/client/types.gen.ts

@@ -498,67 +498,102 @@ export type KeysetInfoData = {
 };
 
 /**
- * Request Mint
- */
+* Request Mint
+*/
+
+export type RequestToMintRequest = {
+  ebill_id: string;
+  amount: number;
+};
 
- export type RequestToMintRequest = {
-   ebill_id: string;
-   amount: number;
- };
+export type RequestToMintResponseInfo = {
+  request_id: string;
+  request: string;
+};
 
- export type RequestToMintResponseInfo = {
-   request_id: string;
-   request: string;
- };
+export type RequestToMintResponse = {
+    /**
+    * Successful response
+    */
+    200: RequestToMintResponseInfo;
+};
 
- export type RequestToMintResponse = {
-     /**
+export type RequestToMintData = {
+  body?: RequestToMintRequest;
+  path?: never;
+  query?: never;
+  url: '/v1/admin/treasury/debit/request_to_mint_from_ebill'
+};
+
+/**
+* Node ID
+*/
+
+export type IdentityDetailRequest = {
+};
+
+export type IdentityDetailInfo = {
+  node_id: string;
+  name: string;
+  email: string | null;
+  bitcoin_public_key: string;
+  npub: string;
+  postal_address: PostalAddress | null;
+  date_of_birth: string | null;
+  country_of_birth: string | null;
+  city_of_birth: string | null;
+  identification_number: string | null;
+  profile_picture_file: string | null;
+  identity_document_file: string | null;
+  nostr_relays: Array<string>;
+};
+
+export type IdentityDetailResponse = {
+    /**
       * Successful response
       */
-     200: RequestToMintResponseInfo;
- };
-
- export type RequestToMintData = {
-   body?: RequestToMintRequest;
-   path?: never;
-   query?: never;
-   url: '/v1/admin/treasury/debit/request_to_mint_from_ebill'
- };
+    200: IdentityDetailInfo;
+};
 
- /**
-  * Node ID
-  */
 
-  export type IdentityDetailRequest = {
-  };
+export type IdentityDetailData = {
+  body?: never;
+  path?: never;
+  query?: never;
+  url: '/v1/admin/identity/detail'
+};
 
-  export type IdentityDetailInfo = {
-    node_id: string;
-    name: string;
-    email: string | null;
-    bitcoin_public_key: string;
-    npub: string;
-    postal_address: PostalAddress | null;
-    date_of_birth: string | null;
-    country_of_birth: string | null;
-    city_of_birth: string | null;
-    identification_number: string | null;
-    profile_picture_file: string | null;
-    identity_document_file: string | null;
-    nostr_relays: Array<string>;
-  };
+/**
+* Bill Payment Status
+*/
+
+export type BillWaitingForPaymentState = {
+    time_of_request: number,
+    currency: string,
+    sum: string,
+    link_to_pay: string,
+    address_to_pay: string,
+    mempool_link_for_address_to_pay: string,
+}
 
-  export type IdentityDetailResponse = {
-      /**
-       * Successful response
-       */
-      200: IdentityDetailInfo;
-  };
+export type BillPaymentStatus = {
+    time_of_request_to_pay: number | null,
+    requested_to_pay: boolean,
+    paid: boolean,
+    request_to_pay_timed_out: boolean,
+    rejected_to_pay: boolean,
+}
 
+export type BillPaymentState = {
+    payment_status: BillPaymentStatus,
+    payment_details: BillWaitingForPaymentState | null,
+}
 
-  export type IdentityDetailData = {
-    body?: never;
-    path?: never;
-    query?: never;
-    url: '/v1/admin/identity/detail'
+export type BillPaymentData = {
+  body?: never;
+  path: {
+      bill_id: string;
   };
+  query?: never;
+  url: '/v1/admin/bill/payment_status/{bill_id}';
+};

src/pages/quotes/QuotePage.tsx

@@ -18,7 +18,7 @@ import {
   adminLookupQuoteQueryKey,
   adminUpdateQuoteMutation,
 } from "@/generated/client/@tanstack/react-query.gen"
-import { activateKeyset, keysetInfo, requestToMint } from "@/generated/client/sdk.gen"
+import { activateKeyset, keysetInfo, paymentStatus, requestToMint } from "@/generated/client/sdk.gen"
 import { cn, getInitials } from "@/lib/utils"
 import { formatDate, humanReadableDuration } from "@/utils/dates"
 
@@ -222,19 +222,21 @@ function QuoteActions({
   isFetching,
   newKeyset,
   ebillPaid,
+  requestedToPay,
 }: {
   value: InfoReply
   isFetching: boolean
   newKeyset: boolean
   ebillPaid: boolean
+  requestedToPay: boolean
 }) {
   const [offerFormData, setOfferFormData] = useState<OfferFormResult>()
   const [offerFormDrawerOpen, setOfferFormDrawerOpen] = useState(false)
   const [offerConfirmDrawerOpen, setOfferConfirmDrawerOpen] = useState(false)
   const [denyConfirmDrawerOpen, setDenyConfirmDrawerOpen] = useState(false)
   const [activateKeysetConfirmDrawerOpen, setActivateKeysetConfirmDrawerOpen] = useState(false)
-  const [requestToMintConfirmDrawerOpen, setRequestToMintConfirmDrawerOpen] = useState(false)
-  const [mintRequestResponse, setMintRequestResponse] = useState<RequestToMintResponseInfo | null>(null)
+  const [requestToPayConfirmDrawerOpen, setRequestToPayConfirmDrawerOpen] = useState(false)
+  const [payRequestResponse, setPayRequestResponse] = useState<RequestToMintResponseInfo | null>(null)
 
   const effectiveDiscount = useMemo(() => {
     if (!offerFormData) return
@@ -311,7 +313,7 @@ function QuoteActions({
     },
   })
 
-  const requestToMintMutation = useMutation({
+  const requestToPayMutation = useMutation({
     mutationFn: async () => {
       const { data } = await requestToMint({
         body: {
@@ -323,7 +325,7 @@ function QuoteActions({
       return data
     },
     onMutate: () => {
-      toast.loading("Requesting to pay…", { id: `quote-${value.id}-request-to-mint` })
+      toast.loading("Requesting to pay…", { id: `quote-${value.id}-request-to-pay` })
     },
     onSettled: () => {
       toast.dismiss(`quote-${value.id}-request-to-pay`)
@@ -334,7 +336,10 @@ function QuoteActions({
     },
     onSuccess: (data) => {
       toast.success("Payment request has been created.")
-      setMintRequestResponse(data)
+      setPayRequestResponse(data)
+      void queryClient.invalidateQueries({
+        queryKey: ["bill_id", value.bill.id],
+      })
     },
   })
 
@@ -371,8 +376,8 @@ function QuoteActions({
     activateKeysetMutation.mutate()
   }
 
-  const onRequestToMint = () => {
-    requestToMintMutation.mutate()
+  const onRequestToPay = () => {
+    requestToPayMutation.mutate()
   }
   return (
     <>
@@ -476,20 +481,20 @@ function QuoteActions({
           <></>
         )}
 
-        {value.status === "Accepted" && "keyset_id" in value && !ebillPaid && !newKeyset ? (
+        {value.status === "Accepted" && "keyset_id" in value && !ebillPaid && !newKeyset && !requestedToPay ? (
           <ConfirmDrawer
-            title="Confirm requesting to mint"
-            description="Are you sure you want to request to mint from this e-bill?"
-            open={requestToMintConfirmDrawerOpen}
-            onOpenChange={setRequestToMintConfirmDrawerOpen}
+            title="Confirm requesting to pay"
+            description="Are you sure you want to request to pay this e-bill?"
+            open={requestToPayConfirmDrawerOpen}
+            onOpenChange={setRequestToPayConfirmDrawerOpen}
             onSubmit={() => {
-              onRequestToMint()
-              setRequestToMintConfirmDrawerOpen(false)
+              onRequestToPay()
+              setRequestToPayConfirmDrawerOpen(false)
             }}
-            submitButtonText="Yes, request to mint"
+            submitButtonText="Yes, request to pay"
             trigger={
-              <Button className="flex-1" disabled={isFetching || requestToMintMutation.isPending} variant="default">
-                Request to Pay {requestToMintMutation.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
+              <Button className="flex-1" disabled={isFetching || requestToPayMutation.isPending} variant="default">
+                Request to Pay {requestToPayMutation.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
               </Button>
             }
           />
@@ -498,18 +503,18 @@ function QuoteActions({
         )}
       </div>
 
-      {mintRequestResponse && (
+      {payRequestResponse && (
         <div className="mt-4 p-4 bg-gray-50 rounded-lg">
           <h3 className="font-bold mb-2">Payment Request</h3>
           <div className="space-y-2">
             <div>
               <span className="font-bold">ID</span>
-              <span className="font-mono ml-2">{mintRequestResponse.request_id}</span>
+              <span className="font-mono ml-2">{payRequestResponse.request_id}</span>
             </div>
             <div>
               <span className="font-bold">Details</span>
               <div className="font-mono text-sm mt-1 p-2 bg-white rounded border break-all">
-                {mintRequestResponse.request}
+                {payRequestResponse.request}
               </div>
             </div>
           </div>
@@ -676,6 +681,7 @@ function Quote({ value, isFetching }: { value: InfoReply; isFetching: boolean })
   const shouldFetchKeyset = (value.status === "Offered" || value.status === "Accepted") && "keyset_id" in value
 
   const keysetId = "keyset_id" in value ? value.keyset_id : ""
+  const billId = "bill" in value && "id" in value.bill ? value.bill.id : ""
 
   const { data: keysetData } = useQuery({
     queryKey: ["keyset", keysetId],
@@ -686,6 +692,18 @@ function Quote({ value, isFetching }: { value: InfoReply; isFetching: boolean })
     enabled: shouldFetchKeyset,
   })
 
+  const { data: paymentData } = useQuery({
+    queryKey: ["bill_id", billId],
+    queryFn: () =>
+      paymentStatus({
+        path: { bill_id: billId },
+      }),
+    enabled: !!billId,
+  })
+
+  const requestedToPay = paymentData?.data?.payment_status.requested_to_pay ?? false
+  const paymentAddress = paymentData?.data?.payment_details?.address_to_pay ?? ""
+
   const ebillPaid = keysetData?.data && "active" in keysetData.data && keysetData.data.active === false
   const newKeyset = "keyset_id" in value && (!keysetData?.data || !("active" in keysetData.data))
 
@@ -727,6 +745,16 @@ function Quote({ value, isFetching }: { value: InfoReply; isFetching: boolean })
           ) : (
             <></>
           )}
+          {requestedToPay ? (
+            <TableRow>
+              <TableCell className="font-bold">Payment Address: </TableCell>
+              <TableCell className="flex items-center gap-2">
+                <span className="font-mono">{paymentAddress}</span>
+              </TableCell>
+            </TableRow>
+          ) : (
+            <></>
+          )}
           <TableRow>
             <TableCell className="font-bold">Status: </TableCell>
             <TableCell>
@@ -796,7 +824,13 @@ function Quote({ value, isFetching }: { value: InfoReply; isFetching: boolean })
         </TableBody>
       </Table>
 
-      <QuoteActions value={value} isFetching={isFetching} newKeyset={newKeyset} ebillPaid={ebillPaid ?? false} />
+      <QuoteActions
+        value={value}
+        isFetching={isFetching}
+        newKeyset={newKeyset}
+        ebillPaid={ebillPaid ?? false}
+        requestedToPay={requestedToPay ?? false}
+      />
     </div>
   )
 }