thirdweb 5.110.0 → 5.110.2-nightly-630edadcec2c777cfd4bfef4871aff396e98291e-20251024000336

package/src/stories/theme.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta } from "@storybook/react-vite";
+import {
+  darkThemeObj,
+  lightThemeObj,
+  type Theme,
+} from "../react/core/design-system/index.js";
+import { StyledDiv } from "../react/web/ui/design-system/elements.js";
+
+const meta: Meta = {
+  title: "theme",
+};
+export default meta;
+
+export function Dark() {
+  return <Variant theme={darkThemeObj} />;
+}
+
+export function Light() {
+  return <Variant theme={lightThemeObj} />;
+}
+
+function Variant(props: { theme: Theme }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        maxWidth: "700px",
+        margin: "0 auto",
+        backgroundColor: props.theme.colors.modalBg,
+        padding: "14px",
+        lineHeight: "1.5",
+        borderRadius: "8px",
+      }}
+    >
+      <ColorPairTest theme={props.theme} text="primaryText" />
+      <ColorPairTest theme={props.theme} text="secondaryText" />
+      <ColorPairTest theme={props.theme} text="accentText" />
+      <ColorPairTest theme={props.theme} text="danger" />
+      <ColorPairTest theme={props.theme} text="success" />
+
+      <ColorPairTest theme={props.theme} bg="tooltipBg" text="tooltipText" />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="accentButtonBg"
+        text="accentButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="primaryButtonBg"
+        text="primaryButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="selectedTextBg"
+        text="selectedTextColor"
+      />
+
+      <ColorPairTest theme={props.theme} bg="skeletonBg" text="primaryText" />
+
+      <ColorPairTest theme={props.theme} bg="scrollbarBg" text="primaryText" />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="inputAutofillBg"
+        text="primaryText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="tertiaryBg"
+        hoverBg="secondaryButtonHoverBg"
+        text="primaryText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="secondaryButtonBg"
+        hoverBg="secondaryButtonHoverBg"
+        text="secondaryButtonText"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        hoverBg="secondaryIconHoverBg"
+        text="secondaryIconColor"
+        hoverText="secondaryIconHoverColor"
+      />
+
+      <ColorPairTest
+        theme={props.theme}
+        bg="connectedButtonBg"
+        text="primaryText"
+        hoverBg="connectedButtonBgHover"
+      />
+
+      <div
+        style={{
+          border: `1px solid ${props.theme.colors.borderColor}`,
+          padding: "20px",
+          borderRadius: "8px",
+          color: props.theme.colors.primaryText,
+        }}
+      >
+        border
+      </div>
+
+      <div
+        style={{
+          border: `1px solid ${props.theme.colors.separatorLine}`,
+          padding: "20px",
+          borderRadius: "8px",
+          color: props.theme.colors.primaryText,
+        }}
+      >
+        separatorLine
+      </div>
+    </div>
+  );
+}
+
+function ColorPairTest(props: {
+  theme: Theme;
+  bg?: keyof Theme["colors"];
+  text: keyof Theme["colors"];
+  hoverBg?: keyof Theme["colors"];
+  hoverText?: keyof Theme["colors"];
+}) {
+  return (
+    <HoverBg
+      style={{ display: "flex", flexDirection: "column", gap: "10px" }}
+      bg={props.bg ? props.theme.colors[props.bg] : undefined}
+      hoverBg={props.hoverBg ? props.theme.colors[props.hoverBg] : undefined}
+      text={props.theme.colors[props.text]}
+    >
+      {[props.bg, props.hoverBg, props.text].filter(Boolean).join(", ")}
+    </HoverBg>
+  );
+}
+const HoverBg = StyledDiv(
+  (props: {
+    bg?: string;
+    hoverBg?: string;
+    text: string;
+    hoverText?: string;
+  }) => {
+    return {
+      backgroundColor: props.bg ?? "transparent",
+      padding: "20px",
+      borderRadius: "8px",
+      fontSize: "16px",
+      fontWeight: 400,
+      color: props.text,
+      "&:hover": props.hoverBg
+        ? {
+            backgroundColor: props.hoverBg,
+          }
+        : undefined,
+    };
+  },
+);

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.110.0";
+export const version = "5.110.2-nightly-630edadcec2c777cfd4bfef4871aff396e98291e-20251024000336";

package/src/wallets/in-app/core/eip5792/in-app-wallet-calls.ts

@@ -4,6 +4,7 @@ import { eth_getTransactionReceipt } from "../../../../rpc/actions/eth_getTransa
 import { getRpcClient } from "../../../../rpc/rpc.js";
 import { sendAndConfirmTransaction } from "../../../../transaction/actions/send-and-confirm-transaction.js";
 import { sendBatchTransaction } from "../../../../transaction/actions/send-batch-transaction.js";
+import type { SendTransactionOptions } from "../../../../transaction/actions/send-transaction.js";
 import { LruMap } from "../../../../utils/caching/lru.js";
 import type { Hex } from "../../../../utils/encoding/hex.js";
 import { randomBytesHex } from "../../../../utils/random.js";
@@ -22,21 +23,29 @@ const bundlesToTransactions = new LruMap<Hex[]>(1000);
 export async function inAppWalletSendCalls(args: {
   account: Account;
   calls: PreparedSendCall[];
+  chain: Chain;
 }): Promise<string> {
   const { account, calls } = args;
 
+  const transactions: SendTransactionOptions["transaction"][] = calls.map(
+    (call) => ({
+      ...call,
+      chain: args.chain,
+    }),
+  );
+
   const hashes: Hex[] = [];
   const id = randomBytesHex(65);
   bundlesToTransactions.set(id, hashes);
   if (account.sendBatchTransaction) {
     const receipt = await sendBatchTransaction({
       account,
-      transactions: calls,
+      transactions,
     });
     hashes.push(receipt.transactionHash);
     bundlesToTransactions.set(id, hashes);
   } else {
-    for (const tx of calls) {
+    for (const tx of transactions) {
       const receipt = await sendAndConfirmTransaction({
         account,
         transaction: tx,

package/src/wallets/in-app/core/eip7702/minimal-account.ts

@@ -341,6 +341,7 @@ export const create7702MinimalAccount = (args: {
       const id = await inAppWalletSendCalls({
         account: minimalAccount,
         calls: options.calls,
+        chain,
       });
       return { chain, client, id };
     },

package/src/wallets/in-app/core/wallet/enclave-wallet.ts

@@ -277,6 +277,7 @@ export class EnclaveWallet implements IWebWallet {
         const id = await inAppWalletSendCalls({
           account: account,
           calls: options.calls,
+          chain,
         });
         return { chain, client, id };
       },

package/src/wallets/smart/index.ts

@@ -379,6 +379,7 @@ async function createSmartAccount(
       const id = await inAppWalletSendCalls({
         account: account,
         calls: options.calls,
+        chain,
       });
       return { chain, client, id };
     },
@@ -556,6 +557,7 @@ function createZkSyncAccount(args: {
       const id = await inAppWalletSendCalls({
         account: account,
         calls: options.calls,
+        chain,
       });
       return { chain, client, id };
     },