@xswap-link/sdk 0.10.5 → 0.10.7

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

@@ -0,0 +1,71 @@
+import { useWallet } from "@src/context/WalletProvider";
+import { SwapPanelType } from "../..";
+import { Chain } from "@src/models";
+import { useCallback } from "react";
+import { shortAddress } from "@src/utils";
+
+type Props = {
+  chain: Chain | undefined;
+  type: SwapPanelType;
+  className?: string;
+};
+
+export const WalletPanel = ({ chain, type, className }: Props) => {
+  const { setOpenEVMWalletModal, setOpenSolanaWalletModal, evm, solana } =
+    useWallet();
+  const openWalletModal = useCallback(() => {
+    if (!chain) {
+      return;
+    }
+    if (chain.ecosystem === "evm") {
+      setOpenEVMWalletModal(true);
+      evm.connectWallet();
+    } else if (chain.ecosystem === "solana") {
+      setOpenSolanaWalletModal(true);
+      solana.connectWallet();
+    }
+  }, [chain, evm, solana, setOpenEVMWalletModal, setOpenSolanaWalletModal]);
+  const renderAddress = useCallback(
+    (chainEcosystem: string) => {
+      if (chainEcosystem === "evm") {
+        return shortAddress(evm.address || "");
+      } else if (chainEcosystem === "solana") {
+        return shortAddress(solana.address || "");
+      }
+    },
+    [evm, solana],
+  );
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => openWalletModal()}
+        className={`${className || ""}`}
+      >
+        <div className="flex justify-between items-center p-4 gap-8">
+          <div className="flex flex-col items-start">
+            {type === "source" ? (
+              <div className="flex items-center gap-2">
+                <p className="text-xs font-medium opacity-60">Sender:</p>
+                {chain && (
+                  <p className="text-sm font-medium">
+                    {renderAddress(chain.ecosystem)}
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <p className="text-xs font-medium opacity-60">Receiver:</p>
+                {chain && (
+                  <p className="text-sm font-medium">
+                    {renderAddress(chain.ecosystem)}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </button>
+    </>
+  );
+};

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

@@ -5,6 +5,7 @@ import { AmountPanel } from "./AmountPanel";
 import { ChainPanel } from "./ChainPanel";
 import { MaxPanel } from "./MaxPanel";
 import { TokenPanel } from "./TokenPanel";
+import { WalletPanel } from "./WalletPanel";
 
 type Props = {
   type: SwapPanelType;
@@ -24,6 +25,9 @@ export const SwapPanel = ({ type }: Props) => {
 
   return (
     <div className="flex flex-col x-border rounded-xl bg-t_bg_tertiary bg-opacity-5">
+      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
+        <WalletPanel chain={chain} type={type} className="w-full flex-grow" />
+      </div>
       <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
         <TokenPanel
           chain={chain}

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,
@@ -27,12 +27,13 @@ export type TxConfigFormPayload = Omit<
   supportedChains: Chain[];
   integratorFee?: number;
   integratorFeeReceiverAddress?: string;
+  highlightedDstTokens?: string[];
 };
 
 type TxConfigFormProps = TxConfigFormPayload &
   (
     | {
-        onSubmit: (route: Route) => void;
+        onSubmit: (route: UnifiedRoute) => void;
         onClose: () => void;
         overlay: true;
       }
@@ -43,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,
@@ -131,6 +109,7 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
     override,
     integratorFee,
     integratorFeeReceiverAddress,
+    highlightedDstTokens,
   } = normalizedProps;
 
   const onBackdropClick = (e: MouseEvent) => {
@@ -163,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}
@@ -193,9 +171,9 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
                 onConnectWallet,
                 integratorFee,
                 integratorFeeReceiverAddress,
+                highlightedDstTokens,
               }}
               supportedChains={supportedChains}
-              wagmiConfig={wagmiConfig}
               overlay={overlay}
             >
               <TransactionProvider>
@@ -220,8 +198,8 @@ export const TxConfigForm = (props: TxConfigFormProps) => {
               </TransactionProvider>
             </SwapProvider>
           </HistoryProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
+        </WalletProvider>
+      </AllWalletsConfig>
     </ErrorBoundary>
   );
 };
@@ -245,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/TxWidgetWC/index.tsx

@@ -39,6 +39,7 @@ const TxWidget = ({
   override,
   integratorFee,
   integratorFeeReceiverAddress,
+  highlightedDstTokens,
 }: WidgetIntegrationPayload) => {
   const [loading, setLoading] = useState(true);
   const [supportedChains, setSupportedChains] = useState<Chain[]>([]);
@@ -112,6 +113,7 @@ const TxWidget = ({
           override={override}
           integratorFee={integratorFee}
           integratorFeeReceiverAddress={integratorFeeReceiverAddress}
+          highlightedDstTokens={highlightedDstTokens}
         />
       )}
     </>
@@ -158,6 +160,7 @@ export const createTxWidgetWC = () => {
       override: "json",
       integratorFee: "number",
       integratorFeeReceiverAddress: "string",
+      highlightedDstTokens: "json",
     },
   });
 
@@ -198,4 +201,5 @@ export type TxWidgetWCAttributes = {
   "integrator-fee-receiver-address":
     | WidgetIntegrationPayload["integratorFeeReceiverAddress"]
     | undefined;
+  "highlighted-dst-tokens": string | undefined;
 };

package/src/components/TxWidgetWCWrapped/index.tsx

@@ -50,6 +50,7 @@ export const TxWidgetWCWrapped = ({
   override,
   integratorFee,
   integratorFeeReceiverAddress,
+  highlightedDstTokens,
 }: WidgetIntegrationPayload) => {
   useEffect(() => {
     // We couldn't find a way to pass a function to the web component created by @r2wc/core.
@@ -90,6 +91,7 @@ export const TxWidgetWCWrapped = ({
       override={JSON.stringify(override)}
       integrator-fee={integratorFee}
       integrator-fee-receiver-address={integratorFeeReceiverAddress}
+      highlighted-dst-tokens={JSON.stringify(highlightedDstTokens)}
     ></xpay-widget>
   );
 };

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];