thirdweb 5.105.6-nightly-f1a965b0465f95864cb46c553a95323555c1b5c6-20250704000423 → 5.105.6

package/src/extensions/stylus/__generated__/IStylusDeployer/write/deploy.ts

@@ -0,0 +1,178 @@
+import type { AbiParameterToPrimitiveType } from "abitype";
+import { prepareContractCall } from "../../../../../transaction/prepare-contract-call.js";
+import type {
+  BaseTransactionOptions,
+  WithOverrides,
+} from "../../../../../transaction/types.js";
+import { encodeAbiParameters } from "../../../../../utils/abi/encodeAbiParameters.js";
+import { detectMethod } from "../../../../../utils/bytecode/detectExtension.js";
+import { once } from "../../../../../utils/promise/once.js";
+
+/**
+ * Represents the parameters for the "deploy" function.
+ */
+export type DeployParams = WithOverrides<{
+  bytecode: AbiParameterToPrimitiveType<{ type: "bytes"; name: "bytecode" }>;
+  initData: AbiParameterToPrimitiveType<{ type: "bytes"; name: "initData" }>;
+  initValue: AbiParameterToPrimitiveType<{
+    type: "uint256";
+    name: "initValue";
+  }>;
+  salt: AbiParameterToPrimitiveType<{ type: "bytes32"; name: "salt" }>;
+}>;
+
+export const FN_SELECTOR = "0xa9a8e4e9" as const;
+const FN_INPUTS = [
+  {
+    name: "bytecode",
+    type: "bytes",
+  },
+  {
+    name: "initData",
+    type: "bytes",
+  },
+  {
+    name: "initValue",
+    type: "uint256",
+  },
+  {
+    name: "salt",
+    type: "bytes32",
+  },
+] as const;
+const FN_OUTPUTS = [
+  {
+    type: "address",
+  },
+] as const;
+
+/**
+ * Checks if the `deploy` 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 `deploy` method is supported.
+ * @extension STYLUS
+ * @example
+ * ```ts
+ * import { isDeploySupported } from "thirdweb/extensions/stylus";
+ *
+ * const supported = isDeploySupported(["0x..."]);
+ * ```
+ */
+export function isDeploySupported(availableSelectors: string[]) {
+  return detectMethod({
+    availableSelectors,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+  });
+}
+
+/**
+ * Encodes the parameters for the "deploy" function.
+ * @param options - The options for the deploy function.
+ * @returns The encoded ABI parameters.
+ * @extension STYLUS
+ * @example
+ * ```ts
+ * import { encodeDeployParams } from "thirdweb/extensions/stylus";
+ * const result = encodeDeployParams({
+ *  bytecode: ...,
+ *  initData: ...,
+ *  initValue: ...,
+ *  salt: ...,
+ * });
+ * ```
+ */
+export function encodeDeployParams(options: DeployParams) {
+  return encodeAbiParameters(FN_INPUTS, [
+    options.bytecode,
+    options.initData,
+    options.initValue,
+    options.salt,
+  ]);
+}
+
+/**
+ * Encodes the "deploy" function into a Hex string with its parameters.
+ * @param options - The options for the deploy function.
+ * @returns The encoded hexadecimal string.
+ * @extension STYLUS
+ * @example
+ * ```ts
+ * import { encodeDeploy } from "thirdweb/extensions/stylus";
+ * const result = encodeDeploy({
+ *  bytecode: ...,
+ *  initData: ...,
+ *  initValue: ...,
+ *  salt: ...,
+ * });
+ * ```
+ */
+export function encodeDeploy(options: DeployParams) {
+  // we do a "manual" concat here to avoid the overhead of the "concatHex" function
+  // we can do this because we know the specific formats of the values
+  return (FN_SELECTOR +
+    encodeDeployParams(options).slice(2)) as `${typeof FN_SELECTOR}${string}`;
+}
+
+/**
+ * Prepares a transaction to call the "deploy" function on the contract.
+ * @param options - The options for the "deploy" function.
+ * @returns A prepared transaction object.
+ * @extension STYLUS
+ * @example
+ * ```ts
+ * import { sendTransaction } from "thirdweb";
+ * import { deploy } from "thirdweb/extensions/stylus";
+ *
+ * const transaction = deploy({
+ *  contract,
+ *  bytecode: ...,
+ *  initData: ...,
+ *  initValue: ...,
+ *  salt: ...,
+ *  overrides: {
+ *    ...
+ *  }
+ * });
+ *
+ * // Send the transaction
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function deploy(
+  options: BaseTransactionOptions<
+    | DeployParams
+    | {
+        asyncParams: () => Promise<DeployParams>;
+      }
+  >,
+) {
+  const asyncOptions = once(async () => {
+    return "asyncParams" in options ? await options.asyncParams() : options;
+  });
+
+  return prepareContractCall({
+    accessList: async () => (await asyncOptions()).overrides?.accessList,
+    authorizationList: async () =>
+      (await asyncOptions()).overrides?.authorizationList,
+    contract: options.contract,
+    erc20Value: async () => (await asyncOptions()).overrides?.erc20Value,
+    extraGas: async () => (await asyncOptions()).overrides?.extraGas,
+    gas: async () => (await asyncOptions()).overrides?.gas,
+    gasPrice: async () => (await asyncOptions()).overrides?.gasPrice,
+    maxFeePerGas: async () => (await asyncOptions()).overrides?.maxFeePerGas,
+    maxPriorityFeePerGas: async () =>
+      (await asyncOptions()).overrides?.maxPriorityFeePerGas,
+    method: [FN_SELECTOR, FN_INPUTS, FN_OUTPUTS] as const,
+    nonce: async () => (await asyncOptions()).overrides?.nonce,
+    params: async () => {
+      const resolvedOptions = await asyncOptions();
+      return [
+        resolvedOptions.bytecode,
+        resolvedOptions.initData,
+        resolvedOptions.initValue,
+        resolvedOptions.salt,
+      ] as const;
+    },
+    value: async () => (await asyncOptions()).overrides?.value,
+  });
+}

package/src/extensions/stylus/write/activateStylusContract.ts

@@ -12,7 +12,7 @@ import { encode } from "../../../transaction/actions/encode.js";
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
 import { activateProgram } from "../__generated__/IArbWasm/write/activateProgram.js";
 
-const ARB_WASM_ADDRESS = "0x0000000000000000000000000000000000000071";
+export const ARB_WASM_ADDRESS = "0x0000000000000000000000000000000000000071";
 
 export type ActivateStylusContractOptions = {
   chain: Chain;

package/src/extensions/stylus/write/deployWithStylusConstructor.ts

@@ -0,0 +1,70 @@
+import type { Abi, AbiConstructor } from "abitype";
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { getContract } from "../../../contract/contract.js";
+import { FN_SELECTOR } from "../../../extensions/stylus/__generated__/IStylusConstructor/write/stylus_constructor.js";
+import { encodeAbiParameters } from "../../../utils/abi/encodeAbiParameters.js";
+import { normalizeFunctionParams } from "../../../utils/abi/normalizeFunctionParams.js";
+import { toHex } from "../../../utils/encoding/hex.js";
+import { deploy } from "../__generated__/IStylusDeployer/write/deploy.js";
+
+const STYLUS_DEPLOYER = "0xcEcba2F1DC234f70Dd89F2041029807F8D03A990";
+
+export type DeployWithStylusConstructorOptions = {
+  chain: Chain;
+  client: ThirdwebClient;
+  bytecode: `0x${string}`;
+  constructorParams: Record<string, unknown>;
+  abi: Abi;
+};
+
+/**
+ * Deploy stylus contract with constructor params
+ * @param options - The options deploying contract with constructor
+ * @returns Prepared transaction to call stylus deployer
+ * @example
+ * ```ts
+ * import { deployWithStylusConstructor } from "thirdweb/stylus";
+ * const transaction = deployWithStylusConstructor({
+ *  client,
+ *  chain,
+ *  bytecode,
+ *  constructorParams,
+ *  abi
+ * });
+ * await sendTransaction({ transaction, account });
+ * ```
+ */
+export function deployWithStylusConstructor(
+  options: DeployWithStylusConstructorOptions,
+) {
+  const { chain, client, constructorParams, abi, bytecode } = options;
+  const bytecodeHex = bytecode.startsWith("0x")
+    ? bytecode
+    : (`0x${bytecode}` as `0x${string}`);
+
+  const stylusDeployer = getContract({
+    address: STYLUS_DEPLOYER,
+    chain,
+    client,
+  });
+
+  const constructorAbi = abi.find((a) => a.type === "constructor") as
+    | AbiConstructor
+    | undefined;
+
+  const normalized = normalizeFunctionParams(constructorAbi, constructorParams);
+  const constructorCalldata = (FN_SELECTOR +
+    encodeAbiParameters(
+      constructorAbi?.inputs || [], // Leave an empty array if there's no constructor
+      normalized,
+    ).slice(2)) as `${typeof FN_SELECTOR}${string}`;
+
+  return deploy({
+    bytecode: bytecodeHex,
+    contract: stylusDeployer,
+    initData: constructorCalldata,
+    initValue: 0n,
+    salt: toHex(0, { size: 32 }),
+  });
+}

package/src/extensions/stylus/write/isContractActivated.ts

@@ -0,0 +1,102 @@
+import { keccak256 } from "viem";
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import { getContract } from "../../../contract/contract.js";
+import { codehashVersion } from "../__generated__/IArbWasm/read/codehashVersion.js";
+import { ARB_WASM_ADDRESS } from "./activateStylusContract.js";
+
+export type IsContractActivatedOptions = {
+  chain: Chain;
+  client: ThirdwebClient;
+  bytecode: `0x${string}`;
+};
+
+export async function isContractActivated(
+  options: IsContractActivatedOptions,
+): Promise<boolean> {
+  const { chain, client, bytecode } = options;
+  const arbWasmPrecompile = getContract({
+    address: ARB_WASM_ADDRESS,
+    chain,
+    client,
+  });
+
+  try {
+    await codehashVersion({
+      codehash: keccak256(extractRuntimeBytecode(bytecode)),
+      contract: arbWasmPrecompile,
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function extractRuntimeBytecode(deployInput: string | Uint8Array): Uint8Array {
+  // normalise input
+  const deploy: Uint8Array =
+    typeof deployInput === "string" ? hexToBytes(deployInput) : deployInput;
+
+  // the contract_deployment_calldata helper emits 42-byte prelude + 1-byte version  =>  43 bytes total
+  // ref: https://github.com/OffchainLabs/cargo-stylus/blob/main/main/src/deploy/mod.rs#L305
+  const PRELUDE_LEN = 42;
+  const TOTAL_FIXED = PRELUDE_LEN + 1; // +1 version byte
+
+  if (deploy.length < TOTAL_FIXED) {
+    throw new Error("Deployment bytecode too short");
+  }
+  if (deploy[0] !== 0x7f) {
+    throw new Error(
+      "Missing 0x7f PUSH32 - not produced by contract_deployment_calldata",
+    );
+  }
+
+  // read length
+  const codeLenBytes = deploy.slice(1, 33);
+  let codeLen = 0n;
+  for (const b of codeLenBytes) codeLen = (codeLen << 8n) | BigInt(b);
+
+  if (codeLen > BigInt(Number.MAX_SAFE_INTEGER)) {
+    throw new Error("Runtime code length exceeds JS safe integer range");
+  }
+
+  // pattern sanity-check
+  const EXPECTED = [
+    0x80, // DUP1
+    0x60,
+    0x2b, // PUSH1 0x2b (42 + 1)
+    0x60,
+    0x00, // PUSH1 0
+    0x39, // CODECOPY
+    0x60,
+    0x00, // PUSH1 0
+    0xf3, // RETURN
+    0x00, // version
+  ] as const;
+  for (let i = 0; i < EXPECTED.length; i++) {
+    if (deploy[33 + i] !== EXPECTED[i]) {
+      throw new Error("Prelude bytes do not match expected pattern");
+    }
+  }
+
+  // slice out runtime code
+  const start = TOTAL_FIXED;
+  const end = start + Number(codeLen);
+  if (deploy.length < end) {
+    throw new Error("Deployment bytecode truncated - runtime code incomplete");
+  }
+
+  return deploy.slice(start, end);
+}
+
+function hexToBytes(hex: string): Uint8Array {
+  const normalized = hex.startsWith("0x") ? hex.slice(2) : hex;
+  if (normalized.length % 2 !== 0) {
+    throw new Error("Hex string must have an even length");
+  }
+  const bytes = new Uint8Array(normalized.length / 2);
+  for (let i = 0; i < bytes.length; i++) {
+    bytes[i] = parseInt(normalized.slice(i * 2, i * 2 + 2), 16);
+  }
+  return bytes;
+}

package/src/react/core/hooks/usePaymentMethods.ts

@@ -122,9 +122,6 @@ export function usePaymentMethods(options: {
         page += 1;
       }
 
-      const requiredDollarAmount =
-        Number.parseFloat(destinationAmount) * destinationToken.priceUsd;
-
       // sort by dollar balance descending
       owned.sort((a, b) => {
         const aDollarBalance =
@@ -140,13 +137,6 @@ export function usePaymentMethods(options: {
 
       for (const b of owned) {
         if (b.originToken && b.balance > 0n) {
-          const dollarBalance =
-            Number.parseFloat(toTokens(b.balance, b.originToken.decimals)) *
-            b.originToken.priceUsd;
-          if (b.originToken.priceUsd && dollarBalance < requiredDollarAmount) {
-            continue;
-          }
-
           if (
             includeDestinationToken &&
             b.originToken.address.toLowerCase() ===

package/src/react/native/ui/AutoConnect/AutoConnect.tsx

@@ -36,5 +36,5 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  */
 export function AutoConnect(props: AutoConnectProps) {
   useAutoConnect(props);
-  return <></>;
+  return null;
 }

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

@@ -50,15 +50,13 @@ export const RNImage = (props: ImageInfo) => {
     case "url":
     case "image":
       return (
-        <>
-          <Image
-            height={size}
-            loadingIndicatorSource={{ uri: placeholder }}
-            source={{ uri: image }}
-            style={[{ borderRadius: radius.md }]}
-            width={size}
-          />
-        </>
+        <Image
+          height={size}
+          loadingIndicatorSource={{ uri: placeholder }}
+          source={{ uri: image }}
+          style={[{ borderRadius: radius.md }]}
+          width={size}
+        />
       );
     case "xml":
       return <SvgXml color={color} height={size} width={size} xml={image} />;

package/src/react/web/ui/AutoConnect/AutoConnect.tsx

@@ -41,5 +41,5 @@ import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
  */
 export function AutoConnect(props: AutoConnectProps) {
   useAutoConnect(props);
-  return <></>;
+  return null;
 }

package/src/react/web/ui/Bridge/FundWallet.tsx

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
 import { useRef, useState } from "react";
 import type { Token } from "../../../../bridge/types/Token.js";
@@ -163,7 +164,6 @@ export function FundWallet({
                   focusInput();
                 }
               }}
-              // biome-ignore lint/a11y/useSemanticElements: FIXME
               role="button"
               style={{ cursor: "text" }}
               tabIndex={0}

package/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -84,113 +84,111 @@ export function FiatProviderSelection({
   // TODO: add a "remember my choice" checkbox
 
   return (
-    <>
-      <Container flex="column" gap="sm">
-        {quotes.length > 0 ? (
-          quotes
-            .sort((a, b) => a.currencyAmount - b.currencyAmount)
-            .map((quote, index) => {
-              const provider = PROVIDERS.find(
-                (p) => p.id === quote.intent.onramp,
-              );
-              if (!provider) {
-                return null;
-              }
+    <Container flex="column" gap="sm">
+      {quotes.length > 0 ? (
+        quotes
+          .sort((a, b) => a.currencyAmount - b.currencyAmount)
+          .map((quote, index) => {
+            const provider = PROVIDERS.find(
+              (p) => p.id === quote.intent.onramp,
+            );
+            if (!provider) {
+              return null;
+            }
 
-              return (
-                <Container
-                  animate="fadein"
-                  key={provider.id}
+            return (
+              <Container
+                animate="fadein"
+                key={provider.id}
+                style={{
+                  animationDelay: `${index * 100}ms`,
+                }}
+              >
+                <Button
+                  fullWidth
+                  onClick={() => onProviderSelected(provider.id)}
                   style={{
-                    animationDelay: `${index * 100}ms`,
+                    backgroundColor: theme.colors.tertiaryBg,
+                    border: `1px solid ${theme.colors.borderColor}`,
+                    borderRadius: radius.md,
+                    padding: `${spacing.sm} ${spacing.md}`,
+                    textAlign: "left",
                   }}
+                  variant="secondary"
                 >
-                  <Button
-                    fullWidth
-                    onClick={() => onProviderSelected(provider.id)}
-                    style={{
-                      backgroundColor: theme.colors.tertiaryBg,
-                      border: `1px solid ${theme.colors.borderColor}`,
-                      borderRadius: radius.md,
-                      padding: `${spacing.sm} ${spacing.md}`,
-                      textAlign: "left",
-                    }}
-                    variant="secondary"
+                  <Container
+                    flex="row"
+                    gap="sm"
+                    style={{ alignItems: "center", width: "100%" }}
                   >
                     <Container
-                      flex="row"
-                      gap="sm"
-                      style={{ alignItems: "center", width: "100%" }}
+                      style={{
+                        alignItems: "center",
+                        borderRadius: "50%",
+                        display: "flex",
+                        height: `${iconSize.md}px`,
+                        justifyContent: "center",
+                        overflow: "hidden",
+                        padding: spacing.xs,
+                        width: `${iconSize.md}px`,
+                      }}
                     >
-                      <Container
-                        style={{
-                          alignItems: "center",
-                          borderRadius: "50%",
-                          display: "flex",
-                          height: `${iconSize.md}px`,
-                          justifyContent: "center",
-                          overflow: "hidden",
-                          padding: spacing.xs,
-                          width: `${iconSize.md}px`,
-                        }}
+                      <Img
+                        alt={provider.name}
+                        client={client}
+                        height={iconSize.md}
+                        src={provider.iconUri}
+                        width={iconSize.md}
+                      />
+                    </Container>
+                    <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                      <Text
+                        color="primaryText"
+                        size="md"
+                        style={{ fontWeight: 600 }}
                       >
-                        <Img
-                          alt={provider.name}
-                          client={client}
-                          height={iconSize.md}
-                          src={provider.iconUri}
-                          width={iconSize.md}
-                        />
-                      </Container>
-                      <Container flex="column" gap="3xs" style={{ flex: 1 }}>
-                        <Text
-                          color="primaryText"
-                          size="md"
-                          style={{ fontWeight: 600 }}
-                        >
-                          {provider.name}
-                        </Text>
-                      </Container>
-                      <Container
-                        flex="column"
-                        gap="3xs"
-                        style={{ alignItems: "flex-end" }}
+                        {provider.name}
+                      </Text>
+                    </Container>
+                    <Container
+                      flex="column"
+                      gap="3xs"
+                      style={{ alignItems: "flex-end" }}
+                    >
+                      <Text
+                        color="primaryText"
+                        size="sm"
+                        style={{ fontWeight: 500 }}
                       >
-                        <Text
-                          color="primaryText"
-                          size="sm"
-                          style={{ fontWeight: 500 }}
-                        >
-                          $
-                          {quote.currencyAmount.toLocaleString(undefined, {
-                            maximumFractionDigits: 2,
-                            minimumFractionDigits: 2,
-                          })}{" "}
-                          {quote.currency}
-                        </Text>
-                        <Text color="secondaryText" size="xs">
-                          {toTokens(
-                            quote.destinationAmount,
-                            quote.destinationToken.decimals,
-                          )}{" "}
-                          {quote.destinationToken.symbol}
-                        </Text>
-                      </Container>
+                        $
+                        {quote.currencyAmount.toLocaleString(undefined, {
+                          maximumFractionDigits: 2,
+                          minimumFractionDigits: 2,
+                        })}{" "}
+                        {quote.currency}
+                      </Text>
+                      <Text color="secondaryText" size="xs">
+                        {toTokens(
+                          quote.destinationAmount,
+                          quote.destinationToken.decimals,
+                        )}{" "}
+                        {quote.destinationToken.symbol}
+                      </Text>
                     </Container>
-                  </Button>
-                </Container>
-              );
-            })
-        ) : (
-          <Container center="both" flex="column" style={{ minHeight: "120px" }}>
-            <Spinner color="secondaryText" size="lg" />
-            <Spacer y="sm" />
-            <Text center color="secondaryText" size="sm">
-              Generating quotes...
-            </Text>
-          </Container>
-        )}
-      </Container>
-    </>
+                  </Container>
+                </Button>
+              </Container>
+            );
+          })
+      ) : (
+        <Container center="both" flex="column" style={{ minHeight: "120px" }}>
+          <Spinner color="secondaryText" size="lg" />
+          <Spacer y="sm" />
+          <Text center color="secondaryText" size="sm">
+            Generating quotes...
+          </Text>
+        </Container>
+      )}
+    </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/screens/WalletConnectDisconnectScreen.tsx

@@ -1,3 +1,5 @@
+/** biome-ignore-all lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */
+
 "use client";
 import { ReloadIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -38,7 +40,6 @@ export function WalletConnectDisconnectScreen(props: {
       >
         <Container py="lg" style={{ position: "relative" }}>
           <Container py="md">
-            {/** biome-ignore lint/nursery/useUniqueElementIds: "id" is not a html attribute here - TODO: stop using 'id' as a prop on JSX elements */}
             <WalletLogoSpinner
               client={props.client}
               error={!!props.error}