@xswap-link/sdk 0.13.1 → 0.14.0

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/ChainItem/index.tsx

@@ -1,97 +0,0 @@
-import { DotGreenIcon } from "@src/assets/icons";
-import { SwapPanelType } from "@src/components/Swap/SwapView";
-import { useSwapContext } from "@src/context";
-import useNetworks from "@src/hooks/networkManagement/useNetworks";
-import { Chain } from "@src/models";
-import { useMemo } from "react";
-
-type Props = {
-  chain: Chain;
-  type: SwapPanelType;
-  disabled: boolean;
-  onClick: (chainId: string) => void;
-};
-
-export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
-  const {
-    networks: { evm },
-  } = useNetworks();
-
-  const { srcChain, dstChain, bridgeUI } = useSwapContext();
-
-  const currentChainId = useMemo(
-    () => (type === "source" ? srcChain?.chainId : dstChain?.chainId),
-    [dstChain, srcChain, type],
-  );
-
-  const connected = useMemo(
-    () => evm.signer && evm.chainId === chain.chainId,
-    [chain.chainId, evm.chainId, evm.signer],
-  );
-
-  const sameChainId = useMemo(() => {
-    if (!bridgeUI) {
-      return undefined;
-    }
-
-    return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
-  }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
-
-  const getTooltipText = () => {
-    if (chain.chainId === sameChainId) {
-      return "Transfers between the same chains are not available";
-    }
-    if (disabled) {
-      return bridgeUI
-        ? "Token is not available on this chain"
-        : `Swap from ${
-            srcChain?.displayName || "the source chain"
-          } to this chain is currently not supported.`;
-    }
-    return "";
-  };
-
-  const tooltipText = getTooltipText();
-
-  return (
-    <div className="group relative">
-      <div
-        onClick={() => {
-          if (chain.chainId === sameChainId || disabled) {
-            return;
-          }
-          onClick(chain.chainId);
-        }}
-        className={`flex justify-between items-center gap-2 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-chain-item ${
-          currentChainId === chain.chainId ? "selected-chain-item" : ""
-        } ${
-          chain.chainId === sameChainId || disabled
-            ? "disabled-chain-item cursor-default"
-            : ""
-        }`}
-      >
-        <div className="flex gap-3 items-center w-full">
-          <img
-            src={chain.image}
-            alt={chain.name}
-            className="w-[34px] h-[34px]"
-          />
-          <p>{chain.displayName}</p>
-        </div>
-
-        {tooltipText && (
-          <div className="w-full text-center opacity-0 group-hover:opacity-100 text-xs transition-opacity duration-200">
-            {tooltipText}
-          </div>
-        )}
-
-        {connected && (
-          <div className="flex items-baseline gap-1">
-            <DotGreenIcon />
-            <div className="text-t_text_green">connected</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,103 +0,0 @@
-import { CloseIcon, SearchIcon } from "@src/assets/icons";
-import { useSwapContext } from "@src/context";
-import { useMemo, useState, useRef, useEffect } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { SwapPanelType } from "../../../../SwapView";
-import { ChainItem } from "./ChainItem";
-import { TextInput } from "@src/components";
-
-type Props = {
-  type: SwapPanelType;
-  onClose: () => void;
-};
-
-export const ChainPicker = ({ type, onClose }: Props) => {
-  const { setSrcChain, setDstChain, srcChainOptions, dstChainOptions } =
-    useSwapContext();
-
-  const [searchValue, setSearchValue] = useState("");
-  const chainSearchRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (chainSearchRef.current) {
-      setTimeout(() => {
-        chainSearchRef.current?.focus();
-      }, 10);
-    }
-  }, []);
-
-  // search input filtering
-  const filteredChains = useMemo(() => {
-    const chains = type === "source" ? srcChainOptions : dstChainOptions;
-    if (!searchValue) return chains;
-
-    return chains.filter((chain) => {
-      const searchLower = searchValue.toLowerCase();
-      return (
-        chain.displayName.toLowerCase().includes(searchLower) ||
-        chain.chainId.toLowerCase().includes(searchLower)
-      );
-    });
-  }, [type, srcChainOptions, dstChainOptions, searchValue]);
-
-  const select = (selectedChainId: string) => {
-    const chain = filteredChains.find(
-      ({ chainId }) => chainId === selectedChainId,
-    );
-
-    if (!chain) {
-      throw new Error(
-        `ChainPicker > selected chain id that is absent in chain options list.`,
-      );
-    }
-
-    type === "source" ? setSrcChain(chain) : setDstChain(chain);
-    onClose();
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex justify-between">
-        <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} chain`}</div>
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={onClose}
-        >
-          <CloseIcon />
-        </div>
-      </div>
-
-      <TextInput
-        ref={chainSearchRef}
-        inputIcon={
-          <div className="fill-t_text_primary">
-            <SearchIcon />
-          </div>
-        }
-        placeholder="Search chain name"
-        value={searchValue}
-        handleChange={setSearchValue}
-      />
-
-      <div className="horizontal-separator mt-4" />
-      <div className="h-full pt-4">
-        {filteredChains.length ? (
-          <Virtuoso
-            style={{ height: "100%" }}
-            data={filteredChains}
-            itemContent={(_, chain) => (
-              <ChainItem
-                chain={chain}
-                type={type}
-                disabled={chain.disabled}
-                onClick={select}
-              />
-            )}
-          />
-        ) : (
-          <div className="flex justify-center mt-4">No chain found.</div>
-        )}
-      </div>
-    </div>
-  );
-};

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

@@ -1,65 +0,0 @@
-import { ArrowDownIcon } from "@src/assets/icons";
-import { Modal } from "@src/components/Modal";
-import { useSwapContext } from "@src/context";
-import { Chain } from "@src/models";
-import { useMemo, useState } from "react";
-import { SwapPanelType } from "../../../SwapView";
-import { ChainPicker } from "./ChainPicker";
-
-type Props = {
-  chain: Chain | undefined;
-  type: SwapPanelType;
-  className?: string;
-};
-
-export const ChainPanel = ({ chain, type, className }: Props) => {
-  const { srcChainLocked, dstChainLocked } = useSwapContext();
-
-  const projectLockedDestinationChain = useMemo(
-    () => type === "destination" && dstChainLocked,
-    [type, dstChainLocked],
-  );
-
-  const projectLockedSourceChain = useMemo(
-    () => type === "source" && srcChainLocked,
-    [type, srcChainLocked],
-  );
-
-  const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);
-
-  return (
-    <>
-      {chainPickerModalOpen && (
-        <Modal onClose={() => setChainPickerModalOpen(false)}>
-          <ChainPicker
-            type={type}
-            onClose={() => setChainPickerModalOpen(false)}
-          />
-        </Modal>
-      )}
-
-      <button
-        type="button"
-        disabled={projectLockedDestinationChain || projectLockedSourceChain}
-        onClick={() => setChainPickerModalOpen(true)}
-        className={`${className || ""}`}
-      >
-        <div className="flex justify-between items-center p-4 gap-8">
-          <div className="flex flex-col font-medium items-start">
-            <p className="text-xs opacity-60">
-              {type === "source" ? "From:" : "To:"}
-            </p>
-            <p className={`${chain ? "" : "opacity-60"}`}>
-              {chain ? chain.displayName : "Select"}
-            </p>
-          </div>
-          {!projectLockedDestinationChain && !projectLockedSourceChain && (
-            <div className="w-4 h-2 fill-t_text_primary">
-              <ArrowDownIcon />
-            </div>
-          )}
-        </div>
-      </button>
-    </>
-  );
-};

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

@@ -1,43 +0,0 @@
-import { useSwapContext } from "@src/context";
-import { weiToHumanReadable } from "@src/utils";
-import { SwapPanelType } from "../../index";
-
-type Props = {
-  type: SwapPanelType;
-};
-export const MaxPanel = ({ type }: Props) => {
-  const { srcToken, srcTokenBalanceWei, srcTokenBalanceInfo, setSrcValue } =
-    useSwapContext();
-
-  return (
-    <button
-      type="button"
-      className={`flex items-center w-16 justify-center p-4 gap-8 ${
-        !srcTokenBalanceInfo && "opacity-60"
-      } ${
-        type === "source" &&
-        "border-l border-solid border-t_text_primary border-opacity-10"
-      }`}
-      disabled={!srcTokenBalanceInfo}
-      onClick={() =>
-        setSrcValue(
-          weiToHumanReadable({
-            amount: srcTokenBalanceWei,
-            decimals: srcToken?.decimals || 18,
-            precisionFractionalPlaces: srcToken?.decimals || 18,
-          }),
-        )
-      }
-    >
-      {type === "source" && (
-        <p
-          className={`border-b border-solid border-t_text_primary ${
-            !srcTokenBalanceInfo && "border-opacity-60"
-          }`}
-        >
-          Max
-        </p>
-      )}
-    </button>
-  );
-};

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/QuickPickTokenItem/index.tsx

@@ -1,37 +0,0 @@
-import { TokenLogo } from "@src/components";
-import { TokenOption } from "@src/models";
-
-type Props = {
-  token: TokenOption;
-  selectedTokenAddress: string | undefined;
-  onClick: () => void;
-};
-export const QuickPickTokenItem = ({
-  token,
-  selectedTokenAddress,
-  onClick,
-}: Props) => {
-  return (
-    <button
-      type="button"
-      className={`flex gap-2 py-2 pr-[14px] pl-2 items-center border border-solid border-t_text_primary border-opacity-10 rounded-3xl text-start hover:bg-t_bg_tertiary hover:bg-opacity-10 ${
-        token.address.toLowerCase() === selectedTokenAddress?.toLowerCase()
-          ? "bg-t_bg_tertiary bg-opacity-10"
-          : "bg-t_bg_primary"
-      }`}
-      onClick={onClick}
-    >
-      <TokenLogo
-        token={token}
-        className="w-6 h-6"
-        generatedLogoClassName="w-6 h-6"
-      />
-      <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
-        <div className="text-t_text_primary">{token.name}</div>
-        <div className="text-t_text_primary text-opacity-50">
-          {token.symbol}
-        </div>
-      </div>
-    </button>
-  );
-};