@wallet-ui/react 4.0.5 → 4.1.0

package/dist/index.browser.mjs

@@ -1,27 +1,32 @@
-import React18, { createContext, useContext, useEffect, useId, useMemo, useState, useCallback } from 'react';
+import React19, { createContext, useContext, useEffect, useId, useMemo, useState, useCallback } from 'react';
 import { useConnect, useDisconnect, useWallets, getUiWalletAccountStorageKey, uiWalletAccountsAreSame, uiWalletAccountBelongsToUiWallet } from '@wallet-standard/react';
 export * from '@wallet-standard/react';
 import { Portal, useMachine, normalizeProps } from '@zag-js/react';
 import * as menu from '@zag-js/menu';
 import * as dialog from '@zag-js/dialog';
-import { useWalletAccountTransactionSendingSigner } from '@solana/react';
+import { SolanaSignMessage, SolanaSignIn } from '@solana/wallet-standard-features';
+export * from '@solana/wallet-standard-features';
+import { createSignInMessage } from '@solana/wallet-standard-util';
+import { uiWalletAccountBelongsToUiWallet as uiWalletAccountBelongsToUiWallet$1, getWalletAccountFeature, getWalletFeature } from '@wallet-standard/ui';
+export { getWalletAccountFeature, getWalletFeature, uiWalletAccountBelongsToUiWallet, uiWalletAccountsAreSame } from '@wallet-standard/ui';
+import { getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, getOrCreateUiWalletAccountForStandardWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@wallet-standard/ui-registry';
+import { useWalletAccountTransactionSendingSigner, useSignMessage } from '@solana/react';
 export * from '@solana/react';
 import { useStore } from '@nanostores/react';
 import { createStorageAccount, createStorageCluster, handleCopyText } from '@wallet-ui/core';
 export * from '@wallet-ui/core';
-export * from '@solana/wallet-standard-features';
+import { StandardConnect } from '@wallet-standard/core';
 export * from '@wallet-standard/core';
-export { getWalletAccountFeature, getWalletFeature, uiWalletAccountBelongsToUiWallet, uiWalletAccountsAreSame } from '@wallet-standard/ui';
 
 // src/base-button.tsx
 function BaseButton({ className, label, leftSection, onClick, rightSection, ...props }) {
-  return /* @__PURE__ */ React18.createElement("button", { "data-wu": "base-button", className: `${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
+  return /* @__PURE__ */ React19.createElement("button", { "data-wu": "base-button", className: `${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-button-right-section" }, rightSection) : null);
 }
-var WalletUiContext = React18.createContext({});
+var WalletUiContext = React19.createContext({});
 
 // src/use-wallet-ui.tsx
 function useWalletUi() {
-  return React18.useContext(WalletUiContext);
+  return React19.useContext(WalletUiContext);
 }
 var WalletUiAccountContext = createContext({});
 
@@ -59,7 +64,7 @@ function WalletUiIcon({ className, wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement("img", { "data-wu": "wallet-ui-icon", src: wallet.icon, alt: wallet.name, className: className ?? "", ...props });
+  return /* @__PURE__ */ React19.createElement("img", { "data-wu": "wallet-ui-icon", src: wallet.icon, alt: wallet.name, className: className ?? "", ...props });
 }
 
 // src/base-dropdown.tsx
@@ -73,16 +78,16 @@ var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
 })(BaseDropdownItemType || {});
 function BaseDropdown({ buttonProps, dropdown, items, showIndicator }) {
   const api = dropdown.api;
-  const trigger = /* @__PURE__ */ React18.createElement(
+  const trigger = /* @__PURE__ */ React19.createElement(
     BaseButton,
     {
       ...api.getTriggerProps(),
-      rightSection: showIndicator ? /* @__PURE__ */ React18.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React18.createElement(BaseDropdownChevronDown, null)) : null,
+      rightSection: showIndicator ? /* @__PURE__ */ React19.createElement("span", { ...api.getIndicatorProps() }, /* @__PURE__ */ React19.createElement(BaseDropdownChevronDown, null)) : null,
       ...buttonProps
     }
   );
-  return /* @__PURE__ */ React18.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
-    return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { "data-wu": "base-dropdown" }, trigger, /* @__PURE__ */ React19.createElement("div", { ...api.getPositionerProps(), "data-wu": "base-dropdown-wrapper" }, /* @__PURE__ */ React19.createElement("div", { ...api.getContentProps(), "data-wu": "base-dropdown-list", "data-part": "content" }, items.map((item) => {
+    return /* @__PURE__ */ React19.createElement(
       BaseDropdownItem,
       {
         ...api.getItemProps({ value: item.value }),
@@ -102,17 +107,17 @@ function BaseDropdown({ buttonProps, dropdown, items, showIndicator }) {
 }
 function BaseDropdownItem({ afterClick, item }) {
   if (!item.wallet) {
-    return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
+    return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
   }
   switch (item.type) {
     case "Item" /* Item */:
-      return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
     case "WalletConnect" /* WalletConnect */:
-      return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
     case "WalletCopy" /* WalletCopy */:
-      return /* @__PURE__ */ React18.createElement(BaseDropdownItemRender, { afterClick, item });
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
     case "WalletDisconnect" /* WalletDisconnect */:
-      return /* @__PURE__ */ React18.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
   }
 }
 function BaseDropdownItemWalletConnect({
@@ -121,7 +126,7 @@ function BaseDropdownItemWalletConnect({
   wallet
 }) {
   const { connect: connect3 } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -131,7 +136,7 @@ function BaseDropdownItemWalletConnect({
           await connect3();
           return await item.handler();
         },
-        leftSection: wallet ? /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
+        leftSection: wallet ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet }) : void 0
       }
     }
   );
@@ -142,7 +147,7 @@ function BaseDropdownItemWalletDisconnect({
   wallet
 }) {
   const { disconnect } = useWalletUiWallet({ wallet });
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     BaseDropdownItemRender,
     {
       afterClick,
@@ -165,10 +170,10 @@ function BaseDropdownItemRender({ afterClick, item }) {
       afterClick();
     });
   }
-  return /* @__PURE__ */ React18.createElement("button", { type: "button", "data-wu": "base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React18.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
+  return /* @__PURE__ */ React19.createElement("button", { type: "button", "data-wu": "base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19.createElement("span", { "data-wu": "base-dropdown-item-right-section" }, item.rightSection) : null);
 }
 function BaseDropdownChevronDown(props) {
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -182,16 +187,16 @@ function BaseDropdownChevronDown(props) {
       strokeLinejoin: "round",
       ...props
     },
-    /* @__PURE__ */ React18.createElement("path", { d: "m6 9 6 6 6-6" })
+    /* @__PURE__ */ React19.createElement("path", { d: "m6 9 6 6 6-6" })
   );
 }
 function BaseSvg({ ...props }) {
-  return /* @__PURE__ */ React18.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...props }, props.children);
+  return /* @__PURE__ */ React19.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...props }, props.children);
 }
 
 // src/wallet-ui-icon-close.tsx
 function WalletUiIconClose({ ...props }) {
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     BaseSvg,
     {
       fill: "none",
@@ -202,14 +207,14 @@ function WalletUiIconClose({ ...props }) {
       viewBox: "0 0 14 14",
       ...props
     },
-    /* @__PURE__ */ React18.createElement("path", { d: "M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" })
+    /* @__PURE__ */ React19.createElement("path", { d: "M14 12.461 8.3 6.772l5.234-5.233L12.006 0 6.772 5.234 1.54 0 0 1.539l5.234 5.233L0 12.006l1.539 1.528L6.772 8.3l5.69 5.7L14 12.461z" })
   );
 }
 
 // src/base-modal.tsx
 function BaseModal({ modal, buttonLabel, buttonProps = {}, ...props }) {
   const api = modal.api;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, buttonLabel ? /* @__PURE__ */ React18.createElement(BaseButton, { label: buttonLabel, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React18.createElement(Portal, null, /* @__PURE__ */ React18.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React18.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React18.createElement("div", { ...api.getContentProps() }, /* @__PURE__ */ React18.createElement("header", null, /* @__PURE__ */ React18.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React18.createElement(WalletUiIconClose, null))), props.description ? /* @__PURE__ */ React18.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React18.createElement("main", null, props.children)))));
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, buttonLabel ? /* @__PURE__ */ React19.createElement(BaseButton, { label: buttonLabel, ...buttonProps, ...api.getTriggerProps() }) : null, api.open && /* @__PURE__ */ React19.createElement(Portal, null, /* @__PURE__ */ React19.createElement("div", { ...api.getBackdropProps() }), /* @__PURE__ */ React19.createElement("div", { ...api.getPositionerProps() }, /* @__PURE__ */ React19.createElement("div", { ...api.getContentProps() }, /* @__PURE__ */ React19.createElement("header", null, /* @__PURE__ */ React19.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React19.createElement(WalletUiIconClose, null))), props.description ? /* @__PURE__ */ React19.createElement("p", { ...api.getDescriptionProps() }, props.description) : null, /* @__PURE__ */ React19.createElement("main", null, props.children)))));
 }
 function useBaseDropdown() {
   const service = useMachine(menu.machine, { id: useId() });
@@ -229,6 +234,232 @@ function useBaseModal() {
     open: () => service.send({ type: "OPEN" })
   };
 }
+
+// src/wallet-ui-auth-types.ts
+var AUTH_ERROR_MESSAGES = {
+  "auth-unsupported": "The selected wallet does not support Sign In With Solana or message signing.",
+  "message-signing-unavailable": "The selected wallet account does not support message signing.",
+  "missing-domain": "A Sign In With Solana fallback message requires a domain.",
+  "wallet-not-connected": "Connect a wallet account before signing in."
+};
+var WalletUiAuthError = class extends Error {
+  cause;
+  reason;
+  constructor(reason, cause) {
+    super(AUTH_ERROR_MESSAGES[reason]);
+    this.cause = cause;
+    this.name = "WalletUiAuthError";
+    this.reason = reason;
+  }
+};
+var getOrCreateUiWalletAccountForStandardWalletAccount = getOrCreateUiWalletAccountForStandardWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+var getWalletAccountForUiWalletAccount = getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+var getWalletForHandle = getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+// src/wallet-ui-auth-utils.ts
+function getTargetAccount(account, wallet) {
+  if (account && uiWalletAccountBelongsToUiWallet$1(account, wallet)) {
+    return account;
+  }
+  return void 0;
+}
+function hasFeature(handle, featureName) {
+  return Boolean(handle && handle.features.includes(featureName));
+}
+async function signInWithMessageFeature({
+  account,
+  input
+}) {
+  const messageSignInInput = getMessageSignInInput(account, input);
+  const { signMessage } = getWalletAccountFeature(
+    account,
+    SolanaSignMessage
+  );
+  const walletAccount = getWalletAccountForUiWalletAccount(account);
+  const [output] = await signMessage({ account: walletAccount, message: createSignInMessage(messageSignInInput) });
+  if (!output) {
+    throw new WalletUiAuthError("message-signing-unavailable");
+  }
+  return getMessageSignInResult({ account, input: messageSignInInput, output });
+}
+async function signInWithMessageSigner({
+  account,
+  input,
+  signMessage
+}) {
+  const messageSignInInput = getMessageSignInInput(account, input);
+  const output = await signMessage({ message: createSignInMessage(messageSignInInput) });
+  return getMessageSignInResult({ account, input: messageSignInInput, output });
+}
+function getMessageSignInResult({
+  account,
+  input,
+  output
+}) {
+  return {
+    account,
+    input,
+    method: SolanaSignMessage,
+    signature: output.signature,
+    signedMessage: output.signedMessage
+  };
+}
+async function signInWithNativeFeature({
+  account,
+  connect: connect3,
+  input,
+  wallet
+}) {
+  const signInInput = account?.address && !input.address ? { ...input, address: account.address } : { ...input };
+  const { signIn } = getWalletFeature(wallet, SolanaSignIn);
+  const [output] = await signIn(signInInput);
+  if (!output) {
+    throw new WalletUiAuthError("auth-unsupported");
+  }
+  const uiAccount = getUiWalletAccountForSignedInAccount({ account, output, wallet });
+  if (wallet.accounts.includes(uiAccount)) {
+    connect3(uiAccount);
+  }
+  return {
+    account: uiAccount,
+    input: signInInput,
+    method: SolanaSignIn,
+    signature: output.signature,
+    signedMessage: output.signedMessage
+  };
+}
+function getUiWalletAccountForSignedInAccount({
+  account,
+  output,
+  wallet
+}) {
+  const matchingCurrentAccount = account?.address === output.account.address ? account : void 0;
+  return wallet.accounts.find((walletAccount) => walletAccount.address === output.account.address) ?? matchingCurrentAccount ?? getOrCreateUiWalletAccountForStandardWalletAccount(getWalletForHandle(wallet), output.account);
+}
+function getLocationHost() {
+  if (typeof location === "undefined") {
+    return void 0;
+  }
+  return location.host || void 0;
+}
+function getMessageSignInInput(account, input) {
+  const domain = input.domain ?? getLocationHost();
+  if (!domain) {
+    throw new WalletUiAuthError("missing-domain");
+  }
+  return {
+    ...input,
+    address: account.address,
+    domain
+  };
+}
+
+// src/use-wallet-ui-auth-message.ts
+function useWalletUiAuthMessage({
+  account,
+  enabled = Boolean(account),
+  reason = account ? "message-signing-unavailable" : "wallet-not-connected",
+  signMessage
+}) {
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const canSignIn = Boolean(enabled && account);
+  const unavailableReason = account ? reason : "wallet-not-connected";
+  const signIn = useCallback(
+    async ({ input = {} } = {}) => {
+      if (!canSignIn || !account) {
+        throw new WalletUiAuthError(unavailableReason);
+      }
+      setIsSigningIn(true);
+      try {
+        if (signMessage) {
+          return await signInWithMessageSigner({
+            account,
+            input,
+            signMessage
+          });
+        }
+        return await signInWithMessageFeature({
+          account,
+          input
+        });
+      } finally {
+        setIsSigningIn(false);
+      }
+    },
+    [account, canSignIn, signMessage, unavailableReason]
+  );
+  return {
+    canSignIn,
+    isSigningIn,
+    messageSigningAvailable: canSignIn,
+    nativeSignInAvailable: false,
+    reason: canSignIn ? void 0 : unavailableReason,
+    signIn
+  };
+}
+function useWalletUiAuthNative({ enabled = true, wallet }) {
+  const { account, connect: connect3 } = useWalletUi();
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const targetAccount = getTargetAccount(account, wallet);
+  const messageSigningAvailable = hasFeature(targetAccount, SolanaSignMessage);
+  const signIn = useCallback(
+    async ({ input = {} } = {}) => {
+      if (!enabled) {
+        throw new WalletUiAuthError("auth-unsupported");
+      }
+      setIsSigningIn(true);
+      try {
+        return await signInWithNativeFeature({
+          account: targetAccount,
+          connect: connect3,
+          input,
+          wallet
+        });
+      } finally {
+        setIsSigningIn(false);
+      }
+    },
+    [connect3, enabled, targetAccount, wallet]
+  );
+  return {
+    canSignIn: enabled,
+    isSigningIn,
+    messageSigningAvailable,
+    nativeSignInAvailable: enabled,
+    reason: enabled ? void 0 : "auth-unsupported",
+    signIn
+  };
+}
+
+// src/use-wallet-ui-auth.tsx
+function useWalletUiAuth({ wallet }) {
+  const { account } = useWalletUi();
+  const targetAccount = getTargetAccount(account, wallet);
+  const nativeSignInAvailable = hasFeature(wallet, SolanaSignIn);
+  const messageSigningAvailable = Boolean(targetAccount && hasFeature(targetAccount, SolanaSignMessage));
+  const nativeAuth = useWalletUiAuthNative({ enabled: nativeSignInAvailable, wallet });
+  const messageAuth = useWalletUiAuthMessage({
+    account: targetAccount,
+    enabled: messageSigningAvailable,
+    reason: targetAccount ? "message-signing-unavailable" : "wallet-not-connected"});
+  if (nativeSignInAvailable) {
+    return nativeAuth;
+  }
+  if (messageSigningAvailable) {
+    return messageAuth;
+  }
+  const reason = targetAccount || !hasFeature(wallet, SolanaSignMessage) ? "auth-unsupported" : "wallet-not-connected";
+  return {
+    canSignIn: false,
+    isSigningIn: false,
+    messageSigningAvailable: false,
+    nativeSignInAvailable: false,
+    reason,
+    signIn() {
+      return Promise.reject(new WalletUiAuthError(reason));
+    }
+  };
+}
 var WalletUiClusterContext = createContext({});
 
 // src/use-wallet-ui-cluster.tsx
@@ -300,7 +531,7 @@ function useWalletUiDropdown() {
   const buttonProps = useMemo(() => {
     return {
       label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
-      leftSection: connected ? /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }) : void 0
+      leftSection: connected ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet }) : void 0
     };
   }, [account, connected, wallet]);
   return {
@@ -411,7 +642,7 @@ function WalletUiAccountContextProvider({ children, cluster, storage }) {
     }
     return [cluster.id, getUiWalletAccountStorageKey(walletAccount)].filter(Boolean);
   }, [walletAccount, cluster.id]);
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     WalletUiAccountContext.Provider,
     {
       value: useMemo(
@@ -450,7 +681,7 @@ function WalletUiClusterContextProvider({ clusters, render, storage }) {
     }),
     [clusters, first, found, storage]
   );
-  return /* @__PURE__ */ React18.createElement(WalletUiClusterContext.Provider, { value }, render(value));
+  return /* @__PURE__ */ React19.createElement(WalletUiClusterContext.Provider, { value }, render(value));
 }
 function WalletUiContextProvider({ children }) {
   const { account, accountKeys, cluster, setAccount, wallet } = useWalletUiAccount();
@@ -475,7 +706,7 @@ function WalletUiContextProvider({ children }) {
     }),
     [account, accountKeys, cluster, setAccount, connected, wallet, wallets]
   );
-  return /* @__PURE__ */ React18.createElement(WalletUiContext.Provider, { value }, children);
+  return /* @__PURE__ */ React19.createElement(WalletUiContext.Provider, { value }, children);
 }
 
 // src/wallet-ui.tsx
@@ -483,31 +714,102 @@ function createWalletUiConfig(props) {
   return { ...props };
 }
 function WalletUi({ children, config: { accountStorage, clusters, clusterStorage, ...config } }) {
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     WalletUiClusterContextProvider,
     {
       clusters,
       storage: clusterStorage,
       render: ({ cluster }) => {
-        return /* @__PURE__ */ React18.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React18.createElement(WalletUiContextProvider, { ...config }, children));
+        return /* @__PURE__ */ React19.createElement(WalletUiAccountContextProvider, { cluster, storage: accountStorage }, /* @__PURE__ */ React19.createElement(WalletUiContextProvider, { ...config }, children));
       }
     }
   );
 }
 function WalletUiDropdown({ ...props }) {
   const { buttonProps, items, dropdown } = useWalletUiDropdown();
-  return /* @__PURE__ */ React18.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items });
+  return /* @__PURE__ */ React19.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps }, dropdown, items });
 }
 
 // src/wallet-ui-account-guard.tsx
-function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React18.createElement(WalletUiDropdown, null), render }) {
+function WalletUiAccountGuard({ fallback = /* @__PURE__ */ React19.createElement(WalletUiDropdown, null), render }) {
   const { account, accountKeys, cluster, wallet } = useWalletUiAccount();
   return account ? render({ account, accountKeys, cluster, wallet }) : fallback;
 }
+function WalletUiAuth({ children, wallet }) {
+  const { account } = useWalletUi();
+  const targetAccount = getTargetAccount(account, wallet);
+  if (hasFeature(wallet, SolanaSignIn)) {
+    return /* @__PURE__ */ React19.createElement(WalletUiAuthNative, { wallet }, children);
+  }
+  if (targetAccount && hasFeature(targetAccount, SolanaSignMessage)) {
+    return /* @__PURE__ */ React19.createElement(WalletUiAuthMessage, { account: targetAccount, wallet }, children);
+  }
+  if (hasFeature(wallet, SolanaSignMessage) && hasFeature(wallet, StandardConnect)) {
+    return /* @__PURE__ */ React19.createElement(WalletUiAuthMessageConnect, { wallet }, children);
+  }
+  return children({
+    canSignIn: false,
+    isSigningIn: false,
+    messageSigningAvailable: false,
+    nativeSignInAvailable: false,
+    reason: "auth-unsupported",
+    signIn() {
+      return Promise.reject(new WalletUiAuthError("auth-unsupported"));
+    }
+  });
+}
+function WalletUiAuthMessage({
+  account,
+  children,
+  wallet
+}) {
+  const signMessage = useSignMessage(account);
+  const auth = useWalletUiAuthMessage({ account, signMessage});
+  return children(auth);
+}
+function WalletUiAuthMessageConnect({ children, wallet }) {
+  const { connect: selectAccount } = useWalletUi();
+  const [isConnecting, connectWallet] = useConnect(wallet);
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const signIn = useCallback(
+    async ({ input = {} } = {}) => {
+      setIsSigningIn(true);
+      try {
+        const [firstAccount] = await connectWallet();
+        if (!firstAccount) {
+          throw new WalletUiAuthError("wallet-not-connected");
+        }
+        if (!hasFeature(firstAccount, SolanaSignMessage)) {
+          throw new WalletUiAuthError("auth-unsupported");
+        }
+        const result = await signInWithMessageFeature({
+          account: firstAccount,
+          input
+        });
+        selectAccount(firstAccount);
+        return result;
+      } finally {
+        setIsSigningIn(false);
+      }
+    },
+    [connectWallet, selectAccount]
+  );
+  return children({
+    canSignIn: true,
+    isSigningIn: isConnecting || isSigningIn,
+    messageSigningAvailable: false,
+    nativeSignInAvailable: false,
+    reason: void 0,
+    signIn
+  });
+}
+function WalletUiAuthNative({ children, wallet }) {
+  return children(useWalletUiAuthNative({ wallet }));
+}
 function WalletUiClusterDropdown({ buttonProps, ...props }) {
   const dropdown = useBaseDropdown();
   const { cluster, clusters, setCluster } = useWalletUiCluster();
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     BaseDropdown,
     {
       buttonProps: { ...buttonProps, label: cluster.label },
@@ -526,7 +828,7 @@ function WalletUiClusterDropdown({ buttonProps, ...props }) {
   );
 }
 function WalletUiIconNoWallet({ ...props }) {
-  return /* @__PURE__ */ React18.createElement(BaseSvg, { fill: "none", height: 100, width: 100, viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React18.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(BaseSvg, { fill: "none", height: 100, width: 100, viewBox: "0 0 97 96", ...props }, /* @__PURE__ */ React19.createElement("circle", { cx: "48.5", cy: "48", r: "48", fill: "url(#paint0_linear_880_5115)", fillOpacity: "0.1" }), /* @__PURE__ */ React19.createElement(
     "circle",
     {
       cx: "48.5",
@@ -536,19 +838,19 @@ function WalletUiIconNoWallet({ ...props }) {
       strokeOpacity: "0.4",
       strokeWidth: "2"
     }
-  ), /* @__PURE__ */ React18.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement("g", { clipPath: "url(#clip0_880_5115)" }, /* @__PURE__ */ React19.createElement(
     "path",
     {
       d: "M65.5769 28.1523H31.4231C27.6057 28.1523 24.5 31.258 24.5 35.0754V60.9215C24.5 64.7389 27.6057 67.8446 31.4231 67.8446H65.5769C69.3943 67.8446 72.5 64.7389 72.5 60.9215V35.0754C72.5 31.258 69.3943 28.1523 65.5769 28.1523ZM69.7308 52.1523H59.5769C57.2865 52.1523 55.4231 50.289 55.4231 47.9985C55.4231 45.708 57.2864 43.8446 59.5769 43.8446H69.7308V52.1523ZM69.7308 41.0754H59.5769C55.7595 41.0754 52.6539 44.1811 52.6539 47.9985C52.6539 51.8159 55.7595 54.9215 59.5769 54.9215H69.7308V60.9215C69.7308 63.2119 67.8674 65.0754 65.5769 65.0754H31.4231C29.1327 65.0754 27.2692 63.212 27.2692 60.9215V35.0754C27.2692 32.785 29.1326 30.9215 31.4231 30.9215H65.5769C67.8673 30.9215 69.7308 32.7849 69.7308 35.0754V41.0754Z",
       fill: "url(#paint2_linear_880_5115)"
     }
-  ), /* @__PURE__ */ React18.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     "path",
     {
       d: "M61.4231 46.6172H59.577C58.8123 46.6172 58.1924 47.2371 58.1924 48.0018C58.1924 48.7665 58.8123 49.3863 59.577 49.3863H61.4231C62.1878 49.3863 62.8077 48.7664 62.8077 48.0018C62.8077 47.2371 62.1878 46.6172 61.4231 46.6172Z",
       fill: "url(#paint3_linear_880_5115)"
     }
-  )), /* @__PURE__ */ React18.createElement("defs", null, /* @__PURE__ */ React18.createElement(
+  )), /* @__PURE__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
     "linearGradient",
     {
       id: "paint0_linear_880_5115",
@@ -558,13 +860,13 @@ function WalletUiIconNoWallet({ ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React19.createElement(
     "linearGradient",
     {
       id: "paint1_linear_880_5115",
@@ -574,13 +876,13 @@ function WalletUiIconNoWallet({ ...props }) {
       y2: "8.42498",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React19.createElement(
     "linearGradient",
     {
       id: "paint2_linear_880_5115",
@@ -590,13 +892,13 @@ function WalletUiIconNoWallet({ ...props }) {
       y2: "23.7879",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React19.createElement(
     "linearGradient",
     {
       id: "paint3_linear_880_5115",
@@ -606,22 +908,22 @@ function WalletUiIconNoWallet({ ...props }) {
       y2: "45.4453",
       gradientUnits: "userSpaceOnUse"
     },
-    /* @__PURE__ */ React18.createElement("stop", { stopColor: "#9945FF" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
-    /* @__PURE__ */ React18.createElement("stop", { offset: "1", stopColor: "#00D18C" })
-  ), /* @__PURE__ */ React18.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React18.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
+    /* @__PURE__ */ React19.createElement("stop", { stopColor: "#9945FF" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.14", stopColor: "#8A53F4" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.42", stopColor: "#6377D6" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.79", stopColor: "#24B0A7" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "0.99", stopColor: "#00D18C" }),
+    /* @__PURE__ */ React19.createElement("stop", { offset: "1", stopColor: "#00D18C" })
+  ), /* @__PURE__ */ React19.createElement("clipPath", { id: "clip0_880_5115" }, /* @__PURE__ */ React19.createElement("rect", { width: "48", height: "48", fill: "white", transform: "translate(24.5 24)" }))));
 }
 function WalletUiLabel({ className, wallet, ...props }) {
   if (!wallet) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement("span", { "data-wu": "wallet-ui-label", className: `${className ?? ""}`, ...props }, wallet.name);
+  return /* @__PURE__ */ React19.createElement("span", { "data-wu": "wallet-ui-label", className: `${className ?? ""}`, ...props }, wallet.name);
 }
 function WalletUiListButton({ className, select, wallet, ...props }) {
-  const [pending, setPending] = React18.useState(false);
+  const [pending, setPending] = React19.useState(false);
   function handleSelect() {
     if (!select) {
       return;
@@ -633,7 +935,7 @@ function WalletUiListButton({ className, select, wallet, ...props }) {
     }
     void select(account).finally(() => setPending(false));
   }
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "button",
     {
       disabled: pending,
@@ -642,22 +944,22 @@ function WalletUiListButton({ className, select, wallet, ...props }) {
       onClick: handleSelect,
       ...props
     },
-    /* @__PURE__ */ React18.createElement(WalletUiIcon, { wallet }),
-    /* @__PURE__ */ React18.createElement(WalletUiLabel, { wallet })
+    /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet }),
+    /* @__PURE__ */ React19.createElement(WalletUiLabel, { wallet })
   );
 }
 
 // src/wallet-ui-list.tsx
 function WalletUiList({ className, select, wallets, ...props }) {
-  return /* @__PURE__ */ React18.createElement("div", { "data-wu": "wallet-ui-list", className: `${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React18.createElement(WalletUiListButton, { key: wallet.name, select, wallet })));
+  return /* @__PURE__ */ React19.createElement("div", { "data-wu": "wallet-ui-list", className: `${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19.createElement(WalletUiListButton, { key: wallet.name, select, wallet })));
 }
 function WalletUiModal({ wallets, select, ...props }) {
-  return /* @__PURE__ */ React18.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", ...props }, /* @__PURE__ */ React18.createElement(WalletUiList, { wallets, select }));
+  return /* @__PURE__ */ React19.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", ...props }, /* @__PURE__ */ React19.createElement(WalletUiList, { wallets, select }));
 }
 function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
-  return /* @__PURE__ */ React18.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
+  return /* @__PURE__ */ React19.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
 
-export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSigner, useWalletUiWallet, useWalletUiWallets };
+export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiAccountGuard, WalletUiAuth, WalletUiAuthError, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiAuth, useWalletUiCluster, useWalletUiDropdown, useWalletUiSigner, useWalletUiWallet, useWalletUiWallets };
 //# sourceMappingURL=index.browser.mjs.map
 //# sourceMappingURL=index.browser.mjs.map