show confirmation page if order already completed

apps/crepe/src/app/checkout/components/payment-confirmation.tsx

@@ -7,7 +7,7 @@ import { usePaymentInfo } from "../../payment-info-context";
 import { trpc } from "../../trpc";
 
 export default function PaymentConfirmation() {
-  const { transferInfo, merchantToken } = usePaymentInfo();
+  const { transferInfo, merchantToken, crepeOrder } = usePaymentInfo();
 
   const steps: [
     string,
@@ -24,8 +24,13 @@ export default function PaymentConfirmation() {
   ];
 
   const [madePayment, setMadePayment] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [order, setOrder] = useState<CrepeOrder | null>(null);
+  // If the order is already completed, jump to the last step
+  const orderCompleted =
+    crepeOrder != null && crepeOrder.destFastFinishTxHash != null;
+  const [currentStep, setCurrentStep] = useState(
+    orderCompleted ? steps.length - 1 : 0
+  );
+  const [order, setOrder] = useState<CrepeOrder | null>(crepeOrder);
 
   // Poll madePayment status every few seconds
   useEffect(() => {

apps/crepe/src/app/checkout/page.tsx

@@ -63,7 +63,7 @@ function PaymentConfirmationPage() {
 
 export default function Home() {
   const { isConnected } = useAccount();
-  const { transferInfo } = usePaymentInfo();
+  const { transferInfo, crepeOrder } = usePaymentInfo();
 
   return (
     <div className="relative">
@@ -74,7 +74,9 @@ export default function Home() {
       />
 
       <main className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8 xl:gap-x-48">
-        {!isConnected ? (
+        {crepeOrder != null ? (
+          <PaymentConfirmationPage />
+        ) : !isConnected ? (
           <ConnectWalletPage />
         ) : transferInfo == null ? (
           <PaymentMethodPage />

apps/crepe/src/app/payment-info-context.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { CrepeOrder } from "@daimo/common";
 import { ForeignToken } from "@daimo/contract";
 import { useSearchParams } from "next/navigation";
 import {
@@ -34,6 +35,7 @@ export interface PaymentInfo {
   item: PaymentItem;
   merchantToken: ForeignToken;
   paymentAddress: Address;
+  crepeOrder: CrepeOrder | null;
   transferInfo: TransferInfo | null;
   updateTransferInfo: (newTransferInfo: TransferInfo) => void;
 }
@@ -62,6 +64,7 @@ export function PaymentInfoProvider({ children }: { children: ReactNode }) {
       let item: PaymentItem | null = null;
       let merchantToken: ForeignToken | undefined = undefined;
       let paymentAddress: Address | undefined = undefined;
+      let crepeOrder: CrepeOrder | null = null;
 
       try {
         const decodedOrder = atob(orderBase64);
@@ -98,6 +101,16 @@ export function PaymentInfoProvider({ children }: { children: ReactNode }) {
         return;
       }
 
+      try {
+        if (!paymentAddress) return;
+        crepeOrder = await trpc.getOrder.query({
+          handoffAddr: paymentAddress,
+        });
+      } catch (error) {
+        console.error("Error fetching order:", error);
+        return;
+      }
+
       if (!onchainOrder || !item || !merchantToken || !paymentAddress) return;
 
       console.log(
@@ -111,6 +124,7 @@ export function PaymentInfoProvider({ children }: { children: ReactNode }) {
         item,
         merchantToken,
         paymentAddress,
+        crepeOrder,
         transferInfo: null,
         updateTransferInfo,
       });

packages/crepe-api/src/server/router.ts

@@ -84,6 +84,16 @@ export function createRouter(
         return tokenRegistry.getToken(addr, chainId);
       }),
 
+    /**
+     * Get an order by handoff address
+     */
+    getOrder: publicProcedure
+      .input(z.object({ handoffAddr: zAddress }))
+      .query(async (opts) => {
+        const { handoffAddr } = opts.input;
+        return db.getOrder(handoffAddr);
+      }),
+
     /**
      * Get payment address given sale params
      */