@xswap-link/sdk 0.3.5 → 0.4.0

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

@@ -0,0 +1,104 @@
+import { ArrowDownIcon } from "@src/assets/icons";
+import { TokenLogo } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { useModal } from "@src/context/ModalProvider";
+import { Chain, Token, TokenOption } from "@src/models";
+import { useMemo, useState } from "react";
+import { SwapPanelType } from "../../index";
+import { TokenPicker } from "./TokenPicker";
+
+type Props = {
+  chain: Chain | undefined;
+  token: Token | undefined;
+  type: SwapPanelType;
+};
+
+export const TokenPanel = ({ chain, token, type }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  const {
+    srcChainTokensOptions,
+    srcChainOtherTokensOptions,
+    dstChainTokensOptions,
+    dstChainOtherTokensOptions,
+    setSrcToken,
+    setSrcChain,
+    supportedChains,
+    setDstToken,
+    setDstChain,
+  } = useSwapContext();
+
+  const { openModal, closeModal } = useModal();
+
+  const tokensWithBalances = useMemo(
+    () => (type === "source" ? srcChainTokensOptions : dstChainTokensOptions),
+    [dstChainTokensOptions, srcChainTokensOptions, type],
+  );
+
+  const otherTokensWithBalances = useMemo(
+    () =>
+      type === "source"
+        ? srcChainOtherTokensOptions
+        : dstChainOtherTokensOptions,
+    [dstChainOtherTokensOptions, srcChainOtherTokensOptions, type],
+  );
+
+  const onTokenSelect = (token: TokenOption) => {
+    const newChain = supportedChains.find(
+      (chain) => chain.chainId === token.chainId,
+    );
+
+    if (type === "source") {
+      setSrcToken(token);
+      setSrcChain(newChain);
+    } else {
+      setDstToken(token);
+      setDstChain(newChain);
+    }
+    closeModal();
+  };
+
+  const pickerDisabled = useMemo(() => type === "destination", [type]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() =>
+          openModal(
+            <TokenPicker
+              type={type}
+              chain={chain!}
+              tokens={tokensWithBalances}
+              otherTokens={otherTokensWithBalances}
+              selectedTokenAddress={token?.address}
+              onSelect={onTokenSelect}
+              isOpen={open}
+              setModalOpen={setOpen}
+            />,
+          )
+        }
+        disabled={pickerDisabled}
+      >
+        <div className="flex justify-between items-center p-4 gap-8 border-r border-solid border-white border-opacity-10">
+          <div className="flex gap-2 items-center">
+            <TokenLogo
+              token={token}
+              className="w-[34px] h-[34px]"
+              generatedLogoClassName=" text-[16px]"
+            />
+            <div className="flex flex-col font-medium items-start">
+              <p className="text-xs opacity-60">Token: </p>
+              <p className={`${token ? "" : "opacity-60"}`}>
+                {token ? token.symbol : "Select"}
+              </p>
+            </div>
+          </div>
+          <div className={`w-4 h-2 fill-white ${pickerDisabled && "hidden"}`}>
+            <ArrowDownIcon />
+          </div>
+        </div>
+      </button>
+    </>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { useSwapContext } from "@src/context";
+import { SwapPanelType } from "../index";
+import { AmountPanel } from "./AmountPanel";
+import { ChainPanel } from "./ChainPanel";
+import { MaxPanel } from "./MaxPanel";
+import { TokenPanel } from "./TokenPanel";
+
+type Props = {
+  type: SwapPanelType;
+};
+export const SwapPanel = ({ type }: Props) => {
+  const { srcChain, srcToken, dstChain, dstToken } = useSwapContext();
+
+  const token = useMemo(
+    () => (type === "source" ? srcToken : dstToken),
+    [type, srcToken, dstToken],
+  );
+
+  const chain = useMemo(
+    () => (type === "source" ? srcChain : dstChain),
+    [type, srcChain, dstChain],
+  );
+
+  return (
+    <div className="flex flex-col x-border rounded-xl bg-x_gray_500">
+      <div className="grid grid-cols-2 border-b border-solid border-white border-opacity-10">
+        <TokenPanel chain={chain} token={token} type={type} />
+        <ChainPanel chain={chain} type={type} />
+      </div>
+      <div
+        className={`flex justify-between ${
+          type === "destination" &&
+          "bg-gradient-to-r from-x_blue_300_20 to-x_blue_400_20"
+        }`}
+      >
+        <AmountPanel type={type} />
+        <MaxPanel type={type} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { FeesPanel } from "./FeesPanel";
+import { SwapButton } from "./SwapButton";
+import { SwapPanel } from "./SwapPanel";
+import { ArrowIcon } from "@src/components/Swap/SwapView/ConfirmationView/TxOverview/ArrowIcon";
+
+export type SwapPanelType = "source" | "destination";
+
+export const SwapView = () => {
+  return (
+    <div className="flex flex-col gap-2 fill-white">
+      <div className="relative flex flex-col gap-5">
+        <SwapPanel type="source" />
+        <ArrowIcon />
+        <SwapPanel type="destination" />
+      </div>
+      <FeesPanel />
+      <SwapButton />
+    </div>
+  );
+};

package/src/components/Swap/index.tsx

@@ -0,0 +1,34 @@
+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";
+
+type Props = {
+  onSubmit: (route: Route) => void;
+  onClose: () => void;
+};
+export const Swap = ({ onClose }: Props) => {
+  const { tab } = useSwapContext();
+
+  const view = useMemo(() => {
+    return tab === "Settings" ? (
+      <SettingsView />
+    ) : tab === "History" ? (
+      <HistoryView />
+    ) : (
+      <SwapView />
+    );
+  }, [tab]);
+
+  return (
+    <div
+      className={`flex flex-col gap-5 p-4 mx-auto text-white bg-x_gray_600 rounded-3xl`}
+    >
+      <Header onClose={onClose} />
+      {view}
+    </div>
+  );
+};

package/src/components/TextInput/index.tsx

@@ -0,0 +1,67 @@
+import { HTMLInputTypeAttribute, forwardRef } from "react";
+
+interface Props<T = string> {
+  inputIcon?: JSX.Element;
+  required?: boolean;
+  name?: string;
+  value: string;
+  placeholder?: string;
+  type?: HTMLInputTypeAttribute;
+  handleChange: (value: T) => void;
+  error?: string;
+  warning?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
+  const {
+    inputIcon,
+    required,
+    name,
+    value,
+    placeholder,
+    type,
+    handleChange,
+    error,
+    warning,
+    disabled = false,
+    className = "",
+  } = props;
+  return (
+    <>
+      <div className="flex items-center border border-solid border-white border-opacity-10 rounded-lg py-0 px-3 gap-2 bg-x_gray_500">
+        {inputIcon}
+        <input
+          ref={ref}
+          disabled={disabled}
+          required={!!required}
+          name={name || ""}
+          value={value}
+          placeholder={placeholder}
+          type={type ? type : "text"}
+          className={`relative h-10 leading-10 z-[1] outline-none w-full text-white bg-transparent border-none ${
+            error
+              ? "border border-x_red_500 bg-gradient-to-r from-x_red_500/15 to-x_gray_500/15 px-3 shadow-[0_0_6px_rgba(255,0,0,0.5)]"
+              : ""
+          } ${
+            warning
+              ? "border-orange-500 bg-gradient-to-r from-x_orange_500/15 to-x_gray_500/15 px-3 shadow-[0_0_6px_rgba(255,165,0,0.5)]"
+              : ""
+          } ${className}`}
+          onChange={(e) => handleChange(e.target.value)}
+        />
+      </div>
+      {error && (
+        <div className="flex justify-between pt-[10px]">
+          <div className="px-5 text-x_red_500">{error}</div>
+        </div>
+      )}
+      {warning && (
+        <div className="flex justify-between pt-[10px]">
+          <div className="px-5 text-x_orange_500">{warning}</div>
+        </div>
+      )}
+    </>
+  );
+});

package/src/components/Timer/index.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { useTimer } from "react-timer-hook";
+
+export enum TimerDisplayFormat {
+  Minutes,
+  Hours,
+  Days,
+}
+
+interface Props {
+  expiryTimestamp: Date;
+  displayFormat?: TimerDisplayFormat;
+  customTextOnExpire?: string;
+}
+
+export const Timer = ({
+  expiryTimestamp,
+  displayFormat = TimerDisplayFormat.Days,
+  customTextOnExpire,
+}: Props) => {
+  const [expired, setExpired] = useState(
+    expiryTimestamp.getTime() < Date.now(),
+  );
+  const { seconds, minutes, hours, days, restart } = useTimer({
+    expiryTimestamp,
+    onExpire: () => setExpired(true),
+  });
+  useEffect(() => {
+    restart(expiryTimestamp);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expiryTimestamp]);
+  return (
+    <>
+      {expired && customTextOnExpire ? (
+        <>{customTextOnExpire}</>
+      ) : (
+        <>
+          {displayFormat === TimerDisplayFormat.Minutes && (
+            <span>{`${(days * 24 + hours) * 60 + minutes}:${seconds
+              .toString()
+              .padStart(2, "0")}`}</span>
+          )}
+          {displayFormat === TimerDisplayFormat.Hours && (
+            <span>{`${days * 24 + hours}:${minutes
+              .toString()
+              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}</span>
+          )}
+          {displayFormat === TimerDisplayFormat.Days && (
+            <span>{`${days}:${hours.toString().padStart(2, "0")}:${minutes
+              .toString()
+              .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`}</span>
+          )}
+        </>
+      )}
+    </>
+  );
+};

package/src/components/ToggleButton/index.tsx

@@ -0,0 +1,24 @@
+type Props = {
+  checked: boolean;
+  onClick: () => void;
+};
+
+const ToggleButton = ({ checked, onClick }: Props) => {
+  return (
+    <div>
+      <span
+        className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
+        onClick={onClick}
+      >
+        <span className="h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]"></span>
+        <span
+          className={`transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
+          ${checked ? "translate-x-[12px] bg-x_blue" : "bg-white"} `}
+        ></span>
+      </span>
+    </div>
+  );
+};
+
+ToggleButton.displayName = "ToggleButton";
+export { ToggleButton };

package/src/components/{UnknownTokenLogo/UnknownTokenLogo.tsx → TokenLogo/Unknown/index.tsx}

@@ -1,12 +1,11 @@
-interface Props {
+type Props = {
   tokenName: string;
   className?: string;
-}
-
+};
 export const UnknownTokenLogo = ({ tokenName, className }: Props) => {
   return (
     <div
-      className={`xpay-w-5 xpay-h-5 xpay-rounded-full xpay-bg-white xpay-shadow-sm xpay-flex xpay-items-center xpay-justify-center xpay-text-black ${className}`}
+      className={`w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`}
     >
       {tokenName.substring(0, 1)}
     </div>

package/src/components/TokenLogo/WithChain/index.tsx

@@ -0,0 +1,34 @@
+import { TokenLogo } from "@src/components";
+import { Chain, Token } from "@src/models";
+
+type Props = {
+  token: Partial<Token> | undefined;
+  chain: Chain | undefined;
+  tokenLogoClassName?: string;
+  generatedLogoClassName?: string;
+  chainLogoClassName?: string;
+};
+export const TokenLogoWithChain = ({
+  token,
+  chain,
+  tokenLogoClassName,
+  generatedLogoClassName,
+  chainLogoClassName,
+}: Props) => {
+  return (
+    <div className="relative flex items-end pr-1 pb-1">
+      <TokenLogo
+        token={token}
+        className={tokenLogoClassName}
+        generatedLogoClassName={generatedLogoClassName}
+      />
+      {chain && (
+        <img
+          src={chain.image}
+          alt={chain.name}
+          className={`absolute bottom-0 right-0 border border-solid border-x_gray_600 rounded-3xl ${chainLogoClassName}`}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/TokenLogo/index.tsx

@@ -0,0 +1,22 @@
+import { UnknownTokenLogo } from "./Unknown";
+import { Token } from "@src/models";
+
+type Props = {
+  token: Partial<Token> | undefined;
+  className?: string;
+  generatedLogoClassName?: string;
+};
+export const TokenLogo = ({
+  token,
+  className,
+  generatedLogoClassName,
+}: Props) => {
+  return token?.image ? (
+    <img src={token.image} alt={token.name} className={className} />
+  ) : token ? (
+    <UnknownTokenLogo
+      tokenName={token.name!}
+      className={generatedLogoClassName}
+    />
+  ) : null;
+};

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,108 @@
+import { xpayShadowRoot } from "@src/config";
+import { FC, RefObject, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+type Position = "TOP" | "BOTTOM" | "LEFT" | "RIGHT";
+
+const positionToClass: Record<Position, string> = {
+  TOP: "-translate-x-1/2 -translate-y-full",
+  BOTTOM: "-translate-x-1/2",
+  LEFT: "-translate-x-full -translate-y-1/2",
+  RIGHT: "-translate-y-1/2",
+};
+
+export const Tooltip: FC<{
+  id: string;
+  position: "TOP" | "BOTTOM" | "LEFT" | "RIGHT";
+  text: string;
+  triggerRef: RefObject<Element>;
+}> = ({ id, position, text, triggerRef }) => {
+  const [positionPx, setPositionPx] = useState({ top: 0, left: 0 });
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const trigger = triggerRef.current;
+
+    const updatePosition = () => {
+      if (!trigger) {
+        return;
+      }
+
+      const rect = trigger.getBoundingClientRect();
+      switch (position) {
+        case "TOP": {
+          setPositionPx({
+            top: rect.top,
+            left: rect.left + rect.width / 2,
+          });
+          break;
+        }
+        case "BOTTOM": {
+          setPositionPx({
+            top: rect.top + rect.height,
+            left: rect.left + rect.width / 2,
+          });
+          break;
+        }
+        case "LEFT": {
+          setPositionPx({
+            top: rect.top + rect.height / 2,
+            left: rect.left,
+          });
+          break;
+        }
+        case "RIGHT": {
+          setPositionPx({
+            top: rect.top + rect.height / 2,
+            left: rect.left + rect.width,
+          });
+          break;
+        }
+      }
+    };
+
+    const handleMouseEnter = () => {
+      updatePosition();
+      setVisible(true);
+    };
+
+    const handleMouseLeave = () => {
+      setVisible(false);
+    };
+
+    if (trigger) {
+      trigger.addEventListener("mouseenter", handleMouseEnter);
+      trigger.addEventListener("mouseleave", handleMouseLeave);
+    }
+
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition, true);
+
+    return () => {
+      if (trigger) {
+        trigger.removeEventListener("mouseenter", handleMouseEnter);
+        trigger.removeEventListener("mouseleave", handleMouseLeave);
+      }
+
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition, true);
+    };
+  }, [triggerRef, position]);
+
+  return createPortal(
+    visible && (
+      <div
+        id={id}
+        className={`fixed z-50 x-border rounded-xl py-2 px-4 bg-x_gray_500 text-sm max-w-80 ${positionToClass[position]}`}
+        style={{
+          top: positionPx.top,
+          left: positionPx.left,
+        }}
+      >
+        {text}
+      </div>
+    ),
+    xpayShadowRoot!,
+    id,
+  );
+};