thirdweb 5.105.37 → 5.105.39

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

@@ -22,8 +22,11 @@ import type { ConnectButton_connectModalOptions } from "../../../core/hooks/conn
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "../ConnectWallet/Modal/ConnectEmbed.js";
+import { Container } from "../components/basic.js";
+import { Button } from "../components/buttons.js";
 import { DynamicHeight } from "../components/DynamicHeight.js";
 import { Spinner } from "../components/Spinner.js";
+import { Text } from "../components/text.js";
 import type { LocaleId } from "../types.js";
 import { BridgeOrchestrator, type UIOptions } from "./BridgeOrchestrator.js";
 import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
@@ -421,6 +424,19 @@ export function CheckoutWidget(props: CheckoutWidgetProps) {
     );
   }
 
+  if (bridgeDataQuery.isError) {
+    content = (
+      <Container flex="column" center="both" gap="md" p="md" py="xl">
+        <Text center size="md" weight={600}>
+          Something went wrong.
+        </Text>
+        <Button variant="ghost" onClick={() => bridgeDataQuery.refetch()}>
+          Retry
+        </Button>
+      </Container>
+    );
+  }
+
   return (
     <CustomThemeProvider theme={theme}>
       <EmbedContainer

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

@@ -1,11 +1,8 @@
 "use client";
-import type { Token } from "../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import { defineChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Address } from "../../../../utils/address.js";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
-import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { FiatValue } from "../ConnectWallet/screens/Buy/swap/FiatValue.js";
 import { Container, Line } from "../components/basic.js";
@@ -13,7 +10,6 @@ import { Button } from "../components/buttons.js";
 import { ChainName } from "../components/ChainName.js";
 import { Spacer } from "../components/Spacer.js";
 import { Text } from "../components/text.js";
-import type { PayEmbedConnectOptions } from "../PayEmbed.js";
 import type { UIOptions } from "./BridgeOrchestrator.js";
 import { ChainIcon } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
@@ -32,12 +28,11 @@ export interface DirectPaymentProps {
   /**
    * Called when user continues with the payment
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
-
-  /**
-   * Connect options for wallet connection
-   */
-  connectOptions?: PayEmbedConnectOptions;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Whether to show thirdweb branding in the widget.
@@ -50,12 +45,9 @@ export function DirectPayment({
   uiOptions,
   client,
   onContinue,
-  connectOptions,
   showThirdwebBranding = true,
 }: DirectPaymentProps) {
-  const activeAccount = useActiveAccount();
   const chain = defineChain(uiOptions.paymentInfo.token.chainId);
-  const theme = useCustomTheme();
   const handleContinue = () => {
     onContinue(
       uiOptions.paymentInfo.amount,
@@ -188,23 +180,9 @@ export function DirectPayment({
 
       {/* Action button */}
       <Container flex="column">
-        {activeAccount ? (
-          <Button fullWidth onClick={handleContinue} variant="primary">
-            {buyNow}
-          </Button>
-        ) : (
-          <ConnectButton
-            client={client}
-            connectButton={{
-              label: buyNow,
-              style: {
-                width: "100%",
-              },
-            }}
-            theme={theme}
-            {...connectOptions}
-          />
-        )}
+        <Button fullWidth onClick={handleContinue} variant="primary">
+          {buyNow}
+        </Button>
 
         {showThirdwebBranding ? (
           <div>

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

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
 import { useRef, useState } from "react";
-import type { Token } from "../../../../bridge/types/Token.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { type Address, getAddress } from "../../../../utils/address.js";
 import { numberToPlainString } from "../../../../utils/formatNumber.js";
@@ -46,7 +46,11 @@ export interface FundWalletProps {
   /**
    * Called when continue is clicked with the resolved requirements
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Quick buy amounts

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

@@ -1,6 +1,6 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
-import type { Token } from "../../../../bridge/index.js";
+import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import {
@@ -46,7 +46,11 @@ export interface TransactionPaymentProps {
   /**
    * Called when user confirms transaction execution
    */
-  onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
+  onContinue: (
+    amount: string,
+    token: TokenWithPrices,
+    receiverAddress: Address,
+  ) => void;
 
   /**
    * Request to execute the transaction immediately (skips funding flow)

package/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx

@@ -121,10 +121,10 @@ export function WalletFiatSelection({
               </Container>
               <Container flex="column" gap="3xs" style={{ flex: 1 }}>
                 <Text color="primaryText" size="sm" style={{ fontWeight: 600 }}>
-                  Connect Another Wallet
+                  Connect a Wallet
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Use a different wallet to pay
+                  Pay with any web3 wallet
                 </Text>
               </Container>
             </Container>
@@ -169,7 +169,7 @@ export function WalletFiatSelection({
                   Pay with Card
                 </Text>
                 <Text color="secondaryText" size="xs">
-                  Buy crypto and bridge in one step
+                  Onramp and pay in one step
                 </Text>
               </Container>
             </Container>

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

@@ -42,6 +42,11 @@ export interface SuccessScreenProps {
   windowAdapter: WindowAdapter;
 
   client: ThirdwebClient;
+
+  /**
+   * Whether or not this payment is associated with a payment ID. If it does, we show a different message.
+   */
+  hasPaymentId?: boolean;
 }
 
 type ViewState = "success" | "detail";
@@ -53,6 +58,7 @@ export function SuccessScreen({
   onDone,
   windowAdapter,
   client,
+  hasPaymentId = false,
 }: SuccessScreenProps) {
   const theme = useCustomTheme();
   const [viewState, setViewState] = useState<ViewState>("success");
@@ -120,7 +126,11 @@ export function SuccessScreen({
         </Text>
 
         <Text center color="secondaryText" size="sm">
-          Your cross-chain payment has been completed successfully.
+          {hasPaymentId
+            ? "You can now close this page and return to the application."
+            : uiOptions.mode === "transaction"
+              ? "Click continue to execute your transaction."
+              : "Your payment has been completed successfully."}
         </Text>
       </Container>
       <Spacer y="lg" />
@@ -135,9 +145,11 @@ export function SuccessScreen({
           View Payment Receipt
         </Button>
 
-        <Button fullWidth onClick={onDone} variant="accent">
-          {uiOptions.mode === "transaction" ? "Continue" : "Done"}
-        </Button>
+        {!hasPaymentId && (
+          <Button fullWidth onClick={onDone} variant="accent">
+            {uiOptions.mode === "transaction" ? "Continue" : "Done"}
+          </Button>
+        )}
       </Container>
 
       {/* CSS Animations */}

package/src/stories/Bridge/SuccessScreen.stories.tsx

@@ -222,3 +222,17 @@ export const TransactionPayment: Story = {
     backgrounds: { default: "light" },
   },
 };
+
+export const PaymentId: Story = {
+  args: {
+    client: storyClient,
+    completedStatuses: mockBuyCompletedStatuses,
+    hasPaymentId: true,
+    preparedQuote: simpleBuyQuote,
+    theme: "light",
+    uiOptions: TRANSACTION_UI_OPTIONS.contractInteraction,
+  },
+  parameters: {
+    backgrounds: { default: "light" },
+  },
+};

package/src/stories/Bridge/fixtures.ts

@@ -1,5 +1,5 @@
 import { stringify } from "viem";
-import type { Token } from "../../bridge/index.js";
+import type { TokenWithPrices } from "../../bridge/types/Token.js";
 import { base } from "../../chains/chain-definitions/base.js";
 import { baseSepolia } from "../../chains/chain-definitions/base-sepolia.js";
 import { polygon } from "../../chains/chain-definitions/polygon.js";
@@ -19,7 +19,7 @@ import { toWei } from "../../utils/units.js";
 import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
 import { storyClient } from "../utils.js";
 
-export const ETH: Token = {
+export const ETH: TokenWithPrices = {
   address: NATIVE_TOKEN_ADDRESS,
   chainId: 10,
   decimals: 18,
@@ -32,7 +32,7 @@ export const ETH: Token = {
   symbol: "ETH",
 };
 
-export const USDC: Token = {
+export const USDC: TokenWithPrices = {
   address: getDefaultToken(base, "USDC")?.address ?? "",
   chainId: base.id,
   decimals: 6,
@@ -45,7 +45,7 @@ export const USDC: Token = {
   symbol: "USDC",
 };
 
-export const UNI: Token = {
+export const UNI: TokenWithPrices = {
   address: "0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984",
   chainId: 10,
   decimals: 18,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.37";
+export const version = "5.105.39";

package/src/wallets/wallet-connect/controller.ts

@@ -142,6 +142,7 @@ export async function connectWC(
           "eth_sign",
           "personal_sign",
           "eth_signTypedData",
+          "eth_signTypedData_v4",
           "wallet_switchEthereumChain",
           "wallet_addEthereumChain",
         ],
@@ -185,8 +186,8 @@ export async function connectWC(
     }
   }
 
-  if (wcOptions?.onDisplayUri) {
-    provider.events.removeListener("display_uri", wcOptions.onDisplayUri);
+  if (onDisplayUri) {
+    provider.events.removeListener("display_uri", onDisplayUri);
   }
 
   return onConnect(