@xswap-link/sdk 0.11.4 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.11.4",
+  "version": "0.12.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -36,6 +36,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mysten/dapp-kit": "^0.19.11",
+    "@mysten/sui": "^1.45.2",
     "@r2wc/core": "^1.1.0",
     "@solana/spl-token": "^0.4.13",
     "@solana/wallet-adapter-react": "^0.15.38",

package/src/components/AllWalletsConfig/index.tsx

@@ -11,6 +11,16 @@ import { SolanaWeb3Network } from "@src/models";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode, useMemo } from "react";
 import { Config, WagmiProvider } from "wagmi";
+import { getFullnodeUrl } from "@mysten/sui/client";
+import {
+  createNetworkConfig,
+  SuiClientProvider,
+  WalletProvider as SuiWalletProvider,
+} from "@mysten/dapp-kit";
+
+const { networkConfig } = createNetworkConfig({
+  mainnet: { url: getFullnodeUrl("mainnet") },
+});
 
 const queryClient = new QueryClient();
 
@@ -29,11 +39,15 @@ export const AllWalletsConfig = ({
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <ConnectionProvider endpoint={solanaEndpoint}>
-          <SolanaWalletProvider wallets={solanaWallets} autoConnect>
-            {children}
-          </SolanaWalletProvider>
-        </ConnectionProvider>
+        <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
+          <SuiWalletProvider autoConnect>
+            <ConnectionProvider endpoint={solanaEndpoint}>
+              <SolanaWalletProvider wallets={solanaWallets} autoConnect>
+                {children}
+              </SolanaWalletProvider>
+            </ConnectionProvider>
+          </SuiWalletProvider>
+        </SuiClientProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -57,6 +57,8 @@ export const SwapButton = () => {
     setOpenEVMWalletModal,
     openSolanaWalletModal,
     setOpenSolanaWalletModal,
+    openSuiWalletModal,
+    setOpenSuiWalletModal,
     solana,
   } = useWallet();
 
@@ -309,6 +311,14 @@ export const SwapButton = () => {
           />
         </Modal>
       )}
+      {openSuiWalletModal && (
+        <Modal onClose={() => setOpenSuiWalletModal(false)}>
+          <WalletPicker
+            ecosystem={Ecosystem.SUI}
+            onClose={() => setOpenSuiWalletModal(false)}
+          />
+        </Modal>
+      )}
       <button
         type="button"
         disabled={button.disabled}

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/index.tsx

@@ -57,7 +57,7 @@ export const AmountPanel = ({ type }: Props) => {
           <>
             <SafeInput
               id="swap-amount-input"
-              className={`bg-transparent border-none p-0 text-xl outline-0 font-sans-bold font-bold`}
+              className={`bg-transparent border-none p-0 text-xl outline-none font-sans-bold font-bold`}
               regex={NUMBER_INPUT_REGEX}
               value={srcValue}
               onChange={(value) => setSrcValue(value)}

package/src/components/Swap/SwapView/SwapPanel/WalletPanel/index.tsx

@@ -11,8 +11,14 @@ type Props = {
 };
 
 export const WalletPanel = ({ chain, type, className }: Props) => {
-  const { setOpenEVMWalletModal, setOpenSolanaWalletModal, evm, solana } =
-    useWallet();
+  const {
+    setOpenEVMWalletModal,
+    setOpenSolanaWalletModal,
+    setOpenSuiWalletModal,
+    evm,
+    solana,
+    sui,
+  } = useWallet();
   const openWalletModal = useCallback(() => {
     if (!chain) {
       return;
@@ -23,17 +29,28 @@ export const WalletPanel = ({ chain, type, className }: Props) => {
     } else if (chain.ecosystem === "solana") {
       setOpenSolanaWalletModal(true);
       solana.connectWallet();
+    } else if (chain.ecosystem === "sui") {
+      setOpenSuiWalletModal(true);
     }
-  }, [chain, evm, solana, setOpenEVMWalletModal, setOpenSolanaWalletModal]);
+  }, [
+    chain,
+    evm,
+    solana,
+    setOpenEVMWalletModal,
+    setOpenSolanaWalletModal,
+    setOpenSuiWalletModal,
+  ]);
   const renderAddress = useCallback(
     (chainEcosystem: string) => {
       if (chainEcosystem === "evm") {
         return shortAddress(evm.address || "");
       } else if (chainEcosystem === "solana") {
         return shortAddress(solana.address || "");
+      } else if (chainEcosystem === "sui") {
+        return shortAddress(sui.address || "");
       }
     },
-    [evm, solana],
+    [evm, solana, sui],
   );
   return (
     <>

package/src/components/Swap/SwapView/WalletPicker/index.tsx

@@ -8,6 +8,13 @@ import { FC, useCallback } from "react";
 import { Connector, useAccount, useConnect, useDisconnect } from "wagmi";
 import { useWallet as useSolanaWallet } from "@solana/wallet-adapter-react";
 import { Ecosystem } from "@src/models";
+import {
+  useWallets as useSuiWallets,
+  useCurrentAccount as useSuiCurrentAccount,
+  useCurrentWallet as useSuiCurrentWallet,
+  useConnectWallet as useSuiConnectWallet,
+  useDisconnectWallet as useSuiDisconnectWallet,
+} from "@mysten/dapp-kit";
 
 const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
   connector,
@@ -77,6 +84,36 @@ export const WalletPicker: FC<{
     [connect, select, onClose],
   );
 
+  // ---- SUI ----
+  const suiWallets = useSuiWallets();
+  const suiAccount = useSuiCurrentAccount();
+  const suiCurrentWallet = useSuiCurrentWallet();
+  const { mutateAsync: connectSuiWalletMut } = useSuiConnectWallet();
+  const { mutateAsync: disconnectSuiWalletMut } = useSuiDisconnectWallet();
+
+  const handleConnectSui = useCallback(
+    async (wallet: (typeof suiWallets)[number]) => {
+      try {
+        await connectSuiWalletMut({ wallet });
+      } catch (error) {
+        console.error("Failed to connect Sui wallet:", error);
+      } finally {
+        onClose();
+      }
+    },
+    [connectSuiWalletMut, onClose],
+  );
+
+  const handleDisconnectSui = useCallback(async () => {
+    try {
+      await disconnectSuiWalletMut();
+    } catch (error) {
+      console.error("Failed to disconnect Sui wallet:", error);
+    } finally {
+      onClose();
+    }
+  }, [disconnectSuiWalletMut, onClose]);
+
   return (
     <div className={`flex flex-col h-full ${className || ""}`}>
       <div className="flex justify-between">
@@ -179,6 +216,60 @@ export const WalletPicker: FC<{
             })}
           </>
         )}
+        {ecosystem === Ecosystem.SUI && (
+          <>
+            {suiWallets.map((wallet) => {
+              const isConnected =
+                !!suiAccount?.address &&
+                suiCurrentWallet?.currentWallet?.name === wallet.name;
+
+              const icon = wallet.icon;
+
+              return (
+                <button
+                  key={wallet.name}
+                  onClick={async () => {
+                    isConnected
+                      ? await handleDisconnectSui()
+                      : await handleConnectSui(wallet);
+                  }}
+                  className="group flex items-center w-full gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-wallet-item"
+                >
+                  {icon ? (
+                    <img
+                      src={icon}
+                      alt={wallet.name}
+                      className={`w-[34px] h-[34px] rounded-md ${
+                        className || ""
+                      }`}
+                    />
+                  ) : (
+                    <div className="w-[34px] h-[34px] rounded-md bg-white/10" />
+                  )}
+
+                  <div className="text-t_text_primary">{wallet.name}</div>
+
+                  {isConnected && (
+                    <div className="flex w-full justify-end items-baseline gap-1">
+                      <div className="group-hover:hidden">
+                        <DotGreenIcon />
+                      </div>
+                      <div className="hidden group-hover:block">
+                        <DotRedIcon />
+                      </div>
+                      <div className="text-t_text_green group-hover:hidden">
+                        connected
+                      </div>
+                      <div className="text-t_text_red hidden group-hover:block">
+                        disconnect
+                      </div>
+                    </div>
+                  )}
+                </button>
+              );
+            })}
+          </>
+        )}
       </div>
     </div>
   );

package/src/context/WalletProvider.tsx

@@ -11,6 +11,8 @@ import { useAccount, useConnect, useDisconnect } from "wagmi";
 import { useWallet as useSolanaWallet } from "@solana/wallet-adapter-react";
 import { SolanaWeb3Network } from "@src/models";
 
+import { useCurrentAccount, useDisconnectWallet } from "@mysten/dapp-kit";
+
 interface WalletInfo {
   address: string | undefined;
   isConnected: boolean;
@@ -18,13 +20,17 @@ interface WalletInfo {
   connectWallet: () => Promise<void>;
   disconnectWallet: () => Promise<void>;
 }
+
 export interface WalletState {
   openEVMWalletModal: boolean;
   setOpenEVMWalletModal: Dispatch<React.SetStateAction<boolean>>;
   openSolanaWalletModal: boolean;
   setOpenSolanaWalletModal: Dispatch<React.SetStateAction<boolean>>;
+  openSuiWalletModal: boolean;
+  setOpenSuiWalletModal: Dispatch<React.SetStateAction<boolean>>;
   evm: WalletInfo;
   solana: WalletInfo;
+  sui: WalletInfo;
 }
 
 // Wallet Context
@@ -32,10 +38,12 @@ const WalletContext: Context<WalletState> = createContext<WalletState>(
   {} as WalletState,
 );
 
-export const WalletProvider = ({ children }) => {
+export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
   const [openEVMWalletModal, setOpenEVMWalletModal] = useState(false);
   const [openSolanaWalletModal, setOpenSolanaWalletModal] = useState(false);
+  const [openSuiWalletModal, setOpenSuiWalletModal] = useState(false);
 
+  // -------- EVM --------
   const {
     address: evmAddress,
     isConnected: isEvmConnected,
@@ -44,24 +52,39 @@ export const WalletProvider = ({ children }) => {
   const { connect, connectors } = useConnect();
   const { disconnect: evmDisconnect } = useDisconnect();
 
-  const solanaWallet = useSolanaWallet();
-
   const connectEvmWallet = useCallback(async () => {
-    connect({ connector: connectors[0]! }); // Default to MetaMask
+    connect({ connector: connectors[0]! }); // Default connector
   }, [connect, connectors]);
 
-  const connectSolanaWallet = useCallback(async () => {
-    await solanaWallet.connect();
-  }, [solanaWallet]);
-
   const disconnectEvmWallet = useCallback(
     () => new Promise<void>((resolve) => resolve(evmDisconnect())),
     [evmDisconnect],
   );
+
+  // -------- SOLANA --------
+  const solanaWallet = useSolanaWallet();
+
+  const connectSolanaWallet = useCallback(async () => {
+    await solanaWallet.connect();
+  }, [solanaWallet]);
+
   const disconnectSolanaWallet = useCallback(
     () => solanaWallet.disconnect(),
     [solanaWallet],
   );
+
+  // -------- SUI --------
+  const suiAccount = useCurrentAccount();
+  const { mutateAsync: disconnectSui } = useDisconnectWallet();
+
+  const connectSuiWallet = useCallback(async () => {
+    setOpenSuiWalletModal(true);
+  }, []);
+
+  const disconnectSuiWallet = useCallback(async () => {
+    await disconnectSui();
+  }, [disconnectSui]);
+
   const state = useMemo(() => {
     return {
       evm: {
@@ -78,17 +101,31 @@ export const WalletProvider = ({ children }) => {
         connectWallet: connectSolanaWallet,
         disconnectWallet: disconnectSolanaWallet,
       },
+      sui: {
+        address: suiAccount?.address,
+        isConnected: !!suiAccount?.address,
+        chainId: "sui-mainnet",
+        connectWallet: connectSuiWallet,
+        disconnectWallet: disconnectSuiWallet,
+      },
     };
   }, [
+    // evm
     evmAddress,
     isEvmConnected,
     evmChainId,
     connectEvmWallet,
     disconnectEvmWallet,
+    // sol
     solanaWallet.publicKey,
     connectSolanaWallet,
     disconnectSolanaWallet,
+    // sui
+    suiAccount?.address,
+    connectSuiWallet,
+    disconnectSuiWallet,
   ]);
+
   return (
     <WalletContext.Provider
       value={{
@@ -96,6 +133,8 @@ export const WalletProvider = ({ children }) => {
         setOpenEVMWalletModal,
         openSolanaWalletModal,
         setOpenSolanaWalletModal,
+        openSuiWalletModal,
+        setOpenSuiWalletModal,
         ...state,
       }}
     >

package/src/models/Ecosystem.ts

@@ -1,4 +1,5 @@
 export enum Ecosystem {
   EVM = "evm",
   SOLANA = "solana",
+  SUI = "sui",
 }