Version Packages (#3038)

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

legacy_packages/auth/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/auth
 
+## 4.1.81
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/wallets@2.5.23
+
 ## 4.1.80
 
 ### Patch Changes

legacy_packages/auth/package.json

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

legacy_packages/cli/CHANGELOG.md

@@ -1,5 +1,14 @@
 # thirdweb
 
+## 0.13.89
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/sdk@4.0.83
+  - @thirdweb-dev/wallets@2.5.23
+  - @thirdweb-dev/auth@4.1.81
+
 ## 0.13.88
 
 ### Patch Changes

legacy_packages/cli/package.json

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

legacy_packages/react-core/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/react-core
 
+## 4.6.22
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/sdk@4.0.83
+  - @thirdweb-dev/wallets@2.5.23
+  - @thirdweb-dev/auth@4.1.81
+
 ## 4.6.21
 
 ### Patch Changes

legacy_packages/react-core/package.json

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

legacy_packages/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/react
 
+## 4.6.22
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/sdk@4.0.83
+  - @thirdweb-dev/react-core@4.6.22
+  - @thirdweb-dev/wallets@2.5.23
+
 ## 4.6.21
 
 ### Patch Changes

legacy_packages/react/package.json

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

legacy_packages/sdk/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/sdk
 
+## 4.0.83
+
+### Patch Changes
+
+- Updated dependencies [[`3c04450`](https://github.com/thirdweb-dev/js/commit/3c044508eee18ca741878da43e199ed4cc0528b7), [`99fa2da`](https://github.com/thirdweb-dev/js/commit/99fa2da05abc32646036a2269f90213c5756a5ba)]:
+  - thirdweb@5.21.0
+
 ## 4.0.82
 
 ### Patch Changes

legacy_packages/sdk/package.json

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

legacy_packages/unity-js-bridge/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @thirdweb-dev/unity-js-bridge
 
+## 0.6.32
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/sdk@4.0.83
+  - @thirdweb-dev/wallets@2.5.23
+  - @thirdweb-dev/auth@4.1.81
+
 ## 0.6.31
 
 ### Patch Changes

legacy_packages/unity-js-bridge/package.json

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

legacy_packages/wallets/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @thirdweb-dev/wallets
 
+## 2.5.23
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @thirdweb-dev/sdk@4.0.83
+
 ## 2.5.22
 
 ### Patch Changes

legacy_packages/wallets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thirdweb-dev/wallets",
-  "version": "2.5.22",
+  "version": "2.5.23",
   "main": "dist/thirdweb-dev-wallets.cjs.js",
   "module": "dist/thirdweb-dev-wallets.esm.js",
   "browser": {

packages/service-utils/src/cf-worker/usage.ts

@@ -53,6 +53,7 @@ const usageEventSchema = z.object({
   sdkName: z.string().optional(),
   sdkVersion: z.string().optional(),
   sdkPlatform: z.string().optional(),
+  sdkOS: z.string().optional(),
   productName: z.string().optional(),
   transactionValue: z.string().optional(),
   pathname: z.string().optional(),

packages/thirdweb/.size-limit.json

@@ -2,7 +2,7 @@
   {
     "name": "thirdweb (esm)",
     "path": "./dist/esm/exports/thirdweb.js",
-    "limit": "40 kB",
+    "limit": "40.1 kB",
     "import": "*"
   },
   {

packages/thirdweb/CHANGELOG.md

@@ -1,5 +1,29 @@
 # thirdweb
 
+## 5.21.0
+
+### Minor Changes
+
+- [#3034](https://github.com/thirdweb-dev/js/pull/3034) [`99fa2da`](https://github.com/thirdweb-dev/js/commit/99fa2da05abc32646036a2269f90213c5756a5ba) Thanks [@gregfromstl](https://github.com/gregfromstl)! - Adds the ability to set a custom logo for the social login modal
+
+  ```ts
+  import { inAppWallet } from "thirdweb/wallets";
+  const wallet = inAppWallet({
+    metadata: {
+      image: {
+        src: "https://example.com/logo.png",
+        alt: "My logo",
+        width: 100,
+        height: 100,
+      },
+    },
+  });
+  ```
+
+### Patch Changes
+
+- [#3035](https://github.com/thirdweb-dev/js/pull/3035) [`3c04450`](https://github.com/thirdweb-dev/js/commit/3c044508eee18ca741878da43e199ed4cc0528b7) Thanks [@kien-ngo](https://github.com/kien-ngo)! - Export extensions for Pack contract
+
 ## 5.20.0
 
 ### Minor Changes

packages/thirdweb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.20.0",
+  "version": "5.21.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

packages/thirdweb/src/exports/extensions/erc1155.ts

@@ -125,3 +125,25 @@ export {
   tokensMintedWithSignatureEvent,
   type TokensMintedWithSignatureEventFilters,
 } from "../../extensions/erc1155/__generated__/ISignatureMintERC1155/events/TokensMintedWithSignature.js";
+
+// Packs
+export {
+  packCreatedEvent,
+  type PackCreatedEventFilters,
+} from "../../extensions/erc1155/__generated__/IPack/events/PackCreated.js";
+export {
+  packOpenedEvent,
+  type PackOpenedEventFilters,
+} from "../../extensions/erc1155/__generated__/IPack/events/PackOpened.js";
+export {
+  packUpdatedEvent,
+  type PackUpdatedEventFilters,
+} from "../../extensions/erc1155/__generated__/IPack/events/PackUpdated.js";
+export {
+  createPack,
+  type CreatePackParams,
+} from "../../extensions/erc1155/__generated__/IPack/write/createPack.js";
+export {
+  openPack,
+  type OpenPackParams,
+} from "../../extensions/erc1155/__generated__/IPack/write/openPack.js";

packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -32,6 +32,7 @@ import { TOS } from "./Modal/TOS.js";
 import { PoweredByThirdweb } from "./PoweredByTW.js";
 import { WalletButton, WalletEntryButton } from "./WalletEntryButton.js";
 import { WalletTypeRowButton } from "./WalletTypeRowButton.js";
+import { compactModalMaxHeight } from "./constants.js";
 import { genericWalletIcon } from "./icons/dataUris.js";
 
 const InAppWalletSelectionUI = /* @__PURE__ */ lazy(
@@ -311,7 +312,13 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
           // social login + More than 1 eoa wallets
           if (eoaWallets.length > 1) {
             bottomSection = (
-              <Container flex="column" gap="sm">
+              <Container
+                flex="column"
+                style={{ position: "relative" }}
+                gap="sm"
+              >
+                <GradientDiv />
+
                 <Container px="lg" flex="column" gap="md">
                   {connectAWallet}
                   {continueAsGuest}
@@ -386,7 +393,8 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
       animate="fadein"
       fullHeight
       style={{
-        maxHeight: connectModal.size === "compact" ? "550px" : undefined,
+        maxHeight:
+          connectModal.size === "compact" ? compactModalMaxHeight : undefined,
       }}
     >
       {/* Header */}
@@ -604,3 +612,17 @@ const WalletList = /* @__PURE__ */ StyledUl({
   marginBottom: 0,
   paddingBottom: spacing.lg,
 });
+
+const GradientDiv = /* @__PURE__ */ StyledDiv(() => {
+  const theme = useCustomTheme();
+  theme.colors.modalBg;
+  return {
+    height: spacing.lg,
+    position: "absolute",
+    top: `-${spacing.lg}`,
+    left: 0,
+    width: "100%",
+    background: `linear-gradient(to bottom, transparent 0%, ${theme.colors.modalBg} 80%)`,
+    pointerEvents: "none",
+  };
+});

packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts

@@ -12,7 +12,7 @@ export const modalMaxWidthWide = `${wideModalWidth}px`;
 export const wideModalScreenThreshold = wideModalWidth + 40;
 
 export const wideModalMaxHeight = "570px";
-export const compactModalMaxHeight = "650px";
+export const compactModalMaxHeight = "660px";
 
 export const defaultTheme = "dark";
 

packages/thirdweb/src/react/web/ui/components/Img.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import { Skeleton } from "./Skeleton.js";
+import { Container } from "./basic.js";
 
 // Note: Must not use useConnectUI here
 
@@ -28,7 +29,11 @@ export const Img: React.FC<{
   const heightPx = `${props.height || props.width}px`;
 
   if (propSrc === undefined) {
-    return <Skeleton width={widthPx} height={heightPx} />;
+    return (
+      <Container style={{ margin: "auto" }}>
+        <Skeleton width={widthPx} height={heightPx} />
+      </Container>
+    );
   }
 
   const getSrc = () => {
@@ -51,9 +56,14 @@ export const Img: React.FC<{
         display: "inline-flex",
         flexShrink: 0,
         alignItems: "center",
+        justifyItems: "center",
       }}
     >
-      {!isLoaded && <Skeleton width={widthPx} height={heightPx} />}
+      {!isLoaded && (
+        <Container style={{ margin: "auto" }}>
+          <Skeleton width={widthPx} height={heightPx} />
+        </Container>
+      )}
       <img
         onLoad={() => {
           setIsLoaded(true);
@@ -66,6 +76,7 @@ export const Img: React.FC<{
         loading={props.loading}
         decoding="async"
         style={{
+          display: isLoaded ? "block" : "none",
           objectFit: "contain",
           height: !isLoaded
             ? 0

packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -152,6 +152,16 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
 
   const showOnlyIcons = socialLogins.length > 1;
 
+  if (
+    config?.metadata?.image &&
+    (!config.metadata.image.height || !config.metadata.image.width)
+  ) {
+    console.warn(
+      "Image is not properly configured. Please set height and width.",
+      config.metadata.image,
+    );
+  }
+
   return (
     <Container
       flex="column"
@@ -160,6 +170,25 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
         position: "relative",
       }}
     >
+      {config?.metadata?.image && (
+        <Img
+          loading="eager"
+          client={client}
+          style={{
+            maxHeight: "100px",
+            maxWidth: "300px",
+            margin: "auto",
+          }}
+          src={config.metadata.image.src}
+          alt={config.metadata.image.alt}
+          width={Math.min(config.metadata.image.width ?? 300, 300)?.toString()}
+          height={Math.min(
+            config.metadata.image.height ?? 100,
+            100,
+          )?.toString()}
+        />
+      )}
+
       {/* Social Login */}
       {hasSocialLogins && (
         <Container
@@ -320,7 +349,7 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
       {isCompact ? (
         <>
           <ModalHeader onBack={onBack} title={locale.title} />
-          <Spacer y="xl" />
+          <Spacer y="sm" />
         </>
       ) : null}
 

packages/thirdweb/src/wallets/create-wallet.ts

@@ -420,6 +420,21 @@ export function smartWallet(
  * },
  * });
  * ```
+ *
+ * Specify a logo for your login page
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  metadata: {
+ *   image: {
+ *    src: "https://example.com/logo.png",
+ *    alt: "My logo",
+ *    width: 100,
+ *    height: 100,
+ *   },
+ *  },
+ * });
+ * ```
  * @wallet
  */
 export function inAppWallet(

packages/thirdweb/src/wallets/in-app/core/wallet/types.ts

@@ -32,6 +32,14 @@ export type InAppWalletCreationOptions =
       auth?: {
         options: InAppWalletAuth[];
       };
+      metadata?: {
+        image?: {
+          src: string;
+          width?: number;
+          height?: number;
+          alt?: string;
+        };
+      };
       smartAccount?: SmartWalletOptions;
     }
   | undefined;