thirdweb 5.46.0-nightly-814024ae249141ad1446ce7f21793b1d37b95d13-20240814000405 → 5.46.0-nightly-d6e4898458ae0b7db99acb8a44f0730c18d6bdd9-20240815000344

package/src/extensions/modular/__generated__/SimpleMetadataERC1155/read/getModuleConfig.ts

@@ -0,0 +1,122 @@
+import { readContract } from "../../../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../../../transaction/types.js";
+
+import { decodeAbiParameters } from "viem";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+export const FN_SELECTOR = "0x89e04e0e" as const;
+const FN_INPUTS = [] as const;
+const FN_OUTPUTS = [
+  {
+    name: "config",
+    type: "tuple",
+    internalType: "struct IModuleConfig.ModuleConfig",
+    components: [
+      {
+        name: "registerInstallationCallback",
+        type: "bool",
+        internalType: "bool",
+      },
+      {
+        name: "requiredInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "supportedInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "callbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IModuleConfig.CallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+        ],
+      },
+      {
+        name: "fallbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IModuleConfig.FallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+          {
+            name: "permissionBits",
+            type: "uint256",
+            internalType: "uint256",
+          },
+        ],
+      },
+    ],
+  },
+] as const;
+
+/**
+ * Checks if the `getModuleConfig` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `getModuleConfig` method is supported.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { isGetModuleConfigSupported } from "thirdweb/extensions/modular";
+ *
+ * const supported = await isGetModuleConfigSupported(contract);
+ * ```
+ */
+export async function isGetModuleConfigSupported(
+  contract: ThirdwebContract<any>,
+) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Decodes the result of the getModuleConfig function call.
+ * @param result - The hexadecimal result to decode.
+ * @returns The decoded result as per the FN_OUTPUTS definition.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { decodeGetModuleConfigResult } from "thirdweb/extensions/modular";
+ * const result = decodeGetModuleConfigResult("...");
+ * ```
+ */
+export function decodeGetModuleConfigResult(result: Hex) {
+  return decodeAbiParameters(FN_OUTPUTS, result)[0];
+}
+
+/**
+ * Calls the "getModuleConfig" function on the contract.
+ * @param options - The options for the getModuleConfig function.
+ * @returns The parsed result of the function call.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { getModuleConfig } from "thirdweb/extensions/modular";
+ *
+ * const result = await getModuleConfig({
+ *  contract,
+ * });
+ *
+ * ```
+ */
+export async function getModuleConfig(options: BaseTransactionOptions) {
+  return readContract({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: [],
+  });
+}

package/src/extensions/modular/__generated__/SimpleMetadataERC721/read/getModuleConfig.ts

@@ -0,0 +1,122 @@
+import { readContract } from "../../../../../transaction/read-contract.js";
+import type { BaseTransactionOptions } from "../../../../../transaction/types.js";
+
+import { decodeAbiParameters } from "viem";
+import type { Hex } from "../../../../../utils/encoding/hex.js";
+import type { ThirdwebContract } from "../../../../../contract/contract.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+
+export const FN_SELECTOR = "0x89e04e0e" as const;
+const FN_INPUTS = [] as const;
+const FN_OUTPUTS = [
+  {
+    name: "config",
+    type: "tuple",
+    internalType: "struct IModuleConfig.ModuleConfig",
+    components: [
+      {
+        name: "registerInstallationCallback",
+        type: "bool",
+        internalType: "bool",
+      },
+      {
+        name: "requiredInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "supportedInterfaces",
+        type: "bytes4[]",
+        internalType: "bytes4[]",
+      },
+      {
+        name: "callbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IModuleConfig.CallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+        ],
+      },
+      {
+        name: "fallbackFunctions",
+        type: "tuple[]",
+        internalType: "struct IModuleConfig.FallbackFunction[]",
+        components: [
+          {
+            name: "selector",
+            type: "bytes4",
+            internalType: "bytes4",
+          },
+          {
+            name: "permissionBits",
+            type: "uint256",
+            internalType: "uint256",
+          },
+        ],
+      },
+    ],
+  },
+] as const;
+
+/**
+ * Checks if the `getModuleConfig` method is supported by the given contract.
+ * @param contract The ThirdwebContract.
+ * @returns A promise that resolves to a boolean indicating if the `getModuleConfig` method is supported.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { isGetModuleConfigSupported } from "thirdweb/extensions/modular";
+ *
+ * const supported = await isGetModuleConfigSupported(contract);
+ * ```
+ */
+export async function isGetModuleConfigSupported(
+  contract: ThirdwebContract<any>,
+) {
+  return detectMethod({
+    contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Decodes the result of the getModuleConfig function call.
+ * @param result - The hexadecimal result to decode.
+ * @returns The decoded result as per the FN_OUTPUTS definition.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { decodeGetModuleConfigResult } from "thirdweb/extensions/modular";
+ * const result = decodeGetModuleConfigResult("...");
+ * ```
+ */
+export function decodeGetModuleConfigResult(result: Hex) {
+  return decodeAbiParameters(FN_OUTPUTS, result)[0];
+}
+
+/**
+ * Calls the "getModuleConfig" function on the contract.
+ * @param options - The options for the getModuleConfig function.
+ * @returns The parsed result of the function call.
+ * @extension MODULAR
+ * @example
+ * ```ts
+ * import { getModuleConfig } from "thirdweb/extensions/modular";
+ *
+ * const result = await getModuleConfig({
+ *  contract,
+ * });
+ *
+ * ```
+ */
+export async function getModuleConfig(options: BaseTransactionOptions) {
+  return readContract({
+    contract: options.contract,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    params: [],
+  });
+}

package/src/extensions/prebuilts/deploy-modular-core.test.ts

@@ -5,10 +5,10 @@ import { TEST_ACCOUNT_A } from "../../../test/src/test-wallets.js";
 import { ZERO_ADDRESS } from "../../constants/addresses.js";
 import { getContract } from "../../contract/contract.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
-import { installPublishedExtension } from "../modular/ModularCore/write/installPublishedExtension.js";
-import { uninstallExtensionByProxy } from "../modular/ModularCore/write/uninstallExtensionByProxy.js";
-import { uninstallPublishedExtension } from "../modular/ModularCore/write/uninstallPublishedExtension.js";
-import { getInstalledExtensions } from "../modular/__generated__/ModularCore/read/getInstalledExtensions.js";
+import { installPublishedModule } from "../modular/ModularCore/write/installPublishedModule.js";
+import { uninstallModuleByProxy } from "../modular/ModularCore/write/uninstallModuleByProxy.js";
+import { uninstallPublishedModule } from "../modular/ModularCore/write/uninstallPublishedModule.js";
+import { getInstalledModules } from "../modular/__generated__/ModularCore/read/getInstalledModules.js";
 import { deployPublishedContract } from "./deploy-published.js";
 
 describe.skip(
@@ -29,18 +29,18 @@ describe.skip(
       expect(address).toBeDefined();
       expect(address.length).toBe(42);
 
-      const installedExtensions = await getInstalledExtensions({
+      const installedModules = await getInstalledModules({
         contract: getContract({
           client: TEST_CLIENT,
           chain: ANVIL_CHAIN,
           address,
         }),
       });
-      expect(installedExtensions.length).toBe(0);
+      expect(installedModules.length).toBe(0);
     });
 
-    it("should install and uninstall an extension by proxy address", async () => {
-      // deploy core contract with extension
+    it("should install and uninstall a module by proxy address", async () => {
+      // deploy core contract with module
       const address = await deployPublishedContract({
         client: TEST_CLIENT,
         chain: ANVIL_CHAIN,
@@ -56,13 +56,13 @@ describe.skip(
         address,
       });
 
-      // install extension with published name
-      const installTransaction = installPublishedExtension({
+      // install module with published name
+      const installTransaction = installPublishedModule({
         contract: core,
         chain: ANVIL_CHAIN,
         client: TEST_CLIENT,
         account: TEST_ACCOUNT_A,
-        extensionName: "DemoExtensionWithFunctions",
+        moduleName: "DemoModuleWithFunctions",
         publisherAddress: "0xFD78F7E2dF2B8c3D5bff0413c96f3237500898B3",
       });
       await sendAndConfirmTransaction({
@@ -70,35 +70,35 @@ describe.skip(
         account: TEST_ACCOUNT_A,
       });
 
-      // get installed extension proxy address
-      let installedExtensions = await getInstalledExtensions({
+      // get installed module proxy address
+      let installedModules = await getInstalledModules({
         contract: core,
       });
-      const extensionAddress = installedExtensions[0]?.implementation;
-      expect(extensionAddress).to.not.equal(ZERO_ADDRESS);
+      const moduleAddress = installedModules[0]?.implementation;
+      expect(moduleAddress).to.not.equal(ZERO_ADDRESS);
 
-      // uninstall extension
-      const uninstallTransaction = uninstallExtensionByProxy({
+      // uninstall module
+      const uninstallTransaction = uninstallModuleByProxy({
         contract: core,
         chain: ANVIL_CHAIN,
         client: TEST_CLIENT,
-        extensionProxyAddress: extensionAddress as string,
-        extensionData: "0x",
+        moduleProxyAddress: moduleAddress as string,
+        moduleData: "0x",
       });
       await sendAndConfirmTransaction({
         transaction: uninstallTransaction,
         account: TEST_ACCOUNT_A,
       });
 
-      installedExtensions = await getInstalledExtensions({
+      installedModules = await getInstalledModules({
         contract: core,
       });
 
-      expect(installedExtensions.length).toBe(0);
+      expect(installedModules.length).toBe(0);
     });
 
-    it("should install and uninstall extensions by publish name", async () => {
-      // deploy core contract with extension
+    it("should install and uninstall modules by publish name", async () => {
+      // deploy core contract with module
       const address = await deployPublishedContract({
         client: TEST_CLIENT,
         chain: ANVIL_CHAIN,
@@ -114,13 +114,13 @@ describe.skip(
         address,
       });
 
-      // install extension with published name
-      const installTransaction = installPublishedExtension({
+      // install module with published name
+      const installTransaction = installPublishedModule({
         contract: core,
         chain: ANVIL_CHAIN,
         client: TEST_CLIENT,
         account: TEST_ACCOUNT_A,
-        extensionName: "DemoExtensionWithFunctions",
+        moduleName: "DemoModuleWithFunctions",
         publisherAddress: "0xFD78F7E2dF2B8c3D5bff0413c96f3237500898B3",
       });
       await sendAndConfirmTransaction({
@@ -128,31 +128,31 @@ describe.skip(
         account: TEST_ACCOUNT_A,
       });
 
-      let installedExtensions = await getInstalledExtensions({
+      let installedModules = await getInstalledModules({
         contract: core,
       });
 
-      expect(installedExtensions.length).toBe(1);
+      expect(installedModules.length).toBe(1);
 
-      // uninstall extension
-      const uninstallTransaction = uninstallPublishedExtension({
+      // uninstall module
+      const uninstallTransaction = uninstallPublishedModule({
         contract: core,
         chain: ANVIL_CHAIN,
         client: TEST_CLIENT,
-        extensionName: "DemoExtensionWithFunctions",
+        moduleName: "DemoModuleWithFunctions",
         publisherAddress: "0xFD78F7E2dF2B8c3D5bff0413c96f3237500898B3",
-        extensionData: "0x",
+        moduleData: "0x",
       });
       await sendAndConfirmTransaction({
         transaction: uninstallTransaction,
         account: TEST_ACCOUNT_A,
       });
 
-      installedExtensions = await getInstalledExtensions({
+      installedModules = await getInstalledModules({
         contract: core,
       });
 
-      expect(installedExtensions.length).toBe(0);
+      expect(installedModules.length).toBe(0);
     });
   },
 );

package/src/react/core/design-system/index.ts

@@ -35,7 +35,7 @@ const lightColors = {
   base4: "#dbd8e0",
   primaryText: "#211f26",
   secondaryText: "#6f6d78",
-  accentText: "hsl(216 100% 45%)",
+  accentText: "#3385FF",
   success: "#30A46C",
   danger: "#e5484D",
   overlay: "rgba(0, 0, 0, 0.7)",

package/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -1,5 +1,7 @@
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
+import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
 import type { Prettify } from "../../../../utils/type-utils.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -89,6 +91,21 @@ export type PayUIOptions = Prettify<
      * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
      */
     purchaseData?: object;
+
+    /**
+     * Callback to be called when the user successfully completes the purchase.
+     */
+    onPurchaseSuccess?: (
+      info:
+        | {
+            type: "crypto";
+            status: BuyWithCryptoStatus;
+          }
+        | {
+            type: "fiat";
+            status: BuyWithFiatStatus;
+          },
+    ) => void;
   } & (FundWalletOptions | DirectPaymentOptions | TranasctionOptions)
 >;
 

package/src/react/core/hooks/transaction/useSendTransaction.ts

@@ -1,5 +1,7 @@
 import { type UseMutationResult, useMutation } from "@tanstack/react-query";
 import type { Chain } from "../../../../chains/types.js";
+import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
+import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import { sendTransaction } from "../../../../transaction/actions/send-transaction.js";
 import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
@@ -46,6 +48,20 @@ export type SendTransactionPayModalConfig =
             testMode?: boolean;
           };
       purchaseData?: object;
+      /**
+       * Callback to be called when the user successfully completes the purchase.
+       */
+      onPurchaseSuccess?: (
+        info:
+          | {
+              type: "crypto";
+              status: BuyWithCryptoStatus;
+            }
+          | {
+              type: "fiat";
+              status: BuyWithFiatStatus;
+            },
+      ) => void;
     }
   | false;
 

package/src/react/core/hooks/wallets/useAutoConnect.ts

@@ -96,6 +96,9 @@ export function useAutoConnectCore(
           setConnectionStatus("disconnected");
         }
       } catch (e) {
+        if (e instanceof Error) {
+          console.warn("Error auto connecting wallet:", e.message);
+        }
         setConnectionStatus("disconnected");
       }
     } else {

package/src/react/core/hooks/wallets/useConnect.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
 import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
+import { useSetActiveWalletConnectionStatus } from "./useSetActiveWalletConnectionStatus.js";
 
 /**
  * A hook to set a wallet as active wallet
@@ -36,6 +37,7 @@ import { useConnectionManagerCtx } from "../../providers/connection-manager.js";
 export function useConnect(options?: ConnectManagerOptions) {
   const manager = useConnectionManagerCtx("useConnect");
   const { connect } = manager;
+  const setConnectionStatus = useSetActiveWalletConnectionStatus();
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
@@ -43,23 +45,29 @@ export function useConnect(options?: ConnectManagerOptions) {
     async (walletOrFn: Wallet | (() => Promise<Wallet>)) => {
       // reset error state
       setError(null);
+      setConnectionStatus("connecting");
       if (typeof walletOrFn !== "function") {
-        return await connect(walletOrFn, options);
+        const account = await connect(walletOrFn, options);
+        setConnectionStatus("connected");
+        return account;
       }
 
       setIsConnecting(true);
       try {
         const w = await walletOrFn();
-        return await connect(w, options);
+        const account = await connect(w, options);
+        setConnectionStatus("connected");
+        return account;
       } catch (e) {
         console.error(e);
         setError(e as Error);
+        setConnectionStatus("disconnected");
       } finally {
         setIsConnecting(false);
       }
       return null;
     },
-    [connect, options],
+    [connect, options, setConnectionStatus],
   );
 
   return { connect: handleConnection, isConnecting, error } as const;

package/src/react/native/ui/components/RNImage.tsx

@@ -1,9 +1,8 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { Image } from "react-native";
 import { SvgXml } from "react-native-svg";
 import type { Theme } from "../../../core/design-system/index.js";
 import { radius } from "../../design-system/index.js";
-import { Skeleton } from "./Skeleton.js";
 
 export type ImageInfo = {
   size: number;
@@ -34,7 +33,6 @@ function getImage(data: string): {
 
 export const RNImage = (props: ImageInfo) => {
   const { data, size, color, placeholder } = props;
-  const [loading, setLoading] = useState(true);
   if (!data) {
     return null;
   }
@@ -44,22 +42,12 @@ export const RNImage = (props: ImageInfo) => {
     case "image":
       return (
         <>
-          {loading && (
-            <Skeleton
-              theme={props.theme}
-              style={{ width: size, height: size }}
-            />
-          )}
           <Image
             source={{ uri: image }}
             loadingIndicatorSource={{ uri: placeholder }}
             width={size}
             height={size}
-            onLoadStart={() => setLoading(true)}
-            onLoadEnd={() => setLoading(false)}
-            style={[
-              { borderRadius: radius.md, display: loading ? "none" : "flex" },
-            ]}
+            style={[{ borderRadius: radius.md }]}
           />
         </>
       );

package/src/react/native/ui/components/WalletImage.tsx

@@ -5,14 +5,13 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
+import { getWalletIcon } from "../../../core/utils/walletIcon.js";
 import {
   APPLE_ICON,
   DISCORD_ICON,
-  EMAIL_ICON,
   FACEBOOK_ICON,
   FARCASTER_ICON,
   GOOGLE_ICON,
-  PHONE_ICON,
   TELEGRAM_ICON,
   WALLET_ICON,
 } from "../icons/svgs.js";
@@ -67,9 +66,9 @@ export const WalletImage = (props: {
 export function getAuthProviderImage(lastAuthProvider: string | null): string {
   switch (lastAuthProvider) {
     case "phone":
-      return PHONE_ICON;
     case "email":
-      return EMAIL_ICON;
+    case "passkey":
+      return getWalletIcon(lastAuthProvider);
     case "google":
       return GOOGLE_ICON;
     case "apple":
@@ -83,6 +82,6 @@ export function getAuthProviderImage(lastAuthProvider: string | null): string {
     case "telegram":
       return TELEGRAM_ICON;
     default:
-      return WALLET_ICON;
+      return getWalletIcon("");
   }
 }

package/src/react/native/ui/connect/ConnectButton.tsx

@@ -182,7 +182,7 @@ export function ConnectButton(props: ConnectButtonProps) {
 }
 
 const screenHeight = Dimensions.get("window").height;
-const modalHeight = 480;
+const modalHeight = 520;
 const screenWidth = Dimensions.get("window").width;
 
 const styles = StyleSheet.create({