thirdweb 5.108.6 → 5.108.8

package/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx

@@ -1,20 +1,14 @@
 import styled from "@emotion/styled";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import type { prepare as BuyPrepare } from "../../../../../bridge/Buy.js";
 import { Buy, Sell } from "../../../../../bridge/index.js";
 import type { prepare as SellPrepare } from "../../../../../bridge/Sell.js";
-import type { BridgeChain } from "../../../../../bridge/types/Chain.js";
 import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
-import { defineChain } from "../../../../../chains/utils.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 { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
-import { getAddress, shortenAddress } from "../../../../../utils/address.js";
 import { toTokens, toUnits } from "../../../../../utils/units.js";
-import { AccountProvider } from "../../../../core/account/provider.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
@@ -23,9 +17,7 @@ import {
   spacing,
   type Theme,
 } from "../../../../core/design-system/index.js";
-import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
 import type { BridgePrepareRequest } from "../../../../core/hooks/useBridgePrepare.js";
-import { WalletProvider } from "../../../../core/wallet/provider.js";
 import { ConnectButton } from "../../ConnectWallet/ConnectButton.js";
 import { DetailsModal } from "../../ConnectWallet/Details.js";
 import { ArrowUpDownIcon } from "../../ConnectWallet/icons/ArrowUpDownIcon.js";
@@ -37,18 +29,16 @@ import {
 } from "../../ConnectWallet/screens/formatTokenBalance.js";
 import { Container } from "../../components/basic.js";
 import { Button } from "../../components/buttons.js";
-import { Input } from "../../components/formElements.js";
-import { Img } from "../../components/Img.js";
 import { Modal } from "../../components/Modal.js";
 import { Skeleton } from "../../components/Skeleton.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
 import { Text } from "../../components/text.js";
 import { useIsMobile } from "../../hooks/useisMobile.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 { ActiveWalletDetails } from "../common/active-wallet-details.js";
+import { DecimalInput } from "../common/decimal-input.js";
+import { SelectedTokenButton } from "../common/selected-token-button.js";
+import { useTokenBalance } from "../common/token-balance.js";
 import { SelectToken } from "./select-token-ui.js";
 import type {
   ActiveWalletInfo,
@@ -57,7 +47,6 @@ import type {
   TokenSelection,
 } from "./types.js";
 import { useBridgeChains } from "./use-bridge-chains.js";
-import { cleanedChainName } from "./utils.js";
 
 type SwapUIProps = {
   activeWalletInfo: ActiveWalletInfo | undefined;
@@ -423,7 +412,7 @@ export function SwapUI(props: SwapUIProps) {
             label: "Swap",
             style: {
               width: "100%",
-              borderRadius: radius.lg,
+              borderRadius: radius.full,
             },
           }}
           theme={props.theme}
@@ -625,66 +614,6 @@ function useSwapQuote(params: {
   });
 }
 
-function DecimalInput(props: {
-  value: string;
-  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.startsWith("0") && !processedValue.startsWith("0.")) {
-      props.setValue(processedValue.slice(1));
-    } else {
-      props.setValue(processedValue);
-    }
-  };
-
-  return (
-    <Input
-      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"
-      style={{
-        border: "none",
-        boxShadow: "none",
-        fontSize: fontSize.xl,
-        fontWeight: 500,
-        paddingInline: 0,
-        paddingBlock: 0,
-        letterSpacing: "-0.025em",
-        height: "30px",
-      }}
-      type="text"
-      value={props.value}
-      variant="transparent"
-    />
-  );
-}
-
 function TokenSection(props: {
   type: "buy" | "sell";
   amount: {
@@ -774,19 +703,11 @@ function TokenSection(props: {
             </Text>
           </Container>
           {props.activeWalletInfo && (
-            <WalletButton
-              variant="ghost-solid"
-              style={{
-                paddingInline: spacing.xxs,
-                paddingBlock: "2px",
-              }}
+            <ActiveWalletDetails
+              activeWalletInfo={props.activeWalletInfo}
+              client={props.client}
               onClick={props.onWalletClick}
-            >
-              <ActiveWalletDetails
-                activeWalletInfo={props.activeWalletInfo}
-                client={props.client}
-              />
-            </WalletButton>
+            />
           )}
         </Container>
 
@@ -829,6 +750,16 @@ function TokenSection(props: {
                 <DecimalInput
                   value={props.amount.data}
                   setValue={props.setAmount}
+                  style={{
+                    border: "none",
+                    boxShadow: "none",
+                    fontSize: fontSize.xl,
+                    fontWeight: 500,
+                    paddingInline: 0,
+                    paddingBlock: 0,
+                    letterSpacing: "-0.025em",
+                    height: "30px",
+                  }}
                 />
               )}
 
@@ -914,157 +845,6 @@ function TokenSection(props: {
   );
 }
 
-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>
-  );
-}
-
 function SwitchButton(props: { onClick: () => void }) {
   return (
     <div
@@ -1110,96 +890,3 @@ const SwitchButtonInner = /* @__PURE__ */ styled(Button)(() => {
     border: `1px solid ${theme.colors.borderColor}`,
   };
 });
-
-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,
-  });
-}
-
-function ActiveWalletDetails(props: {
-  activeWalletInfo: ActiveWalletInfo;
-  client: ThirdwebClient;
-}) {
-  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 (
-    <WalletProvider id={props.activeWalletInfo.activeWallet.id}>
-      <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,
-              }}
-              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>
-    </WalletProvider>
-  );
-}
-
-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/types.ts

@@ -0,0 +1,47 @@
+import type { Quote, TokenWithPrices } from "../../../../bridge/index.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+
+export type DirectPaymentInfo = {
+  sellerAddress: `0x${string}`;
+  token: TokenWithPrices;
+  amount: string;
+  feePayer?: "sender" | "receiver";
+};
+
+export type ModeInfo =
+  | {
+      mode: "direct_payment";
+      paymentInfo: DirectPaymentInfo;
+    }
+  | {
+      mode: "transaction";
+      transaction: PreparedTransaction;
+    }
+  | {
+      mode: "fund_wallet";
+    };
+
+export type RequiredParams<T extends object, keys extends keyof T> = T & {
+  [K in keys]-?: T[K];
+};
+
+/**
+ * Payment method types with their required data
+ */
+export type PaymentMethod =
+  | {
+      type: "wallet";
+      action: "buy" | "sell";
+      payerWallet: Wallet;
+      originToken: TokenWithPrices;
+      balance: bigint;
+      quote: Quote;
+    }
+  | {
+      type: "fiat";
+      payerWallet?: Wallet;
+      currency: SupportedFiatCurrency;
+      onramp: "stripe" | "coinbase" | "transak";
+    };

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

@@ -985,7 +985,6 @@ export function DetailsModal(props: {
         chain={getCachedChain(requestedChainId)}
         client={client}
         hiddenWallets={props.detailsModal?.hiddenWallets}
-        locale={locale.id}
         connectOptions={props.connectOptions}
         onCancel={() => setScreen("main")}
         onSuccess={() => setScreen("main")}
@@ -1012,6 +1011,9 @@ export function DetailsModal(props: {
             className="tw-modal__wallet-details"
             title="Manage Wallet"
             open={isOpen}
+            crossContainerStyles={{
+              display: screen === "buy" ? "none" : "block",
+            }}
             setOpen={(_open) => {
               if (!_open) {
                 closeModal();

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

@@ -64,11 +64,7 @@ export function WalletRow(props: {
               {props.label}
             </Text>
           ) : null}
-          <Text
-            color="primaryText"
-            size={props.textSize || "xs"}
-            style={{ fontFamily: "monospace", fontWeight: 600 }}
-          >
+          <Text color="primaryText" size={props.textSize || "xs"}>
             {addressOrENS || shortenAddress(props.address)}
           </Text>
           {profile.isLoading ? (

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

@@ -1,3 +1,4 @@
+import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
 import { formatNumber } from "../../../../../utils/formatNumber.js";
 import { toTokens } from "../../../../../utils/units.js";
 
@@ -33,7 +34,10 @@ export function formatTokenAmount(
   ).toString();
 }
 
-export function formatCurrencyAmount(currency: string, amount: number) {
+export function formatCurrencyAmount(
+  currency: SupportedFiatCurrency,
+  amount: number,
+) {
   return formatMoney(amount, "en-US", currency);
 }
 

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

@@ -75,7 +75,6 @@ const WaitingBadge = /* @__PURE__ */ StyledDiv(() => {
  * @internal
  */
 export function DepositScreen(props: {
-  onBack: (() => void) | undefined;
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
   tx: PreparedTransaction;
@@ -144,7 +143,7 @@ export function DepositScreen(props: {
 
   return (
     <Container p="lg">
-      <ModalHeader onBack={props.onBack} title={"Insufficient funds"} />
+      <ModalHeader title={"Insufficient funds"} />
 
       <Spacer y="lg" />
 

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

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import { resolvePromisedValue } from "../../../../utils/promise/resolve-promised-value.js";
@@ -13,7 +14,7 @@ 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 { TransactionWidgetContentWrapper } from "../Bridge/TransactionWidget.js";
 import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
 import { Modal } from "../components/Modal.js";
 import type { LocaleId } from "../types.js";
@@ -33,7 +34,8 @@ type ModalProps = {
   payOptions: PayUIOptions;
   onTxSent: (data: WaitForReceiptOptions) => void;
   modalMode: "buy" | "deposit";
-  country?: string;
+  country: string | undefined;
+  currency: SupportedFiatCurrency | undefined;
 };
 
 export function TransactionModal(props: ModalProps) {
@@ -84,9 +86,45 @@ export function TransactionModal(props: ModalProps) {
   );
 }
 
-function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
+function TransactionModalContent(props: ModalProps) {
+  if (props.modalMode === "deposit") {
+    return <DepositAndExecuteTx {...props} />;
+  }
+
+  return (
+    <TransactionWidgetContentWrapper
+      client={props.client}
+      country={props.country}
+      currency={props.currency}
+      transaction={props.tx}
+      onCancel={props.onClose}
+      locale={props.localeId}
+      onSuccess={(data) => {
+        props.onTxSent(data);
+      }}
+      title={props.payOptions.metadata?.name}
+      description={props.payOptions.metadata?.description}
+      image={props.payOptions.metadata?.image}
+      paymentMethods={
+        props.payOptions.buyWithCrypto === false
+          ? ["card"]
+          : props.payOptions.buyWithFiat === false
+            ? ["crypto"]
+            : ["crypto", "card"]
+      }
+      showThirdwebBranding={props.payOptions.showThirdwebBranding}
+      supportedTokens={props.supportedTokens}
+      onError={undefined}
+      paymentLinkId={undefined}
+      buttonLabel={undefined}
+      purchaseData={undefined}
+    />
+  );
+}
+
+function DepositAndExecuteTx(props: ModalProps) {
   const localeQuery = useConnectLocale(props.localeId);
-  const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
+  const [screen, setScreen] = useState<"deposit" | "execute-tx">("deposit");
 
   if (!localeQuery.data) {
     return <LoadingScreen />;
@@ -103,12 +141,11 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
     );
   }
 
-  if (props.modalMode === "deposit") {
+  if (screen === "deposit") {
     return (
       <DepositScreen
         client={props.client}
         connectLocale={localeQuery.data}
-        onBack={props.onBack}
         onDone={() => {
           setScreen("execute-tx");
         }}
@@ -117,25 +154,5 @@ function TransactionModalContent(props: ModalProps & { onBack?: () => void }) {
     );
   }
 
-  return (
-    <BridgeOrchestrator
-      country={props.country}
-      client={props.client}
-      connectLocale={localeQuery.data}
-      connectOptions={undefined}
-      onCancel={props.onClose}
-      onComplete={() => {
-        setScreen("execute-tx");
-      }}
-      onError={(_error) => {}}
-      paymentLinkId={undefined}
-      presetOptions={undefined}
-      purchaseData={undefined}
-      receiverAddress={undefined}
-      uiOptions={{
-        mode: "transaction",
-        transaction: props.tx,
-      }}
-    />
-  );
+  return null;
 }

package/src/react/web/ui/components/CopyIcon.tsx

@@ -13,6 +13,7 @@ export const CopyIcon: React.FC<{
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
   hasCopied?: boolean;
+  iconSize?: number;
 }> = (props) => {
   const { hasCopied, onCopy } = useClipboard(props.text);
   const showCheckIcon = props.hasCopied || hasCopied;
@@ -40,9 +41,17 @@ export const CopyIcon: React.FC<{
             flex="row"
           >
             {showCheckIcon ? (
-              <CheckIcon className="tw-check-icon" />
+              <CheckIcon
+                className="tw-check-icon"
+                width={props.iconSize || 16}
+                height={props.iconSize || 16}
+              />
             ) : (
-              <CopyIconSVG className="tw-copy-icon" />
+              <CopyIconSVG
+                className="tw-copy-icon"
+                width={props.iconSize || 16}
+                height={props.iconSize || 16}
+              />
             )}
           </Container>
         </div>