@wallet-ui/react 1.1.0-canary-20250321005249 → 1.1.0-canary-20250324005504

package/dist/index.native.mjs

@@ -1,121 +1,355 @@
-import React10, { createContext, useContext, useMemo, useState, useEffect, useId, useCallback } from 'react';
-import { createSolanaClient, address } from 'gill';
-import { useWallets, uiWalletAccountsAreSame, uiWalletAccountBelongsToUiWallet, useConnect, useDisconnect, getUiWalletAccountStorageKey } from '@wallet-standard/react';
+import React19, { createContext, useContext, useEffect, useId, useMemo, useState, useCallback } from 'react';
+import { useConnect, useDisconnect, useWallets, uiWalletAccountsAreSame, uiWalletAccountBelongsToUiWallet, getUiWalletAccountStorageKey } from '@wallet-standard/react';
 export * from '@wallet-standard/react';
-import * as dialog from '@zag-js/dialog';
+import { Portal, useMachine, normalizeProps } from '@zag-js/react';
 import * as menu from '@zag-js/menu';
-import { useMachine, normalizeProps, Portal } from '@zag-js/react';
+import * as dialog from '@zag-js/dialog';
+import { handleCopyText } from '@wallet-ui/core';
 export * from '@wallet-ui/core';
+import { createSolanaClient } from 'gill';
+export * from '@solana/react';
+export * from '@solana/wallet-standard-features';
+export * from '@wallet-standard/core';
 
-// src/solana-client-context.tsx
-var SolanaClientContext = createContext({});
-function useSolanaClient() {
-  return useContext(SolanaClientContext);
+// src/base-button.tsx
+function BaseButton({ className, label, leftSection, onClick, rightSection, size, ...props }) {
+  return /* @__PURE__ */ React19.createElement("button", { className: `wallet-ui-base-button ${size ?? "md"} ${className ?? ""}`, onClick, ...props }, leftSection ? /* @__PURE__ */ React19.createElement("span", { className: "wallet-ui-base-button-left-section" }, leftSection) : null, label, rightSection ? /* @__PURE__ */ React19.createElement("span", { className: "wallet-ui-base-button-right-section" }, rightSection) : null);
 }
-function SolanaClientProvider({
-  children,
-  urlOrMoniker
-}) {
-  const value = useMemo(() => createSolanaClient({ urlOrMoniker }), [urlOrMoniker]);
-  return /* @__PURE__ */ React10.createElement(SolanaClientContext.Provider, { value }, children);
+var WalletUiContext = React19.createContext({});
+
+// src/use-wallet-ui.tsx
+function useWalletUi() {
+  return React19.useContext(WalletUiContext);
 }
-var SolanaClusterContext = createContext({});
-function useSolanaCluster() {
-  return useContext(SolanaClusterContext);
+var WalletUiAccountContext = createContext({});
+
+// src/use-wallet-ui-account.tsx
+function useWalletUiAccount() {
+  return useContext(WalletUiAccountContext);
 }
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState(() => {
-    try {
-      if (typeof window === "undefined") {
-        return initialValue;
-      }
-      const item = window.localStorage.getItem(key);
-      if (key.includes("wallet") || key.includes("account")) {
-        return initialValue;
+
+// src/use-wallet-ui-wallet.tsx
+function useWalletUiWallet({ wallet }) {
+  const { connect: connectAccount } = useWalletUi();
+  const { setAccount } = useWalletUiAccount();
+  const [isConnecting, connect3] = useConnect(wallet);
+  const [isDisconnecting, disconnect] = useDisconnect(wallet);
+  useEffect(() => {
+  }, [isDisconnecting]);
+  return {
+    connect: async () => {
+      const connectedAccount = await connect3();
+      console.log("connectedAccount", connectedAccount);
+      if (!connectedAccount.length) {
+        console.log("connect, no accounts");
+        return connectedAccount;
       }
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      console.warn(`Error reading localStorage key "${key}":`, error);
-      return initialValue;
+      const first = connectedAccount[0];
+      console.log("connect, setting first account => ", first);
+      setAccount(first);
+      connectAccount(first);
+      return connectedAccount;
+    },
+    disconnect,
+    isConnecting,
+    isDisconnecting
+  };
+}
+
+// src/base-dropdown.tsx
+var BaseDropdownItemType = /* @__PURE__ */ ((BaseDropdownItemType2) => {
+  BaseDropdownItemType2["Item"] = "Item";
+  BaseDropdownItemType2["WalletConnect"] = "WalletConnect";
+  BaseDropdownItemType2["WalletCopy"] = "WalletCopy";
+  BaseDropdownItemType2["WalletDisconnect"] = "WalletDisconnect";
+  BaseDropdownItemType2["WalletNeeded"] = "WalletNeeded";
+  return BaseDropdownItemType2;
+})(BaseDropdownItemType || {});
+function BaseDropdown({ buttonProps, dropdown, showIndicator, items }) {
+  const api = dropdown.api;
+  const trigger = /* @__PURE__ */ React19.createElement(
+    BaseButton,
+    {
+      ...api.getTriggerProps(),
+      className: `wallet-ui-base-dropdown-trigger`,
+      "data-part": "trigger",
+      rightSection: showIndicator ? /* @__PURE__ */ React19.createElement("span", { className: "wallet-actions" }, /* @__PURE__ */ React19.createElement("span", { ...api.getIndicatorProps(), className: "indicator" }, /* @__PURE__ */ React19.createElement(BaseDropdownChevronDown, { size: 12 }))) : null,
+      ...buttonProps
     }
-  });
-  const setValue = useCallback(
-    (value) => {
-      try {
-        const valueToStore = value instanceof Function ? value(storedValue) : value;
-        setStoredValue(valueToStore);
-        if (typeof window !== "undefined") {
-          if (valueToStore === void 0 || valueToStore === null) {
-            window.localStorage.removeItem(key);
-          } else {
-            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+  );
+  return /* @__PURE__ */ React19.createElement("div", { className: "wallet-ui-base-dropdown" }, trigger, /* @__PURE__ */ React19.createElement("div", { ...api.getPositionerProps(), className: "wallet-positioner" }, /* @__PURE__ */ React19.createElement("div", { ...api.getContentProps(), className: "wallet-ui-base-dropdown-list", "data-part": "content" }, items.map((item) => {
+    return /* @__PURE__ */ React19.createElement(
+      BaseDropdownItem,
+      {
+        ...api.getItemProps({ value: item.value }),
+        key: item.value,
+        item,
+        afterClick: () => {
+          if (item.disabled) {
+            return;
+          }
+          if (item.closeMenu !== false) {
+            dropdown.close();
           }
         }
-      } catch (error) {
-        console.warn(`Error setting localStorage key "${key}":`, error);
       }
-    },
-    [key, storedValue]
-  );
-  return [storedValue, setValue];
+    );
+  }))));
 }
-
-// src/solana-cluster-provider.tsx
-var STORAGE_KEY = "placeholder:selected-cluster";
-function SolanaClusterProvider({ clusters, children }) {
-  const [clusterId, setClusterId] = useLocalStorage(STORAGE_KEY, "solana:devnet");
-  if (!clusters.length) {
-    throw new Error("No clusters provided");
+function BaseDropdownItem({ afterClick, item }) {
+  if (!item.wallet) {
+    return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
   }
-  const cluster = useMemo(() => {
-    for (const cluster2 of clusters) {
-      if (cluster2.id === clusterId) {
-        return cluster2;
+  switch (item.type) {
+    case "Item" /* Item */:
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
+    case "WalletConnect" /* WalletConnect */:
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletConnect, { afterClick, item, wallet: item.wallet });
+    case "WalletCopy" /* WalletCopy */:
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemRender, { afterClick, item });
+    case "WalletDisconnect" /* WalletDisconnect */:
+      return /* @__PURE__ */ React19.createElement(BaseDropdownItemWalletDisconnect, { afterClick, item, wallet: item.wallet });
+  }
+}
+function BaseDropdownItemWalletConnect({
+  afterClick,
+  item,
+  wallet
+}) {
+  const { connect: connect3 } = useWalletUiWallet({ wallet });
+  return /* @__PURE__ */ React19.createElement(
+    BaseDropdownItemRender,
+    {
+      afterClick,
+      item: {
+        ...item,
+        handler: async () => {
+          await connect3();
+          return await item.handler();
+        }
       }
     }
-    return clusters[0];
-  }, [clusterId, clusters]);
-  return /* @__PURE__ */ React10.createElement(
-    SolanaClusterContext.Provider,
+  );
+}
+function BaseDropdownItemWalletDisconnect({
+  afterClick,
+  item,
+  wallet
+}) {
+  const { disconnect } = useWalletUiWallet({ wallet });
+  return /* @__PURE__ */ React19.createElement(
+    BaseDropdownItemRender,
     {
-      value: useMemo(
-        () => ({
-          cluster,
-          clusters,
-          setCluster(cluster2) {
-            localStorage.setItem(STORAGE_KEY, cluster2);
-            setClusterId(cluster2);
-          }
-        }),
-        [cluster, clusters]
-      )
-    },
-    children
+      afterClick,
+      item: {
+        ...item,
+        handler: async () => {
+          await disconnect();
+          return await item.handler();
+        }
+      }
+    }
   );
 }
-var SolanaWalletContext = createContext([
-  void 0,
-  function setSelectedWalletAccount() {
+function BaseDropdownItemRender({ afterClick, item }) {
+  function onClick() {
+    if (item.disabled) {
+      return;
+    }
+    void item.handler().then(() => {
+      afterClick();
+    });
   }
-]);
-function useSolanaWallet() {
-  return useContext(SolanaWalletContext);
+  return /* @__PURE__ */ React19.createElement("div", { className: "wallet-ui-base-dropdown-item", "data-part": "item", onClick }, item.leftSection ? /* @__PURE__ */ React19.createElement("span", { className: "wallet-ui-base-dropdown-item-left-section" }, item.leftSection) : null, item.label, item.rightSection ? /* @__PURE__ */ React19.createElement("span", { className: "wallet-ui-base-dropdown-item-right-section" }, item.rightSection) : null);
+}
+function BaseDropdownChevronDown(props) {
+  return /* @__PURE__ */ React19.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? 24,
+      height: props.size ?? 24,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props
+    },
+    /* @__PURE__ */ React19.createElement("path", { d: "m6 9 6 6 6-6" })
+  );
+}
+function BaseSvg({ sizes = {}, ...props }) {
+  const size = props.size ? sizes[props.size] : 12;
+  return /* @__PURE__ */ React19.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, ...props }, props.children);
+}
+
+// src/wallet-ui-icon-close.tsx
+function WalletUiIconClose({ size = "md", ...props }) {
+  return /* @__PURE__ */ React19.createElement(
+    BaseSvg,
+    {
+      size,
+      sizes: { lg: 16, md: 12, sm: 8 },
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      viewBox: "0 0 14 14",
+      ...props
+    },
+    /* @__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 = {}, size = "md", ...props }) {
+  const api = modal.api;
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, buttonLabel ? /* @__PURE__ */ React19.createElement(BaseButton, { label: buttonLabel, size, ...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(), className: size }, /* @__PURE__ */ React19.createElement("header", null, /* @__PURE__ */ React19.createElement("button", { ...api.getCloseTriggerProps() }, /* @__PURE__ */ React19.createElement(WalletUiIconClose, { size }))), 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() });
+  const api = menu.connect(service, normalizeProps);
+  return {
+    api,
+    close: () => service.send({ type: "CLOSE" }),
+    open: () => service.send({ type: "OPEN" })
+  };
 }
-function useSolanaWalletAddress() {
-  const [wallet] = useSolanaWallet();
-  if (!wallet?.address) {
+function useBaseModal() {
+  const service = useMachine(dialog.machine, { id: useId(), modal: true });
+  const api = dialog.connect(service, normalizeProps);
+  return {
+    api,
+    close: () => service.send({ type: "CLOSE" }),
+    open: () => service.send({ type: "OPEN" })
+  };
+}
+var WalletUiClusterContext = createContext({});
+
+// src/use-wallet-ui-cluster.tsx
+function useWalletUiCluster() {
+  return useContext(WalletUiClusterContext);
+}
+function WalletUiIcon({ className, size, wallet, ...props }) {
+  if (!wallet) {
     return null;
   }
-  return address(wallet.address);
+  return /* @__PURE__ */ React19.createElement(
+    "img",
+    {
+      src: wallet.icon,
+      alt: wallet.name,
+      className: `wallet-ui-list-icon ${size ?? "md"} ${className ?? ""}`,
+      ...props
+    }
+  );
 }
 
-// src/solana-wallet-provider.tsx
-var STORAGE_KEY2 = "placeholder:selected-wallet-and-address";
+// src/use-wallet-ui-dropdown.tsx
+function getDropdownItemsWallets({
+  wallets,
+  connect: connect3,
+  size
+}) {
+  return wallets.length ? wallets.map((wallet) => ({
+    handler: async () => {
+      const account = wallet.accounts.length > 0 ? wallet.accounts[0] : void 0;
+      if (!account) {
+        return;
+      }
+      connect3(account);
+      await Promise.resolve();
+    },
+    label: wallet.name,
+    leftSection: /* @__PURE__ */ React19.createElement(WalletUiIcon, { wallet, size }),
+    type: "WalletConnect" /* WalletConnect */,
+    value: wallet.name,
+    wallet
+  })) : [
+    {
+      handler: async () => {
+        window.open("https://solana.com/solana-wallets", "_blank");
+        await Promise.resolve();
+      },
+      label: "You'll need a wallet on Solana to continue",
+      type: "WalletNeeded" /* WalletNeeded */,
+      value: "no-wallets"
+    }
+  ];
+}
+function useWalletUiDropdown({ size = "md" } = {}) {
+  const dropdown = useBaseDropdown();
+  const { account, connect: connect3, copy, disconnect, connected, wallet, wallets } = useWalletUi();
+  const itemsWallets = useMemo(() => {
+    return getDropdownItemsWallets({ connect: connect3, size, wallets });
+  }, [wallets, size, connect3]);
+  const itemsConnected = useMemo(
+    () => [
+      {
+        handler: async () => {
+          copy();
+          void await Promise.resolve();
+        },
+        label: "Copy Address",
+        type: "WalletCopy" /* WalletCopy */,
+        value: "copy"
+      },
+      {
+        handler: async () => {
+          disconnect();
+          dropdown.close();
+          await Promise.resolve();
+        },
+        label: "Disconnect",
+        type: "WalletDisconnect" /* WalletDisconnect */,
+        value: "disconnect"
+      },
+      ...itemsWallets
+    ],
+    [connect3, copy, disconnect, dropdown, size, wallets]
+  );
+  const items = useMemo(() => {
+    return connected ? itemsConnected : itemsWallets;
+  }, [connected, itemsConnected, itemsWallets]);
+  const buttonProps = useMemo(() => {
+    return {
+      label: connected ? (account ? ellipsify(account.address) : wallet?.name) ?? "Connected" : "Select Wallet",
+      leftSection: connected ? /* @__PURE__ */ React19.createElement(WalletUiIcon, { size, wallet }) : void 0
+    };
+  }, [account, connected, size, wallet]);
+  return {
+    buttonProps,
+    connected,
+    dropdown,
+    items
+  };
+}
+function ellipsify(str = "", len = 4, delimiter = "..") {
+  const strLen = str.length;
+  const limit = len * 2 + delimiter.length;
+  return strLen >= limit ? str.substring(0, len) + delimiter + str.substring(strLen - len, strLen) : str;
+}
+var WalletUiSolanaClientContext = createContext({});
+
+// src/use-wallet-ui-solana-client.tsx
+function useWalletUiSolanaClient() {
+  return useContext(WalletUiSolanaClientContext);
+}
+function useWalletUiWallets() {
+  const readonlyWallets = useWallets();
+  return useMemo(
+    () => readonlyWallets.filter((wallet) => wallet.chains.some((i) => i.startsWith("solana:"))).sort((a, b) => a.name.localeCompare(b.name)),
+    [readonlyWallets]
+  );
+}
+var STORAGE_KEY = "wallet-ui:selected-wallet-account";
 var wasSetterInvoked = false;
-function getSavedWalletAccount(wallets, savedWalletNameAndAddress) {
+function getSavedWalletAccount(wallets, storageKey) {
   if (wasSetterInvoked) {
     return;
   }
+  const savedWalletNameAndAddress = localStorage.getItem(storageKey);
   if (!savedWalletNameAndAddress || typeof savedWalletNameAndAddress !== "string") {
     return;
   }
@@ -133,233 +367,377 @@ function getSavedWalletAccount(wallets, savedWalletNameAndAddress) {
     }
   }
 }
-function SolanaWalletProvider({ children }) {
-  const [storedKey, setStoredKey] = useLocalStorage(STORAGE_KEY2, null);
+function WalletUiAccountContextProvider({
+  children,
+  storageKey = STORAGE_KEY
+}) {
+  const { cluster } = useWalletUiCluster();
   const wallets = useWallets();
-  const [selectedWalletAccount, setSelectedWalletAccountInternal] = useState(
-    () => getSavedWalletAccount(wallets, storedKey)
+  const [account, setAccountInternal] = useState(
+    () => getSavedWalletAccount(wallets, storageKey)
   );
-  const setSelectedWalletAccount2 = (setStateAction) => {
-    setSelectedWalletAccountInternal((prevSelectedWalletAccount) => {
+  function setAccount(setStateAction) {
+    setAccountInternal((prevAccount) => {
       wasSetterInvoked = true;
-      const nextWalletAccount = typeof setStateAction === "function" ? setStateAction(prevSelectedWalletAccount) : setStateAction;
+      const nextWalletAccount = typeof setStateAction === "function" ? setStateAction(prevAccount) : setStateAction;
       const accountKey = nextWalletAccount ? getUiWalletAccountStorageKey(nextWalletAccount) : void 0;
       if (accountKey) {
-        setStoredKey(accountKey);
+        localStorage.setItem(storageKey, accountKey);
       } else {
-        setStoredKey(null);
+        localStorage.removeItem(storageKey);
       }
       return nextWalletAccount;
     });
-  };
+  }
   useEffect(() => {
-    const savedWalletAccount = getSavedWalletAccount(wallets, storedKey);
+    const savedWalletAccount = getSavedWalletAccount(wallets, storageKey);
     if (savedWalletAccount) {
-      setSelectedWalletAccountInternal(savedWalletAccount);
+      setAccountInternal(savedWalletAccount);
     }
   }, [wallets]);
   const walletAccount = useMemo(() => {
-    if (selectedWalletAccount) {
+    if (account) {
       for (const uiWallet of wallets) {
         for (const uiWalletAccount of uiWallet.accounts) {
-          if (uiWalletAccountsAreSame(selectedWalletAccount, uiWalletAccount)) {
+          if (uiWalletAccountsAreSame(account, uiWalletAccount)) {
             return uiWalletAccount;
           }
         }
-        if (uiWalletAccountBelongsToUiWallet(selectedWalletAccount, uiWallet) && uiWallet.accounts[0]) {
+        if (uiWalletAccountBelongsToUiWallet(account, uiWallet) && uiWallet.accounts[0]) {
           return uiWallet.accounts[0];
         }
       }
     }
-  }, [selectedWalletAccount, wallets]);
+  }, [account, wallets]);
   useEffect(() => {
-    if (selectedWalletAccount && !walletAccount) {
-      setSelectedWalletAccountInternal(void 0);
+    if (account && !walletAccount) {
+      setAccountInternal(void 0);
+    }
+  }, [account, walletAccount]);
+  const wallet = useMemo(() => {
+    if (!walletAccount) {
+      return void 0;
+    }
+    for (const uiWallet of wallets) {
+      for (const uiWalletAccount of uiWallet.accounts) {
+        if (uiWalletAccountsAreSame(walletAccount, uiWalletAccount)) {
+          return uiWallet;
+        }
+      }
+      if (uiWalletAccountBelongsToUiWallet(walletAccount, uiWallet) && uiWallet.accounts[0]) {
+        return uiWallet;
+      }
+    }
+  }, [walletAccount, wallets]);
+  const accountKeys = useMemo(() => {
+    if (!account) {
+      return [];
     }
-  }, [selectedWalletAccount, walletAccount]);
-  return /* @__PURE__ */ React10.createElement(SolanaWalletContext.Provider, { value: useMemo(() => [walletAccount, setSelectedWalletAccount2], [walletAccount]) }, children);
+    return [cluster.id, getUiWalletAccountStorageKey(account)].filter(Boolean);
+  }, [account]);
+  return /* @__PURE__ */ React19.createElement(
+    WalletUiAccountContext.Provider,
+    {
+      value: useMemo(
+        () => ({
+          account: walletAccount,
+          accountKeys,
+          setAccount,
+          wallet
+        }),
+        [walletAccount, wallet, accountKeys]
+      )
+    },
+    children
+  );
 }
-var SolanaWalletUiContext = React10.createContext(
-  {}
-);
-function useSolanaWalletUi() {
-  return React10.useContext(SolanaWalletUiContext);
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      if (typeof window === "undefined") {
+        return initialValue;
+      }
+      const item = window.localStorage.getItem(key);
+      if (key.includes("wallet") || key.includes("account")) {
+        return initialValue;
+      }
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error);
+      return initialValue;
+    }
+  });
+  const setValue = useCallback(
+    (value) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        if (typeof window !== "undefined") {
+          if (valueToStore === void 0 || valueToStore === null) {
+            window.localStorage.removeItem(key);
+          } else {
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+        }
+      } catch (error) {
+        console.warn(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key, storedValue]
+  );
+  return [storedValue, setValue];
 }
 
-// src/solana-wallet-ui-provider.tsx
-function SolanaWalletUiProvider(props) {
-  const wallets = useWallets();
-  const [walletAccount, setWalletAccount] = useSolanaWallet();
-  const [wallet, setWallet] = useState(void 0);
-  const dialogService = useMachine(dialog.machine, { id: useId(), modal: true });
-  const dialogApi = dialog.connect(dialogService, normalizeProps);
-  const menuService = useMachine(menu.machine, { id: useId() });
-  const menuApi = menu.connect(menuService, normalizeProps);
-  const [connected, setConnected] = useState(false);
-  function change() {
-    menuService.send({ type: "CLOSE" });
-    dialogService.send({ type: "OPEN" });
-  }
-  function connectAccount(wallet2, account) {
-    console.log("connectAccount", account);
-    setWalletAccount(account);
-    setWallet(wallet2);
-    setConnected(true);
-    dialogService.send({ type: "CLOSE" });
+// src/wallet-ui-cluster-context-provider.tsx
+function WalletUiClusterContextProvider({
+  clusters,
+  render,
+  storageKey = "__wallet-ui:selected-cluster"
+}) {
+  const [clusterId, setClusterId] = useLocalStorage(storageKey, "solana:devnet");
+  if (!clusters.length) {
+    throw new Error("No clusters provided");
   }
-  async function copy() {
-    if (!walletAccount) {
-      return;
+  const cluster = useMemo(() => {
+    for (const cluster2 of clusters) {
+      if (cluster2.id === clusterId) {
+        return cluster2;
+      }
     }
-    await navigator.clipboard.writeText(walletAccount.address);
-    menuService.send({ type: "CLOSE" });
-    dialogService.send({ type: "CLOSE" });
+    return clusters[0];
+  }, [clusterId, clusters]);
+  const value = {
+    cluster,
+    clusters,
+    setCluster: (cluster2) => {
+      localStorage.setItem(storageKey, cluster2);
+      setClusterId(cluster2);
+    }
+  };
+  return /* @__PURE__ */ React19.createElement(WalletUiClusterContext.Provider, { value }, render(value));
+}
+function WalletUiContextProvider({ children, size = "md" }) {
+  const { account, setAccount, wallet } = useWalletUiAccount();
+  const wallets = useWalletUiWallets();
+  const client = useWalletUiSolanaClient();
+  const walletHasAccounts = Boolean(wallet && wallet?.accounts.length > 0);
+  function connect3(account2) {
+    setAccount(account2);
   }
   function disconnect() {
-    setConnected(false);
-    setWalletAccount(void 0);
-    dialogService.send({ type: "CLOSE" });
-    menuService.send({ type: "CLOSE" });
+    setAccount(void 0);
+  }
+  function copy() {
+    if (!account) {
+      return;
+    }
+    handleCopyText(account.address);
   }
   const value = {
-    change,
-    connectAccount,
-    connected: connected && walletAccount !== void 0,
+    account,
+    client,
+    connect: connect3,
+    connected: walletHasAccounts,
     copy,
-    dialogApi,
     disconnect,
-    menuApi,
+    size,
     wallet,
-    walletAccount,
-    wallets: useMemo(() => wallets.filter((wallet2) => wallet2.chains.some((i) => i.startsWith("solana:"))), [wallets])
+    wallets
   };
-  return /* @__PURE__ */ React10.createElement(SolanaWalletUiContext.Provider, { value }, props.children);
+  return /* @__PURE__ */ React19.createElement(WalletUiContext.Provider, { value }, children);
 }
-
-// src/solana-provider.tsx
-function SolanaProvider({ clusters, children }) {
-  return /* @__PURE__ */ React10.createElement(SolanaClusterProvider, { clusters }, /* @__PURE__ */ React10.createElement(SolanaClientProviderLoader, null, /* @__PURE__ */ React10.createElement(SolanaWalletProvider, null, /* @__PURE__ */ React10.createElement(SolanaWalletUiProvider, null, children))));
-}
-function SolanaClientProviderLoader({ children }) {
-  const { cluster } = useSolanaCluster();
-  return /* @__PURE__ */ React10.createElement(SolanaClientProvider, { urlOrMoniker: cluster.urlOrMoniker }, children);
-}
-function SolanaWalletUiDialogTrigger(props) {
-  const { dialogApi } = useSolanaWalletUi();
-  console.log("SolanaWalletUiDialogTrigger", dialogApi);
-  return /* @__PURE__ */ React10.createElement("button", { ...props, ...dialogApi.getTriggerProps() }, "Select Wallet");
-}
-function SolanaWalletUiDropdown() {
-  const { change, connected, copy, disconnect, menuApi: api, wallet } = useSolanaWalletUi();
-  const menuItems = [
+function WalletUiSolanaClientContextProvider({
+  children,
+  urlOrMoniker
+}) {
+  return /* @__PURE__ */ React19.createElement(
+    WalletUiSolanaClientContext.Provider,
     {
-      handler: copy,
-      label: "Copy Address",
-      value: "copy"
+      value: useMemo(() => createSolanaClient({ urlOrMoniker }), [urlOrMoniker])
     },
+    children
+  );
+}
+
+// src/wallet-ui.tsx
+function createWalletUiConfig(props) {
+  return { ...props };
+}
+function WalletUi({
+  children,
+  config: { clusters, clusterStorageKey, selectedAccountStorageKey, ...config }
+}) {
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    WalletUiClusterContextProvider,
     {
-      handler: change,
-      label: "Change Wallet",
-      value: "change"
-    },
+      clusters,
+      storageKey: clusterStorageKey,
+      render: ({ cluster }) => {
+        return /* @__PURE__ */ React19.createElement(WalletUiSolanaClientContextProvider, { urlOrMoniker: cluster.urlOrMoniker }, /* @__PURE__ */ React19.createElement(WalletUiAccountContextProvider, { storageKey: selectedAccountStorageKey }, /* @__PURE__ */ React19.createElement(WalletUiContextProvider, { ...config }, children)));
+      }
+    }
+  ));
+}
+function WalletUiButton({ ...props }) {
+  return /* @__PURE__ */ React19.createElement(BaseButton, { ...props, label: "CLICK" });
+}
+function WalletUiClusterDropdown({ buttonProps, size = "md", ...props }) {
+  const dropdown = useBaseDropdown();
+  const { cluster, clusters, setCluster } = useWalletUiCluster();
+  return /* @__PURE__ */ React19.createElement(
+    BaseDropdown,
     {
-      handler: disconnect,
-      label: "Disconnect",
-      value: "disconnect"
+      buttonProps: { ...buttonProps, label: cluster.label, size },
+      items: clusters.map((cluster2) => ({
+        handler: async () => {
+          setCluster(cluster2.id);
+          await Promise.resolve();
+        },
+        label: cluster2.label,
+        type: "Item" /* Item */,
+        value: cluster2.id
+      })),
+      dropdown,
+      ...props
     }
-  ];
-  const trigger = /* @__PURE__ */ React10.createElement(
-    AppMenuButton,
+  );
+}
+function WalletUiDropdown({ size = "md", ...props }) {
+  const { buttonProps, items, dropdown } = useWalletUiDropdown({ size });
+  return /* @__PURE__ */ React19.createElement(BaseDropdown, { ...props, buttonProps: { ...buttonProps, size }, items, dropdown });
+}
+function WalletUiIconNoWallet({ size, ...props }) {
+  return /* @__PURE__ */ React19.createElement(BaseSvg, { size, sizes: { lg: 125, md: 100, sm: 75 }, fill: "none", 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",
     {
-      ...api.getTriggerProps(),
-      className: `wallet-trigger ${connected ? "connected" : ""}`,
-      "data-part": "trigger"
+      cx: "48.5",
+      cy: "48",
+      r: "47",
+      stroke: "url(#paint1_linear_880_5115)",
+      strokeOpacity: "0.4",
+      strokeWidth: "2"
+    }
+  ), /* @__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__ */ 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__ */ React19.createElement("defs", null, /* @__PURE__ */ React19.createElement(
+    "linearGradient",
+    {
+      id: "paint0_linear_880_5115",
+      x1: "3.41664",
+      y1: "98.0933",
+      x2: "103.05",
+      y2: "8.42498",
+      gradientUnits: "userSpaceOnUse"
     },
-    connected ? wallet?.name : "Select Wallet",
-    /* @__PURE__ */ React10.createElement("span", { className: "wallet-actions" }, /* @__PURE__ */ React10.createElement("span", { ...api.getIndicatorProps(), className: "indicator" }, "\u25BE"))
-  );
-  return /* @__PURE__ */ React10.createElement("div", { className: "wallet-menu" }, trigger, /* @__PURE__ */ React10.createElement("div", { ...api.getPositionerProps(), className: "wallet-positioner" }, /* @__PURE__ */ React10.createElement("ul", { ...api.getContentProps(), className: "wallet-content", "data-part": "content" }, menuItems.map((item) => /* @__PURE__ */ React10.createElement(
-    "li",
+    /* @__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",
     {
-      key: item.value,
-      ...api.getItemProps({ value: item.value }),
-      className: "wallet-item",
-      "data-part": "item",
-      onClick: () => {
-        if (item.disabled) {
-          return;
-        }
-        void item.handler();
-      }
+      id: "paint1_linear_880_5115",
+      x1: "3.41664",
+      y1: "98.0933",
+      x2: "103.05",
+      y2: "8.42498",
+      gradientUnits: "userSpaceOnUse"
     },
-    item.label
-  )))));
-}
-function AppMenuButton(props) {
-  return /* @__PURE__ */ React10.createElement("button", { ...props }, props.children);
+    /* @__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",
+      x1: "25.9583",
+      y1: "68.7101",
+      x2: "67.2337",
+      y2: "23.7879",
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__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",
+      x1: "58.3326",
+      y1: "49.4467",
+      x2: "61.0002",
+      y2: "45.4453",
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__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)" }))));
 }
-
-// src/solana-wallet-ui-button.tsx
-function SolanaWalletUiButton() {
-  const { connected } = useSolanaWalletUi();
-  return connected ? /* @__PURE__ */ React10.createElement(SolanaWalletUiDropdown, null) : /* @__PURE__ */ React10.createElement(SolanaWalletUiDialogTrigger, null);
-}
-function SolanaWalletUiDialog({ description, title }) {
-  const { dialogApi: api, connected, disconnect } = useSolanaWalletUi();
-  if (!api) {
-    console.log("no api");
+function WalletUiLabel({ className, size, wallet, ...props }) {
+  if (!wallet) {
     return null;
   }
-  if (!api.open) {
-    console.log("no api.open");
-    return null;
-  }
-  return /* @__PURE__ */ React10.createElement(Portal, null, /* @__PURE__ */ React10.createElement("div", { className: "dialog", ...api.getBackdropProps() }), /* @__PURE__ */ React10.createElement("div", { className: "dialog", ...api.getPositionerProps() }, /* @__PURE__ */ React10.createElement("div", { className: "dialog", ...api.getContentProps() }, title ? /* @__PURE__ */ React10.createElement("h2", { className: "dialog", ...api.getTitleProps() }, title) : null, description ? /* @__PURE__ */ React10.createElement("p", { className: "dialog", ...api.getDescriptionProps() }, description) : null, /* @__PURE__ */ React10.createElement("div", { style: { marginTop: "32px" } }, /* @__PURE__ */ React10.createElement(SolanaWalletUiDialogList, null), connected ? /* @__PURE__ */ React10.createElement("button", { onClick: disconnect }, "Disconnect") : null), /* @__PURE__ */ React10.createElement("button", { className: "dialog", ...api.getCloseTriggerProps() }, "\xD7"))));
+  return /* @__PURE__ */ React19.createElement("span", { className: `wallet-ui-list-label ${size ?? "md"} ${className ?? ""}`, ...props }, wallet.name);
 }
-function SolanaWalletUiDialogList() {
-  const { wallets } = useSolanaWalletUi();
-  return /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } }, wallets.map((item, index) => /* @__PURE__ */ React10.createElement(SolanaWalletUiDialogListItem, { key: `${item.name}-${index}`, wallet: item })));
-}
-function SolanaWalletUiDialogListItem({ wallet }) {
-  const [isConnecting, connect3] = useConnect(wallet);
-  const [isDisconnecting, disconnect] = useDisconnect(wallet);
-  const { connectAccount, walletAccount } = useSolanaWalletUi();
-  const accounts = wallet.accounts ?? [];
-  const isConnected = wallet.accounts.length > 0;
-  const isPending = isConnecting || isDisconnecting;
-  if (isPending) {
-    return /* @__PURE__ */ React10.createElement("div", null, "Pending...");
+function WalletUiListButton({ className, select, size = "md", wallet, ...props }) {
+  const [pending, setPending] = React19.useState(false);
+  function handleSelect() {
+    if (!select) {
+      return;
+    }
+    setPending(true);
+    const account = wallet.accounts.length > 0 ? wallet.accounts[0] : void 0;
+    if (!account) {
+      return;
+    }
+    void select(account).finally(() => setPending(false));
   }
-  return /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", justifyContent: "space-between" } }, /* @__PURE__ */ React10.createElement("div", { style: { alignItems: "center", display: "flex", gap: "8px" } }, /* @__PURE__ */ React10.createElement("img", { src: wallet.icon, alt: wallet.name, style: { height: 32 } }), /* @__PURE__ */ React10.createElement("span", { style: { fontSize: "1rem", fontWeight: "500" } }, wallet.name)), isConnected ? /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      disabled: isPending,
-      onClick: () => {
-        void disconnect();
-      }
-    },
-    "Disconnect"
-  ) : /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "button",
     {
-      disabled: isPending,
-      onClick: () => {
-        void connect3();
-      }
+      disabled: pending,
+      className: `wallet-ui-list-button ${size} ${pending ? "wallet-ui-list-button-pending" : ""} ${className ?? ""}`,
+      onClick: handleSelect,
+      ...props
     },
-    "Connect"
-  )), accounts.map((item, index) => /* @__PURE__ */ React10.createElement("div", { key: `${item.address}-${index}` }, /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      disabled: item.address === walletAccount?.address,
-      onClick: () => {
-        void connectAccount(wallet, item);
-      }
-    },
-    item.address
-  ))));
+    /* @__PURE__ */ React19.createElement(WalletUiIcon, { className: "wallet-ui-list-button-icon", wallet, size }),
+    /* @__PURE__ */ React19.createElement(WalletUiLabel, { className: "wallet-ui-list-button-label", wallet, size })
+  );
+}
+
+// src/wallet-ui-list.tsx
+function WalletUiList({ className, select, size = "md", wallets, ...props }) {
+  return /* @__PURE__ */ React19.createElement("div", { className: `wallet-ui-list ${size} ${className ?? ""}`, ...props }, wallets.map((wallet) => /* @__PURE__ */ React19.createElement(WalletUiListButton, { key: wallet.name, select, size, wallet })));
+}
+function WalletUiModal({ size = "md", wallets, select, ...props }) {
+  return /* @__PURE__ */ React19.createElement(BaseModal, { description: "Connect a wallet on Solana to continue", size, ...props }, /* @__PURE__ */ React19.createElement(WalletUiList, { size, wallets, select }));
+}
+function WalletUiModalTrigger({ label = "Select Wallet", modal, ...props }) {
+  return /* @__PURE__ */ React19.createElement(BaseButton, { label, onClick: () => void modal.open(), ...props });
 }
 
-export { AppMenuButton, SolanaClientContext, SolanaClientProvider, SolanaClusterContext, SolanaClusterProvider, SolanaProvider, SolanaWalletContext, SolanaWalletProvider, SolanaWalletUiButton, SolanaWalletUiContext, SolanaWalletUiDialog, SolanaWalletUiDialogList, SolanaWalletUiDialogListItem, SolanaWalletUiDialogTrigger, SolanaWalletUiDropdown, SolanaWalletUiProvider, useSolanaClient, useSolanaCluster, useSolanaWallet, useSolanaWalletAddress, useSolanaWalletUi };
+export { BaseButton, BaseDropdown, BaseDropdownChevronDown, BaseDropdownItemType, BaseModal, BaseSvg, WalletUi, WalletUiAccountContext, WalletUiAccountContextProvider, WalletUiButton, WalletUiClusterContext, WalletUiClusterContextProvider, WalletUiClusterDropdown, WalletUiContext, WalletUiContextProvider, WalletUiDropdown, WalletUiIcon, WalletUiIconClose, WalletUiIconNoWallet, WalletUiLabel, WalletUiList, WalletUiListButton, WalletUiModal, WalletUiModalTrigger, WalletUiSolanaClientContext, WalletUiSolanaClientContextProvider, createWalletUiConfig, ellipsify, useBaseDropdown, useBaseModal, useWalletUi, useWalletUiAccount, useWalletUiCluster, useWalletUiDropdown, useWalletUiSolanaClient, useWalletUiWallet, useWalletUiWallets };
 //# sourceMappingURL=index.native.mjs.map
 //# sourceMappingURL=index.native.mjs.map