crepe: enable optimism, add generator page, fix build

apps/crepe/src/app/checkout/components/connect-wallet.tsx

@@ -8,8 +8,8 @@ import { ConnectMutate } from "wagmi/query";
 
 import RightPane from "./right-pane";
 import { Button } from "../../components/button";
-import { usePaymentInfo } from "../payment-info-context";
-import { trpc } from "../trpc";
+import { usePaymentInfo } from "../../payment-info-context";
+import { trpc } from "../../trpc";
 
 interface PaymentOption {
   name: string;

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

@@ -1,8 +1,8 @@
 import { CrepeOrder, getChainExplorerTxUrl } from "@daimo/common";
 import { useEffect, useState } from "react";
 
-import { usePaymentInfo } from "../payment-info-context";
-import { trpc } from "../trpc";
+import { usePaymentInfo } from "../../payment-info-context";
+import { trpc } from "../../trpc";
 
 export default function PaymentConfirmation() {
   const { transferInfo, merchantToken } = usePaymentInfo();

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { getAddressContraction } from "@daimo/common";
 import {
   erc20Abi,
   ForeignToken,
@@ -18,16 +19,15 @@ import {
   useWriteContract,
 } from "wagmi";
 
-import { Button } from "../../components/button";
-import { chainToLogo } from "../constants";
-import { usePaymentInfo } from "../payment-info-context";
-import { trpc } from "../trpc";
 import { Notification } from "./notification";
 import RightPane from "./right-pane";
+import { trpc } from "../../trpc";
+import { chainToLogo } from "../constants";
 import { SearchPaletteItem, SearchPaletteWithGroups } from "./search-palette";
 import { PaymentMethodsSkeleton } from "./skeletons";
-
-import { formatAmountDecimals, truncateAddress } from "@/src/utils/format";
+import { Button } from "../../components/button";
+import { usePaymentInfo } from "../../payment-info-context";
+import { formatAmountDecimals } from "../../utils/format";
 
 interface TokenBalance {
   token: ForeignToken;
@@ -118,7 +118,7 @@ export default function PaymentMethods() {
       <section aria-labelledby="payment-methods" className="w-5/6 mx-auto">
         {(ensName || address) && (
           <h2 className="text-lg font-medium text-gray-900 mb-8">
-            Pay with {ensName || truncateAddress(address!)}
+            Pay with {ensName || getAddressContraction(address!, 3)}
           </h2>
         )}
         <PaymentOptionList

apps/crepe/src/app/checkout/components/summary-pane.tsx

@@ -3,23 +3,23 @@ import clsx from "clsx";
 import Image from "next/image";
 import { arbitrum, base, optimism, polygon } from "viem/chains";
 
-import { formatAmountDecimals } from "../../../utils/format";
 import { GradientLight } from "../../components/gradient";
+import { PaymentItem } from "../../payment-info-context";
+import { formatAmountDecimals } from "../../utils/format";
 import { chainToLogo } from "../constants";
-import { PaymentItem, usePaymentInfo } from "../payment-info-context";
 
 export default function SummaryPane({
   onBackClick,
+  products,
+  merchantToken,
+  amount,
 }: {
   onBackClick?: () => void;
+  products: PaymentItem[];
+  merchantToken: ForeignToken;
+  amount: bigint;
 }) {
-  const { item, merchantToken, onchainOrder } = usePaymentInfo();
-  const products = [item];
-
-  const formattedPrice = formatAmountDecimals(
-    BigInt(onchainOrder.destinationFinalCallTokenAmount),
-    merchantToken
-  );
+  const formattedPrice = formatAmountDecimals(amount, merchantToken);
 
   return (
     <section
@@ -36,7 +36,7 @@ export default function SummaryPane({
         <BackButton onClick={onBackClick} />
         <dl className="mt-10">
           <dt className="text-lg font-medium text-gray-600">
-            Pay {item.company}
+            Pay {products[0].company}
           </dt>
           <dd className="mt-1 text-4xl font-semibold tracking-tight text-gray-900 mb-10">
             {formattedPrice} {merchantToken.symbol}

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

@@ -4,15 +4,15 @@ import { headers } from "next/headers";
 import { cookieToInitialState } from "wagmi";
 
 import "../../styles/tailwind.css";
-import { Providers } from "./providers";
-import { config } from "./wagmi-config";
+import { Providers } from "../providers";
+import { config } from "../wagmi-config";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: {
     template: "%s - Crepe",
-    default: "Checkout with Crepe",
+    default: "Checkout",
   },
 };
 

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

@@ -3,24 +3,30 @@
 import { useAccount, useDisconnect } from "wagmi";
 
 import { GradientLight } from "../components/gradient";
+import { usePaymentInfo } from "../payment-info-context";
 import ConnectWallet from "./components/connect-wallet";
 import PaymentConfirmation from "./components/payment-confirmation";
 import PaymentMethods from "./components/payment-method";
 import SummaryPane from "./components/summary-pane";
-import { usePaymentInfo } from "./payment-info-context";
 
 function ConnectWalletPage() {
+  const { item, merchantToken, onchainOrder } = usePaymentInfo();
   return (
     <>
       <h1 className="sr-only">Connect Wallet</h1>
-      <SummaryPane />
+      <SummaryPane
+        products={[item]}
+        merchantToken={merchantToken}
+        amount={BigInt(onchainOrder.destinationFinalCallTokenAmount)}
+      />
       <ConnectWallet />
     </>
   );
 }
 
 function PaymentMethodPage() {
   const { disconnect } = useDisconnect();
+  const { item, merchantToken, onchainOrder } = usePaymentInfo();
 
   const handleBackClick = () => {
     disconnect();
@@ -29,17 +35,27 @@ function PaymentMethodPage() {
   return (
     <>
       <h1 className="sr-only">Payment Method</h1>
-      <SummaryPane onBackClick={handleBackClick} />
+      <SummaryPane
+        products={[item]}
+        merchantToken={merchantToken}
+        amount={BigInt(onchainOrder.destinationFinalCallTokenAmount)}
+        onBackClick={handleBackClick}
+      />
       <PaymentMethods />
     </>
   );
 }
 
 function PaymentConfirmationPage() {
+  const { item, merchantToken, onchainOrder } = usePaymentInfo();
   return (
     <>
       <h1 className="sr-only">Payment Confirmation</h1>
-      <SummaryPane />
+      <SummaryPane
+        products={[item]}
+        merchantToken={merchantToken}
+        amount={BigInt(onchainOrder.destinationFinalCallTokenAmount)}
+      />
       <PaymentConfirmation />
     </>
   );

apps/crepe/src/app/generator/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "../../styles/tailwind.css";
+
+export const metadata: Metadata = {
+  title: {
+    template: "%s - Crepe",
+    default: "Generate",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`text-gray-950 antialiased`}>{children}</body>
+    </html>
+  );
+}