thirdweb 5.47.1 → 5.48.0

package/src/exports/transaction.ts

@@ -69,3 +69,11 @@ export {
 export type { WaitForReceiptOptions } from "../transaction/actions/wait-for-tx-receipt.js";
 
 export type { TransactionReceipt } from "viem";
+
+/**
+ * Gasless types
+ */
+export type { GaslessOptions } from "../transaction/actions/gasless/types.js";
+export type { EngineOptions } from "../transaction/actions/gasless/providers/engine.js";
+export type { OpenZeppelinOptions } from "../transaction/actions/gasless/providers/openzeppelin.js";
+export type { BiconomyOptions } from "../transaction/actions/gasless/providers/biconomy.js";

package/src/exports/utils.ts

@@ -176,3 +176,8 @@ export {
 export type { NFTMetadata, NFTInput } from "../utils/nft/parseNft.js";
 
 export { parseAbiParams } from "../utils/contract/parse-abi-params.js";
+
+// ------------------------------------------------
+// bigint
+// ------------------------------------------------
+export { max, min } from "../utils/bigint.js";

package/src/extensions/erc721/read/getOwnedNFTs.ts

@@ -13,6 +13,7 @@ export type GetOwnedNFTsParams = GetOwnedTokenIdsParams;
 
 /**
  * Retrieves the owned NFTs for a given owner.
+ * This extension only works with ERC721 contracts that support the [`tokenOfOwnerByIndex`](https://portal.thirdweb.com/references/typescript/v5/erc721/tokenOfOwnerByIndex) method
  * @param options - The options for retrieving the owned NFTs.
  * @returns A promise that resolves to an array of NFTs owned by the specified owner.
  * @extension ERC721

package/src/extensions/lens/read/resolveAddress.test.ts

@@ -3,7 +3,7 @@ import { TEST_CLIENT } from "~test/test-clients.js";
 import { isAddress } from "../../../utils/address.js";
 import { resolveAddress } from "./resolveAddress.js";
 
-describe("resolve lens address", () => {
+describe.runIf(process.env.TW_SECRET_KEY)("resolve lens address", () => {
   it("should resolve to correct address", async () => {
     const address = await resolveAddress({
       client: TEST_CLIENT,

package/src/react/core/design-system/index.ts

@@ -170,6 +170,7 @@ export const fontSize = {
 };
 
 export const spacing = {
+  "4xs": "2px",
   "3xs": "4px",
   xxs: "6px",
   xs: "8px",

package/src/react/core/hooks/transaction/transaction-button-utils.ts

@@ -15,6 +15,7 @@ import type {
 
 /**
  * Props for the [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton) component.
+ * @transaction
  */
 export type TransactionButtonProps = {
   /**

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

@@ -1,16 +1,20 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import type { Chain } from "../../../../chains/types.js";
+import { getGasPrice } from "../../../../gas/get-gas-price.js";
 import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
 import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
+import { estimateGasCost } from "../../../../transaction/actions/estimate-gas-cost.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.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";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { getWalletBalance } from "../../../../wallets/utils/getWalletBalance.js";
 import type { LocaleId } from "../../../web/ui/types.js";
 import type { Theme } from "../../design-system/index.js";
 import type { SupportedTokens } from "../../utils/defaultTokens.js";
+import { hasSponsoredTransactionsEnabled } from "../../utils/wallet.js";
 
 /**
  * Configuration for the "Pay Modal" that opens when the user doesn't have enough funds to send a transaction.
@@ -157,7 +161,33 @@ export function useSendTransactionCore(args: {
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
 
-            if (nativeValue > 0n || erc20Value > 0n) {
+            const [nativeBalance, erc20Balance, gasCost] = await Promise.all([
+              getWalletBalance({
+                client: tx.client,
+                address: account.address,
+                chain: tx.chain,
+              }),
+              _erc20Value?.tokenAddress
+                ? getWalletBalance({
+                    client: tx.client,
+                    address: account.address,
+                    chain: tx.chain,
+                  })
+                : undefined,
+              getTotalTxCostForBuy(tx, account.address),
+            ]);
+
+            const gasSponsored = hasSponsoredTransactionsEnabled(wallet);
+            const txGasCost = gasSponsored ? 0n : gasCost;
+            const nativeCost = nativeValue + txGasCost;
+
+            const shouldShowModal =
+              (erc20Value > 0n &&
+                erc20Balance &&
+                erc20Balance.value < erc20Value) ||
+              (nativeCost > 0n && nativeBalance.value < nativeCost);
+
+            if (shouldShowModal) {
               showPayModal({
                 tx,
                 sendTx,
@@ -177,3 +207,42 @@ export function useSendTransactionCore(args: {
     },
   });
 }
+
+export async function getTotalTxCostForBuy(
+  tx: PreparedTransaction,
+  from?: string,
+) {
+  try {
+    const gasCost = await estimateGasCost({
+      transaction: tx,
+      from,
+    });
+
+    const bufferCost = gasCost.wei / 10n;
+
+    // Note: get tx.value AFTER estimateGasCost
+    const txValue = await resolvePromisedValue(tx.value);
+
+    // add 10% extra gas cost to the estimate to ensure user buys enough to cover the tx cost
+    return gasCost.wei + bufferCost + (txValue || 0n);
+  } catch (e) {
+    if (from) {
+      // try again without passing from
+      return await getTotalTxCostForBuy(tx);
+    }
+    // fallback if both fail, use the tx value + 2M * gas price
+    const value = await resolvePromisedValue(tx.value);
+
+    const gasPrice = await getGasPrice({
+      client: tx.client,
+      chain: tx.chain,
+    });
+
+    const buffer = 2_000_000n * gasPrice;
+
+    if (!value) {
+      return 0n + buffer;
+    }
+    return value + buffer;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
+
+/**
+ * A hook to add a connected wallet without setting the active wallet.
+ * @returns A function that lets you add a connected wallet.
+ * @example
+ * ```jsx
+ * import { useAddConnectedWallet } from "thirdweb/react";
+ *
+ * const addConnectedWallet = useAddConnectedWallet();
+ *
+ * // later in your code
+ * await addConnectedWallet(wallet);
+ * ```
+ * @walletConnection
+ */
+export function useAddConnectedWallet() {
+  const manager = useConnectionManagerCtx("useAddConnectedWallet");
+  return manager.handleConnection;
+}

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

@@ -582,7 +582,7 @@ function SignInView({
   );
 }
 
-function OrDivider({ theme }: { theme: Theme }) {
+export function OrDivider({ theme }: { theme: Theme }) {
   return (
     <View
       style={{

package/src/react/native/ui/transaction/TransactionButton.tsx

@@ -11,7 +11,7 @@ import { ThemedSpinner } from "../components/spinner.js";
 
 /**
  * TransactionButton component is used to render a button that triggers a transaction.
- * - It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction.
+ * It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction.
  * @param props - The props for this component.
  * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details.
  * @example

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

@@ -19,6 +19,7 @@ import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import {
   CustomThemeProvider,
+  parseTheme,
   useCustomTheme,
 } from "../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -51,15 +52,20 @@ import type {
   SupportedTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
-import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
+import {
+  useConnectedWalletDetails,
+  useWalletInfo,
+} from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
-import { Img } from "../components/Img.js";
+import { IconContainer } from "../components/IconContainer.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 { ToolTip } from "../components/Tooltip.js";
+import { WalletImage } from "../components/WalletImage.js";
 import { Container, Line } from "../components/basic.js";
 import { Button, IconButton } from "../components/buttons.js";
 import { Link, Text } from "../components/text.js";
@@ -78,8 +84,6 @@ import { onModalUnmount } from "./constants.js";
 import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
 import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
-import { ShuffleIconLucide } from "./icons/ShuffleIconLucide.js";
-import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
@@ -125,7 +129,6 @@ export const ConnectedWalletDetails: React.FC<{
   const setRootEl = useContext(SetRootElementContext);
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
-  const theme = useCustomTheme();
 
   const { ensAvatarQuery, addressOrENS, balanceQuery } =
     useConnectedWalletDetails(
@@ -191,36 +194,37 @@ export const ConnectedWalletDetails: React.FC<{
       data-test="connected-wallet-details"
       onClick={openModal}
     >
-      {ensAvatarQuery.data ? (
-        <Img
-          src={ensAvatarQuery.data}
-          width="50px"
-          height="50px"
-          style={{
-            width: 50,
-            height: 50,
-          }}
-          client={client}
-        />
-      ) : (
-        activeAccount && <Blobbie address={activeAccount.address} size={50} />
-      )}
+      <Container
+        style={{
+          borderRadius: "100%",
+          overflow: "hidden",
+          width: "35px",
+          height: "35px",
+        }}
+      >
+        {ensAvatarQuery.data ? (
+          <img
+            alt=""
+            src={ensAvatarQuery.data}
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        ) : (
+          activeAccount && <Blobbie address={activeAccount.address} size={35} />
+        )}
+      </Container>
       <Container
         flex="column"
-        gap="3xs"
-        px="sm"
-        py="xs"
+        gap="4xs"
         style={{
-          border: `1px solid ${theme.colors.borderColor}`,
           textOverflow: "ellipsis",
-          minWidth: "115px",
-          height: "50px",
           whiteSpace: "nowrap",
           borderRadius: `0 ${radius.md} ${radius.md} 0`,
         }}
       >
         {/* Address */}
-
         {addressOrENS ? (
           <Text
             size="xs"
@@ -231,7 +235,7 @@ export const ConnectedWalletDetails: React.FC<{
             {addressOrENS}
           </Text>
         ) : (
-          <Skeleton height={fontSize.sm} width="80px" />
+          <Skeleton height={fontSize.xs} width="80px" />
         )}
 
         {/* Balance */}
@@ -239,9 +243,12 @@ export const ConnectedWalletDetails: React.FC<{
           <Text
             className={`${TW_CONNECTED_WALLET}__balance`}
             size="xs"
-            weight={500}
+            color="secondaryText"
+            weight={400}
           >
-            {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+            {Number.parseFloat(
+              Number(balanceQuery.data.displayValue).toFixed(3),
+            )}{" "}
             {balanceQuery.data.symbol}
           </Text>
         ) : (
@@ -282,6 +289,7 @@ function DetailsModal(props: {
       activeAccount,
       props.displayBalanceToken,
     );
+  const theme = parseTheme(props.theme);
 
   const activeWallet = useActiveWallet();
   const chainIconQuery = useChainIconUrl(walletChain);
@@ -340,8 +348,18 @@ function DetailsModal(props: {
       {chainNameQuery.isLoading ? (
         <Skeleton height={"16px"} width={"150px"} />
       ) : (
-        <Text color="primaryText" multiline>
+        <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
+          <Text color="secondaryText" size="xs">
+            {balanceQuery.data ? (
+              Number.parseFloat(
+                Number(balanceQuery.data.displayValue).toFixed(3),
+              )
+            ) : (
+              <Skeleton height="1em" width="100px" />
+            )}{" "}
+            {balanceQuery.data?.symbol}
+          </Text>
         </Text>
       )}
 
@@ -358,114 +376,103 @@ function DetailsModal(props: {
 
   let content = (
     <div>
-      <Spacer y="xl" />
-
-      <IconButton
-        style={{
-          position: "absolute",
-          top: spacing.lg,
-          left: spacing.lg,
-          transform: "translateX(-6px)",
-        }}
-        onClick={() => {
-          setScreen("wallet-manager");
-        }}
-      >
-        <div
-          style={{
-            width: `${iconSize.md}px`,
-            height: `${iconSize.md}px`,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <ShuffleIconLucide size="20" />
-        </div>
-      </IconButton>
-
-      <Container px="lg" flex="column" center="x">
-        <Container
-          style={{
-            position: "relative",
-            height: `${iconSize.xxl}px`,
-            width: `${iconSize.xxl}px`,
-            overflow: "visible",
-          }}
-        >
-          {ensAvatarQuery.data ? (
-            <Img
-              src={ensAvatarQuery.data}
-              width={iconSize.xxl}
-              height={iconSize.xxl}
+      <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
               style={{
-                borderRadius: radius.md,
+                position: "relative",
+                height: `${iconSize.xl}px`,
+                width: `${iconSize.xl}px`,
               }}
-              client={client}
-            />
-          ) : (
-            activeAccount && (
+            >
               <Container
-                style={{ borderRadius: radius.md, overflow: "hidden" }}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "100%",
+                  overflow: "hidden",
+                }}
               >
-                <Blobbie
-                  address={activeAccount.address}
-                  size={Number(iconSize.xxl)}
-                />
+                {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>
-
-        <Spacer y="md" />
-
-        <ConnectedToSmartWallet client={props.client} connectLocale={locale} />
-
-        {(activeWallet?.id === "embedded" || activeWallet?.id === "inApp") && (
-          <InAppWalletUserInfo client={props.client} />
-        )}
+              <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>
 
-        {/* Address */}
-        <div
-          style={{
-            display: "flex",
-            gap: spacing.xxs,
-            alignItems: "center",
-            transform: "translateX(10px)",
-          }}
-          data-test="connected-wallet-address"
-          data-address={activeAccount?.address}
-        >
-          <Text color="primaryText" weight={500} size="md">
-            {addressOrENS}
-          </Text>
-          <IconButton
+        <Container flex="column" gap="3xs">
+          <div
             style={{
-              padding: "3px",
+              display: "flex",
+              gap: spacing.xxs,
+              alignItems: "center",
             }}
-            data-test="copy-address"
           >
-            <CopyIcon
-              text={activeAccount?.address || ""}
-              tip={locale.copyAddress}
-              side="top"
-            />
-          </IconButton>
-        </div>
-
-        <Spacer y="xxs" />
-
-        {/* Balance */}
-        <Text weight={500} size="sm">
-          {balanceQuery.data ? (
-            Number(balanceQuery.data.displayValue).toFixed(3)
-          ) : (
-            <Skeleton height="1em" width="100px" />
-          )}{" "}
-          {balanceQuery.data?.symbol}{" "}
-        </Text>
+            <Text color="primaryText" weight={500} size="md">
+              {addressOrENS}
+            </Text>
+            <IconButton>
+              <CopyIcon
+                text={activeAccount?.address || ""}
+                tip={locale.copyAddress}
+              />
+            </IconButton>
+          </div>
+          <InAppWalletUserInfo client={client} locale={locale} />
+        </Container>
       </Container>
-      <Spacer y="lg" />
       <Container px="lg">
         {/* Send, Receive, Swap */}
         <Container
@@ -826,6 +833,7 @@ function DetailsModal(props: {
         }}
         client={client}
         locale={locale}
+        walletConnect={props.connectOptions?.walletConnect}
       />
     );
   }
@@ -910,10 +918,13 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
     borderRadius: radius.md,
     cursor: "pointer",
     display: "inline-flex",
+    gap: spacing.xs,
+    padding: spacing.xs,
     alignItems: "center",
     minWidth: "165px",
     height: "50px",
     boxSizing: "border-box",
+    border: `1px solid ${theme.colors.borderColor}`,
     WebkitTapHighlightColor: "transparent",
     lineHeight: "normal",
     animation: `${fadeInAnimation} 300ms ease`,
@@ -962,20 +973,8 @@ function ConnectedToSmartWallet(props: {
   }, [activeAccount, chain, client, isSmartWallet]);
 
   const content = (
-    <Container
-      flex="row"
-      bg="secondaryButtonBg"
-      gap="xxs"
-      style={{
-        borderRadius: radius.md,
-        padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xs}`,
-      }}
-      center="y"
-    >
-      <Container flex="row" color="accentText" center="both">
-        <SmartWalletBadgeIcon size={iconSize.xs} />
-      </Container>
-      <Text size="xs" color="secondaryButtonText">
+    <Container flex="row" gap="3xs" center="y">
+      <Text size="xs" weight={400} color="secondaryText">
         {locale.connectedToSmartWallet}
       </Text>
     </Container>
@@ -997,8 +996,6 @@ function ConnectedToSmartWallet(props: {
         ) : (
           <Text size="sm"> {content}</Text>
         )}
-
-        <Spacer y="xs" />
       </>
     );
   }
@@ -1006,9 +1003,15 @@ function ConnectedToSmartWallet(props: {
   return null;
 }
 
-function InAppWalletUserInfo(props: { client: ThirdwebClient }) {
-  const { client } = props;
+function InAppWalletUserInfo(props: {
+  client: ThirdwebClient;
+  locale: ConnectLocale;
+}) {
+  const { client, locale } = props;
   const account = useActiveAccount();
+  const activeWallet = useActiveWallet();
+  const { data: walletInfo } = useWalletInfo(activeWallet?.id);
+  const isSmartWallet = hasSmartAccount(activeWallet);
 
   const userInfoQuery = useQuery({
     queryKey: ["in-app-wallet-user", client, account?.address],
@@ -1030,21 +1033,19 @@ function InAppWalletUserInfo(props: { client: ThirdwebClient }) {
     },
   });
 
-  if (userInfoQuery.data) {
+  if (isSmartWallet) {
+    return <ConnectedToSmartWallet client={client} connectLocale={locale} />;
+  }
+
+  if (userInfoQuery.data || walletInfo) {
     return (
-      <Container
-        flex="row"
-        center="x"
-        style={{
-          paddingBottom: spacing.xs,
-        }}
-      >
-        <Text size="sm">{userInfoQuery.data}</Text>
-      </Container>
+      <Text size="xs" weight={400}>
+        {userInfoQuery.data || walletInfo?.name}
+      </Text>
     );
   }
 
-  return null;
+  return <Skeleton width="50px" height="10px" />;
 }
 
 /**

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

@@ -28,7 +28,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
     transition: "background-color 200ms ease, transform 200ms ease",
     "&:hover": {
       backgroundColor: theme.colors.tertiaryBg,
-      transform: "scale(1.01)",
       svg: {
         color: theme.colors.accentText,
       },