@sodax/wallet-sdk-react 1.3.1-beta → 1.4.1-beta

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sodax/wallet-sdk-react",
   "license": "MIT",
-  "version": "1.3.1-beta",
+  "version": "1.4.1-beta",
   "description": "Wallet SDK of Sodax",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,6 +23,9 @@
     "url": "https://github.com/icon-project/sodax-frontend"
   },
   "dependencies": {
+    "@stacks/connect": "8.2.6",
+    "@stacks/network": "7.3.1",
+    "@stacks/transactions": "7.3.1",
     "@creit.tech/stellar-wallets-kit": "^1.7.5",
     "@hot-labs/near-connect": "0.10.0",
     "@injectivelabs/networks": "1.16.10",
@@ -48,8 +51,8 @@
     "wagmi": "2.16.9",
     "zustand": "4.5.2",
     "bs58": "6.0.0",
-    "@sodax/types": "1.3.1-beta",
-    "@sodax/wallet-sdk-core": "1.3.1-beta"
+    "@sodax/wallet-sdk-core": "1.4.1-beta",
+    "@sodax/types": "1.4.1-beta"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",

package/src/Hydrate.ts

@@ -7,8 +7,11 @@ import { SolanaXService } from './xchains/solana/SolanaXService';
 import { SuiXService } from './xchains/sui';
 import { useConnection, useWallet } from '@solana/wallet-adapter-react';
 import { useConfig } from 'wagmi';
+import { StacksXService } from './xchains/stacks/StacksXService';
+import { createNetwork } from '@stacks/network';
+import type { RpcConfig } from '@sodax/types';
 
-export const Hydrate = () => {
+export const Hydrate = ({ rpcConfig }: { rpcConfig: RpcConfig }) => {
   // sui
   const suiClient = useSuiClient();
   useEffect(() => {
@@ -51,5 +54,12 @@ export const Hydrate = () => {
     }
   }, [wagmiConfig]);
 
+  // stacks
+  useEffect(() => {
+    StacksXService.getInstance().network = createNetwork({
+      network: 'mainnet',
+      client: { baseUrl: rpcConfig.stacks ?? 'https://api.mainnet.hiro.so' },
+    });
+  }, [rpcConfig.stacks]);
   return null;
 };

package/src/SodaxWalletProvider.tsx

@@ -41,7 +41,7 @@ export const SodaxWalletProvider = ({ children, rpcConfig }: { children: React.R
           <SuiWalletProvider autoConnect={true}>
             <SolanaConnectionProvider endpoint={rpcConfig['solana'] ?? 'https://api.mainnet-beta.solana.com'}>
               <SolanaWalletProvider wallets={wallets} autoConnect>
-                <Hydrate />
+                <Hydrate rpcConfig={rpcConfig} />
                 {children}
               </SolanaWalletProvider>
             </SolanaConnectionProvider>

package/src/actions/getXService.ts

@@ -5,6 +5,7 @@ import { SuiXService } from '..';
 import { EvmXService } from '..';
 import type { XService } from '../core';
 import { NearXService } from '../xchains/near/NearXService';
+import { StacksXService } from '../xchains/stacks/StacksXService';
 
 export function getXService(xChainType: ChainType): XService {
   switch (xChainType) {
@@ -24,6 +25,8 @@ export function getXService(xChainType: ChainType): XService {
       return StellarXService.getInstance();
     case 'NEAR':
       return NearXService.getInstance();
+    case 'STACKS':
+      return StacksXService.getInstance();
     default:
       throw new Error(`Unsupported chain type: ${xChainType}`);
   }

package/src/hooks/useWalletProvider.ts

@@ -5,6 +5,7 @@ import type {
   IInjectiveWalletProvider,
   INearWalletProvider,
   ISolanaWalletProvider,
+  IStacksWalletProvider,
   IStellarWalletProvider,
   ISuiWalletProvider,
   IBitcoinWalletProvider,
@@ -20,14 +21,18 @@ import {
   StellarWalletProvider,
   SolanaWalletProvider,
   NearWalletProvider,
+  StacksWalletProvider,
 } from '@sodax/wallet-sdk-core';
 import { getXChainType } from '../actions';
 import { usePublicClient, useWalletClient } from 'wagmi';
-import { type SolanaXService, type StellarXService, useXAccount, useXService, useXConnection } from '..';
+import { type SolanaXService, type StellarXService, useXAccount, useXService } from '..';
 import type { SuiXService } from '../xchains/sui/SuiXService';
 import { CHAIN_INFO, SupportedChainId } from '../xchains/icon/IconXService';
 import type { InjectiveXService } from '../xchains/injective/InjectiveXService';
 import type { NearXService } from '../xchains/near/NearXService';
+import { useXConnection } from './useXConnection';
+import { useXConnectors } from './useXConnectors';
+import type { StacksXConnector } from '../xchains/stacks';
 
 /**
  * Hook to get the appropriate wallet provider based on the chain type.
@@ -57,6 +62,7 @@ export function useWalletProvider(
   | ISolanaWalletProvider
   | IBitcoinWalletProvider
   | INearWalletProvider
+  | IStacksWalletProvider
   | undefined {
   const xChainType = getXChainType(spokeChainId);
   // EVM-specific hooks
@@ -67,6 +73,8 @@ export function useWalletProvider(
   // Cross-chain hooks
   const xService = useXService(getXChainType(spokeChainId));
   const xAccount = useXAccount(spokeChainId);
+  const stacksConnection = useXConnection('STACKS');
+  const stacksConnectors = useXConnectors('STACKS');
   const xConnection = useXConnection(xChainType);
 
   return useMemo(() => {
@@ -152,11 +160,14 @@ export function useWalletProvider(
 
       case 'BITCOIN': {
         if (!xConnection?.xConnectorId) return undefined;
-        const connector = BitcoinXService.getInstance().getXConnectorById(xConnection.xConnectorId) as BitcoinXConnector | undefined;
+        const connector = BitcoinXService.getInstance().getXConnectorById(xConnection.xConnectorId) as
+          | BitcoinXConnector
+          | undefined;
         if (!connector) return undefined;
         // Recreate from window extension object — works after page reload without reconnect
         return connector.recreateWalletProvider(xConnection.xAccount);
       }
+
       case 'NEAR': {
         const nearXService = xService as NearXService;
         if (!nearXService.walletSelector) {
@@ -166,8 +177,30 @@ export function useWalletProvider(
         return new NearWalletProvider({ wallet: nearXService.walletSelector });
       }
 
+      case 'STACKS': {
+        const address = xAccount.address;
+        if (!address) {
+          return undefined;
+        }
+
+        const activeStacksConnector = stacksConnectors.find(c => c.id === stacksConnection?.xConnectorId) as
+          | StacksXConnector
+          | undefined;
+
+        return new StacksWalletProvider({ address, provider: activeStacksConnector?.getProvider() });
+      }
+
       default:
         return undefined;
     }
-  }, [xChainType, evmPublicClient, evmWalletClient, xService, xAccount, xConnection]);
+  }, [
+    xChainType,
+    evmPublicClient,
+    evmWalletClient,
+    xService,
+    xAccount,
+    stacksConnection,
+    stacksConnectors,
+    xConnection,
+  ]);
 }

package/src/hooks/useXConnectors.ts

@@ -10,6 +10,7 @@ import { useStellarXConnectors } from '../xchains/stellar/useStellarXConnectors'
 import { SuiXConnector } from '../xchains/sui';
 import { useXService } from './useXService';
 import { useNearXConnectors } from '../xchains/near/useNearXConnectors';
+import { useStacksXConnectors } from '../xchains/stacks/useStacksXConnectors';
 
 /**
  * Hook to retrieve available wallet connectors for a specific blockchain type.
@@ -20,7 +21,7 @@ import { useNearXConnectors } from '../xchains/near/useNearXConnectors';
  * - Stellar: Uses custom Stellar connectors
  * - Solana: Uses Solana wallet adapters (filtered to installed wallets only)
  *
- * @param xChainType - The blockchain type to get connectors for ('EVM' | 'SUI' | 'STELLAR' | 'SOLANA' | 'NEAR')
+ * @param xChainType - The blockchain type to get connectors for ('EVM' | 'SUI' | 'STELLAR' | 'SOLANA' | 'NEAR' | 'STACKS')
  * @returns An array of XConnector instances compatible with the specified chain type
  */
 
@@ -30,6 +31,7 @@ export function useXConnectors(xChainType: ChainType | undefined): XConnector[]
   const suiWallets = useWallets();
   const { data: stellarXConnectors } = useStellarXConnectors();
   const { data: nearXConnectors } = useNearXConnectors();
+  const stacksXConnectors = useStacksXConnectors();
   const { wallets: solanaWallets } = useWallet();
 
   const xConnectors = useMemo((): XConnector[] => {
@@ -50,10 +52,21 @@ export function useXConnectors(xChainType: ChainType | undefined): XConnector[]
           .map(wallet => new SolanaXConnector(wallet));
       case 'NEAR':
         return nearXConnectors || [];
+      case 'STACKS':
+        return stacksXConnectors;
       default:
         return xService.getXConnectors();
     }
-  }, [xService, xChainType, evmConnectors, suiWallets, stellarXConnectors, solanaWallets, nearXConnectors]);
+  }, [
+    xService,
+    xChainType,
+    evmConnectors,
+    suiWallets,
+    stellarXConnectors,
+    solanaWallets,
+    nearXConnectors,
+    stacksXConnectors,
+  ]);
 
   return xConnectors;
 }

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './xchains/injective';
 export * from './xchains/solana';
 export * from './xchains/stellar';
 export * from './xchains/sui';
+export * from './xchains/stacks';
 export * from './hooks';
 export * from './useXWagmiStore';
 export * from './SodaxWalletProvider';

package/src/useXWagmiStore.ts

@@ -18,6 +18,7 @@ import { UnisatXConnector } from './xchains/bitcoin/UnisatXConnector';
 import { XverseXConnector } from './xchains/bitcoin/XverseXConnector';
 import { OKXXConnector } from './xchains/bitcoin/OKXXConnector';
 import { NearXService } from './xchains/near/NearXService';
+import { StacksXService, StacksXConnector, STACKS_PROVIDERS } from './xchains/stacks';
 
 type XWagmiStore = {
   xServices: Partial<Record<ChainType, XService>>;
@@ -29,7 +30,7 @@ type XWagmiStore = {
 
 const initXServices = () => {
   const xServices = {};
-  ['EVM', 'BITCOIN', 'INJECTIVE', 'STELLAR', 'SUI', 'SOLANA', 'ICON', 'NEAR'].forEach(key => {
+  ['EVM', 'BITCOIN', 'INJECTIVE', 'STELLAR', 'SUI', 'SOLANA', 'ICON', 'NEAR', 'STACKS'].forEach(key => {
     const xChainType = key as ChainType;
 
     switch (xChainType) {
@@ -72,6 +73,10 @@ const initXServices = () => {
         xServices[xChainType] = NearXService.getInstance();
         xServices[xChainType].setXConnectors([]);
         break;
+      case 'STACKS':
+        xServices[xChainType] = StacksXService.getInstance();
+        xServices[xChainType].setXConnectors(STACKS_PROVIDERS.map(config => new StacksXConnector(config)));
+        break;
       default:
         break;
     }

package/src/utils/index.ts

@@ -9,6 +9,7 @@ export const isNativeToken = (xToken: XToken) => {
     'hx0000000000000000000000000000000000000000',
     '11111111111111111111111111111111', // solana
     'CAS3J7GYLGXMF6TDJBBYYSE3HQ6BBSMLNUQ34T6TZMYMW2EVH34XOWMA', // stellar
+    'ST000000000000000000002AMW42H.nativetoken', // stacks
     '0:0', // bitcoin
   ];
 

package/src/xchains/stacks/StacksXConnector.ts

@@ -0,0 +1,63 @@
+import type { XAccount } from '@/types';
+import { XConnector } from '@/core';
+import type { StacksProvider } from '@stacks/connect';
+import { request, disconnect } from '@stacks/connect';
+
+export interface StacksProviderConfig {
+  /** The provider ID matching the window path, e.g. 'LeatherProvider' or 'XverseProviders.BitcoinProvider' */
+  id: string;
+  name: string;
+  icon: string;
+  installUrl?: string;
+}
+
+/** Resolves a provider from `window` by dot-separated ID, matching @stacks/connect-ui's getProviderFromId */
+function getProviderFromId(id: string): StacksProvider | undefined {
+  // biome-ignore lint/suspicious/noExplicitAny: window property traversal requires any
+  return id.split('.').reduce<any>((acc, part) => acc?.[part], window) as StacksProvider | undefined;
+}
+
+export class StacksXConnector extends XConnector {
+  private readonly config: StacksProviderConfig;
+
+  constructor(config: StacksProviderConfig) {
+    super('STACKS', config.name, config.id);
+    this.config = config;
+  }
+
+  async connect(): Promise<XAccount | undefined> {
+    const provider = this.getProvider();
+
+    if (!provider) {
+      if (this.config.installUrl) {
+        window.open(this.config.installUrl, '_blank');
+      }
+      return undefined;
+    }
+
+    const response = await request({ provider }, 'stx_getAddresses');
+    // @ts-ignore
+    const stxAddress = response.addresses.find(a => a.purpose === 'stacks');
+
+    if (!stxAddress) {
+      return undefined;
+    }
+
+    return {
+      address: stxAddress.address,
+      xChainType: this.xChainType,
+    };
+  }
+
+  async disconnect(): Promise<void> {
+    disconnect();
+  }
+
+  public get icon(): string {
+    return this.config.icon;
+  }
+
+  public getProvider(): StacksProvider | undefined {
+    return getProviderFromId(this.config.id);
+  }
+}

package/src/xchains/stacks/StacksXService.ts

@@ -0,0 +1,59 @@
+import { XService } from '@/core/XService';
+import type { XToken } from '@sodax/types';
+import { fetchCallReadOnlyFunction, Cl, type UIntCV, type ResponseOkCV } from '@stacks/transactions';
+import { networkFrom, type StacksNetwork } from '@stacks/network';
+
+export class StacksXService extends XService {
+  private static instance: StacksXService;
+
+  public network: StacksNetwork | undefined;
+
+  private constructor() {
+    super('STACKS');
+    this.network = networkFrom('mainnet');
+  }
+
+  public static getInstance(): StacksXService {
+    if (!StacksXService.instance) {
+      StacksXService.instance = new StacksXService();
+    }
+    return StacksXService.instance;
+  }
+
+  async getBalance(address: string | undefined, xToken: XToken): Promise<bigint> {
+    if (!address) return 0n;
+
+    // native STX balance
+    if (xToken.symbol === 'STX') {
+      const url = `${this.network?.client.baseUrl}/extended/v1/address/${address}/balances`;
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Error fetching data: ${response.statusText}`);
+        }
+        const data = await response.json();
+        return BigInt(data.stx.balance);
+      } catch (error) {
+        console.error('Error fetching STX balance:', error);
+        return 0n;
+      }
+    }
+
+    // SIP-010 fungible token balance via read-only contract call
+    const [contractAddress, contractName] = xToken.address.split('.');
+    try {
+      const result = (await fetchCallReadOnlyFunction({
+        contractAddress,
+        contractName,
+        functionName: 'get-balance',
+        functionArgs: [Cl.principal(address)],
+        network: this.network,
+        senderAddress: address,
+      })) as ResponseOkCV<UIntCV>;
+      return result.value.value as bigint;
+    } catch (error) {
+      console.error('Error fetching token balance:', error);
+      return 0n;
+    }
+  }
+}

package/src/xchains/stacks/constants.ts

@@ -0,0 +1,42 @@
+import type { StacksProviderConfig } from './StacksXConnector';
+
+// Icons sourced from @stacks/connect DEFAULT_PROVIDERS
+// https://github.com/stx-labs/connect/blob/main/packages/connect/src/providers.ts
+const LEATHER_ICON =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiByeD0iMjYuODM4NyIgZmlsbD0iIzEyMTAwRiIvPgo8cGF0aCBkPSJNNzQuOTE3MSA1Mi43MTE0QzgyLjQ3NjYgNTEuNTQwOCA5My40MDg3IDQzLjU4MDQgOTMuNDA4NyAzNy4zNzYxQzkzLjQwODcgMzUuNTAzMSA5MS44OTY4IDM0LjIxNTQgODkuNjg3MSAzNC4yMTU0Qzg1LjUwMDQgMzQuMjE1NCA3OC40MDYxIDQwLjUzNjggNzQuOTE3MSA1Mi43MTE0Wk0zOS45MTEgODMuNDk5MUMzMC4wMjU2IDgzLjQ5OTEgMjkuMjExNSA5My4zMzI0IDM5LjA5NjkgOTMuMzMyNEM0My41MTYzIDkzLjMzMjQgNDguODY2MSA5MS41NzY0IDUxLjY1NzMgODguNDE1N0M0Ny41ODY4IDg0LjkwMzggNDQuMjE0MSA4My40OTkxIDM5LjkxMSA4My40OTkxWk0xMDIuODI5IDc5LjI4NDhDMTAzLjQxIDk1Ljc5MDcgOTUuMDM2OSAxMDUuMDM5IDgwLjg0ODQgMTA1LjAzOUM3Mi40NzQ4IDEwNS4wMzkgNjguMjg4MSAxMDEuODc4IDU5LjMzMyA5Ni4wMjQ5QzU0LjY4MSAxMDEuMTc2IDQ1Ljg0MjMgMTA1LjAzOSAzOC41MTU0IDEwNS4wMzlDMTMuMjc4NSAxMDUuMDM5IDE0LjMyNTIgNzIuODQ2MyA0MC4wMjczIDcyLjg0NjNDNDUuMzc3MSA3Mi44NDYzIDQ5LjkxMjggNzQuMjUxMSA1NS43Mjc3IDc3Ljg4TDU5LjU2NTYgNjQuNDE3N0M0My43NDg5IDYwLjA4NjQgMzUuODQwNSA0Ny45MTE4IDQzLjYzMjYgMzAuNDY5M0g1Ni4xOTI5QzQ5LjIxNSA0Mi4wNTg2IDUzLjk4MzIgNTEuNjU3OCA2Mi44MjIgNTIuNzExNEM2Ny41OTAzIDM1LjczNzIgNzcuODI0NiAyMi41MDkgOTEuNDMxNiAyMi41MDlDOTkuMTA3NCAyMi41MDkgMTA1LjE1NSAyNy41NDI4IDEwNS4xNTUgMzYuNjczN0MxMDUuMTU1IDUxLjMwNjYgODYuMDgxOSA2My4yNDcxIDcxLjY2MDcgNjQuNDE3N0w2NS43Mjk1IDg1LjM3MjFDNzIuNDc0OCA5My4yMTUzIDkxLjE5OSAxMDAuODI0IDkxLjE5OSA3OS4yODQ4SDEwMi44MjlaIiBmaWxsPSIjRjVGMUVEIi8+Cjwvc3ZnPgo=';
+
+const XVERSE_ICON =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiMxNzE3MTciIGQ9Ik0wIDBoNjAwdjYwMEgweiIvPjxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTQ0MCA0MzUuNHYtNTFjMC0yLS44LTMuOS0yLjItNS4zTDIyMCAxNjIuMmE3LjYgNy42IDAgMCAwLTUuNC0yLjJoLTUxLjFjLTIuNSAwLTQuNiAyLTQuNiA0LjZ2NDcuM2MwIDIgLjggNCAyLjIgNS40bDc4LjIgNzcuOGE0LjYgNC42IDAgMCAxIDAgNi41bC03OSA3OC43Yy0xIC45LTEuNCAyLTEuNCAzLjJ2NTJjMCAyLjQgMiA0LjUgNC42IDQuNUgyNDljMi42IDAgNC42LTIgNC42LTQuNlY0MDVjMC0xLjIuNS0yLjQgMS40LTMuM2w0Mi40LTQyLjJhNC42IDQuNiAwIDAgMSA2LjQgMGw3OC43IDc4LjRhNy42IDcuNiAwIDAgMCA1LjQgMi4yaDQ3LjVjMi41IDAgNC42LTIgNC42LTQuNloiLz48cGF0aCBmaWxsPSIjRUU3QTMwIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0zMjUuNiAyMjcuMmg0Mi44YzIuNiAwIDQuNiAyLjEgNC42IDQuNnY0Mi42YzAgNCA1IDYuMSA4IDMuMmw1OC43LTU4LjVjLjgtLjggMS4zLTIgMS4zLTMuMnYtNTEuMmMwLTIuNi0yLTQuNi00LjYtNC42TDM4NCAxNjBjLTEuMiAwLTIuNC41LTMuMyAxLjNsLTU4LjQgNTguMWE0LjYgNC42IDAgMCAwIDMuMiA3LjhaIi8+PC9nPjwvc3ZnPg==';
+
+const ASIGNA_ICON =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzAwMDEwMCIgZD0iTTAgMGgzMnYzMkgweiIvPjxwYXRoIGZpbGw9InVybCgjYSkiIGQ9Ik0xNS4xMSA1LjU1YTMgMyAwIDAgMC0xLjgyIDEuM2wtLjA1LjA4LS40My43Mi0uMDcuMTEtLjUuODUtLjA1LjA5LTEuMjkgMi4xOC0uMDQuMDctLjQ3LjgtLjA2LjEtLjQ2Ljc4LS4wNy4xMS0xLjYzIDIuNzYtLjA3LjExLS4zOC42Ni0uMDUuMDgtLjczIDEuMjQtLjM1LjYtLjQuNjctLjA1LjA5TDUuMSAyMC43bC0uMTEuMTgtLjE0LjIzLS4wNy4xMy0uMzMuNTUtLjA0LjA3di4wMWExLjI2IDEuMjYgMCAwIDAtLjE0LjQ3IDEuMzEgMS4zMSAwIDAgMCAxLjI0IDEuNGgxLjVsLjA1LS4wNi4wNC0uMDYuODctMS4yMS4wNS0uMDguNzctMS4wNy4wNS0uMDcuNC0uNTcuMDUtLjA2LjI0LS4zNGExLjUyIDEuNTIgMCAwIDEgMS4zOS0uNjIgMS41IDEuNSAwIDAgMSAuNjQuMiAxLjQ3IDEuNDcgMCAwIDEgLjczIDEuMjcgMS40NCAxLjQ0IDAgMCAxLS4yNy44NGwtLjYzLjg4LS4wNS4wNy0uMzIuNDUtLjA2LjA4LS4wOC4xMi0uMTIuMTYtLjA1LjA4aDIuMTNhMi4zMiAyLjMyIDAgMCAwIDEuNzctLjk2bDEuMTgtMS42My43Ny0xLjA4IDEuMy0xLjhhMS4yNCAxLjI0IDAgMCAxIC41NS0uNDNsLjA4LS4wM2ExLjMgMS4zIDAgMCAxIC4zLS4wNiAxLjI4IDEuMjggMCAwIDEgMS4xNS41NGwuMTEuMmExLjEzIDEuMTMgMCAwIDEgLjEuNDEgMS4xOSAxLjE5IDAgMCAxLS4yMy43N2wtLjAzLjA1LS41Ny44LS43Ljk4LS4yNy4zN2ExLjIyIDEuMjIgMCAwIDAtLjIuNSAxLjA1IDEuMDUgMCAwIDAtLjAyLjIzdi4wNmExLjE3IDEuMTcgMCAwIDAgLjE0LjQzbC4wMi4wNS4wNy4xYTEuNDQgMS40NCAwIDAgMCAuMS4xMWwuMDUuMDYuMDEuMDFhMS44IDEuOCAwIDAgMCAuMTQuMWMwIC4wMi4wMi4wMy4wNC4wM2ExIDEgMCAwIDAgLjA4LjA1bC4wNy4wNGExLjI1IDEuMjUgMCAwIDAgLjUuMWg2LjljLjEgMCAuMi0uMDEuMjktLjAzbC4wNi0uMDJhMS4yNyAxLjI3IDAgMCAwIC4yNy0uMS41Ny41NyAwIDAgMCAuMDctLjAzIDEuMjEgMS4yMSAwIDAgMCAuMjYtLjE5bC4wOC0uMDdhLjkyLjkyIDAgMCAwIC4xNS0uMTkgMS41NSAxLjU1IDAgMCAwIC4wOS0uMTdsLjAyLS4wNWExLjIyIDEuMjIgMCAwIDAgLjA4LS4yNnYtLjA0bC4wMi0uMDh2LS4wOGExLjMyIDEuMzIgMCAwIDAtLjItLjc0bC0xLjYtMi42NC0uMDYtLjEtLjItLjMyLS4zMy0uNTR2LS4wMWwtLjA1LS4wOC0xLjMtMi4xNS0uMDctLjEtLjA0LS4wNi0uOC0xLjMyLS4wNC0uMDctLjItLjM0LS4xLS4xNC0uMS0uMTYtLjUzLS45LS4xMy0uMi0uMDktLjE0LTIuMTctMy41Ny0uMDQtLjA3LS43Mi0xLjE5LS4wNS0uMDctLjQtLjY1YTIuNjUgMi42NSAwIDAgMC0uMy0uNCAyLjk2IDIuOTYgMCAwIDAtLjk3LS43NCAzLjA0IDMuMDQgMCAwIDAtMS4zLS4zYy0uMjUgMC0uNS4wNC0uNzQuMVoiLz48cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMTkgMTYuM2E1LjQ1IDUuNDUgMCAwIDAtLjgzIDEuNTZsLS4wNC4xNWExLjM2IDEuMzYgMCAwIDEgLjI4LS4xNiAxLjI0IDEuMjQgMCAwIDEgLjM4LS4wOGguMWExLjI4IDEuMjggMCAwIDEgMS4wNS41NGMuMDQuMDYuMDguMTMuMS4yYTEuMjQgMS4yNCAwIDAgMSAuMDkuMjcgMS4xOSAxLjE5IDAgMCAxLS4yLjkxbC0uMDQuMDUtLjU3Ljc5LS43Ljk5LS4yNy4zN2ExLjIzIDEuMjMgMCAwIDAtLjIuNDIgMS4wNiAxLjA2IDAgMCAwLS4wMi4zMXYuMDZhMS4xNyAxLjE3IDAgMCAwIC4xNi40Ny45My45MyAwIDAgMCAuMDcuMSAxLjUgMS41IDAgMCAwIC4xLjEybC4wNS4wNmguMDFhMS45NCAxLjk0IDAgMCAwIC4wOS4wOCAxIDEgMCAwIDAgLjE3LjFsLjA3LjA0YTEuMjUgMS4yNSAwIDAgMCAuNS4xaDYuOWMuMSAwIC4yIDAgLjI4LS4wMmwuMDctLjAyYTEuMzIgMS4zMiAwIDAgMCAuMzQtLjEzbC4xNi0uMS4wMy0uMDNhMS4yOSAxLjI5IDAgMCAwIC4yLS4yIDIuNDMgMi40MyAwIDAgMCAuMTItLjE3Yy4wMy0uMDMuMDUtLjA4LjA3LS4xMmwuMDItLjA1YTEuMjEgMS4yMSAwIDAgMCAuMDktLjN2LS4wOGwuMDEtLjA5YTEuMzIgMS4zMiAwIDAgMC0uMi0uNzNsLTEuNi0yLjY0LS4wNi0uMS0uMi0uMzItLjMzLS41NHYtLjAybC0uMDUtLjA3LTEuMy0yLjE1LS4xMi0uMDctLjA3LS4wNGE0Ljk0IDQuOTQgMCAwIDAtMi40Ni0uNjdjLTEuMDMgMC0xLjc2LjU3LTIuMjYgMS4yWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMi4yOSAyMS4wOGMwIC4yOS0uMDkuNTgtLjI3Ljg0bC0xLjMxIDEuODRIN2wyLjUyLTMuNTNhMS41NCAxLjU0IDAgMCAxIDIuMS0uMzZjLjQzLjI4LjY2Ljc0LjY2IDEuMloiLz48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTEuMTYgMjEuMjVhLjU2LjU2IDAgMCAxLS41Ny41NS41Ni41NiAwIDAgMS0uNTctLjU2LjU2LjU2IDAgMCAxIC41Ny0uNTUuNTYuNTYgMCAwIDEgLjU3LjU2WiIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjE1LjIzIiB4Mj0iMTkuMyIgeTE9IjI1Ljc4IiB5Mj0iNi4xMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM2NTIyRjQiLz48c3RvcCBvZmZzZXQ9Ii41NSIgc3RvcC1jb2xvcj0iIzlCNkJGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0E1ODVGRiIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMjIuNTkiIHgyPSIyNC44IiB5MT0iMjQuNzEiIHkyPSIxNS41MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiM0MjFGOEIiLz48c3RvcCBvZmZzZXQ9Ii41NSIgc3RvcC1jb2xvcj0iIzcyMzBGRiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzk3NzNGRiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==';
+
+const FORDEFI_ICON =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iNDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbD0iIzEwMTExNCIgZD0iTTAgMGg0MnY0MkgweiIvPgogIDxwYXRoIGQ9Ik0xOS40NyAyNi44OUg1djMuNTdhNC41NyA0LjU3IDAgMCAwIDQuNTggNC41N2g1LjgzbDQuMDYtOC4xNFoiIGZpbGw9IiM3OTk0RkYiLz4KICA8cGF0aCBkPSJNNSAxNy40aDI3LjU4bC0zLjIgNi43OEg1VjE3LjRaIiBmaWxsPSIjNDg2REZGIi8+CiAgPHBhdGggZD0iTTE0LjY3IDdINXY3LjY4aDMzVjdoLTkuNjd2NS43NGgtMlY3aC05LjY3djUuNzRoLTEuOTlWN1oiIGZpbGw9IiM1Q0QxRkEiLz4KPC9zdmc+Cg==';
+
+export const STACKS_PROVIDERS: StacksProviderConfig[] = [
+  {
+    id: 'LeatherProvider',
+    name: 'Leather',
+    icon: LEATHER_ICON,
+    installUrl: 'https://chrome.google.com/webstore/detail/hiro-wallet/ldinpeekobnhjjdofggfgjlcehhmanlj',
+  },
+  {
+    id: 'XverseProviders.BitcoinProvider',
+    name: 'Xverse Wallet',
+    icon: XVERSE_ICON,
+    installUrl: 'https://chrome.google.com/webstore/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg',
+  },
+  {
+    id: 'AsignaProvider',
+    name: 'Asigna Multisig',
+    icon: ASIGNA_ICON,
+    installUrl: 'https://stx.asigna.io/',
+  },
+  {
+    id: 'FordefiProviders.UtxoProvider',
+    name: 'Fordefi',
+    icon: FORDEFI_ICON,
+    installUrl: 'https://chromewebstore.google.com/detail/fordefi/hcmehenccjdmfbojapcbcofkgdpbnlle',
+  },
+];

package/src/xchains/stacks/index.ts

@@ -0,0 +1,4 @@
+export { StacksXService } from './StacksXService';
+export { StacksXConnector, type StacksProviderConfig } from './StacksXConnector';
+export { STACKS_PROVIDERS } from './constants';
+export { useStacksXConnectors } from './useStacksXConnectors';

package/src/xchains/stacks/useStacksXConnectors.ts

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+import { StacksXConnector } from './StacksXConnector';
+import { STACKS_PROVIDERS } from './constants';
+
+export function useStacksXConnectors(): StacksXConnector[] {
+  return useMemo(() => STACKS_PROVIDERS.map(config => new StacksXConnector(config)), []);
+}