feat: new payments page ui

Author: gregfromstl

apps/dashboard/src/app/pay/[id]/page.tsx

@@ -1,10 +1,15 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import { defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
+import { resolveScheme } from "thirdweb/storage";
 import { checksumAddress } from "thirdweb/utils";
 import { getPaymentLink } from "@/api/universal-bridge/links";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
+import { API_SERVER_SECRET } from "@/constants/server-envs";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { PayPageWidget } from "../components/client/PayPageWidget.client";
+import { payAppThirdwebClient } from "../constants";
 
 const title = "thirdweb Pay";
 const description = "Fast, secure, and simple payments.";
@@ -38,13 +43,15 @@ export default async function PayPage({
     chain: defineChain(Number(paymentLink.destinationToken.chainId)),
     client: getClientThirdwebClient(undefined),
   });
-  const {
-    symbol,
-    decimals,
-    name: tokenName,
-  } = await getCurrencyMetadata({
+  const currencyMetadataPromise = getCurrencyMetadata({
     contract: tokenContract,
   });
+
+  const projectMetadataPromise = getProjectMetadata(paymentLink.clientId);
+
+  const [{ symbol, decimals, name: tokenName }, projectMetadata] =
+    await Promise.all([currencyMetadataPromise, projectMetadataPromise]);
+
   const token = {
     address: checksumAddress(paymentLink.destinationToken.address),
     chainId: Number(paymentLink.destinationToken.chainId),
@@ -54,18 +61,62 @@ export default async function PayPage({
   };
 
   return (
-    <PayPageWidget
-      amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
-      chainId={Number(paymentLink.destinationToken.chainId)}
-      clientId={undefined} // Payment links don't need to use the same client ID to be executed
-      image={paymentLink.imageUrl}
-      name={paymentLink.title}
-      paymentLinkId={id}
-      purchaseData={paymentLink.purchaseData}
-      recipientAddress={paymentLink.receiver}
-      redirectUri={redirectUri}
-      theme={theme}
-      token={token}
-    />
+    <div className="flex z-10 flex-col lg:flex-row h-full w-full">
+      <header className="min-w-full lg:min-w-[500px] border-b lg:border-r lg:h-full bg-card flex flex-col gap-4 items-start p-4 lg:p-8">
+        <div className="flex flex-row items-center justify-center gap-4">
+          {projectMetadata.image && (
+            <Image
+              src={resolveScheme({
+                uri: projectMetadata.image,
+                client: payAppThirdwebClient,
+              })}
+              alt={projectMetadata.name}
+              width={25}
+              height={25}
+              className="rounded-full overflow-hidden"
+            />
+          )}
+          <h2 className="text-xl font-bold">{projectMetadata.name}</h2>
+        </div>
+        {projectMetadata.description && (
+          <p className="text-sm text-muted-foreground">
+            {projectMetadata.description}
+          </p>
+        )}
+      </header>
+      <main className="flex justify-center p-12 w-full items-center">
+        <PayPageWidget
+          amount={paymentLink.amount ? BigInt(paymentLink.amount) : undefined}
+          chainId={Number(paymentLink.destinationToken.chainId)}
+          clientId={undefined} // Payment links don't need to use the same client ID to be executed
+          image={paymentLink.imageUrl}
+          name={paymentLink.title}
+          paymentLinkId={id}
+          purchaseData={paymentLink.purchaseData}
+          recipientAddress={paymentLink.receiver}
+          redirectUri={redirectUri}
+          theme={theme}
+          token={token}
+        />
+      </main>
+    </div>
   );
 }
+
+async function getProjectMetadata(clientId: string) {
+  const url = new URL(`${NEXT_PUBLIC_THIRDWEB_API_HOST}/v2/keys/lookup`);
+  url.searchParams.append("clientId", clientId);
+  const response = await fetch(url.toString(), {
+    headers: {
+      "x-service-api-key": API_SERVER_SECRET,
+    },
+  });
+  if (!response.ok) {
+    throw new Error("Failed to fetch project");
+  }
+
+  const { data } = (await response.json()) as {
+    data: { name: string; image: string | null; description: string | null };
+  };
+  return data;
+}

apps/dashboard/src/app/pay/layout.tsx

@@ -30,17 +30,8 @@ export default async function PayLayout({
             disableTransitionOnChange
             enableSystem={false}
           >
-            <div className="relative mx-auto flex h-full w-full flex-col items-center justify-center overflow-x-hidden overflow-y-scroll py-10">
-              <main className="container z-10 flex justify-center">
-                {children}
-              </main>
-
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                alt=""
-                className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
-                src="/assets/login/background.svg"
-              />
+            <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-x-hidden overflow-y-scroll">
+              {children}
             </div>
           </ThemeProvider>
         </PayProviders>

apps/dashboard/src/app/pay/page.tsx

@@ -7,7 +7,7 @@ import { PayPageWidget } from "./components/client/PayPageWidget.client";
 import type { PayParams } from "./components/types";
 import { payAppThirdwebClient } from "./constants";
 
-const title = "thirdweb Pay";
+const title = "thirdweb Payments";
 const description = "Fast, secure, and simple payments.";
 
 export const metadata: Metadata = {