thirdweb 5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330 → 5.32.3

package/src/react/web/ui/MediaRenderer/MediaRenderer.tsx

@@ -60,16 +60,14 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
         height = "300px",
         style,
         mimeType,
-        ...restProps
+        client,
+        controls,
+        className,
       },
       ref,
     ) {
-      const client = restProps.client;
-
       const mergedStyle: React.CSSProperties = {
         objectFit: "contain",
-        width,
-        height,
         ...style,
       };
 
@@ -99,8 +97,10 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
               style={mergedStyle}
               src={mediaInfo.url}
               poster={possiblePosterSrc.url}
+              ref={ref as unknown as React.ForwardedRef<HTMLIFrameElement>}
               requireInteraction={requireInteraction}
-              {...restProps}
+              className={className}
+              alt={alt}
             />
           );
         }
@@ -111,13 +111,12 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
             <Suspense
               fallback={
                 poster ? (
-                  // biome-ignore lint/a11y/useAltText: alt is there
                   <img
                     style={mergedStyle}
                     src={poster}
                     alt={alt}
                     ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
-                    {...restProps}
+                    className={className}
                   />
                 ) : null
               }
@@ -127,7 +126,7 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
                 src={mediaInfo.url || ""}
                 poster={poster}
                 alt={alt}
-                {...restProps}
+                className={className}
               />
             </Suspense>
           );
@@ -139,9 +138,11 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
             <VideoPlayer
               style={mergedStyle}
               src={mediaInfo.url}
+              ref={ref as unknown as React.ForwardedRef<HTMLVideoElement>}
               poster={possiblePosterSrc.url}
               requireInteraction={requireInteraction}
-              {...restProps}
+              className={className}
+              controls={controls}
             />
           );
         }
@@ -153,8 +154,12 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
               style={mergedStyle}
               src={mediaInfo.url}
               poster={possiblePosterSrc.url}
-              requireInteraction={requireInteraction}
-              {...restProps}
+              alt={alt}
+              ref={ref as unknown as React.ForwardedRef<HTMLAudioElement>}
+              className={className}
+              height={height}
+              width={width}
+              controls={controls}
             />
           );
         }
@@ -167,7 +172,9 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
               src={mediaInfo.url}
               alt={alt}
               ref={ref as unknown as React.ForwardedRef<HTMLImageElement>}
-              {...restProps}
+              className={className}
+              height={height}
+              width={width}
             />
           );
         }
@@ -180,7 +187,7 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
           src={mediaInfo.url}
           alt={alt}
           ref={ref as unknown as React.Ref<HTMLAnchorElement>}
-          {...restProps}
+          className={className}
         />
       );
     },
@@ -242,41 +249,60 @@ const PlayButton: React.FC<PlayButtonProps> = ({ onClick, isPlaying }) => {
 };
 
 const ImageRenderer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLImageElement, MediaRendererProps>(
-    function Image_Renderer(props, ref) {
-      const { style, src, alt, ...restProps } = props;
-      const [error, setError] = useState(false);
-
-      if (error) {
-        return (
-          <LinkPlayer
-            style={style}
-            src={src}
-            alt={alt}
-            ref={ref as unknown as React.Ref<HTMLAnchorElement>}
-            {...restProps}
-          />
-        );
-      }
+  React.forwardRef<
+    HTMLImageElement,
+    Pick<
+      MediaRendererProps,
+      "src" | "style" | "alt" | "className" | "height" | "width"
+    >
+  >(function Image_Renderer(props, ref) {
+    const { style, src, alt, className, height, width } = props;
+    const [error, setError] = useState(false);
 
+    if (error) {
       return (
-        // biome-ignore lint/a11y/useAltText: we do set the alt text
-        <img
+        <LinkPlayer
           style={style}
-          src={src ?? undefined}
+          src={src}
           alt={alt}
-          ref={ref}
-          {...restProps}
-          onError={() => {
-            setError(true);
-          }}
+          ref={ref as unknown as React.Ref<HTMLAnchorElement>}
+          className={className}
         />
       );
-    },
-  ))();
+    }
+
+    return (
+      <img
+        style={style}
+        src={src ?? undefined}
+        alt={alt}
+        ref={ref}
+        className={className}
+        height={height}
+        width={width}
+        onError={() => {
+          setError(true);
+        }}
+      />
+    );
+  }))();
 
 const VideoPlayer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLVideoElement, MediaRendererProps>(function Video_Player(
+  React.forwardRef<
+    HTMLVideoElement,
+    Pick<
+      MediaRendererProps,
+      | "alt"
+      | "src"
+      | "poster"
+      | "requireInteraction"
+      | "style"
+      | "width"
+      | "height"
+      | "controls"
+      | "className"
+    >
+  >(function Video_Player(
     {
       src,
       alt,
@@ -286,7 +312,7 @@ const VideoPlayer = /* @__PURE__ */ (() =>
       width,
       height,
       controls,
-      ...restProps
+      className,
     },
     ref,
   ) {
@@ -321,13 +347,13 @@ const VideoPlayer = /* @__PURE__ */ (() =>
           src={src}
           alt={alt}
           ref={ref as unknown as React.Ref<HTMLAnchorElement>}
-          {...restProps}
+          className={className}
         />
       );
     }
 
     return (
-      <div style={{ position: "relative", ...style }} {...restProps}>
+      <div style={{ position: "relative", ...style }} className={className}>
         <video
           ref={mergeRefs([videoRef, ref])}
           src={src ?? undefined}
@@ -389,18 +415,21 @@ const VideoPlayer = /* @__PURE__ */ (() =>
   }))();
 
 const AudioPlayer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLAudioElement, MediaRendererProps>(function Audio_Player(
-    {
-      src,
-      alt,
-      poster,
-      style,
-      height,
-      width,
-
-      requireInteraction,
-      ...restProps
-    },
+  React.forwardRef<
+    HTMLAudioElement,
+    Pick<
+      MediaRendererProps,
+      | "src"
+      | "alt"
+      | "poster"
+      | "style"
+      | "height"
+      | "width"
+      | "className"
+      | "controls"
+    >
+  >(function Audio_Player(
+    { src, alt, poster, style, height, width, className, controls },
     ref,
   ) {
     const audioRef = useRef<HTMLAudioElement>(null);
@@ -426,13 +455,13 @@ const AudioPlayer = /* @__PURE__ */ (() =>
           src={src}
           alt={alt}
           ref={ref as unknown as React.Ref<HTMLAnchorElement>}
-          {...restProps}
+          className={className}
         />
       );
     }
 
     return (
-      <div style={{ position: "relative", ...style }} {...restProps}>
+      <div style={{ position: "relative", ...style }} className={className}>
         {poster ? (
           <img
             height={height}
@@ -474,6 +503,7 @@ const AudioPlayer = /* @__PURE__ */ (() =>
           src={src ?? undefined}
           loop
           playsInline
+          controls={controls}
           muted={muted}
           preload="none"
           controlsList="nodownload"
@@ -493,69 +523,79 @@ const AudioPlayer = /* @__PURE__ */ (() =>
   }))();
 
 const IframePlayer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLIFrameElement, MediaRendererProps>(
-    function Iframe_Player(
-      { src, alt, poster, requireInteraction, style, ...restProps },
-      ref,
-    ) {
-      const [playing, setPlaying] = useState(!requireInteraction);
+  React.forwardRef<
+    HTMLIFrameElement,
+    Omit<
+      MediaRendererProps,
+      | "client"
+      | "gatewayUrl"
+      | "mimeType"
+      | "controls"
+      | "height"
+      | "width"
+      | "children"
+    >
+  >(function Iframe_Player(
+    { src, alt, poster, requireInteraction, style, ...restProps },
+    ref,
+  ) {
+    const [playing, setPlaying] = useState(!requireInteraction);
 
-      return (
-        <div style={{ position: "relative", ...style }} {...restProps}>
-          <iframe
-            title={alt || "thirdweb iframe player"}
-            src={playing ? src ?? undefined : undefined}
-            ref={ref}
+    return (
+      <div style={{ position: "relative", ...style }} {...restProps}>
+        <iframe
+          title={alt || "thirdweb iframe player"}
+          src={playing ? src ?? undefined : undefined}
+          ref={ref}
+          style={{
+            objectFit: "contain",
+            zIndex: 1,
+            height: "100%",
+            width: "100%",
+            transition: "opacity .5s",
+            opacity: !poster ? 1 : playing ? 1 : 0,
+            border: "none",
+          }}
+          sandbox="allow-scripts"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        />
+        {poster && (
+          <img
+            src={poster}
             style={{
               objectFit: "contain",
-              zIndex: 1,
-              height: "100%",
+              pointerEvents: "none",
+              position: "absolute",
               width: "100%",
+              height: "100%",
+              zIndex: 2,
               transition: "opacity .5s",
-              opacity: !poster ? 1 : playing ? 1 : 0,
-              border: "none",
-            }}
-            sandbox="allow-scripts"
-            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          />
-          {poster && (
-            <img
-              src={poster}
-              style={{
-                objectFit: "contain",
-                pointerEvents: "none",
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                zIndex: 2,
-                transition: "opacity .5s",
-                opacity: playing ? 0 : 1,
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-              }}
-              alt={alt}
-            />
-          )}
-          <PlayButton
-            onClick={() => {
-              setPlaying((prev) => !prev);
+              opacity: playing ? 0 : 1,
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
             }}
-            isPlaying={playing}
+            alt={alt}
           />
-        </div>
-      );
-    },
-  ))();
+        )}
+        <PlayButton
+          onClick={() => {
+            setPlaying((prev) => !prev);
+          }}
+          isPlaying={playing}
+        />
+      </div>
+    );
+  }))();
 
 const LinkPlayer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLAnchorElement, MediaRendererProps>(function Link_Player(
-    { src, alt, style, ...restProps },
-    ref,
-  ) {
+  React.forwardRef<
+    HTMLAnchorElement,
+    Pick<MediaRendererProps, "src" | "alt" | "style" | "className">
+  >(function Link_Player({ src, alt, style, className }, ref) {
     return (
-      <div style={{ position: "relative", ...style }} {...restProps}>
+      <div style={{ position: "relative", ...style }} className={className}>
         <div
           style={{
             width: "100%",

package/src/react/web/ui/MediaRenderer/ModelViewer.tsx

@@ -12,12 +12,12 @@ declare global {
 }
 
 export const ModelViewer = /* @__PURE__ */ (() =>
-  React.forwardRef<HTMLDivElement, MediaRendererProps>(function Model_Viewer(
-    { src, alt, poster, style },
-    ref,
-  ) {
+  React.forwardRef<
+    HTMLDivElement,
+    Pick<MediaRendererProps, "src" | "alt" | "poster" | "style" | "className">
+  >(function Model_Viewer({ src, alt, poster, style, className }, ref) {
     return (
-      <div style={{ ...style }} ref={ref}>
+      <div style={{ ...style }} className={className} ref={ref}>
         {src ? (
           <model-viewer
             src={src}

package/src/react/web/ui/MediaRenderer/types.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 
 /**
@@ -88,8 +87,6 @@ export type MediaRendererProps = {
    */
   requireInteraction?: boolean;
 
-  children?: ReactNode;
-
   /**
    * Provide the [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) of the media if it is known
    */

package/src/react/web/ui/PayEmbed.tsx

@@ -7,20 +7,19 @@ import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
-import { type Theme, radius } from "../../core/design-system/index.js";
+import type { Theme } from "../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
-import { ConnectButton } from "./ConnectWallet/ConnectButton.js";
+import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
 import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
-import { Container } from "./components/basic.js";
 import type { LocaleId } from "./types.js";
 
 /**
@@ -188,18 +187,9 @@ export function PayEmbed(props: PayEmbedProps) {
             onDone={() => {
               // noop
             }}
-            connectButton={
-              <ConnectButton
-                {...props.connectOptions}
-                client={props.client}
-                connectButton={{
-                  style: {
-                    width: "100%",
-                  },
-                }}
-                theme={theme}
-              />
-            }
+            connectOptions={props.connectOptions}
+            buyForTx={undefined}
+            onBack={undefined}
           />
         </div>
         {/* this does not need to persist so we can just show-hide it with JS */}
@@ -222,21 +212,9 @@ export function PayEmbed(props: PayEmbedProps) {
 
   return (
     <CustomThemeProvider theme={theme}>
-      <Container
-        bg="modalBg"
-        style={{
-          borderRadius: radius.lg,
-          minWidth: "360px",
-          borderWidth: "1px",
-          borderStyle: "solid",
-          position: "relative",
-          overflow: "hidden",
-          ...props.style,
-        }}
-        borderColor="borderColor"
-      >
+      <EmbedContainer modalSize="compact">
         <DynamicHeight>{content}</DynamicHeight>
-      </Container>
+      </EmbedContainer>
     </CustomThemeProvider>
   );
 }

package/src/react/web/ui/components/CopyIcon.tsx

@@ -33,7 +33,11 @@ export const CopyIcon: React.FC<{
     >
       <ToolTip tip={props.tip} side={props.side} align={props.align}>
         <div>
-          <Container color={showCheckIcon ? "success" : undefined}>
+          <Container
+            color={showCheckIcon ? "success" : undefined}
+            flex="row"
+            center="both"
+          >
             {showCheckIcon ? <CheckIcon /> : <CopyIconSVG />}
           </Container>
         </div>