Version Packages (#1761)

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

packages/auth/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/auth
 
+## 4.0.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.0.3
+
 ## 4.0.2
 
 ### Patch Changes

packages/auth/package.json

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

packages/cli/CHANGELOG.md

@@ -1,5 +1,14 @@
 # thirdweb
 
+## 0.13.3
+
+### Patch Changes
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/sdk@4.0.2
+  - @thirdweb-dev/wallets@2.0.3
+  - @thirdweb-dev/auth@4.0.3
+
 ## 0.13.2
 
 ### Patch Changes

packages/cli/package.json

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

packages/react-core/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @thirdweb-dev/react-core
 
+## 4.0.3
+
+### Patch Changes
+
+- [#1758](https://github.com/thirdweb-dev/js/pull/1758) [`08e9cd20`](https://github.com/thirdweb-dev/js/commit/08e9cd206bcc37cf1e84a878dc78bc4f38e5092c) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Add pagination to useOwnedNFTs
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/sdk@4.0.2
+  - @thirdweb-dev/wallets@2.0.3
+  - @thirdweb-dev/auth@4.0.3
+
 ## 4.0.2
 
 ### Patch Changes

packages/react-core/package.json

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

packages/react-core/src/evm/hooks/async/nft.ts

@@ -225,11 +225,12 @@ export function useTotalCirculatingSupply(
  *
  * @example
  * ```javascript
- * const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract, "{{wallet_address}}");
+ * const { data: ownedNFTs, isLoading, error } = useOwnedNFTs(contract, "{{wallet_address}}", { start: 0, count: 100 });
  * ```
  *
  * @param contract - an instance of a {@link NFTContract}
  * @param ownerWalletAddress - the wallet address to get owned tokens for
+ * @param queryParams - query params to pass to the query for pagination
  * @returns a response object that includes the list of owned tokens
  * @beta
  * @twfeature ERC721Enumerable | ERC1155Enumerable | ERC721Supply
@@ -238,6 +239,7 @@ export function useTotalCirculatingSupply(
 export function useOwnedNFTs<TContract extends NFTContract>(
   contract: RequiredParam<TContract>,
   ownerWalletAddress: RequiredParam<WalletAddress>,
+  queryParams?: QueryAllParams,
 ) {
   const contractAddress = contract?.getAddress();
   const { erc721, erc1155 } = getErcs(contract);
@@ -248,10 +250,10 @@ export function useOwnedNFTs<TContract extends NFTContract>(
       requiredParamInvariant(contract, "No Contract instance provided");
       invariant(ownerWalletAddress, "No wallet address provided");
       if (erc721) {
-        return await erc721.getOwned(ownerWalletAddress);
+        return await erc721.getOwned(ownerWalletAddress, queryParams);
       }
       if (erc1155) {
-        return await erc1155.getOwned(ownerWalletAddress);
+        return await erc1155.getOwned(ownerWalletAddress, queryParams);
       }
       invariant(false, "Unknown NFT type");
     },

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.3.8
+
 ## 0.3.7
 
 ## 0.3.6

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.7",
+  "version": "0.3.8",
   "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,38 @@
 # @thirdweb-dev/react-native
 
+## 0.3.8
+
+### Patch Changes
+
+- [#1724](https://github.com/thirdweb-dev/js/pull/1724) [`fc62b91e`](https://github.com/thirdweb-dev/js/commit/fc62b91ee55b0adba01298f33b21352004d1b71d) Thanks [@iketw](https://github.com/iketw)! - Adds Google sign in to embeddedWallet in React Native
+
+  You need to add the `react-native-inappbrowser-reborn` package to your app, then you can do:
+
+  ```javascript
+  <ThirdwebProvider
+    activeChain={activeChain}
+    clientId={"your-client-id"}
+    supportedWallets={[
+      embeddedWallet({
+        // if this is true AND oauthOptions is not set we set it to false internally
+        email: true,
+        // if this is set we enable Sign in with Google
+        oauthOptions: {
+          redirectUrl: "test15app://",
+          providers: ["google"],
+        },
+      }),
+    ]}
+  >
+    <App />
+  </ThirdwebProvider>
+  ```
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`08e9cd20`](https://github.com/thirdweb-dev/js/commit/08e9cd206bcc37cf1e84a878dc78bc4f38e5092c), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+  - @thirdweb-dev/[email protected]
+
 ## 0.3.7
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-native",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -89,7 +89,8 @@
     "amazon-cognito-identity-js": "^6.3.3",
     "react-native-quick-base64": "^2.0.7",
     "react-native-quick-crypto": "^0.6.1",
-    "react-native-aes-gcm-crypto": "^0.2.2"
+    "react-native-aes-gcm-crypto": "^0.2.2",
+    "react-native-inappbrowser-reborn": "^3.7.0"
   },
   "peerDependencies": {
     "ethers": ">=5.5.1 <6",

packages/react-native/src/evm/assets/index.ts

@@ -10,3 +10,4 @@ export * from "./right-arrow";
 export * from "./wallet";
 export * from "./money";
 export * from "./switch";
+export * from "./svgs";

packages/react-native/src/evm/assets/svgs.ts

@@ -1,3 +1,23 @@
+export const GOOGLE_ICON = `<svg height={height} viewBox="0 0 24 24" width={width}>
+<path
+  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+  fill="#4285F4"
+/>
+<path
+  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+  fill="#34A853"
+/>
+<path
+  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+  fill="#FBBC05"
+/>
+<path
+  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+  fill="#EA4335"
+/>
+<path d="M1 1h22v22H1z" fill="none" />
+</svg>`;
+
 export const EMAIL_WALLET_ICON = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
 <g clip-path="url(#clip0_3589_8649)">
 <rect width="48" height="48" rx="8" fill="url(#paint0_linear_3589_8649)"/>

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

@@ -238,7 +238,8 @@ export const ConnectWalletDetailsModal = ({
                 ) : null}
               </BaseButton>
             ) : null}
-            {activeWallet?.walletId === EmbeddedWallet.id ? (
+            {activeWallet?.walletId === EmbeddedWallet.id &&
+            (activeWallet as EmbeddedWallet).getEmail() ? (
               <Box flexDirection="row" alignItems="center" mt="md">
                 <ActiveDot width={10} height={10} />
                 <Text variant="bodySmallSecondary" ml="xxs">
@@ -246,7 +247,11 @@ export const ConnectWalletDetailsModal = ({
                 </Text>
               </Box>
             ) : null}
-            <Box flexDirection="row" justifyContent="space-evenly" mt="md">
+            <Box
+              flexDirection="row"
+              justifyContent="space-evenly"
+              marginVertical="md"
+            >
               <SendButton supportedTokens={supportedTokens} />
               <ReceiveButton />
             </Box>
@@ -330,7 +335,6 @@ const styles = StyleSheet.create({
     alignContent: "flex-start",
     alignItems: "flex-start",
     justifyContent: "flex-start",
-    marginTop: 24,
     marginBottom: 8,
   },
 });

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

@@ -1,7 +1,6 @@
 import { AddressDisplay } from "../base/AddressDisplay";
 import BaseButton from "../base/BaseButton";
 import Text from "../base/Text";
-import { WalletIcon } from "../base/WalletIcon";
 import { useENS, useWallet } from "@thirdweb-dev/react-core";
 import { StyleSheet } from "react-native";
 import { LocalWallet, walletIds } from "@thirdweb-dev/wallets";
@@ -11,6 +10,7 @@ import { useMemo, useState } from "react";
 import { TextBalance } from "../base/TextBalance";
 import { SupportedTokens } from "../SendFunds/defaultTokens";
 import { SMART_WALLET_ICON } from "../../assets/svgs";
+import { ImageSvgUri } from "../base";
 
 export type ConnectWalletDetailsProps = {
   address?: string;
@@ -90,7 +90,13 @@ export const WalletDetailsButton = ({
             alignContent="center"
             justifyContent="flex-start"
           >
-            <WalletIcon size={32} iconUri={avatarUrl || walletIconUrl} />
+            <Box borderRadius="lg" overflow="hidden">
+              <ImageSvgUri
+                width={32}
+                height={32}
+                imageUrl={avatarUrl || walletIconUrl}
+              />
+            </Box>
             <Box ml="md" justifyContent="center" alignItems="flex-start">
               {activeWallet?.walletId === LocalWallet.id ? (
                 <Text variant="bodySmall" color="red">

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

@@ -261,9 +261,7 @@ export function ChooseWallet({
       ) : null}
       {showToSPrivacyPolicy ? (
         <Box
-          mt="md"
-          pt="md"
-          height={50}
+          mt="sm"
           marginHorizontal={!isConnectAWalletEnabled ? "xl" : "none"}
           alignItems="center"
         >

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

@@ -62,8 +62,8 @@ export const ConnectWalletFlow = () => {
 
   const onChooseWallet = useCallback(
     (wallet: WalletConfig, data?: any) => {
-      setActiveWallet(wallet);
       setSelectionData(data);
+      setActiveWallet(wallet);
 
       // If the wallet has no custom connect UI, then connect it
       if (!wallet.connectUI) {

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

@@ -30,7 +30,7 @@ export function ConnectingWallet({
         subHeaderText={subHeaderText}
         onClose={onClose}
       />
-      <WalletLoadingThumbnail imageSize={100}>
+      <WalletLoadingThumbnail imageSize={85}>
         <ImageSvgUri height={80} width={80} imageUrl={wallet.meta.iconURL} />
       </WalletLoadingThumbnail>
       <View style={styles.connectingContainer}>

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

@@ -131,7 +131,7 @@ export const SmartWalletFlow = ({
             onBackPress={onConnectingBackPress}
             onClose={onConnectingClosePress}
           />
-          <WalletLoadingThumbnail imageSize={100}>
+          <WalletLoadingThumbnail imageSize={85}>
             <ImageSvgUri
               height={80}
               width={80}

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

@@ -12,7 +12,7 @@ import { TWModal } from "./base/modal/TWModal";
 import Box from "./base/Box";
 // import { useAppTheme } from "../styles/hooks";
 
-const MODAL_HEIGHT = Dimensions.get("window").height * 0.6;
+const MODAL_HEIGHT = Dimensions.get("window").height * 0.7;
 const DEVICE_WIDTH = Dimensions.get("window").width;
 
 export const MainModal = () => {

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

@@ -144,7 +144,7 @@ const SendFundsForm = ({
   const wallet = useWallet();
   const chainId = useChainId();
   const [receiverAddress, setReceiverAddress] = useState("");
-  const [amount, setAmount] = useState("");
+  const [amount, setAmount] = useState("0");
   const [showIcon, setShowIcon] = useState(false);
   const tokenAddress = token?.address;
 
@@ -313,6 +313,7 @@ const SendFundsForm = ({
           editable={!sendTokenMutation.isLoading}
           returnKeyType={"done"}
           keyboardType="numeric"
+          value={amount}
           clearTextOnFocus={false}
           style={{
             color: theme.colors.textPrimary,
@@ -322,8 +323,6 @@ const SendFundsForm = ({
             paddingHorizontal: 16,
           }}
           onChangeText={setAmount}
-          placeholder="0"
-          placeholderTextColor={theme.colors.textPrimary}
           autoCapitalize="none"
           autoCorrect={false}
         />
@@ -348,9 +347,16 @@ const SendFundsForm = ({
         }}
       >
         {sendTokenMutation.isLoading ? (
-          <ActivityIndicator size="small" color={theme.colors.textPrimary} />
+          <ActivityIndicator
+            size="small"
+            color={theme.colors.accentButtonTextColor}
+          />
         ) : showIcon ? (
-          <CheckIcon width={20} height={13} color={theme.colors.textPrimary} />
+          <CheckIcon
+            width={20}
+            height={13}
+            color={theme.colors.accentButtonTextColor}
+          />
         ) : (
           <Text variant="bodySmall" color="accentButtonTextColor" mr="sm">
             Send

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

@@ -35,7 +35,7 @@ const ImageSvgUri = ({
   }
 
   return (
-    <Box style={{ width: width, height: height }}>
+    <Box width={width} height={height}>
       {error ? (
         <SvgUri width={width} height={height} uri={resolvedImageUrl} />
       ) : (

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

@@ -72,6 +72,7 @@ export const NetworkButton = ({
     <>
       <BaseButton
         p={padding || "sm"}
+        paddingVertical="xs"
         borderRadius="md"
         borderWidth={0.5}
         flexDirection="row"
@@ -82,13 +83,8 @@ export const NetworkButton = ({
         {...props}
       >
         <Box flexDirection="row" alignItems="center">
-          <ChainIcon chainIconUrl={chain?.icon?.url} size={32} />
-          <Box
-            ml="md"
-            alignItems="flex-start"
-            justifyContent="center"
-            height={36}
-          >
+          <ChainIcon chainIconUrl={chain?.icon?.url} size={28} />
+          <Box ml="md" alignItems="flex-start" justifyContent="center">
             <Text variant="bodyLarge">{chain?.name || "Unknown Network"}</Text>
             {isSwitching ? (
               <Box flexDirection="row" alignItems="center">

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

@@ -4,20 +4,27 @@ import ImageSvgUri from "./ImageSvgUri";
 import { Label } from "./Label";
 import Text from "./Text";
 import Box from "./Box";
+import { Palette } from "../../styles/colors";
 
 type WalletButtonProps = {
   onPress?: () => void;
   walletIconUrl: string;
   name: string;
+  nameColor?: keyof Palette;
   labelText?: string;
   recommended?: boolean;
+  iconWidth?: number;
+  iconHeight?: number;
 } & React.ComponentProps<typeof BaseButton>;
 
 export const WalletButton = ({
+  iconWidth = 48,
+  iconHeight = 48,
   mb,
   onPress,
   walletIconUrl,
   name,
+  nameColor = "textPrimary",
   labelText,
   recommended,
   ...props
@@ -36,9 +43,15 @@ export const WalletButton = ({
       {...props}
     >
       <Box flexDirection="row" justifyContent="flex-start" alignItems="center">
-        <ImageSvgUri imageUrl={walletIconUrl} width={48} height={48} />
+        <ImageSvgUri
+          imageUrl={walletIconUrl}
+          width={iconWidth}
+          height={iconHeight}
+        />
         <Box ml="sm" alignItems="flex-start">
-          <Text variant="bodyLarge">{name}</Text>
+          <Text variant="bodyLarge" color={nameColor}>
+            {name}
+          </Text>
           {recommended ? <Text variant="link">Recommended</Text> : null}
         </Box>
       </Box>

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded-connector.ts

@@ -1,12 +1,13 @@
 import {
   EmbeddedWalletConnectionArgs,
   EmbeddedWalletConnectorOptions,
+  OauthOption,
 } from "./types";
 import type { Chain } from "@thirdweb-dev/chains";
 import { Connector, normalizeChainId } from "@thirdweb-dev/wallets";
 import { providers, Signer } from "ethers";
 import { utils } from "ethers";
-import { sendEmailOTP, validateEmailOTP } from "./embedded/auth";
+import { sendEmailOTP, socialLogin, validateEmailOTP } from "./embedded/auth";
 import { getEthersSigner } from "./embedded/signer";
 import { logoutUser } from "./embedded/helpers/auth/logout";
 import {
@@ -83,6 +84,36 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
     return sendEmailOTP(email, this.options.clientId);
   }
 
+  async socialLogin(oauthOption: OauthOption) {
+    try {
+      const { email } = await socialLogin(oauthOption, this.options.clientId);
+      this.email = email;
+      saveConnectedEmail(email);
+    } catch (error) {
+      console.error(
+        `Error while signing in with: ${oauthOption.provider}. ${error}`,
+      );
+      if (error instanceof Error) {
+        return { error: error.message };
+      } else {
+        return { error: "An unknown error occurred" };
+      }
+    }
+
+    try {
+      await this.getSigner();
+      this.emit("connected");
+    } catch (error) {
+      if (error instanceof Error) {
+        return { error: error.message };
+      } else {
+        return { error: "Error getting the signer" };
+      }
+    }
+
+    return { success: true };
+  }
+
   async disconnect(): Promise<void> {
     clearConnectedEmail();
     await logoutUser(this.options.clientId);

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded/auth.ts

@@ -19,6 +19,9 @@ import { postPaperAuth, prePaperAuth } from "./helpers/auth/middleware";
 import { isDeviceSharePresentForUser } from "./helpers/storage/local";
 import { getCognitoUser, setCognitoUser } from "./helpers/storage/state";
 import { SendEmailOtpReturnType } from "@thirdweb-dev/wallets";
+import { InAppBrowser } from "react-native-inappbrowser-reborn";
+import { OauthOption } from "../types";
+import { ROUTE_HEADLESS_GOOGLE_LOGIN } from "./helpers/constants";
 
 export async function sendEmailOTP(
   email: string,
@@ -122,3 +125,74 @@ export async function validateEmailOTP({
     );
   }
 }
+
+export async function socialLogin(oauthOptions: OauthOption, clientId: string) {
+  const headlessLoginLinkWithParams = `${ROUTE_HEADLESS_GOOGLE_LOGIN}?authProvider=${encodeURIComponent(
+    "google",
+  )}&baseUrl=${encodeURIComponent(
+    "https://ews.thirdweb.com",
+  )}&platform=${encodeURIComponent("mobile")}`;
+
+  const resp = await fetch(headlessLoginLinkWithParams);
+
+  if (!resp.ok) {
+    throw new Error("Error getting headless login link");
+  }
+
+  const json = await resp.json();
+
+  const { platformLoginLink } = json;
+
+  const completeLoginUrl = `${platformLoginLink}?developerClientId=${encodeURIComponent(
+    clientId || "",
+  )}&platform=${encodeURIComponent("mobile")}&redirectUrl=${encodeURIComponent(
+    oauthOptions.redirectUrl,
+  )}`;
+
+  const result = await InAppBrowser.openAuth(
+    completeLoginUrl,
+    oauthOptions.redirectUrl,
+    {
+      // iOS Properties
+      ephemeralWebSession: false,
+      // Android Properties
+      showTitle: false,
+      enableUrlBarHiding: false,
+      enableDefaultShare: false,
+    },
+  );
+
+  if (result.type !== "success") {
+    throw new Error("Error signing in. Please try again later.");
+  }
+
+  const decodedUrl = decodeURIComponent(result.url);
+
+  const parts = decodedUrl.split("?authResult=");
+  if (parts.length < 2) {
+    throw new Error("Malformed response from the login redirect");
+  }
+  const authResult = parts[1];
+  const { storedToken } = JSON.parse(authResult);
+
+  try {
+    const toStoreToken: AuthStoredTokenWithCookieReturnType["storedToken"] = {
+      jwtToken: storedToken.jwtToken,
+      authDetails: storedToken.authDetails,
+      authProvider: storedToken.authProvider,
+      developerClientId: storedToken.developerClientId,
+      cookieString: storedToken.cookieString,
+      // we should always store the jwt cookie since there's no concept of cookie in react native
+      shouldStoreCookieString: true,
+      isNewUser: storedToken.isNewUser,
+    };
+
+    await postPaperAuth(toStoreToken, clientId);
+
+    return { storedToken, email: storedToken.authDetails.email };
+  } catch (e) {
+    throw new Error(
+      `Malformed response from post authentication: ${JSON.stringify(e)}`,
+    );
+  }
+}

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded/helpers/constants.ts

@@ -30,4 +30,6 @@ export const ROUTE_STORE_USER_SHARES = `${ROUTE_2022_08_12_API_BASE_PATH}/embedd
 export const ROUTE_GET_USER_SHARES = `${ROUTE_2022_08_12_API_BASE_PATH}/embedded-wallet/get-shares`;
 export const ROUTE_VERIFY_THIRDWEB_CLIENT_ID = `${ROUTE_2022_08_12_API_BASE_PATH}/embedded-wallet/verify-thirdweb-client-id`;
 
+export const ROUTE_HEADLESS_GOOGLE_LOGIN = `${BASE_URL}/api/2022-08-12/embedded-wallet/headless-login-link`;
+
 export const ROUTE_AUTH_COGNITO_ID_TOKEN = `${ROUTE_2022_08_12_API_BASE_PATH}/embedded-wallet/cognito-id-token`;

packages/react-native/src/evm/wallets/connectors/embedded-wallet/types.ts

@@ -1,11 +1,21 @@
 import { Chain } from "@thirdweb-dev/chains";
 import { WalletOptions } from "@thirdweb-dev/wallets";
-
 import type {
   RecoveryShareManagement,
   PaperConstructorType,
+  AuthProvider,
 } from "@paperxyz/embedded-wallet-service-sdk";
 
+export type OauthOptions = {
+  providers: AuthProvider[];
+  redirectUrl: string;
+};
+
+export type OauthOption = {
+  provider: AuthProvider;
+  redirectUrl: string;
+};
+
 export interface EmbeddedConnectorOptions {
   chains?: Chain[];
   chainId?: number;

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

@@ -17,6 +17,8 @@ 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 { StyleSheet } from "react-native";
+import { EmbeddedSocialConnection } from "./EmbeddedSocialConnection";
 import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 const OTP_LENGTH = 6;
@@ -26,6 +28,7 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
   goBack,
   selectionData,
   onLocallyConnected,
+  ...props
 }) => {
   const theme = useGlobalTheme();
   const inputRefs = useRef<(TextInput | null)[]>([]);
@@ -104,6 +107,7 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
           inputRefs.current[i]?.setNativeProps({ text: newValues[i] });
         }
         setValues(newValues);
+        Clipboard.setStringAsync("");
         return;
       }
     }
@@ -157,6 +161,18 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
       });
   };
 
+  if (selectionData?.oauthOptions) {
+    return (
+      <EmbeddedSocialConnection
+        connected={() => {}}
+        goBack={goBack}
+        onLocallyConnected={onLocallyConnected}
+        selectionData={selectionData}
+        {...props}
+      />
+    );
+  }
+
   return (
     <Box marginHorizontal="xl">
       <ConnectWalletHeader
@@ -198,10 +214,8 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
             <TextInput
               ref={(ref) => (inputRefs.current[index] = ref)}
               style={{
-                fontSize: 20,
+                ...styles.textInput,
                 color: theme.colors.textPrimary,
-                textAlign: "center",
-                height: 50,
               }}
               keyboardType="number-pad"
               editable={!checkingOtp}
@@ -246,3 +260,11 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
     </Box>
   );
 };
+
+const styles = StyleSheet.create({
+  textInput: {
+    fontSize: 20,
+    textAlign: "center",
+    height: 50,
+  },
+});

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

@@ -9,22 +9,30 @@ 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 { GOOGLE_ICON } from "../../../assets/svgs";
+import { WalletButton } from "../../../components/base/WalletButton";
+import { AuthProvider } from "@paperxyz/embedded-wallet-service-sdk";
+import { OauthOptions } from "../../connectors/embedded-wallet/types";
 import { useGlobalTheme } from "../../../providers/ui-context-provider";
 
 /**
  * UI for selecting wallet - this UI is rendered in the wallet selection screen
  */
-export const EmailSelectionUI: React.FC<SelectUIProps<EmbeddedWallet>> = ({
-  onSelect,
-  walletConfig,
-}) => {
+export const EmailSelectionUI: React.FC<
+  SelectUIProps<EmbeddedWallet> & {
+    oauthOptions?: OauthOptions;
+    email?: boolean;
+  }
+> = ({ onSelect, walletConfig, oauthOptions, email }) => {
   const theme = useGlobalTheme();
-  const [email, setEmail] = useState<string>("");
+  const [emailInput, setEmailInput] = useState<string>("");
   const [errorMessage, setErrorMessage] = useState<string>("");
   const [isFetching, setIsFetching] = useState<boolean>(false);
   const createWalletInstance = useCreateWalletInstance();
   const [emailWallet, setEmailWallet] = useState<EmbeddedWallet | null>(null);
 
+  const isEmailEnabled = email === false ? false : true;
+
   useEffect(() => {
     const emailWalletInstance = createWalletInstance(
       walletConfig,
@@ -39,17 +47,18 @@ export const EmailSelectionUI: React.FC<SelectUIProps<EmbeddedWallet>> = ({
   };
 
   const handleNetworkCall = () => {
-    if (validateEmail(email)) {
+    if (validateEmail(emailInput)) {
       setErrorMessage("");
       setIsFetching(true);
 
       emailWallet
-        ?.sendEmailOTP(email)
+        ?.sendEmailOTP(emailInput)
         .then((response) => {
           onSelect({
             ...response,
-            email,
+            email: emailInput,
             emailWallet,
+            oauthOptions: undefined,
           });
         })
         .catch((error) => {
@@ -65,58 +74,109 @@ export const EmailSelectionUI: React.FC<SelectUIProps<EmbeddedWallet>> = ({
     }
   };
 
+  const onGoogleSignInPress = () => {
+    onSelect({
+      email: emailInput,
+      emailWallet,
+      oauthOptions: {
+        provider: oauthOptions?.providers[0],
+        redirectUrl: oauthOptions?.redirectUrl,
+      },
+    });
+  };
+
   return (
     <Box paddingHorizontal="xl" mt="lg">
-      <TextInput
-        textInputProps={{
-          placeholder: "Enter your email address",
-          placeholderTextColor: theme.colors.textSecondary,
-          onChangeText: setEmail,
-          style: {
-            fontSize: 14,
-            color: theme.colors.textPrimary,
-            lineHeight: 16,
-            padding: 0,
-            flex: 1,
-          },
-          value: email,
-          keyboardType: "email-address",
-          returnKeyType: "done",
-          autoCapitalize: "none",
-          autoCorrect: false,
-          autoComplete: "off",
-          clearTextOnFocus: false,
-        }}
-        containerProps={{
-          paddingHorizontal: "sm",
-          paddingVertical: "sm",
-          justifyContent: "flex-start",
-        }}
-      />
-      <BaseButton
-        mt="md"
-        paddingVertical="md"
-        borderRadius="lg"
-        borderWidth={1}
-        borderColor="border"
-        backgroundColor="accentButtonColor"
-        onPress={handleNetworkCall}
-      >
-        {isFetching ? (
-          <ActivityIndicator
-            size={"small"}
-            color={theme.colors.accentButtonTextColor}
+      {oauthOptions?.providers.includes(AuthProvider.GOOGLE) ? (
+        <Box justifyContent="center">
+          <WalletButton
+            iconHeight={28}
+            iconWidth={28}
+            borderRadius="lg"
+            borderWidth={1}
+            borderColor="buttonBackgroundColor"
+            backgroundColor="buttonBackgroundColor"
+            nameColor="buttonTextColor"
+            justifyContent="center"
+            name="Sign in with Google"
+            walletIconUrl={GOOGLE_ICON}
+            onPress={onGoogleSignInPress}
           />
-        ) : (
-          <Text
-            variant="bodySmall"
-            color="accentButtonTextColor"
-            fontWeight="700"
+          {isEmailEnabled ? (
+            <Box
+              mb="md"
+              mt="md"
+              flexDirection="row"
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Box height={1} flex={1} backgroundColor="border" />
+              <Text
+                variant="subHeader"
+                textAlign="center"
+                marginHorizontal="xxs"
+              >
+                OR
+              </Text>
+              <Box height={1} flex={1} backgroundColor="border" />
+            </Box>
+          ) : null}
+        </Box>
+      ) : null}
+      {isEmailEnabled ? (
+        <>
+          <TextInput
+            textInputProps={{
+              placeholder: "Enter your email address",
+              placeholderTextColor: theme.colors.textSecondary,
+              onChangeText: setEmailInput,
+              style: {
+                fontSize: 14,
+                color: theme.colors.textPrimary,
+                lineHeight: 16,
+                padding: 0,
+                flex: 1,
+              },
+              value: emailInput,
+              keyboardType: "email-address",
+              returnKeyType: "done",
+              autoCapitalize: "none",
+              autoCorrect: false,
+              autoComplete: "off",
+              clearTextOnFocus: false,
+            }}
+            containerProps={{
+              paddingHorizontal: "sm",
+              paddingVertical: "sm",
+              justifyContent: "flex-start",
+            }}
+          />
+          <BaseButton
+            mt="md"
+            paddingVertical="md"
+            borderRadius="lg"
+            borderWidth={1}
+            borderColor="border"
+            backgroundColor="accentButtonColor"
+            onPress={handleNetworkCall}
           >
-            Continue
-          </Text>
-        )}
-      </BaseButton>
+            {isFetching ? (
+              <ActivityIndicator
+                size={"small"}
+                color={theme.colors.accentButtonTextColor}
+              />
+            ) : (
+              <Text
+                variant="bodySmall"
+                color="accentButtonTextColor"
+                fontWeight="700"
+              >
+                Continue
+              </Text>
+            )}
+          </BaseButton>
+        </>
+      ) : null}
       {errorMessage ? (
         <Text variant="error" mt="xxs">
           {errorMessage}

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

@@ -0,0 +1,86 @@
+import { useCallback, useEffect, useState } from "react";
+import React from "react";
+import { ActivityIndicator } from "react-native";
+import { EmbeddedWallet } from "./EmbeddedWallet";
+import {
+  ConnectUIProps,
+  useSetConnectedWallet,
+  useSetConnectionStatus,
+} from "@thirdweb-dev/react-core";
+import { GOOGLE_ICON } from "../../../assets";
+import { ConnectWalletHeader } from "../../../components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";
+import { Box, Text, WalletButton } from "../../../components/base";
+
+export const EmbeddedSocialConnection: React.FC<
+  ConnectUIProps<EmbeddedWallet>
+> = ({ goBack, selectionData, onLocallyConnected }) => {
+  const setConnectedWallet = useSetConnectedWallet();
+  const setConnectionStatus = useSetConnectionStatus();
+  const [errorMessage, setErrorMessage] = useState<string>();
+
+  const handleGoogleLogin = useCallback(() => {
+    setErrorMessage("");
+
+    setTimeout(() => {
+      (selectionData.emailWallet as EmbeddedWallet)
+        .socialLogin(selectionData?.oauthOptions)
+        .then(async (response) => {
+          if (response?.success) {
+            if (onLocallyConnected) {
+              onLocallyConnected(selectionData.emailWallet);
+            } else {
+              await setConnectedWallet(selectionData.emailWallet);
+              setConnectionStatus("connected");
+            }
+          } else {
+            setErrorMessage(
+              response?.error || "Error login in. Please try again later.",
+            );
+          }
+        })
+        .catch((error) => {
+          console.error("Error validating otp: ", error);
+          setErrorMessage("Error login in. Please try again later.");
+        });
+    }, 0);
+  }, [
+    onLocallyConnected,
+    selectionData.emailWallet,
+    selectionData.oauthOptions,
+    setConnectedWallet,
+    setConnectionStatus,
+  ]);
+
+  useEffect(() => {
+    handleGoogleLogin();
+  }, [handleGoogleLogin]);
+
+  return (
+    <Box marginHorizontal="xl" height={200}>
+      <ConnectWalletHeader
+        middleContent={
+          <WalletButton
+            iconHeight={28}
+            iconWidth={28}
+            borderRadius="lg"
+            justifyContent="center"
+            name="Sign In"
+            walletIconUrl={GOOGLE_ICON}
+          />
+        }
+        subHeaderText={""}
+        onBackPress={goBack}
+        onClose={goBack}
+      />
+      <Box flex={1} justifyContent="center" alignItems="center">
+        {!errorMessage ? (
+          <ActivityIndicator size="large" />
+        ) : (
+          <Text variant="error" numberOfLines={1}>
+            {errorMessage}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+};

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedWallet.ts

@@ -5,7 +5,10 @@ import {
   walletIds,
 } from "@thirdweb-dev/wallets";
 import type { EmbeddedWalletConnector as EmbeddedConnectorType } from "../../connectors/embedded-wallet/embedded-connector";
-import { EmbeddedWalletConnectionArgs } from "../../connectors/embedded-wallet/types";
+import {
+  EmbeddedWalletConnectionArgs,
+  OauthOption,
+} from "../../connectors/embedded-wallet/types";
 import { EmbeddedWalletConnector } from "../../connectors/embedded-wallet/embedded-connector";
 import { EMAIL_WALLET_ICON } from "../../../assets/svgs";
 
@@ -43,8 +46,6 @@ export class EmbeddedWallet extends AbstractClientWallet<
     return this.connector;
   }
 
-  // my methods
-
   initializeConnector() {
     this.connector = new EmbeddedWalletConnector({
       ...this.options,
@@ -63,6 +64,10 @@ export class EmbeddedWallet extends AbstractClientWallet<
     return this.connector?.sendEmailOtp(email);
   }
 
+  async socialLogin(oauthOption: OauthOption) {
+    return this.connector?.socialLogin(oauthOption);
+  }
+
   onConnected = () => {
     this.emit("message", { type: "connected" });
   };

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

@@ -6,16 +6,40 @@ import {
 } from "@thirdweb-dev/react-core";
 import { EmbeddedConnectionUI } from "./EmbeddedConnectionUI";
 import { EmailSelectionUI } from "./EmbeddedSelectionUI";
+import { AuthProvider } from "@paperxyz/embedded-wallet-service-sdk";
+
+type OAuthProvider = "google"; // currently we only have one
 
 export type EmbeddedWalletConfig = {
-  recommended?: boolean;
+  // @default true - set false to disable
+  email?: boolean;
+
+  // @default { providers: ['google'] } - set false to disable
+  oauthOptions?:
+    | {
+        providers: OAuthProvider[];
+        redirectUrl: string;
+      }
+    | false;
 };
 
 export const embeddedWallet = (
   config?: EmbeddedWalletConfig,
 ): WalletConfig<EmbeddedWallet> => {
   const selectUI = (props: SelectUIProps<EmbeddedWallet>) => (
-    <EmailSelectionUI {...props} />
+    <EmailSelectionUI
+      {...props}
+      oauthOptions={
+        config?.oauthOptions
+          ? {
+              providers: [AuthProvider.GOOGLE],
+              redirectUrl: config.oauthOptions.redirectUrl,
+            }
+          : undefined
+      }
+      // you cannot disable both email and oauth
+      email={!config?.oauthOptions && !config?.email ? true : config?.email}
+    />
   );
 
   return {
@@ -29,6 +53,5 @@ export const embeddedWallet = (
     },
     selectUI: selectUI,
     connectUI: EmbeddedConnectionUI,
-    recommended: config?.recommended,
   };
 };

packages/react/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @thirdweb-dev/react
 
+## 4.0.3
+
+### Patch Changes
+
+- [#1766](https://github.com/thirdweb-dev/js/pull/1766) [`dd7d0fca`](https://github.com/thirdweb-dev/js/commit/dd7d0fca2d14a529343396a31939d49b1a074d3e) Thanks [@MananTank](https://github.com/MananTank)! - Fix Continue as Guest button missing when Social + Guest login is setup in ConnectWallet Modal
+
+- [#1692](https://github.com/thirdweb-dev/js/pull/1692) [`fb0f12ae`](https://github.com/thirdweb-dev/js/commit/fb0f12ae2835f4eba60ba4a74b453151cab0d393) Thanks [@etnlbck](https://github.com/etnlbck)! - Refactored OTPInput component to be simpler to read
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`08e9cd20`](https://github.com/thirdweb-dev/js/commit/08e9cd206bcc37cf1e84a878dc78bc4f38e5092c), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/sdk@4.0.2
+  - @thirdweb-dev/react-core@4.0.3
+  - @thirdweb-dev/wallets@2.0.3
+
 ## 4.0.2
 
 ### Patch Changes

packages/react/package.json

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

packages/react/src/components/OTPInput.tsx

@@ -36,7 +36,7 @@ export function OTPInput(props: {
             data-error={props.isInvalid}
             ref={(e) => (boxEls.current[i] = e)}
             key={i}
-            value={otp[i] === undefined ? "" : otp[i]}
+            value={otp[i] ?? ""}
             type="number"
             variant="outline"
             onPaste={(e) => {
@@ -44,7 +44,7 @@ export function OTPInput(props: {
               const newOTP = pastedData
                 .slice(0, props.digits)
                 .split("")
-                .filter((n) => /[0-9]/.test(n))
+                .filter((n) => /\d/.test(n))
                 .map(Number);
 
               setOTP(newOTP);
@@ -100,7 +100,7 @@ export function OTPInput(props: {
                 }
               }
 
-              if (!/[0-9]/.test(value) && value !== "") {
+              if (!/\d/.test(value) && value !== "") {
                 e.preventDefault();
                 return;
               }

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

@@ -255,18 +255,19 @@ export const WalletSelector: React.FC<{
 
         // 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" />
-          );
+          bottomSection =
+            tos || continueAsGuest ? (
+              <>
+                <Spacer y="md" />
+                <Line />
+                {continueAsGuest && (
+                  <Container p="lg"> {continueAsGuest}</Container>
+                )}
+                {tos && <Container p="md"> {tos} </Container>}
+              </>
+            ) : (
+              <Spacer y="sm" />
+            );
         }
 
         // social login + eoa wallets

packages/sdk/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @thirdweb-dev/sdk
 
+## 4.0.2
+
+### Patch Changes
+
+- [#1764](https://github.com/thirdweb-dev/js/pull/1764) [`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Perf improvement for marketplace methods
+
+- [#1763](https://github.com/thirdweb-dev/js/pull/1763) [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Improve fetchPublishedContractFromPolygon
+
+- [#1765](https://github.com/thirdweb-dev/js/pull/1765) [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Perf improvement for getting deployment info
+
+- [#1762](https://github.com/thirdweb-dev/js/pull/1762) [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Perf improvement for drop-claim-condition
+
 ## 4.0.1
 
 ### Patch Changes

packages/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/sdk",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "The main thirdweb SDK.",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/sdk",
   "license": "Apache-2.0",

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

@@ -50,18 +50,18 @@ export async function fetchPublishedContractFromPolygon(
     });
 
     // get the metadata for each version
-    const versionMetadata = await Promise.all(
-      allVersions.map(async (c) => {
-        return {
-          name: c.id,
-          publishedTimestamp: c.timestamp,
-          publishedMetadata: await fetchAndCacheDeployMetadata(
-            c.metadataUri,
-            storage,
-          ),
-        };
-      }),
-    );
+    const versionMetadata = (
+      await Promise.all(
+        allVersions.map((c) =>
+          fetchAndCacheDeployMetadata(c.metadataUri, storage),
+        ),
+      )
+    ).map((item, index) => ({
+      name: allVersions[index].id,
+      publishedTimestamp: allVersions[index].timestamp,
+      publishedMetadata: item,
+    }));
+
     // find the version that matches the version string
     const versionMatch = versionMetadata.find(
       (metadata) =>

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

@@ -37,15 +37,13 @@ export async function getDeploymentInfo(
   secretKey?: string,
 ): Promise<DeploymentPreset[]> {
   caches.deploymentPresets = {};
-
-  const create2FactoryAddress = create2Factory
-    ? create2Factory
-    : await getCreate2FactoryAddress(provider);
-
+  const [create2FactoryAddress, { compilerMetadata, extendedMetadata }] =
+    await Promise.all([
+      create2Factory ? create2Factory : getCreate2FactoryAddress(provider),
+      fetchAndCacheDeployMetadata(metadataUri, storage),
+    ]);
   const customParams: ConstructorParamMap = {};
   const finalDeploymentInfo: DeploymentPreset[] = [];
-  const { compilerMetadata, extendedMetadata } =
-    await fetchAndCacheDeployMetadata(metadataUri, storage);
   const defaultExtensions = extendedMetadata?.defaultExtensions;
 
   if (extendedMetadata?.routerType === "plugin" && defaultExtensions) {
@@ -65,16 +63,16 @@ export async function getDeploymentInfo(
 
     const pluginMetadata = (
       await Promise.all(
-        publishedExtensions.map(async (c) => {
-          return fetchAndCacheDeployMetadata(c.metadataUri, storage);
-        }),
+        publishedExtensions.map((c) =>
+          fetchAndCacheDeployMetadata(c.metadataUri, storage),
+        ),
       )
     ).map((fetchedMetadata) => fetchedMetadata.compilerMetadata);
 
     // get deployment info for all plugins
     const pluginDeploymentInfo = await Promise.all(
-      pluginMetadata.map(async (metadata) => {
-        const info = await computeDeploymentInfo(
+      pluginMetadata.map((metadata) =>
+        computeDeploymentInfo(
           "plugin",
           provider,
           storage,
@@ -82,9 +80,8 @@ export async function getDeploymentInfo(
           { metadata: metadata },
           clientId,
           secretKey,
-        );
-        return info;
-      }),
+        ),
+      ),
     );
 
     // create constructor param input for PluginMap
@@ -142,8 +139,8 @@ export async function getDeploymentInfo(
 
     // get deployment info for all extensions
     const extensionDeploymentInfo = await Promise.all(
-      extensionMetadata.map(async (metadata) => {
-        const info = await computeDeploymentInfo(
+      extensionMetadata.map((metadata) =>
+        computeDeploymentInfo(
           "extension",
           provider,
           storage,
@@ -151,9 +148,8 @@ export async function getDeploymentInfo(
           { metadata: metadata },
           clientId,
           secretKey,
-        );
-        return info;
-      }),
+        ),
+      ),
     );
 
     // create constructor param input for BaseRouter
@@ -179,29 +175,30 @@ export async function getDeploymentInfo(
     finalDeploymentInfo.push(...extensionDeploymentInfo);
   }
 
-  const implementationDeployInfo = await computeDeploymentInfo(
-    "implementation",
-    provider,
-    storage,
-    create2FactoryAddress,
-    {
-      metadata: compilerMetadata,
-      constructorParams: customParams,
-    },
-    clientId,
-    secretKey,
-  );
-
-  // get clone factory
-  const factoryInfo = await computeDeploymentInfo(
-    "infra",
-    provider,
-    storage,
-    create2FactoryAddress,
-    { contractName: "TWCloneFactory" },
-    clientId,
-    secretKey,
-  );
+  const [implementationDeployInfo, factoryInfo] = await Promise.all([
+    computeDeploymentInfo(
+      "implementation",
+      provider,
+      storage,
+      create2FactoryAddress,
+      {
+        metadata: compilerMetadata,
+        constructorParams: customParams,
+      },
+      clientId,
+      secretKey,
+    ),
+    // get clone factory
+    computeDeploymentInfo(
+      "infra",
+      provider,
+      storage,
+      create2FactoryAddress,
+      { contractName: "TWCloneFactory" },
+      clientId,
+      secretKey,
+    ),
+  ]);
 
   finalDeploymentInfo.push(factoryInfo);
   finalDeploymentInfo.push(...Object.values(caches.deploymentPresets));

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

@@ -46,8 +46,10 @@ export async function isTokenApprovedForTransfer(
 ): Promise<boolean> {
   try {
     const erc165 = new Contract(assetContract, ERC165Abi, provider) as IERC165;
-    const isERC721 = await erc165.supportsInterface(InterfaceId_IERC721);
-    const isERC1155 = await erc165.supportsInterface(InterfaceId_IERC1155);
+    const [isERC721, isERC1155] = await Promise.all([
+      erc165.supportsInterface(InterfaceId_IERC721),
+      erc165.supportsInterface(InterfaceId_IERC1155),
+    ]);
     if (isERC721) {
       const asset = new Contract(assetContract, ERC721Abi, provider) as IERC721;
 
@@ -108,11 +110,9 @@ export async function handleTokenApproval(
     contractWrapper.options,
     contractWrapper.storage,
   );
-  const isERC721 = await erc165.read("supportsInterface", [
-    InterfaceId_IERC721,
-  ]);
-  const isERC1155 = await erc165.read("supportsInterface", [
-    InterfaceId_IERC1155,
+  const [isERC721, isERC1155] = await Promise.all([
+    erc165.read("supportsInterface", [InterfaceId_IERC721]),
+    erc165.read("supportsInterface", [InterfaceId_IERC1155]),
   ]);
   // check for token approval
   if (isERC721) {

packages/sdk/src/evm/core/classes/drop-claim-conditions.ts

@@ -100,11 +100,14 @@ export class DropClaimConditions<
   public async getActive(
     options?: ClaimConditionFetchOptions,
   ): Promise<ClaimCondition> {
-    const cc = await this.get();
-    const metadata = await this.metadata.get();
+    const [cc, metadata, tokenDecimals] = await Promise.all([
+      this.get(),
+      this.metadata.get(),
+      this.getTokenDecimals(),
+    ]);
     return await transformResultToClaimCondition(
       cc,
-      await this.getTokenDecimals(),
+      tokenDecimals,
       this.contractWrapper.getProvider(),
       metadata.merkle || {},
       this.storage,
@@ -236,12 +239,6 @@ export class DropClaimConditions<
     let activeConditionIndex: BigNumber;
     let claimCondition: ClaimCondition;
 
-    const decimals = await this.getTokenDecimals();
-    const quantityWithDecimals = utils.parseUnits(
-      AmountSchema.parse(quantity),
-      decimals,
-    );
-
     if (addressToCheck === undefined) {
       try {
         addressToCheck = await this.contractWrapper.getSignerAddress();
@@ -255,7 +252,15 @@ export class DropClaimConditions<
       return [ClaimEligibility.NoWallet];
     }
 
-    const resolvedAddress = await resolveAddress(addressToCheck);
+    const [resolvedAddress, decimals] = await Promise.all([
+      resolveAddress(addressToCheck),
+      this.getTokenDecimals(),
+    ]);
+
+    const quantityWithDecimals = utils.parseUnits(
+      AmountSchema.parse(quantity),
+      decimals,
+    );
 
     try {
       claimCondition = await this.getActive();
@@ -487,7 +492,7 @@ export class DropClaimConditions<
       }
     }
 
-    // if not within a browser conetext, check for wallet balance.
+    // if not within a browser context, check for wallet balance.
     // In browser context, let the wallet do that job
     if (claimCondition.price.gt(0) && isNode()) {
       const totalPrice = claimCondition.price.mul(BigNumber.from(quantity));
@@ -528,8 +533,10 @@ export class DropClaimConditions<
     const merkleRoot = claimCondition.merkleRoot;
     const merkleRootArray = utils.stripZeros(merkleRoot);
     if (merkleRootArray.length > 0) {
-      const metadata = await this.metadata.get();
-      const resolvedAddress = await resolveAddress(claimerAddress);
+      const [metadata, resolvedAddress] = await Promise.all([
+        this.metadata.get(),
+        resolveAddress(claimerAddress),
+      ]);
       return await fetchSnapshotEntryForAddress(
         resolvedAddress,
         merkleRoot.toString(),
@@ -820,13 +827,14 @@ export class DropClaimConditions<
     decimals = 0,
     address?: string,
   ): Promise<ClaimVerification> {
-    const addressToClaim = address
-      ? address
-      : await this.contractWrapper.getSignerAddress();
+    const [addressToClaim, activeClaimConditions] = await Promise.all([
+      address ? address : this.contractWrapper.getSignerAddress(),
+      this.getActive(),
+    ]);
     return prepareClaim(
       addressToClaim,
       quantity,
-      await this.getActive(),
+      activeClaimConditions,
       async () => (await this.metadata.get()).merkle,
       decimals,
       this.contractWrapper,

packages/sdk/src/evm/core/classes/marketplace-auction.ts

@@ -285,12 +285,11 @@ export class MarketplaceAuction {
     async (
       listings: NewAuctionListing[],
     ): Promise<Transaction<TransactionResultWithId[]>> => {
-      const data = await Promise.all(
-        listings.map(async (listing) => {
-          const tx = await this.createListing.prepare(listing);
-          return tx.encode();
-        }),
-      );
+      const data = (
+        await Promise.all(
+          listings.map((listing) => this.createListing.prepare(listing)),
+        )
+      ).map((tx) => tx.encode());
 
       return Transaction.fromContractWrapper({
         contractWrapper: this.contractWrapper,
@@ -576,7 +575,7 @@ export class MarketplaceAuction {
     const [currentBidBufferBps, winningBid, listing] = await Promise.all([
       this.getBidBufferBps(),
       this.getWinningBid(listingId),
-      await this.validateListing(BigNumber.from(listingId)),
+      this.validateListing(BigNumber.from(listingId)),
     ]);
 
     const currentBidOrReservePrice = winningBid

packages/sdk/src/evm/core/classes/marketplace-direct.ts

@@ -239,12 +239,11 @@ export class MarketplaceDirect {
     async (
       listings: NewDirectListing[],
     ): Promise<Transaction<TransactionResultWithId[]>> => {
-      const data = await Promise.all(
-        listings.map(async (listing) => {
-          const tx = await this.createListing.prepare(listing);
-          return tx.encode();
-        }),
-      );
+      const data = (
+        await Promise.all(
+          listings.map((listing) => this.createListing.prepare(listing)),
+        )
+      ).map((tx) => tx.encode());
 
       return Transaction.fromContractWrapper({
         contractWrapper: this.contractWrapper,

packages/sdk/src/evm/core/classes/marketplacev3-direct-listings.ts

@@ -414,12 +414,11 @@ export class MarketplaceV3DirectListings<TContract extends DirectListingsLogic>
     async (
       listings: DirectListingInputParams[],
     ): Promise<Transaction<TransactionResultWithId[]>> => {
-      const data = await Promise.all(
-        listings.map(async (listing) => {
-          const tx = await this.createListing.prepare(listing);
-          return tx.encode();
-        }),
-      );
+      const data = (
+        await Promise.all(
+          listings.map((listing) => this.createListing.prepare(listing)),
+        )
+      ).map((tx) => tx.encode());
 
       return Transaction.fromContractWrapper({
         contractWrapper: this

packages/sdk/src/evm/core/classes/marketplacev3-english-auction.ts

@@ -404,12 +404,11 @@ export class MarketplaceV3EnglishAuctions<
     async (
       listings: EnglishAuctionInputParams[],
     ): Promise<Transaction<TransactionResultWithId[]>> => {
-      const data = await Promise.all(
-        listings.map(async (listing) => {
-          const tx = await this.createAuction.prepare(listing);
-          return tx.encode();
-        }),
-      );
+      const data = (
+        await Promise.all(
+          listings.map((listing) => this.createAuction.prepare(listing)),
+        )
+      ).map((tx) => tx.encode());
 
       return Transaction.fromContractWrapper({
         contractWrapper: this

packages/unity-js-bridge/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/unity-js-bridge
 
+## 0.2.89
+
+### Patch Changes
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/sdk@4.0.2
+  - @thirdweb-dev/wallets@2.0.3
+  - @thirdweb-dev/auth@4.0.3
+
 ## 0.2.88
 
 ### Patch Changes

packages/unity-js-bridge/package.json

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

packages/wallets/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/wallets
 
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`526176c4`](https://github.com/thirdweb-dev/js/commit/526176c47108c91d83bcfc5f0ca556274e6462d6), [`d1f8e951`](https://github.com/thirdweb-dev/js/commit/d1f8e951623f1691fdfe3d1e8645970d0a52eb06), [`09120c92`](https://github.com/thirdweb-dev/js/commit/09120c923cca804b9d4f5f779e5a53c97ecc8223), [`6573556d`](https://github.com/thirdweb-dev/js/commit/6573556d0e03efa0d6a157fccb0a1c08dd22d7cd)]:
+  - @thirdweb-dev/sdk@4.0.2
+
 ## 2.0.2
 
 ### Patch Changes

packages/wallets/package.json

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

pnpm-lock.yaml

@@ -827,6 +827,9 @@ importers:
       react-native-device-info:
         specifier: 10.6.0
         version: 10.6.0([email protected])
+      react-native-inappbrowser-reborn:
+        specifier: ^3.7.0
+        version: 3.7.0([email protected])
       react-native-quick-base64:
         specifier: ^2.0.7
         version: 2.0.7([email protected])([email protected])
@@ -23999,6 +24002,13 @@ packages:
       is-docker: 2.2.1
       is-wsl: 2.2.0
 
+  /[email protected]:
+    resolution: {integrity: sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==}
+    hasBin: true
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /[email protected]:
     resolution: {integrity: sha512-hgJa2aQKcM2hn3eyVtN12tEA45ECjTJPXCgUh5YzTzy9qwapCvmDTVPWOcWVL0d34zeQoQ/hbG9lJhl3AYxJlQ==}
     dependencies:
@@ -25910,6 +25920,18 @@ packages:
   /[email protected]:
     resolution: {integrity: sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ==}
 
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-Ia53jYNtFcbNaX5W3QfOmN25I7bcvuDiQmSY5zABXjy4+WI20bPc9ua09li55F8yDCjv3C99jX6vKms68mBV7g==}
+    requiresBuild: true
+    peerDependencies:
+      react-native: '>=0.56'
+    dependencies:
+      invariant: 2.2.4
+      opencollective-postinstall: 2.0.3
+      react-native: 0.71.11(@babel/[email protected])(@babel/[email protected])([email protected])
+    dev: false
+    optional: true
+
   /[email protected]([email protected])([email protected]):
     resolution: {integrity: sha512-0hYNOTbsjJ5j5cpX+qjwReGIxuYE9MWRsyPQ72fTOvzmEjYXCF4Wr2VQoqx8R6W1/Uinekvln7dGvJ4RExmHhQ==}
     peerDependencies: