Version Packages (#1745)

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

packages/auth/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @thirdweb-dev/auth
 
+## 4.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`74941603`](https://github.com/thirdweb-dev/js/commit/74941603a96456da46a47147f67c98235ac55022), [`4b98e487`](https://github.com/thirdweb-dev/js/commit/4b98e487d4b47225d7095e5444dc5e7608db48a3), [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9), [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e)]:
+  - @thirdweb-dev/wallets@2.0.2
+
+## 4.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946)]:
+  - @thirdweb-dev/wallets@2.0.1
+
 ## 4.0.0
 
 ### Major Changes

packages/auth/package.json

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

packages/cli/CHANGELOG.md

@@ -1,5 +1,22 @@
 # thirdweb
 
+## 0.13.2
+
+### Patch Changes
+
+- Updated dependencies [[`1f3c64d3`](https://github.com/thirdweb-dev/js/commit/1f3c64d3618903b9008cc7b633ea890b508e7800), [`74941603`](https://github.com/thirdweb-dev/js/commit/74941603a96456da46a47147f67c98235ac55022), [`4b98e487`](https://github.com/thirdweb-dev/js/commit/4b98e487d4b47225d7095e5444dc5e7608db48a3), [`693f349d`](https://github.com/thirdweb-dev/js/commit/693f349db2478e1cd0fc82a9ef9882f46832b125), [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9), [`0f12d1f9`](https://github.com/thirdweb-dev/js/commit/0f12d1f90320923309f085c372d3a5ed01dd4606), [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e), [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0)]:
+  - @thirdweb-dev/sdk@4.0.1
+  - @thirdweb-dev/wallets@2.0.2
+  - @thirdweb-dev/auth@4.0.2
+
+## 0.13.1
+
+### Patch Changes
+
+- Updated dependencies [[`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946)]:
+  - @thirdweb-dev/wallets@2.0.1
+  - @thirdweb-dev/auth@4.0.1
+
 ## 0.13.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "thirdweb",
   "main": "dist/cli/index.js",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/cli",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",

packages/contracts-js/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @thirdweb-dev/contracts-js
 
+## 1.3.14
+
+### Patch Changes
+
+- [#1757](https://github.com/thirdweb-dev/js/pull/1757) [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0) Thanks [@kumaryash90](https://github.com/kumaryash90)! - Update deployment and tests for MarketplaceV3 latest
+
 ## 1.3.13
 
 ### Patch Changes

packages/contracts-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/contracts-js",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "main": "dist/thirdweb-dev-contracts-js.cjs.js",
   "module": "dist/thirdweb-dev-contracts-js.esm.js",
   "browser": {
@@ -10,7 +10,7 @@
   "license": "Apache-2.0",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/contracts-js",
   "dependencies": {
-    "@thirdweb-dev/contracts": "3.10.1-0"
+    "@thirdweb-dev/contracts": "3.10.2-3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.9",

packages/react-core/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @thirdweb-dev/react-core
 
+## 4.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`1f3c64d3`](https://github.com/thirdweb-dev/js/commit/1f3c64d3618903b9008cc7b633ea890b508e7800), [`74941603`](https://github.com/thirdweb-dev/js/commit/74941603a96456da46a47147f67c98235ac55022), [`4b98e487`](https://github.com/thirdweb-dev/js/commit/4b98e487d4b47225d7095e5444dc5e7608db48a3), [`693f349d`](https://github.com/thirdweb-dev/js/commit/693f349db2478e1cd0fc82a9ef9882f46832b125), [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9), [`0f12d1f9`](https://github.com/thirdweb-dev/js/commit/0f12d1f90320923309f085c372d3a5ed01dd4606), [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e), [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0)]:
+  - @thirdweb-dev/sdk@4.0.1
+  - @thirdweb-dev/wallets@2.0.2
+  - @thirdweb-dev/auth@4.0.2
+
+## 4.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946)]:
+  - @thirdweb-dev/wallets@2.0.1
+  - @thirdweb-dev/auth@4.0.1
+
 ## 4.0.0
 
 ### Major Changes

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-core",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-core",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -75,7 +75,7 @@
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-config-thirdweb": "workspace:*",
-    "eslint-plugin-better-tree-shaking": "0.0.3",
+    "eslint-plugin-better-tree-shaking": "0.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-inclusive-language": "^2.2.0",
     "eslint-plugin-prettier": "^5.0.0",

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.3.7
+
+## 0.3.6
+
 ## 0.3.5
 
 ## 0.3.4

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.3.5",
+  "version": "0.3.7",
   "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,30 @@
 # @thirdweb-dev/react-native
 
+## 0.3.7
+
+### Patch Changes
+
+- [#1754](https://github.com/thirdweb-dev/js/pull/1754) [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9) Thanks [@iketw](https://github.com/iketw)! - Fix typos in SmartWallet api
+
+- [#1760](https://github.com/thirdweb-dev/js/pull/1760) [`f41ee6fb`](https://github.com/thirdweb-dev/js/commit/f41ee6fb1cc3b1e58cc273fa45087d4c92ff97d1) Thanks [@iketw](https://github.com/iketw)! - Correctly pass theme via ConnectWallet
+
+- [#1753](https://github.com/thirdweb-dev/js/pull/1753) [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e) Thanks [@iketw](https://github.com/iketw)! - Minor bug and UI fix for connecting an external app to a smart wallet
+
+- [#1759](https://github.com/thirdweb-dev/js/pull/1759) [`513c332e`](https://github.com/thirdweb-dev/js/commit/513c332ed02df4ac316076cc03178a4702b12110) Thanks [@iketw](https://github.com/iketw)! - Fixes bug when passing only one wallet as a supportedWallet. The selectUI component must be displayed.
+
+- Updated dependencies [[`1f3c64d3`](https://github.com/thirdweb-dev/js/commit/1f3c64d3618903b9008cc7b633ea890b508e7800), [`74941603`](https://github.com/thirdweb-dev/js/commit/74941603a96456da46a47147f67c98235ac55022), [`4b98e487`](https://github.com/thirdweb-dev/js/commit/4b98e487d4b47225d7095e5444dc5e7608db48a3), [`693f349d`](https://github.com/thirdweb-dev/js/commit/693f349db2478e1cd0fc82a9ef9882f46832b125), [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9), [`0f12d1f9`](https://github.com/thirdweb-dev/js/commit/0f12d1f90320923309f085c372d3a5ed01dd4606), [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e), [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0)]:
+  - @thirdweb-dev/sdk@4.0.1
+  - @thirdweb-dev/wallets@2.0.2
+  - @thirdweb-dev/react-core@4.0.2
+
+## 0.3.6
+
+### Patch Changes
+
+- Updated dependencies [[`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946)]:
+  - @thirdweb-dev/wallets@2.0.1
+  - @thirdweb-dev/react-core@4.0.1
+
 ## 0.3.5
 
 ### Patch Changes

packages/react-native/package.json

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

packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx

@@ -1,6 +1,6 @@
 import { useWallet } from "@thirdweb-dev/react-core";
 import { IWalletConnectReceiver } from "@thirdweb-dev/wallets";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Box from "../base/Box";
 import BaseButton from "../base/BaseButton";
 import DisconnectIcon from "../../assets/disconnect";
@@ -21,6 +21,7 @@ const ConnectAppField = () => {
   const [appMeta, setAppMeta] = useState<{ name: string; iconUrl: string }>();
   const wallet = useWallet();
   const [showQRCodeScan, setShowQRCodeScan] = useState(false);
+  const wcUriRef = useRef<string | undefined>();
 
   const getAppMeta = useCallback(() => {
     if (wallet && "isWCReceiverEnabled" in wallet) {
@@ -80,9 +81,10 @@ const ConnectAppField = () => {
   };
 
   const onQRCodeScan = (data: string) => {
-    if (wcUri !== data && data.startsWith("wc:")) {
+    if (wcUriRef.current !== data && data.startsWith("wc:")) {
       setWCUri(data);
       setShowQRCodeScan(false);
+      wcUriRef.current = data;
 
       onWCPress(data);
     }
@@ -102,6 +104,9 @@ const ConnectAppField = () => {
     if (uriToUse?.startsWith("wc:")) {
       (wallet as unknown as IWalletConnectReceiver).connectApp(uriToUse);
     }
+
+    setWCUri(undefined);
+    wcUriRef.current = undefined;
   };
 
   const onScanQRPress = () => {
@@ -124,9 +129,11 @@ const ConnectAppField = () => {
               value: wcUri,
               placeholder: "wc://...",
               placeholderTextColor: theme.colors.textSecondary,
+              numberOfLines: 1,
             }}
             containerProps={{
               flex: 1,
+              pl: "xxs",
             }}
           />
           <BaseButton
@@ -164,12 +171,12 @@ const ConnectAppField = () => {
         >
           <>
             {appMeta?.iconUrl ? (
-              <WalletIcon size={32} iconUri={appMeta.iconUrl} />
+              <WalletIcon size={24} iconUri={appMeta.iconUrl} />
             ) : (
-              <WalletConnectIcon width={16} height={16} />
+              <WalletConnectIcon width={24} height={24} />
             )}
             <View style={styles.exportWalletInfo}>
-              <Text variant="bodySmall">
+              <Text variant="bodySmall" numberOfLines={1}>
                 {appMeta ? appMeta.name : "Connect app"}
               </Text>
             </View>
@@ -215,8 +222,9 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "flex-start",
     alignContent: "center",
-    flexDirection: "column",
+    flexDirection: "row",
     marginLeft: 8,
+    marginRight: 8,
   },
   exportWallet: {
     display: "flex",

packages/react-native/src/evm/components/ConnectWalletDetails/SmartWalletAdditionalActions.tsx

@@ -12,9 +12,9 @@ import { useEffect, useState } from "react";
 import { useSmartWallet } from "../../providers/context-provider";
 import RightArrowIcon from "../../assets/right-arrow";
 import ConnectAppField from "./ConnectAppField";
-import { useAppTheme } from "../../styles/hooks";
 import DisconnectIcon from "../../assets/disconnect";
 import { IconTextButton } from "../base/IconTextButton";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export const SmartWalletAdditionalActions = ({
   onExportPress,
@@ -26,7 +26,7 @@ export const SmartWalletAdditionalActions = ({
   const [smartWalletAddress, setSmartWalletAddress] = useState<string>("");
   const [showSmartWallet, setShowSmartWallet] = useState(false);
   const activeWallet = useWallet();
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   const wallet = showSmartWallet
     ? smartWallet

packages/react-native/src/evm/components/ConnectWalletDetails/WalletDetailsModalHeader.tsx

@@ -1,5 +1,4 @@
 import { Icon } from "../../assets/icon";
-import { useAppTheme } from "../../styles/hooks";
 import { AddressDisplay } from "../base/AddressDisplay";
 import BaseButton from "../base/BaseButton";
 import { WalletIcon } from "../base/WalletIcon";
@@ -13,6 +12,7 @@ import { TextBalance } from "../base/TextBalance";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { SMART_WALLET_ICON } from "../../assets/svgs";
 import Text from "../base/Text";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 interface WalletDetailsModalHeaderProps {
   address?: string;
@@ -28,7 +28,7 @@ export const WalletDetailsModalHeader = ({
   onAddressCopied,
   tokenAddress,
 }: WalletDetailsModalHeaderProps) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const activeWallet = useWallet();
   const [showLoading, setShowLoading] = useState(false);
   const ensQuery = useENS();

packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx

@@ -5,11 +5,11 @@ import { ReactNode, useState } from "react";
 import Box from "../../base/Box";
 import Text from "../../base/Text";
 import ThirdwebLogo from "../../../assets/thirdweb-logo";
-import { useAppTheme } from "../../../styles/hooks";
 import { ChooseWalletContent } from "./ChooseWalletContent";
 import { BaseButton, ImageSvgUri, WalletButton } from "../../base";
 import { ActivityIndicator, Linking } from "react-native";
 import { useTheme } from "@shopify/restyle";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 export type ChooseWalletProps = {
   headerText?: ReactNode | string;
@@ -34,7 +34,7 @@ export function ChooseWallet({
   termsOfServiceUrl,
   privacyPolicyUrl,
 }: ChooseWalletProps) {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const themeLightDark = useTheme();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isConnectAWalletEnabled, setIsConnectAWalletEnabled] = useState(false);

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx

@@ -2,9 +2,11 @@ import { ActivityIndicator, StyleSheet } from "react-native";
 import { BaseButton, Text } from "../base";
 import { useConnectionStatus, useWallets } from "@thirdweb-dev/react-core";
 import { useState, useEffect } from "react";
-import { useModalState } from "../../providers/ui-context-provider";
+import {
+  useGlobalTheme,
+  useModalState,
+} from "../../providers/ui-context-provider";
 import { ThemeProvider, ThemeProviderProps } from "../../styles/ThemeProvider";
-import { useAppTheme } from "../../styles/hooks";
 
 export type ConnectWalletButtonProps = {
   theme?: ThemeProviderProps["theme"];
@@ -43,7 +45,7 @@ export const ConnectWalletButton = ({
   buttonTitle,
   theme,
 }: ConnectWalletButtonProps) => {
-  const appTheme = useAppTheme();
+  const appTheme = useGlobalTheme();
   const connectionStatus = useConnectionStatus();
   const isWalletConnecting = connectionStatus === "connecting";
 

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletFlow.tsx

@@ -5,14 +5,16 @@ import { WalletConfig, useConnect, useWallets } from "@thirdweb-dev/react-core";
 import { useCallback, useEffect, useState } from "react";
 import { walletIds } from "@thirdweb-dev/wallets";
 import { useColorScheme } from "react-native";
-import { useModalState } from "../../providers/ui-context-provider";
+import {
+  useGlobalTheme,
+  useModalState,
+} from "../../providers/ui-context-provider";
 import {
   CLOSE_MODAL_STATE,
   ConnectWalletFlowModal,
 } from "../../utils/modalTypes";
 import Box from "../base/Box";
 import { ThemeProvider } from "../../styles/ThemeProvider";
-import { useAppTheme } from "../../styles/hooks";
 
 export const ConnectWalletFlow = () => {
   const { modalState, setModalState } = useModalState();
@@ -30,7 +32,7 @@ export const ConnectWalletFlow = () => {
   const [selectionData, setSelectionData] = useState<any>();
   const supportedWallets = useWallets();
   const theme = useColorScheme();
-  const appTheme = useAppTheme();
+  const appTheme = useGlobalTheme();
   const connect = useConnect();
 
   const onClose = useCallback(
@@ -74,13 +76,19 @@ export const ConnectWalletFlow = () => {
   useEffect(() => {
     // case when only one wallet is passed in supportedWallets
     if (walletConfig) {
-      if (walletConfig.connectUI) {
-        // if there's a connection UI, then show it
-        setActiveWallet(walletConfig);
-      } else {
-        // if there's no connection UI, then connect the wallet
-        onChooseWallet(walletConfig);
+      // if there's a selection UI, then continue with the flow
+      if (walletConfig.selectUI) {
+        return;
       }
+
+      if (walletConfig.connectUI) {
+        // if there's a connection UI and no selection UI, then show it
+        setActiveWallet(walletConfig);
+        return;
+      }
+
+      // if there's no connection UI or selectionUI, then automatically select it
+      onChooseWallet(walletConfig);
     }
   }, [onChooseWallet, walletConfig]);
 

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader.tsx

@@ -1,5 +1,5 @@
 import { Icon } from "../../../assets/icon";
-import { useAppTheme } from "../../../styles/hooks";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 import Text from "../../base/Text";
 import { FlexAlignType, StyleSheet, View } from "react-native";
 
@@ -20,7 +20,7 @@ export const ConnectWalletHeader = ({
   onClose,
   onBackPress,
 }: ConnectWalletHeaderProps) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   return (
     <>
       <View style={styles.header}>

packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx

@@ -16,7 +16,7 @@ import * as FileSystem from "expo-file-system";
 import { TWModal } from "../base/modal/TWModal";
 import { localWallet } from "../../wallets/wallets/local-wallet";
 import { TextInput } from "../base";
-import { useAppTheme } from "../../styles/hooks";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export type LocalWalletImportModalProps = {
   isVisible: boolean;
@@ -37,7 +37,7 @@ export const LocalWalletImportModal = ({
   const [error, setError] = useState<string | undefined>();
   const [isImporting, setIsImporting] = useState<boolean>(false);
   const createWalletInstance = useCreateWalletInstance();
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   const createLocalWalletFromJsonFile = async () => {
     if (!jsonFile || !password) {

packages/react-native/src/evm/components/ConnectWalletFlow/SmartWallet/SmartWalletFlow.tsx

@@ -15,7 +15,7 @@ import WalletLoadingThumbnail from "../../../wallets/wallets/wallet-connect/Wall
 import ImageSvgUri from "../../base/ImageSvgUri";
 import Box from "../../base/Box";
 import { ConnectWalletHeader } from "../ConnectingWallet/ConnectingWalletHeader";
-import { useAppTheme } from "../../../styles/hooks";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 export const SmartWalletFlow = ({
   connected,
@@ -24,7 +24,7 @@ export const SmartWalletFlow = ({
   personalWalletConfig,
   ...props
 }: ConnectUIProps<SmartWallet> & { personalWalletConfig: WalletConfig }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [connectedPersonalWallet, setConnectedPersonalWallet] =
     useState<WalletInstance>();
   const [personalWalletChainId, setPersonalWalletChaindId] = useState<

packages/react-native/src/evm/components/MainModal.tsx

@@ -1,4 +1,7 @@
-import { useModalState } from "../providers/ui-context-provider";
+import {
+  useGlobalTheme,
+  useModalState,
+} from "../providers/ui-context-provider";
 import { ConnectWalletFlow } from "./ConnectWalletFlow/ConnectWalletFlow";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { useMemo } from "react";
@@ -7,13 +10,13 @@ import { SessionRequestModal } from "./ConnectWalletDetails/SessionRequestModal"
 import { SessionProposalModal } from "./ConnectWalletDetails/SessionProposalModal";
 import { TWModal } from "./base/modal/TWModal";
 import Box from "./base/Box";
-import { useAppTheme } from "../styles/hooks";
+// import { useAppTheme } from "../styles/hooks";
 
 const MODAL_HEIGHT = Dimensions.get("window").height * 0.6;
 const DEVICE_WIDTH = Dimensions.get("window").width;
 
 export const MainModal = () => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const { modalState } = useModalState();
 
   const { isOpen, isSheet } = modalState;

packages/react-native/src/evm/components/PasswordInput.tsx

@@ -3,14 +3,14 @@ import Box from "./base/Box";
 import { useState } from "react";
 import EyeClosed from "../assets/eye-closed";
 import EyeOpened from "../assets/eye-opened";
-import { useAppTheme } from "../styles/hooks";
+import { useGlobalTheme } from "../providers/ui-context-provider";
 
 export const PasswordInput = ({
   onChangeText,
 }: {
   onChangeText: TextInput["props"]["onChangeText"];
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [showPassword, setShowPassword] = useState(false);
 
   const onPressEyeIcon = () => {

packages/react-native/src/evm/components/ReceiveButton.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { IconTextButton } from "./base/IconTextButton";
 import { useAddress } from "@thirdweb-dev/react-core";
 import { Dimensions, KeyboardAvoidingView } from "react-native";
-import { useAppTheme } from "../styles/hooks";
 import {
   TWModal,
   Box,
@@ -15,9 +14,10 @@ import {
 import DownloadIcon from "../assets/download";
 import CopyIcon from "../assets/copy";
 import QRCode from "react-native-qrcode-svg";
+import { useGlobalTheme } from "../providers/ui-context-provider";
 
 export const ReceiveButton = () => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const onClose = () => {
@@ -60,7 +60,7 @@ export const ReceiveFundsModal = ({
   isVisible,
   onClose,
 }: ReceiveFundsModalProps) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const address = useAddress();
   const [addressCopied, setAddressCopied] = useState(false);
 

packages/react-native/src/evm/components/SendFunds/SendButton.tsx

@@ -1,4 +1,3 @@
-import { useAppTheme } from "../../styles/hooks";
 import React, { useEffect, useMemo, useState } from "react";
 import SendIcon from "../../assets/send";
 import {
@@ -30,13 +29,14 @@ import { utils } from "ethers";
 import LoadingTextAnimation from "../base/LoadingTextAnimation";
 import CheckIcon from "../../assets/check";
 import { TokenSelector } from "./TokenSelector";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export const SendButton = ({
   supportedTokens,
 }: {
   supportedTokens: SupportedTokens;
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const onClose = () => {
@@ -139,7 +139,7 @@ const SendFundsForm = ({
   onTokenSelectorPress: () => void;
   token?: TokenInfo;
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const chain = useChain();
   const wallet = useWallet();
   const chainId = useChainId();
@@ -352,7 +352,7 @@ const SendFundsForm = ({
         ) : showIcon ? (
           <CheckIcon width={20} height={13} color={theme.colors.textPrimary} />
         ) : (
-          <Text variant="bodySmall" mr="sm">
+          <Text variant="bodySmall" color="accentButtonTextColor" mr="sm">
             Send
           </Text>
         )}

packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx

@@ -15,10 +15,10 @@ import {
   ScrollView,
   TextInput,
 } from "react-native";
-import { useAppTheme } from "../../styles/hooks";
 import { SelectTokenButton } from "./SelectTokenButton";
 import CloseIcon from "../../assets/close";
 import Text from "../base/Text";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export function useToken(tokenAddress: string): {
   isLoading: boolean;
@@ -82,7 +82,7 @@ export function TokenSelector(props: {
   onBack: () => void;
   supportedTokens: SupportedTokens;
 }) {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [input, setInput] = useState("");
   const chainId = useChainId();
   const nativeTokenInfo = useNativeToken();

packages/react-native/src/evm/components/base/LoadingTextAnimation.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from "react";
 import { View, Animated, Easing, StyleSheet } from "react-native";
 import { baseTheme } from "../../styles/theme";
-import { useAppTheme } from "../../styles/hooks";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 type LoadingTextAnimationProps = {
   text: string;
@@ -13,7 +13,7 @@ const LoadingTextAnimation = ({
   textVariant,
 }: LoadingTextAnimationProps) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   const fadeInOut = useCallback(() => {
     Animated.loop(

packages/react-native/src/evm/components/base/NetworkButton.tsx

@@ -14,8 +14,8 @@ import { useSwitchChain, useSupportedChains } from "@thirdweb-dev/react-core";
 import Box from "./Box";
 import { ModalHeaderTextClose } from "./modal/ModalHeaderTextClose";
 import { TWModal } from "./modal/TWModal";
-import { useAppTheme } from "../../styles/hooks";
 import { Chain } from "@thirdweb-dev/chains";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 type NetworkButtonProps = {
   chain?: Chain;
@@ -35,7 +35,7 @@ export const NetworkButton = ({
   padding,
   ...props
 }: NetworkButtonProps) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [switchError, setSwitchError] = useState<string | undefined>();
   const [isSwitching, setIsSwitching] = useState(false);

packages/react-native/src/evm/components/base/Toast.tsx

@@ -2,7 +2,7 @@ import { ReactElement, useEffect, useRef } from "react";
 import { Theme } from "../../styles/theme";
 import Text from "./Text";
 import { Animated, StyleSheet } from "react-native";
-import { useAppTheme } from "../../styles/hooks";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export const TOAST_HEIGHT = 45;
 
@@ -19,7 +19,7 @@ export function Toast({
   backgroundColor,
   translateY = TOAST_HEIGHT,
 }: ToastProps) {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   const translateYRef = useRef(new Animated.Value(translateY)).current;
 

packages/react-native/src/evm/components/base/WalletButtonSquare.tsx

@@ -1,4 +1,4 @@
-import { useAppTheme } from "../../styles/hooks";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 import BaseButton from "./BaseButton";
 import Box from "./Box";
 import ImageSvgUri from "./ImageSvgUri";
@@ -17,7 +17,7 @@ export const WalletButtonSquare = ({
   name,
   size,
 }: WalletButtonSquareProps) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   const marginVertical = theme.spacing.xs;
   return (

packages/react-native/src/evm/components/base/modal/ModalFooter.tsx

@@ -1,6 +1,6 @@
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 import Text from "../Text";
 import { TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
-import { useAppTheme } from "../../../styles/hooks";
 
 export const ModalFooter = ({
   footer,
@@ -11,7 +11,7 @@ export const ModalFooter = ({
   isLoading?: boolean;
   onPress?: () => void;
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   return (
     <TouchableOpacity style={styles.footer} onPress={onPress}>

packages/react-native/src/evm/components/base/modal/ModalHeaderTextClose.tsx

@@ -1,9 +1,9 @@
 import { View } from "react-native";
 import { Icon } from "../../../assets/icon";
-import { useAppTheme } from "../../../styles/hooks";
 import Box from "../Box";
 import Text from "../Text";
 import { ReactNode } from "react";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 interface ModalHeaderTextCloseProps {
   onClose?: () => void;
@@ -19,7 +19,7 @@ export const ModalHeaderTextClose = ({
   onBackPress,
   ...props
 }: ModalHeaderTextCloseProps & React.ComponentProps<typeof Box>) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
 
   return (
     <>

packages/react-native/src/evm/providers/ui-context-provider.tsx

@@ -78,7 +78,7 @@ export const useGlobalTheme = (theme?: ThemeProviderProps["theme"]): Theme => {
   const appTheme = useTheme();
 
   const resultTheme = useMemo(() => {
-    const resp = getThemeObj(theme) || getThemeObj(context.theme) || appTheme;
+    const resp = getThemeObj(context.theme) || getThemeObj(theme) || appTheme;
     return resp;
   }, [theme, context, appTheme]);
 

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedConnectionUI.tsx

@@ -12,12 +12,12 @@ import {
   TextInput,
   TextInputKeyPressEventData,
 } from "react-native";
-import { useAppTheme } from "../../../styles/hooks";
 import { ConnectWalletHeader } from "../../../components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";
 import Box from "../../../components/base/Box";
 import Text from "../../../components/base/Text";
 import BaseButton from "../../../components/base/BaseButton";
 import * as Clipboard from "expo-clipboard";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 const OTP_LENGTH = 6;
 
@@ -27,7 +27,7 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
   selectionData,
   onLocallyConnected,
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const inputRefs = useRef<(TextInput | null)[]>([]);
   const [values, setValues] = useState<string[]>(
     new Array(OTP_LENGTH).fill(""),

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { EmbeddedWallet } from "./EmbeddedWallet";
 import { ActivityIndicator } from "react-native";
-import { useAppTheme } from "../../../styles/hooks";
 import {
   SelectUIProps,
   useCreateWalletInstance,
@@ -10,6 +9,7 @@ import Box from "../../../components/base/Box";
 import Text from "../../../components/base/Text";
 import BaseButton from "../../../components/base/BaseButton";
 import { TextInput } from "../../../components/base/TextInput";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 /**
  * UI for selecting wallet - this UI is rendered in the wallet selection screen
@@ -18,7 +18,7 @@ export const EmailSelectionUI: React.FC<SelectUIProps<EmbeddedWallet>> = ({
   onSelect,
   walletConfig,
 }) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [email, setEmail] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string>("");
   const [isFetching, setIsFetching] = useState<boolean>(false);

packages/react-native/src/evm/wallets/wallets/magic-link.tsx

@@ -17,9 +17,9 @@ import { TextInput } from "../../components/base/TextInput";
 import Text from "../../components/base/Text";
 import { useMagicLink } from "../../providers/context-provider";
 import BaseButton from "../../components/base/BaseButton";
-import { useAppTheme } from "../../styles/hooks";
 import React from "react";
 import { ConnectingWallet } from "../../components/ConnectWalletFlow/ConnectingWallet/ConnectingWallet";
+import { useGlobalTheme } from "../../providers/ui-context-provider";
 
 export const magicLink = (
   magicLinkOptions: MagicLinkOptions & { recommended?: boolean },
@@ -54,7 +54,7 @@ export const magicLink = (
 };
 
 const MagicSelectionUI: React.FC<SelectUIProps<MagicLink>> = (props) => {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [email, setEmail] = React.useState("");
 
   const onContinuePress = () => {

packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx

@@ -19,9 +19,9 @@ import {
   useSetConnectionStatus,
 } from "@thirdweb-dev/react-core";
 import { WalletConnect } from "./WalletConnect";
-import { useAppTheme } from "../../../styles/hooks";
 import { WalletConnectButton } from "./WalletConnectButton";
 import { ModalHeaderTextClose } from "../../../components/base";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 type WCWallet = {
   iconURL: string;
@@ -41,7 +41,7 @@ export function WalletConnectUI({
   goBack,
   projectId,
 }: ConnectUIProps<WalletConnect> & { projectId: string }) {
-  const theme = useAppTheme();
+  const theme = useGlobalTheme();
   const [wallets, setWallets] = useState<WCWallet[]>([]);
   const [error, setError] = useState<string | undefined>();
   const [loading, setLoading] = useState<boolean>(true);

packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletLoadingThumbnail.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { Animated, Easing, StyleSheet, View } from "react-native";
 import Svg, { Rect } from "react-native-svg";
-import { useAppTheme } from "../../../styles/hooks";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
@@ -19,7 +19,7 @@ function WalletLoadingThumbnail({
   showError,
   imageSize = 50,
 }: Props) {
-  const Theme = useAppTheme();
+  const Theme = useGlobalTheme();
   const spinValue = useRef(new Animated.Value(0));
 
   useEffect(() => {

packages/react/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @thirdweb-dev/react
 
+## 4.0.2
+
+### Patch Changes
+
+- [#1750](https://github.com/thirdweb-dev/js/pull/1750) [`bb1666b9`](https://github.com/thirdweb-dev/js/commit/bb1666b92b5e151d78ea7dae6831297fb947d954) Thanks [@MananTank](https://github.com/MananTank)! - ConnectWallet UI tweaks/fixes
+
+- Updated dependencies [[`1f3c64d3`](https://github.com/thirdweb-dev/js/commit/1f3c64d3618903b9008cc7b633ea890b508e7800), [`74941603`](https://github.com/thirdweb-dev/js/commit/74941603a96456da46a47147f67c98235ac55022), [`4b98e487`](https://github.com/thirdweb-dev/js/commit/4b98e487d4b47225d7095e5444dc5e7608db48a3), [`693f349d`](https://github.com/thirdweb-dev/js/commit/693f349db2478e1cd0fc82a9ef9882f46832b125), [`dcdb0dcb`](https://github.com/thirdweb-dev/js/commit/dcdb0dcb838168a22c8335738852316dfb6e6fc9), [`0f12d1f9`](https://github.com/thirdweb-dev/js/commit/0f12d1f90320923309f085c372d3a5ed01dd4606), [`b3b9edca`](https://github.com/thirdweb-dev/js/commit/b3b9edca29e7d4053b14270a61caa89c34fecf9e), [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0)]:
+  - @thirdweb-dev/sdk@4.0.1
+  - @thirdweb-dev/wallets@2.0.2
+  - @thirdweb-dev/react-core@4.0.2
+
+## 4.0.1
+
+### Patch Changes
+
+- [#1742](https://github.com/thirdweb-dev/js/pull/1742) [`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946) Thanks [@MananTank](https://github.com/MananTank)! - Apply ConnectWallet theme to Google Sign in popup opened from paperWallet, embeddedWallet
+
+- Updated dependencies [[`e684d05e`](https://github.com/thirdweb-dev/js/commit/e684d05e222458f02c8158eb9385d68c879dd946)]:
+  - @thirdweb-dev/wallets@2.0.1
+  - @thirdweb-dev/react-core@4.0.1
+
 ## 4.0.0
 
 ### Major Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -93,7 +93,7 @@
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-config-thirdweb": "workspace:*",
-    "eslint-plugin-better-tree-shaking": "0.0.3",
+    "eslint-plugin-better-tree-shaking": "0.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-inclusive-language": "^2.2.0",
     "eslint-plugin-prettier": "^5.0.0",

packages/react/src/components/Popover.tsx

@@ -53,9 +53,9 @@ from {
   }
 `;
 
-const PopoverContent = /* @__PURE__ */ styled(
-  /* @__PURE__ */ RXPopover.Content,
-)<{ theme?: Theme }>`
+const PopoverContent = /* @__PURE__ */ (() => styled(RXPopover.Content)<{
+  theme?: Theme;
+}>`
   border-radius: ${radius.sm};
   padding: ${spacing.sm} ${spacing.md};
   background-color: ${(p) => p.theme.colors.tooltipBg};
@@ -64,10 +64,10 @@ const PopoverContent = /* @__PURE__ */ styled(
   animation: ${slideUpAndFade} 400ms cubic-bezier(0.16, 1, 0.3, 1);
   color: ${(p) => p.theme.colors.tooltipText};
   font-size: ${fontSize.md};
-`;
+`)();
 
-const PopoverArrow = /* @__PURE__ */ styled(/* @__PURE__ */ RXPopover.Arrow)<{
+const PopoverArrow = /* @__PURE__ */ (() => styled(RXPopover.Arrow)<{
   theme?: Theme;
 }>`
   fill: ${(p) => p.theme.colors.tooltipBg};
-`;
+`)();

packages/react/src/components/TextDivider.tsx

@@ -1,7 +1,22 @@
 import styled from "@emotion/styled";
-import { fontSize, Theme } from "../design-system";
+import { fontSize, spacing, Theme } from "../design-system";
 
-export const TextDivider = styled.div<{ theme?: Theme }>`
+export const TextDivider = (props: {
+  text: string;
+  py?: keyof typeof spacing;
+}) => {
+  return (
+    <TextDividerEl
+      style={{
+        paddingBlock: props.py ? spacing[props.py] : 0,
+      }}
+    >
+      <span> {props.text}</span>
+    </TextDividerEl>
+  );
+};
+
+export const TextDividerEl = styled.div<{ theme?: Theme }>`
   display: flex;
   align-items: center;
   color: ${(p) => p.theme.colors.secondaryText};

packages/react/src/components/Tooltip.tsx

@@ -40,9 +40,7 @@ to {
 }
 `;
 
-const TooltipContent = /* @__PURE__ */ styled(
-  /* @__PURE__ */ RadixTooltip.Content,
-)<{
+const TooltipContent = /* @__PURE__ */ (() => styled(RadixTooltip.Content)<{
   theme?: Theme;
 }>`
   background: ${(p) => p.theme.colors.tooltipBg};
@@ -58,12 +56,10 @@ const TooltipContent = /* @__PURE__ */ styled(
   z-index: 999999999999999;
   max-width: 300px;
   line-height: 1.5;
-`;
+`)();
 
-const TooltipArrow = /* @__PURE__ */ styled(
-  /* @__PURE__ */ RadixTooltip.Arrow,
-)<{
+const TooltipArrow = /* @__PURE__ */ (() => styled(RadixTooltip.Arrow)<{
   theme?: Theme;
 }>`
   fill: ${(p) => p.theme.colors.tooltipBg};
-`;
+`)();

packages/react/src/design-system/index.ts

@@ -63,13 +63,13 @@ function createThemeObj(colors: typeof darkColors) {
       scrollbarBg: colors.base2,
       walletSelectorButtonHoverBg: colors.base2,
 
-      separatorLine: colors.base3,
+      separatorLine: colors.base4,
 
       secondaryIconColor: colors.secondaryText,
       secondaryIconHoverBg: colors.base3,
       secondaryIconHoverColor: colors.primaryText,
 
-      borderColor: colors.base3,
+      borderColor: colors.base4,
       skeletonBg: colors.base3,
 
       selectedTextColor: colors.base1,

packages/react/src/evm/components/MediaRenderer.tsx

@@ -72,11 +72,8 @@ const PlayButton: React.FC<PlayButtonProps> = ({ onClick, isPlaying }) => {
   );
 };
 
-const VideoPlayer = /* @__PURE__ */ React.forwardRef<
-  HTMLVideoElement,
-  MediaRendererProps
->(
-  (
+const VideoPlayer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLVideoElement, MediaRendererProps>(function Video_Player(
     {
       src,
       alt,
@@ -89,7 +86,7 @@ const VideoPlayer = /* @__PURE__ */ React.forwardRef<
       ...restProps
     },
     ref,
-  ) => {
+  ) {
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(!requireInteraction);
     const [muted, setMuted] = useState(true);
@@ -170,196 +167,192 @@ const VideoPlayer = /* @__PURE__ */ React.forwardRef<
         />
       </div>
     );
-  },
-);
+  }))();
 
-VideoPlayer.displayName = "VideoPlayer";
+const AudioPlayer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLAudioElement, MediaRendererProps>(function Audio_Player(
+    { src, alt, poster, style, height, width, ...restProps },
+    ref,
+  ) {
+    const audioRef = useRef<HTMLAudioElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [muted, setMuted] = useState(true);
 
-const AudioPlayer = /* @__PURE__ */ React.forwardRef<
-  HTMLAudioElement,
-  MediaRendererProps
->(({ src, alt, poster, style, height, width, ...restProps }, ref) => {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const [playing, setPlaying] = useState(false);
-  const [muted, setMuted] = useState(true);
-
-  useEffect(() => {
-    if (audioRef.current) {
-      if (playing) {
-        audioRef.current.play();
-      } else {
-        audioRef.current.pause();
-        audioRef.current.currentTime = 0;
+    useEffect(() => {
+      if (audioRef.current) {
+        if (playing) {
+          audioRef.current.play();
+        } else {
+          audioRef.current.pause();
+          audioRef.current.currentTime = 0;
+        }
       }
-    }
-  }, [playing]);
+    }, [playing]);
 
-  return (
-    <div style={{ position: "relative", ...style }} {...restProps}>
-      {poster ? (
-        <img
-          height={height}
-          width={width}
-          src={poster}
-          style={{
-            height: "100%",
-            width: "100%",
-            pointerEvents: "none",
-            objectFit: "contain",
+    return (
+      <div style={{ position: "relative", ...style }} {...restProps}>
+        {poster ? (
+          <img
+            height={height}
+            width={width}
+            src={poster}
+            style={{
+              height: "100%",
+              width: "100%",
+              pointerEvents: "none",
+              objectFit: "contain",
+            }}
+            alt={alt}
+          />
+        ) : (
+          <div
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "grid",
+              placeItems: "center",
+              pointerEvents: "none",
+              backgroundColor: "#fff",
+              color: "rgb(138, 147, 155)",
+            }}
+          >
+            <CarbonDocumentAudio style={{ height: "64px", width: "64px" }} />
+          </div>
+        )}
+
+        <PlayButton
+          onClick={() => {
+            setPlaying((prev) => !prev);
+            setMuted(false);
           }}
-          alt={alt}
+          isPlaying={playing}
         />
-      ) : (
+        <audio
+          ref={mergeRefs([audioRef, ref])}
+          src={src ?? undefined}
+          loop
+          playsInline
+          muted={muted}
+          preload="none"
+          controlsList="nodownload"
+          style={{
+            position: "absolute",
+            opacity: 0,
+            pointerEvents: "none",
+            zIndex: -1,
+            visibility: "hidden",
+          }}
+        />
+      </div>
+    );
+  }))();
+
+const IframePlayer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLIFrameElement, MediaRendererProps>(
+    function Iframe_Player(
+      { src, alt, poster, requireInteraction, style, ...restProps },
+      ref,
+    ) {
+      const [playing, setPlaying] = useState(!requireInteraction);
+
+      return (
+        <div style={{ position: "relative", ...style }} {...restProps}>
+          <iframe
+            src={playing ? src ?? undefined : undefined}
+            ref={ref}
+            style={{
+              objectFit: "contain",
+              zIndex: 1,
+              height: "100%",
+              width: "100%",
+              transition: "opacity .5s",
+              opacity: !poster ? 1 : playing ? 1 : 0,
+            }}
+            sandbox="allow-scripts"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          />
+          {poster && (
+            <img
+              src={poster}
+              style={{
+                objectFit: "contain",
+                pointerEvents: "none",
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                zIndex: 2,
+                transition: "opacity .5s",
+                opacity: playing ? 0 : 1,
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+              }}
+              alt={alt}
+            />
+          )}
+          <PlayButton
+            onClick={() => {
+              setPlaying((prev) => !prev);
+            }}
+            isPlaying={playing}
+          />
+        </div>
+      );
+    },
+  ))();
+
+const LinkPlayer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLAnchorElement, MediaRendererProps>(function Link_Player(
+    { src, alt, style, ...restProps },
+    ref,
+  ) {
+    return (
+      <div style={{ position: "relative", ...style }} {...restProps}>
         <div
           style={{
             width: "100%",
             height: "100%",
             display: "grid",
             placeItems: "center",
-            pointerEvents: "none",
             backgroundColor: "#fff",
             color: "rgb(138, 147, 155)",
           }}
         >
-          <CarbonDocumentAudio style={{ height: "64px", width: "64px" }} />
-        </div>
-      )}
-
-      <PlayButton
-        onClick={() => {
-          setPlaying((prev) => !prev);
-          setMuted(false);
-        }}
-        isPlaying={playing}
-      />
-      <audio
-        ref={mergeRefs([audioRef, ref])}
-        src={src ?? undefined}
-        loop
-        playsInline
-        muted={muted}
-        preload="none"
-        controlsList="nodownload"
-        style={{
-          position: "absolute",
-          opacity: 0,
-          pointerEvents: "none",
-          zIndex: -1,
-          visibility: "hidden",
-        }}
-      />
-    </div>
-  );
-});
-
-AudioPlayer.displayName = "AudioPlayer";
-
-const IframePlayer = /* @__PURE__ */ React.forwardRef<
-  HTMLIFrameElement,
-  MediaRendererProps
->(({ src, alt, poster, requireInteraction, style, ...restProps }, ref) => {
-  const [playing, setPlaying] = useState(!requireInteraction);
-
-  return (
-    <div style={{ position: "relative", ...style }} {...restProps}>
-      <iframe
-        src={playing ? src ?? undefined : undefined}
-        ref={ref}
-        style={{
-          objectFit: "contain",
-          zIndex: 1,
-          height: "100%",
-          width: "100%",
-          transition: "opacity .5s",
-          opacity: !poster ? 1 : playing ? 1 : 0,
-        }}
-        sandbox="allow-scripts"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      />
-      {poster && (
-        <img
-          src={poster}
-          style={{
-            objectFit: "contain",
-            pointerEvents: "none",
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            zIndex: 2,
-            transition: "opacity .5s",
-            opacity: playing ? 0 : 1,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-          alt={alt}
-        />
-      )}
-      <PlayButton
-        onClick={() => {
-          setPlaying((prev) => !prev);
-        }}
-        isPlaying={playing}
-      />
-    </div>
-  );
-});
-
-IframePlayer.displayName = "IframePlayer";
-
-const LinkPlayer = /* @__PURE__ */ React.forwardRef<
-  HTMLAnchorElement,
-  MediaRendererProps
->(({ src, alt, style, ...restProps }, ref) => {
-  return (
-    <div style={{ position: "relative", ...style }} {...restProps}>
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          display: "grid",
-          placeItems: "center",
-          backgroundColor: "#fff",
-          color: "rgb(138, 147, 155)",
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
-            alignItems: "center",
-            flexWrap: "nowrap",
-          }}
-        >
-          <CarbonDocumentUnknown
+          <div
             style={{
-              maxWidth: "128px",
-              minWidth: "48px",
-              width: "50%",
-              aspectRatio: "1",
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              alignItems: "center",
+              flexWrap: "nowrap",
             }}
-          />
-          <a
-            rel="noopener noreferrer"
-            style={{
-              textDecoration: "underline",
-              color: "rgb(138, 147, 155)",
-            }}
-            href={src ?? undefined}
-            target="_blank"
-            ref={ref as unknown as React.LegacyRef<HTMLAnchorElement>}
           >
-            {alt || "File"}
-          </a>
+            <CarbonDocumentUnknown
+              style={{
+                maxWidth: "128px",
+                minWidth: "48px",
+                width: "50%",
+                aspectRatio: "1",
+              }}
+            />
+            <a
+              rel="noopener noreferrer"
+              style={{
+                textDecoration: "underline",
+                color: "rgb(138, 147, 155)",
+              }}
+              href={src ?? undefined}
+              target="_blank"
+              ref={ref as unknown as React.LegacyRef<HTMLAnchorElement>}
+            >
+              {alt || "File"}
+            </a>
+          </div>
         </div>
       </div>
-    </div>
-  );
-});
-
-LinkPlayer.displayName = "LinkPlayer";
+    );
+  }))();
 
 /**
  * This component can be used to render any media type, including image, audio, video, and html files.
@@ -382,129 +375,125 @@ LinkPlayer.displayName = "LinkPlayer";
  *
  * You can try switching out the `src` prop to different types of URLs and media types to explore the possibilities.
  */
-export const MediaRenderer = /* @__PURE__ */ React.forwardRef<
-  HTMLMediaElement,
-  MediaRendererProps
->(
-  (
-    {
-      src,
-      poster,
-      alt,
-      gatewayUrl,
-      requireInteraction = false,
-      width = "300px",
-      height = "300px",
-      style,
-      mimeType,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const mergedStyle: React.CSSProperties = {
-      objectFit: "contain",
-      width,
-      height,
-      ...style,
-    };
-    const videoOrImageSrc = useResolvedMediaType(
-      src ?? undefined,
-      mimeType,
-      gatewayUrl,
-    );
-    const possiblePosterSrc = useResolvedMediaType(
-      poster ?? undefined,
-      undefined,
-      gatewayUrl,
-    );
+export const MediaRenderer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLMediaElement, MediaRendererProps>(
+    function Media_Renderer(
+      {
+        src,
+        poster,
+        alt,
+        gatewayUrl,
+        requireInteraction = false,
+        width = "300px",
+        height = "300px",
+        style,
+        mimeType,
+        ...restProps
+      },
+      ref,
+    ) {
+      const mergedStyle: React.CSSProperties = {
+        objectFit: "contain",
+        width,
+        height,
+        ...style,
+      };
+      const videoOrImageSrc = useResolvedMediaType(
+        src ?? undefined,
+        mimeType,
+        gatewayUrl,
+      );
+      const possiblePosterSrc = useResolvedMediaType(
+        poster ?? undefined,
+        undefined,
+        gatewayUrl,
+      );
 
-    if (!videoOrImageSrc.mimeType) {
-      return (
-        <img
-          style={mergedStyle}
-          {...restProps}
-          ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
-          alt={alt}
-        />
-      );
-    } else if (videoOrImageSrc.mimeType.startsWith("text/html")) {
-      return (
-        <IframePlayer
-          style={mergedStyle}
-          src={videoOrImageSrc.url}
-          poster={possiblePosterSrc.url}
-          requireInteraction={requireInteraction}
-          {...restProps}
-        />
-      );
-    } else if (videoOrImageSrc.mimeType.startsWith("model")) {
-      return (
-        <Suspense
-          fallback={
-            poster ? (
-              <img
-                style={mergedStyle}
-                src={poster}
-                alt={alt}
-                ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
-                {...restProps}
-              />
-            ) : null
-          }
-        >
-          <ModelViewer
+      if (!videoOrImageSrc.mimeType) {
+        return (
+          <img
             style={mergedStyle}
-            src={videoOrImageSrc.url || ""}
-            poster={poster}
+            {...restProps}
+            ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
             alt={alt}
+          />
+        );
+      } else if (videoOrImageSrc.mimeType.startsWith("text/html")) {
+        return (
+          <IframePlayer
+            style={mergedStyle}
+            src={videoOrImageSrc.url}
+            poster={possiblePosterSrc.url}
+            requireInteraction={requireInteraction}
             {...restProps}
           />
-        </Suspense>
-      );
-    } else if (shouldRenderVideoTag(videoOrImageSrc.mimeType)) {
+        );
+      } else if (videoOrImageSrc.mimeType.startsWith("model")) {
+        return (
+          <Suspense
+            fallback={
+              poster ? (
+                <img
+                  style={mergedStyle}
+                  src={poster}
+                  alt={alt}
+                  ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
+                  {...restProps}
+                />
+              ) : null
+            }
+          >
+            <ModelViewer
+              style={mergedStyle}
+              src={videoOrImageSrc.url || ""}
+              poster={poster}
+              alt={alt}
+              {...restProps}
+            />
+          </Suspense>
+        );
+      } else if (shouldRenderVideoTag(videoOrImageSrc.mimeType)) {
+        return (
+          <VideoPlayer
+            style={mergedStyle}
+            src={videoOrImageSrc.url}
+            poster={possiblePosterSrc.url}
+            requireInteraction={requireInteraction}
+            {...restProps}
+          />
+        );
+      } else if (shouldRenderAudioTag(videoOrImageSrc.mimeType)) {
+        return (
+          <AudioPlayer
+            style={mergedStyle}
+            src={videoOrImageSrc.url}
+            poster={possiblePosterSrc.url}
+            requireInteraction={requireInteraction}
+            {...restProps}
+          />
+        );
+      } else if (videoOrImageSrc.mimeType.startsWith("image/")) {
+        return (
+          <img
+            style={mergedStyle}
+            src={videoOrImageSrc.url}
+            alt={alt}
+            ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
+            {...restProps}
+          />
+        );
+      }
       return (
-        <VideoPlayer
-          style={mergedStyle}
-          src={videoOrImageSrc.url}
-          poster={possiblePosterSrc.url}
-          requireInteraction={requireInteraction}
-          {...restProps}
-        />
-      );
-    } else if (shouldRenderAudioTag(videoOrImageSrc.mimeType)) {
-      return (
-        <AudioPlayer
-          style={mergedStyle}
-          src={videoOrImageSrc.url}
-          poster={possiblePosterSrc.url}
-          requireInteraction={requireInteraction}
-          {...restProps}
-        />
-      );
-    } else if (videoOrImageSrc.mimeType.startsWith("image/")) {
-      return (
-        <img
+        <LinkPlayer
           style={mergedStyle}
           src={videoOrImageSrc.url}
           alt={alt}
-          ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
+          ref={ref as unknown as React.Ref<HTMLAnchorElement>}
           {...restProps}
         />
       );
-    }
-    return (
-      <LinkPlayer
-        style={mergedStyle}
-        src={videoOrImageSrc.url}
-        alt={alt}
-        ref={ref as unknown as React.Ref<HTMLAnchorElement>}
-        {...restProps}
-      />
-    );
-  },
-);
-
-MediaRenderer.displayName = "MediaRenderer";
+    },
+  ))();
 
 export interface MediaType {
   url?: string;

packages/react/src/evm/components/ModelViewer.tsx

@@ -12,25 +12,24 @@ declare global {
   }
 }
 
-export const ModelViewer = /* @__PURE__ */ React.forwardRef<
-  HTMLDivElement,
-  MediaRendererProps
->(({ src, alt, poster, style }, ref) => {
-  return (
-    <div style={{ ...style }} ref={ref}>
-      {src ? (
-        <model-viewer
-          src={src}
-          alt={alt || "3D Model"}
-          camera-controls
-          poster={poster ? poster : null}
-          style={{ width: "100%", height: "100%" } as CSSStyleDeclaration}
-        />
-      ) : null}
-    </div>
-  );
-});
-
-ModelViewer.displayName = "ModelViewer";
+export const ModelViewer = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLDivElement, MediaRendererProps>(function Model_Viewer(
+    { src, alt, poster, style },
+    ref,
+  ) {
+    return (
+      <div style={{ ...style }} ref={ref}>
+        {src ? (
+          <model-viewer
+            src={src}
+            alt={alt || "3D Model"}
+            camera-controls
+            poster={poster ? poster : null}
+            style={{ width: "100%", height: "100%" } as CSSStyleDeclaration}
+          />
+        ) : null}
+      </div>
+    );
+  }))();
 
 export default ModelViewer;

packages/react/src/evm/components/NftMedia.tsx

@@ -41,22 +41,23 @@ export interface ThirdwebNftMediaProps extends SharedMediaProps {
  * }
  * ```
  */
-export const ThirdwebNftMedia = /* @__PURE__ */ React.forwardRef<
-  HTMLMediaElement,
-  ThirdwebNftMediaProps
->(({ metadata, width = "300px", height = "300px", style, ...props }, ref) => {
-  return (
-    <MediaRenderer
-      src={metadata.animation_url || metadata.image}
-      poster={metadata.image}
-      alt={metadata.name?.toString() || ""}
-      ref={ref}
-      width={width}
-      height={height}
-      style={{ ...style }}
-      {...props}
-    />
-  );
-});
-
-ThirdwebNftMedia.displayName = "ThirdwebNftMedia";
+export const ThirdwebNftMedia = /* @__PURE__ */ (() =>
+  React.forwardRef<HTMLMediaElement, ThirdwebNftMediaProps>(
+    function Thirdweb_NftMedia(
+      { metadata, width = "300px", height = "300px", style, ...props },
+      ref,
+    ) {
+      return (
+        <MediaRenderer
+          src={metadata.animation_url || metadata.image}
+          poster={metadata.image}
+          alt={metadata.name?.toString() || ""}
+          ref={ref}
+          width={width}
+          height={height}
+          style={{ ...style }}
+          {...props}
+        />
+      );
+    },
+  ))();

packages/react/src/evm/index.ts

@@ -62,4 +62,5 @@ export {
   MagicLink,
   SignerWallet,
   InjectedWallet,
+  setWalletAnalyticsEnabled,
 } from "@thirdweb-dev/wallets";

packages/react/src/evm/lib/portal.tsx

@@ -91,5 +91,3 @@ export type PortalProps = PropsWithChildren<{
   containerRef?: React.RefObject<Node>;
   unstable_skipInitialRender?: boolean;
 }>;
-
-Portal.displayName = "Portal";

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

@@ -593,9 +593,9 @@ const dropdownContentFade = keyframes`
   }
 `;
 
-const DropDownContent = /* @__PURE__ */ styled(
-  /* @__PURE__ */ DropdownMenu.Content,
-)<{ theme?: Theme }>`
+const DropDownContent = /* @__PURE__ */ (() => styled(DropdownMenu.Content)<{
+  theme?: Theme;
+}>`
   width: 320px;
   box-sizing: border-box;
   max-width: 100%;
@@ -608,7 +608,7 @@ const DropDownContent = /* @__PURE__ */ styled(
   --bg: ${(props) => props.theme.colors.dropdownBg};
   z-index: 1000000;
   line-height: 1;
-`;
+`)();
 
 const WalletInfoButton = styled.button<{ theme?: Theme }>`
   all: unset;
@@ -689,13 +689,13 @@ const MenuButton = styled.button<{ theme?: Theme }>`
   }
 `;
 
-const MenuLink = /* @__PURE__ */ MenuButton.withComponent("a");
+const MenuLink = /* @__PURE__ */ (() => MenuButton.withComponent("a"))();
 
-export const DropdownMenuItem = /* @__PURE__ */ styled(
-  /* @__PURE__ */ DropdownMenu.Item,
+export const DropdownMenuItem = /* @__PURE__ */ (() => styled(
+  DropdownMenu.Item,
 )<{ theme?: Theme }>`
   outline: none;
-`;
+`)();
 
 export const StyledChevronRightIcon = /* @__PURE__ */ styled(
   /* @__PURE__ */ ChevronRightIcon,

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

@@ -539,7 +539,7 @@ const NetworkList = /* @__PURE__ */ memo(function NetworkList(props: {
   );
 });
 
-const TabButton = /* @__PURE__ */ styled(/* @__PURE__ */ Tabs.Trigger)<{
+const TabButton = /* @__PURE__ */ (() => styled(Tabs.Trigger)<{
   theme?: Theme;
 }>`
   all: unset;
@@ -558,7 +558,7 @@ const TabButton = /* @__PURE__ */ styled(/* @__PURE__ */ Tabs.Trigger)<{
     background: ${(p) => p.theme.colors.secondaryButtonBg};
     color: ${(p) => p.theme.colors.primaryText};
   }
-`;
+`)();
 
 const SectionLabel = styled.p<{ theme?: Theme }>`
   font-size: ${fontSize.sm};

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

@@ -290,7 +290,7 @@ export function SendFundsForm(props: {
           </CurrencyBadge>
         </Container>
 
-        <Spacer y="xl" />
+        <Spacer y="xxl" />
 
         {/* Submit */}
         <Button
@@ -307,6 +307,7 @@ export function SendFundsForm(props: {
           style={{
             alignItems: "center",
             gap: spacing.sm,
+            padding: spacing.md,
           }}
         >
           {sendTokenMutation.isLoading ? "Sending" : "Send"}

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

@@ -56,20 +56,6 @@ export const WalletSelector: React.FC<{
     nonLocalWalletConfigs.filter((w) => w.category !== "socialLogin"),
   );
 
-  const showNewToWallets =
-    isCompact && (socialWallets.length === 0 || isWalletGroupExpanded);
-
-  // groups UI is showing a social login + grouping all eoa wallets together in a group
-  // do this if there is social login and more than 2 eoa wallets
-  const showGroupsUI =
-    isCompact && socialWallets.length >= 1 && eoaWallets.length >= 2;
-
-  const showTOS = isCompact && (termsOfServiceUrl || privacyPolicyUrl);
-
-  const showFooter = Boolean(
-    (!showGroupsUI && localWalletConfig) || showNewToWallets,
-  );
-
   const continueAsGuest = localWalletConfig && (
     <Button
       fullWidth
@@ -138,7 +124,217 @@ export const WalletSelector: React.FC<{
     props.selectWallet(wallet);
   };
 
-  const showSeperatorLine = showNewToWallets && !continueAsGuest && showTOS;
+  const connectAWallet = (
+    <Button
+      fullWidth
+      variant="outline"
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        gap: spacing.sm,
+        padding: spacing.md,
+      }}
+      onClick={() => {
+        setIsWalletGroupExpanded(true);
+      }}
+    >
+      <Container flex="row" gap="xxs">
+        {eoaWallets.slice(0, 2).map((w) => (
+          <Img
+            key={w.id}
+            width={iconSize.sm}
+            height={iconSize.sm}
+            src={w.meta.iconURL}
+          />
+        ))}
+      </Container>
+      Connect a wallet
+    </Button>
+  );
+
+  const newToWallets = (
+    <Container
+      flex="row"
+      style={{
+        justifyContent: "space-between",
+      }}
+    >
+      <Text color="secondaryText" size="sm" weight={500}>
+        New to wallets?
+      </Text>
+      <Link
+        weight={500}
+        size="sm"
+        target="_blank"
+        href="https://blog.thirdweb.com/web3-wallet/"
+      >
+        Get started
+      </Link>
+    </Container>
+  );
+
+  const tos =
+    termsOfServiceUrl || privacyPolicyUrl ? (
+      <TOS
+        termsOfServiceUrl={termsOfServiceUrl}
+        privacyPolicyUrl={privacyPolicyUrl}
+      />
+    ) : undefined;
+
+  let topSection: React.ReactNode;
+  let bottomSection: React.ReactNode;
+
+  // wide modal
+  if (!isCompact) {
+    topSection = (
+      <WalletSelection
+        walletConfigs={nonLocalWalletConfigs}
+        selectWallet={handleSelect}
+      />
+    );
+
+    if (continueAsGuest) {
+      bottomSection = (
+        <ScreenBottomContainer>{continueAsGuest}</ScreenBottomContainer>
+      );
+    }
+  }
+
+  // compact
+  else {
+    // no social logins
+    if (socialWallets.length === 0) {
+      topSection = (
+        <WalletSelection
+          walletConfigs={nonLocalWalletConfigs}
+          selectWallet={handleSelect}
+        />
+      );
+
+      bottomSection = (
+        <>
+          <Line />
+          <Container flex="column" p="lg" gap="lg">
+            {newToWallets}
+            {continueAsGuest}
+          </Container>
+          {!continueAsGuest && <Line />}
+          {tos && (
+            <Container
+              px="md"
+              style={{
+                paddingBottom: spacing.md,
+                paddingTop: continueAsGuest ? 0 : spacing.md,
+              }}
+            >
+              {tos}
+            </Container>
+          )}
+        </>
+      );
+    }
+
+    // social logins
+    else {
+      // not expanded state
+      if (!isWalletGroupExpanded) {
+        topSection = (
+          <Container px="xs">
+            <WalletSelection
+              walletConfigs={socialWallets}
+              selectWallet={handleSelect}
+            />
+            {eoaWallets.length > 0 && (
+              <>
+                <TextDivider text="OR" />
+                <Spacer y="lg" />
+              </>
+            )}
+          </Container>
+        );
+
+        // only social login - no eoa wallets
+        if (eoaWallets.length === 0) {
+          bottomSection = tos ? (
+            <>
+              <Spacer y="md" />
+              <Line />
+              {continueAsGuest && (
+                <Container p="lg"> {continueAsGuest}</Container>
+              )}
+              {tos && <Container p="md"> {tos} </Container>}
+            </>
+          ) : (
+            <Spacer y="sm" />
+          );
+        }
+
+        // social login + eoa wallets
+        else {
+          // social login + More than 1 eoa wallets
+          if (eoaWallets.length > 1) {
+            bottomSection = (
+              <Container flex="column" gap="sm">
+                <Container px="lg" flex="column" gap="md">
+                  {connectAWallet}
+                  {continueAsGuest}
+                </Container>
+
+                {tos ? (
+                  <Container p="md"> {tos} </Container>
+                ) : (
+                  <Spacer y="md" />
+                )}
+              </Container>
+            );
+          }
+
+          // social login + single eoa wallet
+          else {
+            bottomSection = (
+              <>
+                <Container px="lg">
+                  <WalletSelection
+                    walletConfigs={eoaWallets}
+                    selectWallet={handleSelect}
+                  />
+                </Container>
+
+                {continueAsGuest && (
+                  <Container flex="column" px="lg" gap="lg">
+                    {continueAsGuest}
+                  </Container>
+                )}
+
+                {tos ? (
+                  <>
+                    {continueAsGuest ? <Spacer y="md" /> : <Line />}
+                    <Container p="md"> {tos} </Container>
+                  </>
+                ) : (
+                  <>{continueAsGuest && <Spacer y="xl" />}</>
+                )}
+              </>
+            );
+          }
+        }
+      }
+
+      // expanded state
+      else {
+        topSection = (
+          <WalletSelection
+            walletConfigs={eoaWallets}
+            selectWallet={handleSelect}
+          />
+        );
+
+        bottomSection = (
+          <ScreenBottomContainer>{newToWallets}</ScreenBottomContainer>
+        );
+      }
+    }
+  }
 
   return (
     <Container scrollY flex="column" animate="fadein" fullHeight>
@@ -160,130 +356,15 @@ export const WalletSelector: React.FC<{
       <Container
         expand
         scrollY
-        px={nonLocalWalletConfigs.length === 1 ? "lg" : "md"}
+        px="md"
         style={{
           paddingTop: "2px",
         }}
       >
-        {showGroupsUI ? (
-          <>
-            {/* list of EOA wallets */}
-            {isWalletGroupExpanded ? (
-              <WalletSelection
-                walletConfigs={eoaWallets}
-                selectWallet={handleSelect}
-              />
-            ) : (
-              <Container px="xs">
-                <WalletSelection
-                  walletConfigs={socialWallets}
-                  selectWallet={handleSelect}
-                />
-
-                <TextDivider>
-                  <span> OR </span>
-                </TextDivider>
-
-                <Spacer y="lg" />
-
-                {/* connect a wallet */}
-                <Button
-                  fullWidth
-                  variant="outline"
-                  style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    gap: spacing.sm,
-                    padding: spacing.md,
-                  }}
-                  onClick={() => {
-                    setIsWalletGroupExpanded(true);
-                  }}
-                >
-                  <Container flex="row" gap="xxs">
-                    {eoaWallets.slice(0, 2).map((w) => (
-                      <Img
-                        key={w.id}
-                        width={iconSize.sm}
-                        height={iconSize.sm}
-                        src={w.meta.iconURL}
-                      />
-                    ))}
-                  </Container>
-                  Connect a wallet
-                </Button>
-
-                {continueAsGuest ? (
-                  <>
-                    <Spacer y="md" />
-                    {continueAsGuest}
-                    <Spacer y="xl" />
-                  </>
-                ) : (
-                  <Spacer y="xl" />
-                )}
-              </Container>
-            )}
-          </>
-        ) : (
-          <WalletSelection
-            walletConfigs={nonLocalWalletConfigs}
-            selectWallet={handleSelect}
-          />
-        )}
+        {topSection}
       </Container>
 
-      {/* Footer */}
-      {showFooter && (
-        <ScreenBottomContainer>
-          {showNewToWallets && (
-            <Container
-              flex="row"
-              style={{
-                justifyContent: "space-between",
-              }}
-            >
-              <Text color="secondaryText" size="sm" weight={500}>
-                New to wallets?
-              </Text>
-              <Link
-                weight={500}
-                size="sm"
-                target="_blank"
-                href="https://blog.thirdweb.com/web3-wallet/"
-              >
-                Get started
-              </Link>
-            </Container>
-          )}
-
-          {!showGroupsUI && continueAsGuest}
-        </ScreenBottomContainer>
-      )}
-
-      {showTOS && !isWalletGroupExpanded && (
-        <div>
-          {showSeperatorLine && <Line />}
-
-          <Container
-            p="md"
-            style={
-              !showSeperatorLine
-                ? {
-                    paddingTop: 0,
-                  }
-                : undefined
-            }
-          >
-            {isCompact && (
-              <TOS
-                termsOfServiceUrl={termsOfServiceUrl}
-                privacyPolicyUrl={privacyPolicyUrl}
-              />
-            )}
-          </Container>
-        </div>
-      )}
+      {bottomSection}
     </Container>
   );
 };
@@ -383,7 +464,7 @@ const WalletList = styled.ul<{ theme?: Theme }>`
   margin: -2px;
   padding-bottom: 0;
   margin-bottom: 0;
-  padding-bottom: ${spacing.xl};
+  padding-bottom: ${spacing.lg};
 `;
 
 const WalletButton = styled.button<{ theme?: Theme }>`
@@ -428,7 +509,7 @@ function sortWalletConfigs(walletConfigs: WalletConfig[]) {
         }
         return 0;
       })
-      // show the reccomended wallets even before that
+      // show the recommended wallets even before that
       .sort((a, b) => {
         if (a.recommended && !b.recommended) {
           return -1;

packages/react/src/wallet/utils/openGoogleSignInWindow.ts

@@ -1,9 +1,31 @@
-export function openGoogleSignInWindow() {
-  const win = window.open("", undefined, "width=350, height=500");
+import { Theme } from "../../design-system";
+
+export function openGoogleSignInWindow(themeObj: Theme) {
+  // open the popup in the center of the screen
+  const width = 350;
+  const height = 500;
+  const top = (window.innerHeight - height) / 2;
+  const left = (window.innerWidth - width) / 2;
+
+  const win = window.open(
+    "",
+    undefined,
+    `width=${width}, height=${height}, top=${top}, left=${left}`,
+  );
   if (win) {
     win.document.title = "Sign In - Google Accounts";
     win.document.body.innerHTML = spinnerWindowHtml;
+    win.document.body.style.background = themeObj.colors.modalBg;
+    win.document.body.style.color = themeObj.colors.accentText;
   }
+
+  // close it when current window is closed or refreshed
+  if (win) {
+    window.addEventListener("beforeunload", () => {
+      win?.close();
+    });
+  }
+
   return win;
 }
 
@@ -14,7 +36,7 @@ const spinnerWindowHtml = `
     cy="25"
     r="20"
     fill="none"
-    stroke="#000"
+    stroke="currentColor"
     stroke-width="4"
   />
 </svg>

packages/react/src/wallet/wallets/embeddedWallet/EmbeddedWalletFormUI.tsx

@@ -15,6 +15,7 @@ import { InputSelectionUI } from "../InputSelectionUI";
 import type { EmbeddedWalletLoginType } from "./types";
 import { TextDivider } from "../../../components/TextDivider";
 import { openGoogleSignInWindow } from "../../utils/openGoogleSignInWindow";
+import { useTheme } from "@emotion/react";
 
 export const EmbeddedWalletFormUI = (props: {
   onSelect: (loginType: EmbeddedWalletLoginType) => void;
@@ -23,6 +24,7 @@ export const EmbeddedWalletFormUI = (props: {
   const createWalletInstance = useCreateWalletInstance();
   const setConnectionStatus = useSetConnectionStatus();
   const setConnectedWallet = useSetConnectedWallet();
+  const themeObj = useTheme() as Theme;
 
   // Need to trigger google login on button click to avoid popup from being blocked
   const googleLogin = async () => {
@@ -30,7 +32,7 @@ export const EmbeddedWalletFormUI = (props: {
       const embeddedWallet = createWalletInstance(props.walletConfig);
       setConnectionStatus("connecting");
 
-      const googleWindow = openGoogleSignInWindow();
+      const googleWindow = openGoogleSignInWindow(themeObj);
       if (!googleWindow) {
         throw new Error("Failed to open google login window");
       }
@@ -62,15 +64,7 @@ export const EmbeddedWalletFormUI = (props: {
         <GoogleIcon size={iconSize.md} />
         Sign in with Google
       </SocialButton>
-
-      <Spacer y="lg" />
-
-      <TextDivider>
-        <span>OR</span>
-      </TextDivider>
-
-      <Spacer y="lg" />
-
+      <TextDivider text="OR" py="lg" />
       <InputSelectionUI
         onSelect={(email) => props.onSelect({ email })}
         placeholder="Enter your email address"

packages/react/src/wallet/wallets/embeddedWallet/EmbeddedWalletGoogleLogin.tsx

@@ -13,9 +13,10 @@ import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { ModalTitle } from "../../../components/modalElements";
 import { Text } from "../../../components/text";
-import { iconSize } from "../../../design-system";
+import { Theme, iconSize } from "../../../design-system";
 import { GoogleIcon } from "../../ConnectWallet/icons/GoogleIcon";
 import { openGoogleSignInWindow } from "../../utils/openGoogleSignInWindow";
+import { useTheme } from "@emotion/react";
 
 export const EmbeddedWalletGoogleLogin = (
   props: ConnectUIProps<EmbeddedWallet>,
@@ -25,12 +26,13 @@ export const EmbeddedWalletGoogleLogin = (
   const setConnectionStatus = useSetConnectionStatus();
   const setConnectedWallet = useSetConnectedWallet();
   const connectionStatus = useConnectionStatus();
+  const themeObj = useTheme() as Theme;
 
   const googleLogin = async () => {
     try {
       const embeddedWallet = createWalletInstance(props.walletConfig);
       setConnectionStatus("connecting");
-      const googleWindow = openGoogleSignInWindow();
+      const googleWindow = openGoogleSignInWindow(themeObj);
       if (!googleWindow) {
         throw new Error("Failed to open google login window");
       }

packages/react/src/wallet/wallets/embeddedWallet/EmbeddedWalletOTPLoginUI.tsx

@@ -114,10 +114,10 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
             }}
           >
             {!isWideModal && <Spacer y="xl" />}
-            <Text>Enter the OTP sent to</Text>
+            <Text>Enter the verification code sent to</Text>
             <Spacer y="sm" />
             <Text color="primaryText">{email}</Text>
-            <Spacer y="xxl" />
+            <Spacer y="xl" />
           </div>
 
           <OTPInput
@@ -138,12 +138,12 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
             <FadeIn>
               <Spacer y="md" />
               <Text size="sm" color="danger" center>
-                Invalid OTP
+                Invalid verification code
               </Text>
             </FadeIn>
           )}
 
-          <Spacer y="xxl" />
+          <Spacer y="xl" />
 
           <Container px={isWideModal ? "xxl" : "lg"}>
             {verifyStatus === "verifying" ? (
@@ -168,7 +168,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
             )}
           </Container>
 
-          <Spacer y="xxl" />
+          <Spacer y="xl" />
 
           {!isWideModal && <Line />}
 
@@ -176,7 +176,7 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
             {sendEmailOtpStatus === "error" && (
               <>
                 <Text size="sm" center color="danger">
-                  Failed to send OTP
+                  Failed to send verification code
                 </Text>
               </>
             )}
@@ -190,14 +190,14 @@ export const EmbeddedWalletOTPLoginUI: React.FC<
                   textAlign: "center",
                 }}
               >
-                <Text size="sm">Sending OTP</Text>
+                <Text size="sm">Sending verification code</Text>
                 <Spinner size="xs" color="secondaryText" />
               </Container>
             )}
 
             {sendEmailOtpStatus === "sent" && (
               <LinkButton onClick={sendEmail} type="button">
-                Resend OTP
+                Resend verification code
               </LinkButton>
             )}
           </Container>

packages/react/src/wallet/wallets/magic/magicLink.tsx

@@ -256,11 +256,7 @@ const MagicUI: React.FC<{
 
       {showInputUI && (
         <>
-          {showSeparator && (
-            <TextDivider>
-              <span> OR </span>
-            </TextDivider>
-          )}
+          {showSeparator && <TextDivider text="OR" />}
           <InputSelectionUI
             onSelect={props.onSelect}
             placeholder={placeholder}

packages/react/src/wallet/wallets/paper/PaperFormUI.tsx

@@ -15,6 +15,7 @@ import { InputSelectionUI } from "../InputSelectionUI";
 import { PaperLoginType } from "./types";
 import { TextDivider } from "../../../components/TextDivider";
 import { openGoogleSignInWindow } from "../../utils/openGoogleSignInWindow";
+import { useTheme } from "@emotion/react";
 
 export const PaperFormUI = (props: {
   onSelect: (loginType: PaperLoginType) => void;
@@ -24,13 +25,14 @@ export const PaperFormUI = (props: {
   const createWalletInstance = useCreateWalletInstance();
   const setConnectionStatus = useSetConnectionStatus();
   const setConnectedWallet = useSetConnectedWallet();
+  const themeObj = useTheme() as Theme;
 
   // Need to trigger google login on button click to avoid popup from being blocked
   const googleLogin = async () => {
     try {
       const paperWallet = createWalletInstance(props.walletConfig);
       setConnectionStatus("connecting");
-      const googleWindow = openGoogleSignInWindow();
+      const googleWindow = openGoogleSignInWindow(themeObj);
       if (!googleWindow) {
         throw new Error("Failed to open google login window");
       }
@@ -65,13 +67,7 @@ export const PaperFormUI = (props: {
             Sign in with Google
           </SocialButton>
 
-          <Spacer y="lg" />
-
-          <TextDivider>
-            <span>OR</span>
-          </TextDivider>
-
-          <Spacer y="lg" />
+          <TextDivider text="OR" py="lg" />
         </>
       )}
 

packages/react/src/wallet/wallets/paper/PaperGoogleLogin.tsx

@@ -13,9 +13,10 @@ import { Container, ModalHeader } from "../../../components/basic";
 import { Button } from "../../../components/buttons";
 import { ModalTitle } from "../../../components/modalElements";
 import { Text } from "../../../components/text";
-import { iconSize } from "../../../design-system";
+import { Theme, iconSize } from "../../../design-system";
 import { GoogleIcon } from "../../ConnectWallet/icons/GoogleIcon";
 import { openGoogleSignInWindow } from "../../utils/openGoogleSignInWindow";
+import { useTheme } from "@emotion/react";
 
 export const PaperGoogleLogin = (props: ConnectUIProps<PaperWallet>) => {
   const { goBack, modalSize, connected } = props;
@@ -24,13 +25,14 @@ export const PaperGoogleLogin = (props: ConnectUIProps<PaperWallet>) => {
   const setConnectionStatus = useSetConnectionStatus();
   const setConnectedWallet = useSetConnectedWallet();
   const connectionStatus = useConnectionStatus();
+  const themeObj = useTheme() as Theme;
 
   // Need to trigger google login on button click to avoid popup from being blocked
   const googleLogin = async () => {
     try {
       const paperWallet = createWalletInstance(props.walletConfig);
       setConnectionStatus("connecting");
-      const googleWindow = openGoogleSignInWindow();
+      const googleWindow = openGoogleSignInWindow(themeObj);
       if (!googleWindow) {
         throw new Error("Failed to open google login window");
       }

packages/react/src/wallet/wallets/paper/PaperOTPLoginUI.tsx

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 import { ConnectUIProps, useWalletContext } from "@thirdweb-dev/react-core";
 import { PaperWallet } from "@thirdweb-dev/wallets";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { FadeIn } from "../../../components/FadeIn";
 import { OTPInput } from "../../../components/OTPInput";
 import { Spacer } from "../../../components/Spacer";
 import { Spinner } from "../../../components/Spinner";
@@ -135,7 +134,7 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
             }}
           >
             {!isWideModal && <Spacer y="lg" />}
-            <Text>Enter the OTP sent to</Text>
+            <Text>Enter the verification code sent to</Text>
             <Spacer y="sm" />
             <Text color="primaryText">{email}</Text>
             <Spacer y="xl" />
@@ -159,6 +158,7 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
 
           {recoveryCodeRequired && (
             <Container
+              animate="fadein"
               px="lg"
               style={{
                 textAlign: "center",
@@ -197,15 +197,16 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
           )}
 
           {verifyStatus === "invalid" && (
-            <FadeIn>
+            <Container animate="fadein">
               <Spacer y="md" />
               <Text size="sm" color="danger" center>
-                Invalid OTP {recoveryCodeRequired ? "or recovery code" : ""}
+                Invalid verification code{" "}
+                {recoveryCodeRequired ? "or recovery code" : ""}
               </Text>
-            </FadeIn>
+            </Container>
           )}
 
-          <Spacer y={recoveryCodeRequired ? "xl" : "xxl"} />
+          <Spacer y="xl" />
 
           <Container px={isWideModal ? "xxl" : "lg"}>
             {verifyStatus === "verifying" ? (
@@ -230,15 +231,15 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
             )}
           </Container>
 
-          <Spacer y={recoveryCodeRequired ? "xl" : "xxl"} />
+          <Spacer y={"xl"} />
 
           {!isWideModal && <Line />}
 
-          <Container p={isWideModal ? undefined : "lg"}>
+          <Container p={isWideModal ? undefined : "lg"} animate="fadein">
             {sendEmailStatus === "error" && (
               <>
                 <Text size="sm" center color="danger">
-                  Failed to send OTP
+                  Failed to send verification code
                 </Text>
               </>
             )}
@@ -252,14 +253,14 @@ export const PaperOTPLoginUI: React.FC<PaperOTPLoginUIProps> = (props) => {
                   textAlign: "center",
                 }}
               >
-                <Text size="sm">Sending OTP</Text>
+                <Text size="sm">Sending verification code</Text>
                 <Spinner size="xs" color="secondaryText" />
               </Container>
             )}
 
             {typeof sendEmailStatus !== "string" && (
               <LinkButton onClick={sendEmail} type="button">
-                Resend OTP
+                Resend verification code
               </LinkButton>
             )}
           </Container>

packages/sdk/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @thirdweb-dev/sdk
 
+## 4.0.1
+
+### Patch Changes
+
+- [#1747](https://github.com/thirdweb-dev/js/pull/1747) [`1f3c64d3`](https://github.com/thirdweb-dev/js/commit/1f3c64d3618903b9008cc7b633ea890b508e7800) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Handle upgradeable proxies and optimize proxy resolution
+
+- [#1695](https://github.com/thirdweb-dev/js/pull/1695) [`693f349d`](https://github.com/thirdweb-dev/js/commit/693f349db2478e1cd0fc82a9ef9882f46832b125) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Add optional pagination to getOwned NFTs
+
+- [#1746](https://github.com/thirdweb-dev/js/pull/1746) [`0f12d1f9`](https://github.com/thirdweb-dev/js/commit/0f12d1f90320923309f085c372d3a5ed01dd4606) Thanks [@farhanW3](https://github.com/farhanW3)! - Fix for RPC Override Implementation to get user provided Url and not default RPC Url for the chain
+
+- [#1757](https://github.com/thirdweb-dev/js/pull/1757) [`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0) Thanks [@kumaryash90](https://github.com/kumaryash90)! - Update deployment and tests for MarketplaceV3 latest
+
+- Updated dependencies [[`63ad0050`](https://github.com/thirdweb-dev/js/commit/63ad0050f0a24ec15b90933b5664d697618cf2d0)]:
+  - @thirdweb-dev/contracts-js@1.3.14
+
 ## 4.0.0
 
 ### Major Changes

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/sdk",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "The main thirdweb SDK.",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/sdk",
   "license": "Apache-2.0",
@@ -99,7 +99,7 @@
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-config-thirdweb": "workspace:*",
-    "eslint-plugin-better-tree-shaking": "0.0.3",
+    "eslint-plugin-better-tree-shaking": "0.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-inclusive-language": "^2.2.0",
     "eslint-plugin-prettier": "^5.0.0",

packages/sdk/src/core/schema/shared.ts

@@ -58,9 +58,8 @@ export const BigNumberSchema = /* @__PURE__ */ (() =>
       return BigNumber.from(str);
     }))();
 
-export const BigNumberishSchema = /* @__PURE__ */ BigNumberSchema.transform(
-  (arg) => arg.toString(),
-);
+export const BigNumberishSchema = /* @__PURE__ */ (() =>
+  BigNumberSchema.transform((arg) => arg.toString()))();
 
 export const BigNumberTransformSchema = /* @__PURE__ */ (() =>
   z
@@ -80,15 +79,11 @@ export const BigNumberTransformSchema = /* @__PURE__ */ (() =>
       return BigNumber.from(arg).toString();
     }))();
 
-export const BasisPointsSchema = /* @__PURE__ */ z
-  .number()
-  .max(MAX_BPS, "Cannot exceed 100%")
-  .min(0, "Cannot be below 0%");
+export const BasisPointsSchema = /* @__PURE__ */ (() =>
+  z.number().max(MAX_BPS, "Cannot exceed 100%").min(0, "Cannot be below 0%"))();
 
-export const PercentSchema = /* @__PURE__ */ z
-  .number()
-  .max(100, "Cannot exceed 100%")
-  .min(0, "Cannot be below 0%");
+export const PercentSchema = /* @__PURE__ */ (() =>
+  z.number().max(100, "Cannot exceed 100%").min(0, "Cannot be below 0%"))();
 
 export const HexColor = /* @__PURE__ */ (() =>
   z.union([
@@ -121,9 +116,10 @@ export const QuantitySchema = /* @__PURE__ */ (() =>
 
 export type Quantity = z.output<typeof QuantitySchema>;
 
-export const RawDateSchema = /* @__PURE__ */ z.date().transform((i) => {
-  return BigNumber.from(Math.floor(i.getTime() / 1000));
-});
+export const RawDateSchema = /* @__PURE__ */ (() =>
+  z.date().transform((i) => {
+    return BigNumber.from(Math.floor(i.getTime() / 1000));
+  }))();
 
 /**
  * Default to now

packages/sdk/src/evm/common/any-evm-utils/computeDeploymentInfo.ts

@@ -135,7 +135,7 @@ export async function encodeConstructorParamsForImplementation(
     compilerMetadata.abi,
   );
   const constructorParamTypes = constructorParams.map((p) => {
-    if (p.type === "tuple[]") {
+    if (p.type === "tuple[]" || p.type === "tuple") {
       return utils.ParamType.from(p);
     } else {
       return p.type;
@@ -156,31 +156,13 @@ export async function encodeConstructorParamsForImplementation(
         return constructorParamMap[p.name].value;
       }
       if (p.name && p.name.includes("nativeTokenWrapper")) {
-        const chainId = (await provider.getNetwork()).chainId;
-        let nativeTokenWrapperAddress =
-          getNativeTokenByChainId(chainId).wrapped.address;
-
-        if (nativeTokenWrapperAddress === constants.AddressZero) {
-          const deploymentInfo = await computeDeploymentInfo(
-            "infra",
-            provider,
-            storage,
-            create2Factory,
-            {
-              contractName: "WETH9",
-            },
-            clientId,
-            secretKey,
-          );
-          if (!caches.deploymentPresets["WETH9"]) {
-            caches.deploymentPresets["WETH9"] = deploymentInfo;
-          }
-
-          nativeTokenWrapperAddress =
-            deploymentInfo.transaction.predictedAddress;
-        }
-
-        return nativeTokenWrapperAddress;
+        return await nativeTokenInputArg(
+          provider,
+          storage,
+          create2Factory,
+          clientId,
+          secretKey,
+        );
       } else if (p.name && p.name.includes("trustedForwarder")) {
         if (compilerMetadata.name === "Pack") {
           // EOAForwarder for Pack
@@ -220,6 +202,27 @@ export async function encodeConstructorParamsForImplementation(
       } else if (p.name && p.name.includes("royaltyEngineAddress")) {
         const chainId = (await provider.getNetwork()).chainId;
         return getRoyaltyEngineV1ByChainId(chainId);
+      } else if (p.name && p.name.includes("marketplaceV3Params")) {
+        const chainId = (await provider.getNetwork()).chainId;
+        const royaltyEngineAddress = getRoyaltyEngineV1ByChainId(chainId);
+
+        const nativeTokenWrapper = await nativeTokenInputArg(
+          provider,
+          storage,
+          create2Factory,
+          clientId,
+          secretKey,
+        );
+
+        const extensions = constructorParamMap
+          ? constructorParamMap["_extensions"].value
+          : [];
+
+        return {
+          extensions: extensions,
+          royaltyEngineAddress: royaltyEngineAddress,
+          nativeTokenWrapper: nativeTokenWrapper,
+        };
       } else {
         throw new Error("Can't resolve constructor arguments");
       }
@@ -232,3 +235,36 @@ export async function encodeConstructorParamsForImplementation(
   );
   return encodedArgs;
 }
+
+async function nativeTokenInputArg(
+  provider: providers.Provider,
+  storage: ThirdwebStorage,
+  create2Factory: string,
+  clientId?: string,
+  secretKey?: string,
+): Promise<string> {
+  const chainId = (await provider.getNetwork()).chainId;
+  let nativeTokenWrapperAddress =
+    getNativeTokenByChainId(chainId).wrapped.address;
+
+  if (nativeTokenWrapperAddress === constants.AddressZero) {
+    const deploymentInfo = await computeDeploymentInfo(
+      "infra",
+      provider,
+      storage,
+      create2Factory,
+      {
+        contractName: "WETH9",
+      },
+      clientId,
+      secretKey,
+    );
+    if (!caches.deploymentPresets["WETH9"]) {
+      caches.deploymentPresets["WETH9"] = deploymentInfo;
+    }
+
+    nativeTokenWrapperAddress = deploymentInfo.transaction.predictedAddress;
+  }
+
+  return nativeTokenWrapperAddress;
+}

packages/sdk/src/evm/common/feature-detection/resolveContractUriFromAddress.ts

@@ -1,4 +1,4 @@
-import { BigNumber, providers, constants, utils } from "ethers";
+import { BigNumber, providers, constants, utils, Contract } from "ethers";
 import { extractIPFSHashFromBytecode } from "./extractIPFSHashFromBytecode";
 import { extractMinimalProxyImplementationAddress } from "./extractMinimalProxyImplementationAddress";
 
@@ -33,32 +33,65 @@ export async function resolveImplementation(
   address: string,
   provider: providers.Provider,
 ): Promise<{ address: string; bytecode: string }> {
-  let bytecode;
+  const bytecode = await fetchBytecode(address, provider);
+
+  // check minimal proxy first synchronously
+  const minimalProxyImplementationAddress =
+    extractMinimalProxyImplementationAddress(bytecode);
+  if (minimalProxyImplementationAddress) {
+    return {
+      address: minimalProxyImplementationAddress,
+      bytecode: await fetchBytecode(
+        minimalProxyImplementationAddress,
+        provider,
+      ),
+    };
+  }
+
+  // check other proxy types
+  const impl = await Promise.all([
+    getImplementationFromStorageSlot(address, provider),
+    getImplementationFromContractCall(address, provider),
+  ]);
+
+  for (const implementationAddress of impl) {
+    if (
+      implementationAddress &&
+      utils.isAddress(implementationAddress) &&
+      implementationAddress !== constants.AddressZero
+    ) {
+      return {
+        address: implementationAddress,
+        bytecode: await fetchBytecode(implementationAddress, provider),
+      };
+    }
+  }
+
+  return { address, bytecode };
+}
+
+async function fetchBytecode(
+  address: string,
+  provider: providers.Provider,
+): Promise<string> {
   try {
-    bytecode = await provider.getCode(address);
+    const bytecode = await provider.getCode(address);
+    if (bytecode === "0x") {
+      const chain = await provider.getNetwork();
+      throw new Error(
+        `Contract at ${address} does not exist on chain '${chain.name}' (chainId: ${chain.chainId})`,
+      );
+    }
+    return bytecode;
   } catch (e) {
     throw new Error(`Failed to get bytecode for address ${address}: ${e}`);
   }
+}
 
-  if (bytecode === "0x") {
-    const chain = await provider.getNetwork();
-    throw new Error(
-      `Contract at ${address} does not exist on chain '${chain.name}' (chainId: ${chain.chainId})`,
-    );
-  }
-
-  try {
-    // TODO support other types of proxies
-    const implementationAddress =
-      extractMinimalProxyImplementationAddress(bytecode);
-    if (implementationAddress) {
-      return await resolveImplementation(implementationAddress, provider);
-    }
-  } catch (e) {
-    // ignore
-  }
-
-  // EIP-1967 proxy storage slots - https://eips.ethereum.org/EIPS/eip-1967
+async function getImplementationFromStorageSlot(
+  address: string,
+  provider: providers.Provider,
+): Promise<string | undefined> {
   try {
     const proxyStorage = await provider.getStorageAt(
       address,
@@ -66,18 +99,36 @@ export async function resolveImplementation(
         "0x360894a13ba1a3210667c828492db98dca3e2076cc3735a920a3ca505d382bbc",
       ),
     );
-    const implementationAddress = `0x${proxyStorage.slice(-40)}`;
-    if (
-      utils.isAddress(implementationAddress) &&
-      implementationAddress !== constants.AddressZero
-    ) {
-      return await resolveImplementation(implementationAddress, provider);
-    }
+    return `0x${proxyStorage.slice(-40)}`;
   } catch (e) {
-    // ignore
+    return undefined;
   }
-  if (!bytecode) {
-    throw new Error(`Error fetching bytecode for ${address}`);
-  }
-  return { address, bytecode };
 }
+
+async function getImplementationFromContractCall(
+  address: string,
+  provider: providers.Provider,
+): Promise<string | undefined> {
+  try {
+    const proxy = new Contract(address, UPGRADEABLE_PROXY_ABI, provider);
+    return await proxy.implementation();
+  } catch (e) {
+    return undefined;
+  }
+}
+
+const UPGRADEABLE_PROXY_ABI = [
+  {
+    type: "function",
+    name: "implementation",
+    inputs: [],
+    outputs: [
+      {
+        type: "address",
+        name: "",
+        internalType: "address",
+      },
+    ],
+    stateMutability: "view",
+  },
+];

packages/sdk/src/evm/common/gas-price.ts

@@ -111,9 +111,11 @@ function getGasStationUrl(chainId: ChainId.Polygon | ChainId.Mumbai): string {
   }
 }
 
-const MIN_POLYGON_GAS_PRICE = /* @__PURE__ */ utils.parseUnits("31", "gwei");
+const MIN_POLYGON_GAS_PRICE = /* @__PURE__ */ (() =>
+  utils.parseUnits("31", "gwei"))();
 
-const MIN_MUMBAI_GAS_PRICE = /* @__PURE__ */ utils.parseUnits("1", "gwei");
+const MIN_MUMBAI_GAS_PRICE = /* @__PURE__ */ (() =>
+  utils.parseUnits("1", "gwei"))();
 
 /**
  * @internal

packages/sdk/src/evm/common/role.ts

@@ -24,7 +24,8 @@ export type Role = keyof typeof roleMap;
 /**
  * @public
  */
-export const ALL_ROLES = /* @__PURE__ */ Object.keys(roleMap) as Role[];
+export const ALL_ROLES = /* @__PURE__ */ (() =>
+  Object.keys(roleMap))() as Role[];
 
 /**
  * @internal

packages/sdk/src/evm/constants/contract.ts

@@ -6,10 +6,11 @@ import { utils } from "ethers";
 /**
  * @internal
  */
-export const InterfaceId_IERC721 = /* @__PURE__ */ utils.arrayify("0x80ac58cd");
+export const InterfaceId_IERC721 = /* @__PURE__ */ (() =>
+  utils.arrayify("0x80ac58cd"))();
 
 /**
  * @internal
  */
-export const InterfaceId_IERC1155 =
-  /* @__PURE__ */ utils.arrayify("0xd9b67a26");
+export const InterfaceId_IERC1155 = /* @__PURE__ */ (() =>
+  utils.arrayify("0xd9b67a26"))();

packages/sdk/src/evm/constants/erc721-features.ts

@@ -14,7 +14,7 @@ import IMintableERC721Abi from "@thirdweb-dev/contracts-js/dist/abis/IMintableER
 import MulticallAbi from "@thirdweb-dev/contracts-js/dist/abis/IMulticall.json";
 import SignatureMintERC721Abi from "@thirdweb-dev/contracts-js/dist/abis/ISignatureMintERC721.json";
 import SignatureMintERC721_V1Abi from "@thirdweb-dev/contracts-js/dist/abis/ISignatureMintERC721_V1.json";
-import TieredDropAbi from "@thirdweb-dev/contracts-js/dist/abis/LazyMintWithTier.json";
+import TieredDropAbi from "@thirdweb-dev/contracts-js/dist/abis/LazyMintWithTier_V1.json";
 import SharedMetadataAbi from "@thirdweb-dev/contracts-js/dist/abis/SharedMetadata.json";
 import zora_IDropERC721 from "@thirdweb-dev/contracts-js/dist/abis/zora_IERC721Drop.json";
 import ILoyaltyCardAbi from "@thirdweb-dev/contracts-js/dist/abis/ILoyaltyCard.json";

packages/sdk/src/evm/constants/urls.ts

@@ -44,7 +44,7 @@ export function getChainProvider(
     options.supportedChains = [
       // @ts-expect-error - we know this is a chain and it will work to build the map
       network,
-      ...options.supportedChains.filter((c) => c.chainId !== network.chainId),
+      ...options.supportedChains.filter((c) => c.chainId === network.chainId),
     ];
   }
 

packages/sdk/src/evm/contracts/prebuilt-implementations/edition-drop.ts

@@ -216,8 +216,11 @@ export class EditionDrop extends StandardErc1155<PrebuiltEditionDrop> {
    *
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async getOwned(walletAddress?: AddressOrEns): Promise<NFT[]> {
-    return this.erc1155.getOwned(walletAddress);
+  public async getOwned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
+    return this.erc1155.getOwned(walletAddress, queryParams);
   }
 
   /**

packages/sdk/src/evm/contracts/prebuilt-implementations/edition.ts

@@ -190,8 +190,11 @@ export class Edition extends StandardErc1155<TokenERC1155> {
    *
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async getOwned(walletAddress?: AddressOrEns): Promise<NFT[]> {
-    return this.erc1155.getOwned(walletAddress);
+  public async getOwned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
+    return this.erc1155.getOwned(walletAddress, queryParams);
   }
 
   /**

packages/sdk/src/evm/core/classes/erc-1155-enumerable.ts

@@ -102,7 +102,10 @@ export class Erc1155Enumerable implements DetectableFeature {
    *
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async owned(walletAddress?: AddressOrEns): Promise<NFT[]> {
+  public async owned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
     const [address, maxId] = await Promise.all([
       resolveAddress(
         walletAddress || (await this.contractWrapper.getSignerAddress()),
@@ -114,7 +117,7 @@ export class Erc1155Enumerable implements DetectableFeature {
       Array.from(Array(maxId.toNumber()).keys()),
     ]);
 
-    const ownedBalances = balances
+    let ownedBalances = balances
       .map((b, i) => {
         return {
           tokenId: i,
@@ -122,6 +125,11 @@ export class Erc1155Enumerable implements DetectableFeature {
         };
       })
       .filter((b) => b.balance.gt(0));
+    if (queryParams) {
+      const start = queryParams?.start || 0;
+      const count = queryParams?.count || DEFAULT_QUERY_ALL_COUNT;
+      ownedBalances = ownedBalances.slice(start, start + count);
+    }
     const nfts = (
       await Promise.all(
         ownedBalances.map((item) => this.erc1155.get(item.tokenId.toString())),

packages/sdk/src/evm/core/classes/erc-1155.ts

@@ -494,12 +494,16 @@ export class Erc1155<
    * @returns The NFT metadata for all NFTs in the contract.
    * @twfeature ERC1155Enumerable
    */
-  public async getOwned(walletAddress?: AddressOrEns): Promise<NFT[]> {
+  public async getOwned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
     if (walletAddress) {
       walletAddress = await resolveAddress(walletAddress);
     }
     return assertEnabled(this.query, FEATURE_EDITION_ENUMERABLE).owned(
       walletAddress,
+      queryParams,
     );
   }
 

packages/sdk/src/evm/core/classes/erc-721-enumerable.ts

@@ -8,6 +8,10 @@ import type { BaseERC721 } from "../../types/eips";
 import { DetectableFeature } from "../interfaces/DetectableFeature";
 import type { ContractWrapper } from "./contract-wrapper";
 import type { Erc721 } from "./erc-721";
+import {
+  DEFAULT_QUERY_ALL_COUNT,
+  QueryAllParams,
+} from "../../../core/schema/QueryParams";
 
 /**
  * List owned ERC721 NFTs
@@ -46,10 +50,19 @@ export class Erc721Enumerable implements DetectableFeature {
    * const nfts = await contract.nft.query.owned.all(address);
    * ```
    * @param walletAddress - the wallet address to query, defaults to the connected wallet
+   * @param queryParams - optional filtering to only fetch a subset of results.
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async all(walletAddress?: AddressOrEns): Promise<NFT[]> {
-    const tokenIds = await this.tokenIds(walletAddress);
+  public async all(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
+    let tokenIds = await this.tokenIds(walletAddress);
+    if (queryParams) {
+      const start = queryParams?.start || 0;
+      const count = queryParams?.count || DEFAULT_QUERY_ALL_COUNT;
+      tokenIds = tokenIds.slice(start, start + count);
+    }
     return await Promise.all(
       tokenIds.map((tokenId) => this.erc721.get(tokenId.toString())),
     );

packages/sdk/src/evm/core/classes/erc-721-standard.ts

@@ -95,13 +95,17 @@ export class StandardErc721<
    * console.log(nfts);
    * ```
    * @param walletAddress - the wallet address to query, defaults to the connected wallet
+   * @param queryParams - optional filtering to only fetch a subset of results.
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async getOwned(walletAddress?: AddressOrEns): Promise<NFT[]> {
+  public async getOwned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
     if (walletAddress) {
       walletAddress = await resolveAddress(walletAddress);
     }
-    return this.erc721.getOwned(walletAddress);
+    return this.erc721.getOwned(walletAddress, queryParams);
   }
 
   /**

packages/sdk/src/evm/core/classes/erc-721.ts

@@ -17,7 +17,10 @@ import type {
 } from "@thirdweb-dev/contracts-js";
 import type { ThirdwebStorage } from "@thirdweb-dev/storage";
 import { BigNumber, BigNumberish, constants } from "ethers";
-import type { QueryAllParams } from "../../../core/schema/QueryParams";
+import {
+  DEFAULT_QUERY_ALL_COUNT,
+  type QueryAllParams,
+} from "../../../core/schema/QueryParams";
 import type {
   NFT,
   NFTMetadata,
@@ -415,25 +418,35 @@ export class Erc721<
    * console.log(nfts);
    * ```
    * @param walletAddress - the wallet address to query, defaults to the connected wallet
+   * @param queryParams - optional filtering to only fetch a subset of results.
    * @returns The NFT metadata for all NFTs in the contract.
    * @twfeature ERC721Supply | ERC721Enumerable
    */
-  public async getOwned(walletAddress?: AddressOrEns) {
+  public async getOwned(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ) {
     if (walletAddress) {
       walletAddress = await resolveAddress(walletAddress);
     }
 
     if (this.query?.owned) {
-      return this.query.owned.all(walletAddress);
+      return this.query.owned.all(walletAddress, queryParams);
     } else {
       const [address, allOwners] = await Promise.all([
         walletAddress || this.contractWrapper.getSignerAddress(),
         this.getAllOwners(),
       ]);
+      let ownedTokens = (allOwners || []).filter(
+        (i) => address?.toLowerCase() === i.owner?.toLowerCase(),
+      );
+      if (queryParams) {
+        const start = queryParams?.start || 0;
+        const count = queryParams?.count || DEFAULT_QUERY_ALL_COUNT;
+        ownedTokens = ownedTokens.slice(start, start + count);
+      }
       return await Promise.all(
-        (allOwners || [])
-          .filter((i) => address?.toLowerCase() === i.owner?.toLowerCase())
-          .map((i) => this.get(i.tokenId)),
+        ownedTokens.map(async (i) => this.get(i.tokenId)),
       );
     }
   }

packages/sdk/src/evm/core/classes/erc-721a-queryable.ts

@@ -8,6 +8,10 @@ import type { BaseERC721 } from "../../types/eips";
 import { DetectableFeature } from "../interfaces/DetectableFeature";
 import type { ContractWrapper } from "./contract-wrapper";
 import type { Erc721 } from "./erc-721";
+import {
+  DEFAULT_QUERY_ALL_COUNT,
+  QueryAllParams,
+} from "../../../core/schema/QueryParams";
 
 /**
  * List owned ERC721 NFTs
@@ -50,8 +54,16 @@ export class Erc721AQueryable implements DetectableFeature {
    * @param walletAddress - the wallet address to query, defaults to the connected wallet
    * @returns The NFT metadata for all NFTs in the contract.
    */
-  public async all(walletAddress?: AddressOrEns): Promise<NFT[]> {
-    const tokenIds = await this.tokenIds(walletAddress);
+  public async all(
+    walletAddress?: AddressOrEns,
+    queryParams?: QueryAllParams,
+  ): Promise<NFT[]> {
+    let tokenIds = await this.tokenIds(walletAddress);
+    if (queryParams) {
+      const start = queryParams?.start || 0;
+      const count = queryParams?.count || DEFAULT_QUERY_ALL_COUNT;
+      tokenIds = tokenIds.slice(start, start + count);
+    }
     return await Promise.all(
       tokenIds.map((tokenId) => this.erc721.get(tokenId.toString())),
     );

packages/sdk/src/evm/core/classes/factory.ts

@@ -61,7 +61,7 @@ export class ContractFactory extends ContractWrapper<TWFactory> {
     [VoteInitializer.contractType]: 1,
     [SplitInitializer.contractType]: 1,
     [MarketplaceInitializer.contractType]: 2,
-    [MarketplaceV3Initializer.contractType]: 1,
+    [MarketplaceV3Initializer.contractType]: 3,
     [PackInitializer.contractType]: 2,
   };
 

packages/sdk/src/evm/core/sdk.ts

@@ -890,7 +890,7 @@ function addChainToSupportedChains(
     options = {
       ...options,
       // @ts-expect-error - we know that the network is assignable despite the readonly mismatch
-      supportedChains: [...(options?.supportedChains || []), network],
+      supportedChains: [network, ...(options?.supportedChains || [])],
     };
   }
   return options;

packages/sdk/src/evm/schema/contracts/airdrop.ts

@@ -5,12 +5,11 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const AirdropContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonSymbolSchema);
+export const AirdropContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonSymbolSchema))();
 
-export const AirdropContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonSymbolSchema);
+export const AirdropContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonSymbolSchema))();
 
-export const AirdropContractDeploy = /* @__PURE__ */ AirdropContractInput.merge(
-  CommonTrustedForwarderSchema,
-);
+export const AirdropContractDeploy = /* @__PURE__ */ (() =>
+  AirdropContractInput.merge(CommonTrustedForwarderSchema))();

packages/sdk/src/evm/schema/contracts/common/claim-conditions.ts

@@ -43,15 +43,14 @@ export const ClaimConditionInputSchema = /* @__PURE__ */ (() =>
 /**
  * @internal
  */
-export const ClaimConditionInputArray = /* @__PURE__ */ z.array(
-  ClaimConditionInputSchema,
-);
+export const ClaimConditionInputArray = /* @__PURE__ */ (() =>
+  z.array(ClaimConditionInputSchema))();
 
 /**
  * @internal
  */
-export const PartialClaimConditionInputSchema =
-  /* @__PURE__ */ ClaimConditionInputSchema.partial();
+export const PartialClaimConditionInputSchema = /* @__PURE__ */ (() =>
+  ClaimConditionInputSchema.partial())();
 
 /**
  * @internal

packages/sdk/src/evm/schema/contracts/common/index.ts

@@ -59,12 +59,13 @@ export const CommonRoyaltySchema = /* @__PURE__ */ (() =>
 /**
  * @internal
  */
-export const CommonPrimarySaleSchema = /* @__PURE__ */ z.object({
-  /**
-   * primary sale recipient address
-   */
-  primary_sale_recipient: AddressOrEnsSchema,
-});
+export const CommonPrimarySaleSchema = /* @__PURE__ */ (() =>
+  z.object({
+    /**
+     * primary sale recipient address
+     */
+    primary_sale_recipient: AddressOrEnsSchema,
+  }))();
 
 /**
  * @internal

packages/sdk/src/evm/schema/contracts/common/signature.ts

@@ -40,19 +40,19 @@ export const BaseSignaturePayloadInput = /* @__PURE__ */ (() =>
 /**
  * @internal
  */
-export const Signature20PayloadInput =
-  /* @__PURE__ */ BaseSignaturePayloadInput.extend({
+export const Signature20PayloadInput = /* @__PURE__ */ (() =>
+  BaseSignaturePayloadInput.extend({
     quantity: AmountSchema,
-  });
+  }))();
 
 /**
  * @internal
  */
-export const Signature20PayloadOutput =
-  /* @__PURE__ */ Signature20PayloadInput.extend({
+export const Signature20PayloadOutput = /* @__PURE__ */ (() =>
+  Signature20PayloadInput.extend({
     mintStartTime: BigNumberSchema,
     mintEndTime: BigNumberSchema,
-  });
+  }))();
 
 /**
  * @internal
@@ -88,19 +88,19 @@ export const Signature1155PayloadInput = /* @__PURE__ */ (() =>
 /**
  * @internal
  */
-export const Signature1155PayloadInputWithTokenId =
-  /* @__PURE__ */ Signature1155PayloadInput.extend({
+export const Signature1155PayloadInputWithTokenId = /* @__PURE__ */ (() =>
+  Signature1155PayloadInput.extend({
     tokenId: BigNumberishSchema,
-  });
+  }))();
 
 /**
  * @internal
  */
-export const Signature1155PayloadOutput =
-  /* @__PURE__ */ Signature721PayloadOutput.extend({
+export const Signature1155PayloadOutput = /* @__PURE__ */ (() =>
+  Signature721PayloadOutput.extend({
     tokenId: BigNumberSchema,
     quantity: BigNumberSchema,
-  });
+  }))();
 
 /**
  * @internal

packages/sdk/src/evm/schema/contracts/custom.ts

@@ -102,7 +102,7 @@ export const AbiObjectSchema = /* @__PURE__ */ (() =>
 /**
  * @internal
  */
-export const AbiSchema = /* @__PURE__ */ z.array(AbiObjectSchema);
+export const AbiSchema = /* @__PURE__ */ (() => z.array(AbiObjectSchema))();
 // if we want to statically type this for external usage it has to *awlways* be the output type
 export type Abi = z.output<typeof AbiSchema>;
 

packages/sdk/src/evm/schema/contracts/drop-erc1155.ts

@@ -9,20 +9,20 @@ import {
 } from "./common";
 import { MerkleSchema } from "./common/snapshots";
 
-export const DropErc1155ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema)
+export const DropErc1155ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema)
     .merge(MerkleSchema)
-    .merge(CommonSymbolSchema);
+    .merge(CommonSymbolSchema))();
 
-export const DropErc1155ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema)
+export const DropErc1155ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema)
     .merge(MerkleSchema)
-    .merge(CommonSymbolSchema);
+    .merge(CommonSymbolSchema))();
 
-export const DropErc1155ContractDeploy =
-  /* @__PURE__ */ DropErc1155ContractInput.merge(CommonPlatformFeeSchema)
+export const DropErc1155ContractDeploy = /* @__PURE__ */ (() =>
+  DropErc1155ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const DropErc1155ContractSchema = {
   deploy: DropErc1155ContractDeploy,

packages/sdk/src/evm/schema/contracts/drop-erc20.ts

@@ -8,20 +8,16 @@ import {
 } from "./common";
 import { MerkleSchema } from "./common/snapshots";
 
-export const DropErc20ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(MerkleSchema).merge(
-    CommonSymbolSchema,
-  );
+export const DropErc20ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(MerkleSchema).merge(CommonSymbolSchema))();
 
-export const DropErc20ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(MerkleSchema).merge(
-    CommonSymbolSchema,
-  );
+export const DropErc20ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(MerkleSchema).merge(CommonSymbolSchema))();
 
-export const DropErc20ContractDeploy =
-  /* @__PURE__ */ DropErc20ContractInput.merge(CommonPlatformFeeSchema)
+export const DropErc20ContractDeploy = /* @__PURE__ */ (() =>
+  DropErc20ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const DropErc20ContractSchema = {
   deploy: DropErc20ContractDeploy,

packages/sdk/src/evm/schema/contracts/drop-erc721.ts

@@ -9,20 +9,20 @@ import {
 } from "./common";
 import { MerkleSchema } from "./common/snapshots";
 
-export const DropErc721ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema)
+export const DropErc721ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema)
     .merge(MerkleSchema)
-    .merge(CommonSymbolSchema);
+    .merge(CommonSymbolSchema))();
 
-export const DropErc721ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema)
+export const DropErc721ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema)
     .merge(MerkleSchema)
-    .merge(CommonSymbolSchema);
+    .merge(CommonSymbolSchema))();
 
-export const DropErc721ContractDeploy =
-  /* @__PURE__ */ DropErc721ContractInput.merge(CommonPlatformFeeSchema)
+export const DropErc721ContractDeploy = /* @__PURE__ */ (() =>
+  DropErc721ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const DropErc721ContractSchema = {
   deploy: DropErc721ContractDeploy,

packages/sdk/src/evm/schema/contracts/loyalty-card.ts

@@ -8,17 +8,15 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const LoyaltyCardContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema).merge(
-    CommonSymbolSchema,
-  );
+export const LoyaltyCardContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema).merge(CommonSymbolSchema))();
 
-export const LoyaltyCardContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
+export const LoyaltyCardContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
     CommonSymbolSchema,
-  );
+  ))();
 
-export const LoyaltyCardContractDeploy =
-  /* @__PURE__ */ LoyaltyCardContractInput.merge(CommonPlatformFeeSchema)
+export const LoyaltyCardContractDeploy = /* @__PURE__ */ (() =>
+  LoyaltyCardContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();

packages/sdk/src/evm/schema/contracts/marketplace.ts

@@ -9,10 +9,10 @@ export const MarketplaceContractInput = CommonContractSchema;
 
 export const MarketplaceContractOutput = CommonContractOutputSchema;
 
-export const MarketplaceContractDeploy =
-  /* @__PURE__ */ MarketplaceContractInput.merge(CommonPlatformFeeSchema).merge(
+export const MarketplaceContractDeploy = /* @__PURE__ */ (() =>
+  MarketplaceContractInput.merge(CommonPlatformFeeSchema).merge(
     CommonTrustedForwarderSchema,
-  );
+  ))();
 
 export const MarketplaceContractSchema = {
   deploy: MarketplaceContractDeploy,

packages/sdk/src/evm/schema/contracts/multiwrap.ts

@@ -6,18 +6,16 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const MultiwrapContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema).merge(
-    CommonSymbolSchema,
-  );
+export const MultiwrapContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema).merge(CommonSymbolSchema))();
 
-export const MultiwrapContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
+export const MultiwrapContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
     CommonSymbolSchema,
-  );
+  ))();
 
-export const MultiwrapContractDeploy =
-  /* @__PURE__ */ MultiwrapContractInput.merge(CommonTrustedForwarderSchema);
+export const MultiwrapContractDeploy = /* @__PURE__ */ (() =>
+  MultiwrapContractInput.merge(CommonTrustedForwarderSchema))();
 
 export const MultiwrapContractSchema = {
   deploy: MultiwrapContractDeploy,

packages/sdk/src/evm/schema/contracts/packs.ts

@@ -7,19 +7,18 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const PackContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema).merge(
-    CommonSymbolSchema,
-  );
+export const PackContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema).merge(CommonSymbolSchema))();
 
-export const PackContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
+export const PackContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
     CommonSymbolSchema,
-  );
+  ))();
 
-export const PackContractDeploy = /* @__PURE__ */ PackContractInput.merge(
-  CommonPlatformFeeSchema,
-).merge(CommonTrustedForwarderSchema);
+export const PackContractDeploy = /* @__PURE__ */ (() =>
+  PackContractInput.merge(CommonPlatformFeeSchema).merge(
+    CommonTrustedForwarderSchema,
+  ))();
 
 export const PackContractSchema = {
   deploy: PackContractDeploy,

packages/sdk/src/evm/schema/contracts/splits.ts

@@ -13,11 +13,11 @@ const SplitRecipientInputSchema = /* @__PURE__ */ (() =>
     sharesBps: BasisPointsSchema.gt(0, "Shares must be greater than 0"),
   }))();
 
-const SplitRecipientOuputSchema =
-  /* @__PURE__ */ SplitRecipientInputSchema.extend({
+const SplitRecipientOuputSchema = /* @__PURE__ */ (() =>
+  SplitRecipientInputSchema.extend({
     address: AddressOrEnsSchema,
     sharesBps: BasisPointsSchema,
-  });
+  }))();
 
 export const SplitsContractInput = /* @__PURE__ */ (() =>
   CommonContractSchema.extend({
@@ -63,9 +63,10 @@ export const SplitsContractOutput = /* @__PURE__ */ (() =>
     recipients: z.array(SplitRecipientOuputSchema),
   }))();
 
-export const SplitsContractDeploy = /* @__PURE__ */ SplitsContractInput.merge(
-  SplitsContractInput,
-).merge(CommonTrustedForwarderSchema);
+export const SplitsContractDeploy = /* @__PURE__ */ (() =>
+  SplitsContractInput.merge(SplitsContractInput).merge(
+    CommonTrustedForwarderSchema,
+  ))();
 
 export const SplitsContractSchema = {
   deploy: SplitsContractDeploy,

packages/sdk/src/evm/schema/contracts/token-erc1155.ts

@@ -8,20 +8,18 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const TokenErc1155ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema).merge(
-    CommonSymbolSchema,
-  );
+export const TokenErc1155ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema).merge(CommonSymbolSchema))();
 
-export const TokenErc1155ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
+export const TokenErc1155ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
     CommonSymbolSchema,
-  );
+  ))();
 
-export const TokenErc1155ContractDeploy =
-  /* @__PURE__ */ TokenErc1155ContractInput.merge(CommonPlatformFeeSchema)
+export const TokenErc1155ContractDeploy = /* @__PURE__ */ (() =>
+  TokenErc1155ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const TokenErc1155ContractSchema = {
   deploy: TokenErc1155ContractDeploy,

packages/sdk/src/evm/schema/contracts/token-erc20.ts

@@ -7,16 +7,16 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const TokenErc20ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonSymbolSchema);
+export const TokenErc20ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonSymbolSchema))();
 
-export const TokenErc20ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonSymbolSchema);
+export const TokenErc20ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonSymbolSchema))();
 
-export const TokenErc20ContractDeploy =
-  /* @__PURE__ */ TokenErc20ContractInput.merge(CommonPlatformFeeSchema)
+export const TokenErc20ContractDeploy = /* @__PURE__ */ (() =>
+  TokenErc20ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const TokenErc20ContractSchema = {
   deploy: TokenErc20ContractDeploy,

packages/sdk/src/evm/schema/contracts/token-erc721.ts

@@ -8,20 +8,18 @@ import {
   CommonTrustedForwarderSchema,
 } from "./common";
 
-export const TokenErc721ContractInput =
-  /* @__PURE__ */ CommonContractSchema.merge(CommonRoyaltySchema).merge(
-    CommonSymbolSchema,
-  );
+export const TokenErc721ContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(CommonRoyaltySchema).merge(CommonSymbolSchema))();
 
-export const TokenErc721ContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
+export const TokenErc721ContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(CommonRoyaltySchema).merge(
     CommonSymbolSchema,
-  );
+  ))();
 
-export const TokenErc721ContractDeploy =
-  /* @__PURE__ */ TokenErc721ContractInput.merge(CommonPlatformFeeSchema)
+export const TokenErc721ContractDeploy = /* @__PURE__ */ (() =>
+  TokenErc721ContractInput.merge(CommonPlatformFeeSchema)
     .merge(CommonPrimarySaleSchema)
-    .merge(CommonTrustedForwarderSchema);
+    .merge(CommonTrustedForwarderSchema))();
 
 export const TokenErc721ContractSchema = {
   deploy: TokenErc721ContractDeploy,

packages/sdk/src/evm/schema/contracts/vote.ts

@@ -17,21 +17,19 @@ export const VoteSettingsInputSchema = /* @__PURE__ */ (() =>
     proposal_token_threshold: BigNumberishSchema.default(1),
   }))();
 
-export const VoteSettingsOuputSchema =
-  /* @__PURE__ */ VoteSettingsInputSchema.extend({
+export const VoteSettingsOuputSchema = /* @__PURE__ */ (() =>
+  VoteSettingsInputSchema.extend({
     proposal_token_threshold: BigNumberSchema,
-  });
+  }))();
 
-export const VoteContractInput = /* @__PURE__ */ CommonContractSchema.merge(
-  VoteSettingsInputSchema,
-);
+export const VoteContractInput = /* @__PURE__ */ (() =>
+  CommonContractSchema.merge(VoteSettingsInputSchema))();
 
-export const VoteContractOutput =
-  /* @__PURE__ */ CommonContractOutputSchema.merge(VoteSettingsOuputSchema);
+export const VoteContractOutput = /* @__PURE__ */ (() =>
+  CommonContractOutputSchema.merge(VoteSettingsOuputSchema))();
 
-export const VoteContractDeploy = /* @__PURE__ */ VoteContractInput.merge(
-  CommonTrustedForwarderSchema,
-);
+export const VoteContractDeploy = /* @__PURE__ */ (() =>
+  VoteContractInput.merge(CommonTrustedForwarderSchema))();
 
 export const VoteContractSchema = {
   deploy: VoteContractDeploy,

packages/sdk/src/evm/schema/shared/AddressOrEnsSchema.ts

@@ -3,12 +3,10 @@ import { z } from "zod";
 import { AddressSchema } from "./AddressSchema";
 
 // Important for address check to come before ENS so network request is only made when necessary
-export const AddressOrEnsSchema = /* @__PURE__ */ z.union(
-  [AddressSchema, EnsSchema],
-  {
+export const AddressOrEnsSchema = /* @__PURE__ */ (() =>
+  z.union([AddressSchema, EnsSchema], {
     invalid_type_error: "Provided value was not a valid address or ENS name",
-  },
-);
+  }))();
 
 // Use this everywhere even though it's just string so we can optionally switch it out
 // more easily if we want to later

packages/sdk/src/evm/schema/shared/AddressSchema.ts

@@ -2,11 +2,12 @@ import { utils } from "ethers";
 import { z } from "zod";
 import { Address } from "./Address";
 
-export const AddressSchema = /* @__PURE__ */ z.custom<Address>(
-  (address) => typeof address === "string" && utils.isAddress(address),
-  (out) => {
-    return {
-      message: `${out} is not a valid address`,
-    };
-  },
-);
+export const AddressSchema = /* @__PURE__ */ (() =>
+  z.custom<Address>(
+    (address) => typeof address === "string" && utils.isAddress(address),
+    (out) => {
+      return {
+        message: `${out} is not a valid address`,
+      };
+    },
+  ))();