@xswap-link/sdk 0.10.6 → 0.10.7

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

@@ -1,6 +1,8 @@
 import { CloseIcon, WalletConnectIcon } from "@src/assets/icons";
-import { FC, useCallback, useMemo } from "react";
+import { FC, useCallback } from "react";
 import { Connector, useConnect } from "wagmi";
+import { useWallet as useSolanaWallet } from "@solana/wallet-adapter-react";
+import { Ecosystem } from "@src/models";
 
 const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
   connector,
@@ -26,30 +28,41 @@ const ConnectorIcon: FC<{ connector: Connector; className?: string }> = ({
   }
 };
 
-export const WalletPicker: FC<{ className?: string; onClose: () => void }> = ({
-  className,
-  onClose,
-}) => {
+export const WalletPicker: FC<{
+  ecosystem: Ecosystem;
+  className?: string;
+  onClose: () => void;
+}> = ({ ecosystem, className, onClose }) => {
   const { connectors, connectAsync } = useConnect();
+  const { wallets, select, connect } = useSolanaWallet();
 
-  const allowedConnectors = useMemo(() => {
-    return connectors.filter((connector) => {
-      const isInjected = connector.type === "injected";
-      const isInjectedGeneric = connector.name === "Injected";
-      const isWalletConnect = connector.type === "walletConnect";
-
-      return isWalletConnect || (isInjected && !isInjectedGeneric);
-    });
-  }, [connectors]);
-
-  const handleWalletClick = useCallback(
+  const handleEvmWalletClick = useCallback(
     async (connector: Connector) => {
-      await connectAsync({ connector });
-      onClose();
+      try {
+        await connectAsync({ connector });
+      } catch (error) {
+        console.error("Failed to connect EVM wallet:", error);
+      } finally {
+        onClose();
+      }
     },
     [connectAsync, onClose],
   );
 
+  const handleConnectSolana = useCallback(
+    async (walletName) => {
+      try {
+        select(walletName);
+        await connect();
+      } catch (error) {
+        console.error("Failed to connect Solana wallet:", error);
+      } finally {
+        onClose();
+      }
+    },
+    [connect, select, onClose],
+  );
+
   return (
     <div className={`flex flex-col h-full ${className || ""}`}>
       <div className="flex justify-between">
@@ -63,16 +76,38 @@ export const WalletPicker: FC<{ className?: string; onClose: () => void }> = ({
       </div>
       <div className="horizontal-separator" />
       <div className="h-full pt-4">
-        {allowedConnectors.map((connector) => (
-          <button
-            key={connector.id}
-            onClick={() => handleWalletClick(connector)}
-            className="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"
-          >
-            <ConnectorIcon connector={connector} />
-            <div className="text-t_text_primary">{connector.name}</div>
-          </button>
-        ))}
+        {ecosystem === Ecosystem.EVM && (
+          <>
+            {connectors.map((connector) => (
+              <button
+                key={connector.id}
+                onClick={() => handleEvmWalletClick(connector)}
+                className="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"
+              >
+                <ConnectorIcon connector={connector} />
+                <div className="text-t_text_primary">{connector.name}</div>
+              </button>
+            ))}
+          </>
+        )}
+        {ecosystem === Ecosystem.SOLANA && (
+          <>
+            {wallets.map((wallet) => (
+              <button
+                key={wallet.adapter.name}
+                onClick={() => handleConnectSolana(wallet.adapter.name)}
+                className="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"
+              >
+                <img
+                  src={wallet.adapter.icon}
+                  alt={wallet.adapter.name}
+                  className={`w-[34px] h-[34px] rounded-md ${className || ""}`}
+                />
+                <div className="text-t_text_primary">{wallet.adapter.name}</div>
+              </button>
+            ))}
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/Swap/index.tsx

@@ -1,13 +1,13 @@
 import { useSwapContext } from "@src/context";
-import { Route } from "@src/models";
 import { useMemo } from "react";
 import { Header } from "./Header";
 import { HistoryView } from "./HistoryView";
 import { SettingsView } from "./SettingsView";
 import { SwapView } from "./SwapView";
+import { UnifiedRoute } from "@src/models";
 
 type Props = {
-  onSubmit: (route: Route) => void;
+  onSubmit: (route: UnifiedRoute) => void;
   onClose: () => void;
 };
 export const Swap = ({ onClose }: Props) => {

package/src/components/TxConfigForm/index.tsx

@@ -7,13 +7,13 @@ import {
   TxUIWrapper,
   useHistory,
 } from "@src/context";
-import { Chain, ModalIntegrationPayload, Route } from "@src/models";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Chain, ModalIntegrationPayload, UnifiedRoute } from "@src/models";
 import { FC, MouseEvent, useEffect, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useReconnect, WagmiProvider } from "wagmi";
 import { changeHostVariableColor } from "../../../localTheme";
 import { setApiUrl } from "@src/services/api";
+import { WalletProvider } from "@src/context/WalletProvider";
+import { AllWalletsConfig } from "../AllWalletsConfig";
 
 export type TxConfigFormPayload = Omit<
   ModalIntegrationPayload,
@@ -33,7 +33,7 @@ export type TxConfigFormPayload = Omit<
 type TxConfigFormProps = TxConfigFormPayload &
   (
     | {
-        onSubmit: (route: Route) => void;
+        onSubmit: (route: UnifiedRoute) => void;
         onClose: () => void;
         overlay: true;
       }
@@ -44,29 +44,6 @@ type TxConfigFormProps = TxConfigFormPayload &
       }
   );
 
-const queryClient = new QueryClient();
-
-const WagmiReload: FC = () => {
-  const { reconnect } = useReconnect();
-
-  useEffect(() => {
-    let count = 0;
-    const interval = setInterval(() => {
-      reconnect();
-      count++;
-      if (count >= 5) {
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [reconnect]);
-
-  return <></>;
-};
-
 const normalizeTxConfigFormProps = (props: TxConfigFormProps) => {
   return {
     ...props,
@@ -165,9 +142,8 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
         <div>Something went wrong, please contact XSwap.</div>
       )}
     >
-      <WagmiProvider config={wagmiConfig}>
-        <QueryClientProvider client={queryClient}>
-          <WagmiReload />
+      <AllWalletsConfig wagmiConfig={wagmiConfig}>
+        <WalletProvider>
           <HistoryProvider>
             <PendingTransactionsEmitter
               onPendingTransactionsChange={onPendingTransactionsChange}
@@ -198,7 +174,6 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
                 highlightedDstTokens,
               }}
               supportedChains={supportedChains}
-              wagmiConfig={wagmiConfig}
               overlay={overlay}
             >
               <TransactionProvider>
@@ -223,8 +198,8 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
               </TransactionProvider>
             </SwapProvider>
           </HistoryProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
+        </WalletProvider>
+      </AllWalletsConfig>
     </ErrorBoundary>
   );
 };
@@ -248,7 +223,7 @@ export const openTxConfigForm = async ({
   srcTokenLocked,
   srcChainLocked,
   override,
-}: TxConfigFormPayload): Promise<Route> => {
+}: TxConfigFormPayload): Promise<UnifiedRoute> => {
   try {
     if (xpayRoot === null) {
       throw new Error("XPay was incorrectly initialized");

package/src/components/TxDataCard/TxDataCardUI/index.tsx

@@ -32,16 +32,22 @@ export const TxDataCardUI = ({
 
   const date = getDate(transaction.timestamp);
 
-  const transferredAmount = weiToHumanReadable({
-    amount: transaction.amountWei,
-    decimals: srcToken?.decimals || 18,
-    precisionFractionalPlaces: 4,
-  });
-  const receivedAmount = weiToHumanReadable({
-    amount: transaction?.tokenOutAmount || "0",
-    decimals: dstToken?.decimals || 18,
-    precisionFractionalPlaces: 4,
-  });
+  const transferredAmount =
+    transaction.sourceChainId === "mainnet-beta"
+      ? transaction.amountWei
+      : weiToHumanReadable({
+          amount: transaction.amountWei,
+          decimals: srcToken?.decimals || 18,
+          precisionFractionalPlaces: 4,
+        });
+  const receivedAmount =
+    transaction.sourceChainId === "mainnet-beta"
+      ? (transaction.tokenOutAmount as string)
+      : weiToHumanReadable({
+          amount: transaction?.tokenOutAmount || "0",
+          decimals: dstToken?.decimals || 18,
+          precisionFractionalPlaces: 4,
+        });
 
   const srcChain = supportedChains.find(
     (chain) => chain.chainId === transaction.sourceChainId,

package/src/components/TxDataCard/index.tsx

@@ -19,6 +19,7 @@ export const TxDataCard = ({ transaction }: Props) => {
         transaction.targetChainId,
       )
     : undefined;
+
   return (
     <TxDataCardUI
       transaction={transaction}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Alert";
+export * from "./AllWalletsConfig";
 export * from "./Button";
 export * from "./MessageBar";
 export * from "./MessageBar/SnackMessage";

package/src/config/wagmiConfig.ts

@@ -4,7 +4,7 @@ import { Transport } from "viem";
 import * as WagmiChains from "viem/chains";
 import { mainnet } from "viem/chains";
 import { Config, createConfig, createStorage, http } from "@wagmi/core";
-import { injected, walletConnect, coinbaseWallet } from "@wagmi/connectors";
+import { walletConnect } from "@wagmi/connectors";
 
 const storage = createStorage({
   key: "xpay.wagmi.store",
@@ -18,11 +18,6 @@ export const getWagmiConfig = (supportedChains: Chain[]): Config => {
     chains,
     transports,
     connectors: [
-      injected(),
-      coinbaseWallet({
-        appLogoUrl: "https://xswap.link/favicon.ico",
-        appName: "XSwap",
-      }),
       walletConnect({
         projectId: "c392898b45ac587a280b5eb33e92aeb0",
         showQrModal: true,

package/src/constants/index.ts

@@ -1,6 +1,20 @@
+import { PublicKey } from "@solana/web3.js";
 import { Ecosystem } from "@src/models";
 import { constants } from "ethers";
 
+export const SOLANA_NATIVE_TOKEN_ADDRESS = new PublicKey(
+  "So11111111111111111111111111111111111111112",
+);
+export const SOLANA_TOKEN_PROGRAM_ID = new PublicKey(
+  "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA",
+);
+export const METADATA_PROGRAM_ID =
+  "metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s";
+export const SOLANA_MAINNET_RPC_URL =
+  "https://orbital-thrilling-water.solana-mainnet.quiknode.pro/6b4a6d73d2cbe0590ce45bad3b375b183acef83f/";
+export const JUPITER_V6_PROGRAM_ID = new PublicKey(
+  "JUP6LkbZbjS1jKKwapdHNy74zcZ3tLUZoi5QNyVTaV4",
+);
 export const DEFAULT_ECOSYSTEM = Ecosystem.EVM;
 export const NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
 export const SLIPPAGE_PRESETS: number[] = [0.5, 1.5, 3.0];

package/src/context/HistoryProvider.tsx

@@ -1,13 +1,19 @@
+import { Connection, PublicKey } from "@solana/web3.js";
 import { CloseIcon } from "@src/assets/icons";
 import { Button, SnackMessage } from "@src/components";
 import {
   CCIP_EXPLORER,
   FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
+  SOLANA_MAINNET_RPC_URL,
   crosschainEstimationTimes,
 } from "@src/constants";
+import { useWallet } from "@src/context/WalletProvider";
 import { useDebounce } from "@src/hooks";
 import { Transaction, TransactionStatus } from "@src/models";
+import { TransactionWithMeta } from "@src/models/SolanaTransaction";
 import { getHistory } from "@src/services";
+import { extractSolanaSwapData } from "@src/services/solana/jupiter/extract-swap-data";
+import { isJupiterTransaction } from "@src/services/solana/jupiter/utils";
 import { isServer } from "@src/utils";
 import BigNumberJS from "bignumber.js";
 import { useSnackbar } from "notistack";
@@ -21,7 +27,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { useAccount } from "wagmi";
 
 export interface HistoryState {
   history: Transaction[];
@@ -34,6 +39,8 @@ export interface HistoryState {
     userAddress: string,
   ) => void;
   historyLoadedOnce: boolean;
+  solanaHistory: Transaction[];
+  solanaHistoryLoadedOnce: boolean;
 }
 
 const HistoryContext: Context<HistoryState> = createContext<HistoryState>(
@@ -63,11 +70,48 @@ const setLocalHistory = (data: LocalHistory) => {
   }
 };
 
+async function processSolanaTransactions(
+  transactions: (TransactionWithMeta | null)[],
+): Promise<Transaction[]> {
+  const results: Transaction[] = [];
+
+  for (let i = 0; i < transactions.length; i++) {
+    try {
+      const tx = transactions[i];
+      if (!tx) continue;
+
+      const signature = tx.transaction.signatures[0];
+
+      if (!signature) continue;
+
+      const connection = new Connection(SOLANA_MAINNET_RPC_URL, "confirmed");
+
+      const swapDetails = await extractSolanaSwapData(
+        signature,
+        connection,
+        tx,
+      );
+
+      if (swapDetails) {
+        results.push(swapDetails);
+      }
+    } catch (error) {
+      console.error(`Error processing transaction:`, error);
+    }
+  }
+
+  return results;
+}
+
 export const HistoryProvider = ({ children }: HistoryProviderProps) => {
-  const { address } = useAccount();
+  const { evm, solana } = useWallet();
+  const { address: address } = evm;
+  const { address: solanaAddress } = solana;
 
+  const [solanaHistory, setSolanaHistory] = useState<Transaction[]>([]);
   const [history, setHistory] = useState<Transaction[]>([]);
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
+  const [solanaHistoryLoadedOnce, setSolanaHistoryLoadedOnce] = useState(false);
 
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const { debounce: getHistoryDebounce } = useDebounce({
@@ -82,16 +126,70 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
     }
   }, []);
 
+  const fetchLastSignatures = async (senderAddress: string, limit = 50) => {
+    const connection = new Connection(SOLANA_MAINNET_RPC_URL, "confirmed");
+    const userPubkey = new PublicKey(senderAddress);
+
+    try {
+      const signatures = await connection.getSignaturesForAddress(userPubkey, {
+        limit,
+      });
+
+      const transactions = await connection.getParsedTransactions(
+        signatures.map((s) => s.signature),
+        {
+          maxSupportedTransactionVersion: 0,
+        },
+      );
+
+      const jupiterTransactions = transactions
+        .filter((val) => !!val)
+        .filter((tx) => isJupiterTransaction(tx));
+
+      const swapDetails = await processSolanaTransactions(
+        jupiterTransactions as TransactionWithMeta[],
+      );
+      return swapDetails;
+    } catch (error) {
+      console.error("Error fetching transactions:", error);
+      return [];
+    }
+  };
+
+  const fetchSolanaHistory = async () => {
+    if (!solanaAddress) {
+      setSolanaHistoryLoadedOnce(true);
+      return;
+    }
+
+    try {
+      const lastSignatures = await fetchLastSignatures(solanaAddress);
+      setSolanaHistory(lastSignatures);
+    } finally {
+      setSolanaHistoryLoadedOnce(true);
+    }
+  };
+
+  useEffect(() => {
+    if (solanaAddress) {
+      fetchSolanaHistory();
+    } else {
+      setSolanaHistory([]);
+      setSolanaHistoryLoadedOnce(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [solanaAddress]);
+
   const fetchHistory = useCallback(async () => {
     try {
       if (!address) {
         return;
       }
 
+      const fetchedTransactions: Transaction[] = [];
       const fetchedHistory = await getHistory({
         walletAddress: address,
       });
-      const fetchedTransactions: Transaction[] = [];
 
       for (const entry of fetchedHistory.history) {
         if (!entry.source) {
@@ -158,15 +256,16 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
       for (const [walletAddress, transactions] of Object.entries(
         localHistory,
       )) {
-        if (
-          walletAddress.toLowerCase().toLowerCase() !== address.toLowerCase()
-        ) {
+        if (walletAddress.toLowerCase() !== address.toLowerCase()) {
           continue;
         }
         const newLocalHistoryForWallet: Transaction[] = [];
 
         for (const transaction of transactions) {
-          if (!txHashToTxFromAPI[transaction.hash]) {
+          const txHash = transaction.hash;
+          const apiTransaction = txHashToTxFromAPI[txHash];
+
+          if (!apiTransaction) {
             // localStorage has fresher data.
             fetchedTransactions.push(transaction);
             newLocalHistoryForWallet.push(transaction);
@@ -174,20 +273,17 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
           }
 
           if (
-            txHashToTxFromAPI[transaction.hash] &&
+            apiTransaction &&
             transaction.status === "DONE" &&
-            txHashToTxFromAPI[transaction.hash]?.status === "IN_PROGRESS"
+            apiTransaction?.status === "IN_PROGRESS"
           ) {
             // If we know on the frontend that the tx is done we should update backend result
-            // @ts-ignore
-            txHashToTxFromAPI[transaction.hash].status = "DONE";
+            apiTransaction.status = "DONE";
           }
 
           if (
-            // @ts-ignore
-            txHashToTxFromAPI[transaction.hash].status === "DONE" ||
-            // @ts-ignore
-            txHashToTxFromAPI[transaction.hash].status === "REVERTED"
+            apiTransaction.status === "DONE" ||
+            apiTransaction.status === "REVERTED"
           ) {
             // API has the same or newer data.
             continue;
@@ -212,7 +308,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
     } finally {
       setHistoryLoadedOnce(true);
     }
-  }, [address, getHistory, enqueueSnackbar]);
+  }, [address, enqueueSnackbar]);
 
   useEffect(() => {
     if (!historyLoadedOnce) {
@@ -222,13 +318,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
       getHistoryDebounce(fetchHistory);
     }, 60000);
     return () => clearInterval(timer);
-  }, [
-    address,
-    fetchHistory,
-    getHistory,
-    getHistoryDebounce,
-    historyLoadedOnce,
-  ]);
+  }, [address, fetchHistory, getHistoryDebounce, historyLoadedOnce]);
 
   const addTransactionToLocalHistory = useCallback(
     (transaction: Transaction, userAddress: string) => {
@@ -281,7 +371,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
         { persist: false, key: messageId },
       );
     },
-    [enqueueSnackbar],
+    [closeSnackbar, enqueueSnackbar],
   );
 
   const updateTransactionInLocalHistory = useCallback(
@@ -319,8 +409,10 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
 
   useEffect(() => {
     setHistoryLoadedOnce(false);
+    setSolanaHistoryLoadedOnce(false);
     setHistory([]);
-  }, [address]);
+    setSolanaHistory([]);
+  }, [address, solanaAddress]);
 
   const state = useMemo<HistoryState>(
     () => ({
@@ -328,12 +420,16 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
       addTransactionToLocalHistory,
       updateTransactionInLocalHistory,
       historyLoadedOnce,
+      solanaHistory,
+      solanaHistoryLoadedOnce,
     }),
     [
       history,
       addTransactionToLocalHistory,
       updateTransactionInLocalHistory,
       historyLoadedOnce,
+      solanaHistory,
+      solanaHistoryLoadedOnce,
     ],
   );