Handle non-URLs for metadata images in payment widgets

Author: joaquim-verges

.changeset/fluffy-cows-swim.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle non urls for metadata images in payment widgets

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -277,7 +277,7 @@ export function LeftSection(props: {
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-4">
             {/* Modal title */}
             <div className="flex flex-col gap-2">
-              <Label htmlFor={modalTitleId}>Title</Label>
+              <Label htmlFor={modalTitleId}>Name</Label>
               <Input
                 className="bg-card"
                 id={modalTitleId}
@@ -318,7 +318,7 @@ export function LeftSection(props: {
 
           {/* Modal description */}
           <div className="flex flex-col gap-2">
-            <Label htmlFor={modalDescriptionId}>Image</Label>
+            <Label htmlFor={modalDescriptionId}>Description</Label>
             <Input
               className="bg-card"
               id={modalDescriptionId}

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx

@@ -58,6 +58,8 @@ export function RightSection(props: {
         amount={props.options.payOptions.buyTokenAmount}
         chain={props.options.payOptions.buyTokenChain}
         client={THIRDWEB_CLIENT}
+        description={props.options.payOptions.description}
+        image={props.options.payOptions.image}
         theme={themeObj}
         title={props.options.payOptions.title}
         tokenAddress={props.options.payOptions.buyTokenAddress}
@@ -71,14 +73,15 @@ export function RightSection(props: {
         amount={props.options.payOptions.buyTokenAmount}
         chain={props.options.payOptions.buyTokenChain}
         client={THIRDWEB_CLIENT}
-        name={props.options.payOptions.title}
+        description={
+          props.options.payOptions.description || "Your Product Description"
+        }
+        image={
+          props.options.payOptions.image ||
+          getDefaultImage(props.options.theme.type)
+        }
+        name={props.options.payOptions.title || "Your Product Name"}
         presetOptions={[1, 2, 3]}
-        purchaseData={{
-          description: "Size L | Ships worldwide.",
-          image:
-            "https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto",
-          name: "Black Hoodie",
-        }}
         seller={props.options.payOptions.sellerAddress}
         theme={themeObj}
         tokenAddress={props.options.payOptions.buyTokenAddress}
@@ -181,3 +184,9 @@ function TabButtons(props: {
     </div>
   );
 }
+
+function getDefaultImage(theme: "dark" | "light") {
+  return theme === "dark"
+    ? "https://placehold.co/600x400/1d1d23/7c7a85?text=Your%20Product%20Here&font=roboto"
+    : "https://placehold.co/600x400/f2eff3/6f6d78?text=Your%20Product%20Here&font=roboto";
+}

apps/playground-web/src/components/pay/direct-payment.tsx

@@ -12,6 +12,7 @@ export function BuyMerchPreview() {
         client={THIRDWEB_CLIENT}
         description="Size L | Ships worldwide."
         feePayer="seller"
+        image="/drip-hoodie.png"
         name="Black Hoodie"
         seller="0xEb0effdFB4dC5b3d5d3aC6ce29F3ED213E95d675"
         theme="light"

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -120,6 +120,16 @@ export type BuyWidgetProps = {
    */
   title?: string;
 
+  /**
+   * The description to display in the widget.
+   */
+  description?: string;
+
+  /**
+   * The image to display in the widget.
+   */
+  image?: string;
+
   /**
    * Preset fiat amounts to display in the UI. Defaults to [5, 10, 20].
    */
@@ -275,6 +285,11 @@ export function BuyWidget(props: BuyWidgetProps) {
           data: {
             destinationToken: ETH,
             initialAmount: props.amount,
+            metadata: {
+              description: props.description,
+              image: props.image,
+              title: props.title,
+            },
             mode: "fund_wallet",
           },
           type: "success",
@@ -300,6 +315,8 @@ export function BuyWidget(props: BuyWidgetProps) {
           destinationToken: token,
           initialAmount: props.amount,
           metadata: {
+            description: props.description,
+            image: props.image,
             title: props.title,
           },
           mode: "fund_wallet",

packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx

@@ -27,10 +27,7 @@ export function WithHeader({
           style={{
             aspectRatio: "16/9",
             backgroundColor: theme.colors.tertiaryBg,
-            backgroundImage: `url(${resolveScheme({
-              client,
-              uri: uiOptions.metadata.image,
-            })})`,
+            backgroundImage: `url(${getUrl(client, uiOptions.metadata.image)})`,
             backgroundPosition: "center",
             backgroundSize: "cover",
             borderRadius: `${radius.md} ${radius.md} 0 0`,
@@ -63,3 +60,13 @@ export function WithHeader({
     </Container>
   );
 }
+
+function getUrl(client: ThirdwebClient, uri: string) {
+  if (!uri.startsWith("ipfs://")) {
+    return uri;
+  }
+  return resolveScheme({
+    client,
+    uri,
+  });
+}