thirdweb 5.47.1-nightly-574ff0295dcbb39f2ddd753c9e8a264498aae99e-20240819000344 → 5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346

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

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

@@ -7,15 +7,14 @@ import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wa
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
-import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
 import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
-import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
-import { Text } from "../../ui/components/text.js";
+import { ErrorState } from "./ErrorState.js";
 import { LoadingScreen } from "./LoadingScreen.js";
+import { LoadingState } from "./LoadingState.js";
 
 // is passkey stored?
 // - login
@@ -179,6 +178,7 @@ function LoginScreen(props: {
       <LoadingState
         title="Requesting Passkey"
         subtitle="A pop-up prompt will appear to sign-in and verify your passkey"
+        icon={<FingerPrintIcon size={iconSize.xxl} />}
       />
     );
   }
@@ -252,6 +252,7 @@ function SignupScreen(props: {
       <LoadingState
         title="Creating Passkey"
         subtitle="A pop-up prompt will appear to sign-in and verify your passkey"
+        icon={<FingerPrintIcon size={iconSize.xxl} />}
       />
     );
   }
@@ -297,67 +298,3 @@ function SelectLoginMethod(props: {
     </Container>
   );
 }
-
-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>
-  );
-}
-
-function LoadingState(props: {
-  title: string;
-  subtitle: string;
-}) {
-  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%)",
-          }}
-        >
-          <FingerPrintIcon size={iconSize.xxl} />
-        </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>
-  );
-}

package/src/react/web/wallets/shared/locale/de.ts

@@ -56,4 +56,5 @@ export default {
   signInWithPhone: "Mit Telefonnummer anmelden",
   phoneRequired: "Telefonnummer ist erforderlich",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/en.ts

@@ -53,6 +53,7 @@ export default {
   invalidPhone: "Invalid phone number",
   phonePlaceholder: "Phone number",
   signInWithPhone: "Sign in with phone number",
-  phoneRequired: "phone number is required",
+  phoneRequired: "Phone number is required",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/es.ts

@@ -55,4 +55,5 @@ export default {
   phoneRequired: "Se requiere número de teléfono",
   signInWithEmail: "Iniciar sesión con correo electrónico",
   passkey: "Clave de acceso",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/fr.ts

@@ -56,4 +56,5 @@ export default {
   signInWithPhone: "Se connecter avec le numéro de téléphone",
   phoneRequired: "Le numéro de téléphone est requis",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/ja.ts

@@ -54,4 +54,5 @@ export default {
   signInWithPhone: "電話番号でサインイン",
   phoneRequired: "電話番号は必須です",
   passkey: "パスキー",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/kr.ts

@@ -52,4 +52,5 @@ export default {
   signInWithPhone: "전화번호로 로그인",
   phoneRequired: "전화번호가 필요합니다",
   passkey: "비밀번호",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/tl.ts

@@ -55,4 +55,5 @@ export default {
   signInWithPhone: "Mag-login gamit ang numero ng telepono",
   phoneRequired: "Kinakailangan ang numero ng telepono",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/types.ts

@@ -50,4 +50,5 @@ export type InAppWalletLocale = {
   submitEmail: string;
   maxAccountsExceeded: string;
   passkey: string;
+  linkWallet: string;
 };

package/src/react/web/wallets/shared/locale/vi.ts

@@ -55,4 +55,5 @@ export default {
   signInWithPhone: "Đăng nhập bằng số điện thoại",
   phoneRequired: "Vui lòng nhập số điện thoại",
   passkey: "Passkey",
+  linkWallet: "Link a Wallet",
 } satisfies InAppWalletLocale;

package/src/transaction/actions/gasless/providers/biconomy.ts

@@ -10,6 +10,9 @@ import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type BiconomyOptions = {
   provider: "biconomy";
   // you can find the correct forwarder for your network here: https://docs-gasless.biconomy.io/misc/contract-addresses

package/src/transaction/actions/gasless/providers/engine.ts

@@ -10,6 +10,9 @@ import {
   waitForReceipt,
 } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type EngineOptions = {
   provider: "engine";
   relayerUrl: string;

package/src/transaction/actions/gasless/providers/openzeppelin.ts

@@ -8,6 +8,9 @@ import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
+/**
+ * @transaction
+ */
 export type OpenZeppelinOptions = {
   provider: "openzeppelin";
   relayerUrl: string;

package/src/transaction/actions/gasless/types.ts

@@ -2,6 +2,18 @@ import type { BiconomyOptions } from "./providers/biconomy.js";
 import type { EngineOptions } from "./providers/engine.js";
 import type { OpenZeppelinOptions } from "./providers/openzeppelin.js";
 
+/**
+ * Gasless configs for sending gasless transactions.
+ * This config is used in:
+ * - [`TransactionButton`](https://portal.thirdweb.com/references/typescript/v5/TransactionButton)
+ * - [`sendTransaction`](https://portal.thirdweb.com/references/typescript/v5/sendTransaction)
+ * - [`useSendTransaction`](https://portal.thirdweb.com/references/typescript/v5/useSendTransaction)
+ * - [`sendAndConfirmTransaction`](https://portal.thirdweb.com/references/typescript/v5/sendAndConfirmTransaction)
+ * - [`useSendAndConfirmTransaction`](https://portal.thirdweb.com/references/typescript/v5/useSendAndConfirmTransaction)
+ *
+ * Please refer to the docs of those components above for more info.
+ * @transaction
+ */
 export type GaslessOptions =
   | EngineOptions
   | OpenZeppelinOptions

package/src/transaction/prepare-contract-call.ts

@@ -113,7 +113,7 @@ export type PrepareContractCallOptions<
  * });
  * ```
  *
- * ### Usage with a the ABI defined on the contract:
+ * ### Usage with the ABI defined on the contract:
  *
  * ```ts
  * import { getContract, prepareContractCall } from "thirdweb";

package/src/transaction/read-contract.ts

@@ -70,7 +70,7 @@ export type ReadContractOptions<
 >;
 
 /**
- * Reads state from a deployed smart contract.
+ * ### Reads state from a deployed smart contract.
  *
  * You can use raw read calls or read [extensions](https://portal.thirdweb.com/typescript/v5/extensions/use) to read from a contract.
  *
@@ -111,7 +111,26 @@ export type ReadContractOptions<
  *
  * const { data, isLoading } = useReadContract({
  *   contract,
- *   method: "function tokenURI(uint256 tokenId) returns (string)"});
+ *   method: "function tokenURI(uint256 tokenId) returns (string)"}),
+ *   params: [1n],
+ * });
+ * ```
+ *
+ * ### Using `resolveMethod`
+ * ```ts
+ * import { getContract, resolveMethod } from "thirdweb";
+ * import { sepolia } from "thirdweb/chains";
+ * import { useReadContract } from "thirdweb/react";
+ *
+ * const contract = getContract({
+ *   client,
+ *   address: "0x...",
+ *   chain: sepolia,
+ * });
+ *
+ * const { data, isLoading } = useReadContract({
+ *   contract,
+ *   method: resolveMethod("tokenURI"),
  *   params: [1n],
  * });
  * ```