@sodax/wallet-sdk-react 0.0.1-rc.2

package/src/hooks/useEthereumChainId.ts

@@ -0,0 +1,36 @@
+import type { InjectiveXService } from '@/xchains/injective';
+import { Wallet } from '@injectivelabs/wallet-base';
+import React from 'react';
+import { useEffect } from 'react';
+import { useXService } from './useXService';
+import type { EvmWalletStrategy } from '@injectivelabs/wallet-evm';
+
+/**
+ * React hook that returns the current Ethereum chain ID when using MetaMask wallet for Injective.
+ * Listens for chain changes and updates the state accordingly.
+ *
+ * @remarks
+ * This hook only works with MetaMask wallet and requires the window.ethereum provider to be available.
+ * For other wallets or when MetaMask is not available, it returns null.
+ *
+ * @returns The current Ethereum chain ID as a number, or null if not available/connected
+ */
+export default function useEthereumChainId(): number | null {
+  const injectiveXService = useXService('INJECTIVE') as unknown as InjectiveXService;
+  const [ethereumChainId, setEthereumChainId] = React.useState<number | null>(null);
+  useEffect(() => {
+    if (!injectiveXService?.walletStrategy?.getWallet()) return;
+    const walletStrategy = injectiveXService.walletStrategy;
+    if (walletStrategy.getWallet() !== Wallet.Metamask) return;
+
+    const getEthereumChainId = async () => {
+      const chainId = await walletStrategy.getEthereumChainId();
+      setEthereumChainId(Number.parseInt(chainId));
+    };
+    getEthereumChainId();
+
+    (walletStrategy.getStrategy() as EvmWalletStrategy).onChainIdChanged(getEthereumChainId);
+  }, [injectiveXService?.walletStrategy]);
+
+  return ethereumChainId;
+}

package/src/hooks/useEvmSwitchChain.ts

@@ -0,0 +1,92 @@
+import { xChainMap } from '@/constants/xChains';
+import { useCallback, useMemo } from 'react';
+import { useAccount, useSwitchChain } from 'wagmi';
+import type { ChainId } from '@sodax/types';
+import { getXChainType } from '@/actions';
+import type { InjectiveXService } from '@/xchains/injective';
+import { useXService } from '@/hooks/useXService';
+import useEthereumChainId from './useEthereumChainId';
+import { mainnet } from 'viem/chains';
+import { Wallet } from '@injectivelabs/wallet-base';
+
+interface UseEvmSwitchChainReturn {
+  isWrongChain: boolean;
+  handleSwitchChain: () => void;
+}
+
+/**
+ * Hook to handle EVM chain switching functionality
+ *
+ * @param expectedXChainId - The target chain ID to switch to (e.g. '0xa.optimism', '0x89.polygon')
+ * @returns {Object} Object containing:
+ *   - isWrongChain: boolean indicating if current chain differs from expected chain
+ *   - handleSwitchChain: function to trigger chain switch to expected chain
+ *
+ * @example
+ * ```tsx
+ * function ChainSwitchButton({ targetChain }: { targetChain: ChainId }) {
+ *   const { isWrongChain, handleSwitchChain } = useEvmSwitchChain(targetChain);
+ *
+ *   return (
+ *     <Button onClick={handleSwitchChain} disabled={!isWrongChain}>
+ *       Switch Network
+ *     </Button>
+ *   );
+ * }
+ * ```
+ */
+
+export const switchEthereumChain = async () => {
+  const metamaskProvider = (window as any).ethereum as any;
+
+  return await Promise.race([
+    metamaskProvider.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: '0x1' }],
+    }),
+    new Promise<void>(resolve =>
+      metamaskProvider.on('change', ({ chain }: { chain: { id: number } }) => {
+        if (chain?.id === 1) {
+          resolve();
+        }
+      }),
+    ),
+  ]);
+};
+
+export const useEvmSwitchChain = (expectedXChainId: ChainId): UseEvmSwitchChainReturn => {
+  const xChainType = getXChainType(expectedXChainId);
+  const expectedChainId = xChainMap[expectedXChainId].id as number;
+
+  const injectiveXService = useXService('INJECTIVE') as unknown as InjectiveXService;
+  const ethereumChainId = useEthereumChainId();
+
+  const { chainId } = useAccount();
+  const isWrongChain = useMemo(() => {
+    return (
+      (xChainType === 'EVM' && chainId !== expectedChainId) ||
+      (xChainType === 'INJECTIVE' &&
+        injectiveXService &&
+        injectiveXService.walletStrategy.getWallet() === Wallet.Metamask &&
+        ethereumChainId !== mainnet.id)
+    );
+  }, [xChainType, chainId, expectedChainId, ethereumChainId, injectiveXService]);
+
+  const { switchChain } = useSwitchChain();
+
+  const handleSwitchChain = useCallback(() => {
+    if (xChainType === 'INJECTIVE') {
+      switchEthereumChain();
+    } else {
+      switchChain({ chainId: expectedChainId });
+    }
+  }, [switchChain, expectedChainId, xChainType]);
+
+  return useMemo(
+    () => ({
+      isWrongChain,
+      handleSwitchChain,
+    }),
+    [isWrongChain, handleSwitchChain],
+  );
+};

package/src/hooks/useWalletProvider.ts

@@ -0,0 +1,149 @@
+import type { ChainId } from '@sodax/types';
+import { useMemo } from 'react';
+import {
+  EvmWalletProvider,
+  IconWalletProvider,
+  SuiWalletProvider,
+  InjectiveWalletProvider,
+  StellarWalletProvider,
+  SolanaWalletProvider,
+} from '@sodax/wallet-sdk-core';
+import { getXChainType } from '../actions';
+import type { InjectiveEoaAddress } from '@sodax/types';
+import { usePublicClient, useWalletClient } from 'wagmi';
+import { getWagmiChainId } from '../utils';
+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';
+
+/**
+ * Hook to get the appropriate wallet provider based on the chain type.
+ * Supports EVM, SUI, ICON and INJECTIVE chains.
+ *
+ * @param {ChainId | undefined} spokeChainId - The chain ID to get the wallet provider for. Can be any valid ChainId value.
+ * @returns {EvmWalletProvider | SuiWalletProvider | IconWalletProvider | InjectiveWalletProvider | undefined}
+ * The appropriate wallet provider instance for the given chain ID, or undefined if:
+ * - No chain ID is provided
+ * - Chain type is not supported
+ * - Required wallet provider options are not available
+ *
+ * @example
+ * ```tsx
+ * // Get wallet provider for a specific chain
+ * const walletProvider = useWalletProvider('sui');
+ * ```
+ */
+export function useWalletProvider(
+  spokeChainId: ChainId | undefined,
+):
+  | EvmWalletProvider
+  | SuiWalletProvider
+  | IconWalletProvider
+  | InjectiveWalletProvider
+  | StellarWalletProvider
+  | SolanaWalletProvider
+  | undefined {
+  const xChainType = getXChainType(spokeChainId);
+
+  // EVM-specific hooks
+  const evmPublicClient = usePublicClient({
+    chainId: spokeChainId ? getWagmiChainId(spokeChainId) : undefined,
+  });
+  const { data: evmWalletClient } = useWalletClient({
+    chainId: spokeChainId ? getWagmiChainId(spokeChainId) : undefined,
+  });
+
+  // Cross-chain hooks
+  const xService = useXService(getXChainType(spokeChainId));
+  const xAccount = useXAccount(spokeChainId);
+
+  return useMemo(() => {
+    switch (xChainType) {
+      case 'EVM': {
+        if (!evmWalletClient) {
+          return undefined;
+        }
+        if (!evmPublicClient) {
+          return undefined;
+        }
+
+        return new EvmWalletProvider({
+          walletClient: evmWalletClient,
+          publicClient: evmPublicClient,
+        });
+      }
+
+      case 'SUI': {
+        const suiXService = xService as SuiXService;
+        const { client, wallet, account } = {
+          client: suiXService.suiClient,
+          wallet: suiXService.suiWallet,
+          account: suiXService.suiAccount,
+        };
+
+        return new SuiWalletProvider({ client, wallet, account });
+      }
+
+      case 'ICON': {
+        const { walletAddress, rpcUrl } = {
+          walletAddress: xAccount.address,
+          rpcUrl: CHAIN_INFO[SupportedChainId.MAINNET].APIEndpoint,
+        };
+
+        return new IconWalletProvider({
+          walletAddress: walletAddress as `hx${string}` | undefined,
+          rpcUrl: rpcUrl as `http${string}`,
+        });
+      }
+
+      case 'INJECTIVE': {
+        const injectiveXService = xService as InjectiveXService;
+        if (!injectiveXService) {
+          return undefined;
+          // throw new Error('InjectiveXService is not initialized');
+        }
+
+        const { walletAddress, msgBroadcaster } = {
+          walletAddress: xAccount.address,
+          msgBroadcaster: injectiveXService.msgBroadcaster,
+        };
+
+        return new InjectiveWalletProvider({
+          walletAddress: walletAddress as InjectiveEoaAddress | undefined,
+          msgBroadcaster: msgBroadcaster,
+        });
+      }
+
+      case 'STELLAR': {
+        const stellarXService = xService as StellarXService;
+
+        return new StellarWalletProvider({
+          type: 'BROWSER_EXTENSION',
+          walletsKit: stellarXService.walletsKit,
+          network: 'PUBLIC',
+        });
+      }
+
+      case 'SOLANA': {
+        const solanaXService = xService as SolanaXService;
+
+        if (!solanaXService.wallet) {
+          throw new Error('Wallet is not initialized');
+        }
+
+        if (!solanaXService.connection) {
+          throw new Error('Connection is not initialized');
+        }
+
+        return new SolanaWalletProvider({
+          wallet: solanaXService.wallet,
+          connection: solanaXService.connection,
+        });
+      }
+
+      default:
+        return undefined;
+    }
+  }, [xChainType, evmPublicClient, evmWalletClient, xService, xAccount]);
+}

package/src/hooks/useWalletProviderOptions.ts

@@ -0,0 +1,51 @@
+import { getXChainType } from '@/actions';
+import { useMemo } from 'react';
+import { usePublicClient, useWalletClient } from 'wagmi';
+import type { ChainId } from '@sodax/types';
+import { getWagmiChainId } from '../utils';
+import { 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 { getNetworkEndpoints, Network } from '@injectivelabs/networks';
+
+export function useWalletProviderOptions(xChainId: ChainId | undefined) {
+  const xChainType = getXChainType(xChainId);
+
+  const evmPublicClient = usePublicClient({
+    chainId: xChainId ? getWagmiChainId(xChainId) : undefined,
+  });
+  const { data: evmWalletClient } = useWalletClient({
+    chainId: xChainId ? getWagmiChainId(xChainId) : undefined,
+  });
+
+  const xService = useXService(getXChainType(xChainId));
+  const xAccount = useXAccount(xChainId);
+
+  return useMemo(() => {
+    switch (xChainType) {
+      case 'EVM': {
+        return { walletClient: evmWalletClient, publicClient: evmPublicClient };
+      }
+      case 'SUI': {
+        const suiXService = xService as SuiXService;
+        return { client: suiXService.suiClient, wallet: suiXService.suiWallet, account: suiXService.suiAccount };
+      }
+      case 'ICON': {
+        return { walletAddress: xAccount.address, rpcUrl: CHAIN_INFO[SupportedChainId.MAINNET].APIEndpoint };
+      }
+      case 'INJECTIVE': {
+        const injectiveXService = xService as InjectiveXService;
+        const endpoints = getNetworkEndpoints(Network.Mainnet);
+
+        return {
+          walletAddress: xAccount.address,
+          msgBroadcaster: injectiveXService.msgBroadcaster,
+          rpcUrl: endpoints.rpc,
+        };
+      }
+      default:
+        return undefined;
+    }
+  }, [xChainType, evmPublicClient, evmWalletClient, xService, xAccount]);
+}

package/src/hooks/useXAccount.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+import type { ChainId, ChainType } from '@sodax/types';
+
+import type { XAccount } from '../types';
+import { useXConnection } from './useXConnection';
+import { getXChainType } from '../actions';
+
+/**
+ * Hook to get the current connected account for a specific blockchain
+ *
+ * @param chainIdentifier - The blockchain identifier (either chain type like 'EVM' or chain ID like '0xa86a.avax')
+ * @returns {XAccount} The current connected account, or undefined if no account is connected
+ *
+ * @example
+ * ```ts
+ * // Using ChainType (preferred)
+ * const { address } = useXAccount('EVM');
+ *
+ * // Using ChainId
+ * const { address } = useXAccount('0xa86a.avax');
+ *
+ * // Returns: { address: string | undefined, xChainType: ChainType | undefined }
+ * ```
+ */
+function isChainType(chainIdentifier: ChainType | ChainId): chainIdentifier is ChainType {
+  return ['ICON', 'EVM', 'INJECTIVE', 'SUI', 'STELLAR', 'SOLANA'].includes(chainIdentifier);
+}
+
+export function useXAccount(chainIdentifier?: ChainType | ChainId): XAccount {
+  const resolvedChainType: ChainType | undefined = chainIdentifier
+    ? isChainType(chainIdentifier)
+      ? chainIdentifier
+      : getXChainType(chainIdentifier as ChainId)
+    : undefined;
+
+  const xConnection = useXConnection(resolvedChainType);
+
+  const xAccount = useMemo((): XAccount => {
+    if (!resolvedChainType) {
+      return {
+        address: undefined,
+        xChainType: undefined,
+      };
+    }
+
+    return xConnection?.xAccount || { address: undefined, xChainType: resolvedChainType };
+  }, [resolvedChainType, xConnection]);
+
+  return xAccount;
+}

package/src/hooks/useXAccounts.ts

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+
+import type { ChainType } from '@sodax/types';
+import { useCurrentAccount } from '@mysten/dapp-kit';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount } from 'wagmi';
+
+import type { XAccount } from '../types';
+import { useXWagmiStore } from '../useXWagmiStore';
+
+export function useXAccounts() {
+  const xChainTypes = useXWagmiStore(state => Object.keys(state.xServices));
+  const xConnections = useXWagmiStore(state => state.xConnections);
+  const { address: evmAddress } = useAccount();
+  const suiAccount = useCurrentAccount();
+  const solanaWallet = useWallet();
+
+  const xAccounts = useMemo(() => {
+    const result: Partial<Record<ChainType, XAccount>> = {};
+    for (const xChainType of xChainTypes) {
+      const xConnection = xConnections[xChainType];
+
+      if (xConnection?.xAccount) {
+        result[xChainType] = xConnection.xAccount;
+      } else {
+        result[xChainType] = {
+          address: undefined,
+          xChainType,
+        };
+      }
+    }
+
+    if (evmAddress) {
+      result['EVM'] = {
+        address: evmAddress,
+        xChainType: 'EVM',
+      };
+    }
+    if (suiAccount) {
+      result['SUI'] = {
+        address: suiAccount.address,
+        xChainType: 'SUI',
+      };
+    }
+    if (solanaWallet.publicKey) {
+      result['SOLANA'] = {
+        address: solanaWallet.publicKey.toString(),
+        xChainType: 'SOLANA',
+      };
+    }
+
+    return result;
+  }, [xChainTypes, xConnections, evmAddress, suiAccount, solanaWallet]);
+
+  return xAccounts;
+}

package/src/hooks/useXBalances.ts

@@ -0,0 +1,66 @@
+import { getXChainType } from '@/actions';
+import { type UseQueryResult, keepPreviousData, useQuery } from '@tanstack/react-query';
+import type { ChainId, XToken } from '@sodax/types';
+import { useXService } from './useXService';
+
+/**
+ * Hook to fetch token balances for multiple tokens on a specific chain
+ *
+ * @param params - Query parameters object
+ * @param params.xChainId - Chain identifier (e.g. '0xa86a.avax', '0x1.base', '0x2.bsc', '0x89.polygon', '0x1.optimism')
+ * @param params.xTokens - Array of token objects to fetch balances for.
+ * @param params.address - Wallet address to fetch balances for. If undefined, returns empty object
+ *
+ * @returns UseQueryResult containing an object mapping token addresses to their balances as bigints.
+ *          The balances are denominated in the token's smallest unit (e.g. wei for ETH).
+ *          Returns empty object if wallet is not connected or service is unavailable.
+ */
+/**
+ * @example
+ * ```tsx
+ * // Example usage in a component
+ * function TokenBalances({ tokens }: { tokens: XToken[] }) {
+ *   const { address } = useXAccount('EVM');
+ *   const { data: balances } = useXBalances({
+ *     xChainId: '0xa86a.avax',
+ *     xTokens: tokens,
+ *     address,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {tokens.map(token => (
+ *         <div key={token.address}>
+ *           {token.symbol}: {formatUnits(balances?.[token.address] || 0n, token.decimals)}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+export function useXBalances({
+  xChainId,
+  xTokens,
+  address,
+}: { xChainId: ChainId; xTokens: XToken[]; address: string | undefined }): UseQueryResult<{
+  [key: string]: bigint;
+}> {
+  const xService = useXService(getXChainType(xChainId));
+  return useQuery({
+    queryKey: ['xBalances', xChainId, xTokens.map(x => x.symbol), address],
+    queryFn: async () => {
+      if (!xService) {
+        return {};
+      }
+
+      const balances = await xService.getBalances(address, xTokens, xChainId);
+
+      return balances;
+    },
+    enabled: !!xService,
+    placeholderData: keepPreviousData,
+    refetchInterval: 5_000,
+  });
+}

package/src/hooks/useXConnect.ts

@@ -0,0 +1,119 @@
+import type { XAccount } from '@/types';
+import { useConnectWallet } from '@mysten/dapp-kit';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMutation, type UseMutationResult } from '@tanstack/react-query';
+import { useConnect } from 'wagmi';
+import type { XConnector } from '../core/XConnector';
+import { useXWagmiStore } from '../useXWagmiStore';
+import type { EvmXConnector } from '../xchains/evm';
+import type { SolanaXConnector } from '../xchains/solana';
+import type { SuiXConnector } from '../xchains/sui';
+
+/**
+ * Hook for connecting to various blockchain wallets across different chains
+ *
+ * Handles connection logic for EVM, SUI, Solana and other supported chains.
+ * Sets up wallet connections and stores connection state in XWagmiStore.
+ *
+ * @param {void} - No parameters required
+ * @returns {UseMutationResult<XAccount | undefined, Error, XConnector>} Mutation result containing:
+ * - mutateAsync: Function to connect a wallet
+ * - isPending: Boolean indicating if connection is in progress
+ * - error: Any error that occurred
+ * - data: Connected account data if successful
+ *
+ * @example
+ * ```ts
+ * const { mutateAsync: connect, isPending } = useXConnect();
+ *
+ * const handleConnect = async (connector: XConnector) => {
+ *   try {
+ *     await connect(connector);
+ *   } catch (err) {
+ *     console.error(err);
+ *   }
+ * };
+ * ```
+ */
+export function useXConnect(): UseMutationResult<XAccount | undefined, Error, XConnector> {
+  const setXConnection = useXWagmiStore(state => state.setXConnection);
+
+  const { connectAsync: evmConnectAsync } = useConnect();
+  const { mutateAsync: suiConnectAsync } = useConnectWallet();
+
+  // const solanaWallet = useWallet();
+  const { select, connect, connected } = useWallet();
+
+  return useMutation({
+    mutationFn: async (xConnector: XConnector) => {
+      const xChainType = xConnector.xChainType;
+      let xAccount: XAccount | undefined;
+
+      switch (xChainType) {
+        case 'EVM':
+          await evmConnectAsync({ connector: (xConnector as EvmXConnector).connector });
+          break;
+        case 'SUI':
+          await suiConnectAsync({ wallet: (xConnector as SuiXConnector).wallet });
+          break;
+        case 'SOLANA': {
+          const walletName = (xConnector as SolanaXConnector).wallet.adapter.name;
+
+          await select(walletName);
+
+          const adapter = (xConnector as SolanaXConnector).wallet.adapter;
+
+          if (!adapter) throw new Error('No adapter found for Solana wallet');
+
+          if (walletName === 'MetaMask') {
+            await new Promise<void>((resolve, reject) => {
+              const timeout = setTimeout(() => {
+                cleanup();
+                reject(new Error('Wallet connection timeout'));
+              }, 30000);
+
+              const handleConnect = () => {
+                cleanup();
+                resolve();
+              };
+
+              const handleError = (error: Error) => {
+                cleanup();
+                reject(error);
+              };
+
+              const cleanup = () => {
+                clearTimeout(timeout);
+                adapter.off('connect', handleConnect);
+                adapter.off('error', handleError);
+              };
+
+              adapter.on('connect', handleConnect);
+              adapter.on('error', handleError);
+
+              connect().catch(err => {
+                cleanup();
+                reject(err);
+              });
+            });
+          }
+
+          break;
+        }
+
+        default:
+          xAccount = await xConnector.connect();
+          break;
+      }
+
+      if (xAccount) {
+        setXConnection(xConnector.xChainType, {
+          xAccount,
+          xConnectorId: xConnector.id,
+        });
+      }
+
+      return xAccount;
+    },
+  });
+}

package/src/hooks/useXConnection.ts

@@ -0,0 +1,72 @@
+import type { ChainType } from '@sodax/types';
+import { useCurrentAccount, useCurrentWallet } from '@mysten/dapp-kit';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import { useAccount, useConnections } from 'wagmi';
+import type { XConnection } from '../types';
+import { useXWagmiStore } from '../useXWagmiStore';
+
+/**
+ * Hook for accessing connection details for a specific blockchain
+ *
+ * Retrieves the current connection state for the specified chain type,
+ * including the connected account and connector ID.
+ *
+ * @param {ChainType} xChainType - The type of blockchain to get connection details for
+ * @returns {XConnection | undefined} Connection details including account and connector ID, or undefined if not connected
+ *
+ * @example
+ * ```ts
+ * const connection = useXConnection('EVM');
+ *
+ * if (connection) {
+ *   console.log('Connected account:', connection.xAccount.address);
+ *   console.log('Using connector:', connection.xConnectorId);
+ * }
+ * ```
+ */
+export function useXConnection(xChainType: ChainType | undefined): XConnection | undefined {
+  const xConnection = useXWagmiStore(state => (xChainType ? state.xConnections?.[xChainType] : undefined));
+
+  const evmConnections = useConnections();
+  const { address: evmAddress } = useAccount();
+  const suiAccount = useCurrentAccount();
+  const suiCurrentWallet = useCurrentWallet();
+  const solanaWallet = useWallet();
+
+  const xConnection2 = useMemo(() => {
+    if (!xChainType) {
+      return undefined;
+    }
+
+    switch (xChainType) {
+      case 'EVM':
+        return {
+          xAccount: { address: evmAddress as string, xChainType },
+          xConnectorId: evmConnections?.[0]?.connector.id,
+        };
+
+      case 'SUI':
+        if (suiCurrentWallet.currentWallet && suiCurrentWallet.connectionStatus === 'connected') {
+          return {
+            xAccount: { address: suiAccount?.address, xChainType },
+            xConnectorId: suiCurrentWallet.currentWallet.name,
+          };
+        }
+        return undefined;
+
+      case 'SOLANA':
+        if (solanaWallet.connected) {
+          return {
+            xAccount: { address: solanaWallet.publicKey?.toString(), xChainType },
+            xConnectorId: `${solanaWallet.wallet?.adapter.name}`,
+          };
+        }
+        return undefined;
+      default:
+        return xConnection;
+    }
+  }, [xChainType, xConnection, evmAddress, suiAccount, evmConnections, suiCurrentWallet, solanaWallet]);
+
+  return xConnection2;
+}