thirdweb 5.50.0 → 5.50.1

package/src/extensions/permissions/write/revokeRole.ts

@@ -3,6 +3,8 @@ import type { BaseTransactionOptions } from "../../../transaction/types.js";
 import { revokeRole as generatedRevokeRole } from "../__generated__/IPermissions/write/revokeRole.js";
 import { type RoleInput, getRoleHash } from "../utils.js";
 
+export { isRevokeRoleSupported } from "../__generated__/IPermissions/write/revokeRole.js";
+
 /**
  * @extension PERMISSIONS
  */

package/src/extensions/prebuilts/deploy-published.ts

@@ -1,12 +1,15 @@
-import type { AbiConstructor } from "abitype";
+import type { AbiConstructor, AbiFunction } from "abitype";
 import type { Chain } from "../../chains/types.js";
 import type { ThirdwebClient } from "../../client/client.js";
 import { getContract } from "../../contract/contract.js";
 import { fetchPublishedContractMetadata } from "../../contract/deployment/publisher.js";
+import { zkDeployContract } from "../../contract/deployment/zksync/zkDeployContract.js";
 import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-confirm-transaction.js";
 import { simulateTransaction } from "../../transaction/actions/simulate.js";
 import { prepareContractCall } from "../../transaction/prepare-contract-call.js";
 import { resolveMethod } from "../../transaction/resolve-method.js";
+import type { CompilerMetadata } from "../../utils/any-evm/deploy-metadata.js";
+import { isZkSyncChain } from "../../utils/any-evm/zksync/isZkSyncChain.js";
 import type { Account } from "../../wallets/interfaces/wallet.js";
 
 /**
@@ -58,26 +61,19 @@ export async function deployPublishedContract(
   const { compilerMetadata, extendedMetadata } =
     await fetchPublishedContractMetadata({
       client,
-      contractId,
+      contractId: isZkSyncChain(chain) ? `${contractId}_ZkSync` : contractId,
       publisher,
       version,
     });
 
   switch (extendedMetadata?.deployType) {
     case "standard": {
-      const { deployContract } = await import(
-        "../../contract/deployment/deploy-with-abi.js"
-      );
-      return deployContract({
+      return directDeploy({
         account,
         client,
         chain,
-        bytecode: compilerMetadata.bytecode,
-        constructorAbi:
-          (compilerMetadata.abi.find(
-            (i) => i.type === "constructor",
-          ) as AbiConstructor) || [],
-        constructorParams: contractParams,
+        compilerMetadata,
+        contractParams,
       });
     }
     case "autoFactory": {
@@ -97,16 +93,23 @@ export async function deployPublishedContract(
           constructorParams: implementationConstructorParams || [],
           publisher,
         });
+      const initializeFunction = compilerMetadata.abi.find(
+        (i) =>
+          i.type === "function" &&
+          i.name ===
+            (extendedMetadata.factoryDeploymentData
+              ?.implementationInitializerFunction || "initialize"),
+      ) as AbiFunction;
+      if (!initializeFunction) {
+        throw new Error(`Could not find initialize function for ${contractId}`);
+      }
       const initializeTransaction = prepareContractCall({
         contract: getContract({
           client,
           chain,
           address: implementationContract.address,
         }),
-        method: resolveMethod(
-          extendedMetadata.factoryDeploymentData
-            ?.implementationInitializerFunction || "initialize",
-        ),
+        method: initializeFunction,
         params: contractParams,
       });
 
@@ -154,19 +157,12 @@ export async function deployPublishedContract(
     }
     case undefined: {
       // Default to standard deployment if none was specified
-      const { deployContract } = await import(
-        "../../contract/deployment/deploy-with-abi.js"
-      );
-      return deployContract({
+      return directDeploy({
         account,
         client,
         chain,
-        bytecode: compilerMetadata.bytecode,
-        constructorAbi:
-          (compilerMetadata.abi.find(
-            (i) => i.type === "constructor",
-          ) as AbiConstructor) || [],
-        constructorParams: contractParams,
+        compilerMetadata,
+        contractParams,
       });
     }
     default:
@@ -176,3 +172,39 @@ export async function deployPublishedContract(
       );
   }
 }
+
+async function directDeploy(options: {
+  account: Account;
+  client: ThirdwebClient;
+  chain: Chain;
+  compilerMetadata: CompilerMetadata;
+  contractParams: unknown[];
+}) {
+  const { account, client, chain, compilerMetadata, contractParams } = options;
+
+  if (isZkSyncChain(chain)) {
+    return zkDeployContract({
+      account,
+      client,
+      chain,
+      bytecode: compilerMetadata.bytecode,
+      abi: compilerMetadata.abi,
+      params: contractParams,
+    });
+  }
+
+  const { deployContract } = await import(
+    "../../contract/deployment/deploy-with-abi.js"
+  );
+  return deployContract({
+    account,
+    client,
+    chain,
+    bytecode: compilerMetadata.bytecode,
+    constructorAbi:
+      (compilerMetadata.abi.find(
+        (i) => i.type === "constructor",
+      ) as AbiConstructor) || [],
+    constructorParams: contractParams,
+  });
+}

package/src/extensions/thirdweb/read/contractType.ts

@@ -0,0 +1,46 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import { hexToString } from "../../../utils/encoding/hex.js";
+import * as ContractTypeGenerated from "../__generated__/IThirdwebContract/read/contractType.js";
+
+/**
+ * Checks if the `contractType` method is supported by the given contract.
+ * @param availableSelectors An array of 4byte function selectors of the contract. You can get this in various ways, such as using "whatsabi" or if you have the ABI of the contract available you can use it to generate the selectors.
+ * @returns A boolean indicating if the `contractType` method is supported.
+ * @extension THIRDWEB
+ * @example
+ * ```ts
+ * import { isContractTypeSupported } from "thirdweb/extensions/thirdweb";
+ *
+ * const supported = isContractTypeSupported(["0x..."]);
+ * ```
+ */
+export function isContractTypeSupported(availableSelectors: string[]) {
+  return ContractTypeGenerated.isContractTypeSupported(availableSelectors);
+}
+
+/**
+ * Calls the "contractType" function on the contract.
+ * @param options - The options for the contractType function.
+ * @returns The parsed result of the function call.
+ * @extension THIRDWEB
+ * @example
+ * ```ts
+ * import { contractType } from "thirdweb/extensions/thirdweb";
+ *
+ * const result = await contractType({
+ *  contract,
+ * });
+ *
+ * ```
+ */
+export async function contractType(options: BaseTransactionOptions) {
+  try {
+    const rawContractType = await ContractTypeGenerated.contractType(options);
+    const utf8 = hexToString(rawContractType);
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: required here
+    return utf8.replace(/\x00/g, "") || "custom";
+  } catch {
+    // backwards compat, if this fails for any reason we assume it's a custom contract
+    return "custom";
+  }
+}

package/src/extensions/zksync/__generated__/ContractDeployer/events/ContractDeployed.ts

@@ -0,0 +1,55 @@
+import { prepareEvent } from "../../../../../event/prepare-event.js";
+import type { AbiParameterToPrimitiveType } from "abitype";
+
+/**
+ * Represents the filters for the "ContractDeployed" event.
+ */
+export type ContractDeployedEventFilters = Partial<{
+  deployerAddress: AbiParameterToPrimitiveType<{
+    type: "address";
+    name: "deployerAddress";
+    indexed: true;
+  }>;
+  bytecodeHash: AbiParameterToPrimitiveType<{
+    type: "bytes32";
+    name: "bytecodeHash";
+    indexed: true;
+  }>;
+  contractAddress: AbiParameterToPrimitiveType<{
+    type: "address";
+    name: "contractAddress";
+    indexed: true;
+  }>;
+}>;
+
+/**
+ * Creates an event object for the ContractDeployed event.
+ * @param filters - Optional filters to apply to the event.
+ * @returns The prepared event object.
+ * @extension ZKSYNC
+ * @example
+ * ```ts
+ * import { getContractEvents } from "thirdweb";
+ * import { contractDeployedEvent } from "thirdweb/extensions/zksync";
+ *
+ * const events = await getContractEvents({
+ * contract,
+ * events: [
+ *  contractDeployedEvent({
+ *  deployerAddress: ...,
+ *  bytecodeHash: ...,
+ *  contractAddress: ...,
+ * })
+ * ],
+ * });
+ * ```
+ */
+export function contractDeployedEvent(
+  filters: ContractDeployedEventFilters = {},
+) {
+  return prepareEvent({
+    signature:
+      "event ContractDeployed(address indexed deployerAddress, bytes32 indexed bytecodeHash, address indexed contractAddress)",
+    filters,
+  });
+}

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

@@ -288,6 +288,27 @@ export type ConnectButton_detailsModalOptions = {
    * Use custom avatar URL for the connected wallet image in the `ConnectButton` Details Modal, overriding ENS avatar or Blobbie icon.
    */
   connectedAccountAvatarUrl?: string;
+
+  /**
+   * Hide the "Send Funds" button in the `ConnectButton` Details Modal.
+   *
+   * By default the "Send Funds" button is shown.
+   */
+  hideSendFunds?: boolean;
+
+  /**
+   * Hide the "Receive Funds" button in the `ConnectButton` Details Modal.
+   *
+   * By default the "Receive Funds" button is shown.
+   */
+  hideReceiveFunds?: boolean;
+
+  /**
+   * Hide the "Buy Funds" button in the `ConnectButton` Details Modal.
+   *
+   * By default the "Buy Funds" button is shown.
+   */
+  hideBuyFunds?: boolean;
 };
 
 /**

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -19,7 +19,7 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  * Refer to [`SendTransactionConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionConfig) for more details.
  * @example
  *
- * ### Using a prepared contract call
+ * ### Sending a prepared contract call
  *
  * ```tsx
  * import { useSendTransaction } from "thirdweb/react";
@@ -83,11 +83,12 @@ import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js
  * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
  *
  * const onClick = () => {
+ *   // Send 0.1 SepoliaETH to an address
  *   const transaction = prepareTransaction({
- *       contract,
- *       to: "0x...",
- *       value: toWei("0.1"),
- *     }),
+ *     to: "0x...",
+ *     value: toWei("0.1"),
+ *     chain: sepolia,
+ *     client: thirdwebClient,
  *   });
  *   sendTx(transaction);
  * };

package/src/react/web/ui/ConnectWallet/ConnectButton.tsx

@@ -544,6 +544,9 @@ function ConnectButtonInner(
         showAllWallets: props.showAllWallets,
         walletConnect: props.walletConnect,
         wallets: props.wallets,
+        hideReceiveFunds: props.detailsModal?.hideReceiveFunds,
+        hideSendFunds: props.detailsModal?.hideSendFunds,
+        hideBuyFunds: props.detailsModal?.hideBuyFunds,
       }}
     />
   );

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -373,6 +373,11 @@ function DetailsModal(props: {
   const avatarSrc =
     props.detailsModal?.connectedAccountAvatarUrl ?? ensAvatarQuery.data;
 
+  const { hideSendFunds, hideReceiveFunds, hideBuyFunds } =
+    props.detailsModal || {};
+
+  const hideAllButtons = hideSendFunds && hideReceiveFunds && hideBuyFunds;
+
   const avatarContent = (
     <Container
       style={{
@@ -438,7 +443,16 @@ function DetailsModal(props: {
   let content = (
     <div>
       <Spacer y="xs" />
-      <Container p="lg" gap="sm" flex="row" center="y">
+      <Container
+        px="lg"
+        gap="sm"
+        flex="row"
+        center="y"
+        style={{
+          paddingTop: spacing.lg,
+          paddingBottom: hideAllButtons ? spacing.md : spacing.lg,
+        }}
+      >
         {props.detailsModal?.hideSwitchWallet ? (
           avatarContent
         ) : (
@@ -481,81 +495,99 @@ function DetailsModal(props: {
           <InAppWalletUserInfo client={client} locale={locale} />
         </Container>
       </Container>
-      <Container px="lg">
-        {/* Send, Receive, Swap */}
-        <Container
-          style={{
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr 1fr",
-            gap: spacing.xs,
-          }}
-        >
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("send");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PaperPlaneIcon
-                width={iconSize.sm}
-                height={iconSize.sm}
-                style={{
-                  transform: "translateY(-10%) rotate(-45deg) ",
-                }}
-              />
-            </Container>
-
-            {locale.send}
-          </Button>
 
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("receive");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PinBottomIcon width={iconSize.sm} height={iconSize.sm} />{" "}
+      {!hideAllButtons && (
+        <>
+          <Container px="lg">
+            {/* Send, Receive, Swap */}
+            <Container
+              style={{
+                display: "flex",
+                gap: spacing.xs,
+              }}
+            >
+              {!hideSendFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("send");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PaperPlaneIcon
+                      width={iconSize.sm}
+                      height={iconSize.sm}
+                      style={{
+                        transform: "translateY(-10%) rotate(-45deg) ",
+                      }}
+                    />
+                  </Container>
+
+                  {locale.send}
+                </Button>
+              )}
+
+              {!hideReceiveFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("receive");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PinBottomIcon
+                      width={iconSize.sm}
+                      height={iconSize.sm}
+                    />{" "}
+                  </Container>
+                  {locale.receive}{" "}
+                </Button>
+              )}
+
+              {!hideBuyFunds && (
+                <Button
+                  variant="outline"
+                  style={{
+                    fontSize: fontSize.sm,
+                    display: "flex",
+                    gap: spacing.xs,
+                    alignItems: "center",
+                    padding: spacing.sm,
+                    flex: 1,
+                  }}
+                  onClick={() => {
+                    setScreen("buy");
+                  }}
+                >
+                  <Container color="secondaryText" flex="row" center="both">
+                    <PlusIcon width={iconSize.sm} height={iconSize.sm} />
+                  </Container>
+                  {locale.buy}
+                </Button>
+              )}
             </Container>
-            {locale.receive}{" "}
-          </Button>
+          </Container>
+
+          <Spacer y="md" />
+        </>
+      )}
 
-          <Button
-            variant="outline"
-            style={{
-              fontSize: fontSize.sm,
-              display: "flex",
-              gap: spacing.xs,
-              alignItems: "center",
-              padding: spacing.sm,
-            }}
-            onClick={() => {
-              setScreen("buy");
-            }}
-          >
-            <Container color="secondaryText" flex="row" center="both">
-              <PlusIcon width={iconSize.sm} height={iconSize.sm} />
-            </Container>
-            {locale.buy}
-          </Button>
-        </Container>
-      </Container>
-      <Spacer y="md" />
       <Container px="md">
         <Container
           flex="column"
@@ -1122,6 +1154,9 @@ export type DetailsModalConnectOptions = {
   chains?: Chain[];
   recommendedWallets?: Wallet[];
   showAllWallets?: boolean;
+  hideSendFunds?: boolean;
+  hideReceiveFunds?: boolean;
+  hideBuyFunds?: boolean;
 };
 
 export type UseWalletDetailsModalOptions = {

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -59,7 +59,11 @@ import {
   type PaymentMethods,
   useEnabledPaymentMethods,
 } from "./main/useEnabledPaymentMethods.js";
-import { useUISelectionStates } from "./main/useUISelectionStates.js";
+import {
+  useFiatCurrencySelectionStates,
+  useFromTokenSelectionStates,
+  useToTokenSelectionStates,
+} from "./main/useUISelectionStates.js";
 import { openOnrampPopup } from "./openOnRamppopup.js";
 import { BuyTokenInput } from "./swap/BuyTokenInput.js";
 import { FiatFees, SwapFees } from "./swap/Fees.js";
@@ -134,33 +138,26 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     id: "main",
   });
 
-  const [hasEditedAmount, setHasEditedAmount] = useState(false);
-
-  const onDone = useCallback(() => {
-    setScreen({ id: "main" });
-    props.onDone();
-  }, [props.onDone]);
-
-  // UI selection
   const {
     tokenAmount,
     setTokenAmount,
     toChain,
     setToChain,
     deferredTokenAmount,
-    fromChain,
-    setFromChain,
     toToken,
     setToToken,
-    fromToken,
-    setFromToken,
-    selectedCurrency,
-    setSelectedCurrency,
-  } = useUISelectionStates({
+  } = useToTokenSelectionStates({
     payOptions,
     supportedDestinations,
   });
 
+  const [hasEditedAmount, setHasEditedAmount] = useState(false);
+
+  const onDone = useCallback(() => {
+    setScreen({ id: "main" });
+    props.onDone();
+  }, [props.onDone]);
+
   // check if the screen is expanded or not
 
   // update supportedSources whenever toToken or toChain is updated
@@ -186,21 +183,24 @@ function BuyScreenContent(props: BuyScreenContentProps) {
     }
 
     const supportedSources = supportedSourcesQuery.data;
-    if (supportedSources[0]?.chain) {
-      setFromChain(supportedSources[0]?.chain);
-    }
 
     return createSupportedTokens(
       supportedSources,
       payOptions,
       props.supportedTokens,
     );
-  }, [
-    props.supportedTokens,
-    supportedSourcesQuery.data,
-    payOptions,
-    setFromChain,
-  ]);
+  }, [props.supportedTokens, supportedSourcesQuery.data, payOptions]);
+
+  const { fromChain, setFromChain, fromToken, setFromToken } =
+    useFromTokenSelectionStates({
+      payOptions,
+      supportedSources: supportedSourcesQuery.data || [],
+    });
+
+  const { selectedCurrency, setSelectedCurrency } =
+    useFiatCurrencySelectionStates({
+      payOptions,
+    });
 
   const enabledPaymentMethods = useEnabledPaymentMethods({
     payOptions: props.payOptions,
@@ -1081,13 +1081,21 @@ function SwapScreenContent(props: {
 
   function showSwapFlow() {
     if (
-      (props.payOptions.mode === "transaction" ||
-        props.payOptions.mode === "direct_payment") &&
+      props.payOptions.mode === "direct_payment" &&
+      !isNotEnoughBalance &&
+      !swapRequired
+    ) {
+      // same currency, just direct transfer
+      setScreen({
+        id: "transfer-flow",
+      });
+    } else if (
+      props.payOptions.mode === "transaction" &&
       !isNotEnoughBalance &&
       !swapRequired
     ) {
       if (payer.account.address !== receiverAddress) {
-        // same currency, just transfer, but from another wallet
+        // needs transfer from another wallet before executing the transaction
         setScreen({
           id: "transfer-flow",
         });
@@ -1130,7 +1138,7 @@ function SwapScreenContent(props: {
                   Fees
                 </Text>
                 <Spacer y="lg" />
-                <SwapFees quote={quoteQuery.data} align="left" />
+                <SwapFees quote={quoteQuery.data} />
               </div>
             )}
           </Drawer>