fix: pass client-side client from server

Author: gregfromstl

apps/dashboard/src/app/checkout/components/client/CheckoutLinkForm.client.tsx

@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { ChevronDownIcon, CreditCardIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -20,9 +19,9 @@ import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { resolveScheme, upload } from "thirdweb/storage";
 import { FileInput } from "../../../../components/shared/FileInput";
 import { resolveEns } from "../../../../lib/ens";
+import { cn } from "@/lib/utils";
 
-export function CheckoutLinkForm() {
-  const client = useThirdwebClient();
+export function CheckoutLinkForm({ client }: { client: ThirdwebClient }) {
   const [chainId, setChainId] = useState<number>();
   const [recipientAddress, setRecipientAddress] = useState("");
   const [tokenAddressWithChain, setTokenAddressWithChain] = useState("");
@@ -258,25 +257,27 @@ export function CheckoutLinkForm() {
             <Button
               type="button"
               variant="ghost"
-              className="flex w-full items-center justify-between px-0 text-muted-foreground hover:bg-transparent"
+              className={cn(
+                "flex w-full items-center justify-between px-0 text-muted-foreground hover:bg-transparent",
+              )}
               onClick={() => setShowAdvanced(!showAdvanced)}
             >
               <span>Advanced Options</span>
               <ChevronDownIcon
-                className={`size-4 transition-transform duration-200 ease-in-out ${
-                  showAdvanced ? "rotate-180" : ""
-                }`}
+                className={`size-4 transition-transform duration-200 ease-in-out ${showAdvanced ? "rotate-180" : ""
+                  }`}
               />
             </Button>
 
             <div
-              className={`grid transition-all duration-200 ease-in-out ${
+              className={cn(
+                "grid transition-all duration-200 ease-in-out",
                 showAdvanced
                   ? "grid-rows-[1fr] opacity-100"
-                  : "grid-rows-[0fr] opacity-0"
-              }`}
+                  : "grid-rows-[0fr] opacity-0",
+              )}
             >
-              <div className="overflow-hidden">
+              <div className={cn(showAdvanced ? "" : "overflow-hidden")}>
                 <div className="space-y-6 pt-2">
                   <div className="space-y-2">
                     <Label htmlFor="title" className="font-medium text-sm">
@@ -295,7 +296,7 @@ export function CheckoutLinkForm() {
                     <Label htmlFor="image" className="font-medium text-sm">
                       Image
                     </Label>
-                    <div className="w-full px-1 pb-1">
+                    <div className="w-full">
                       <FileInput
                         accept={{ "image/*": [] }}
                         setValue={handleImageUpload}

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

@@ -40,7 +40,12 @@ export default async function RoutesPage({
       return loginRedirect(`/checkout?${searchParams.toString()}`);
     }
 
-    return <CheckoutLinkForm />;
+    const client = getClientThirdwebClient({
+      jwt: authToken,
+      teamId: undefined,
+    });
+
+    return <CheckoutLinkForm client={client} />;
   }
 
   // Validate query parameters