Add Quote as dialog inside payment

app/components/loader.tsx

@@ -1,26 +1,38 @@
+import { cx } from "class-variance-authority";
 import { motion } from "framer-motion";
 import { useBackdropContext } from "~/lib/context/backdrop";
 
 export function Fallback() {
   return null;
 }
 
-export function Loader() {
+type LoaderArgs = {
+  type: string;
+};
+
+export function Loader(loaderArgs: LoaderArgs) {
   const { isLoading } = useBackdropContext();
   return (
     <>
       {isLoading ? (
         <div className="absolute inset-0 flex flex-col items-center justify-center gap-y-10">
           <motion.div
-            className="h-24 w-24 rounded-full border-[16px] border-gray-200 border-t-green-1"
+            className={cx(
+              "rounded-full  border-gray-200 border-t-green-1",
+              loaderArgs.type === "small"
+                ? "h-10 w-10 border-[5px]"
+                : "h-24 w-24 border-[16px]"
+            )}
             animate={{ rotate: 360 }}
             transition={{
               repeat: Infinity,
               ease: "linear",
               duration: 1,
             }}
           />
-          <h2 className="text-2xl uppercase">Processing payment...</h2>
+          {loaderArgs.type === "large" ? (
+            <h2 className="text-2xl uppercase">Processing payment...</h2>
+          ) : null}
         </div>
       ) : null}
     </>

app/components/quoteDialog.tsx

@@ -0,0 +1,107 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react/jsx-runtime";
+import { useDialogContext } from "~/lib/context/dialog";
+import { Header } from "./header";
+import { Field } from "./ui/form/form";
+import { Button } from "./ui/button";
+import { Form } from "@remix-run/react";
+import { useForm } from "@conform-to/react";
+import { Loader } from "./loader";
+import { useBackdropContext } from "~/lib/context/backdrop";
+
+export type QuoteArgs = {
+  receiverName: string;
+  receiveAmount: string;
+  debitAmount: string;
+};
+
+export default function Quote({
+  receiverName,
+  receiveAmount,
+  debitAmount,
+}: QuoteArgs) {
+  const { open, setOpen } = useDialogContext();
+  const { setIsLoading } = useBackdropContext();
+  setIsLoading(true);
+
+  const [form] = useForm({
+    id: "quote-form",
+    shouldRevalidate: "onSubmit",
+  });
+
+  if (receiverName !== "") {
+    setIsLoading(false);
+  }
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={() => setOpen(false)}>
+        <Transition.Child
+          as={Fragment}
+          enter="transition-opacity duration-500"
+          enterFrom="opacity-5"
+          enterTo="opacity-5"
+          leave="transition-opacity duration-500"
+          leaveFrom="opacity-10"
+          leaveTo="opacity-10"
+        >
+          <div className="fixed opacity-50 inset-0 bg-background-dark" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4"
+              enterTo="opacity-100 translate-y-0"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-4"
+            >
+              <Dialog.Panel className="relative w-full max-w-sm space-y-4 overflow-hidden rounded-lg px-4 py-8 shadow-2xl bg-foreground">
+                <Header />
+                <div className="flex h-full flex-col justify-center gap-10 pt-5">
+                  <div className="mx-auto w-full max-w-sm">
+                    <Loader type="small" />
+                    <Form method="POST" {...form.props}>
+                      <Field
+                        label="You send"
+                        value={debitAmount}
+                        variant="info"
+                      ></Field>
+                      <Field
+                        label={`${receiverName} gets`}
+                        value={receiveAmount}
+                        variant="info"
+                      ></Field>
+                      <div className="flex justify-center items-center gap-3">
+                        <Button
+                          aria-label="confirm-pay"
+                          type="submit"
+                          value="confirm"
+                          name="intent"
+                        >
+                          Confirm payment
+                        </Button>
+                        <Button
+                          aria-label="cancel-pay"
+                          type="submit"
+                          variant="destructive"
+                          value="cancel"
+                          name="intent"
+                          onClick={() => setOpen(false)}
+                        >
+                          Cancel payment
+                        </Button>
+                      </div>
+                    </Form>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

app/components/ui/form/form.tsx

@@ -42,7 +42,7 @@ export const Field = ({
 
   return (
     <div className={cx(className, "flex flex-col gap-3")}>
-      <Label className="pl-2" htmlFor={id}>
+      <Label className="pl-2 font-medium" htmlFor={id}>
         {label}
       </Label>
       <Input

app/components/ui/form/input.tsx

@@ -9,7 +9,7 @@ const inputVariants = cva(
       variant: {
         default:
           "h-10 px-3 py-2 border border-input bg-background ring-offset-background disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        info: "h-4 bg-foreground disabled cursor-default focus:outline-none pl-2",
+        info: "h-4 bg-foreground disabled cursor-default focus:outline-none pl-2 font-semibold",
         highlight:
           "bg-green-2 h-10 px-3 disabled cursor-default focus:outline-none",
       },

app/lib/open-payments.server.ts

@@ -8,7 +8,6 @@ import {
 } from "@interledger/open-payments";
 import { createId } from "@paralleldrive/cuid2";
 import { randomUUID } from "crypto";
-import { formatAmount } from "~/utils/helpers";
 
 async function createClient() {
   return await createAuthenticatedClient({
@@ -289,10 +288,7 @@ export async function finishPayment(
   payment: PendingGrant,
   quote: Quote,
   walletAddress: WalletAddress,
-  interactRef: string,
-  accessToken: string,
-  receiver: string,
-  isRequestPayment?: boolean
+  interactRef: string
 ): Promise<{ url: string; accessToken: string }> {
   const opClient = await createClient();
 
@@ -326,18 +322,6 @@ export async function finishPayment(
       throw new Error("Could not create outgoing payment.");
     });
 
-  if (!isRequestPayment) {
-    // complete incoming payment created without receive amount
-    await opClient.incomingPayment
-      .complete({
-        url: receiver,
-        accessToken: accessToken,
-      })
-      .catch(() => {
-        throw new Error("Could not complete incoming payment.");
-      });
-  }
-
   return {
     url: outgoingPayment.id,
     accessToken: continuation.access_token.value,
@@ -356,10 +340,13 @@ export type PaymentResultType = {
 
 export async function checkOutgoingPayment(
   url: string,
-  accessToken: string
+  accessToken: string,
+  accessTokenIncomingPayment: string,
+  receiver: string,
+  isRequestPayment?: boolean
 ): Promise<PaymentResultType> {
   const opClient = await createClient();
-  await timeout(7000);
+  await timeout(3000);
 
   // get outgoing payment, to check if there was enough balance
   const checkOutgoingPaymentResponse = await opClient.outgoingPayment
@@ -369,22 +356,15 @@ export async function checkOutgoingPayment(
     })
     .then((op) => {
       let paymentResult: PaymentResultType;
-      if (Number(op.sentAmount.value) >= Number(op.receiveAmount.value)) {
+      if (Number(op.sentAmount.value) > 0) {
         paymentResult = {
           message: "Payment successful",
           color: "green",
           error: false,
         };
-      } else if (Number(op.sentAmount.value) === 0) {
-        paymentResult = {
-          message: "Payment failed. Check your balance and try again.",
-          color: "red",
-          error: true,
-        };
       } else {
-        const amountSent = formatAmount(op.sentAmount);
         paymentResult = {
-          message: `Payment failed. Only ${amountSent.amountWithCurrency} was sent. Check your balance and try again.`,
+          message: "Payment failed. Check your balance and try again.",
           color: "red",
           error: true,
         };
@@ -393,6 +373,20 @@ export async function checkOutgoingPayment(
       return paymentResult;
     });
 
+  if (!checkOutgoingPaymentResponse.error) {
+    if (!isRequestPayment) {
+      // complete incoming payment created without receive amount
+      await opClient.incomingPayment
+        .complete({
+          url: receiver,
+          accessToken: accessTokenIncomingPayment,
+        })
+        .catch(() => {
+          throw new Error("Could not complete incoming payment.");
+        });
+    }
+  }
+
   return checkOutgoingPaymentResponse;
 }
 
@@ -430,7 +424,6 @@ export async function getWalletAddress(
   opClient?: AuthenticatedClient
 ) {
   opClient = opClient ? opClient : await createClient();
-
   const walletAddress = await opClient.walletAddress
     .get({
       url: url,

app/routes/finish.tsx

@@ -61,15 +61,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
       grant,
       quote,
       walletAddressInfo.walletAddress,
-      interactRef,
-      quote.incomingPaymentGrantToken,
-      quote.receiver,
-      isRequestPayment
+      interactRef
     );
 
     const checkOutgoingPaymentPromise = checkOutgoingPayment(
       finishPaymentResponse.url,
-      finishPaymentResponse.accessToken
+      finishPaymentResponse.accessToken,
+      quote.incomingPaymentGrantToken,
+      quote.receiver,
+      isRequestPayment
     );
 
     return defer({ checkOutgoingPayment: checkOutgoingPaymentPromise });
@@ -95,7 +95,7 @@ export default function Finish() {
     <>
       <Header />
       <div className="flex justify-center items-center flex-col h-full px-5 gap-8">
-        <Loader />
+        <Loader type="large" />
         <Suspense fallback={<Fallback />}>
           <Await
             resolve={data.checkOutgoingPayment}