thirdweb 5.103.1 → 5.104.0-nightly-6be945936195e6ba41dbdd3a90a28f097e81dbee-20250620000408

package/src/exports/chains.ts

@@ -83,3 +83,5 @@ export { soneiumMinato } from "../chains/chain-definitions/soneium-minato.js";
 export { treasure } from "../chains/chain-definitions/treasure.js";
 export { treasureTopaz } from "../chains/chain-definitions/treasureTopaz.js";
 export { monadTestnet } from "../chains/chain-definitions/monad-testnet.js";
+export { berachain } from "../chains/chain-definitions/berachain.js";
+export { berachainBepolia } from "../chains/chain-definitions/berachain-bepolia.js";

package/src/insight/get-tokens.ts

@@ -51,7 +51,7 @@ export async function getOwnedTokens(args: {
 
   const defaultQueryOptions: GetV1TokensData["query"] = {
     owner_address: ownerAddress,
-    chain_id: chains.map((chain) => chain.id),
+    chain_id: chains.length > 0 ? chains.map((chain) => chain.id) : [1],
     include_native: "true",
     include_spam: "false",
     metadata: "true",

package/src/react/web/ui/Bridge/BuyWidget.tsx

@@ -12,7 +12,6 @@ import {
   isAddress,
 } from "../../../../utils/address.js";
 import { stringify } from "../../../../utils/json.js";
-import { toTokens } from "../../../../utils/units.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -112,9 +111,9 @@ export type BuyWidgetProps = {
   tokenAddress?: Address;
 
   /**
-   * The amount to buy **(in wei)**.
+   * The amount to buy **(as a decimal string)**, e.g. "1.5" for 1.5 tokens.
    */
-  amount: bigint;
+  amount: string;
 
   /**
    * The title to display in the widget.
@@ -178,12 +177,11 @@ type UIOptionsResult =
  *
  * ```tsx
  * import { ethereum } from "thirdweb/chains";
- * import { toWei } from "thirdweb";
  *
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  * />
  * ```
  *
@@ -195,7 +193,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("100")}
+ *   amount="100"
  *   tokenAddress="0xA0b86a33E6417E4df2057B2d3C6d9F7cc11b0a70"
  * />
  * ```
@@ -208,7 +206,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   theme={darkTheme({
  *     colors: {
  *       modalBg: "red",
@@ -227,7 +225,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   title="Buy ETH"
  * />
  * ```
@@ -240,7 +238,7 @@ type UIOptionsResult =
  * <BuyWidget
  *   client={client}
  *   chain={ethereum}
- *   amount={toWei("0.1")}
+ *   amount="0.1"
  *   connectOptions={{
  *     connectModal: {
  *       size: 'compact',
@@ -279,7 +277,7 @@ export function BuyWidget(props: BuyWidgetProps) {
           data: {
             mode: "fund_wallet",
             destinationToken: ETH,
-            initialAmount: toTokens(props.amount, ETH.decimals),
+            initialAmount: props.amount,
           },
         };
       }
@@ -303,7 +301,7 @@ export function BuyWidget(props: BuyWidgetProps) {
         data: {
           mode: "fund_wallet",
           destinationToken: token,
-          initialAmount: toTokens(props.amount, token.decimals),
+          initialAmount: props.amount,
           metadata: {
             title: props.title,
           },

package/src/react/web/ui/Bridge/CheckoutWidget.tsx

@@ -8,7 +8,6 @@ import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { getToken } from "../../../../pay/convert/get-token.js";
 import { type Address, checksumAddress } from "../../../../utils/address.js";
 import { stringify } from "../../../../utils/json.js";
-import { toTokens } from "../../../../utils/units.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -108,9 +107,9 @@ export type CheckoutWidgetProps = {
   tokenAddress?: Address;
 
   /**
-   * The price of the item **(in wei)**.
+   * The price of the item **(as a decimal string)**, e.g. "1.5" for 1.5 tokens.
    */
-  amount: bigint;
+  amount: string;
 
   /**
    * The wallet address or ENS funds will be paid to.
@@ -282,7 +281,7 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
           },
           paymentInfo: {
             token,
-            amount: toTokens(props.amount, token.decimals),
+            amount: props.amount,
             sellerAddress: props.seller,
             feePayer: props.feePayer === "seller" ? "receiver" : "sender", // User is sender, seller is receiver
           },

package/src/react/web/ui/Bridge/TransactionWidget.tsx

@@ -5,12 +5,14 @@ import type { Token } from "../../../../bridge/index.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import { getToken } from "../../../../pay/convert/get-token.js";
 import {
   type PreparedTransaction,
   prepareTransaction,
 } from "../../../../transaction/prepare-transaction.js";
 import { type Address, checksumAddress } from "../../../../utils/address.js";
 import { stringify } from "../../../../utils/json.js";
+import { toUnits } from "../../../../utils/units.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -105,9 +107,9 @@ export type TransactionWidgetProps = {
   tokenAddress?: Address;
 
   /**
-   * The price of the item **(in wei)**.
+   * The price of the item **(as a decimal string)**, e.g. "1.5" for 1.5 tokens.
    */
-  amount?: bigint;
+  amount?: string;
 
   /**
    * A title for the transaction.
@@ -196,8 +198,8 @@ type UIOptionsResult =
  *     to: "0x...",
  *     chain: ethereum,
  *     client: client,
- *     value: toUnits("0.001", 18),
  *   })}
+ *   amount="0.1"
  *  />
  * ```
  *
@@ -276,16 +278,26 @@ export function TransactionWidget(props: TransactionWidgetProps) {
   const bridgeDataQuery = useQuery({
     queryKey: ["bridgeData", stringify(props)],
     queryFn: async (): Promise<UIOptionsResult> => {
+      let erc20Value = props.transaction.erc20Value;
+
+      if (props.amount) {
+        // Get token decimals for conversion
+        const tokenAddress = props.tokenAddress || NATIVE_TOKEN_ADDRESS;
+        const token = await getToken(
+          props.client,
+          checksumAddress(tokenAddress),
+          props.transaction.chain.id,
+        );
+
+        erc20Value = {
+          amountWei: toUnits(props.amount, token.decimals),
+          tokenAddress: checksumAddress(tokenAddress),
+        };
+      }
+
       const transaction = prepareTransaction({
         ...props.transaction,
-        erc20Value: props.amount
-          ? {
-              amountWei: props.amount,
-              tokenAddress: checksumAddress(
-                props.tokenAddress || NATIVE_TOKEN_ADDRESS,
-              ),
-            }
-          : props.transaction.erc20Value,
+        erc20Value,
       });
 
       return {

package/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx

@@ -33,6 +33,7 @@ interface TransactionInfo {
   label: string;
   chain: ChainMetadata;
   destinationToken?: Token;
+  destinationChain?: ChainMetadata;
   originToken?: Token;
   originChain?: ChainMetadata;
   amountPaid?: string;
@@ -102,6 +103,7 @@ function useTransactionInfo(
               originToken: status.originToken,
               originChain,
               destinationToken: status.destinationToken,
+              destinationChain,
               amountReceived: `${formatTokenAmount(
                 status.destinationAmount,
                 status.destinationToken.decimals,
@@ -228,7 +230,7 @@ function CompletedStepDetailCard({
             Origin Chain
           </Text>
           <Text size="sm" color="primaryText">
-            {shorterChainName(txInfo.chain.name)}
+            {shorterChainName(txInfo.originChain.name)}
           </Text>
         </Container>
       )}

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

@@ -14,6 +14,11 @@ import {
   mergeRefs,
 } from "./MediaRenderer.js";
 
+const three3dModelLink =
+  "https://i2.seadn.io/matic/0x2953399124f0cbb46d2cbacd8a89cf0599974963/bd1801876c5cf1302484e225c72959/49bd1801876c5cf1302484e225c72959.glb";
+const imageLink =
+  "https://i.seadn.io/gae/r_b9GB0iYA39ichUlKdFLeG4UliK7YXi9SsM0Xdvm6pNDChYbN5E7Fxop1MdJCbmNvSlbER73YiA9WY1JbhEfkuIktoHfN9UlEZy4A?auto=format&dpr=1&w=1000";
+
 describe("MediaRenderer", () => {
   it("should render nothing if no src provided", () => {
     render(<MediaRenderer client={TEST_CLIENT} />);
@@ -27,14 +32,9 @@ describe("MediaRenderer", () => {
     }, 1000);
   });
 
-  it("should render a plain image", () => {
-    render(
-      <MediaRenderer
-        client={TEST_CLIENT}
-        src="https://i.seadn.io/gae/r_b9GB0iYA39ichUlKdFLeG4UliK7YXi9SsM0Xdvm6pNDChYbN5E7Fxop1MdJCbmNvSlbER73YiA9WY1JbhEfkuIktoHfN9UlEZy4A?auto=format&dpr=1&w=1000"
-      />,
-    );
-    waitFor(() => {
+  it("should render a plain image", async () => {
+    render(<MediaRenderer client={TEST_CLIENT} src={imageLink} />);
+    await waitFor(() => {
       expect(screen.getByRole("img")).toBeInTheDocument();
     });
   });
@@ -222,4 +222,17 @@ describe("MediaRenderer", () => {
       expect(iframe).toHaveAttribute("src", "https://example.com/video");
     });
   });
+
+  it("should render poster image for 3d models", async () => {
+    render(
+      <MediaRenderer
+        client={TEST_CLIENT}
+        src={three3dModelLink}
+        poster={imageLink}
+      />,
+    );
+    await waitFor(() => {
+      expect(screen.getByRole("img")).toBeInTheDocument();
+    });
+  });
 });

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

@@ -111,6 +111,21 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
         console.error(
           "Encountered an unsupported media type. 3D model support was removed in v5.92.0. To add a 3D model to your app, use @google/model-viewer and use the ModelViewer component.",
         );
+
+        // show poster
+        if (possiblePosterSrc.mimeType?.startsWith("image/")) {
+          return (
+            <ImageRenderer
+              style={mergedStyle}
+              src={possiblePosterSrc.url}
+              alt={alt}
+              ref={ref as unknown as React.ForwardedRef<HTMLImageElement>}
+              className={className}
+              height={height}
+              width={width}
+            />
+          );
+        }
       }
 
       //  video

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.103.1";
+export const version = "5.104.0-nightly-6be945936195e6ba41dbdd3a90a28f097e81dbee-20250620000408";