Version Packages (#2166)

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

.github/workflows/release.yml

@@ -62,6 +62,7 @@ jobs:
         if: steps.changesets.outputs.published == 'true'
         run: |
           pnpm typedoc
+          pnpm build
           pnpm generate-docs
           pnpm generate-snippets
           git config --local user.email "[email protected]"

packages/react-core/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-core
 
+## 4.3.1
+
 ## 4.3.0
 
 ### Minor Changes

packages/react-core/package.json

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

packages/react-native-compat/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @thirdweb-dev/react-native-compat
 
+## 0.6.1
+
 ## 0.6.0
 
 ## 0.5.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.6.0",
+  "version": "0.6.1",
   "author": "thirdweb eng <[email protected]>",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native-compat",
   "license": "Apache-2.0",

packages/react-native/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/react-native
 
+## 0.6.1
+
+### Patch Changes
+
+- [#2165](https://github.com/thirdweb-dev/js/pull/2165) [`7a74bd9c`](https://github.com/thirdweb-dev/js/commit/7a74bd9c8a2be42ea2827a3e480f8ac0d60bf1d5) Thanks [@iketw](https://github.com/iketw)! - Upgrade min RN version requirenment to 0.71 and mmkv to 2.11.0
+
+- Updated dependencies []:
+  - @thirdweb-dev/react-core@4.3.1
+
 ## 0.6.0
 
 ### Minor Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/react-native",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "repository": "https://github.com/thirdweb-dev/js/tree/main/packages/react-native",
   "author": "thirdweb eng <[email protected]>",
   "license": "Apache-2.0",
@@ -78,7 +78,6 @@
     "react-native": "^0.71.11",
     "react-native-camera": "^4.2.1",
     "react-native-device-info": "10.6.0",
-    "react-native-mmkv": "2.5.1",
     "react-native-safe-area-context": "4.7.4",
     "react-native-webview": "12.1.0",
     "rimraf": "^3.0.2",
@@ -100,7 +99,8 @@
     "ethers": ">=5.5.1 <6",
     "expo": ">=47 <50",
     "react": ">=18.0.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.71.0",
+    "react-native-mmkv": ">=2.11.0"
   },
   "engines": {
     "node": ">=18"

packages/react/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @thirdweb-dev/react
 
+## 4.3.1
+
+### Patch Changes
+
+- [#2169](https://github.com/thirdweb-dev/js/pull/2169) [`e249a568`](https://github.com/thirdweb-dev/js/commit/e249a56892f04df1313b5cbd40d21a0bd5ac5f4e) Thanks [@MananTank](https://github.com/MananTank)! - Add `onConnect` prop to `ConnectWallet` and `ConnectEmbed` components.
+
+  ```tsx
+  <ConnectWallet
+    onConnect={() => {
+      console.log("connected");
+    }}
+  />
+  ```
+
+  ```tsx
+  <ConnectEmbed
+    onConnect={() => {
+      console.log("connected");
+    }}
+  />
+  ```
+
+- Updated dependencies []:
+  - @thirdweb-dev/[email protected]
+
 ## 4.3.0
 
 ### Minor Changes

packages/react/package.json

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

packages/react/src/evm/providers/wallet-ui-states-provider.tsx

@@ -21,6 +21,7 @@ export type ModalConfig = {
     onLogout?: () => void;
   };
   isEmbed?: boolean;
+  onConnect?: () => void;
 };
 
 const WalletModalOpen = /* @__PURE__ */ createContext(false);
@@ -54,6 +55,7 @@ export const WalletUIStatesProvider = (
       onLogin?: (token: string) => void;
       onLogout?: () => void;
     };
+    onConnect?: () => void;
   }>,
 ) => {
   const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
@@ -71,6 +73,7 @@ export const WalletUIStatesProvider = (
     titleIconUrl: props.titleIconUrl,
     isEmbed: props.isEmbed,
     auth: props.auth,
+    onConnect: props.onConnect,
   });
 
   return (

packages/react/src/payments/components/CheckoutWithCard.tsx

@@ -44,21 +44,23 @@ interface CheckoutWithCardProps {
   locale?: Locale;
 }
 
-export const CheckoutWithCard = ({
-  clientId,
-  sdkClientSecret,
-  appName,
-  options = {
-    ...DEFAULT_BRAND_OPTIONS,
-  },
-  onPaymentSuccess,
-  onReview,
-  onError,
-  onBeforeModalOpen,
-  onPriceUpdate,
-  locale,
-  configs,
-}: CheckoutWithCardProps): React.ReactElement => {
+export function CheckoutWithCard(props: CheckoutWithCardProps) {
+  const {
+    clientId,
+    sdkClientSecret,
+    appName,
+    options = {
+      ...DEFAULT_BRAND_OPTIONS,
+    },
+    onPaymentSuccess,
+    onReview,
+    onError,
+    onBeforeModalOpen,
+    onPriceUpdate,
+    locale,
+    configs,
+  } = props;
+
   const { appName: appNameContext } = usePaymentsSDKContext();
   const [isCardDetailIframeLoading, setIsCardDetailIframeLoading] =
     useState<boolean>(true);
@@ -113,15 +115,13 @@ export const CheckoutWithCard = ({
   ]);
 
   return (
-    <>
-      <div
-        className={iframeContainer}
-        ref={CheckoutWithCardIframeContainerRef}
-        // Label the package version.
-        data-thirdweb-sdk-version={`${packageJson.name}@${packageJson.version}`}
-      >
-        {isCardDetailIframeLoading && <SpinnerWrapper />}
-      </div>
-    </>
+    <div
+      className={iframeContainer}
+      ref={CheckoutWithCardIframeContainerRef}
+      // Label the package version.
+      data-thirdweb-sdk-version={`${packageJson.name}@${packageJson.version}`}
+    >
+      {isCardDetailIframeLoading && <SpinnerWrapper />}
+    </div>
   );
-};
+}

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

@@ -137,7 +137,7 @@ export type ConnectWalletProps = {
     /**
      * specify whether signing in is optional or not.
      *
-     * By default it is `true` if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+     * By default it is `false` ( sign in required )  if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
      */
     loginOptional?: boolean;
     /**
@@ -318,6 +318,32 @@ export type ConnectWalletProps = {
    * ```
    */
   hideDisconnect?: boolean;
+
+  /**
+   * Callback to be called on successful connection of wallet
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  onConnect={() => {
+   *    console.log("wallet connected")
+   *  }}
+   * />
+   * ```
+   *
+   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+   *
+   * ```tsx
+   * <ConnectWallet
+   *  auth={{
+   *   onLogin: () => {
+   *     console.log("wallet connected and signed in")
+   *   }
+   *  }}
+   * />
+   * ```
+   *
+   */
+  onConnect?: () => void;
 };
 
 const TW_CONNECT_WALLET = "tw-connect-wallet";
@@ -365,7 +391,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  *
  * ### auth (optional)
  * The object contains the following properties to customize the authentication
- * - `loginOptional` - specify whether signing in is optional or not. By default it is `true` if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+ * - `loginOptional` - specify whether signing in is optional or not. By default it is `false` ( Sign in is required ) if `authConfig` is set on [`ThirdwebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
  * - `onLogin` - Callback to be called after user signs in with their wallet
  * - `onLogout` - Callback to be called after user signs out
  *
@@ -671,6 +697,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
                   welcomeScreen: props.welcomeScreen,
                   titleIconUrl: props.modalTitleIconUrl,
                   auth: props.auth,
+                  onConnect: props.onConnect,
                 });
                 setIsWalletModalOpen(true);
               }}

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

@@ -38,7 +38,7 @@ export type ConnectEmbedProps = {
   /**
    * theme for the ConnectEmbed
    *
-   * If a theme is set on the `ThirdWebProvider` component, it will be used as the default theme for all thirdweb components, else the default will be "dark"
+   * If a theme is set on the [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) component, it will be used as the default theme for all thirdweb components, else the default will be "dark"
    *
    * theme can be set to either "dark" or "light" or a custom theme object.
    *
@@ -74,13 +74,13 @@ export type ConnectEmbedProps = {
   /**
    * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/auth) after connecting their wallet.
    *
-   * This requires the `authConfig` prop to be set on the `ThirdWebProvider` component.
+   * This requires the `authConfig` prop to be set on the [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) component.
    */
   auth?: {
     /**
      * specify whether signing in is optional or not.
      *
-     * By default it is `true` if `authConfig` is set on `ThirdWebProvider`
+     * By default it is `false` ( sign in is required ) if `authConfig` is set on [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
      */
     loginOptional?: boolean;
     /**
@@ -92,6 +92,32 @@ export type ConnectEmbedProps = {
      */
     onLogout?: () => void;
   };
+
+  /**
+   * Callback to be called on successful connection of wallet
+   *
+   * ```tsx
+   * <ConnectEmbed
+   *  onConnect={() => {
+   *    console.log("wallet connected")
+   *  }}
+   * />
+   * ```
+   *
+   * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+   *
+   * ```tsx
+   * <ConnectEmbed
+   *  auth={{
+   *   onLogin: () => {
+   *     console.log("wallet connected and signed in")
+   *   }
+   *  }}
+   * />
+   * ```
+   *
+   */
+  onConnect?: () => void;
 };
 
 /**
@@ -154,11 +180,13 @@ export function useShowConnectEmbed(loginOptional?: boolean) {
 /**
  * A component that allows the user to connect their wallet.
  *
+ * it renders the same UI as the [`ConnectWallet`](https://portal.thirdweb.com/react/v4/components/ConnectWallet) component's modal - but directly on the page instead of being in a modal.
+ *
  * It only renders UI if either one of the following conditions are met:
  * - wallet is not connected
  * - wallet is connected but the user is not signed in and `auth` is required ( loginOptional is not set to false )
  *
- * `ConnectEmbed` uses the `useShowConnectEmbed` hook internally to determine if it should be rendered or not. You can also use this hook to determine if you should render something else instead of `ConnectEmbed`
+ * `ConnectEmbed` uses the [`useShowConnectEmbed`](https://portal.thirdweb.com/react/v4/useShowConnectEmbed) hook internally to determine if it should be rendered or not. You can also use this hook to determine if you should render something else instead of `ConnectEmbed`
  *
  * @example
  * ```tsx
@@ -180,9 +208,76 @@ export function useShowConnectEmbed(loginOptional?: boolean) {
  *     </div>
  *   );
  * }
- *```
+ * ```
+ *
+ * @param props -
+ * The props for the component.
+ *
+ * ### className
+ * Class name to be added to the root element of ConnectEmbed
+ *
+ * ### theme
+ * theme for the ConnectEmbed
+ *
+ * If a theme is set on the [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) component, it will be used as the default theme for all thirdweb components, else the default will be "dark"
+ *
+ * theme can be set to either "dark" or "light" or a custom theme object.
+ *
+ * You can also import `lightTheme` or `darkTheme` functions from `@thirdweb-dev/react` to use the default themes as base and overrides parts of it.
+ *
+ * ```ts
+ * import { lightTheme } from "@thirdweb-dev/react";
+ * const customTheme = lightTheme({
+ *  colors: {
+ *    modalBg: 'red'
+ *  }
+ * })
+ * ```
+ *
+ * ### style
+ * CSS styles to be applied to the root element of ConnectEmbed
+ *
+ * ### termsOfServiceUrl
+ * If provided, Embed will show a Terms of Service message at the bottom with below link
+ *
+ * ### privacyPolicyUrl
+ * If provided, Embed will show a Privacy Policy message at the bottom with below link
+ *
+ * ### auth
+ * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/auth) after connecting their wallet.
+ *
+ * This requires the `authConfig` prop to be set on the [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider) component.
+ *
+ * The `auth` prop accepts an object with the following properties:
+ * - `loginOptional` - specify whether signing in is optional or not. By default it is `false` ( sign in is required ) if `authConfig` is set on [`ThirdWebProvider`](https://portal.thirdweb.com/react/v4/ThirdwebProvider)
+ * - `onLogin` - Callback to be called after user signs in with their wallet
+ * - `onLogout` - Callback to be called after user signs out
+ *
+ * ### onConnect
+ * Callback to be called on successful connection of wallet
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *  onConnect={() => {
+ *    console.log("wallet connected")
+ *  }}
+ * />
+ * ```
+ *
+ * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` prop instead
+ *
+ * ```tsx
+ * <ConnectEmbed
+ *  auth={{
+ *   onLogin: () => {
+ *     console.log("wallet connected and signed in")
+ *   }
+ *  }}
+ * />
+ * ```
+ *
  */
-export const ConnectEmbed = (props: ConnectEmbedProps) => {
+export function ConnectEmbed(props: ConnectEmbedProps) {
   const loginOptional = props.auth?.loginOptional;
   const requiresSignIn = useSignInRequired(loginOptional);
   const show = useShowConnectEmbed(loginOptional);
@@ -205,12 +300,13 @@ export const ConnectEmbed = (props: ConnectEmbedProps) => {
         screen={screen}
         setScreen={setScreen}
         initialScreen={initialScreen}
+        onConnect={props.onConnect}
       />
     );
   }
 
-  return null;
-};
+  return <div></div>;
+}
 
 const ConnectEmbedContent = (
   props: Omit<ConnectEmbedProps, "onConnect"> & {
@@ -218,6 +314,7 @@ const ConnectEmbedContent = (
     screen: string | WalletConfig;
     setScreen: (screen: string | WalletConfig) => void;
     initialScreen: string | WalletConfig;
+    onConnect?: () => void;
   },
 ) => {
   const modalSize = "compact" as const;
@@ -266,6 +363,7 @@ const ConnectEmbedContent = (
     privacyPolicyUrl: props.privacyPolicyUrl,
     isEmbed: true,
     auth: props.auth,
+    onConnect: props.onConnect,
   };
 
   return (

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

@@ -56,12 +56,17 @@ export const ConnectModalContent = (props: {
   const title = modalConfig.title;
   const theme = modalConfig.theme;
   const modalSize = modalConfig.modalSize;
+  const onConnect = modalConfig.onConnect;
   const isWideModal = modalSize === "wide";
 
   const { user } = useUser();
   const authConfig = useThirdwebAuthContext();
 
   const handleConnected = useCallback(() => {
+    if (onConnect) {
+      onConnect();
+    }
+
     const requiresSignIn = modalConfig.auth?.loginOptional
       ? false
       : !!authConfig?.authUrl && !user?.address;
@@ -86,6 +91,7 @@ export const ConnectModalContent = (props: {
     setScreen,
     onShow,
     onClose,
+    onConnect,
   ]);
 
   const handleBack = useCallback(() => {

pnpm-lock.yaml

@@ -931,6 +931,9 @@ importers:
       expo-secure-store:
         specifier: ^12.1.1
         version: 12.1.1([email protected])
+      react-native-mmkv:
+        specifier: '>=2.11.0'
+        version: 2.11.0([email protected])([email protected])
       react-native-modal:
         specifier: ^13.0.1
         version: 13.0.1([email protected])([email protected])
@@ -1047,9 +1050,6 @@ importers:
       react-native:
         specifier: ^0.71.11
         version: 0.71.11(@babel/[email protected])(@babel/[email protected])([email protected])
-      react-native-mmkv:
-        specifier: 2.5.1
-        version: 2.5.1([email protected])([email protected])
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
@@ -27499,6 +27499,16 @@ packages:
     dev: false
     optional: true
 
+  /[email protected]([email protected])([email protected]):
+    resolution: {integrity: sha512-28PdUHjZJmAw3q+8zJDAAdohnZMpDC7WgRUJxACOMkcmJeqS3u5cKS/lSq2bhf1CvaeIiHYHUWiyatUjMRCDQQ==}
+    peerDependencies:
+      react: '*'
+      react-native: '>=0.71.0'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.71.11(@babel/[email protected])(@babel/[email protected])([email protected])
+    dev: false
+
   /[email protected]([email protected])([email protected]):
     resolution: {integrity: sha512-0hYNOTbsjJ5j5cpX+qjwReGIxuYE9MWRsyPQ72fTOvzmEjYXCF4Wr2VQoqx8R6W1/Uinekvln7dGvJ4RExmHhQ==}
     peerDependencies:
@@ -27509,16 +27519,6 @@ packages:
       react-native: 0.71.11(@babel/[email protected])(@babel/[email protected])([email protected])
     dev: false
 
-  /[email protected]([email protected])([email protected]):
-    resolution: {integrity: sha512-5eQu25z3H6zf6w0NkJoTuFEFrbOu6luZxZ6+rK1W+XwY/rjPSFZFQPVtMaz3im90RbILFXXM/KrFGZrpaJJRoQ==}
-    peerDependencies:
-      react: '*'
-      react-native: '*'
-    dependencies:
-      react: 18.2.0
-      react-native: 0.71.11(@babel/[email protected])(@babel/[email protected])([email protected])
-    dev: true
-
   /[email protected]([email protected])([email protected]):
     resolution: {integrity: sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==}
     peerDependencies: