Version Packages (#852)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/composite-actions/install/action.yml

@@ -6,7 +6,7 @@ runs:
   steps:
     - uses: pnpm/action-setup@v2
       with:
-        version: 7
+        version: 8
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:

.github/workflows/build-test-lint.yml

@@ -60,7 +60,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/cache@v3
         timeout-minutes: 5
@@ -85,7 +85,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/cache@v3
         timeout-minutes: 5
@@ -115,7 +115,7 @@ jobs:
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 8
 
       - uses: actions/cache@v3
         timeout-minutes: 5

.npmrc

@@ -1 +0,0 @@
-auto-install-peers=true

README.md

@@ -20,13 +20,14 @@
 
 ## Packages
 
-| Package                        | Description                                                          | Latest Version                                                                                                                                                                   |
-| ------------------------------ | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [/sdk](./packages/sdk)         | Best in class web3 SDK for Browser, Node and Mobile apps             | <a href="https://www.npmjs.com/package/@thirdweb-dev/sdk"><img src="https://img.shields.io/npm/v/@thirdweb-dev/sdk?color=red&label=npm&logo=npm" alt="npm version"/></a>         |
-| [/react](./packages/react)     | Ultimate collection of React hooks for your web3 apps                | <a href="https://www.npmjs.com/package/@thirdweb-dev/react"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react?color=red&label=npm&logo=npm" alt="npm version"/></a>     |
-| [/auth](./packages/auth)       | Best in class wallet authentication for Node backends                | <a href="https://www.npmjs.com/package/@thirdweb-dev/auth"><img src="https://img.shields.io/npm/v/@thirdweb-dev/auth?color=red&label=npm&logo=npm" alt="npm version"/></a>       |
-| [/storage](./packages/storage) | Best in class decentralized storage SDK for Browser and Node         | <a href="https://www.npmjs.com/package/@thirdweb-dev/storage"><img src="https://img.shields.io/npm/v/@thirdweb-dev/storage?color=red&label=npm&logo=npm" alt="npm version"/></a> |
-| [/cli](./packages/cli)         | Publish and deploy smart contracts without dealing with private keys | <a href="https://www.npmjs.com/package/thirdweb"><img src="https://img.shields.io/npm/v/thirdweb?color=red&label=npm&logo=npm" alt="npm version"/></a>                           |
+| Package                           | Description                                                          | Latest Version                                                                                                                                                                             |
+| --------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [/sdk](./packages/sdk)            | Best in class web3 SDK for Browser, Node and Mobile apps             | <a href="https://www.npmjs.com/package/@thirdweb-dev/sdk"><img src="https://img.shields.io/npm/v/@thirdweb-dev/sdk?color=red&label=npm&logo=npm" alt="npm version"/></a>                   |
+| [/react](./packages/react)        | Ultimate collection of React hooks for your web3 apps                | <a href="https://www.npmjs.com/package/@thirdweb-dev/react"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react?color=red&label=npm&logo=npm" alt="npm version"/></a>               |
+| [/react](./packages/react-native) | Ultimate collection of React hooks for your native web3 apps         | <a href="https://www.npmjs.com/package/@thirdweb-dev/react-native"><img src="https://img.shields.io/npm/v/@thirdweb-dev/react-native?color=red&label=npm&logo=npm" alt="npm version"/></a> |
+| [/auth](./packages/auth)          | Best in class wallet authentication for Node backends                | <a href="https://www.npmjs.com/package/@thirdweb-dev/auth"><img src="https://img.shields.io/npm/v/@thirdweb-dev/auth?color=red&label=npm&logo=npm" alt="npm version"/></a>                 |
+| [/storage](./packages/storage)    | Best in class decentralized storage SDK for Browser and Node         | <a href="https://www.npmjs.com/package/@thirdweb-dev/storage"><img src="https://img.shields.io/npm/v/@thirdweb-dev/storage?color=red&label=npm&logo=npm" alt="npm version"/></a>           |
+| [/cli](./packages/cli)            | Publish and deploy smart contracts without dealing with private keys | <a href="https://www.npmjs.com/package/thirdweb"><img src="https://img.shields.io/npm/v/thirdweb?color=red&label=npm&logo=npm" alt="npm version"/></a>                                     |
 
 ## Documentation
 

package.json

@@ -31,7 +31,7 @@
     "hotlink-revert": "node ./scripts/hotlink/hotlink-revert.mjs",
     "explain:major": "node ./scripts/changeset-explain-major.mjs"
   },
-  "packageManager": "pnpm@7.29.3",
+  "packageManager": "pnpm@8.1.0",
   "dependencies": {
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.1",
@@ -42,11 +42,11 @@
     "@manypkg/get-packages": "^1.1.3",
     "@playwright/test": "1.31.2",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/node": "^18.15.7",
-    "eslint": "^8.36.0",
+    "@types/node": "^18.15.11",
+    "eslint": "^8.37.0",
     "mocha": "^10.2.0",
     "prettier": "^2.8.7",
-    "turbo": "^1.8.5",
+    "turbo": "^1.8.8",
     "yalc": "1.0.0-pre.53"
   },
   "manypkg": {

packages/auth/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/auth
 
+## 3.0.12
+
+### Patch Changes
+
+- Updated dependencies [[`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc), [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48)]:
+  - @thirdweb-dev/wallets@0.2.13
+
 ## 3.0.11
 
 ### Patch Changes

packages/auth/README.md

@@ -13,6 +13,14 @@
 <p align="center"><strong>Best in class wallet authentication for Node backends</strong></p>
 <br />
 
+## Overview
+
+Auth is a developer SDK that lets you integrate passwordless web3-native authentication and authorization into your applications.
+
+It enables users to sign in with their wallets, allowing apps to access rich blockchain-level data and interact with their users on-chain.
+
+With Auth, developers can build applications that have secure, self-custodied, web3-first authentication.
+
 ## Installation
 
 Install the latest version of the SDK with either `npm` or `yarn`:
@@ -25,6 +33,6 @@ npm install @thirdweb-dev/auth
 yarn add @thirdweb-dev/auth
 ```
 
-## Documentation
+## Resources
 
-- [Auth Docs](https://portal.thirdweb.com/auth)
+- Check out the [Auth Documentation](https://portal.thirdweb.com/auth) for full guides and API references on how to use Auth.

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/auth",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "main": "dist/thirdweb-dev-auth.cjs.js",
   "module": "dist/thirdweb-dev-auth.esm.js",
   "browser": {

packages/chains/chains/20001.ts

@@ -1,8 +1,8 @@
 import type { Chain } from "../src/types";
 export default {
-  "name": "CamelArk Mainnet",
+  "name": "Camelark Mainnet",
   "chainId": 20001,
-  "shortName": "CamelArk",
+  "shortName": "Camelark",
   "chain": "ETHW",
   "icon": {
     "url": "ipfs://QmbXDcCWHh8jExE1tAUkUKzXyTb8srpC75ogZq1QYkMMRW",
@@ -23,7 +23,7 @@ export default {
   "faucets": [],
   "explorers": [
     {
-      "name": "CamelArkscan",
+      "name": "CamelarkScan",
       "url": "https://scan.camelark.com",
       "standard": "EIP3091"
     }

packages/cli/README.md

@@ -77,7 +77,7 @@ npm i -g @thirdweb-dev/cli
 
 ---
 
-## Supported projects
+## Supported Projects
 
 To publish, you need to be in a directory that contains a project which the CLI is compatible
 with. The projects we support so far:
@@ -89,7 +89,7 @@ with. The projects we support so far:
 
 ---
 
-## Running the examples
+## Running the Examples
 
 Clone the repo and run this command after installing the CLI tool:
 

packages/generated-abis/README.md

@@ -1,5 +1,5 @@
 # generated-abis
 
-This package is used as an ABI cache for the CLI and SDK that can get bundled with the SDK. It will never need to be edited or rebuilt.
+This package is used as an ABI cache for the CLI and SDK that can get bundled with the SDK. It's used to store generated ABIs that can be used for performance optimization purposes and static types by the SDK. It will never need to be edited or rebuilt.
 
 Instead of using this directly, go to the [thirdweb SDK package](https://npmjs.com/package/@thirdweb-dev/sdk).

packages/react-core/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @thirdweb-dev/react-core
 
+## 3.11.4
+
+### Patch Changes
+
+- [#851](https://github.com/thirdweb-dev/js/pull/851) [`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc) Thanks [@MananTank](https://github.com/MananTank)! - Fix wallet autoconnect issues
+
+  ### Fixes
+
+  - infinite loading spinner on connect wallet button when wallet is locked or connection to app is closed
+  - network switch popup on page load when wallet is connected to different network than it was previously connected
+  - removed autoconnect timeout - don't need it anymore
+
+- [#855](https://github.com/thirdweb-dev/js/pull/855) [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48) Thanks [@MananTank](https://github.com/MananTank)! - Add auth in Connect Wallet button
+
+- Updated dependencies [[`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc), [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48)]:
+  - @thirdweb-dev/wallets@0.2.13
+  - @thirdweb-dev/sdk@3.10.7
+
 ## 3.11.3
 
 ### Patch Changes

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-core",
-  "version": "3.11.3",
+  "version": "3.11.4",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react-core/src/core/providers/thirdweb-wallet-provider.tsx

@@ -1,6 +1,5 @@
 import { DAppMetaData } from "../types/dAppMeta";
 import type { Wallet, WalletInstance } from "../types/wallet";
-import { timeoutPromise } from "../utils/timeoutPromise";
 import { ThirdwebThemeContext } from "./theme-context";
 import { Chain } from "@thirdweb-dev/chains";
 import {
@@ -102,12 +101,7 @@ export function ThirdwebWalletProvider(
       chain: props.activeChain || props.chains[0],
       theme: theme || "dark",
     };
-  }, [
-    props.chains,
-    props.dAppMeta,
-    props.activeChain,
-    theme,
-  ]);
+  }, [props.chains, props.dAppMeta, props.activeChain, theme]);
 
   const createWalletInstance = useCallback(
     <I extends WalletInstance>(wallet: Wallet<I>): I => {
@@ -250,15 +244,10 @@ export function ThirdwebWalletProvider(
       const wallet = createWalletInstance(lastConnectedWallet);
       try {
         setConnectionStatus("connecting");
-        // give up auto connect if it takes more than 10 seconds
-        // this is to handle the edge case when trying to auto-connect to wallet that does not exist anymore (extension is uninstalled)
-        await timeoutPromise(
-          10000,
-          wallet.autoConnect(parsedParams),
-          `AutoConnect timeout`,
-        );
+        await wallet.autoConnect(parsedParams);
         handleWalletConnect(wallet, parsedParams);
       } catch (e) {
+        coordinatorStorage.removeItem(LAST_CONNECTED_WALLET_STORAGE_KEY);
         setConnectionStatus("disconnected");
         throw e;
       }

packages/react-core/src/core/utils/timeoutPromise.ts

@@ -1,13 +0,0 @@
-// it rejects the promise if the given promise does not resolve within the given time
-export const timeoutPromise = <T>(
-  ms: number,
-  promise: Promise<T>,
-  errorMessage: string,
-): Promise<T> => {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      reject(new Error(errorMessage));
-    }, ms);
-    promise.then(resolve, reject);
-  });
-};

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.2.4
+
 ## 0.2.3
 
 ## 0.2.2

packages/react-native-compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thirdweb-dev/react-native-compat",
   "description": "Shims for Thirdweb in React Native Projects",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "author": "thirdweb eng <[email protected]>",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
   "license": "Apache-2.0",

packages/react-native/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/react-native
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [[`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc), [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48)]:
+  - @thirdweb-dev/react-core@3.11.4
+  - @thirdweb-dev/wallets@0.2.13
+  - @thirdweb-dev/sdk@3.10.7
+
 ## 0.2.3
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-native",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @thirdweb-dev/react
 
+## 3.11.4
+
+### Patch Changes
+
+- [#851](https://github.com/thirdweb-dev/js/pull/851) [`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc) Thanks [@MananTank](https://github.com/MananTank)! - Fix wallet autoconnect issues
+
+  ### Fixes
+
+  - infinite loading spinner on connect wallet button when wallet is locked or connection to app is closed
+  - network switch popup on page load when wallet is connected to different network than it was previously connected
+  - removed autoconnect timeout - don't need it anymore
+
+- [#855](https://github.com/thirdweb-dev/js/pull/855) [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48) Thanks [@MananTank](https://github.com/MananTank)! - Add auth in Connect Wallet button
+
+- Updated dependencies [[`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc), [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48)]:
+  - @thirdweb-dev/react-core@3.11.4
+  - @thirdweb-dev/wallets@0.2.13
+  - @thirdweb-dev/sdk@3.10.7
+
 ## 3.11.3
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "3.11.3",
+  "version": "3.11.4",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/react/src/components/buttons.tsx

@@ -10,8 +10,8 @@ export const Button = styled.button<{
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: ${radius.sm};
-  padding: ${spacing.sm} ${spacing.md};
+  border-radius: ${radius.md};
+  padding: ${spacing.sm} ${spacing.sm};
   font-size: ${fontSize.md};
   font-weight: 500;
   box-sizing: border-box;

packages/react/src/components/modalElements.tsx

@@ -7,7 +7,7 @@ import { ChevronLeftIcon } from "@radix-ui/react-icons";
 
 export const ModalTitle = styled(Title)<{ theme?: Theme }>`
   margin: 0;
-  font-weight: 500;
+  font-weight: 600;
   font-size: ${fontSize.lg};
   color: ${(p) => p.theme.text.neutral};
   ${media.mobile} {

packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx

@@ -1,12 +1,17 @@
-import { darkTheme, lightTheme } from "../../design-system";
+import { darkTheme, iconSize, lightTheme, spacing } from "../../design-system";
 import { ConnectedWalletDetails, DropDownPosition } from "./Details";
 import { ThemeProvider } from "@emotion/react";
 import {
   ThirdwebThemeContext,
+  useAddress,
   useConnectionStatus,
+  useLogin,
+  useLogout,
+  useThirdwebAuthContext,
+  useUser,
   useWallet,
 } from "@thirdweb-dev/react-core";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import {
   useIsConnectingToSafe,
   useSetIsWalletModalOpen,
@@ -16,12 +21,21 @@ import { Button } from "../../components/buttons";
 import { Spinner } from "../../components/Spinner";
 import styled from "@emotion/styled";
 import { fadeInAnimation } from "../../components/FadeIn";
+import type { LoginOptions } from "@thirdweb-dev/auth";
+import { LockIcon } from "./icons/LockIcon";
+import { Flex } from "../../components/basic";
+import { shortenAddress } from "../../evm/utils/addresses";
+import { SignatureModal } from "./SignatureModal";
 
 type ConnectWalletProps = {
   className?: string;
   theme?: "dark" | "light";
   btnTitle?: string;
   dropdownPosition?: DropDownPosition;
+  auth?: {
+    loginOptions?: LoginOptions;
+    loginOptional?: boolean;
+  };
 };
 
 /**
@@ -44,6 +58,27 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = (props) => {
 
   const setModalTheme = useSetModalTheme();
 
+  const address = useAddress();
+  const [showSignatureModal, setShowSignatureModal] = useState(false);
+  const authConfig = useThirdwebAuthContext();
+  const { user } = useUser();
+  const { login } = useLogin();
+  const { logout } = useLogout();
+
+  const requiresSignIn = props.auth?.loginOptional
+    ? false
+    : !!authConfig?.authUrl && !!address && !user?.address;
+
+  const signIn = async () => {
+    try {
+      setShowSignatureModal(true);
+      await login(props.auth?.loginOptions);
+    } catch (err) {
+      console.error("failed to log in", err);
+    }
+    setShowSignatureModal(false);
+  };
+
   return (
     <ThemeProvider
       theme={
@@ -54,28 +89,63 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = (props) => {
           : lightTheme
       }
     >
-      {!activeWallet || isConnectingToSafe ? (
-        <AnimatedButton
-          disabled={isLoading}
-          className={props.className}
-          variant="inverted"
-          type="button"
-          style={{
-            minWidth: "140px",
-          }}
-          aria-label={
-            connectionStatus === "connecting" ? "Connecting" : btnTitle
-          }
-          onClick={() => {
-            setModalTheme(theme);
-            setIsWalletModalOpen(true);
-          }}
-        >
-          {isLoading ? <Spinner size="sm" color="inverted" /> : btnTitle}
-        </AnimatedButton>
-      ) : (
-        <ConnectedWalletDetails dropdownPosition={props.dropdownPosition} />
+      {showSignatureModal && (
+        <SignatureModal
+          open={showSignatureModal}
+          setOpen={setShowSignatureModal}
+        />
       )}
+
+      {/* Sign In Button */}
+      {requiresSignIn && (
+        <Button variant="inverted" onClick={signIn}>
+          <Flex
+            alignItems="center"
+            gap="sm"
+            style={{
+              paddingRight: spacing.xs,
+              borderRight: "1px solid",
+              marginRight: spacing.xs,
+            }}
+          >
+            <LockIcon size={iconSize.sm} />
+            <span> Sign in </span>
+          </Flex>
+          <span>{shortenAddress(address || "", true)}</span>
+        </Button>
+      )}
+
+      {!requiresSignIn &&
+        (!activeWallet || isConnectingToSafe ? (
+          // connect wallet button
+          <AnimatedButton
+            disabled={isLoading}
+            className={props.className}
+            variant="inverted"
+            type="button"
+            style={{
+              minWidth: "140px",
+            }}
+            aria-label={
+              connectionStatus === "connecting" ? "Connecting" : btnTitle
+            }
+            onClick={() => {
+              setModalTheme(theme);
+              setIsWalletModalOpen(true);
+            }}
+          >
+            {isLoading ? <Spinner size="sm" color="inverted" /> : btnTitle}
+          </AnimatedButton>
+        ) : (
+          <ConnectedWalletDetails
+            dropdownPosition={props.dropdownPosition}
+            onDisconnect={() => {
+              if (authConfig?.authUrl) {
+                logout();
+              }
+            }}
+          />
+        ))}
     </ThemeProvider>
   );
 };

packages/react/src/wallet/ConnectWallet/Details.tsx

@@ -46,6 +46,7 @@ export type DropDownPosition = {
 
 export const ConnectedWalletDetails: React.FC<{
   dropdownPosition?: DropDownPosition;
+  onDisconnect: () => void;
 }> = (props) => {
   const disconnect = useDisconnect();
   const chains = useSupportedChains();
@@ -249,6 +250,7 @@ export const ConnectedWalletDetails: React.FC<{
                 variant="secondary"
                 onClick={() => {
                   disconnect();
+                  props.onDisconnect();
                 }}
               >
                 <ExitIcon size={iconSize.md} />

packages/react/src/wallet/ConnectWallet/SignatureModal.tsx

@@ -0,0 +1,81 @@
+import { Modal } from "../../components/Modal";
+import { iconSize, media, spacing } from "../../design-system";
+import {
+  HelperLink,
+  ModalDescription,
+  ModalTitle,
+} from "../../components/modalElements";
+import { useWallet } from "@thirdweb-dev/react-core";
+import { Img } from "../../components/Img";
+import { Spacer } from "../../components/Spacer";
+import { Spinner } from "../../components/Spinner";
+import styled from "@emotion/styled";
+
+export const SignatureModal: React.FC<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}> = (props) => {
+  const wallet = useWallet();
+
+  return (
+    <Modal
+      open={props.open}
+      style={{
+        maxWidth: "450px",
+      }}
+      setOpen={props.setOpen}
+    >
+      <Container>
+        <Img
+          height={iconSize.xl}
+          src={wallet?.getMeta().iconURL as string}
+          width={iconSize.xl}
+        />
+
+        <Spacer y="xl" />
+
+        <TitleContainer>
+          <ModalTitle>Signature Request</ModalTitle>
+          <Spinner size="md" color="link" />
+        </TitleContainer>
+
+        <Spacer y="md" />
+
+        <Desc>Sign the signature request pop-up in your wallet</Desc>
+
+        <Spacer y="xxl" />
+
+        <HelperLink target="_blank" href="https://support.thirdweb.com/contact">
+          Having troubles connecting to wallet
+        </HelperLink>
+      </Container>
+    </Modal>
+  );
+};
+
+const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.sm};
+
+  ${media.mobile} {
+    justify-content: center;
+    flex-direction: column;
+    gap: ${spacing.md};
+  }
+`;
+
+const Desc = styled(ModalDescription)`
+  ${media.mobile} {
+    max-width: 240px;
+    margin: 0 auto;
+  }
+`;
+
+const Container = styled.div`
+  ${media.mobile} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+`;

packages/react/src/wallet/ConnectWallet/icons/LockIcon.tsx

@@ -0,0 +1,18 @@
+import { IconFC } from "./types";
+
+export const LockIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 16 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 21C1.45 21 0.979333 20.8043 0.588 20.413C0.196 20.021 0 19.55 0 19V9C0 8.45 0.196 7.979 0.588 7.587C0.979333 7.19567 1.45 7 2 7H3V5C3 3.61667 3.48767 2.43733 4.463 1.462C5.43767 0.487333 6.61667 0 8 0C9.38333 0 10.5627 0.487333 11.538 1.462C12.5127 2.43733 13 3.61667 13 5V7H14C14.55 7 15.021 7.19567 15.413 7.587C15.8043 7.979 16 8.45 16 9V19C16 19.55 15.8043 20.021 15.413 20.413C15.021 20.8043 14.55 21 14 21H2ZM8 16C8.55 16 9.021 15.8043 9.413 15.413C9.80433 15.021 10 14.55 10 14C10 13.45 9.80433 12.979 9.413 12.587C9.021 12.1957 8.55 12 8 12C7.45 12 6.97933 12.1957 6.588 12.587C6.196 12.979 6 13.45 6 14C6 14.55 6.196 15.021 6.588 15.413C6.97933 15.8043 7.45 16 8 16ZM5 7H11V5C11 4.16667 10.7083 3.45833 10.125 2.875C9.54167 2.29167 8.83333 2 8 2C7.16667 2 6.45833 2.29167 5.875 2.875C5.29167 3.45833 5 4.16667 5 5V7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

packages/unity-js-bridge/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/unity-js-bridge
 
+## 0.2.22
+
+### Patch Changes
+
+- Updated dependencies [[`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc), [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48)]:
+  - @thirdweb-dev/wallets@0.2.13
+  - @thirdweb-dev/auth@3.0.12
+  - @thirdweb-dev/sdk@3.10.7
+
 ## 0.2.21
 
 ### Patch Changes

packages/unity-js-bridge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/unity-js-bridge",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "main": "dist/thirdweb-unity-bridge.js",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/unity-js-bridge",
   "license": "Apache-2.0",

packages/wallets/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @thirdweb-dev/wallets
 
+## 0.2.13
+
+### Patch Changes
+
+- [#851](https://github.com/thirdweb-dev/js/pull/851) [`c5c2d947`](https://github.com/thirdweb-dev/js/commit/c5c2d9478acd4d4a4e6ce814716bdf1b6e51eafc) Thanks [@MananTank](https://github.com/MananTank)! - Fix wallet autoconnect issues
+
+  ### Fixes
+
+  - infinite loading spinner on connect wallet button when wallet is locked or connection to app is closed
+  - network switch popup on page load when wallet is connected to different network than it was previously connected
+  - removed autoconnect timeout - don't need it anymore
+
+- [#855](https://github.com/thirdweb-dev/js/pull/855) [`2dd192a5`](https://github.com/thirdweb-dev/js/commit/2dd192a5676f1b6d3c310ec796bf331252098d48) Thanks [@MananTank](https://github.com/MananTank)! - Add auth in Connect Wallet button
+
 ## 0.2.12
 
 ### Patch Changes

packages/wallets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/wallets",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "main": "dist/thirdweb-dev-wallets.cjs.js",
   "module": "dist/thirdweb-dev-wallets.esm.js",
   "types": "dist/thirdweb-dev-wallets.cjs.d.ts",

packages/wallets/src/evm/wallets/base.ts

@@ -49,7 +49,11 @@ export abstract class AbstractBrowserWallet<
   async autoConnect(
     connectOptions?: ConnectParams<TConnectParams>,
   ): Promise<string | undefined> {
-    return this.#connect(true, connectOptions);
+    // remove chainId when autoconnecting to prevent switch-network popup on page load
+    const options = connectOptions
+      ? { ...connectOptions, chainId: undefined }
+      : undefined;
+    return this.#connect(true, options);
   }
 
   /**
@@ -75,6 +79,7 @@ export abstract class AbstractBrowserWallet<
 
     const isConnected = await connector.isConnected();
 
+    // if already connected, return the address and setup listeners
     if (isConnected) {
       const address = await connector.getAddress();
       connector.setupListeners();
@@ -89,11 +94,15 @@ export abstract class AbstractBrowserWallet<
         chainId: await this.getChainId(),
       });
 
-      return address;
-    } else if (!isAutoConnect) {
-      const address = await connector.connect(connectOptions);
       return address;
     }
+
+    if (isAutoConnect) {
+      throw new Error("Failed to auto connect to the wallet.");
+    }
+
+    const address = await connector.connect(connectOptions);
+    return address;
   }
 
   async #subscribeToEvents(connector: TWConnector) {

setup-pnpm.sh

@@ -12,7 +12,7 @@ then
     if command -v corepack &> /dev/null
     then
         corepack enable
-        corepack prepare pnpm@7.29.3 --activate
+        corepack prepare pnpm@8.1.0 --activate
     else
         # if not, install it using npm
         npm install -g pnpm