thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.1-nightly-bb09e20bcb1662c088bf8b61486df7d0d92da8d0-20250618000421

package/src/react/web/ui/Bridge/common/TokenAndChain.tsx

@@ -0,0 +1,203 @@
+import { useMemo } from "react";
+import type { Token } from "../../../../../bridge/index.js";
+import type { Chain } from "../../../../../chains/types.js";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
+import {
+  useChainIconUrl,
+  useChainMetadata,
+} from "../../../../core/hooks/others/useChainQuery.js";
+import { genericTokenIcon } from "../../../../core/utils/walletIcon.js";
+import { isNativeToken } from "../../ConnectWallet/screens/nativeToken.js";
+import { ChainName } from "../../components/ChainName.js";
+import { Img } from "../../components/Img.js";
+import { Container } from "../../components/basic.js";
+import { fallbackChainIcon } from "../../components/fallbackChainIcon.js";
+import { Text } from "../../components/text.js";
+
+export function TokenAndChain({
+  token,
+  client,
+  size,
+  style,
+}: {
+  token: Omit<Token, "priceUsd">;
+  client: ThirdwebClient;
+  size: keyof typeof iconSize;
+  style?: React.CSSProperties;
+}) {
+  const theme = useCustomTheme();
+  const chain = getCachedChain(token.chainId);
+  return (
+    <Container
+      flex="row"
+      center="y"
+      gap="sm"
+      style={{
+        flexWrap: "nowrap",
+        ...style,
+      }}
+    >
+      <Container
+        style={{
+          position: "relative",
+          width: iconSize[size],
+          height: iconSize[size],
+        }}
+      >
+        <TokenIconWithFallback token={token} size={size} client={client} />
+        {chain.id !== 1 && (
+          <Container
+            style={{
+              position: "absolute",
+              bottom: "-2px",
+              right: "-6px",
+              width: size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
+              height:
+                size === "lg" || size === "xl" ? iconSize.sm : iconSize.xs,
+              borderRadius: "50%",
+              background: theme.colors.borderColor,
+              border: `1.5px solid ${theme.colors.modalBg}`,
+            }}
+          >
+            <ChainIcon
+              chain={chain}
+              size={size === "xl" || size === "lg" ? "sm" : "xs"}
+              client={client}
+            />
+          </Container>
+        )}
+      </Container>
+
+      <Container flex="column" gap="3xs" style={{ minWidth: 0 }}>
+        <Text
+          size={size === "xl" ? "lg" : "sm"}
+          color="primaryText"
+          weight={600}
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {token.name}
+        </Text>
+        <ChainName
+          chain={chain}
+          size={size === "xl" ? "sm" : "xs"}
+          client={client}
+          short
+        />
+      </Container>
+    </Container>
+  );
+}
+
+function TokenIconWithFallback(props: {
+  token: Omit<Token, "priceUsd">;
+  size: keyof typeof iconSize;
+  client: ThirdwebClient;
+}) {
+  const chain = getCachedChain(props.token.chainId);
+  const chainMeta = useChainMetadata(chain).data;
+  const theme = useCustomTheme();
+
+  const tokenImage = useMemo(() => {
+    if (
+      isNativeToken(props.token) ||
+      props.token.address === NATIVE_TOKEN_ADDRESS
+    ) {
+      if (chainMeta?.nativeCurrency.symbol === "ETH") {
+        return "ipfs://QmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9/ethereum/512.png"; // ETH icon
+      }
+      return chainMeta?.icon?.url;
+    }
+    return props.token.iconUri;
+  }, [props.token, chainMeta?.icon?.url, chainMeta?.nativeCurrency.symbol]);
+
+  return tokenImage ? (
+    <Img
+      src={tokenImage}
+      style={{
+        borderRadius: "50%",
+      }}
+      width={iconSize[props.size]}
+      height={iconSize[props.size]}
+      fallbackImage={genericTokenIcon}
+      client={props.client}
+    />
+  ) : (
+    <Container
+      style={{
+        width: `${iconSize.md}px`,
+        height: `${iconSize.md}px`,
+        borderRadius: "50%",
+        backgroundColor: theme.colors.secondaryButtonBg,
+        border: `1px solid ${theme.colors.borderColor}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: spacing.xs,
+      }}
+    >
+      <Text
+        size={props.size === "xl" ? "sm" : "xs"}
+        color="secondaryText"
+        style={{ fontWeight: 600 }}
+      >
+        {props.token.symbol.slice(0, 1)}
+      </Text>
+    </Container>
+  );
+}
+
+export const ChainIcon: React.FC<{
+  chain: Chain;
+  size: keyof typeof iconSize;
+  client: ThirdwebClient;
+}> = (props) => {
+  const { url } = useChainIconUrl(props.chain);
+  return (
+    <Container
+      style={{
+        position: "relative",
+        display: "flex",
+        flexShrink: 0,
+        alignItems: "center",
+      }}
+    >
+      <Img
+        src={getSrcChainIcon({
+          client: props.client,
+          chainIconUrl: url,
+        })}
+        width={iconSize[props.size]}
+        height={iconSize[props.size]}
+        fallbackImage={fallbackChainIcon}
+        client={props.client}
+      />
+    </Container>
+  );
+};
+
+const getSrcChainIcon = (props: {
+  client: ThirdwebClient;
+  chainIconUrl?: string;
+}) => {
+  const url = props.chainIconUrl;
+  if (!url) {
+    return fallbackChainIcon;
+  }
+  try {
+    return resolveScheme({
+      uri: url,
+      client: props.client,
+    });
+  } catch {
+    return fallbackChainIcon;
+  }
+};

package/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx

@@ -0,0 +1,112 @@
+import styled from "@emotion/styled";
+import type { Token } from "../../../../../bridge/index.js";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { spacing } from "../../../../core/design-system/index.js";
+import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { TokenAndChain } from "./TokenAndChain.js";
+
+export function TokenBalanceRow({
+  client,
+  token,
+  amount,
+  onClick,
+  style,
+}: {
+  client: ThirdwebClient;
+  token: Token;
+  amount: string;
+  onClick: (token: Token) => void;
+  style?: React.CSSProperties;
+}) {
+  const chain = getCachedChain(token.chainId);
+  return (
+    <StyledButton
+      onClick={() => onClick(token)}
+      variant="secondary"
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        padding: `${spacing.sm} ${spacing.md}`,
+        ...style,
+      }}
+    >
+      <TokenAndChain
+        token={token}
+        client={client}
+        size="lg"
+        style={{ maxWidth: "50%", flex: 1 }}
+      />
+
+      <Container
+        flex="row"
+        center="y"
+        gap="4xs"
+        color="secondaryText"
+        style={{
+          flex: "1",
+          maxWidth: "50%",
+          minWidth: 0,
+          justifyContent: "flex-end",
+          flexWrap: "nowrap",
+        }}
+      >
+        <Container
+          flex="column"
+          color="secondaryText"
+          gap="3xs"
+          style={{
+            alignItems: "flex-end",
+            minWidth: 0,
+            overflow: "hidden",
+          }}
+        >
+          <FiatValue
+            tokenAmount={amount}
+            token={token}
+            chain={chain}
+            client={client}
+            color="primaryText"
+            size="sm"
+          />
+          <Text
+            size="xs"
+            color="secondaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {`${Number(amount).toLocaleString(undefined, {
+              maximumFractionDigits: 6,
+              minimumFractionDigits: 0,
+            })} ${token.symbol}`}
+          </Text>
+        </Container>
+      </Container>
+    </StyledButton>
+  );
+}
+
+const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
+  const theme = useCustomTheme();
+  return {
+    background: "transparent",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    flexDirection: "row",
+    padding: spacing.sm,
+    paddingRight: spacing.xs,
+    gap: spacing.sm,
+    "&:hover": {
+      background: theme.colors.secondaryButtonBg,
+    },
+    transition: "background 200ms ease, transform 150ms ease",
+    ...props.style,
+  };
+});

package/src/react/web/ui/Bridge/common/WithHeader.tsx

@@ -0,0 +1,65 @@
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { resolveScheme } from "../../../../../utils/ipfs.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius } from "../../../../core/design-system/index.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import type { UIOptions } from "../BridgeOrchestrator.js";
+
+export function WithHeader({
+  children,
+  uiOptions,
+  defaultTitle,
+  client,
+}: {
+  children: React.ReactNode;
+  uiOptions: UIOptions;
+  defaultTitle: string;
+  client: ThirdwebClient;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Container flex="column">
+      {/* image */}
+      {uiOptions.metadata?.image && (
+        <div
+          style={{
+            width: "100%",
+            borderRadius: `${radius.md} ${radius.md} 0 0`,
+            overflow: "hidden",
+            aspectRatio: "16/9",
+            backgroundColor: theme.colors.tertiaryBg,
+            backgroundImage: `url(${resolveScheme({
+              client,
+              uri: uiOptions.metadata.image,
+            })})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+      )}
+      <Container flex="column" px="lg">
+        <Spacer y="lg" />
+
+        {/* title */}
+        <Text size="lg" color="primaryText" weight={700}>
+          {uiOptions.metadata?.title || defaultTitle}
+        </Text>
+
+        {/* Description */}
+        {uiOptions.metadata?.description && (
+          <>
+            <Spacer y="xs" />
+            <Text size="sm" color="secondaryText">
+              {uiOptions.metadata?.description}
+            </Text>
+          </>
+        )}
+
+        <Spacer y="lg" />
+        {children}
+      </Container>
+    </Container>
+  );
+}

package/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -0,0 +1,318 @@
+"use client";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
+import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
+import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
+import {} from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
+import {
+  formatCurrencyAmount,
+  formatTokenAmount,
+} from "../../ConnectWallet/screens/formatTokenBalance.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 { PaymentOverview } from "./PaymentOverview.js";
+
+export interface PaymentDetailsProps {
+  /**
+   * The UI mode to use
+   */
+  uiOptions: UIOptions;
+  /**
+   * The client to use
+   */
+  client: ThirdwebClient;
+  /**
+   * The payment method to use
+   */
+  paymentMethod: PaymentMethod;
+  /**
+   * The prepared quote to preview
+   */
+  preparedQuote: BridgePrepareResult;
+
+  /**
+   * Called when user confirms the route
+   */
+  onConfirm: () => void;
+
+  /**
+   * Called when user wants to go back
+   */
+  onBack: () => void;
+
+  /**
+   * Called when an error occurs
+   */
+  onError: (error: Error) => void;
+}
+
+export function PaymentDetails({
+  uiOptions,
+  client,
+  paymentMethod,
+  preparedQuote,
+  onConfirm,
+  onBack,
+  onError,
+}: PaymentDetailsProps) {
+  const theme = useCustomTheme();
+
+  const handleConfirm = () => {
+    try {
+      onConfirm();
+    } catch (error) {
+      onError(error as Error);
+    }
+  };
+
+  // Extract common data based on quote type
+  const getDisplayData = () => {
+    switch (preparedQuote.type) {
+      case "transfer": {
+        const token =
+          paymentMethod.type === "wallet"
+            ? paymentMethod.originToken
+            : undefined;
+        if (!token) {
+          // can never happen
+          onError(new Error("Invalid payment method"));
+          return {
+            originToken: undefined,
+            destinationToken: undefined,
+            originAmount: "0",
+            destinationAmount: "0",
+            estimatedTime: 0,
+          };
+        }
+        return {
+          originToken: token,
+          destinationToken: token,
+          originAmount: formatTokenAmount(
+            preparedQuote.originAmount,
+            token.decimals,
+          ),
+          destinationAmount: formatTokenAmount(
+            preparedQuote.destinationAmount,
+            token.decimals,
+          ),
+          estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+        };
+      }
+      case "buy": {
+        const method =
+          paymentMethod.type === "wallet" ? paymentMethod : undefined;
+        if (!method) {
+          // can never happen
+          onError(new Error("Invalid payment method"));
+          return {
+            originToken: undefined,
+            destinationToken: undefined,
+            originAmount: "0",
+            destinationAmount: "0",
+            estimatedTime: 0,
+          };
+        }
+        return {
+          originToken:
+            paymentMethod.type === "wallet"
+              ? paymentMethod.originToken
+              : undefined,
+          destinationToken:
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken,
+          originAmount: formatTokenAmount(
+            preparedQuote.originAmount,
+            method.originToken.decimals,
+          ),
+          destinationAmount: formatTokenAmount(
+            preparedQuote.destinationAmount,
+            preparedQuote.steps[preparedQuote.steps.length - 1]
+              ?.destinationToken?.decimals ?? 18,
+          ),
+          estimatedTime: preparedQuote.estimatedExecutionTimeMs,
+        };
+      }
+      case "onramp": {
+        const method =
+          paymentMethod.type === "fiat" ? paymentMethod : undefined;
+        if (!method) {
+          // can never happen
+          onError(new Error("Invalid payment method"));
+          return {
+            originToken: undefined,
+            destinationToken: undefined,
+            originAmount: "0",
+            destinationAmount: "0",
+            estimatedTime: 0,
+          };
+        }
+        return {
+          originToken: undefined, // Onramp starts with fiat
+          destinationToken: preparedQuote.destinationToken,
+          originAmount: formatCurrencyAmount(
+            method.currency,
+            Number(preparedQuote.currencyAmount),
+          ),
+          destinationAmount: formatTokenAmount(
+            preparedQuote.destinationAmount,
+            preparedQuote.destinationToken.decimals,
+          ),
+          estimatedTime: undefined,
+        };
+      }
+      default: {
+        throw new Error(
+          `Unsupported bridge prepare type: ${preparedQuote.type}`,
+        );
+      }
+    }
+  };
+
+  const displayData = getDisplayData();
+
+  return (
+    <Container flex="column" fullHeight p="lg">
+      <ModalHeader title="Payment Details" onBack={onBack} />
+
+      <Spacer y="xl" />
+
+      <Container flex="column">
+        {/* Quote Summary */}
+        <Container flex="column">
+          {displayData.destinationToken && (
+            <PaymentOverview
+              uiOptions={uiOptions}
+              sender={
+                preparedQuote.intent.sender ||
+                paymentMethod.payerWallet.getAccount()?.address
+              }
+              client={client}
+              paymentMethod={paymentMethod}
+              toToken={displayData.destinationToken}
+              receiver={preparedQuote.intent.receiver}
+              fromAmount={displayData.originAmount}
+              toAmount={displayData.destinationAmount}
+            />
+          )}
+
+          <Spacer y="md" />
+          <Container flex="row" gap="sm">
+            <Container
+              flex="row"
+              gap="xs"
+              style={{ justifyContent: "center", flex: 1 }}
+            >
+              <Text size="sm" color="secondaryText">
+                Estimated Time
+              </Text>
+              <Text size="sm" color="primaryText">
+                {displayData.estimatedTime
+                  ? `~${Math.ceil(displayData.estimatedTime / 60000)} min`
+                  : "~2 min"}
+              </Text>
+            </Container>
+
+            {preparedQuote.steps.length > 1 ? (
+              <Container
+                flex="row"
+                gap="xs"
+                style={{ justifyContent: "center", flex: 1 }}
+              >
+                <Text size="sm" color="secondaryText">
+                  Route Length
+                </Text>
+                <Text size="sm" color="primaryText">
+                  {preparedQuote.steps.length} step
+                  {preparedQuote.steps.length !== 1 ? "s" : ""}
+                </Text>
+              </Container>
+            ) : null}
+          </Container>
+        </Container>
+
+        {/* Route Steps */}
+        {preparedQuote.steps.length > 1 && (
+          <Container flex="column">
+            <Spacer y="sm" />
+
+            <Container
+              flex="column"
+              gap="sm"
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                borderRadius: radius.md,
+                backgroundColor: theme.colors.tertiaryBg,
+                padding: `${spacing.sm} ${spacing.md}`,
+              }}
+            >
+              {preparedQuote.steps.map((step, stepIndex) => (
+                <Container
+                  key={`step-${stepIndex}-${step.originToken.address}-${step.destinationToken.address}`}
+                  flex="column"
+                  gap="sm"
+                >
+                  {/* Step Header */}
+                  <Container
+                    flex="row"
+                    gap="md"
+                    style={{ alignItems: "center" }}
+                  >
+                    <Container
+                      center="both"
+                      flex="row"
+                      style={{
+                        width: "24px",
+                        height: "24px",
+                        borderRadius: "50%",
+                        backgroundColor: theme.colors.accentButtonBg,
+                        color: theme.colors.accentButtonText,
+                        fontSize: "12px",
+                        fontWeight: "bold",
+                        flexShrink: 0,
+                      }}
+                    >
+                      <Text size="xs" color="accentButtonText">
+                        {stepIndex + 1}
+                      </Text>
+                    </Container>
+
+                    <Container
+                      flex="row"
+                      center="y"
+                      gap="sm"
+                      style={{ flex: 1 }}
+                    >
+                      <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                        <Text size="sm" color="primaryText">
+                          {step.originToken.symbol} →{" "}
+                          {step.destinationToken.symbol}
+                        </Text>
+                        <Text size="xs" color="secondaryText">
+                          {step.originToken.name} to{" "}
+                          {step.destinationToken.name}
+                        </Text>
+                      </Container>
+                    </Container>
+                  </Container>
+                </Container>
+              ))}
+            </Container>
+          </Container>
+        )}
+
+        <Spacer y="lg" />
+
+        {/* Action Buttons */}
+        <Container flex="column" gap="sm">
+          <Button variant="accent" fullWidth onClick={handleConfirm}>
+            Confirm Payment
+          </Button>
+        </Container>
+      </Container>
+    </Container>
+  );
+}