thirdweb 5.88.6 → 5.88.8-nightly-1fa36c1d56758788a8f9053f8929497bacb2b115-20250224233959

package/src/react/core/hooks/pay/useBuyWithFiatStatus.ts

@@ -4,6 +4,7 @@ import {
   type GetBuyWithFiatStatusParams,
   getBuyWithFiatStatus,
 } from "../../../../pay/buyWithFiat/getStatus.js";
+import type { WithPickedOnceQueryOptions } from "../types.js";
 
 /**
  * A hook to get a status of a "Buy with Fiat" transaction to determine if the transaction is completed, failed or pending.
@@ -34,7 +35,7 @@ import {
  * @buyCrypto
  */
 export function useBuyWithFiatStatus(
-  params?: GetBuyWithFiatStatusParams,
+  params?: WithPickedOnceQueryOptions<GetBuyWithFiatStatusParams>,
 ): UseQueryResult<BuyWithFiatStatus> {
   return useQuery({
     queryKey: ["useBuyWithFiatStatus", params],
@@ -64,5 +65,6 @@ export function useBuyWithFiatStatus(
     },
     refetchIntervalInBackground: true,
     retry: true,
+    ...params?.queryOptions,
   });
 }

package/src/react/core/hooks/wallets/useSendToken.ts

@@ -1,13 +1,15 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { resolveAddress } from "../../../../extensions/ens/resolve-address.js";
 import { transfer } from "../../../../extensions/erc20/write/transfer.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
+import { waitForReceipt } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import { prepareTransaction } from "../../../../transaction/prepare-transaction.js";
 import { isAddress } from "../../../../utils/address.js";
 import { isValidENSName } from "../../../../utils/ens/isValidENSName.js";
 import { toWei } from "../../../../utils/units.js";
+import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance.js";
 import { useActiveWallet } from "./useActiveWallet.js";
 
 /**
@@ -33,6 +35,7 @@ import { useActiveWallet } from "./useActiveWallet.js";
  */
 export function useSendToken(client: ThirdwebClient) {
   const wallet = useActiveWallet();
+  const queryClient = useQueryClient();
   return useMutation({
     async mutationFn(option: {
       tokenAddress?: string;
@@ -83,7 +86,7 @@ export function useSendToken(client: ThirdwebClient) {
           value: toWei(amount),
         });
 
-        await sendTransaction({
+        return sendTransaction({
           transaction: sendNativeTokenTx,
           account,
         });
@@ -103,11 +106,24 @@ export function useSendToken(client: ThirdwebClient) {
           to,
         });
 
-        await sendTransaction({
+        return sendTransaction({
           transaction: tx,
           account,
         });
       }
     },
+    onSettled: async (data, error) => {
+      if (error) {
+        return;
+      }
+      if (data?.transactionHash) {
+        await waitForReceipt({
+          transactionHash: data.transactionHash,
+          client,
+          chain: data.chain,
+        });
+      }
+      invalidateWalletBalance(queryClient);
+    },
   });
 }

package/src/react/core/providers/invalidateWalletBalance.ts

@@ -4,9 +4,14 @@ export function invalidateWalletBalance(
   queryClient: QueryClient,
   chainId?: number,
 ) {
-  return queryClient.invalidateQueries({
+  queryClient.invalidateQueries({
     // invalidate any walletBalance queries for this chainId
     // TODO: add wallet address in here if we can get it somehow
     queryKey: chainId ? ["walletBalance", chainId] : ["walletBalance"],
   });
+  queryClient.invalidateQueries({
+    queryKey: chainId
+      ? ["internal_account_balance", chainId]
+      : ["internal_account_balance"],
+  });
 }

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

@@ -2,7 +2,10 @@ import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
 import { convertCryptoToFiat } from "../../../pay/convert/cryptoToFiat.js";
-import type { SupportedFiatCurrency } from "../../../pay/convert/type.js";
+import {
+  type SupportedFiatCurrency,
+  getFiatSymbol,
+} from "../../../pay/convert/type.js";
 import { type Address, isAddress } from "../../../utils/address.js";
 import { formatNumber } from "../../../utils/formatNumber.js";
 import { shortenLargeNumber } from "../../../utils/shortenLargeNumber.js";
@@ -112,13 +115,6 @@ export async function loadAccountBalance(props: {
   };
 }
 
-function getFiatSymbol(showBalanceInFiat: SupportedFiatCurrency) {
-  switch (showBalanceInFiat) {
-    case "USD":
-      return "$";
-  }
-}
-
 /**
  * Format the display balance for both crypto and fiat, in the Details button and Modal
  * If both crypto balance and fiat balance exist, we have to keep the string very short to avoid UI issues.

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

@@ -704,7 +704,7 @@ export const ChainButton = /* @__PURE__ */ memo(function ChainButton(props: {
               {confirming && (
                 <>
                   <Text size="xs" color="accentText">
-                    {locale.confirmInWallet}
+                    {locale.switchingNetwork}
                   </Text>
                   <Spinner size="xs" color="accentText" />
                 </>

package/src/react/web/ui/ConnectWallet/icons/currencies/JPYIcon.tsx

@@ -9,7 +9,7 @@ export const JPYIcon: IconFC = (props) => {
       xmlns="http://www.w3.org/2000/svg"
       role="presentation"
     >
-      <g fill="none" fill-rule="evenodd">
+      <g fill="none" fillRule="evenodd">
         <circle cx="16" cy="16" fill="#a81b1b" r="16" />
         <path
           d="M17.548 18.711v1.878h5.063v2.288h-5.063V25.5h-3.096v-2.623H9.389v-2.288h5.063v-1.878H9.389v-2.288h4.171L7.5 7.5h3.752l4.8 7.534L20.853 7.5H24.5l-6.086 8.923h4.197v2.288z"

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -39,8 +39,8 @@ import { DirectPaymentModeScreen } from "./DirectPaymentModeScreen.js";
 import { PayTokenIcon } from "./PayTokenIcon.js";
 import { TransactionModeScreen } from "./TransactionModeScreen.js";
 import { CurrencySelection } from "./fiat/CurrencySelection.js";
-import { FiatFlow } from "./fiat/FiatFlow.js";
 import { FiatScreenContent } from "./fiat/FiatScreenContent.js";
+import { OnRampScreen } from "./fiat/OnRampScreen.js";
 import type { SelectedScreen } from "./main/types.js";
 import {
   type PaymentMethods,
@@ -312,8 +312,12 @@ function BuyScreenContent(props: BuyScreenContentProps) {
   }
 
   if (screen.id === "fiat-flow" && payer) {
+    const defaultRecipientAddress = (
+      props.payOptions as Extract<PayUIOptions, { mode: "direct_payment" }>
+    )?.paymentInfo?.sellerAddress;
+    const receiverAddress = defaultRecipientAddress || payer.account.address;
     return (
-      <FiatFlow
+      <OnRampScreen
         title={props.title}
         transactionMode={payOptions.mode === "transaction"}
         quote={screen.quote}
@@ -328,10 +332,10 @@ function BuyScreenContent(props: BuyScreenContentProps) {
           props.payOptions.buyWithFiat?.testMode === true
         }
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-        openedWindow={screen.openedWindow}
         onDone={onDone}
         isEmbed={props.isEmbed}
         payer={payer}
+        receiverAddress={receiverAddress}
         onSuccess={onFiatSuccess}
       />
     );
@@ -558,6 +562,7 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                 supportedSourcesQuery.data &&
                 sourceSupportedTokens && (
                   <TokenSelectorScreen
+                    fiatSupported={props.payOptions.buyWithFiat !== false}
                     client={props.client}
                     sourceTokens={sourceSupportedTokens}
                     sourceSupportedTokens={sourceSupportedTokens}

package/src/react/web/ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx

@@ -12,7 +12,7 @@ import { Skeleton } from "../../../components/Skeleton.js";
 import { Container } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
-import type { CurrencyMeta } from "./fiat/currencies.js";
+import { type CurrencyMeta, getFiatIcon } from "./fiat/currencies.js";
 
 /**
  * Shows an amount "value" and renders the selected token and chain
@@ -55,7 +55,7 @@ export function PayWithCreditCard(props: {
         }}
         gap="sm"
       >
-        <props.currency.icon size={iconSize.md} />
+        {getFiatIcon(props.currency, "md")}
         <Container flex="row" center="y" gap="xxs" color="secondaryText">
           <Text color="primaryText">{props.currency.shorthand}</Text>
           <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />

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

@@ -1,14 +1,11 @@
 import styled from "@emotion/styled";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
-import {
-  iconSize,
-  spacing,
-} from "../../../../../../core/design-system/index.js";
+import { spacing } from "../../../../../../core/design-system/index.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
-import { type CurrencyMeta, currencies } from "./currencies.js";
+import { type CurrencyMeta, currencies, getFiatIcon } from "./currencies.js";
 
 export function CurrencySelection(props: {
   onSelect: (currency: CurrencyMeta) => void;
@@ -33,7 +30,7 @@ export function CurrencySelection(props: {
               onClick={() => props.onSelect(c)}
               gap="sm"
             >
-              <c.icon size={iconSize.lg} />
+              {getFiatIcon(c, "lg")}
               <Container flex="column" gap="xxs">
                 <Text color="primaryText">{c.shorthand}</Text>
                 <Text size="sm">{c.name}</Text>

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

@@ -3,7 +3,6 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import type { FiatProvider } from "../../../../../../../pay/utils/commonTypes.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import {
@@ -33,9 +32,7 @@ import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
 import { EstimatedTimeAndFees } from "../EstimatedTimeAndFees.js";
 import { PayWithCreditCard } from "../PayWIthCreditCard.js";
 import type { SelectedScreen } from "../main/types.js";
-import { openOnrampPopup } from "../openOnRamppopup.js";
 import { FiatFees } from "../swap/Fees.js";
-import { addPendingTx } from "../swap/pendingSwapTx.js";
 import type { PayerInfo } from "../types.js";
 import { Providers } from "./Providers.js";
 import type { CurrencyMeta } from "./currencies.js";
@@ -113,25 +110,9 @@ export function FiatScreenContent(props: {
       return;
     }
 
-    const hasTwoSteps = isSwapRequiredPostOnramp(fiatQuoteQuery.data);
-    let openedWindow: Window | null = null;
-
-    if (!hasTwoSteps) {
-      openedWindow = openOnrampPopup(
-        fiatQuoteQuery.data.onRampLink,
-        typeof props.theme === "string" ? props.theme : props.theme.type,
-      );
-
-      addPendingTx({
-        type: "fiat",
-        intentId: fiatQuoteQuery.data.intentId,
-      });
-    }
-
     setScreen({
       id: "fiat-flow",
       quote: fiatQuoteQuery.data,
-      openedWindow,
     });
   }
 

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

@@ -7,7 +7,6 @@ import { useMemo } from "react";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
-import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
@@ -36,7 +35,7 @@ import {
   type FiatStatusMeta,
   getBuyWithFiatStatusMeta,
 } from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta } from "./currencies.js";
+import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
 
 export type BuyWithFiatPartialQuote = {
   fromCurrencySymbol: string;
@@ -58,31 +57,6 @@ export type BuyWithFiatPartialQuote = {
   };
 };
 
-export function fiatQuoteToPartialQuote(
-  quote: BuyWithFiatQuote,
-): BuyWithFiatPartialQuote {
-  const data: BuyWithFiatPartialQuote = {
-    fromCurrencyAmount: quote.fromCurrencyWithFees.amount,
-    fromCurrencySymbol: quote.fromCurrencyWithFees.currencySymbol,
-    onRampTokenAmount: quote.onRampToken.amount,
-    toTokenAmount: quote.estimatedToAmountMin,
-    onRampToken: {
-      chainId: quote.onRampToken.token.chainId,
-      tokenAddress: quote.onRampToken.token.tokenAddress,
-      name: quote.onRampToken.token.name,
-      symbol: quote.onRampToken.token.symbol,
-    },
-    toToken: {
-      chainId: quote.toToken.chainId,
-      tokenAddress: quote.toToken.tokenAddress,
-      name: quote.toToken.name,
-      symbol: quote.toToken.symbol,
-    },
-  };
-
-  return data;
-}
-
 export function FiatSteps(props: {
   title: string;
   partialQuote: BuyWithFiatPartialQuote;
@@ -171,7 +145,7 @@ export function FiatSteps(props: {
     </div>
   );
 
-  const fiatIcon = <currency.icon size={iconSize.sm} />;
+  const fiatIcon = getFiatIcon(currency, "sm");
 
   const onRampTokenIcon = (
     <PayTokenIcon
@@ -541,9 +515,11 @@ function PaymentSubStep(props: {
   );
 }
 
-function StepContainer(props: {
+export function StepContainer(props: {
   state?: FiatStatusMeta["progressStatus"];
   children: React.ReactNode;
+  style?: React.CSSProperties;
+  index?: number;
 }) {
   let color: keyof Theme["colors"] = "borderColor";
   let text: string | undefined;
@@ -576,21 +552,22 @@ function StepContainer(props: {
         borderWidth: "1px",
         borderStyle: "solid",
         position: "relative",
+        ...props.style,
       }}
     >
       {props.children}
       <div
         style={{
           position: "absolute",
-          right: spacing.sm,
-          top: spacing.sm,
+          right: spacing.xs,
+          top: spacing.xs,
           display: "flex",
           gap: spacing.xs,
           alignItems: "center",
         }}
       >
         {props.state && text && (
-          <Text size="sm" color={color}>
+          <Text size="xs" color={color}>
             {text}
           </Text>
         )}

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

@@ -14,7 +14,7 @@ import { ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
 import type { FiatStatusMeta } from "../pay-transactions/statusMeta.js";
-import { getCurrencyMeta } from "./currencies.js";
+import { getCurrencyMeta, getFiatIcon } from "./currencies.js";
 
 /**
  * Show a table with the details of a "OnRamp" transaction step in the "Buy with Fiat" flow.
@@ -71,7 +71,7 @@ export function OnRampTxDetailsTable(props: {
           }}
         >
           <Container flex="row" gap="xs" center="y">
-            <currencyMeta.icon size={iconSize.sm} />
+            {getFiatIcon(currencyMeta, "sm")}
             <Text color="primaryText">
               {formatNumber(Number(props.fiat.amount), 2)}{" "}
               {props.fiat.currencySymbol}