thirdweb 5.47.1 → 5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346

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/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

@@ -8,6 +8,7 @@ import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait
 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";
@@ -157,7 +158,18 @@ export function useSendTransactionCore(args: {
             const nativeValue = _nativeValue || 0n;
             const erc20Value = _erc20Value?.amountWei || 0n;
 
-            if (nativeValue > 0n || erc20Value > 0n) {
+            const balance = await getWalletBalance({
+              client: tx.client,
+              address: account.address,
+              chain: tx.chain,
+              tokenAddress: _erc20Value?.tokenAddress,
+            });
+
+            const shouldShowModal =
+              (erc20Value > 0n && balance.value < erc20Value) ||
+              (nativeValue > 0n && balance.value < nativeValue);
+
+            if (shouldShowModal) {
               showPayModal({
                 tx,
                 sendTx,

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

@@ -826,6 +826,7 @@ function DetailsModal(props: {
         }}
         client={client}
         locale={locale}
+        walletConnect={props.connectOptions?.walletConnect}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -34,6 +34,7 @@ function AllWalletsUI(props: {
   client: ThirdwebClient;
   recommendedWallets: Wallet[] | undefined;
   connectLocale: ConnectLocale;
+  disableSelectionDataReset?: boolean;
 }) {
   const { itemsToShow, lastItemRef } = useShowMore<HTMLLIElement>(10, 10);
   const setSelectionData = useSetSelectionData();
@@ -143,7 +144,9 @@ function AllWalletsUI(props: {
                       selectWallet={() => {
                         const wallet = createWallet(walletInfo.id);
                         props.onSelect(wallet);
-                        setSelectionData({});
+                        if (!props.disableSelectionDataReset) {
+                          setSelectionData({});
+                        }
                       }}
                       client={props.client}
                       recommendedWallets={props.recommendedWallets}

package/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -267,6 +267,7 @@ export function AnyWalletConnectUI(props: {
           chain={props.chain}
           client={props.client}
           size={props.size}
+          walletConnect={props.walletConnect}
           connectLocale={props.connectLocale}
           meta={props.meta}
         />

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

@@ -87,6 +87,7 @@ export type WalletSelectorProps = {
       }
     | undefined;
   walletIdsToHide: WalletId[] | undefined;
+  disableSelectionDataReset?: boolean;
 };
 
 /**
@@ -278,6 +279,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         recommendedWallets={props.recommendedWallets}
         chain={props.chain}
         showAllWallets={props.showAllWallets}
+        diableSelectionDataReset={props.disableSelectionDataReset}
       />
     );
 
@@ -305,6 +307,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
           recommendedWallets={props.recommendedWallets}
           chain={props.chain}
           showAllWallets={props.showAllWallets}
+          diableSelectionDataReset={props.disableSelectionDataReset}
         />
       );
 
@@ -348,6 +351,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               recommendedWallets={props.recommendedWallets}
               chain={props.chain}
               showAllWallets={props.showAllWallets}
+              diableSelectionDataReset={props.disableSelectionDataReset}
             />
             {eoaWallets.length > 0 && (
               <>
@@ -418,6 +422,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
                     recommendedWallets={props.recommendedWallets}
                     chain={props.chain}
                     showAllWallets={props.showAllWallets}
+                    diableSelectionDataReset={props.disableSelectionDataReset}
                   />
                 </Container>
 
@@ -456,6 +461,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
             recommendedWallets={props.recommendedWallets}
             chain={props.chain}
             showAllWallets={props.showAllWallets}
+            diableSelectionDataReset={props.disableSelectionDataReset}
           />
         );
 
@@ -578,6 +584,7 @@ const WalletSelection: React.FC<{
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
   chain: Chain | undefined;
+  diableSelectionDataReset?: boolean;
 }> = (props) => {
   const wallets = sortWallets(props.wallets, props.recommendedWallets);
   const { screen } = useScreenContext();
@@ -615,7 +622,9 @@ const WalletSelection: React.FC<{
               <WalletEntryButton
                 walletId={wallet.id}
                 selectWallet={() => {
-                  setSelectionData({});
+                  if (!props.diableSelectionDataReset) {
+                    setSelectionData({});
+                  }
                   props.selectWallet(wallet);
                 }}
                 connectLocale={props.connectLocale}

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -12,7 +12,7 @@ const connectLocaleEn: ConnectLocale = {
   installed: "Installed",
   buy: "Buy",
   continueAsGuest: "Continue as guest",
-  connectAWallet: "Connect a wallet",
+  connectAWallet: "Connect a Wallet",
   newToWallets: "New to wallets?",
   getStarted: "Get started",
   guest: "Guest",

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

@@ -1,4 +1,4 @@
-import { CheckIcon, CrossCircledIcon, PlusIcon } from "@radix-ui/react-icons";
+import { CheckIcon, MinusIcon, PlusIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -187,11 +187,11 @@ function WalletManangerButton(props: {
                 disconnect(props.wallet);
               }}
             >
-              <CrossCircledIcon
+              <MinusIcon
                 width={iconSize.md}
                 height={iconSize.md}
                 style={{
-                  color: theme.colors.danger,
+                  color: theme.colors.secondaryText,
                 }}
               />
             </IconButton>

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

@@ -23,6 +23,7 @@ export function LinkProfileScreen(props: {
   onBack: () => void;
   locale: ConnectLocale;
   client: ThirdwebClient;
+  walletConnect: { projectId?: string } | undefined;
 }) {
   const activeWallet = useActiveWallet();
   const chain = useActiveWalletChain();
@@ -36,6 +37,7 @@ export function LinkProfileScreen(props: {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <InAppWalletConnectUI
+          walletConnect={props.walletConnect}
           wallet={activeWallet as Wallet<"inApp">}
           done={() => {
             queryClient.invalidateQueries({ queryKey: ["profiles"] });

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

@@ -11,7 +11,7 @@ import { Button } from "../components/buttons.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/wallets/in-app/InAppWalletConnectUI.tsx

@@ -14,6 +14,7 @@ import { OTPLoginUI } from "../shared/OTPLoginUI.js";
 import { PassKeyLogin } from "../shared/PassKeyLogin.js";
 import { SocialLogin } from "../shared/SocialLogin.js";
 import { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
+import { WalletAuth } from "./WalletAuth.js";
 import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
 
 /**
@@ -36,6 +37,7 @@ function InAppWalletConnectUI(props: {
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
   isLinking?: boolean;
+  walletConnect: { projectId?: string } | undefined;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -99,6 +101,22 @@ function InAppWalletConnectUI(props: {
     );
   }
 
+  if (state?.walletLogin) {
+    return (
+      <WalletAuth
+        meta={props.meta}
+        inAppLocale={locale}
+        walletConnect={props.walletConnect}
+        wallet={props.wallet}
+        client={props.client}
+        size={props.size}
+        done={done}
+        onBack={goBackToMain || (() => setSelectionData({}))}
+        locale={props.connectLocale}
+      />
+    );
+  }
+
   if (state?.socialLogin) {
     return (
       <SocialLogin

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -0,0 +1,166 @@
+import { Suspense, useRef, useState } from "react";
+import { defineChain } from "../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useAddConnectedWallet } from "../../../core/hooks/wallets/useAddConnectedWallet.js";
+import AllWalletsUI from "../../ui/ConnectWallet/Modal/AllWalletsUI.js";
+import { WalletSelector } from "../../ui/ConnectWallet/WalletSelector.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { WalletImage } from "../../ui/components/WalletImage.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
+import { getDefaultWallets } from "../defaultWallets.js";
+import { ErrorState } from "../shared/ErrorState.js";
+import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { LoadingState } from "../shared/LoadingState.js";
+import type { InAppWalletLocale } from "../shared/locale/types.js";
+
+export function WalletAuth(props: {
+  wallet: Wallet<"inApp">;
+  client: ThirdwebClient;
+  done: () => void;
+  size: "compact" | "wide";
+  locale: ConnectLocale;
+  inAppLocale: InAppWalletLocale;
+  onBack: () => void;
+  walletConnect: { projectId?: string } | undefined;
+  meta?: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+}) {
+  const { wallet, done } = props;
+  const addConnectedWallet = useAddConnectedWallet();
+  const walletToConnect = useRef<Wallet>();
+  const [status, setStatus] = useState<"loading" | "error" | "selecting">(
+    "selecting",
+  );
+  const [error, setError] = useState<string | undefined>();
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  const back = () => {
+    setStatus("selecting");
+    walletToConnect.current = undefined;
+    props.onBack();
+  };
+
+  async function login(walletToLink: Wallet) {
+    setStatus("loading");
+    walletToConnect.current = walletToLink;
+    try {
+      await linkProfile(wallet as Wallet<"inApp">, {
+        strategy: "wallet",
+        wallet: walletToLink,
+        chain: wallet.getChain() || defineChain(1),
+      }).catch((e) => {
+        setError(e.message);
+        throw e;
+      });
+      addConnectedWallet(walletToLink);
+      done();
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (!walletToConnect.current) {
+    if (showAll) {
+      return (
+        <Suspense fallback={<LoadingScreen />}>
+          <AllWalletsUI
+            onBack={() => setShowAll(false)}
+            onSelect={async (newWallet) => {
+              login(newWallet);
+              setShowAll(false);
+            }}
+            client={props.client}
+            connectLocale={props.locale}
+            recommendedWallets={undefined}
+            specifiedWallets={[]}
+            size={props.size}
+            disableSelectionDataReset={true}
+          />
+        </Suspense>
+      );
+    }
+    return (
+      <WalletSelector
+        title={props.locale.connectAWallet}
+        wallets={getDefaultWallets()}
+        selectWallet={async (newWallet) => {
+          login(newWallet);
+        }}
+        onShowAll={() => {
+          setShowAll(true);
+        }}
+        done={() => {}}
+        goBack={back}
+        setModalVisibility={() => {}}
+        client={props.client}
+        connectLocale={props.locale}
+        isEmbed={false}
+        recommendedWallets={undefined}
+        chain={wallet.getChain()}
+        showAllWallets={true}
+        chains={[]}
+        size={props.size}
+        meta={props.meta || {}}
+        walletConnect={props.walletConnect}
+        modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }}
+        walletIdsToHide={["inApp"]}
+        disableSelectionDataReset={true}
+      />
+    );
+  }
+
+  return (
+    <Container animate="fadein" fullHeight flex="column">
+      <Container p="lg">
+        <ModalHeader title={props.inAppLocale.linkWallet} onBack={back} />
+      </Container>
+
+      <Container
+        px={props.size === "wide" ? "xxl" : "lg"}
+        expand
+        flex="column"
+        center="y"
+      >
+        <div>
+          {status === "error" ? (
+            <>
+              <ErrorState
+                onTryAgain={() => {
+                  if (!walletToConnect.current) {
+                    throw new Error("Failed to connect to unknown wallet");
+                  }
+                  login(walletToConnect.current);
+                }}
+                title={error || "Failed to Login"}
+              />
+              <Spacer y="lg" />
+            </>
+          ) : (
+            <>
+              <LoadingState
+                title="Sign in with your wallet"
+                subtitle="A pop-up prompt will appear to sign-in and verify your wallet"
+                icon={
+                  <WalletImage
+                    id={walletToConnect.current.id ?? ""}
+                    size={iconSize.xl}
+                    client={props.client}
+                  />
+                }
+              />
+            </>
+          )}
+        </div>
+      </Container>
+    </Container>
+  );
+}

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

@@ -26,6 +26,7 @@ import {
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import {
   emailIcon,
+  getWalletIcon,
   passkeyIcon,
   phoneIcon,
   socialIcons,
@@ -52,6 +53,7 @@ export type ConnectWalletSelectUIState =
         connectionPromise: Promise<Account | Profile[]>;
       };
       passkeyLogin?: boolean;
+      walletLogin?: boolean;
     };
 
 const defaultAuthOptions: AuthOption[] = [
@@ -242,6 +244,13 @@ export const ConnectWalletSocialOptions = (
     props.select();
   }
 
+  function handleWalletLogin() {
+    setData({
+      walletLogin: true,
+    });
+    props.select();
+  }
+
   const showOnlyIcons = socialLogins.length > 2;
 
   return (
@@ -390,6 +399,19 @@ export const ConnectWalletSocialOptions = (
           />
         </>
       )}
+
+      {props.isLinking && (
+        <>
+          <WalletTypeRowButton
+            client={props.client}
+            icon={getWalletIcon("")}
+            onClick={() => {
+              handleWalletLogin();
+            }}
+            title={locale.linkWallet}
+          />
+        </>
+      )}
     </Container>
   );
 };

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

@@ -0,0 +1,29 @@
+import { iconSize } from "../../../../react/core/design-system/index.js";
+import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Container } from "../../ui/components/basic.js";
+import { Button } from "../../ui/components/buttons.js";
+import { Text } from "../../ui/components/text.js";
+
+export function ErrorState(props: {
+  onTryAgain: () => void;
+  title: string;
+}) {
+  return (
+    <Container animate="fadein">
+      <Spacer y="xxl" />
+      <Container flex="row" center="x">
+        <AccentFailIcon size={iconSize["3xl"]} />
+      </Container>
+      <Spacer y="lg" />
+      <Text center color="primaryText" size="md">
+        {props.title}
+      </Text>
+      <Spacer y="xl" />
+      <Spacer y="xxl" />
+      <Button variant="accent" fullWidth onClick={props.onTryAgain}>
+        Try Again
+      </Button>
+    </Container>
+  );
+}

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Spinner } from "../../ui/components/Spinner.js";
+import { Container } from "../../ui/components/basic.js";
+import { Text } from "../../ui/components/text.js";
+
+export function LoadingState(props: {
+  title: string;
+  subtitle: string;
+  icon: ReactNode;
+}) {
+  return (
+    <Container animate="fadein">
+      <Spacer y="xxl" />
+      <Container
+        flex="row"
+        center="x"
+        style={{
+          position: "relative",
+        }}
+      >
+        <Spinner size="4xl" color="accentText" />
+        <Container
+          color="accentText"
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          {props.icon}
+        </Container>
+      </Container>
+      <Spacer y="xl" />
+      <Text center color="primaryText" size="lg">
+        {props.title}
+      </Text>
+      <Spacer y="md" />
+      <Text multiline center>
+        {props.subtitle}
+      </Text>
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+    </Container>
+  );
+}