thirdweb 5.105.34-nightly-92896ddf3f43cfa24d3b53d7b8b6c26f9b2b0c61-20250818000434 → 5.105.35

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

@@ -179,6 +179,7 @@ export const ConnectedWalletDetails: React.FC<{
         supportedNFTs={props.supportedNFTs}
         supportedTokens={props.supportedTokens}
         theme={props.theme}
+        showBalanceInFiat={props.detailsButton?.showBalanceInFiat}
       />,
     );
   }
@@ -898,6 +899,7 @@ export function DetailsModal(props: {
         onBack={() => {
           setScreen("main");
         }}
+        manageWallet={props.detailsModal?.manageWallet}
         setScreen={setScreen}
       />
     );
@@ -975,6 +977,7 @@ export function DetailsModal(props: {
         client={client}
         hiddenWallets={props.detailsModal?.hiddenWallets}
         locale={locale.id}
+        connectOptions={props.connectOptions}
         onCancel={() => setScreen("main")}
         onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
@@ -1594,6 +1597,26 @@ export type UseWalletDetailsModalOptions = {
 
   /**
    * Render custom UI at the bottom of the Details Modal
+   * @param props - props passed to the footer component which includes a function to close the modal
+   * @example
+   * ```tsx
+   * function Example() {
+   *   const detailsModal = useWalletDetailsModal();
+   *
+   *   return (
+   *     <button onClick={() => detailsModal.open({
+   *       client,
+   *       footer: CustomFooter,
+   *     })}>
+   *         wallet details
+   *     </button>
+   *   )
+   * }
+   *
+   * function CustomFooter(props: { close: () => void }) {
+   *   return <div> ... </div>
+   * }
+   * ```
    */
   footer?: (props: { close: () => void }) => JSX.Element;
 
@@ -1653,6 +1676,11 @@ export type UseWalletDetailsModalOptions = {
    */
   hideBuyFunds?: boolean;
 
+  /**
+   * All wallet IDs included in this array will be hidden from wallet selection when connected.
+   */
+  hiddenWallets?: WalletId[];
+
   /**
    * When you click on "View Assets", by default the "Tokens" tab is shown first.
    * If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
@@ -1666,6 +1694,18 @@ export type UseWalletDetailsModalOptions = {
    */
   showBalanceInFiat?: SupportedFiatCurrency;
 
+  /**
+   * Configure options for managing the connected wallet.
+   */
+  manageWallet?: {
+    /**
+     * Allow linking other profiles to the connected wallet.
+     *
+     * By default it is `true`.
+     */
+    allowLinkingProfiles?: boolean;
+  };
+
   /**
    * The callback function for when the modal is closed
    * @param screen The name of the screen that was being shown when user closed the modal
@@ -1729,6 +1769,9 @@ export function useWalletDetailsModal() {
             closeModal={closeModal}
             connectOptions={props.connectOptions}
             detailsModal={{
+              showBalanceInFiat: props.showBalanceInFiat,
+              hiddenWallets: props.hiddenWallets,
+              manageWallet: props.manageWallet,
               assetTabs: props.assetTabs,
               connectedAccountAvatarUrl: props.connectedAccountAvatarUrl,
               connectedAccountName: props.connectedAccountName,

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

@@ -22,7 +22,7 @@ export type AssetTabs = "token" | "nft";
 
 const TokenTab = {
   label: (
-    <span className="flex gap-2">
+    <span style={{ display: "flex", gap: "8px", alignItems: "center" }}>
       <CoinsIcon size={iconSize.sm} /> Tokens
     </span>
   ),
@@ -31,7 +31,7 @@ const TokenTab = {
 
 const NftTab = {
   label: (
-    <span className="flex gap-2">
+    <span style={{ display: "flex", gap: "8px", alignItems: "center" }}>
       <ImageIcon size={iconSize.sm} /> NFTs
     </span>
   ),

package/src/stories/ConnectWallet/useWalletDetailsModal.stories.tsx

@@ -0,0 +1,192 @@
+import type { Meta } from "@storybook/react-vite";
+import { base } from "../../chains/chain-definitions/base.js";
+import { ethereum } from "../../chains/chain-definitions/ethereum.js";
+import { polygon } from "../../chains/chain-definitions/polygon.js";
+import { lightTheme } from "../../react/core/design-system/index.js";
+import { useActiveAccount } from "../../react/core/hooks/wallets/useActiveAccount.js";
+import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
+import {
+  type UseWalletDetailsModalOptions,
+  useWalletDetailsModal,
+} from "../../react/web/ui/ConnectWallet/Details.js";
+import { storyClient } from "../utils.js";
+
+const meta: Meta = {
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  title: "Hooks/useWalletDetailsModal",
+  decorators: [
+    (Story) => {
+      return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+          <ConnectButton client={storyClient} autoConnect={true} />
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+export function BasicUsage() {
+  return <Variant client={storyClient} />;
+}
+
+export function DisableLinkingProfiles() {
+  return (
+    <Variant
+      client={storyClient}
+      manageWallet={{ allowLinkingProfiles: false }}
+    />
+  );
+}
+
+export function HideSwitchWallet() {
+  return <Variant client={storyClient} hideSwitchWallet={true} />;
+}
+
+export function HideDisconnect() {
+  return <Variant client={storyClient} hideDisconnect={true} />;
+}
+
+export function HideSendFunds() {
+  return <Variant client={storyClient} hideSendFunds={true} />;
+}
+
+export function HideReceiveFunds() {
+  return <Variant client={storyClient} hideReceiveFunds={true} />;
+}
+
+export function HideBuyFunds() {
+  return <Variant client={storyClient} hideBuyFunds={true} />;
+}
+
+export function HideAllTopButtons() {
+  return (
+    <Variant
+      client={storyClient}
+      hideSendFunds={true}
+      hideReceiveFunds={true}
+      hideBuyFunds={true}
+    />
+  );
+}
+
+export function Chains() {
+  return <Variant client={storyClient} chains={[ethereum, polygon, base]} />;
+}
+
+export function Locale() {
+  return <Variant client={storyClient} locale="ja_JP" />;
+}
+
+export function ConnectedAccountAvatarUrl() {
+  return (
+    <Variant
+      client={storyClient}
+      connectedAccountAvatarUrl="https://thirdweb.com/favicon.ico"
+    />
+  );
+}
+
+export function ConnectedAccountName() {
+  return <Variant client={storyClient} connectedAccountName="test" />;
+}
+
+export function ShowBalanceInFiat() {
+  return <Variant client={storyClient} showBalanceInFiat="usd" />;
+}
+
+export function AssetTabs() {
+  return <Variant client={storyClient} assetTabs={["nft", "token"]} />;
+}
+
+export function OnClose() {
+  return (
+    <Variant
+      client={storyClient}
+      onClose={() => {
+        alert("onClose");
+      }}
+    />
+  );
+}
+
+export function Footer() {
+  return (
+    <Variant
+      client={storyClient}
+      footer={(props) => (
+        <div
+          style={{
+            outline: "1px solid red",
+            padding: "16px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "10px",
+          }}
+        >
+          custom footer
+          <button onClick={props.close} type="button">
+            close
+          </button>
+        </div>
+      )}
+    />
+  );
+}
+
+export function ConnectOptions() {
+  return (
+    <Variant
+      client={storyClient}
+      connectOptions={{
+        showAllWallets: false,
+      }}
+    />
+  );
+}
+
+export function LightTheme() {
+  return <Variant client={storyClient} theme="light" />;
+}
+
+export function CustomLightTheme() {
+  return (
+    <Variant
+      client={storyClient}
+      theme={lightTheme({
+        colors: {
+          modalBg: "#FFFFF0",
+          tertiaryBg: "#DBE4C9",
+          borderColor: "#8AA624",
+          secondaryText: "#3E3F29",
+          accentText: "#E43636",
+        },
+      })}
+    />
+  );
+}
+
+function Variant(params: UseWalletDetailsModalOptions) {
+  const account = useActiveAccount();
+  const detailsModal = useWalletDetailsModal();
+
+  if (!account) {
+    return <p> no account </p>;
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        detailsModal.open(params);
+      }}
+    >
+      test
+    </button>
+  );
+}

package/src/tokens/predict-address.ts

@@ -0,0 +1,48 @@
+import { bytesToHex, randomBytes } from "@noble/hashes/utils";
+import type { Hex } from "viem";
+import { predictAddress as _predictAddress } from "../extensions/tokens/__generated__/ERC20Entrypoint/read/predictAddress.js";
+import { padHex, toHex } from "../utils/encoding/hex.js";
+import { DEFAULT_DEVELOPER_ADDRESS } from "./constants.js";
+import { getDeployedEntrypointERC20 } from "./get-entrypoint-erc20.js";
+import {
+  encodeInitParams,
+  encodePoolConfig,
+  generateSalt,
+} from "./token-utils.js";
+import type { CreateTokenOptions } from "./types.js";
+
+export async function predictAddress(options: CreateTokenOptions) {
+  const { client, account, params, launchConfig } = options;
+
+  const creator = params.owner || account.address;
+  const encodedInitData = await encodeInitParams({
+    client,
+    creator,
+    params,
+  });
+
+  const salt: Hex = generateSalt(options.salt || bytesToHex(randomBytes(31)));
+
+  const entrypoint = await getDeployedEntrypointERC20(options);
+
+  let hookData: Hex = "0x";
+  let contractId = padHex(toHex("ERC20Asset"), { size: 32 });
+  if (launchConfig?.kind === "pool") {
+    hookData = encodePoolConfig(launchConfig.config);
+    contractId = padHex(toHex("ERC20Asset_Pool"), { size: 32 });
+  }
+
+  const address = await _predictAddress({
+    contract: entrypoint,
+    contractId,
+    params: {
+      data: encodedInitData,
+      hookData,
+      developer: options.developerAddress || DEFAULT_DEVELOPER_ADDRESS,
+      salt,
+    },
+    creator,
+  });
+
+  return address;
+}

package/src/tokens/types.ts

@@ -22,7 +22,7 @@ export type PoolConfig = {
 };
 
 export type DistributeContent = {
-  amount: bigint;
+  amount: string;
   recipient: string;
 };
 

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.105.34-nightly-92896ddf3f43cfa24d3b53d7b8b6c26f9b2b0c61-20250818000434";
+export const version = "5.105.35";