thirdweb 5.108.5 → 5.108.7

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

@@ -5,31 +5,25 @@ import { radius } from "../../../../core/design-system/index.js";
 import { Container } from "../../components/basic.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
-import type { UIOptions } from "../BridgeOrchestrator.js";
 
-export function WithHeader({
-  children,
-  uiOptions,
-  defaultTitle,
-  client,
-}: {
+export function WithHeader(props: {
   children: React.ReactNode;
-  uiOptions: UIOptions;
-  defaultTitle: string;
+  title: string | undefined;
+  description: string | undefined;
+  image: string | undefined;
   client: ThirdwebClient;
 }) {
   const theme = useCustomTheme();
-  const showTitle = uiOptions.metadata?.title !== "";
 
   return (
     <Container flex="column">
       {/* image */}
-      {uiOptions.metadata?.image && (
+      {props.image && (
         <div
           style={{
             aspectRatio: "16/9",
             backgroundColor: theme.colors.tertiaryBg,
-            backgroundImage: `url(${getUrl(client, uiOptions.metadata.image)})`,
+            backgroundImage: `url(${getUrl(props.client, props.image)})`,
             backgroundPosition: "center",
             backgroundSize: "cover",
             borderRadius: `${radius.md} ${radius.md} 0 0`,
@@ -40,23 +34,23 @@ export function WithHeader({
       )}
 
       <Container flex="column" px="md">
-        <Spacer y="md+" />
+        <Spacer y="md" />
 
-        {(showTitle || uiOptions.metadata?.description) && (
+        {(props.title || props.description) && (
           <>
             {/* title */}
-            {showTitle && (
+            {props.title && (
               <Text color="primaryText" size="lg" weight={600}>
-                {uiOptions.metadata?.title || defaultTitle}
+                {props.title}
               </Text>
             )}
 
             {/* Description */}
-            {uiOptions.metadata?.description && (
+            {props.description && (
               <>
                 <Spacer y="xxs" />
                 <Text color="secondaryText" size="sm" multiline>
-                  {uiOptions.metadata?.description}
+                  {props.description}
                 </Text>
               </>
             )}
@@ -65,7 +59,7 @@ export function WithHeader({
           </>
         )}
 
-        {children}
+        {props.children}
       </Container>
     </Container>
   );

package/src/react/web/ui/Bridge/common/active-wallet-details.tsx

@@ -0,0 +1,103 @@
+import styled from "@emotion/styled";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { shortenAddress } from "../../../../../utils/address.js";
+import { AccountProvider } from "../../../../core/account/provider.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { WalletProvider } from "../../../../core/wallet/provider.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { AccountAvatar } from "../../prebuilt/Account/avatar.js";
+import { AccountBlobbie } from "../../prebuilt/Account/blobbie.js";
+import { AccountName } from "../../prebuilt/Account/name.js";
+import { WalletIcon } from "../../prebuilt/Wallet/icon.js";
+import type { ActiveWalletInfo } from "../swap-widget/types.js";
+
+export function ActiveWalletDetails(props: {
+  activeWalletInfo: ActiveWalletInfo;
+  client: ThirdwebClient;
+  onClick: () => void;
+}) {
+  const wallet = props.activeWalletInfo.activeWallet;
+  const account = props.activeWalletInfo.activeAccount;
+
+  const accountBlobbie = (
+    <AccountBlobbie
+      style={{
+        width: `${iconSize.xs}px`,
+        height: `${iconSize.xs}px`,
+        borderRadius: radius.full,
+      }}
+    />
+  );
+  const accountAvatarFallback = (
+    <WalletIcon
+      style={{
+        width: `${iconSize.xs}px`,
+        height: `${iconSize.xs}px`,
+      }}
+      fallbackComponent={accountBlobbie}
+      loadingComponent={accountBlobbie}
+    />
+  );
+
+  return (
+    <WalletButton
+      variant="ghost-solid"
+      style={{
+        paddingInline: spacing.xxs,
+        paddingBlock: "2px",
+      }}
+      onClick={props.onClick}
+    >
+      <AccountProvider address={account.address} client={props.client}>
+        <WalletProvider id={wallet.id}>
+          <Container flex="row" gap="xxs" center="y">
+            <AccountAvatar
+              style={{
+                width: `${iconSize.xs}px`,
+                height: `${iconSize.xs}px`,
+                borderRadius: radius.full,
+                objectFit: "cover",
+              }}
+              fallbackComponent={accountAvatarFallback}
+              loadingComponent={accountAvatarFallback}
+            />
+
+            <span
+              style={{
+                fontSize: fontSize.xs,
+                letterSpacing: "0.025em",
+              }}
+            >
+              <AccountName
+                fallbackComponent={
+                  <span>{shortenAddress(account.address)}</span>
+                }
+                loadingComponent={
+                  <span>{shortenAddress(account.address)}</span>
+                }
+              />
+            </span>
+          </Container>
+        </WalletProvider>
+      </AccountProvider>
+    </WalletButton>
+  );
+}
+
+const WalletButton = /* @__PURE__ */ styled(Button)(() => {
+  const theme = useCustomTheme();
+  return {
+    color: theme.colors.secondaryText,
+    transition: "color 200ms ease",
+    "&:hover": {
+      color: theme.colors.primaryText,
+    },
+  };
+});

package/src/react/web/ui/Bridge/common/decimal-input.tsx

@@ -0,0 +1,61 @@
+import { Input } from "../../components/formElements.js";
+
+type InputProps = React.JSX.IntrinsicElements["input"];
+
+export function DecimalInput(
+  props: Exclude<
+    InputProps,
+    "onChange" | "onClick" | "inputMode" | "pattern" | "type" | "value"
+  > & {
+    setValue: (value: string) => void;
+  },
+) {
+  const handleAmountChange = (inputValue: string) => {
+    let processedValue = inputValue;
+
+    // Replace comma with period if it exists
+    processedValue = processedValue.replace(",", ".");
+
+    if (processedValue.startsWith(".")) {
+      processedValue = `0${processedValue}`;
+    }
+
+    const numValue = Number(processedValue);
+    if (Number.isNaN(numValue)) {
+      return;
+    }
+
+    if (
+      processedValue.length > 1 &&
+      processedValue.startsWith("0") &&
+      !processedValue.startsWith("0.")
+    ) {
+      props.setValue(processedValue.slice(1));
+    } else {
+      props.setValue(processedValue);
+    }
+  };
+
+  return (
+    <Input
+      {...props}
+      inputMode="decimal"
+      onChange={(e) => {
+        handleAmountChange(e.target.value);
+      }}
+      onClick={(e) => {
+        // put cursor at the end of the input
+        if (props.value === "") {
+          e.currentTarget.setSelectionRange(
+            e.currentTarget.value.length,
+            e.currentTarget.value.length,
+          );
+        }
+      }}
+      pattern="^[0-9]*[.,]?[0-9]*$"
+      placeholder="0.0"
+      type="text"
+      variant="transparent"
+    />
+  );
+}

package/src/react/web/ui/Bridge/common/selected-token-button.tsx

@@ -0,0 +1,168 @@
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import type { TokenWithPrices } from "../../../../../bridge/index.js";
+import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Img } from "../../components/Img.js";
+import { Skeleton } from "../../components/Skeleton.js";
+import { Text } from "../../components/text.js";
+import { cleanedChainName } from "../swap-widget/utils.js";
+
+export function SelectedTokenButton(props: {
+  selectedToken:
+    | {
+        data: TokenWithPrices | undefined;
+        isFetching: boolean;
+      }
+    | undefined;
+  client: ThirdwebClient;
+  onSelectToken: () => void;
+  chain: BridgeChain | undefined;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Button
+      variant="ghost-solid"
+      hoverBg="secondaryButtonBg"
+      fullWidth
+      onClick={props.onSelectToken}
+      gap="sm"
+      style={{
+        borderBottom: `1px dashed ${theme.colors.borderColor}`,
+        justifyContent: "space-between",
+        paddingInline: spacing.md,
+        paddingBlock: spacing.md,
+        borderRadius: 0,
+      }}
+    >
+      <Container gap="sm" flex="row" center="y">
+        {/* icons */}
+        <Container relative color="secondaryText">
+          {/* token icon */}
+          {props.selectedToken ? (
+            <Img
+              key={props.selectedToken?.data?.iconUri}
+              src={
+                props.selectedToken?.data === undefined
+                  ? undefined
+                  : props.selectedToken.data.iconUri || ""
+              }
+              client={props.client}
+              width="40"
+              height="40"
+              fallback={
+                <Container
+                  style={{
+                    background: `linear-gradient(45deg, white, ${theme.colors.accentText})`,
+                    borderRadius: radius.full,
+                    width: "40px",
+                    height: "40px",
+                  }}
+                />
+              }
+              style={{
+                objectFit: "cover",
+                borderRadius: radius.full,
+              }}
+            />
+          ) : (
+            <Container
+              style={{
+                border: `1px solid ${theme.colors.borderColor}`,
+                background: `linear-gradient(45deg, white, ${theme.colors.accentText})`,
+                borderRadius: radius.full,
+                width: "40px",
+                height: "40px",
+              }}
+            />
+          )}
+
+          {/* chain icon */}
+          {props.chain && (
+            <Container
+              bg="modalBg"
+              style={{
+                padding: "2px",
+                position: "absolute",
+                bottom: -2,
+                right: -2,
+                display: "flex",
+                borderRadius: radius.full,
+              }}
+            >
+              <Img
+                src={props.chain?.icon}
+                client={props.client}
+                width={iconSize.sm}
+                height={iconSize.sm}
+                style={{
+                  borderRadius: radius.full,
+                }}
+              />
+            </Container>
+          )}
+        </Container>
+
+        {/* token symbol and chain name */}
+        {props.selectedToken ? (
+          <Container flex="column" style={{ gap: "3px" }}>
+            {props.selectedToken?.isFetching ? (
+              <Skeleton width="60px" height={fontSize.md} />
+            ) : (
+              <Text size="md" color="primaryText" weight={500}>
+                {props.selectedToken?.data?.symbol}
+              </Text>
+            )}
+
+            {props.chain ? (
+              <Text
+                size="xs"
+                color="secondaryText"
+                style={{
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {cleanedChainName(props.chain.name)}
+              </Text>
+            ) : (
+              <Skeleton width="140px" height={fontSize.sm} />
+            )}
+          </Container>
+        ) : (
+          <Container flex="column" style={{ gap: "3px" }}>
+            <Text size="md" color="primaryText" weight={500}>
+              Select Token
+            </Text>
+            <Text size="xs" color="secondaryText">
+              Required
+            </Text>
+          </Container>
+        )}
+      </Container>
+      <Container
+        color="secondaryText"
+        flex="row"
+        center="both"
+        borderColor="borderColor"
+        style={{
+          borderRadius: radius.full,
+          borderWidth: 1,
+          borderStyle: "solid",
+          padding: spacing.xs,
+        }}
+      >
+        <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
+      </Container>
+    </Button>
+  );
+}

package/src/react/web/ui/Bridge/common/token-balance.tsx

@@ -0,0 +1,23 @@
+import { defineChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { getAddress } from "../../../../../utils/address.js";
+import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
+
+export function useTokenBalance(props: {
+  chainId: number | undefined;
+  tokenAddress: string | undefined;
+  client: ThirdwebClient;
+  walletAddress: string | undefined;
+}) {
+  return useWalletBalance({
+    address: props.walletAddress,
+    chain: props.chainId ? defineChain(props.chainId) : undefined,
+    client: props.client,
+    tokenAddress: props.tokenAddress
+      ? getAddress(props.tokenAddress) === getAddress(NATIVE_TOKEN_ADDRESS)
+        ? undefined
+        : getAddress(props.tokenAddress)
+      : undefined,
+  });
+}

package/src/react/web/ui/Bridge/common/token-query.ts

@@ -0,0 +1,49 @@
+import { useQuery } from "@tanstack/react-query";
+import type { TokenWithPrices } from "../../../../../bridge/index.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
+import { getToken } from "../../../../../pay/convert/get-token.js";
+
+type TokenQueryResult =
+  | { type: "success"; token: TokenWithPrices }
+  | {
+      type: "unsupported_token";
+    };
+
+export function useTokenQuery(params: {
+  tokenAddress: string | undefined;
+  chainId: number | undefined;
+  client: ThirdwebClient;
+}) {
+  return useQuery({
+    enabled: !!params.chainId,
+    queryFn: async (): Promise<TokenQueryResult> => {
+      if (!params.chainId) {
+        throw new Error("Chain ID is required");
+      }
+      const tokenAddress = params.tokenAddress || NATIVE_TOKEN_ADDRESS;
+      const token = await getToken(
+        params.client,
+        tokenAddress,
+        params.chainId,
+      ).catch((err) => {
+        err.message.includes("not supported") ? undefined : Promise.reject(err);
+      });
+
+      if (!token) {
+        return {
+          type: "unsupported_token",
+        };
+      }
+
+      return {
+        token: token,
+        type: "success",
+      };
+    },
+    queryKey: ["bridge.getToken", params],
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+  });
+}

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

@@ -4,11 +4,11 @@ import { useMemo } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import { defineChain } from "../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
 import { useChainsQuery } from "../../../../core/hooks/others/useChainQuery.js";
 import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
-import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
 import {
   formatCurrencyAmount,
   formatTokenAmount,
@@ -17,17 +17,20 @@ import { Container, ModalHeader } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Text } from "../../components/text.js";
-import type { UIOptions } from "../BridgeOrchestrator.js";
+import type { ModeInfo, PaymentMethod } from "../types.js";
+
 import { PaymentOverview } from "./PaymentOverview.js";
 
-export interface PaymentDetailsProps {
-  title?: string;
-  confirmButtonLabel?: string;
+type PaymentDetailsProps = {
+  metadata: {
+    title: string | undefined;
+    description: string | undefined;
+  };
 
-  /**
-   * The UI mode to use
-   */
-  uiOptions: UIOptions;
+  currency: SupportedFiatCurrency;
+  modeInfo: ModeInfo;
+
+  confirmButtonLabel: string | undefined;
   /**
    * The client to use
    */
@@ -55,18 +58,19 @@ export interface PaymentDetailsProps {
    * Called when an error occurs
    */
   onError: (error: Error) => void;
-}
+};
 
 export function PaymentDetails({
-  title,
+  metadata,
   confirmButtonLabel,
-  uiOptions,
   client,
   paymentMethod,
   preparedQuote,
   onConfirm,
   onBack,
   onError,
+  currency,
+  modeInfo,
 }: PaymentDetailsProps) {
   const theme = useCustomTheme();
 
@@ -267,7 +271,10 @@ export function PaymentDetails({
 
   return (
     <Container flex="column" fullHeight px="md" pb="md" pt="md+">
-      <ModalHeader onBack={onBack} title={title || "Payment Details"} />
+      <ModalHeader
+        onBack={onBack}
+        title={metadata.title || "Payment Details"}
+      />
 
       <Spacer y="lg" />
 
@@ -276,6 +283,9 @@ export function PaymentDetails({
         <Container flex="column">
           {displayData.destinationToken && (
             <PaymentOverview
+              currency={currency}
+              metadata={metadata}
+              modeInfo={modeInfo}
               client={client}
               fromAmount={displayData.originAmount}
               paymentMethod={paymentMethod}
@@ -286,7 +296,6 @@ export function PaymentDetails({
               }
               toAmount={displayData.destinationAmount}
               toToken={displayData.destinationToken}
-              uiOptions={uiOptions}
             />
           )}