thirdweb 5.105.8 → 5.105.10

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

@@ -20,6 +20,7 @@ import {
 } from "react";
 import { trackPayEvent } from "../../../../analytics/track/pay.js";
 import type { Chain } from "../../../../chains/types.js";
+import { getCachedChain } from "../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import type { SupportedFiatCurrency } from "../../../../pay/convert/type.js";
@@ -61,7 +62,10 @@ import type {
   ConnectButtonProps,
   PayUIOptions,
 } from "../../../core/hooks/connection/ConnectButtonProps.js";
-import { useChainFaucets } from "../../../core/hooks/others/useChainQuery.js";
+import {
+  useChainFaucets,
+  useChainMetadata,
+} from "../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
@@ -80,6 +84,7 @@ import type {
 } from "../../../core/utils/defaultTokens.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
+import { BuyWidget } from "../Bridge/BuyWidget.js";
 import { Container, Line } from "../components/basic.js";
 import { Button, IconButton } from "../components/buttons.js";
 import { ChainActiveDot } from "../components/ChainActiveDot.js";
@@ -116,7 +121,6 @@ import {
   NetworkSelectorContent,
   type NetworkSelectorProps,
 } from "./NetworkSelector.js";
-import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
 import { WalletManagerScreen } from "./screens/Details/WalletManagerScreen.js";
 import { LinkedProfilesScreen } from "./screens/LinkedProfilesScreen.js";
 import { LinkProfileScreen } from "./screens/LinkProfileScreen.js";
@@ -390,6 +394,7 @@ export function DetailsModal(props: {
 
   const activeWallet = useActiveWallet();
   const chainFaucetsQuery = useChainFaucets(walletChain);
+  const chainMetadataQuery = useChainMetadata(walletChain);
 
   const disableSwitchChain = !activeWallet?.switchChain;
 
@@ -622,33 +627,35 @@ export function DetailsModal(props: {
                 </Button>
               )}
 
-              {!hideBuyFunds && (
-                <Button
-                  onClick={() => {
-                    trackPayEvent({
-                      client: client,
-                      event: "details_modal_buy_click",
-                      walletAddress: activeAccount?.address,
-                      walletType: activeWallet?.id,
-                    });
-                    setScreen("buy");
-                  }}
-                  style={{
-                    alignItems: "center",
-                    display: "flex",
-                    flex: 1,
-                    fontSize: fontSize.sm,
-                    gap: spacing.xs,
-                    padding: spacing.sm,
-                  }}
-                  variant="outline"
-                >
-                  <Container center="both" color="secondaryText" flex="row">
-                    <PlusIcon height={iconSize.sm} width={iconSize.sm} />
-                  </Container>
-                  {locale.buy}
-                </Button>
-              )}
+              {!hideBuyFunds &&
+                chainMetadataQuery.data &&
+                !chainMetadataQuery.data.testnet && (
+                  <Button
+                    onClick={() => {
+                      trackPayEvent({
+                        client: client,
+                        event: "details_modal_buy_click",
+                        walletAddress: activeAccount?.address,
+                        walletType: activeWallet?.id,
+                      });
+                      setScreen("buy");
+                    }}
+                    style={{
+                      alignItems: "center",
+                      display: "flex",
+                      flex: 1,
+                      fontSize: fontSize.sm,
+                      gap: spacing.xs,
+                      padding: spacing.sm,
+                    }}
+                    variant="outline"
+                  >
+                    <Container center="both" color="secondaryText" flex="row">
+                      <PlusIcon height={iconSize.sm} width={iconSize.sm} />
+                    </Container>
+                    {locale.buy}
+                  </Button>
+                )}
             </Container>
           </Container>
 
@@ -956,23 +963,26 @@ export function DetailsModal(props: {
 
   // thirdweb pay
   else if (screen === "buy") {
+    const requestedChainId =
+      props.detailsModal?.payOptions?.prefillBuy?.chain?.id ||
+      walletChain?.id ||
+      props.chains[0]?.id ||
+      1;
     content = (
-      <LazyBuyScreen
+      <BuyWidget
+        amount={props.detailsModal?.payOptions?.prefillBuy?.amount || "0.01"}
+        chain={getCachedChain(requestedChainId)}
         client={client}
-        connectLocale={locale}
-        connectOptions={undefined}
         hiddenWallets={props.detailsModal?.hiddenWallets}
-        isEmbed={false}
-        onBack={() => setScreen("main")}
-        onDone={closeModal}
-        payOptions={
-          props.detailsModal?.payOptions || {
-            mode: "fund_wallet",
-          }
-        }
+        locale={locale.id}
+        onCancel={() => setScreen("main")}
+        onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
-        theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-        title={locale.buy}
+        tokenAddress={
+          props.displayBalanceToken?.[Number(requestedChainId)] as
+            | `0x${string}`
+            | undefined
+        }
       />
     );
   }
@@ -1143,7 +1153,6 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
       transition: "background 250ms ease",
     },
     alignItems: "center",
-    all: "unset",
     animation: `${fadeInAnimation} 300ms ease`,
     background: theme.colors.connectedButtonBg,
     border: `1px solid ${theme.colors.borderColor}`,

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

@@ -25,7 +25,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     backgroundColor: "transparent",
     borderRadius: radius.md,
     // border: `1px solid ${theme.colors.borderColor}`,

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

@@ -690,12 +690,10 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
           )}
         </Container>
         {confirming || switchingFailed ? (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: spacing.xs,
-            }}
+          <Container
+            flex="column"
+            gap="3xs"
+            style={{ alignItems: "flex-start", width: "100%" }}
           >
             <ChainName
               loadingComponent={<Skeleton height="20px" width="150px" />}
@@ -718,7 +716,7 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
                 </Container>
               )}
             </Container>
-          </div>
+          </Container>
         ) : (
           <ChainName
             className="tw-chain-icon-none-confirming"
@@ -741,7 +739,6 @@ export const TabButton = /* @__PURE__ */ (() =>
         background: theme.colors.secondaryButtonBg,
         color: theme.colors.primaryText,
       },
-      all: "unset",
       borderRadius: radius.lg,
       color: theme.colors.secondaryText,
       cursor: "pointer",
@@ -787,7 +784,6 @@ export const NetworkButton = /* @__PURE__ */ StyledButton((_) => {
       background: theme.colors.secondaryButtonBg,
     },
     alignItems: "center",
-    all: "unset",
     borderRadius: radius.md,
     boxSizing: "border-box",
     color: theme.colors.primaryText,

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

@@ -720,7 +720,6 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
 });
 
 const WalletList = /* @__PURE__ */ StyledUl({
-  all: "unset",
   boxSizing: "border-box",
   display: "flex",
   flex: 1,

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

@@ -84,7 +84,7 @@ export function getCurrencyMeta(shorthand: string): CurrencyMeta {
   );
 }
 
-export function getFiatIcon(
+function getFiatIcon(
   currency: CurrencyMeta,
   size: keyof typeof iconSize,
 ): React.ReactNode {

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

@@ -1,6 +1,4 @@
 import type { ChainMetadata } from "../../../../../../../chains/types.js";
-import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { GetWalletBalanceResult } from "../../../../../../../wallets/utils/getWalletBalance.js";
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 
@@ -12,40 +10,3 @@ export type TransactionCostAndData = {
   gasCostWei: bigint;
   chainMetadata: ChainMetadata;
 };
-
-export type SelectedScreen =
-  | {
-      id: "main" | "select-payment-method" | "buy-with-fiat";
-    }
-  | {
-      id: "buy-with-crypto";
-      payDisabled?: boolean;
-    }
-  | {
-      id: "select-from-token";
-      backScreen: SelectedScreen;
-    }
-  | {
-      id: "select-to-token";
-      backScreen: SelectedScreen;
-    }
-  | {
-      id: "select-currency";
-      backScreen: SelectedScreen;
-    }
-  | {
-      id: "swap-flow";
-      quote: BuyWithCryptoQuote;
-      approvalAmount?: bigint;
-    }
-  | {
-      id: "fiat-flow";
-      quote: BuyWithFiatQuote;
-    }
-  | {
-      id: "transfer-flow";
-    }
-  | {
-      id: "connect-payer-wallet";
-      backScreen: SelectedScreen;
-    };

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts

@@ -1,11 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
-import { Address as ox__Address } from "ox";
-import * as Bridge 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 type { Address } from "../../../../../../../utils/address.js";
-import { withCache } from "../../../../../../../utils/promise/withCache.js";
 
 export type SupportedChainAndTokens = Array<{
   chain: Chain;
@@ -18,156 +11,3 @@ export type SupportedChainAndTokens = Array<{
     icon?: string;
   }>;
 }>;
-
-async function fetchBuySupportedDestinations({
-  client,
-  originChainId,
-  originTokenAddress,
-}: {
-  client: ThirdwebClient;
-  originChainId?: number;
-  originTokenAddress?: Address;
-}): Promise<SupportedChainAndTokens> {
-  return withCache(
-    async () => {
-      const routes = await Bridge.routes({
-        client,
-        limit: 1_000_000,
-        maxSteps: 1,
-        originChainId,
-        originTokenAddress,
-        sortBy: "popularity",
-      });
-      const tokens = new Set<string>();
-      const chains = new Set<number>();
-      const destinationTokens: Record<
-        number,
-        Array<{
-          address: Address;
-          buyWithCryptoEnabled: boolean;
-          buyWithFiatEnabled: boolean;
-          name: string;
-          symbol: string;
-          icon?: string;
-        }>
-      > = [];
-      for (const route of routes) {
-        const key = `${route.destinationToken.chainId}:${route.destinationToken.address}`;
-        if (!tokens.has(key)) {
-          tokens.add(key);
-          if (!chains.has(route.destinationToken.chainId)) {
-            chains.add(route.destinationToken.chainId);
-          }
-          const existing = destinationTokens[route.destinationToken.chainId];
-          if (!existing) {
-            destinationTokens[route.destinationToken.chainId] = [];
-          }
-          destinationTokens[route.destinationToken.chainId] = [
-            ...(existing || []),
-            {
-              address: ox__Address.checksum(
-                route.destinationToken.address,
-              ) as Address,
-              // We support both options for all tokens
-              buyWithCryptoEnabled: true,
-              buyWithFiatEnabled: true,
-              icon: route.destinationToken.iconUri,
-              name: route.destinationToken.name,
-              symbol: route.destinationToken.symbol,
-            },
-          ];
-        }
-      }
-
-      return [...chains].map((chainId) => ({
-        chain: getCachedChain(chainId),
-        tokens: destinationTokens[chainId] || [],
-      }));
-    },
-    {
-      cacheKey: `buy-supported-destinations-${originChainId}:${originTokenAddress}`,
-      cacheTime: 5 * 60 * 1000,
-    },
-  );
-}
-
-/**
- * @internal
- */
-export function useBuySupportedDestinations(
-  client: ThirdwebClient,
-  _isTestMode?: boolean,
-) {
-  return useQuery({
-    queryFn: async () => {
-      return fetchBuySupportedDestinations({ client });
-    },
-    queryKey: ["destination-tokens", client],
-  });
-}
-
-export function useBuySupportedSources(options: {
-  client: ThirdwebClient;
-  destinationChainId: number;
-  destinationTokenAddress: string;
-}) {
-  return useQuery({
-    queryFn: async () => {
-      const routes = await Bridge.routes({
-        client: options.client,
-        destinationChainId: options.destinationChainId,
-        destinationTokenAddress: options.destinationTokenAddress,
-        limit: 50,
-        maxSteps: 1,
-        sortBy: "popularity",
-      });
-
-      const tokens = new Set<string>();
-      const chains = new Set<number>();
-      const originTokens: Record<
-        number,
-        Array<{
-          address: Address;
-          buyWithCryptoEnabled: boolean;
-          buyWithFiatEnabled: boolean;
-          name: string;
-          symbol: string;
-          icon?: string;
-        }>
-      > = [];
-      for (const route of routes) {
-        const key = `${route.originToken.chainId}:${route.originToken.address}`;
-        if (!tokens.has(key)) {
-          tokens.add(key);
-          if (!chains.has(route.originToken.chainId)) {
-            chains.add(route.originToken.chainId);
-          }
-          const existing = originTokens[route.originToken.chainId];
-          if (!existing) {
-            originTokens[route.originToken.chainId] = [];
-          }
-          originTokens[route.originToken.chainId] = [
-            ...(existing || []),
-            {
-              address: ox__Address.checksum(
-                route.originToken.address,
-              ) as Address,
-              // We support both options for all tokens
-              buyWithCryptoEnabled: true,
-              buyWithFiatEnabled: true,
-              icon: route.originToken.iconUri,
-              name: route.originToken.name,
-              symbol: route.originToken.symbol,
-            },
-          ];
-        }
-      }
-
-      return [...chains].map((chainId) => ({
-        chain: getCachedChain(chainId),
-        tokens: originTokens[chainId] || [],
-      }));
-    },
-    queryKey: ["source-tokens", options],
-  });
-}

package/src/react/web/ui/ConnectWallet/screens/Buy/utils.ts

@@ -1,12 +1,3 @@
 export function getBuyTokenAmountFontSize(value: string) {
   return value.length > 10 ? "26px" : value.length > 6 ? "34px" : "50px";
 }
-
-/**
- *
- * @param str accepts any string but expects a fully upppercased string / type FiatProvider
- * @returns Fiat provider label to be rendered used within presentation logic
- */
-export function getProviderLabel(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-}

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -88,7 +88,6 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
-    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: radius.md,
     boxSizing: "border-box",

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Address } from "../../../utils/address.js";
@@ -10,27 +10,18 @@ import type { AppMetadata } from "../../../wallets/types.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../core/design-system/index.js";
-import {
-  type SiweAuthOptions,
-  useSiweAuth,
-} from "../../core/hooks/auth/useSiweAuth.js";
+import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
-import { useActiveAccount } from "../../core/hooks/wallets/useActiveAccount.js";
-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 { BuyWidget } from "./Bridge/BuyWidget.js";
 import { CheckoutWidget } from "./Bridge/CheckoutWidget.js";
 import { TransactionWidget } from "./Bridge/TransactionWidget.js";
-import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
-import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
-import { Spinner } from "./components/Spinner.js";
 import type { LocaleId } from "./types.js";
 
 /**
@@ -309,17 +300,8 @@ export type PayEmbedProps = {
  * @deprecated Use `BuyWidget`, `CheckoutWidget` or `TransactionWidget` instead.
  */
 export function PayEmbed(props: PayEmbedProps) {
-  const localeQuery = useConnectLocale(props.locale || "en_US");
-  const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
   const connectionManager = useConnectionManager();
-  const activeAccount = useActiveAccount();
-  const activeWallet = useActiveWallet();
-  const siweAuth = useSiweAuth(
-    activeWallet,
-    activeAccount,
-    props.connectOptions?.auth,
-  );
 
   // Add props.chain and props.chains to defined chains store
   useEffect(() => {
@@ -340,7 +322,7 @@ export function PayEmbed(props: PayEmbedProps) {
     }
   }, [props.activeWallet, connectionManager]);
 
-  let content = null;
+  const content = null;
   const metadata =
     props.payOptions && "metadata" in props.payOptions
       ? props.payOptions.metadata
@@ -421,51 +403,6 @@ export function PayEmbed(props: PayEmbedProps) {
     );
   }
 
-  if (!localeQuery.data) {
-    content = (
-      <div
-        style={{
-          alignItems: "center",
-          display: "flex",
-          justifyContent: "center",
-          minHeight: "350px",
-        }}
-      >
-        <Spinner color="secondaryText" size="xl" />
-      </div>
-    );
-  } else {
-    content = (
-      <>
-        <AutoConnect client={props.client} siweAuth={siweAuth} />
-        {screen === "buy" && (
-          <BuyScreen
-            client={props.client}
-            connectLocale={localeQuery.data}
-            connectOptions={props.connectOptions}
-            hiddenWallets={props.hiddenWallets}
-            isEmbed={true}
-            onBack={undefined}
-            onDone={() => {
-              if (props.payOptions?.mode === "transaction") {
-                setScreen("execute-tx");
-              }
-            }}
-            paymentLinkId={props.paymentLinkId}
-            payOptions={
-              props.payOptions || {
-                mode: "fund_wallet",
-              }
-            }
-            supportedTokens={props.supportedTokens}
-            theme={theme}
-            title={metadata?.name || "Buy"}
-          />
-        )}
-      </>
-    );
-  }
-
   return (
     <CustomThemeProvider theme={theme}>
       <EmbedContainer

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

@@ -286,7 +286,6 @@ const WalletAddressContainer = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       borderColor: theme.colors.accentText,
     },
-    all: "unset",
     border: `1px solid ${theme.colors.borderColor}`,
     borderRadius: `0 0 ${radius.md} ${radius.md}`,
     boxSizing: "border-box",

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

@@ -150,7 +150,7 @@ export const Modal: React.FC<{
   );
 };
 
-export const CrossContainer = /* @__PURE__ */ StyledDiv({
+const CrossContainer = /* @__PURE__ */ StyledDiv({
   position: "absolute",
   right: spacing.lg,
   top: spacing.lg,

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

@@ -8,7 +8,7 @@ import {
 } from "../../../core/design-system/index.js";
 import { StyledButton } from "../design-system/elements.js";
 
-export type ButtonProps = {
+type ButtonProps = {
   variant: "primary" | "secondary" | "link" | "accent" | "outline" | "ghost";
   unstyled?: boolean;
   fullWidth?: boolean;
@@ -38,7 +38,6 @@ export const Button = /* @__PURE__ */ StyledButton((props: ButtonProps) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     background: (() => {
       if (props.bg) {
         return theme.colors[props.bg];
@@ -152,7 +151,6 @@ export const IconButton = /* @__PURE__ */ StyledButton((_) => {
       cursor: "not-allowed",
     },
     alignItems: "center",
-    all: "unset",
     borderRadius: radius.sm,
     color: theme.colors.secondaryIconColor,
     cursor: "pointer",

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

@@ -48,7 +48,6 @@ export const Link = /* @__PURE__ */ StyledAnchor<LinkProps>((p) => {
       color: theme.colors[p.hoverColor || "primaryText"],
       textDecoration: "none",
     },
-    all: "unset",
     color: theme.colors[p.color || "accentText"],
     cursor: "pointer",
     display: p.inline ? "inline" : "block",

package/src/react/web/wallets/shared/GetStartedScreen.tsx

@@ -218,7 +218,6 @@ const ButtonLink = /* @__PURE__ */ StyledButton((_) => {
       textDecoration: "none",
     },
     alignItems: "center",
-    all: "unset",
     background: theme.colors.secondaryButtonBg,
     borderRadius: radius.sm,
     boxSizing: "border-box",

package/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -345,7 +345,6 @@ const LinkButton = /* @__PURE__ */ StyledButton((_) => {
     "&:hover": {
       color: theme.colors.primaryText,
     },
-    all: "unset",
     color: theme.colors.accentText,
     cursor: "pointer",
     fontSize: fontSize.sm,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.8";
+export const version = "5.105.10";