thirdweb 5.50.0 → 5.50.1

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -15,25 +15,32 @@ import {
 } from "../fiat/currencies.js";
 import type { SupportedChainAndTokens } from "../swap/useSwapSupportedChains.js";
 
-// handle states for token and chain selection
+type SupportedSourcesInputData = {
+  chain: Chain;
+  tokens: {
+    address: string;
+    buyWithCryptoEnabled: boolean;
+    buyWithFiatEnabled: boolean;
+    name: string;
+    symbol: string;
+  }[];
+};
 
-export function useUISelectionStates(options: {
+// handle states for token and chain selection
+export function useToTokenSelectionStates(options: {
   payOptions: PayUIOptions;
   supportedDestinations: SupportedChainAndTokens;
 }) {
-  const activeChain = useActiveWalletChain();
   const { payOptions, supportedDestinations } = options;
-
+  // --------------------------------------------------------------------------
   // buy token amount ---------------------------------------------------------
   // NOTE - for transaction / direct payment modes, the token amount is set when the user tap continue
   const prefillBuy = (payOptions as FundWalletOptions)?.prefillBuy;
+  const activeChain = useActiveWalletChain();
   const initialTokenAmount = prefillBuy?.amount || "";
-
   const [tokenAmount, setTokenAmount] = useState<string>(initialTokenAmount);
   const deferredTokenAmount = useDebouncedValue(tokenAmount, 300);
 
-  // --------------------------------------------------------------------------
-
   // Destination chain and token selection -----------------------------------
   const [toChain, setToChain] = useState<Chain>(
     // use prefill chain if available
@@ -52,27 +59,73 @@ export function useUISelectionStates(options: {
       (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
       NATIVE_TOKEN,
   );
+
+  return {
+    toChain,
+    setToChain,
+    toToken,
+    setToToken,
+    tokenAmount,
+    setTokenAmount,
+    deferredTokenAmount,
+  };
+}
+
+export function useFromTokenSelectionStates(options: {
+  payOptions: PayUIOptions;
+  supportedSources: SupportedSourcesInputData[];
+}) {
+  const { payOptions, supportedSources } = options;
+
   // --------------------------------------------------------------------------
+  const firstSupportedSource = supportedSources?.length
+    ? supportedSources[0]
+    : undefined;
 
   // Source token and chain selection ---------------------------------------------------
-  const [fromChain, setFromChain] = useState<Chain>(
-    // use prefill chain if available
+  const [fromChain_, setFromChain] = useState<Chain>();
+
+  // use prefill chain if available
+  const fromChainDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.chain) ||
-      (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain) ||
-      // default to polygon
-      polygon,
-  );
+    (payOptions.mode === "transaction" && payOptions.transaction?.chain) ||
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo?.chain);
+
+  const fromChainFromApi = firstSupportedSource?.chain
+    ? firstSupportedSource.chain
+    : undefined;
 
-  const [fromToken, setFromToken] = useState<ERC20OrNativeToken>(
-    // use prefill token if available
+  const fromChain =
+    fromChain_ || fromChainDevSpecified || fromChainFromApi || polygon;
+
+  const [fromToken_, setFromToken] = useState<ERC20OrNativeToken>();
+
+  // use prefill token if available
+  const fromTokenDevSpecified =
     (payOptions.buyWithCrypto !== false &&
       payOptions.buyWithCrypto?.prefillSource?.token) ||
-      (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token) ||
-      // default to native token
-      NATIVE_TOKEN,
-  );
+    (payOptions.mode === "direct_payment" && payOptions.paymentInfo.token);
+
+  // May be updated in the future
+  const fromTokenFromApi = NATIVE_TOKEN;
+
+  // supported tokens query in here
+  const fromToken =
+    fromToken_ || fromTokenDevSpecified || fromTokenFromApi || NATIVE_TOKEN;
+
+  return {
+    fromChain,
+    setFromChain,
+    fromToken,
+    setFromToken,
+  };
+}
+
+export function useFiatCurrencySelectionStates(options: {
+  payOptions: PayUIOptions;
+}) {
+  const { payOptions } = options;
 
   // --------------------------------------------------------------------------
   const devSpecifiedDefaultCurrency =
@@ -89,20 +142,7 @@ export function useUISelectionStates(options: {
   );
 
   return {
-    tokenAmount,
-    setTokenAmount,
-
-    toChain,
-    setToChain,
-    deferredTokenAmount,
-    fromChain,
-    setFromChain,
-    toToken,
-    setToToken,
-    fromToken,
-    setFromToken,
     selectedCurrency,
-
     setSelectedCurrency,
   };
 }

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -27,7 +27,6 @@ import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
 import type { PayerInfo } from "../types.js";
-import { SwapFees } from "./Fees.js";
 import { formatSeconds } from "./formatSeconds.js";
 import { addPendingTx } from "./pendingSwapTx.js";
 
@@ -111,7 +110,7 @@ export function SwapConfirmationScreen(props: {
 
       {/* Fees  */}
       <ConfirmItem label="Fees">
-        <SwapFees quote={props.quote} align="right" />
+        <SwapFeesRightAligned quote={props.quote} />
       </ConfirmItem>
 
       {/* Time  */}
@@ -329,3 +328,39 @@ function ConfirmItem(props: {
     </>
   );
 }
+
+/**
+ * @internal
+ */
+export function SwapFeesRightAligned(props: {
+  quote: BuyWithCryptoQuote;
+}) {
+  return (
+    <Container
+      flex="column"
+      gap="xs"
+      style={{
+        alignItems: "flex-end",
+      }}
+    >
+      {props.quote.processingFees.map((fee) => {
+        const feeAmount = formatNumber(Number(fee.amount), 6);
+        return (
+          <Container
+            key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
+            flex="row"
+            gap="xxs"
+          >
+            <Text color="primaryText" size="sm">
+              {feeAmount === 0 ? "~" : ""}
+              {feeAmount} {fee.token.symbol}
+            </Text>
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
+            </Text>
+          </Container>
+        );
+      })}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx

@@ -10,14 +10,13 @@ import { Text } from "../../../../components/text.js";
  */
 export function SwapFees(props: {
   quote: BuyWithCryptoQuote;
-  align: "left" | "right";
 }) {
   return (
     <Container
       flex="column"
       gap="xs"
       style={{
-        alignItems: props.align === "right" ? "flex-end" : "flex-start",
+        alignItems: "flex-start",
       }}
     >
       {props.quote.processingFees.map((fee) => {
@@ -25,19 +24,15 @@ export function SwapFees(props: {
         return (
           <Container
             key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="column"
+            flex="row"
             gap="xxs"
           >
-            <Text color="primaryText" size="sm" style={{ textAlign: "right" }}>
+            <Text color="primaryText" size="sm">
               {feeAmount === 0 ? "~" : ""}
               {feeAmount} {fee.token.symbol}
             </Text>
-            <Text
-              color="secondaryText"
-              size="xs"
-              style={{ textAlign: "right" }}
-            >
-              ${(fee.amountUSDCents / 100).toFixed(2)}
+            <Text color="secondaryText" size="sm">
+              (${(fee.amountUSDCents / 100).toFixed(2)})
             </Text>
           </Container>
         );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx

@@ -1,4 +1,4 @@
-import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { CheckCircledIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
@@ -59,9 +59,12 @@ export function TransferConfirmationScreen(
   const [step, setStep] = useState<"approve" | "transfer" | "execute">(
     "transfer",
   );
-  const [status, setStatus] = useState<"idle" | "pending" | "error" | "done">(
-    "idle",
-  );
+  const [status, setStatus] = useState<
+    | { id: "idle" }
+    | { id: "pending" }
+    | { id: "error"; error: string }
+    | { id: "done" }
+  >({ id: "idle" });
   const { symbol } = useChainSymbol(chain);
 
   return (
@@ -156,19 +159,20 @@ export function TransferConfirmationScreen(
         </>
       )}
 
-      {status === "error" && (
+      {status.id === "error" && (
         <>
           <Container flex="row" gap="xs" center="both" color="danger">
-            <CrossCircledIcon width={iconSize.sm} height={iconSize.sm} />
-            <Text color="danger" size="sm">
-              {step === "transfer" ? "Failed to Transfer" : "Failed to Execute"}
+            <Text color="danger" size="sm" style={{ textAlign: "center" }}>
+              {step === "transfer"
+                ? `${status.error || "Failed to Transfer"}`
+                : "Failed to Execute"}
             </Text>
           </Container>
           <Spacer y="md" />
         </>
       )}
 
-      {!transactionMode && step === "execute" && status === "done" && (
+      {!transactionMode && step === "execute" && status.id === "done" && (
         <>
           <Container flex="row" gap="xs" center="both" color="success">
             <CheckCircledIcon width={iconSize.sm} height={iconSize.sm} />
@@ -193,7 +197,7 @@ export function TransferConfirmationScreen(
         <Button
           variant="accent"
           fullWidth
-          disabled={status === "pending"}
+          disabled={status.id === "pending"}
           onClick={async () => {
             if (step === "execute") {
               onDone();
@@ -201,7 +205,7 @@ export function TransferConfirmationScreen(
             }
 
             try {
-              setStatus("pending");
+              setStatus({ id: "pending" });
 
               // TRANSACTION MODE = transfer funds to another one of your wallets before executing the tx
               if (transactionMode) {
@@ -227,7 +231,7 @@ export function TransferConfirmationScreen(
                 });
                 // switch to execute step
                 setStep("execute");
-                setStatus("idle");
+                setStatus({ id: "idle" });
               } else {
                 const transferResponse = await getBuyWithCryptoTransfer({
                   client,
@@ -241,7 +245,6 @@ export function TransferConfirmationScreen(
                   purchaseData: undefined, // TODO (pay): add purchase data
                 });
 
-                console.log("transferResponse", transferResponse);
                 if (transferResponse.approval) {
                   setStep("approve");
                   // approve the transfer
@@ -260,21 +263,25 @@ export function TransferConfirmationScreen(
                 });
                 // switches to the status polling screen
                 setTransactionHash(tx.transactionHash);
-                setStatus("idle");
+                setStatus({ id: "idle" });
               }
-            } catch (e) {
+              // biome-ignore lint/suspicious/noExplicitAny: catch multiple errors
+            } catch (e: any) {
               console.error(e);
-              setStatus("error");
+              setStatus({
+                id: "error",
+                error: "error" in e ? e.error?.message : e?.message,
+              });
             }
           }}
           gap="xs"
         >
-          {step === "execute" && (status === "done" ? "Done" : "Continue")}
+          {step === "execute" && (status.id === "done" ? "Done" : "Continue")}
           {step === "transfer" &&
-            (status === "pending" ? "Confirming" : "Confirm")}
+            (status.id === "pending" ? "Confirming" : "Confirm")}
           {step === "approve" &&
-            (status === "pending" ? "Approving" : "Approve")}
-          {status === "pending" && (
+            (status.id === "pending" ? "Approving" : "Approve")}
+          {status.id === "pending" && (
             <Spinner size="sm" color="accentButtonText" />
           )}
         </Button>

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx

@@ -232,8 +232,9 @@ export async function getERC721ClaimTo({
 
   return claimTo({
     contract,
-    to: account?.address || "",
+    to: claimParams.to || account?.address || "",
     quantity: claimParams.quantity,
+    from: claimParams.from,
   });
 }
 
@@ -255,9 +256,10 @@ export async function getERC1155ClaimTo({
 
   return claimTo({
     contract,
-    to: account?.address || "",
+    to: claimParams.to || account?.address || "",
     quantity: claimParams.quantity,
     tokenId: claimParams.tokenId,
+    from: claimParams.from,
   });
 }
 
@@ -282,15 +284,17 @@ export async function getERC20ClaimTo({
   if ("quantity" in claimParams) {
     return claimTo({
       contract,
-      to: account?.address || "",
+      to: claimParams.to || account?.address || "",
       quantity: claimParams.quantity,
+      from: claimParams.from,
     });
   }
   if ("quantityInWei" in claimParams) {
     return claimTo({
       contract,
-      to: account?.address || "",
+      to: claimParams.to || account?.address || "",
       quantityInWei: claimParams.quantityInWei,
+      from: claimParams.from,
     });
   }
   throw new Error("Missing quantity or quantityInWei");

package/src/react/web/ui/prebuilt/thirdweb/ClaimButton/types.ts

@@ -1,20 +1,23 @@
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
+import type { ClaimToParams as ClaimToParams721 } from "../../../../../../extensions/erc721/drops/write/claimTo.js";
+import type { ClaimToParams as ClaimToParams1155 } from "../../../../../../extensions/erc1155/drops/write/claimTo.js";
 import type { TransactionButtonProps } from "../../../../../core/hooks/transaction/transaction-button-utils.js";
 
-export type Erc721ClaimParams = {
+export type Erc721ClaimParams = Omit<ClaimToParams721, "to"> & {
   type: "ERC721";
-  quantity: bigint;
+  to?: string;
 };
 
-export type Erc1155ClaimParams = {
+export type Erc1155ClaimParams = Omit<ClaimToParams1155, "to"> & {
   type: "ERC1155";
-  quantity: bigint;
-  tokenId: bigint;
+  to?: string;
 };
 
 export type Erc20ClaimParams = {
   type: "ERC20";
+  to?: string;
+  from?: string;
 } & ({ quantityInWei: bigint } | { quantity: string });
 
 export type ClaimParams =

package/src/stories/ConnectButton/hideButtons.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
+import { storyClient } from "../utils.js";
+
+const meta = {
+  title: "Connect/ConnectButton/hide buttons",
+  component: ConnectButton,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    client: storyClient,
+  },
+} satisfies Meta<typeof ConnectButton>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const HideSend: Story = {
+  args: {
+    detailsModal: {
+      hideSendFunds: true,
+    },
+  },
+};
+
+export const HideReceive: Story = {
+  args: {
+    detailsModal: {
+      hideReceiveFunds: true,
+    },
+  },
+};
+
+export const HideBuy: Story = {
+  args: {
+    detailsModal: {
+      hideBuyFunds: true,
+    },
+  },
+};
+
+export const HideSendReceive: Story = {
+  args: {
+    detailsModal: {
+      hideSendFunds: true,
+      hideReceiveFunds: true,
+    },
+  },
+};
+
+export const HideSendBuy: Story = {
+  args: {
+    detailsModal: {
+      hideSendFunds: true,
+      hideBuyFunds: true,
+    },
+  },
+};
+
+export const HideReceiveBuy: Story = {
+  args: {
+    detailsModal: {
+      hideReceiveFunds: true,
+      hideBuyFunds: true,
+    },
+  },
+};
+
+export const HideSendReceiveBuy: Story = {
+  args: {
+    detailsModal: {
+      hideSendFunds: true,
+      hideReceiveFunds: true,
+      hideBuyFunds: true,
+    },
+  },
+};
+
+export default meta;

package/src/stories/{ConnectButton.stories.ts → ConnectButton/themes.stories.tsx}

@@ -1,14 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
-import { storyClient } from "./utils.js";
+import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
+import { storyClient } from "../utils.js";
 
 const meta = {
-  title: "Connect/ConnectButton",
+  title: "Connect/ConnectButton/themes",
   component: ConnectButton,
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   args: {
     client: storyClient,
   },

package/src/transaction/actions/send-transaction.ts

@@ -144,6 +144,17 @@ export async function sendTransaction(
     await account.onTransactionRequested(transaction);
   }
 
+  // if zksync transaction params are set, send with eip712
+  if (options.transaction.eip712) {
+    const { sendEip712Transaction } = await import(
+      "./zksync/send-eip712-transaction.js"
+    );
+    return sendEip712Transaction({
+      account,
+      transaction,
+    });
+  }
+
   const serializableTransaction = await toSerializableTransaction({
     transaction: transaction,
     from: account.address,

package/src/transaction/actions/to-serializable-transaction.test.ts

@@ -3,9 +3,7 @@ import { beforeAll, describe, expect, test } from "vitest";
 import { TEST_WALLET_B } from "../../../test/src/addresses.js";
 import { FORKED_ETHEREUM_CHAIN } from "../../../test/src/chains.js";
 import { TEST_CLIENT } from "../../../test/src/test-clients.js";
-
 import { arbitrumSepolia } from "../../chains/chain-definitions/arbitrum-sepolia.js";
-import { ZERO_ADDRESS } from "../../constants/addresses.js";
 import { toWei } from "../../utils/units.js";
 import {
   type PreparedTransaction,
@@ -403,15 +401,16 @@ describe.runIf(process.env.TW_SECRET_KEY)("toSerializableTransaction", () => {
     });
   });
 
+  // skipping this test for now, it fails when batching eth_estimateGas with eth_maxFeePerGas together on arbitrumSepolia
+  // works if you run it individually, but when run in parallel the batching kicks in and it fails
   test("should respect 0 maxPriorityFeePerGas chains", async () => {
     const serializableTransaction = await toSerializableTransaction({
       transaction: prepareTransaction({
         to: TEST_WALLET_B,
         chain: arbitrumSepolia,
-        value: toWei("0.000001"),
+        value: 0n,
         client: TEST_CLIENT,
       }),
-      from: ZERO_ADDRESS,
     });
 
     // gasPrice should be undefined for arbSepolia which has 0 maxPriorityFeePerGas

package/src/transaction/actions/zksync/getEip721Domain.ts

@@ -1,5 +1,7 @@
 import type { TransactionSerializable } from "viem";
+import { hashBytecode } from "viem/zksync";
 import type { Address } from "../../../utils/address.js";
+import { toHex } from "../../../utils/encoding/hex.js";
 import type {
   EIP712SerializedTransaction,
   EIP712TransactionOptions,
@@ -56,6 +58,7 @@ function transactionToMessage(
     paymasterInput,
     gasPerPubdata,
     data,
+    factoryDeps,
   } = transaction;
 
   return {
@@ -70,8 +73,7 @@ function transactionToMessage(
     nonce: nonce ? BigInt(nonce) : 0n,
     value: value ?? 0n,
     data: data ? data : "0x0",
-    // TODO suport factoryDeps
-    factoryDeps: [],
+    factoryDeps: factoryDeps?.map((dep) => toHex(hashBytecode(dep))) ?? [],
     paymasterInput: paymasterInput ? paymasterInput : "0x",
   };
 }

package/src/transaction/actions/zksync/send-eip712-transaction.test.ts

@@ -4,7 +4,8 @@ import {
   TEST_ACCOUNT_A,
   TEST_ACCOUNT_B,
 } from "../../../../test/src/test-wallets.js";
-import { defineChain } from "../../../chains/utils.js";
+import { zkSyncSepolia } from "../../../chains/chain-definitions/zksync-sepolia.js";
+import { deployPublishedContract } from "../../../extensions/prebuilts/deploy-published.js";
 import { prepareTransaction } from "../../prepare-transaction.js";
 import { sendEip712Transaction } from "./send-eip712-transaction.js";
 
@@ -12,7 +13,7 @@ describe("sendEip712Transaction", () => {
   // re-enable for testing, but disable for CI since it requires testnet funds
   it.skip("should send eip712 transaction", async () => {
     const transaction = prepareTransaction({
-      chain: defineChain(300),
+      chain: zkSyncSepolia, // TODO make zksync fork chain work
       client: TEST_CLIENT,
       value: 0n,
       to: TEST_ACCOUNT_B.address,
@@ -28,4 +29,28 @@ describe("sendEip712Transaction", () => {
     });
     expect(res.transactionHash.length).toBe(66);
   });
+
+  it.skip("should deploy a published autofactory contract on zksync", async () => {
+    const address = await deployPublishedContract({
+      client: TEST_CLIENT,
+      chain: zkSyncSepolia, // TODO make zksync fork chain work
+      account: TEST_ACCOUNT_A,
+      contractId: "DropERC1155",
+      contractParams: [
+        TEST_ACCOUNT_A.address, // defaultAdmin
+        "test", // name
+        "", // symbol
+        "", // contractURI
+        [], // trustedForwarders
+        TEST_ACCOUNT_A.address, // saleRecipient
+        TEST_ACCOUNT_A.address, // royaltyRecipient
+        0n, // royaltyBps
+        0n, // platformFeeBps
+        TEST_ACCOUNT_A.address, // platformFeeRecipient
+      ],
+    });
+    console.log("deployed address", address);
+    expect(address).toBeDefined();
+    expect(address.length).toBe(42);
+  });
 });