thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

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

@@ -0,0 +1,155 @@
+"use client";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize } from "../../../../core/design-system/index.js";
+import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
+import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, ModalHeader } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import type { UIOptions } from "../BridgeOrchestrator.js";
+import { PaymentReceipt } from "./PaymentReceipt.js";
+
+export interface SuccessScreenProps {
+  /**
+   * UI options
+   */
+  uiOptions: UIOptions;
+  /**
+   * Prepared quote from Bridge.prepare
+   */
+  preparedQuote: BridgePrepareResult;
+
+  /**
+   * Completed status results from step execution
+   */
+  completedStatuses: CompletedStatusResult[];
+
+  /**
+   * Called when user closes the success screen
+   */
+  onDone: () => void;
+
+  /**
+   * Window adapter for opening URLs
+   */
+  windowAdapter: WindowAdapter;
+}
+
+type ViewState = "success" | "detail";
+
+export function SuccessScreen({
+  uiOptions,
+  preparedQuote,
+  completedStatuses,
+  onDone,
+  windowAdapter,
+}: SuccessScreenProps) {
+  const theme = useCustomTheme();
+  const [viewState, setViewState] = useState<ViewState>("success");
+
+  if (viewState === "detail") {
+    return (
+      <PaymentReceipt
+        preparedQuote={preparedQuote}
+        completedStatuses={completedStatuses}
+        windowAdapter={windowAdapter}
+        onBack={() => setViewState("success")}
+      />
+    );
+  }
+
+  return (
+    <Container flex="column" fullHeight p="lg">
+      <ModalHeader title="Payment Complete" />
+
+      <Spacer y="xl" />
+
+      <Container flex="column" gap="md" center="x">
+        {/* Success Icon with Animation */}
+        <Container
+          center="both"
+          flex="row"
+          style={{
+            width: "64px",
+            height: "64px",
+            borderRadius: "50%",
+            backgroundColor: theme.colors.tertiaryBg,
+            marginBottom: "16px",
+            border: `2px solid ${theme.colors.success}`,
+            animation: "successBounce 0.6s ease-out",
+          }}
+        >
+          <CheckIcon
+            width={iconSize.xl}
+            height={iconSize.xl}
+            color={theme.colors.success}
+            style={{
+              animation: "checkAppear 0.3s ease-out 0.3s both",
+            }}
+          />
+        </Container>
+
+        <Text size="xl" color="primaryText" center>
+          Payment Successful!
+        </Text>
+
+        <Text size="sm" color="secondaryText" center>
+          Your cross-chain payment has been completed successfully.
+        </Text>
+      </Container>
+      <Spacer y="lg" />
+
+      {/* Action Buttons */}
+      <Container flex="column" gap="sm" style={{ width: "100%" }}>
+        <Button
+          variant="secondary"
+          fullWidth
+          onClick={() => setViewState("detail")}
+        >
+          View Payment Receipt
+        </Button>
+
+        <Button variant="accent" fullWidth onClick={onDone}>
+          {uiOptions.mode === "transaction" ? "Continue" : "Done"}
+        </Button>
+      </Container>
+
+      {/* CSS Animations */}
+      <style>
+        {`
+          @keyframes successBounce {
+            0% {
+              transform: scale(0.3);
+              opacity: 0;
+            }
+            50% {
+              transform: scale(1.05);
+            }
+            70% {
+              transform: scale(0.9);
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+
+          @keyframes checkAppear {
+            0% {
+              transform: scale(0);
+              opacity: 0;
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        `}
+      </style>
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/Details.test.tsx

@@ -591,7 +591,7 @@ describe("Details Modal", () => {
     const { container } = render(
       <AccountProvider address={VITALIK_WALLET} client={client}>
         <NetworkSwitcherButton
-          setScreen={(scr) => console.log(scr)}
+          setScreen={(_scr) => {}}
           disableSwitchChain={false}
           displayBalanceToken={undefined}
           client={client}
@@ -616,7 +616,7 @@ describe("Details Modal", () => {
     const { container } = render(
       <AccountProvider address={VITALIK_WALLET} client={client}>
         <NetworkSwitcherButton
-          setScreen={(scr) => console.log(scr)}
+          setScreen={(_scr) => {}}
           disableSwitchChain={false}
           displayBalanceToken={undefined}
           client={client}

package/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -699,8 +699,8 @@ const ButtonContainer = /* @__PURE__ */ StyledDiv(() => {
 const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
   const theme = useCustomTheme();
   return {
-    width: `${iconSize.xl}px`,
-    height: `${iconSize.xl}px`,
+    width: `${iconSize.lg}px`,
+    height: `${iconSize.lg}px`,
     backgroundColor: theme.colors.tertiaryBg,
     border: `2px solid ${theme.colors.borderColor}`,
     borderRadius: radius.md,

package/src/react/web/ui/ConnectWallet/constants.ts

@@ -5,7 +5,7 @@ export const reservedScreens = {
   showAll: "showAll",
 };
 
-export const modalMaxWidthCompact = "360px";
+export const modalMaxWidthCompact = "400px";
 
 const wideModalWidth = 730;
 export const modalMaxWidthWide = `${wideModalWidth}px`;

package/src/react/web/ui/ConnectWallet/icons/CreditCardIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const CreditCardIcon: IconFC = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color ?? "currentColor"}
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="presentation"
+    >
+      <rect width="20" height="14" x="2" y="5" rx="2" />
+      <line x1="2" x2="22" y1="10" y2="10" />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -24,7 +24,10 @@ import type {
 } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveAccount } from "../../../../../core/hooks/wallets/useActiveAccount.js";
 import { invalidateWalletBalance } from "../../../../../core/providers/invalidateWalletBalance.js";
-import type { SupportedTokens } from "../../../../../core/utils/defaultTokens.js";
+import type {
+  SupportedTokens,
+  TokenInfo,
+} from "../../../../../core/utils/defaultTokens.js";
 import { ErrorState } from "../../../../wallets/shared/ErrorState.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
@@ -539,7 +542,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   toChain={toChain}
                   toToken={toToken}
                   fromChain={fromChain}
-                  fromToken={fromToken}
+                  fromToken={fromToken as TokenInfo}
                   showFromTokenSelector={() => {
                     setScreen({
                       id: "select-from-token",

package/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

@@ -90,7 +90,9 @@ export function DirectPaymentModeScreen(props: {
 
   const token: TokenInfo = paymentInfo.token
     ? {
-        ...paymentInfo.token,
+        name: paymentInfo.token.name || chainData.nativeCurrency.name,
+        symbol: paymentInfo.token.symbol || chainData.nativeCurrency.symbol,
+        address: paymentInfo.token.address || NATIVE_TOKEN_ADDRESS,
         icon:
           paymentInfo.token?.icon ||
           supportedDestinations

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx

@@ -99,6 +99,14 @@ export function getFiatIcon(
     />
   );
 }
+
+export function getFiatCurrencyIcon(props: {
+  currency: string;
+  size: keyof typeof iconSize;
+}): React.ReactNode {
+  return getFiatIcon(getCurrencyMeta(props.currency), props.size);
+}
+
 const UnknownCurrencyIcon: IconFC = (props) => {
   return <RadiobuttonIcon width={props.size} height={props.size} />;
 };

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -6,6 +6,7 @@ import type {
   PayUIOptions,
 } from "../../../../../../core/hooks/connection/ConnectButtonProps.js";
 import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/useActiveWalletChain.js";
+import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
 import {
@@ -49,7 +50,7 @@ export function useToTokenSelectionStates(options: {
       setToChain(prefillBuy.chain);
     }
     if (prefillBuy?.token) {
-      setToToken(prefillBuy.token);
+      setToToken(prefillBuy.token as TokenInfo);
     }
   }, [prefillBuy?.amount, prefillBuy?.chain, prefillBuy?.token]);
 
@@ -68,7 +69,7 @@ export function useToTokenSelectionStates(options: {
   );
 
   const [toToken, setToToken] = useState<ERC20OrNativeToken>(
-    prefillBuy?.token ||
+    (prefillBuy?.token as TokenInfo) ||
       (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
       NATIVE_TOKEN,
   );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx

@@ -43,7 +43,13 @@ export function FiatValue(
 
   return cryptoToFiatQuery.data?.result ? (
     <Text {...props}>
-      ${formatNumber(cryptoToFiatQuery.data.result, 2).toFixed(2)}
+      $
+      {Number(
+        formatNumber(cryptoToFiatQuery.data.result, 2).toFixed(2),
+      ).toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}
     </Text>
   ) : null;
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

@@ -19,6 +19,7 @@ export function StepConnectorArrow() {
       <Container
         flex="row"
         center="both"
+        color="primaryText"
         style={{
           borderRadius: "100%",
           width: "30px",

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx

@@ -48,7 +48,7 @@ export function WalletRow(props: {
     : "";
   return (
     <Container flex="row" style={{ justifyContent: "space-between" }}>
-      <Container flex="row" center="y" gap="sm" color="secondaryText">
+      <Container flex="row" center="y" gap="md" color="secondaryText">
         {wallet ? (
           <WalletImage
             id={wallet.id}
@@ -58,13 +58,17 @@ export function WalletRow(props: {
         ) : (
           <OutlineWalletIcon size={iconSize[props.iconSize || "md"]} />
         )}
-        <Container flex="column" gap="4xs">
+        <Container flex="column" gap="3xs">
           {props.label ? (
             <Text size="xs" color="secondaryText">
               {props.label}
             </Text>
           ) : null}
-          <Text size={props.textSize || "xs"} color="primaryText">
+          <Text
+            size={props.textSize || "xs"}
+            color="primaryText"
+            style={{ fontWeight: 600, fontFamily: "monospace" }}
+          >
             {addressOrENS || shortenAddress(props.address)}
           </Text>
           {profile.isLoading ? (

package/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts

@@ -1,4 +1,6 @@
 import { formatNumber } from "../../../../../utils/formatNumber.js";
+import { toTokens } from "../../../../../utils/units.js";
+import { getCurrencyMeta } from "./Buy/fiat/currencies.js";
 
 /**
  * @internal
@@ -20,3 +22,23 @@ export function formatTokenBalance(
     (showSymbol ? ` ${balanceData.symbol}` : "")
   );
 }
+
+export function formatTokenAmount(
+  amount: bigint,
+  decimals: number,
+  decimalsToShow = 5,
+) {
+  return formatNumber(
+    Number.parseFloat(toTokens(amount, decimals)),
+    decimalsToShow,
+  ).toString();
+}
+
+export function formatCurrencyAmount(
+  currency: string,
+  amount: number,
+  decimals = 2,
+) {
+  const symbol = getCurrencyMeta(currency).symbol;
+  return `${symbol}${formatNumber(amount, decimals).toFixed(decimals)}`;
+}

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

@@ -22,6 +22,7 @@ import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { AutoConnect } from "../../web/ui/AutoConnect/AutoConnect.js";
+import { webWindowAdapter } from "../adapters/WindowAdapter.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
@@ -404,6 +405,7 @@ export function PayEmbed(props: PayEmbedProps) {
                   transactionHash: data.transactionHash,
                 });
               }}
+              windowAdapter={webWindowAdapter}
             />
           )}
       </>

package/src/react/web/ui/TransactionButton/DepositScreen.tsx

@@ -168,10 +168,9 @@ export function DepositScreen(props: {
           style={{
             justifyContent: "space-between",
             padding: spacing.sm,
-            marginBottom: spacing.sm,
-            borderRadius: spacing.md,
-            backgroundColor: theme.colors.tertiaryBg,
+            borderRadius: `${radius.md} ${radius.md} 0 0`,
             border: `1px solid ${theme.colors.borderColor}`,
+            borderBottom: "none",
           }}
         >
           {activeAccount && (
@@ -223,7 +222,13 @@ export function DepositScreen(props: {
             />
           </Container>
           <Container flex="row" center="x" gap="xs">
-            <Text color="primaryText" size="md">
+            <Text
+              color="primaryText"
+              size="md"
+              style={{
+                fontFamily: "monospace",
+              }}
+            >
               {address ? shortenAddress(address) : ""}
             </Text>
             <CopyIcon
@@ -286,7 +291,7 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     display: "flex",
     justifyContent: "space-between",
     border: `1px solid ${theme.colors.borderColor}`,
-    borderRadius: radius.lg,
+    borderRadius: `0 0 ${radius.md} ${radius.md}`,
     transition: "border-color 200ms ease",
     "&:hover": {
       borderColor: theme.colors.accentText,

package/src/react/web/ui/TransactionButton/ExecutingScreen.tsx

@@ -1,9 +1,11 @@
-import { CheckCircledIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
+import { CheckIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Hex } from "viem";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { formatExplorerTxUrl } from "../../../../utils/url.js";
+import type { WindowAdapter } from "../../../core/adapters/WindowAdapter.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
 import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
@@ -11,7 +13,7 @@ import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
 import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
 import { Container, ModalHeader } from "../components/basic.js";
-import { Button, ButtonLink } from "../components/buttons.js";
+import { Button } from "../components/buttons.js";
 import { Text } from "../components/text.js";
 
 export function ExecutingTxScreen(props: {
@@ -19,6 +21,7 @@ export function ExecutingTxScreen(props: {
   closeModal: () => void;
   onTxSent: (data: WaitForReceiptOptions) => void;
   onBack?: () => void;
+  windowAdapter: WindowAdapter;
 }) {
   const sendTxCore = useSendTransaction({
     payModal: false,
@@ -29,6 +32,7 @@ export function ExecutingTxScreen(props: {
   const [status, setStatus] = useState<"loading" | "failed" | "sent">(
     "loading",
   );
+  const theme = useCustomTheme();
 
   const sendTx = useCallback(async () => {
     setStatus("loading");
@@ -67,15 +71,32 @@ export function ExecutingTxScreen(props: {
         {status === "loading" && <Spinner size="xxl" color="accentText" />}
         {status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />}
         {status === "sent" && (
-          <Container color="success" flex="row" center="both">
-            <CheckCircledIcon
-              width={iconSize["3xl"]}
-              height={iconSize["3xl"]}
+          <Container
+            center="both"
+            flex="row"
+            style={{
+              width: "64px",
+              height: "64px",
+              borderRadius: "50%",
+              backgroundColor: theme.colors.tertiaryBg,
+              marginBottom: "16px",
+              border: `2px solid ${theme.colors.success}`,
+              animation: "successBounce 0.6s ease-out",
+            }}
+          >
+            <CheckIcon
+              width={iconSize.xl}
+              height={iconSize.xl}
+              color={theme.colors.success}
+              style={{
+                animation: "checkAppear 0.3s ease-out 0.3s both",
+              }}
             />
           </Container>
         )}
       </Container>
-      <Spacer y="lg" />
+
+      <Spacer y="md" />
 
       <Text color="primaryText" center size="lg">
         {status === "loading" && "Sending transaction"}
@@ -87,7 +108,7 @@ export function ExecutingTxScreen(props: {
         {status === "failed" && txError ? txError.message || "" : ""}
       </Text>
 
-      <Spacer y="xxl" />
+      <Spacer y="xl" />
 
       {status === "failed" && (
         <Button variant="accent" fullWidth onClick={sendTx}>
@@ -97,34 +118,66 @@ export function ExecutingTxScreen(props: {
 
       {status === "sent" && (
         <>
-          <Button variant="accent" fullWidth onClick={props.closeModal}>
-            Done
-          </Button>
           {txHash && (
             <>
-              <Spacer y="sm" />
-              <ButtonLink
+              <Button
+                variant="secondary"
                 fullWidth
-                variant="outline"
-                href={formatExplorerTxUrl(
-                  chainExplorers.explorers[0]?.url ?? "",
-                  txHash,
-                )}
-                target="_blank"
-                as="a"
-                gap="xs"
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
+                onClick={() => {
+                  props.windowAdapter.open(
+                    formatExplorerTxUrl(
+                      chainExplorers.explorers[0]?.url ?? "",
+                      txHash,
+                    ),
+                  );
                 }}
+                gap="xs"
+                color="primaryText"
               >
                 View on Explorer
                 <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
-              </ButtonLink>
+              </Button>
+              <Spacer y="sm" />
             </>
           )}
+          <Button variant="accent" fullWidth onClick={props.closeModal}>
+            Done
+          </Button>
         </>
       )}
+
+      {/* CSS Animations */}
+      <style>
+        {`
+          @keyframes successBounce {
+            0% {
+              transform: scale(0.3);
+              opacity: 0;
+            }
+            50% {
+              transform: scale(1.05);
+            }
+            70% {
+              transform: scale(0.9);
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+
+          @keyframes checkAppear {
+            0% {
+              transform: scale(0);
+              opacity: 0;
+            }
+            100% {
+              transform: scale(1);
+              opacity: 1;
+            }
+          }
+        `}
+      </style>
     </Container>
   );
 }

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -11,9 +11,10 @@ import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonP
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import { webWindowAdapter } from "../../adapters/WindowAdapter.js";
 import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { BridgeOrchestrator } from "../Bridge/BridgeOrchestrator.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
-import { LazyBuyScreen } from "../ConnectWallet/screens/Buy/LazyBuyScreen.js";
 import { Modal } from "../components/Modal.js";
 import type { LocaleId } from "../types.js";
 import { DepositScreen } from "./DepositScreen.js";
@@ -94,6 +95,7 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
         tx={props.tx}
         closeModal={props.onClose}
         onTxSent={props.onTxSent}
+        windowAdapter={webWindowAdapter}
       />
     );
   }
@@ -113,19 +115,23 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
   }
 
   return (
-    <LazyBuyScreen
-      title={props.title}
-      isEmbed={false}
+    <BridgeOrchestrator
       client={props.client}
-      onBack={props.onBack}
-      supportedTokens={props.supportedTokens}
+      uiOptions={{
+        mode: "transaction",
+        transaction: props.tx,
+      }}
       connectLocale={localeQuery.data}
-      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-      payOptions={props.payOptions}
-      onDone={() => {
+      onComplete={() => {
         setScreen("execute-tx");
       }}
+      onError={(_error) => {}}
+      onCancel={props.onClose}
       connectOptions={undefined}
+      receiverAddress={undefined}
+      purchaseData={undefined}
+      paymentLinkId={undefined}
+      presetOptions={undefined}
     />
   );
 }