thirdweb 5.48.1 → 5.48.2

package/src/pay/buyWithCrypto/getTransfer.ts

@@ -0,0 +1,185 @@
+import type { Hash } from "viem";
+import { getCachedChain } from "../../chains/utils.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { getContract } from "../../contract/contract.js";
+import { approve } from "../../extensions/erc20/write/approve.js";
+import type { PrepareTransactionOptions } from "../../transaction/prepare-transaction.js";
+import type { Address } from "../../utils/address.js";
+import { getClientFetch } from "../../utils/fetch.js";
+import { getPayBuyWithCryptoTransferEndpoint } from "../utils/definitions.js";
+import type {
+  QuoteApprovalInfo,
+  QuotePaymentToken,
+  QuoteTokenInfo,
+  QuoteTransactionRequest,
+} from "./commonTypes.js";
+
+/**
+ * The parameters for [`getBuyWithCryptoTransfer`](https://portal.thirdweb.com/references/typescript/v5/getBuyWithCryptoTransfer) function
+ * It facilitates a token transfer.
+ * @buyCrypto
+ */
+export type GetBuyWithCryptoTransferParams = {
+  /**
+   * A client is the entry point to the thirdweb SDK. It is required for all other actions.
+   *
+   * You can create a client using the `createThirdwebClient` function.
+   * Refer to the [Creating a Client](https://portal.thirdweb.com/typescript/v5/client) documentation for more information.
+   *
+   */
+  client: ThirdwebClient;
+
+  /**
+   * The address of wallet that pays for the tokens.
+   */
+  fromAddress: string;
+
+  /**
+   * The address of the wallet where the tokens are sent
+   */
+  toAddress: string;
+
+  /**
+   * The chain id of the transfer token.
+   */
+  chainId: number;
+
+  /**
+   * The token address of the transfer token.
+   */
+  tokenAddress: string;
+
+  /**
+   * The amount of token to be transferred.
+   */
+  amount: string;
+
+  /**
+   * Extra details to store with the purchase.
+   *
+   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   */
+  purchaseData?: object;
+};
+
+/**
+ * @buyCrypto
+ */
+type BuyWithCryptoTransferResponse = {
+  quoteId: string;
+  transactionRequest: QuoteTransactionRequest;
+  approval?: QuoteApprovalInfo;
+  fromAddress: string;
+  toAddress: string;
+  token: QuoteTokenInfo;
+  paymentToken: QuotePaymentToken;
+  processingFee: QuotePaymentToken;
+  estimatedGasCostUSDCents: number;
+};
+
+/**
+ * @buyCrypto
+ */
+export type BuyWithCryptoTransfer = {
+  transactionRequest: PrepareTransactionOptions;
+  approval?: PrepareTransactionOptions;
+  fromAddress: string;
+  toAddress: string;
+  paymentToken: QuotePaymentToken;
+  processingFee: QuotePaymentToken;
+  estimatedGasCostUSDCents: number;
+  client: ThirdwebClient;
+};
+
+/**
+ * Get a quote of type [`BuyWithCryptoTransfer`](https://portal.thirdweb.com/references/typescript/v5/BuyWithCryptoTransfer) to facilitate a token transfer transaction.
+ * Using this instead of a native transfer allows you to receive status and webhooks about successful or failed payments.
+ *
+ * Once you have the quote, you can use `prepareTransaction` and prepare the transaction for submission.
+ * @param params - object of type [`GetBuyWithCryptoTransferParams`](https://portal.thirdweb.com/references/typescript/v5/GetBuyWithCryptoTransferParams)
+ * @returns Object of type [`BuyWithCryptoTransfer`](https://portal.thirdweb.com/references/typescript/v5/BuyWithCryptoTransfer) which contains the information about the transfer
+ * @example
+ *
+ * ```ts
+ * import { getBuyWithCryptoTransfer } from "thirdweb/pay";
+ *
+ * const transfer = await getBuyWithCryptoTransfer({
+ *  client,
+ *  fromAddress: "0x...", // wallet address
+ *  toAddress: "0x...", // recipient address - likely to be your wallet
+ *  chainId: 10, // chain id of the token
+ *  tokenAddress: "0x...", // address of the token
+ *  amount: "10", // amount of token to transfer
+ *  purchaseData: {  // any metadata for you to attribute this purchase
+ *    "customerId": "yourId"
+ *  }
+ * });
+ * ```
+ * @buyCrypto
+ */
+export async function getBuyWithCryptoTransfer(
+  params: GetBuyWithCryptoTransferParams,
+): Promise<BuyWithCryptoTransfer> {
+  try {
+    const clientFetch = getClientFetch(params.client);
+
+    const response = await clientFetch(getPayBuyWithCryptoTransferEndpoint(), {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        fromAddress: params.fromAddress,
+        toAddress: params.toAddress,
+        chainId: params.chainId,
+        tokenAddress: params.tokenAddress,
+        amount: params.amount,
+        purchaseData: params.purchaseData,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorObj = await response.json();
+      if (errorObj && "error" in errorObj) {
+        throw errorObj;
+      }
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data: BuyWithCryptoTransferResponse = (await response.json()).result;
+
+    const transfer: BuyWithCryptoTransfer = {
+      transactionRequest: {
+        chain: getCachedChain(data.transactionRequest.chainId),
+        client: params.client,
+        data: data.transactionRequest.data as Hash,
+        to: data.transactionRequest.to as Address,
+        value: BigInt(data.transactionRequest.value),
+        gas: BigInt(data.transactionRequest.gasLimit),
+      },
+      approval: data.approval
+        ? approve({
+            contract: getContract({
+              client: params.client,
+              address: data.approval.tokenAddress,
+              chain: getCachedChain(data.approval.chainId),
+            }),
+            spender: data.approval.spenderAddress as Address,
+            amountWei: BigInt(data.approval.amountWei),
+          })
+        : undefined,
+      fromAddress: data.fromAddress,
+      toAddress: data.toAddress,
+      paymentToken: data.paymentToken,
+      processingFee: data.processingFee,
+      estimatedGasCostUSDCents: data.estimatedGasCostUSDCents,
+      client: params.client,
+    };
+
+    return transfer;
+  } catch (error) {
+    console.error("Error getting buy with crypto transfer", error);
+    throw error;
+  }
+}

package/src/pay/buyWithFiat/getQuote.ts

@@ -38,7 +38,7 @@ export type GetBuyWithFiatQuoteParams = {
   /**
    * Symbol of the fiat currency to buy the token with.
    */
-  fromCurrencySymbol: "USD" | "CAD" | "GBP" | "EUR";
+  fromCurrencySymbol: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
 
   /**
    * The maximum slippage in basis points (bps) allowed for the transaction.

package/src/pay/utils/definitions.ts

@@ -20,6 +20,13 @@ export const getPayBuyWithCryptoStatusUrl = () =>
 export const getPayBuyWithCryptoQuoteEndpoint = () =>
   `${getPayBaseUrl()}/buy-with-crypto/quote/v1`;
 
+/**
+ * Endpoint to get "Buy with Crypto" transfer.
+ * @internal
+ */
+export const getPayBuyWithCryptoTransferEndpoint = () =>
+  `${getPayBaseUrl()}/buy-with-crypto/transfer/v1`;
+
 /**
  * Endpoint to get a "Buy with Fiat" quote.
  * @internal

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -82,6 +82,9 @@ export type PayUIOptions = Prettify<
     buyWithFiat?:
       | {
           testMode?: boolean;
+          prefillSource?: {
+            currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
+          };
         }
       | false;
 
@@ -226,6 +229,19 @@ export type ConnectButton_detailsModalOptions = {
    */
   networkSelector?: NetworkSelectorProps;
 
+  /**
+   * Hide the "Switch Wallet" button in the `ConnectButton` Details Modal.
+   *
+   * By default it is `false`
+   * @example
+   * ```tsx
+   * <ConnectButton detailsModal={{
+   *  hideSwitchWallet: true
+   * }} />
+   * ```
+   */
+  hideSwitchWallet?: boolean;
+
   /**
    * Hide the "Disconnect Wallet" button in the `ConnectButton` Details Modal.
    *

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -49,6 +49,9 @@ export type SendTransactionPayModalConfig =
       buyWithFiat?:
         | false
         | {
+            prefillSource?: {
+              currency?: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
+            };
             testMode?: boolean;
           };
       purchaseData?: object;

package/src/react/native/ui/connect/ConnectedButton.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, View } from "react-native";
+import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
@@ -64,7 +65,7 @@ export function ConnectedButton(
                 fontSize: fontSize.sm,
               }}
             >
-              {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+              {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
               {balanceQuery.data?.symbol}
             </ThemedText>
           ) : (
@@ -80,6 +81,10 @@ export function ConnectedButton(
   );
 }
 
+function formatBalanceOnButton(num: number) {
+  return formatNumber(num, num < 1 ? 5 : 4);
+}
+
 const styles = StyleSheet.create({
   row: {
     flexDirection: "row",

package/src/react/native/ui/connect/ConnectedModal.tsx

@@ -3,6 +3,7 @@ import { Linking, StyleSheet, TouchableOpacity, View } from "react-native";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
+import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
@@ -189,7 +190,7 @@ const AccountHeader = (props: ConnectedModalProps) => {
             fontSize: fontSize.sm,
           }}
         >
-          {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+          {formatNumber(Number(balanceQuery.data.displayValue), 5)}{" "}
           {balanceQuery.data?.symbol}
         </ThemedText>
       ) : (

package/src/react/native/ui/connect/TokenListScreen.tsx

@@ -1,6 +1,7 @@
 import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../core/hooks/others/useWalletBalance.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
@@ -91,7 +92,7 @@ export const TokenRow = (props: {
           <>
             {balanceQuery.data ? (
               <ThemedText theme={theme} type="subtext">
-                {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+                {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
                 {balanceQuery.data?.symbol}
               </ThemedText>
             ) : (
@@ -125,6 +126,10 @@ export const TokenRow = (props: {
   );
 };
 
+function formatBalanceOnButton(num: number) {
+  return formatNumber(num, num < 1 ? 5 : 4);
+}
+
 const styles = StyleSheet.create({
   listContainer: {
     flexDirection: "column",

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

@@ -14,6 +14,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
+import { formatNumber } from "../../../../utils/formatNumber.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -246,9 +247,7 @@ export const ConnectedWalletDetails: React.FC<{
             color="secondaryText"
             weight={400}
           >
-            {Number.parseFloat(
-              Number(balanceQuery.data.displayValue).toFixed(3),
-            )}{" "}
+            {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
             {balanceQuery.data.symbol}
           </Text>
         ) : (
@@ -352,9 +351,7 @@ function DetailsModal(props: {
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
           <Text color="secondaryText" size="xs">
             {balanceQuery.data ? (
-              Number.parseFloat(
-                Number(balanceQuery.data.displayValue).toFixed(3),
-              )
+              formatNumber(Number(balanceQuery.data.displayValue), 5)
             ) : (
               <Skeleton height="1em" width="100px" />
             )}{" "}
@@ -374,84 +371,91 @@ function DetailsModal(props: {
     </MenuButton>
   );
 
+  const avatarContent = (
+    <Container
+      style={{
+        position: "relative",
+        height: `${iconSize.xl}px`,
+        width: `${iconSize.xl}px`,
+      }}
+    >
+      <Container
+        style={{
+          width: "100%",
+          height: "100%",
+          borderRadius: "100%",
+          overflow: "hidden",
+        }}
+      >
+        {ensAvatarQuery.data ? (
+          <img
+            src={ensAvatarQuery.data}
+            style={{
+              width: iconSize.xxl,
+              height: iconSize.xxl,
+            }}
+            alt=""
+          />
+        ) : (
+          activeAccount && (
+            <Blobbie
+              address={activeAccount.address}
+              size={Number(iconSize.xxl)}
+            />
+          )
+        )}
+      </Container>
+      <Container
+        style={{
+          position: "absolute",
+          bottom: -2,
+          right: -2,
+        }}
+      >
+        <IconContainer
+          style={{
+            background: theme.colors.modalBg,
+          }}
+          padding="4px"
+        >
+          {activeWallet && (
+            <WalletImage
+              style={{ borderRadius: 0 }}
+              id={activeWallet.id}
+              client={client}
+              size="12"
+            />
+          )}
+        </IconContainer>
+      </Container>
+    </Container>
+  );
+
   let content = (
     <div>
       <Spacer y="xs" />
       <Container p="lg" gap="sm" flex="row" center="y">
-        <ToolTip tip="Switch wallet">
-          <div
-            style={{
-              cursor: "pointer",
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "w") {
-                setScreen("wallet-manager");
-              }
-            }}
-            onClick={() => {
-              setScreen("wallet-manager");
-            }}
-          >
-            <Container
+        {props.detailsModal?.hideSwitchWallet ? (
+          avatarContent
+        ) : (
+          <ToolTip tip="Switch wallet">
+            <div
               style={{
-                position: "relative",
-                height: `${iconSize.xl}px`,
-                width: `${iconSize.xl}px`,
+                cursor: "pointer",
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "w") {
+                  setScreen("wallet-manager");
+                }
+              }}
+              onClick={() => {
+                setScreen("wallet-manager");
               }}
             >
-              <Container
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  borderRadius: "100%",
-                  overflow: "hidden",
-                }}
-              >
-                {ensAvatarQuery.data ? (
-                  <img
-                    src={ensAvatarQuery.data}
-                    style={{
-                      width: iconSize.xxl,
-                      height: iconSize.xxl,
-                    }}
-                    alt=""
-                  />
-                ) : (
-                  activeAccount && (
-                    <Blobbie
-                      address={activeAccount.address}
-                      size={Number(iconSize.xxl)}
-                    />
-                  )
-                )}
-              </Container>
-              <Container
-                style={{
-                  position: "absolute",
-                  bottom: -2,
-                  right: -2,
-                }}
-              >
-                <IconContainer
-                  style={{
-                    background: theme.colors.modalBg,
-                  }}
-                  padding="4px"
-                >
-                  {activeWallet && (
-                    <WalletImage
-                      style={{ borderRadius: 0 }}
-                      id={activeWallet.id}
-                      client={client}
-                      size="12"
-                    />
-                  )}
-                </IconContainer>
-              </Container>
-            </Container>
-          </div>
-        </ToolTip>
-
+              {avatarContent}
+            </div>
+          </ToolTip>
+        )}
         <Container flex="column" gap="3xs">
           <div
             style={{
@@ -909,6 +913,10 @@ function DetailsModal(props: {
   );
 }
 
+function formatBalanceOnButton(num: number) {
+  return formatNumber(num, num < 1 ? 5 : 4);
+}
+
 const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
@@ -1257,6 +1265,13 @@ export type UseWalletDetailsModalOptions = {
    */
   hideDisconnect?: boolean;
 
+  /**
+   * Hide the "Switch Wallet" button in the Wallet Details Modal.
+   *
+   * By default it is `false`
+   */
+  hideSwitchWallet?: boolean;
+
   /**
    * Callback to be called when a wallet is disconnected by clicking the "Disconnect Wallet" button in the Wallet Details Modal.
    *
@@ -1363,6 +1378,7 @@ export function useWalletDetailsModal() {
             detailsModal={{
               footer: props.footer,
               hideDisconnect: props.hideDisconnect,
+              hideSwitchWallet: props.hideSwitchWallet,
               networkSelector: props.networkSelector,
               payOptions: props.payOptions,
               showTestnetFaucet: props.showTestnetFaucet,

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

@@ -0,0 +1,21 @@
+import type { IconFC } from "../types.js";
+
+export const JPYIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+    >
+      <g fill="none" fill-rule="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"
+          fill="#ffffff"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -325,12 +325,19 @@ function BuyScreenContent(props: BuyScreenContentProps) {
         onBack={goBack}
         payer={payer}
         client={props.client}
-        onDone={onDone}
         chain={toChain}
         token={toToken}
         tokenAmount={tokenAmount}
         receiverAddress={receiverAddress}
         transactionMode={props.payOptions.mode === "transaction"}
+        isEmbed={props.isEmbed}
+        onDone={onDone}
+        onTryAgain={() => {
+          setScreen({
+            id: "buy-with-crypto",
+          });
+        }}
+        onSuccess={onSwapSuccess}
       />
     );
   }

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

@@ -2,23 +2,24 @@ import { RadiobuttonIcon } from "@radix-ui/react-icons";
 import { CADIcon } from "../../../icons/currencies/CADIcon.js";
 import { EURIcon } from "../../../icons/currencies/EURIcon.js";
 import { GBPIcon } from "../../../icons/currencies/GBPIcon.js";
+import { JPYIcon } from "../../../icons/currencies/JPYIcon.js";
 import { USDIcon } from "../../../icons/currencies/USDIcon.js";
 import type { IconFC } from "../../../icons/types.js";
 
 export type CurrencyMeta = {
-  shorthand: "USD" | "CAD" | "GBP" | "EUR";
+  shorthand: "USD" | "CAD" | "GBP" | "EUR" | "JPY";
   name: string;
   icon: IconFC;
 };
 
-export const defaultSelectedCurrency: CurrencyMeta = {
+export const usdCurrency: CurrencyMeta = {
   shorthand: "USD",
   name: "US Dollar",
   icon: USDIcon,
 };
 
 export const currencies: CurrencyMeta[] = [
-  defaultSelectedCurrency,
+  usdCurrency,
   {
     shorthand: "CAD",
     name: "Canadian Dollar",
@@ -34,6 +35,11 @@ export const currencies: CurrencyMeta[] = [
     name: "Euro",
     icon: EURIcon,
   },
+  {
+    shorthand: "JPY",
+    name: "Japanese Yen",
+    icon: JPYIcon,
+  },
 ];
 
 export function getCurrencyMeta(shorthand: string): CurrencyMeta {