@sodax/wallet-sdk-react 0.0.1-rc.5 → 0.0.1-rc.6

package/src/xchains/evm/EvmXService.ts

@@ -1,11 +1,10 @@
 import { XService } from '@/core/XService';
-import type { ChainId, XToken } from '@sodax/types';
-import type { EVMConfig } from '@/types';
+import type { RpcConfig, XToken } from '@sodax/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 { type Address, defineChain, erc20Abi } from 'viem';
+import { getPublicClient } from 'wagmi/actions';
+import { type Config, createConfig, http } from 'wagmi';
 import {
   mainnet,
   avalanche,
@@ -19,19 +18,6 @@ import {
   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,
@@ -58,37 +44,22 @@ export const hyper = /*#__PURE__*/ defineChain({
   },
 });
 
-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>,
-  );
-
+export const createWagmiConfig = (config: RpcConfig) => {
   return createConfig({
-    chains: finalChains as [typeof mainnet, ...(typeof mainnet)[]],
-    transports,
-    // ssr: true,
+    chains: [mainnet, avalanche, arbitrum, base, bsc, sonic, optimism, polygon, nibiru, hyper, lightlinkPhoenix],
+    transports: {
+      [mainnet.id]: http(config['mainnet']),
+      [avalanche.id]: http(config['avalanche']),
+      [arbitrum.id]: http(config['arbitrum']),
+      [base.id]: http(config['base']),
+      [bsc.id]: http(config['bsc']),
+      [sonic.id]: http(config['sonic']),
+      [optimism.id]: http(config['optimism']),
+      [polygon.id]: http(config['polygon']),
+      [nibiru.id]: http(config['nibiru']),
+      [hyper.id]: http(config['hyper']),
+      [lightlinkPhoenix.id]: http(config['lightlinkPhoenix']),
+    },
   });
 };
 
@@ -99,7 +70,8 @@ export const getWagmiConfig = (chains: EvmChainId[]) => {
 
 export class EvmXService extends XService {
   private static instance: EvmXService;
-  private config: EVMConfig | undefined;
+  public wagmiConfig: Config | undefined;
+
   private constructor() {
     super('EVM');
   }
@@ -115,46 +87,30 @@ export class EvmXService extends XService {
     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> {
+  async getBalance(address: string | undefined, xToken: XToken): Promise<bigint> {
     if (!address) return 0n;
+    if (!this.wagmiConfig) return 0n;
 
-    const chainId = getWagmiChainId(xChainId);
+    const chainId = getWagmiChainId(xToken.xChainId);
 
     if (isNativeToken(xToken)) {
-      const balance = await this.getPublicClient(chainId)?.getBalance({ address: address as Address });
+      const balance = await getPublicClient(this.wagmiConfig, { chainId: 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) {
+  async getBalances(address: string | undefined, xTokens: XToken[]) {
     if (!address) return {};
+    if (!this.wagmiConfig) return {};
 
     const balancePromises = xTokens
       .filter(xToken => isNativeToken(xToken))
       .map(async xToken => {
-        const balance = await this.getBalance(address, xToken, xChainId);
+        const balance = await this.getBalance(address, xToken);
         return { symbol: xToken.symbol, address: xToken.address, balance };
       });
 
@@ -165,7 +121,8 @@ export class EvmXService extends XService {
     }, {});
 
     const nonNativeXTokens = xTokens.filter(xToken => !isNativeToken(xToken));
-    const result = await this.getPublicClient(getWagmiChainId(xChainId))?.multicall({
+    const xChainId = xTokens[0].xChainId;
+    const result = await getPublicClient(this.wagmiConfig, { chainId: getWagmiChainId(xChainId) })?.multicall({
       contracts: nonNativeXTokens.map(token => ({
         abi: erc20Abi,
         address: token.address as `0x${string}`,

package/src/xchains/icon/IconXService.ts

@@ -1,7 +1,7 @@
 import { XService } from '@/core/XService';
 import type { IconService } from 'icon-sdk-js';
 import * as IconSdkRaw from 'icon-sdk-js';
-import type { ChainId, XToken } from '@sodax/types';
+import type { XToken } from '@sodax/types';
 import { isNativeToken } from '@/utils';
 
 const IconSdk = ('default' in IconSdkRaw.default ? IconSdkRaw.default : IconSdkRaw) as typeof IconSdkRaw;
@@ -81,7 +81,7 @@ export class IconXService extends XService {
     }
   }
 
-  async getBalances(address: string | undefined, xTokens: XToken[], xChainId: ChainId) {
+  async getBalances(address: string | undefined, xTokens: XToken[]) {
     if (!address) return {};
 
     const balances = {};

package/src/xchains/icon/actions.ts

@@ -0,0 +1,28 @@
+import { useXWagmiStore } from '@/useXWagmiStore';
+import { ICONexRequestEventType, ICONexResponseEventType, request } from './iconex';
+
+export const reconnectIcon = async () => {
+  const iconConnection = useXWagmiStore.getState().xConnections.ICON;
+  if (!iconConnection) return;
+
+  const recentXConnectorId = iconConnection.xConnectorId;
+
+  const detail = await request({
+    type: ICONexRequestEventType.REQUEST_ADDRESS,
+  });
+
+  if (detail?.type === ICONexResponseEventType.RESPONSE_ADDRESS) {
+    useXWagmiStore.setState({
+      xConnections: {
+        ...useXWagmiStore.getState().xConnections,
+        ICON: {
+          xAccount: {
+            address: detail?.payload,
+            xChainType: 'ICON',
+          },
+          xConnectorId: recentXConnectorId,
+        },
+      },
+    });
+  }
+};

package/src/xchains/injective/InjectiveKelprXConnector.ts

@@ -7,7 +7,7 @@ import { InjectiveXService } from './InjectiveXService';
 
 export class InjectiveKelprXConnector extends XConnector {
   constructor() {
-    super('INJECTIVE', 'Keplr', 'keplr');
+    super('INJECTIVE', 'Keplr', Wallet.Keplr);
   }
 
   getXService(): InjectiveXService {

package/src/xchains/injective/InjectiveMetamaskXConnector.ts

@@ -7,7 +7,7 @@ import { InjectiveXService } from './InjectiveXService';
 
 export class InjectiveMetamaskXConnector extends XConnector {
   constructor() {
-    super('INJECTIVE', 'MetaMask', 'metamask');
+    super('INJECTIVE', 'MetaMask', Wallet.Metamask);
   }
 
   getXService(): InjectiveXService {

package/src/xchains/injective/actions.ts

@@ -0,0 +1,25 @@
+import { useXWagmiStore } from '@/useXWagmiStore';
+import { InjectiveXService } from './InjectiveXService';
+import type { Wallet } from '@injectivelabs/wallet-base';
+
+export const reconnectInjective = async () => {
+  const injectiveConnection = useXWagmiStore.getState().xConnections.INJECTIVE;
+  if (!injectiveConnection) return;
+
+  const recentXConnectorId = injectiveConnection.xConnectorId;
+  const walletStrategy = InjectiveXService.getInstance().walletStrategy;
+  walletStrategy.setWallet(recentXConnectorId as Wallet);
+  const addresses = await walletStrategy.getAddresses();
+  useXWagmiStore.setState({
+    xConnections: {
+      ...useXWagmiStore.getState().xConnections,
+      INJECTIVE: {
+        xAccount: {
+          address: addresses?.[0],
+          xChainType: 'INJECTIVE',
+        },
+        xConnectorId: recentXConnectorId,
+      },
+    },
+  });
+};

package/src/xchains/stellar/StellarXService.ts

@@ -1,5 +1,5 @@
 import { XService } from '@/core/XService';
-import { FREIGHTER_ID, StellarWalletsKit, WalletNetwork, allowAllModules } from '@creit.tech/stellar-wallets-kit';
+import { StellarWalletsKit, WalletNetwork, allowAllModules } from '@creit.tech/stellar-wallets-kit';
 import * as StellarSdk from '@stellar/stellar-sdk';
 import CustomSorobanServer from './CustomSorobanServer';
 import { getTokenBalance } from './utils';
@@ -17,7 +17,6 @@ export class StellarXService extends XService {
 
     this.walletsKit = new StellarWalletsKit({
       network: WalletNetwork.PUBLIC,
-      selectedWalletId: FREIGHTER_ID,
       modules: allowAllModules(),
     });
 

package/src/xchains/stellar/actions.ts

@@ -0,0 +1,24 @@
+import { useXWagmiStore } from '@/useXWagmiStore';
+import { StellarXService } from './StellarXService';
+
+export const reconnectStellar = async () => {
+  const stellarConnection = useXWagmiStore.getState().xConnections.STELLAR;
+  if (!stellarConnection) return;
+
+  const recentXConnectorId = stellarConnection.xConnectorId;
+  const stellarWalletKit = StellarXService.getInstance().walletsKit;
+  stellarWalletKit.setWallet(recentXConnectorId);
+  const { address } = await stellarWalletKit.getAddress();
+  useXWagmiStore.setState({
+    xConnections: {
+      ...useXWagmiStore.getState().xConnections,
+      STELLAR: {
+        xAccount: {
+          address,
+          xChainType: 'STELLAR',
+        },
+        xConnectorId: recentXConnectorId,
+      },
+    },
+  });
+};

package/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './xChains';

package/src/constants/xChains.ts

@@ -1,164 +0,0 @@
-import type { XChain, ChainId } from '@sodax/types';
-
-export const icon: XChain = {
-  id: 1,
-  name: 'ICON',
-  xChainId: '0x1.icon',
-  xChainType: 'ICON',
-  testnet: false,
-};
-
-export const avalanche: XChain = {
-  id: 43_114,
-  name: 'Avalanche',
-  xChainId: '0xa86a.avax',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const bsc: XChain = {
-  id: 56,
-  name: 'BNB Chain',
-  xChainId: '0x38.bsc',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const arbitrum: XChain = {
-  id: 42161,
-  name: 'Arbitrum',
-  xChainId: '0xa4b1.arbitrum',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const base: XChain = {
-  id: 8453,
-  name: 'Base',
-  xChainId: '0x2105.base',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const injective: XChain = {
-  id: 'injective-1',
-  name: 'Injective',
-  xChainId: 'injective-1',
-  xChainType: 'INJECTIVE',
-  testnet: false,
-};
-
-export const stellar: XChain = {
-  id: 'stellar',
-  name: 'Stellar',
-  xChainId: 'stellar',
-  xChainType: 'STELLAR',
-  testnet: false,
-};
-
-export const sui: XChain = {
-  id: 'sui',
-  name: 'Sui',
-  xChainId: 'sui',
-  xChainType: 'SUI',
-  testnet: false,
-};
-
-export const solana: XChain = {
-  id: 'solana',
-  name: 'Solana',
-  xChainId: 'solana',
-  xChainType: 'SOLANA',
-  testnet: false,
-};
-
-export const optimism: XChain = {
-  id: 10,
-  name: 'Optimism',
-  xChainId: '0xa.optimism',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const sonic: XChain = {
-  id: 146,
-  name: 'Sonic',
-  xChainId: 'sonic',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const polygon: XChain = {
-  id: 137,
-  name: 'Polygon',
-  xChainId: '0x89.polygon',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const nibiru: XChain = {
-  id: 6900,
-  name: 'Nibiru',
-  xChainId: 'nibiru',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const hyper: XChain = {
-  id: 999,
-  name: 'HyperEVM',
-  xChainId: 'hyper',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-export const lightlink: XChain = {
-  id: 1890,
-  name: 'Lightlink',
-  xChainId: 'lightlink',
-  xChainType: 'EVM',
-  testnet: false,
-};
-
-// the order is important, using manual order to display in the UI
-export const xChainMap: { [key in ChainId]: XChain } = {
-  '0x1.icon': icon,
-  '0xa4b1.arbitrum': arbitrum,
-  '0xa86a.avax': avalanche,
-  '0x38.bsc': bsc,
-  '0x2105.base': base,
-  '0xa.optimism': optimism,
-  'injective-1': injective,
-  stellar: stellar,
-  sui: sui,
-  solana: solana,
-  sonic: sonic,
-  '0x89.polygon': polygon,
-  nibiru: nibiru,
-  hyper: hyper,
-  lightlink: lightlink,
-};
-
-/**
- * List of all supported chains in Sodax ecosystem
- *
- * Currently supported chains:
- * - EVM chains:
- *   - Arbitrum (0xa4b1.arbitrum)
- *   - Avalanche (0xa86a.avax)
- *   - Base (0x2105.base)
- *   - BSC (0x38.bsc)
- *   - Optimism (0xa.optimism)
- *   - Polygon (0x89.polygon)
- *   - Sonic (sonic)
- *   - Nibiru (nibiru)
- * - ICON chain: 0x1.icon
- * - Sui chain: sui
- * - Solana chain: solana
- * - Stellar chain: stellar
- * - Injective chain: injective-1
- * - Nibiru chain: nibiru
- * - HyperEVM chain: hyper
- */
-
-export const xChains = Object.values(xChainMap);

package/src/hooks/useWalletProviderOptions.ts

@@ -1,51 +0,0 @@
-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/useXWagmiStore.tsx

@@ -1,164 +0,0 @@
-'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 { InjectiveKelprXConnector, 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(), new InjectiveKelprXConnector()]);
-        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 <></>;
-};