@satoshai/kit 0.3.1 → 0.4.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { WalletConnect, setSelectedProviderId, request, getSelectedProvider, clearSelectedProviderId } from '@stacks/connect';
+import { WalletConnect, DEFAULT_PROVIDERS, WALLET_CONNECT_PROVIDER, clearSelectedProviderId, request, getSelectedProviderId, getSelectedProvider, setSelectedProviderId } from '@stacks/connect';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { PostConditionMode, postConditionToHex, cvToHex } from '@stacks/transactions';
@@ -8,10 +8,17 @@ import { getPrimaryName } from 'bns-v2-sdk';
 var STACKS_TO_STACKS_CONNECT_PROVIDERS = {
   xverse: "XverseProviders.BitcoinProvider",
   leather: "LeatherProvider",
+  okx: "OkxStacksProvider",
   asigna: "AsignaProvider",
   fordefi: "FordefiProviders.UtxoProvider",
   "wallet-connect": "WalletConnectProvider"
 };
+var STACKS_CONNECT_TO_STACKS_PROVIDERS = Object.fromEntries(
+  Object.entries(STACKS_TO_STACKS_CONNECT_PROVIDERS).map(([kit, connect]) => [
+    connect,
+    kit
+  ])
+);
 
 // src/constants/storage-keys.ts
 var LOCAL_STORAGE_STACKS = "@satoshai/kit";
@@ -20,10 +27,10 @@ var LOCAL_STORAGE_STACKS = "@satoshai/kit";
 var SUPPORTED_STACKS_WALLETS = [
   "xverse",
   "leather",
-  "okx",
   "asigna",
   "fordefi",
-  "wallet-connect"
+  "wallet-connect",
+  "okx"
 ];
 
 // src/utils/get-stacks-wallets.ts
@@ -35,7 +42,7 @@ var getStacksWallets = () => {
   return { supported, installed };
 };
 var checkIfStacksProviderIsInstalled = (wallet) => {
-  if (typeof window === "undefined") return true;
+  if (typeof window === "undefined") return wallet === "wallet-connect";
   switch (wallet) {
     case "xverse":
       return !!window.XverseProviders;
@@ -90,6 +97,38 @@ var getOKXStacksAddress = async () => {
     provider: "okx"
   };
 };
+var OKX_PROVIDER_META = {
+  id: "OkxStacksProvider",
+  name: "OKX Wallet",
+  icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiICAgICB4bWxuczp4b2RtPSJodHRwOi8vd3d3LmNvcmVsLmNvbS9jb3JlbGRyYXcvb2RtLzIwMDMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjUwMCAyNTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAwIDI1MDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7fQogICAgLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBpZD0iTGF5ZXJfeDAwMjBfMSI+CiAgICA8ZyBpZD0iXzIxODczODEzMjM4NTYiPgogICAgICAgIDxyZWN0IHk9IjAiIGNsYXNzPSJzdDAiIHdpZHRoPSIyNTAwIiBoZWlnaHQ9IjI1MDAiPjwvcmVjdD4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTE0NjMsMTAxNWgtNDA0Yy0xNywwLTMxLDE0LTMxLDMxdjQwNGMwLDE3LDE0LDMxLDMxLDMxaDQwNGMxNywwLDMxLTE0LDMxLTMxdi00MDQgICAgIEMxNDk0LDEwMjksMTQ4MCwxMDE1LDE0NjMsMTAxNXoiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTk5Niw1NDlINTkyYy0xNywwLTMxLDE0LTMxLDMxdjQwNGMwLDE3LDE0LDMxLDMxLDMxaDQwNGMxNywwLDMxLTE0LDMxLTMxVjU4MEMxMDI3LDU2MywxMDEzLDU0OSw5OTYsNTQ5eiI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTkzMCw1NDloLTQwNGMtMTcsMC0zMSwxNC0zMSwzMXY0MDRjMCwxNywxNCwzMSwzMSwzMWg0MDRjMTcsMCwzMS0xNCwzMS0zMVY1ODAgICAgIEMxOTYxLDU2MywxOTQ3LDU0OSwxOTMwLDU0OXoiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTk5NiwxNDgySDU5MmMtMTcsMC0zMSwxNC0zMSwzMXY0MDRjMCwxNywxNCwzMSwzMSwzMWg0MDRjMTcsMCwzMS0xNCwzMS0zMXYtNDA0ICAgICBDMTAyNywxNDk2LDEwMTMsMTQ4Miw5OTYsMTQ4MnoiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTE5MzAsMTQ4MmgtNDA0Yy0xNywwLTMxLDE0LTMxLDMxdjQwNGMwLDE3LDE0LDMxLDMxLDMxaDQwNGMxNywwLDMxLTE0LDMxLTMxdi00MDQgICAgIEMxOTYxLDE0OTYsMTk0NywxNDgyLDE5MzAsMTQ4MnoiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+CjwvZz4KPC9zdmc+",
+  webUrl: "https://www.okx.com/"
+};
+var registerOkxProvider = () => {
+  if (typeof window === "undefined") return;
+  if (!window.OkxStacksProvider) {
+    window.OkxStacksProvider = {
+      request: async (method) => {
+        if (method === "getAddresses") {
+          const data = await getOKXStacksAddress();
+          return {
+            result: {
+              addresses: [
+                { address: data.address, symbol: "STX" }
+              ]
+            }
+          };
+        }
+        throw new Error(
+          `OKX adapter: unsupported method "${method}". Use connect('okx') for direct OKX SDK access.`
+        );
+      }
+    };
+  }
+};
+var unregisterOkxProvider = () => {
+  if (typeof window === "undefined") return;
+  delete window.OkxStacksProvider;
+};
 var extractStacksAddress = (typedProvider, addresses) => {
   if (!addresses.length) {
     throw new Error(`No addresses provided for ${typedProvider} wallet`);
@@ -221,12 +260,21 @@ var getLocalStorageWallet = () => {
     return null;
   }
 };
+var PROVIDER_META_BY_KIT_ID = Object.fromEntries(
+  [...DEFAULT_PROVIDERS, WALLET_CONNECT_PROVIDER, OKX_PROVIDER_META].map(
+    (p) => [
+      STACKS_CONNECT_TO_STACKS_PROVIDERS[p.id],
+      { name: p.name, icon: p.icon ?? "", webUrl: p.webUrl ?? "" }
+    ]
+  )
+);
 var StacksWalletContext = createContext(
   void 0
 );
 var StacksWalletProvider = ({
   children,
   wallets,
+  connectModal = true,
   walletConnect,
   onConnect,
   onAddressChange,
@@ -236,15 +284,23 @@ var StacksWalletProvider = ({
   const [provider, setProvider] = useState();
   const [isConnecting, setIsConnecting] = useState(false);
   const connectGenRef = useRef(0);
+  const wasConnectedRef = useRef(false);
   const wcInitRef = useRef(null);
+  const walletConnectRef = useRef(walletConnect);
+  walletConnectRef.current = walletConnect;
   const walletsKey = wallets?.join(",");
+  if (wallets?.includes("wallet-connect") && !walletConnect?.projectId) {
+    throw new Error(
+      'StacksWalletProvider: "wallet-connect" is listed in wallets but no walletConnect.projectId was provided.'
+    );
+  }
   useEffect(() => {
-    if (wallets?.includes("wallet-connect") && !walletConnect?.projectId) {
-      throw new Error(
-        'StacksWalletProvider: "wallet-connect" is listed in wallets but no walletConnect.projectId was provided.'
-      );
+    const okxConfigured = !wallets || wallets.includes("okx");
+    if (connectModal && okxConfigured) {
+      registerOkxProvider();
+      return () => unregisterOkxProvider();
     }
-  }, [walletsKey, walletConnect?.projectId]);
+  }, [connectModal, walletsKey]);
   useEffect(() => {
     const loadPersistedWallet = async () => {
       const persisted = getLocalStorageWallet();
@@ -284,6 +340,65 @@ var StacksWalletProvider = ({
   }, [walletConnect?.projectId]);
   const connect = useCallback(
     async (providerId, options) => {
+      if (connectModal && !providerId) {
+        const gen2 = ++connectGenRef.current;
+        setIsConnecting(true);
+        try {
+          clearSelectedProviderId();
+          const requestOptions = {
+            forceWalletSelect: true,
+            // OKX at the end so it appears last among installed wallets
+            defaultProviders: [
+              ...DEFAULT_PROVIDERS,
+              OKX_PROVIDER_META
+            ]
+          };
+          if (wallets) {
+            requestOptions.approvedProviderIds = wallets.map(
+              (w) => STACKS_TO_STACKS_CONNECT_PROVIDERS[w]
+            );
+          }
+          const wc2 = walletConnectRef.current;
+          if (wc2?.projectId) {
+            requestOptions.walletConnect = buildWalletConnectConfig(
+              wc2.projectId,
+              wc2.metadata,
+              wc2.chains
+            );
+          }
+          const data = await request(
+            requestOptions,
+            "getAddresses",
+            {}
+          );
+          if (connectGenRef.current !== gen2) return;
+          const selectedId = getSelectedProviderId();
+          const resolvedProvider = selectedId ? STACKS_CONNECT_TO_STACKS_PROVIDERS[selectedId] : void 0;
+          if (!resolvedProvider) {
+            throw new Error(
+              `Unknown provider returned from @stacks/connect modal: ${selectedId ?? "none"}`
+            );
+          }
+          const extractedAddress = extractStacksAddress(
+            resolvedProvider,
+            data.addresses
+          );
+          setAddress(extractedAddress);
+          setProvider(resolvedProvider);
+          options?.onSuccess?.(extractedAddress, resolvedProvider);
+        } catch (error) {
+          if (connectGenRef.current !== gen2) return;
+          console.error("Failed to connect wallet:", error);
+          getSelectedProvider()?.disconnect?.();
+          clearSelectedProviderId();
+          options?.onError?.(error);
+        } finally {
+          if (connectGenRef.current === gen2) {
+            setIsConnecting(false);
+          }
+        }
+        return;
+      }
       const typedProvider = SUPPORTED_STACKS_WALLETS.find(
         (wallet) => wallet === providerId
       );
@@ -303,7 +418,8 @@ var StacksWalletProvider = ({
         options?.onError?.(error);
         return;
       }
-      if (typedProvider === "wallet-connect" && !walletConnect?.projectId) {
+      const wc = walletConnectRef.current;
+      if (typedProvider === "wallet-connect" && !wc?.projectId) {
         const error = new Error(
           "WalletConnect requires a project ID. Please provide walletConnect.projectId to the StacksWalletProvider."
         );
@@ -325,10 +441,10 @@ var StacksWalletProvider = ({
         setSelectedProviderId(
           STACKS_TO_STACKS_CONNECT_PROVIDERS[typedProvider]
         );
-        const wcConfig = typedProvider === "wallet-connect" && walletConnect ? buildWalletConnectConfig(
-          walletConnect.projectId,
-          walletConnect.metadata,
-          walletConnect.chains
+        const wcConfig = typedProvider === "wallet-connect" && wc ? buildWalletConnectConfig(
+          wc.projectId,
+          wc.metadata,
+          wc.chains
         ) : void 0;
         if (wcConfig) {
           if (wcInitRef.current) await wcInitRef.current;
@@ -365,7 +481,7 @@ var StacksWalletProvider = ({
         }
       }
     },
-    [walletConnect]
+    [connectModal, walletsKey]
   );
   const reset = useCallback(() => {
     connectGenRef.current++;
@@ -392,24 +508,35 @@ var StacksWalletProvider = ({
     );
   }, [address, provider]);
   useEffect(() => {
-    if (!address || !provider || !onConnect) return;
-    onConnect(provider, address);
+    const isConnected = !!address && !!provider;
+    if (isConnected && !wasConnectedRef.current) {
+      onConnect?.(provider, address);
+    }
+    wasConnectedRef.current = isConnected;
   }, [address, provider, onConnect]);
-  useXverse({
-    address,
-    provider,
-    onAddressChange: (newAddress) => {
+  const handleAddressChange = useCallback(
+    (newAddress) => {
       setAddress(newAddress);
       onAddressChange?.(newAddress);
     },
+    [onAddressChange]
+  );
+  useXverse({
+    address,
+    provider,
+    onAddressChange: handleAddressChange,
     connect
   });
   const { installed } = getStacksWallets();
   const configured = wallets ?? [...SUPPORTED_STACKS_WALLETS];
   const walletInfos = configured.map((w) => ({
     id: w,
+    name: PROVIDER_META_BY_KIT_ID[w]?.name ?? w,
+    icon: PROVIDER_META_BY_KIT_ID[w]?.icon ?? "",
+    webUrl: PROVIDER_META_BY_KIT_ID[w]?.webUrl ?? "",
     available: w === "wallet-connect" ? !!walletConnect?.projectId : installed.includes(w)
   }));
+  const walletInfosKey = walletInfos.map((w) => `${w.id}:${w.available}`).join(",");
   const value = useMemo(() => {
     const walletState = isConnecting ? { status: "connecting", address: void 0, provider: void 0 } : address && provider ? { status: "connected", address, provider } : {
       status: "disconnected",
@@ -423,7 +550,7 @@ var StacksWalletProvider = ({
       reset,
       wallets: walletInfos
     };
-  }, [address, provider, isConnecting, connect, disconnect, reset, walletInfos]);
+  }, [address, provider, isConnecting, connect, disconnect, reset, walletInfosKey]);
   return /* @__PURE__ */ jsx(StacksWalletContext.Provider, { value, children });
 };
 var useStacksWalletContext = () => {
@@ -739,20 +866,28 @@ var useBnsName = (address) => {
       setIsLoading(false);
       return;
     }
+    let cancelled = false;
     const fetchBnsName = async () => {
       setIsLoading(true);
       try {
         const network = getNetworkFromAddress(address);
         const result = await getPrimaryName({ address, network });
+        if (cancelled) return;
         const fullName = result ? `${result.name}.${result.namespace}` : null;
         setBnsName(fullName);
       } catch {
+        if (cancelled) return;
         setBnsName(null);
       } finally {
-        setIsLoading(false);
+        if (!cancelled) {
+          setIsLoading(false);
+        }
       }
     };
     void fetchBnsName();
+    return () => {
+      cancelled = true;
+    };
   }, [address]);
   return { bnsName, isLoading };
 };