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

package/src/hooks/useXConnectors.ts

@@ -0,0 +1,56 @@
+import type { ChainType } from '@sodax/types';
+import { useWallets } from '@mysten/dapp-kit';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react';
+import { useConnectors } from 'wagmi';
+import type { XConnector } from '../core';
+import { EvmXConnector } from '../xchains/evm';
+import { SolanaXConnector } from '../xchains/solana';
+import { useStellarXConnectors } from '../xchains/stellar/useStellarXConnectors';
+import { SuiXConnector } from '../xchains/sui';
+import { useXService } from './useXService';
+
+/**
+ * Hook to retrieve available wallet connectors for a specific blockchain type.
+ *
+ * This hook aggregates wallet connectors from different blockchain ecosystems:
+ * - EVM: Uses wagmi connectors
+ * - Sui: Uses Sui wallet adapters
+ * - 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')
+ * @returns An array of XConnector instances compatible with the specified chain type
+ */
+
+export function useXConnectors(xChainType: ChainType | undefined): XConnector[] {
+  const xService = useXService(xChainType);
+  const evmConnectors = useConnectors();
+  const suiWallets = useWallets();
+  const { data: stellarXConnectors } = useStellarXConnectors();
+
+  const { wallets: solanaWallets } = useWallet();
+
+  const xConnectors = useMemo((): XConnector[] => {
+    if (!xChainType || !xService) {
+      return [];
+    }
+
+    switch (xChainType) {
+      case 'EVM':
+        return evmConnectors.map(connector => new EvmXConnector(connector));
+      case 'SUI':
+        return suiWallets.map(wallet => new SuiXConnector(wallet));
+      case 'STELLAR':
+        return stellarXConnectors || [];
+      case 'SOLANA':
+        return solanaWallets
+          .filter(wallet => wallet.readyState === 'Installed')
+          .map(wallet => new SolanaXConnector(wallet));
+      default:
+        return xService.getXConnectors();
+    }
+  }, [xService, xChainType, evmConnectors, suiWallets, stellarXConnectors, solanaWallets]);
+
+  return xConnectors;
+}

package/src/hooks/useXDisconnect.ts

@@ -0,0 +1,65 @@
+import type { ChainType } from '@sodax/types';
+import { useDisconnectWallet } from '@mysten/dapp-kit';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useCallback } from 'react';
+import { useDisconnect } from 'wagmi';
+import { getXService } from '../actions';
+import { useXWagmiStore } from '../useXWagmiStore';
+
+/**
+ * Hook for disconnecting from a specific blockchain wallet
+ *
+ * Handles disconnection logic for EVM, SUI, Solana and other supported chains.
+ * Clears connection state from XWagmiStore.
+ *
+ * @param {void} - No parameters required
+ * @returns {(xChainType: ChainType) => Promise<void>} Async function that disconnects from the specified chain
+ *
+ * @example
+ * ```ts
+ * const disconnect = useXDisconnect();
+ *
+ * const handleDisconnect = async (xChainType: ChainType) => {
+ *   await disconnect(xChainType);
+ * };
+ * ```
+ */
+export function useXDisconnect(): (xChainType: ChainType) => Promise<void> {
+  // Get connection state and disconnect handler from store
+  const xConnections = useXWagmiStore(state => state.xConnections);
+  const unsetXConnection = useXWagmiStore(state => state.unsetXConnection);
+
+  // Get chain-specific disconnect handlers
+  const { disconnectAsync } = useDisconnect();
+  const { mutateAsync: suiDisconnectAsync } = useDisconnectWallet();
+  const solanaWallet = useWallet();
+
+  return useCallback(
+    async (xChainType: ChainType) => {
+      // Handle disconnection based on chain type
+      switch (xChainType) {
+        case 'EVM':
+          await disconnectAsync();
+          break;
+        case 'SUI':
+          await suiDisconnectAsync();
+          break;
+        case 'SOLANA':
+          await solanaWallet.disconnect();
+          break;
+        default: {
+          // Handle other chain types
+          const xService = getXService(xChainType);
+          const xConnectorId = xConnections[xChainType]?.xConnectorId;
+          const xConnector = xConnectorId ? xService.getXConnectorById(xConnectorId) : undefined;
+          await xConnector?.disconnect();
+          break;
+        }
+      }
+
+      // Clear connection state from store
+      unsetXConnection(xChainType);
+    },
+    [xConnections, unsetXConnection, disconnectAsync, suiDisconnectAsync, solanaWallet],
+  );
+}

package/src/hooks/useXService.ts

@@ -0,0 +1,8 @@
+import type { ChainType } from '@sodax/types';
+import type { XService } from '../core';
+import { useXWagmiStore } from '../useXWagmiStore';
+
+export function useXService(xChainType: ChainType | undefined): XService | undefined {
+  const xService = useXWagmiStore(state => (xChainType ? state.xServices[xChainType] : undefined));
+  return xService;
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export * from './actions';
+export * from './constants';
+export * from './core';
+
+export * from './utils';
+
+export * from './xchains/evm';
+export * from './xchains/icon';
+export * from './xchains/injective';
+export * from './xchains/solana';
+export * from './xchains/stellar';
+export * from './xchains/sui';
+export * from './hooks';
+export * from './useXWagmiStore';
+export * from './SodaxWalletProvider';
+
+export * from './types';
+export type * from './types';

package/src/types/index.ts

@@ -0,0 +1,44 @@
+import type { ChainType } from '@sodax/types';
+import type { EvmChainId } from '@/xchains/evm/EvmXService';
+
+export type XAccount = {
+  address: string | undefined;
+  xChainType: ChainType | undefined;
+};
+
+export type XConnection = {
+  xAccount: XAccount;
+  xConnectorId: string;
+};
+
+export type CurrencyKey = string;
+
+export enum WalletId {
+  METAMASK = 'metamask',
+  HANA = 'hana',
+  PHANTOM = 'phantom',
+  SUI = 'sui',
+  KEPLR = 'keplr',
+}
+
+export type EVMConfig = {
+  chains: EvmChainId[];
+};
+
+export type SuiConfig = {
+  isMainnet: boolean;
+};
+
+export type SolanaConfig = {
+  endpoint: string;
+};
+
+export type XConfig = {
+  [key in ChainType]: key extends 'EVM'
+    ? EVMConfig
+    : key extends 'SUI'
+      ? SuiConfig
+      : key extends 'SOLANA'
+        ? SolanaConfig
+        : unknown;
+};

package/src/useXWagmiStore.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import type { ChainType } from '@sodax/types';
+import type { XConfig } from './types';
+import { useCurrentAccount, useCurrentWallet, useSuiClient } from '@mysten/dapp-kit';
+import React, { useEffect } from 'react';
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { getXService } from '.';
+import type { XService } from './core';
+import type { XConnection } from './types';
+import { EvmXService } from './xchains/evm';
+import { InjectiveMetamaskXConnector, InjectiveXService } from './xchains/injective';
+import { SolanaXService } from './xchains/solana/SolanaXService';
+import { StellarXService } from './xchains/stellar';
+import { SuiXService } from './xchains/sui';
+import { IconXService } from './xchains/icon';
+import { IconHanaXConnector } from './xchains/icon/IconHanaXConnector';
+import { useAnchorProvider } from './xchains/solana/hooks/useAnchorProvider';
+import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+
+type XWagmiStore = {
+  xServices: Partial<Record<ChainType, XService>>;
+  xConnections: Partial<Record<ChainType, XConnection>>;
+
+  setXConnection: (xChainType: ChainType, xConnection: XConnection) => void;
+  unsetXConnection: (xChainType: ChainType) => void;
+};
+
+export const useXWagmiStore = create<XWagmiStore>()(
+  persist(
+    immer((set, get) => ({
+      xServices: {},
+      xConnections: {},
+      setXConnection: (xChainType: ChainType, xConnection: XConnection) => {
+        set(state => {
+          state.xConnections[xChainType] = xConnection;
+        });
+      },
+      unsetXConnection: (xChainType: ChainType) => {
+        set(state => {
+          delete state.xConnections[xChainType];
+        });
+      },
+    })),
+    {
+      name: 'xwagmi-store',
+      storage: createJSONStorage(() => localStorage),
+      partialize: state => ({ xConnections: state.xConnections }),
+
+      // TODO: better way to handle rehydration of xConnections?
+      onRehydrateStorage: state => {
+        console.log('hydration starts');
+
+        return (state, error) => {
+          if (state?.xConnections) {
+            console.log('rehydrating xConnections', state.xConnections);
+            Object.entries(state.xConnections).forEach(([xChainType, xConnection]) => {
+              const xConnector = getXService(xChainType as ChainType).getXConnectorById(xConnection.xConnectorId);
+              xConnector?.connect();
+            });
+          }
+          if (error) {
+            console.log('an error happened during hydration', error);
+          } else {
+            console.log('hydration finished');
+          }
+        };
+      },
+    },
+  ),
+);
+
+const initXServices = (config: XConfig) => {
+  const xServices = {};
+  Object.keys(config).forEach(key => {
+    const xChainType = key as ChainType;
+
+    switch (xChainType) {
+      case 'EVM':
+        if (config[xChainType]) {
+          xServices[xChainType] = EvmXService.getInstance();
+          xServices[xChainType].setXConnectors([]);
+          xServices[xChainType].setConfig(config[xChainType]);
+        }
+        break;
+      case 'INJECTIVE':
+        xServices[xChainType] = InjectiveXService.getInstance();
+        xServices[xChainType].setXConnectors([new InjectiveMetamaskXConnector()]);
+        break;
+      case 'STELLAR':
+        xServices[xChainType] = StellarXService.getInstance();
+        xServices[xChainType].setXConnectors([]);
+        break;
+      case 'SUI':
+        xServices[xChainType] = SuiXService.getInstance();
+        xServices[xChainType].setXConnectors([]);
+        break;
+      case 'SOLANA':
+        xServices[xChainType] = SolanaXService.getInstance();
+        xServices[xChainType].setXConnectors([]);
+        break;
+      case 'ICON':
+        xServices[xChainType] = IconXService.getInstance();
+        xServices[xChainType].setXConnectors([new IconHanaXConnector()]);
+        break;
+      default:
+        break;
+    }
+  });
+
+  return xServices;
+};
+
+export const initXWagmiStore = (config: XConfig) => {
+  useXWagmiStore.setState({
+    xServices: initXServices(config),
+  });
+};
+
+export const InitXWagmiStore = () => {
+  // sui
+  const suiClient = useSuiClient();
+  useEffect(() => {
+    if (suiClient) {
+      SuiXService.getInstance().suiClient = suiClient;
+    }
+  }, [suiClient]);
+  const { currentWallet: suiWallet } = useCurrentWallet();
+  useEffect(() => {
+    if (suiWallet) {
+      SuiXService.getInstance().suiWallet = suiWallet;
+    }
+  }, [suiWallet]);
+  const suiAccount = useCurrentAccount();
+  useEffect(() => {
+    if (suiAccount) {
+      SuiXService.getInstance().suiAccount = suiAccount;
+    }
+  }, [suiAccount]);
+
+  // solana
+  const { connection: solanaConnection } = useConnection();
+  const solanaWallet = useWallet();
+  const solanaProvider = useAnchorProvider();
+  useEffect(() => {
+    if (solanaConnection) {
+      SolanaXService.getInstance().connection = solanaConnection;
+    }
+  }, [solanaConnection]);
+  useEffect(() => {
+    if (solanaWallet) {
+      SolanaXService.getInstance().wallet = solanaWallet;
+    }
+  }, [solanaWallet]);
+  useEffect(() => {
+    if (solanaProvider) {
+      SolanaXService.getInstance().provider = solanaProvider;
+    }
+  }, [solanaProvider]);
+
+  return <></>;
+};

package/src/utils/index.ts

@@ -0,0 +1,33 @@
+import type { ChainId, XToken } from '@sodax/types';
+
+export const isNativeToken = (xToken: XToken) => {
+  const nativeAddresses = [
+    'cx0000000000000000000000000000000000000000',
+    '0x0000000000000000000000000000000000000000',
+    'inj',
+    '0x0000000000000000000000000000000000000000000000000000000000000002::sui::SUI',
+    'hx0000000000000000000000000000000000000000',
+    '11111111111111111111111111111111', // solana
+    'CAS3J7GYLGXMF6TDJBBYYSE3HQ6BBSMLNUQ34T6TZMYMW2EVH34XOWMA', // stellar,
+  ];
+
+  return nativeAddresses.includes(xToken.address);
+};
+
+// TODO: remove this? move to dapp-kit?
+export const getWagmiChainId = (xChainId: ChainId): number => {
+  const xChainMap = {
+    '0xa869.fuji': 43113,
+    'sonic-blaze': 57054,
+    sonic: 146,
+    '0xa86a.avax': 43114,
+    '0x38.bsc': 56,
+    '0xa4b1.arbitrum': 42161,
+    '0x2105.base': 8453,
+    '0xa.optimism': 10,
+    '0x89.polygon': 137,
+    hyper: 999,
+    lightlink: 1890,
+  };
+  return xChainMap[xChainId] ?? 0;
+};

package/src/xchains/evm/EvmXConnector.ts

@@ -0,0 +1,27 @@
+import { XConnector } from '@/core/XConnector';
+import type { XAccount } from '@/types';
+import type { Config, Connector } from 'wagmi';
+
+export class EvmXConnector extends XConnector {
+  connector: Connector;
+
+  constructor(connector: Connector) {
+    super('EVM', connector.name, connector.id);
+    this.connector = connector;
+  }
+
+  async connect(): Promise<XAccount | undefined> {
+    return;
+  }
+
+  async disconnect(): Promise<void> {
+    return;
+  }
+
+  public get id() {
+    return this.connector.id;
+  }
+  public get icon() {
+    return this.connector.icon;
+  }
+}

package/src/xchains/evm/EvmXService.ts

@@ -0,0 +1,189 @@
+import { XService } from '@/core/XService';
+import type { ChainId, XToken } from '@sodax/types';
+import type { EVMConfig } from '@/types';
+import { getWagmiChainId, isNativeToken } from '@/utils';
+
+import { type Address, type PublicClient, type WalletClient, defineChain, erc20Abi } from 'viem';
+import { getPublicClient, getWalletClient } from 'wagmi/actions';
+import { createConfig, http, type Transport } from 'wagmi';
+import {
+  mainnet,
+  avalanche,
+  base,
+  optimism,
+  polygon,
+  arbitrum,
+  bsc,
+  sonic,
+  nibiru,
+  lightlinkPhoenix,
+} from 'wagmi/chains';
+
+import {
+  AVALANCHE_MAINNET_CHAIN_ID,
+  ARBITRUM_MAINNET_CHAIN_ID,
+  BASE_MAINNET_CHAIN_ID,
+  BSC_MAINNET_CHAIN_ID,
+  SONIC_MAINNET_CHAIN_ID,
+  OPTIMISM_MAINNET_CHAIN_ID,
+  POLYGON_MAINNET_CHAIN_ID,
+  NIBIRU_MAINNET_CHAIN_ID,
+  HYPEREVM_MAINNET_CHAIN_ID,
+  LIGHTLINK_MAINNET_CHAIN_ID,
+} from '@sodax/types';
+
+// HyperEVM chain is not supported by viem, so we need to define it manually
+export const hyper = /*#__PURE__*/ defineChain({
+  id: 999,
+  name: 'HyperEVM',
+  nativeCurrency: {
+    decimals: 18,
+    name: 'HYPE',
+    symbol: 'HYPE',
+  },
+  rpcUrls: {
+    default: { http: ['https://rpc.hyperliquid.xyz/evm'] },
+  },
+  blockExplorers: {
+    default: {
+      name: 'HyperEVMScan',
+      url: 'https://hyperevmscan.io/',
+    },
+  },
+  contracts: {
+    multicall3: {
+      address: '0xcA11bde05977b3631167028862bE2a173976CA11',
+      blockCreated: 13051,
+    },
+  },
+});
+
+const evmChainMap = {
+  [AVALANCHE_MAINNET_CHAIN_ID]: avalanche,
+  [ARBITRUM_MAINNET_CHAIN_ID]: arbitrum,
+  [BASE_MAINNET_CHAIN_ID]: base,
+  [BSC_MAINNET_CHAIN_ID]: bsc,
+  [SONIC_MAINNET_CHAIN_ID]: sonic,
+  [OPTIMISM_MAINNET_CHAIN_ID]: optimism,
+  [POLYGON_MAINNET_CHAIN_ID]: polygon,
+  [NIBIRU_MAINNET_CHAIN_ID]: nibiru,
+  [HYPEREVM_MAINNET_CHAIN_ID]: hyper,
+  [LIGHTLINK_MAINNET_CHAIN_ID]: lightlinkPhoenix,
+} as const;
+
+export type EvmChainId = keyof typeof evmChainMap;
+
+export const getWagmiConfig = (chains: EvmChainId[]) => {
+  const mappedChains = chains.map(chain => evmChainMap[chain]);
+  const finalChains = mappedChains.length > 0 ? mappedChains : [mainnet];
+
+  const transports = finalChains.reduce(
+    (acc, chain) => {
+      acc[chain.id] = http();
+      return acc;
+    },
+    {} as Record<number, Transport>,
+  );
+
+  return createConfig({
+    chains: finalChains as [typeof mainnet, ...(typeof mainnet)[]],
+    transports,
+    // ssr: true,
+  });
+};
+
+/**
+ * Service class for handling EVM chain interactions.
+ * Implements singleton pattern and provides methods for wallet/chain operations.
+ */
+
+export class EvmXService extends XService {
+  private static instance: EvmXService;
+  private config: EVMConfig | undefined;
+  private constructor() {
+    super('EVM');
+  }
+
+  getXConnectors() {
+    return [];
+  }
+
+  public static getInstance(): EvmXService {
+    if (!EvmXService.instance) {
+      EvmXService.instance = new EvmXService();
+    }
+    return EvmXService.instance;
+  }
+
+  public setConfig(config: EVMConfig) {
+    this.config = config;
+  }
+
+  getPublicClient(chainId: number): PublicClient | undefined {
+    if (!this.config) {
+      throw new Error('EvmXService: config is not initialized yet');
+    }
+
+    // @ts-ignore
+    return getPublicClient(getWagmiConfig(this.config.chains), { chainId });
+  }
+
+  public async getWalletClient(chainId: number): Promise<WalletClient> {
+    if (!this.config) {
+      throw new Error('EvmXService: config is not initialized yet');
+    }
+    return await getWalletClient(getWagmiConfig(this.config.chains), { chainId });
+  }
+
+  async getBalance(address: string | undefined, xToken: XToken, xChainId: ChainId): Promise<bigint> {
+    if (!address) return 0n;
+
+    const chainId = getWagmiChainId(xChainId);
+
+    if (isNativeToken(xToken)) {
+      const balance = await this.getPublicClient(chainId)?.getBalance({ address: address as Address });
+      return balance || 0n;
+    }
+
+    throw new Error(`Unsupported token: ${xToken.symbol}`);
+  }
+
+  async getBalances(address: string | undefined, xTokens: XToken[], xChainId: ChainId) {
+    if (!address) return {};
+
+    const balancePromises = xTokens
+      .filter(xToken => isNativeToken(xToken))
+      .map(async xToken => {
+        const balance = await this.getBalance(address, xToken, xChainId);
+        return { symbol: xToken.symbol, address: xToken.address, balance };
+      });
+
+    const balances = await Promise.all(balancePromises);
+    const tokenMap = balances.reduce((map, { address, balance }) => {
+      if (balance) map[address] = balance;
+      return map;
+    }, {});
+
+    const nonNativeXTokens = xTokens.filter(xToken => !isNativeToken(xToken));
+    const result = await this.getPublicClient(getWagmiChainId(xChainId))?.multicall({
+      contracts: nonNativeXTokens.map(token => ({
+        abi: erc20Abi,
+        address: token.address as `0x${string}`,
+        functionName: 'balanceOf',
+        args: [address],
+        chainId: getWagmiChainId(xChainId),
+      })),
+    });
+
+    return nonNativeXTokens
+      .map((token, index) => ({
+        symbol: token.symbol,
+        address: token.address,
+        balance: result?.[index]?.result?.toString() || '0',
+      }))
+      .reduce((acc, balance) => {
+        acc[balance.address] = balance.balance;
+        return acc;
+      }, tokenMap);
+  }
+}

package/src/xchains/evm/index.ts

@@ -0,0 +1,2 @@
+export { EvmXService } from './EvmXService';
+export { EvmXConnector } from './EvmXConnector';

package/src/xchains/icon/IconHanaXConnector.ts

@@ -0,0 +1,39 @@
+import type { XAccount } from '@/types';
+import { ICONexRequestEventType, ICONexResponseEventType, request } from './iconex';
+
+import { XConnector } from '@/core/XConnector';
+
+export class IconHanaXConnector extends XConnector {
+  constructor() {
+    super('ICON', 'Hana Wallet', 'hana');
+  }
+
+  async connect(): Promise<XAccount | undefined> {
+    const { hanaWallet } = window as any;
+    if (window && !hanaWallet && !hanaWallet?.isAvailable) {
+      window.open('https://chromewebstore.google.com/detail/hana-wallet/jfdlamikmbghhapbgfoogdffldioobgl', '_blank');
+      return;
+    }
+
+    const detail = await request({
+      type: ICONexRequestEventType.REQUEST_ADDRESS,
+    });
+
+    if (detail?.type === ICONexResponseEventType.RESPONSE_ADDRESS) {
+      return {
+        address: detail?.payload,
+        xChainType: this.xChainType,
+      };
+    }
+
+    return undefined;
+  }
+
+  async disconnect(): Promise<void> {
+    console.log('HanaIconXConnector disconnected');
+  }
+
+  public get icon() {
+    return 'https://raw.githubusercontent.com/balancednetwork/icons/master/wallets/hana.svg';
+  }
+}