[React] - use internal Signer

.changeset/rotten-lions-hang.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+use internals wherever possible to allow wider usecases with `<ThirdwebSDKProvider>` & add invariants to catch improper use of functionality that requires the full `<ThirdwebProvider` earlier

.changeset/sharp-dodos-cough.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+fix case where `<ConnectWallet />` button would get stuck when user cancels connection

.changeset/slimy-dolls-kick.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/sdk": patch
+---
+
+Switch naming of exported prebuilt contract types back from `<name>Impl` to `<name>` for easier use

.changeset/tiny-trees-tie.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+allow passing `className` to `<ConnectWallet />` and `<Web3Button />` for possible style overrides

packages/auth/package.json

@@ -60,7 +60,7 @@
     "eslint-plugin-tsdoc": "^0.2.16",
     "ethers": "^5.7.0",
     "express": "^4.18.1",
-    "next": "12.2.0",
+    "next": "^12.2.0",
     "next-auth": "^4.10.3",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4"
@@ -69,7 +69,7 @@
     "@thirdweb-dev/sdk": "*",
     "ethers": ">=5.5.1",
     "express": "^4.18.1",
-    "next": "12.2.0",
+    "next": "^12.2.0",
     "next-auth": "^4.10.3"
   },
   "peerDependenciesMeta": {

packages/cli/package.json

@@ -25,7 +25,6 @@
     "prettier": "^2.7.1",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.7.0",
-    "tsc": "^2.0.4",
     "tsup": "^6.2.3",
     "typescript": "^4.7.4"
   },
@@ -81,4 +80,4 @@
     "sourcemap": true,
     "clean": true
   }
-}
+}

packages/eslint-config-thirdweb/package.json

@@ -4,8 +4,8 @@
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
     "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-turbo": "latest",

packages/react/package.json

@@ -33,8 +33,8 @@
     "@microsoft/api-documenter": "^7.19.4",
     "@microsoft/api-extractor": "^7.29.2",
     "@microsoft/tsdoc": "^0.14.1",
-    "@playwright/experimental-ct-react": "^1.25.1",
-    "@playwright/test": "^1.25.1",
+    "@playwright/experimental-ct-react": "1.25.1",
+    "@playwright/test": "1.25.1",
     "@preconstruct/cli": "^2.2.1",
     "@thirdweb-dev/sdk": "*",
     "@types/color": "^3.0.3",

packages/react/src/components/ConnectWallet/ConnectWallet.spec.tsx

@@ -1,5 +1,5 @@
 import { ConnectWallet } from ".";
-import { ThirdwebProvider } from "../..";
+import { ThirdwebProvider } from "../../providers/full";
 import { test, expect } from "@playwright/experimental-ct-react";
 
 test.use({ viewport: { width: 500, height: 500 } });
@@ -10,5 +10,6 @@ test("should render the connect wallet button", async ({ mount }) => {
       <ConnectWallet />
     </ThirdwebProvider>,
   );
+
   await expect(component).toContainText("Connect Wallet");
 });

packages/react/src/components/ConnectWallet/index.tsx

@@ -1,16 +1,13 @@
 import { useThirdwebAuthConfig } from "../../contexts/thirdweb-auth";
-import { useBalance } from "../../hooks/async/wallet";
 import { LoginConfig, useAuth } from "../../hooks/auth";
 import { useMetamask } from "../../hooks/connectors/useMetamask";
-import { useAddress } from "../../hooks/useAddress";
-import { useChainId } from "../../hooks/useChainId";
-import { useConnect } from "../../hooks/useConnect";
-import { useDisconnect } from "../../hooks/useDisconnect";
-import { useNetwork } from "../../hooks/useNetwork";
+import { useConnect } from "../../hooks/wagmi-required/useConnect";
+import { useDisconnect } from "../../hooks/wagmi-required/useDisconnect";
+import { useNetwork } from "../../hooks/wagmi-required/useNetwork";
+import { useAddress, useBalance, useChainId } from "../../hooks/wallet";
 import { Portal } from "../../lib/portal";
 import { shortenIfAddress } from "../../utils/addresses";
 import { useClipboard } from "../hooks/useCopyClipboard";
-import { useIsMounted } from "../hooks/useIsMounted";
 import { Box } from "../shared/Box";
 import { Button } from "../shared/Button";
 import { Icon } from "../shared/Icon";
@@ -30,8 +27,8 @@ import { FiXCircle } from "@react-icons/all-files/fi/FiXCircle";
 import { ChainId, LoginOptions, SUPPORTED_CHAIN_ID } from "@thirdweb-dev/sdk";
 import * as menu from "@zag-js/menu";
 import { normalizeProps, useMachine } from "@zag-js/react";
-import React, { useId, useMemo } from "react";
-import { Connector } from "wagmi";
+import React, { useId } from "react";
+import type { Connector } from "wagmi";
 
 const SUPPORTED_CONNECTORS = [
   "injected",
@@ -65,6 +62,7 @@ interface ConnectWalletProps extends ThemeProviderProps {
     loginConfig?: LoginConfig;
     loginOptional?: boolean;
   };
+  className?: string;
 }
 
 let connecting = false;
@@ -124,15 +122,12 @@ const chainIdToCurrencyMap: Record<
  */
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   auth,
+  className,
   ...themeProps
 }) => {
   const id = useId();
-  const isMounted = useIsMounted();
-  const address = useAddress();
 
-  const mountedAddress = useMemo(() => {
-    return isMounted ? address : null;
-  }, [address, isMounted]);
+  const walletAddress = useAddress();
 
   const [state, send] = useMachine(
     menu.machine({
@@ -165,24 +160,26 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
 
   const balanceQuery = useBalance();
 
-  const { onCopy, hasCopied } = useClipboard(mountedAddress || "");
+  const { onCopy, hasCopied } = useClipboard(walletAddress || "");
 
   const authConfig = useThirdwebAuthConfig();
   const { user, isLoading, login, logout } = useAuth(auth?.loginConfig);
 
   const requiresSignIn = auth?.loginOptional
     ? false
-    : !!authConfig?.authUrl && !!mountedAddress && !user?.address;
+    : !!authConfig?.authUrl && !!walletAddress && !user?.address;
 
   return (
     <ThemeProvider {...themeProps}>
       <div
         style={{
           position: "relative",
+          width: "100%",
         }}
       >
         <Button
-          style={{ height: "50px", minWidth: "200px" }}
+          className={className}
+          style={{ height: "50px", minWidth: "200px", width: "100%" }}
           onClick={async (e) => {
             if (requiresSignIn) {
               e.preventDefault();
@@ -204,7 +201,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
               ) : (
                 <FiLock />
               )
-            ) : mountedAddress && chainId && chainId in chainIdToCurrencyMap ? (
+            ) : walletAddress && chainId && chainId in chainIdToCurrencyMap ? (
               <Icon
                 boxSize="1.5em"
                 name={chainIdToCurrencyMap[chainId as SUPPORTED_CHAIN_ID]}
@@ -225,7 +222,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
             )
           }
         >
-          {mountedAddress ? (
+          {walletAddress ? (
             requiresSignIn ? (
               <span style={{ whiteSpace: "nowrap" }}>Sign in</span>
             ) : (
@@ -249,7 +246,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                   )}
                 </span>
                 <span style={{ fontSize: "0.9em" }}>
-                  {shortenIfAddress(mountedAddress)}
+                  {shortenIfAddress(walletAddress)}
                 </span>
               </span>
             )
@@ -267,7 +264,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
             }}
           >
             <Menu {...api.contentProps}>
-              {!api.isOpen ? null : mountedAddress ? (
+              {!api.isOpen ? null : walletAddress ? (
                 <>
                   {authConfig?.authUrl && !user?.address && !requiresSignIn ? (
                     <MenuItem
@@ -396,10 +393,13 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                     })}
                     onClick={async () => {
                       if (!connecting) {
-                        connecting = true;
-                        await connectWithMetamask();
-                        connecting = false;
-                        api.close();
+                        try {
+                          connecting = true;
+                          await connectWithMetamask();
+                          api.close();
+                        } finally {
+                          connecting = false;
+                        }
                       }
                     }}
                     leftElement={<Icon boxSize="1.5em" name="metamask" />}
@@ -421,10 +421,13 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({
                           })}
                           onClick={async () => {
                             if (!connecting) {
-                              connecting = true;
-                              await connect(c);
-                              connecting = false;
-                              api.close();
+                              try {
+                                connecting = true;
+                                await connect(c);
+                                api.close();
+                              } finally {
+                                connecting = false;
+                              }
                             }
                           }}
                           leftElement={getIconForConnector(c)}

packages/react/src/components/Web3Button/Web3Button.spec.tsx

@@ -1,5 +1,5 @@
 import { Web3Button } from ".";
-import { ThirdwebProvider } from "../..";
+import { ThirdwebProvider } from "../../providers/full";
 import { test, expect } from "@playwright/experimental-ct-react";
 
 test.use({ viewport: { width: 500, height: 500 } });

packages/react/src/components/Web3Button/index.tsx

@@ -1,8 +1,7 @@
-import { useActiveChainId } from "../../Provider";
 import { useContract } from "../../hooks/async/contracts";
-import { useAddress } from "../../hooks/useAddress";
-import { useChainId } from "../../hooks/useChainId";
-import { useNetwork } from "../../hooks/useNetwork";
+import { useNetwork } from "../../hooks/wagmi-required/useNetwork";
+import { useAddress, useChainId } from "../../hooks/wallet";
+import { useSDKChainId } from "../../providers/base";
 import {
   createCacheKeyWithNetwork,
   createContractCacheKey,
@@ -20,6 +19,7 @@ type ActionFn = (contract: SmartContract) => any;
 
 interface Web3ButtonProps<TActionFn extends ActionFn>
   extends ThemeProviderProps {
+  className?: string;
   contractAddress: `0x${string}` | `${string}.eth` | string;
 
   overrides?: CallOverrides;
@@ -64,11 +64,12 @@ export const Web3Button = <TAction extends ActionFn>({
   isDisabled,
   children,
   action,
+  className,
   ...themeProps
 }: PropsWithChildren<Web3ButtonProps<TAction>>) => {
   const address = useAddress();
   const walletChainId = useChainId();
-  const sdkChainId = useActiveChainId();
+  const sdkChainId = useSDKChainId();
   const [, switchNetwork] = useNetwork();
 
   const queryClient = useQueryClient();
@@ -87,7 +88,7 @@ export const Web3Button = <TAction extends ActionFn>({
       if (switchToChainId) {
         if (switchNetwork) {
           await switchNetwork(switchToChainId);
-          await new Promise((resolve) => setTimeout(resolve, 500));
+          return "__NETWORK_SWITCHED__";
         } else {
           throw new Error(
             "need to switch chain but connected wallet does not support switching",
@@ -99,10 +100,14 @@ export const Web3Button = <TAction extends ActionFn>({
       if (onSubmit) {
         onSubmit();
       }
+
       return await action(contract);
     },
     {
       onSuccess: (res) => {
+        if (res === "__NETWORK_SWITCHED__") {
+          return;
+        }
         if (onSuccess) {
           onSuccess(res);
         }
@@ -122,13 +127,14 @@ export const Web3Button = <TAction extends ActionFn>({
     },
   );
   if (!address) {
-    return <ConnectWallet {...themeProps} />;
+    return <ConnectWallet className={className} {...themeProps} />;
   }
 
   return (
     <ThemeProvider {...themeProps}>
       <Button
-        style={{ height: "50px" }}
+        className={className}
+        style={{ height: "50px", minWidth: "200px", width: "100%" }}
         isLoading={mutation.isLoading || !contract}
         onClick={() => mutation.mutate()}
         isDisabled={isDisabled}

packages/react/src/constants/runtime.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line turbo/no-undeclared-env-vars
+export const __DEV__ = process.env.NODE_ENV !== "production";