thirdweb 5.105.9 → 5.105.11-nightly-692cedf9211fb5a6c24406df69155b920f7d2557-20250709000414

package/src/react/core/hooks/useBridgeQuote.ts

@@ -12,12 +12,14 @@ interface UseBridgeQuoteParams {
   destinationAmount: bigint;
   client: ThirdwebClient;
   enabled?: boolean;
+  feePayer?: "sender" | "receiver";
 }
 
 export function useBridgeQuote({
   originToken,
   destinationToken,
   destinationAmount,
+  feePayer,
   client,
   enabled = true,
 }: UseBridgeQuoteParams) {
@@ -35,6 +37,7 @@ export function useBridgeQuote({
           amount: destinationAmount,
           chainId: originToken.chainId,
           client,
+          feePayer,
           receiver: destinationToken.address,
           sender: originToken.address,
           tokenAddress: originToken.address,
@@ -59,6 +62,7 @@ export function useBridgeQuote({
       destinationToken.chainId,
       destinationToken.address,
       destinationAmount.toString(),
+      feePayer,
     ],
     refetchInterval: 60000, // 30 seconds
     retry: 3, // 1 minute

package/src/react/core/hooks/usePaymentMethods.ts

@@ -141,11 +141,18 @@ export function usePaymentMethods(options: {
               limit: 100,
               maxSteps: 3,
               originChainId: chainId,
-              sortBy: "popularity",
             });
 
             // Add all origin tokens from this chain's routes
             for (const route of routesForChain) {
+              // Skip if the origin token is the same as the destination token, will be added later only if includeDestinationToken is true
+              if (
+                route.originToken.chainId === destinationToken.chainId &&
+                route.originToken.address.toLowerCase() ===
+                  destinationToken.address.toLowerCase()
+              ) {
+                continue;
+              }
               const tokenKey = `${route.originToken.chainId}-${route.originToken.address.toLowerCase()}`;
               allValidOriginTokens.set(tokenKey, route.originToken);
             }

package/src/react/core/utils/storage.ts

@@ -2,7 +2,6 @@ import type { AsyncStorage } from "../../../utils/storage/AsyncStorage.js";
 import type { AuthArgsType } from "../../../wallets/in-app/core/authentication/types.js";
 
 export const LAST_AUTH_PROVIDER_STORAGE_KEY = "lastAuthProvider";
-export const PREFERRED_FIAT_PROVIDER_STORAGE_KEY = "preferredFiatProvider";
 
 export async function setLastAuthProvider(
   authProvider: AuthArgsType["strategy"],

package/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -227,7 +227,10 @@ export function BridgeOrchestrator({
         <ErrorBanner
           client={client}
           error={state.context.currentError}
-          onCancel={onCancel}
+          onCancel={() => {
+            send({ type: "RESET" });
+            onCancel?.();
+          }}
           onRetry={handleRetry}
         />
       )}
@@ -272,6 +275,11 @@ export function BridgeOrchestrator({
             connectOptions={connectOptions}
             destinationAmount={state.context.destinationAmount}
             destinationToken={state.context.destinationToken}
+            feePayer={
+              uiOptions.mode === "direct_payment"
+                ? uiOptions.paymentInfo.feePayer
+                : undefined
+            }
             includeDestinationToken={uiOptions.mode !== "fund_wallet"}
             onBack={() => {
               send({ type: "BACK" });

package/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx

@@ -77,6 +77,11 @@ export interface PaymentSelectionProps {
    * @default ["crypto", "card"]
    */
   paymentMethods?: ("crypto" | "card")[];
+
+  /**
+   * Fee payer
+   */
+  feePayer?: "sender" | "receiver";
 }
 
 type Step =
@@ -97,6 +102,7 @@ export function PaymentSelection({
   connectLocale,
   includeDestinationToken,
   paymentMethods = ["crypto", "card"],
+  feePayer,
 }: PaymentSelectionProps) {
   const connectedWallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
@@ -113,6 +119,7 @@ export function PaymentSelection({
         toChainId: destinationToken.chainId,
         toToken: destinationToken.address,
       });
+      return true;
     },
     queryKey: ["payment_selection"],
   });
@@ -267,6 +274,7 @@ export function PaymentSelection({
               destinationToken.decimals,
             )}
             destinationToken={destinationToken}
+            feePayer={feePayer}
             onBack={handleBackToWalletSelection}
             onPaymentMethodSelected={handlePaymentMethodSelected}
             paymentMethods={suitableTokenPaymentMethods}

package/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx

@@ -21,6 +21,7 @@ interface TokenSelectionProps {
   onBack: () => void;
   destinationToken: Token;
   destinationAmount: bigint;
+  feePayer?: "sender" | "receiver";
 }
 
 // Individual payment method token row component
@@ -30,6 +31,7 @@ interface PaymentMethodTokenRowProps {
   destinationAmount: bigint;
   client: ThirdwebClient;
   onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void;
+  feePayer?: "sender" | "receiver";
 }
 
 function PaymentMethodTokenRow({
@@ -38,6 +40,7 @@ function PaymentMethodTokenRow({
   destinationAmount,
   client,
   onPaymentMethodSelected,
+  feePayer,
 }: PaymentMethodTokenRowProps) {
   const theme = useCustomTheme();
 
@@ -50,6 +53,7 @@ function PaymentMethodTokenRow({
     client,
     destinationAmount,
     destinationToken,
+    feePayer,
     originToken: paymentMethod.originToken,
   });
 
@@ -158,6 +162,7 @@ export function TokenSelection({
   onBack,
   destinationToken,
   destinationAmount,
+  feePayer,
 }: TokenSelectionProps) {
   const theme = useCustomTheme();
 
@@ -271,6 +276,7 @@ export function TokenSelection({
               client={client}
               destinationAmount={destinationAmount}
               destinationToken={destinationToken}
+              feePayer={feePayer}
               key={`${method.originToken.address}-${method.originToken.chainId}`}
               onPaymentMethodSelected={onPaymentMethodSelected}
               paymentMethod={method}

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
+        }
       />
     );
   }

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"

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

@@ -102,6 +102,7 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
     '&[data-active="true"]': {
       backgroundColor: theme.colors.tertiaryBg,
     },
+    all: "unset",
     alignItems: "center",
     borderRadius: radius.md,
     boxSizing: "border-box",

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();
-}