thirdweb 5.48.1 → 5.48.2

package/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts

@@ -1,3 +1,5 @@
+import { formatNumber } from "../../../../../utils/formatNumber.js";
+
 /**
  * @internal
  * @param balanceData
@@ -13,7 +15,7 @@ export function formatTokenBalance(
   showSymbol = true,
 ) {
   return (
-    Number(balanceData.displayValue).toFixed(3) +
+    formatNumber(Number(balanceData.displayValue), 5) +
     (showSymbol ? ` ${balanceData.symbol}` : "")
   );
 }

package/src/stories/ConnectButton.stories.ts

@@ -0,0 +1,31 @@
+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",
+  component: ConnectButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+  },
+} satisfies Meta<typeof ConnectButton>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+  args: {
+    theme: "dark",
+  },
+};
+
+export const Light: Story = {
+  args: {
+    theme: "light",
+  },
+};
+
+export default meta;

package/src/stories/PayEmbed.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PayEmbed } from "../react/web/ui/PayEmbed.js";
+import { storyClient } from "./utils.js";
+
+const meta = {
+  title: "Connect/PayEmbed",
+  component: PayEmbed,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    client: storyClient,
+  },
+} satisfies Meta<typeof PayEmbed>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+  args: {
+    theme: "dark",
+  },
+};
+
+export const FiatTestMode: Story = {
+  args: {
+    theme: "dark",
+    payOptions: {
+      buyWithFiat: {
+        testMode: true,
+      },
+    },
+  },
+};
+
+export const Light: Story = {
+  args: {
+    theme: "light",
+  },
+};
+
+export default meta;

package/src/stories/utils.tsx

@@ -0,0 +1,29 @@
+import { generatePrivateKey } from "viem/accounts";
+import { createWalletAdapter } from "../adapters/wallet-adapter.js";
+import { ethereum } from "../chains/chain-definitions/ethereum.js";
+import { createThirdwebClient } from "../client/client.js";
+import type { Account } from "../wallets/interfaces/wallet.js";
+import { privateKeyToAccount } from "../wallets/private-key.js";
+
+const clientId = process.env.STORYBOOK_CLIENT_ID;
+
+if (!clientId) {
+  throw new Error("STORYBOOK_CLIENT_ID env is not configured");
+}
+
+export const storyClient = createThirdwebClient({
+  clientId: clientId,
+});
+
+export const storyAccount: Account = privateKeyToAccount({
+  client: storyClient,
+  privateKey: process.env.STORYBOOK_ACCOUNT_PRIVATE_KEY || generatePrivateKey(),
+});
+
+export const storyWallet = createWalletAdapter({
+  adaptedAccount: storyAccount,
+  client: storyClient,
+  chain: ethereum,
+  onDisconnect: () => {},
+  switchChain: () => {},
+});

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

@@ -5,13 +5,22 @@ import type { GaslessOptions } from "./gasless/types.js";
 import { toSerializableTransaction } from "./to-serializable-transaction.js";
 import type { WaitForReceiptOptions } from "./wait-for-tx-receipt.js";
 
-export type SendTransactionOptions = {
+/** Send transaction options */
+export interface SendTransactionOptions {
+  /**
+   * The account to send the transaction with
+   */
   account: Account;
-  // TODO: update this to `Transaction<"prepared">` once the type is available to ensure only prepared transactions are accepted
+  /**
+   * The prepared transaction to send
+   */
   // biome-ignore lint/suspicious/noExplicitAny: library function that accepts any prepared transaction type
   transaction: PreparedTransaction<any>;
+  /**
+   * Gasless options for the transaction, if applicable
+   */
   gasless?: GaslessOptions;
-};
+}
 
 /**
  * Sends a transaction using the provided account.

package/src/utils/signatures/sign-message.test.ts

@@ -1,57 +1,85 @@
-import { expect, test } from "vitest";
+import { describe, expect, test } from "vitest";
 
-import { ANVIL_PKEY_A } from "~test/test-wallets.js";
+import { ANVIL_PKEY_A, TEST_ACCOUNT_A } from "~test/test-wallets.js";
 import { signMessage } from "./sign-message.js";
 
-test("default", async () => {
-  expect(
-    signMessage({
+describe("signMessage", async () => {
+  test("privateKey", async () => {
+    expect(
+      signMessage({
+        message: "hello world",
+        privateKey: ANVIL_PKEY_A,
+      }),
+    ).toMatchInlineSnapshot(
+      '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
+    );
+
+    expect(
+      signMessage({
+        message: "🤯",
+        privateKey: ANVIL_PKEY_A,
+      }),
+    ).toMatchInlineSnapshot(
+      '"0xc0cd7599731c37aa4c0815a89dc8dcb4ce479f83df7ee8ffc606a9ef29323e814b54bb8935b56e7c690f1ee4c6290da5c2f6df6fc3443fbe96bb1846a2c4fefc1c"',
+    );
+
+    expect(
+      signMessage({
+        message: "0x787037Ba5b7eA8a8737627FfB67d35FdCaAd9A18",
+        privateKey: ANVIL_PKEY_A,
+      }),
+    ).toMatchInlineSnapshot(
+      '"0x151436da0ef734f06ae71f4b907a062fa5683b40af4221e86dfe5f2fc9f09ffa40c90fee4a0e48311506b84dc6f20e513dc4dc434f0f70a03af6ff3e22c7b7591c"',
+    );
+  });
+
+  test("raw", async () => {
+    expect(
+      signMessage({
+        message: { raw: "0x68656c6c6f20776f726c64" },
+        privateKey: ANVIL_PKEY_A,
+      }),
+    ).toMatchInlineSnapshot(
+      '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
+    );
+
+    expect(
+      signMessage({
+        message: {
+          raw: Uint8Array.from([
+            104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100,
+          ]),
+        },
+        privateKey: ANVIL_PKEY_A,
+      }),
+    ).toMatchInlineSnapshot(
+      '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
+    );
+  });
+
+  test("account", async () => {
+    const basicSignature = await signMessage({
       message: "hello world",
-      privateKey: ANVIL_PKEY_A,
-    }),
-  ).toMatchInlineSnapshot(
-    '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
-  );
-
-  expect(
-    signMessage({
+      account: TEST_ACCOUNT_A,
+    });
+    expect(basicSignature).toMatchInlineSnapshot(
+      '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
+    );
+
+    const emojiSignature = await signMessage({
       message: "🤯",
-      privateKey: ANVIL_PKEY_A,
-    }),
-  ).toMatchInlineSnapshot(
-    '"0xc0cd7599731c37aa4c0815a89dc8dcb4ce479f83df7ee8ffc606a9ef29323e814b54bb8935b56e7c690f1ee4c6290da5c2f6df6fc3443fbe96bb1846a2c4fefc1c"',
-  );
-
-  expect(
-    signMessage({
-      message: "0x787037Ba5b7eA8a8737627FfB67d35FdCaAd9A18",
-      privateKey: ANVIL_PKEY_A,
-    }),
-  ).toMatchInlineSnapshot(
-    '"0x151436da0ef734f06ae71f4b907a062fa5683b40af4221e86dfe5f2fc9f09ffa40c90fee4a0e48311506b84dc6f20e513dc4dc434f0f70a03af6ff3e22c7b7591c"',
-  );
-});
+      account: TEST_ACCOUNT_A,
+    });
+    expect(emojiSignature).toMatchInlineSnapshot(
+      '"0xc0cd7599731c37aa4c0815a89dc8dcb4ce479f83df7ee8ffc606a9ef29323e814b54bb8935b56e7c690f1ee4c6290da5c2f6df6fc3443fbe96bb1846a2c4fefc1c"',
+    );
 
-test("raw", async () => {
-  expect(
-    signMessage({
-      message: { raw: "0x68656c6c6f20776f726c64" },
-      privateKey: ANVIL_PKEY_A,
-    }),
-  ).toMatchInlineSnapshot(
-    '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
-  );
-
-  expect(
-    signMessage({
-      message: {
-        raw: Uint8Array.from([
-          104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100,
-        ]),
-      },
-      privateKey: ANVIL_PKEY_A,
-    }),
-  ).toMatchInlineSnapshot(
-    '"0xa461f509887bd19e312c0c58467ce8ff8e300d3c1a90b608a760c5b80318eaf15fe57c96f9175d6cd4daad4663763baa7e78836e067d0163e9a2ccf2ff753f5b1b"',
-  );
+    const addressSignature = await signMessage({
+      message: "0x787037Ba5b7eA8a8737627FfB67d35FdCaAd9A18",
+      account: TEST_ACCOUNT_A,
+    });
+    expect(addressSignature).toMatchInlineSnapshot(
+      '"0x151436da0ef734f06ae71f4b907a062fa5683b40af4221e86dfe5f2fc9f09ffa40c90fee4a0e48311506b84dc6f20e513dc4dc434f0f70a03af6ff3e22c7b7591c"',
+    );
+  });
 });

package/src/utils/signatures/sign-message.ts

@@ -1,16 +1,18 @@
+import type { Account } from "../../wallets/interfaces/wallet.js";
 import type { Hex } from "../encoding/hex.js";
 import { hashMessage } from "../hashing/hashMessage.js";
 import type { Prettify } from "../type-utils.js";
 import { sign } from "./sign.js";
 import { signatureToHex } from "./signature-to-hex.js";
 
+type Message = Prettify<
+  | string
+  | {
+      raw: Hex | Uint8Array;
+    }
+>;
 export type SignMessageOptions = {
-  message: Prettify<
-    | string
-    | {
-        raw: Hex | Uint8Array;
-      }
-  >;
+  message: Message;
   privateKey: Hex;
 };
 
@@ -30,7 +32,40 @@ export type SignMessageOptions = {
  * ```
  * @utils
  */
-export function signMessage({ message, privateKey }: SignMessageOptions): Hex {
-  const signature = sign({ hash: hashMessage(message), privateKey });
-  return signatureToHex(signature);
+export function signMessage({ message, privateKey }: SignMessageOptions): Hex;
+
+/**
+ * Signs a string message with a given account.
+ * @param options The options for signing.
+ * @param options.message The message to be signed as a string or object containing raw hex or bytes
+ * @param options.account The account to be used
+ * @returns The signature as a hex string
+ * @example
+ * ```ts
+ * import { signMessage } from "thirdweb/utils";
+ * await signMessage({
+ *   message: "Hello, world!",
+ *   account
+ * });
+ * ```
+ * @walletUtils
+ */
+export function signMessage({
+  message,
+  account,
+}: { message: Message; account: Account }): Promise<Hex>;
+
+export function signMessage(
+  options: SignMessageOptions | { message: Message; account: Account },
+): Hex | Promise<Hex> {
+  if ("privateKey" in options) {
+    const { message, privateKey } = options;
+    const signature = sign({ hash: hashMessage(message), privateKey });
+    return signatureToHex(signature);
+  } else if ("account" in options) {
+    const { message, account } = options;
+    return account.signMessage({ message });
+  } else {
+    throw new Error("Either privateKey or account is required");
+  }
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.48.1";
+export const version = "5.48.2";

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

@@ -40,7 +40,9 @@ export async function connectInAppWallet(
   connector: InAppConnector,
 ): Promise<[Account, Chain]> {
   if (
+    // if auth mode is not specified, the default is popup
     createOptions?.auth?.mode !== "popup" &&
+    createOptions?.auth?.mode !== undefined &&
     connector.authenticateWithRedirect
   ) {
     const strategy = options.strategy;