@xswap-link/sdk 0.3.5 → 0.4.0

package/src/assets/icons/SuccessModalStatusIcon.tsx

@@ -0,0 +1,31 @@
+export const SuccessModalStatusIcon = () => {
+  return (
+    <svg
+      width="81"
+      height="80"
+      viewBox="0 0 81 80"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="check_circle_FILL0_wght400_GRAD0_opsz24 (1) 1">
+        <path
+          id="Vector"
+          d="M35.8334 55.3332L59.3334 31.8332L54.6667 27.1665L35.8334 45.9998L26.3334 36.4998L21.6667 41.1665L35.8334 55.3332ZM40.5001 73.3332C35.889 73.3332 31.5556 72.4582 27.5001 70.7082C23.4445 68.9582 19.9167 66.5832 16.9167 63.5832C13.9167 60.5832 11.5417 57.0554 9.79175 52.9998C8.04175 48.9443 7.16675 44.6109 7.16675 39.9998C7.16675 35.3887 8.04175 31.0554 9.79175 26.9998C11.5417 22.9443 13.9167 19.4165 16.9167 16.4165C19.9167 13.4165 23.4445 11.0415 27.5001 9.2915C31.5556 7.5415 35.889 6.6665 40.5001 6.6665C45.1112 6.6665 49.4445 7.5415 53.5001 9.2915C57.5556 11.0415 61.0834 13.4165 64.0834 16.4165C67.0834 19.4165 69.4584 22.9443 71.2084 26.9998C72.9584 31.0554 73.8334 35.3887 73.8334 39.9998C73.8334 44.6109 72.9584 48.9443 71.2084 52.9998C69.4584 57.0554 67.0834 60.5832 64.0834 63.5832C61.0834 66.5832 57.5556 68.9582 53.5001 70.7082C49.4445 72.4582 45.1112 73.3332 40.5001 73.3332ZM40.5001 66.6665C47.9445 66.6665 54.2501 64.0832 59.4167 58.9165C64.5834 53.7498 67.1667 47.4443 67.1667 39.9998C67.1667 32.5554 64.5834 26.2498 59.4167 21.0832C54.2501 15.9165 47.9445 13.3332 40.5001 13.3332C33.0556 13.3332 26.7501 15.9165 21.5834 21.0832C16.4167 26.2498 13.8334 32.5554 13.8334 39.9998C13.8334 47.4443 16.4167 53.7498 21.5834 58.9165C26.7501 64.0832 33.0556 66.6665 40.5001 66.6665Z"
+          fill="url(#paint0_linear_230_393)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_230_393"
+          x1="7.16675"
+          y1="6.6665"
+          x2="77.4571"
+          y2="10.7355"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4CAF50" />
+          <stop offset="1" stopColor="#2E7D32" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/assets/icons/ThumbUpRoundedIcon.tsx

@@ -0,0 +1,15 @@
+export const ThumbUpRoundedIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 16H12.5C12.7833 16 13.0458 15.9292 13.2875 15.7875C13.5292 15.6458 13.7 15.45 13.8 15.2L15.9 10.3C15.9333 10.2167 15.9583 10.1333 15.975 10.05C15.9917 9.96667 16 9.88333 16 9.8V9C16 8.71667 15.9042 8.47917 15.7125 8.2875C15.5208 8.09583 15.2833 8 15 8H10.4L11 4.6C11.0333 4.43333 11.025 4.275 10.975 4.125C10.925 3.975 10.8417 3.84167 10.725 3.725L10 3L5.4 8C5.26667 8.13333 5.16667 8.28333 5.1 8.45C5.03333 8.61667 5 8.8 5 9V14C5 14.55 5.19583 15.0208 5.5875 15.4125C5.97917 15.8042 6.45 16 7 16ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z"
+        fill="#FFFFFF"
+      />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/TimerIcon.tsx

@@ -7,7 +7,6 @@ export const TimerIcon = () => {
       height="16"
       viewBox="0 -960 960 960"
       width="16"
-      fill="currentColor"
     >
       <path d="M360-840v-80h240v80H360Zm80 440h80v-240h-80v240Zm40 320q-74 0-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80Zm0-80q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-280Z" />
     </svg>

package/src/assets/icons/TokensIcon.tsx

@@ -0,0 +1,16 @@
+export const TokensIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.5 15C9.825 15 8.40625 14.4188 7.24375 13.2563C6.08125 12.0938 5.5 10.675 5.5 9C5.5 7.325 6.08125 5.90625 7.24375 4.74375C8.40625 3.58125 9.825 3 11.5 3C13.175 3 14.5938 3.58125 15.7563 4.74375C16.9188 5.90625 17.5 7.325 17.5 9C17.5 10.675 16.9188 12.0938 15.7563 13.2563C14.5938 14.4188 13.175 15 11.5 15ZM5.5 14.8125C4.175 14.4625 3.09375 13.75 2.25625 12.675C1.41875 11.6 1 10.375 1 9C1 7.625 1.41875 6.4 2.25625 5.325C3.09375 4.25 4.175 3.5375 5.5 3.1875V4.7625C4.6 5.075 3.875 5.61875 3.325 6.39375C2.775 7.16875 2.5 8.0375 2.5 9C2.5 9.9625 2.775 10.8313 3.325 11.6063C3.875 12.3813 4.6 12.925 5.5 13.2375V14.8125ZM11.5 13.5C12.75 13.5 13.8125 13.0625 14.6875 12.1875C15.5625 11.3125 16 10.25 16 9C16 7.75 15.5625 6.6875 14.6875 5.8125C13.8125 4.9375 12.75 4.5 11.5 4.5C10.25 4.5 9.1875 4.9375 8.3125 5.8125C7.4375 6.6875 7 7.75 7 9C7 10.25 7.4375 11.3125 8.3125 12.1875C9.1875 13.0625 10.25 13.5 11.5 13.5Z"
+        fill="white"
+        fillOpacity="0.6"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/WaitingIcon.tsx

@@ -0,0 +1,15 @@
+export const WaitingIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C9.15 0 10.25 0.2375 11.3 0.7125C12.35 1.1875 13.25 1.86667 14 2.75V0H16V7H9V5H13.2C12.6667 4.06667 11.9375 3.33333 11.0125 2.8C10.0875 2.26667 9.08333 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.28333 14 10.4417 13.6333 11.475 12.9C12.5083 12.1667 13.2333 11.2 13.65 10H15.75C15.2833 11.7667 14.3333 13.2083 12.9 14.325C11.4667 15.4417 9.83333 16 8 16Z"
+        fill="#3681C6"
+      />
+    </svg>
+  );
+};

package/src/{components → assets}/icons/XMarkIcon.tsx

@@ -1,10 +1,6 @@
 export const XMarkIcon = () => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 384 512"
-      fill="current"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
       <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
     </svg>
   );

package/src/assets/icons/XPowerIcon.tsx

@@ -0,0 +1,28 @@
+export const XPowerIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 16L10 12.95L14 16L12.5 11.05L16.5 8.2H11.6L10 3L8.4 8.2H3.5L7.5 11.05L6 16ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z"
+        fill="url(#paint0_linear_184_1614)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_184_1614"
+          x1="0"
+          y1="0"
+          x2="21.0871"
+          y2="1.22071"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3681C6" />
+          <stop offset="1" stopColor="#2B4A9D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

package/src/{components → assets}/icons/index.ts

@@ -1,5 +1,6 @@
 export * from "./ArrowRightIcon";
 export * from "./ArrowDownIcon";
+export * from "./ArrowDownLongIcon";
 export * from "./ArrowLeftIcon";
 export * from "./ArrowUpRightIcon";
 export * from "./CheckIcon";
@@ -9,6 +10,7 @@ export * from "./CircularProgressIcon";
 export * from "./CloseIcon";
 export * from "./CoinsIcon";
 export * from "./DownArrorIcon";
+export * from "./DotGreenIcon";
 export * from "./HistoryIcon";
 export * from "./HourGlassIcon";
 export * from "./SearchIcon";
@@ -23,3 +25,17 @@ export * from "./XSwapLogo";
 export * from "./SignIcon";
 export * from "./SuccessIcon";
 export * from "./ErrorIcon";
+export * from "./ErrorModalStatusIcon";
+export * from "./SuccessModalStatusIcon";
+export * from "./LinkExternalIcon";
+export * from "./CopyIcon";
+export * from "./HistoryGradientBgIcon";
+export * from "./SettingsGradientBgIcon";
+export * from "./HelpIcon";
+export * from "./XPowerIcon";
+export * from "./RankIcon";
+export * from "./CashbacklIcon";
+export * from "./ArrowUpIcon";
+export * from "./ThumbUpRoundedIcon";
+export * from "./WaitingIcon";
+export * from "./TokensIcon";

package/src/components/Alert/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export const Alert = ({ desc }: { desc: string }) => {
   return (
-    <div className="xpay-border xpay-border-solid xpay-border-x_alert xpay-rounded-3xl xpay-text-x_alert_light xpay-text-xs xpay-py-0.5 xpay-px-2">
+    <div className="border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2">
       ⚠️ {desc}
     </div>
   );

package/src/components/Button/index.tsx

@@ -0,0 +1,57 @@
+import { MouseEvent, ReactElement, forwardRef } from "react";
+
+interface Props {
+  variant?:
+    | "outlined"
+    | "contained"
+    | "filled-rounded"
+    | "filled-squared"
+    | "default";
+  disabled?: boolean;
+  children: ReactElement | ReactElement[] | string;
+  type?: "submit" | "reset" | "button";
+  value?: string | string[] | number;
+  fullWidth?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  size?: "large" | "medium" | "small";
+  secondary?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      variant,
+      disabled,
+      children,
+      type,
+      value,
+      fullWidth,
+      onClick,
+      className = "",
+      size = "medium",
+      secondary = false,
+    }: Props,
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type ? type : undefined}
+        value={value ? value : undefined}
+        className={`btn ${
+          !variant && disabled ? "btn-disabled" : ""
+        } ${className} btn-${size} btn-${variant}${
+          disabled ? "-disabled" : secondary ? "-secondary" : ""
+        } ${fullWidth ? "btn--full-width" : ""}`}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+export { Button };

package/src/components/MessageBar/SnackMessage.tsx

@@ -0,0 +1,32 @@
+import { MessageBar, MessageType } from "./index";
+import { SnackbarContent } from "notistack";
+import React, { forwardRef } from "react";
+
+interface Props {
+  message: {
+    text: string;
+    variant: MessageType;
+    className?: string;
+    action?: React.FunctionComponent;
+    animation?: React.FunctionComponent;
+  };
+}
+const SnackMessage = forwardRef<HTMLDivElement, Props>(({ message }, ref) => {
+  const { text, variant, className, action, animation } = message;
+
+  return (
+    <SnackbarContent ref={ref}>
+      <MessageBar
+        text={text}
+        type={variant}
+        className={className}
+        isSnackbar={true}
+        Action={action}
+        Animation={animation}
+      />
+    </SnackbarContent>
+  );
+});
+
+SnackMessage.displayName = "SnackMessage";
+export { SnackMessage };

package/src/components/MessageBar/index.tsx

@@ -0,0 +1,44 @@
+import { FunctionComponent } from "react";
+
+export type MessageType = "error" | "warning" | "info" | "success";
+
+type Props = {
+  text: string;
+  type: MessageType;
+  className?: string;
+  isSnackbar?: boolean;
+  Action?: FunctionComponent;
+  Animation?: FunctionComponent;
+};
+export const MessageBar = ({
+  text,
+  type,
+  className,
+  isSnackbar,
+  Action,
+  Animation,
+}: Props) => {
+  return (
+    <div
+      className={`my-5 mx-0 bg-[#252525] rounded-2xl max-w-[500px] min-h-[43px] flex items-center text-xs font-medium text-white border border-solid ${
+        type === "error"
+          ? `border-x_red_400`
+          : type === "warning"
+          ? `border-x_orange_400`
+          : type === "info"
+          ? `border-x-x_blue_300`
+          : type === "success"
+          ? `border-x_green_300`
+          : ""
+      } ${isSnackbar && "m-0"}`}
+    >
+      <p className="p-[15px]">{text}</p>
+      {Animation && <Animation />}
+      {Action && (
+        <div className={`pl-4 fill-white text-white ${className}`}>
+          <Action />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Modal/index.tsx

@@ -0,0 +1,52 @@
+import { xpayShadowRoot } from "@src/config";
+import { MouseEvent, ReactElement } from "react";
+import { createPortal } from "react-dom";
+
+export type ModalType = "neutral" | "waiting" | "warning" | "error" | "success";
+type Props = {
+  id: string;
+  children: ReactElement | ReactElement[];
+  onCloseClick: () => void;
+  type?: ModalType;
+  className?: string;
+};
+export const Modal = ({
+  id,
+  children,
+  onCloseClick,
+  type = "waiting",
+  className,
+}: Props) => {
+  const onBackdropClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    if (e.target === e.currentTarget) {
+      onCloseClick();
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed box-border inset-0 z-20 flex items-center justify-center bg-black bg-opacity-80"
+      onMouseDown={onBackdropClick}
+    >
+      <div
+        className={`relative bg-black rounded-3xl p-4 w-full min-w-[340px] overflow-auto max-w-x_modal border-2 ${
+          type === "error"
+            ? "border-x_red_300"
+            : type === "success"
+            ? "border-x_green"
+            : type === "warning"
+            ? "border-x_orange"
+            : type === "waiting"
+            ? "border-x_blue_300"
+            : "border-white border-opacity-10"
+        } ${className}`}
+      >
+        {children}
+      </div>
+    </div>,
+    xpayShadowRoot!,
+    id,
+  );
+};

package/src/components/PoweredBy/index.tsx

@@ -0,0 +1,12 @@
+import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/assets/icons";
+
+export const PoweredBy = () => {
+  return (
+    <div className="flex justify-center items-center gap-2 my-3">
+      <span className="text-x_grey">Powered by</span>
+      <XSwapBadgeIcon />
+      <span>✕</span>
+      <ChainlinkCCIPIcon />
+    </div>
+  );
+};

package/src/components/SafeInput/index.tsx

@@ -0,0 +1,51 @@
+import { ChangeEvent, forwardRef, useCallback, useMemo } from "react";
+
+const SafeInput = forwardRef<
+  HTMLInputElement,
+  {
+    value: string;
+    onChange: (value: string) => void;
+    regex: RegExp;
+    id: string;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+  }
+>(({ value, onChange, id, placeholder, regex, className, disabled }, ref) => {
+  const size = useMemo(() => (value.length < 2 ? 2 : value.length), [value]);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.value === ".") {
+        // todo temporary fix
+        return;
+      }
+      if (regex.test(e.target.value)) {
+        onChange(e.target.value.replace(/,/g, "."));
+      }
+    },
+    [onChange, regex, id],
+  );
+
+  return (
+    <input
+      ref={ref}
+      id={id}
+      type="text"
+      size={size}
+      placeholder={placeholder || "0"}
+      pattern={regex.toString()}
+      inputMode="decimal"
+      spellCheck="false"
+      autoComplete="off"
+      autoCorrect="off"
+      disabled={disabled}
+      value={value}
+      onChange={handleChange}
+      className={className}
+    />
+  );
+});
+
+SafeInput.displayName = "SafeInput";
+export { SafeInput };

package/src/components/Skeleton/index.tsx

@@ -1,15 +1,11 @@
-import React from "react";
+import { FC } from "react";
 
-type Props = {
-  width: string;
-  height: string;
-  other?: string;
-};
-
-export const Skeleton = ({ width, height }: Props) => {
+export const Skeleton: FC<{ className?: string }> = ({ className }) => {
   return (
     <div
-      className={`xpay-bg-gray-700 xpay-rounded xpay-animate-pulse ${width} ${height}`}
+      className={`bg-x_skeleton_background rounded animate-pulse ${
+        className || ""
+      }`}
     />
   );
 };

package/src/components/Spinner/index.tsx

@@ -1,15 +1,13 @@
-type Props = {
-  width: string;
-  height: string;
-  other?: string;
-};
+import { FC } from "react";
 
-export const Spinner = ({ width, height }: Props) => {
+export const Spinner: FC<{ className?: string }> = ({ className }) => {
   return (
-    <div role="status">
+    <div role="status" className={className || ""}>
       <svg
         aria-hidden="true"
-        className={`xpay-w-${width} xpay-h-${height} xpay-text-gray-200 xpay-animate-spin dark:xpay-text-gray-600 xpay-fill-[rgba(54,129,198,1)]`}
+        className={`animate-spin fill-white text-white text-opacity-10 ${
+          className || ""
+        }`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

package/src/components/Swap/Header/Controls/index.tsx

@@ -0,0 +1,57 @@
+import {
+  CloseIcon,
+  HistoryGradientBgIcon,
+  SettingsGradientBgIcon,
+} from "@src/assets/icons";
+import { useSwapContext } from "@src/context";
+
+type Props = {
+  onClose: () => void;
+};
+export const Controls = ({ onClose }: Props) => {
+  const { tab, setTab } = useSwapContext();
+
+  return (
+    <div className="flex gap-5 items-center">
+      {tab === "Swap" ? (
+        <>
+          <button
+            type="button"
+            onClick={() => setTab("Settings")}
+            aria-label="Open settings"
+            className="fill-white"
+          >
+            <SettingsGradientBgIcon />
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("History")}
+            aria-label="Open history"
+            className="fill-white"
+          >
+            <HistoryGradientBgIcon />
+          </button>
+          <button
+            type="button"
+            onClick={() => onClose()}
+            aria-label="Close"
+            className="fill-white"
+          >
+            <CloseIcon />
+          </button>
+        </>
+      ) : (
+        <button
+          type="button"
+          onClick={() => {
+            setTab("Swap");
+          }}
+          aria-label="Switch to swap view"
+          className="fill-white"
+        >
+          <CloseIcon />
+        </button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,16 @@
+import { useSwapContext } from "@src/context";
+import { Controls } from "./Controls";
+
+type Props = {
+  onClose: () => void;
+};
+export const Header = ({ onClose }: Props) => {
+  const { tab } = useSwapContext();
+
+  return (
+    <div className="flex justify-between">
+      <div className="text-xl">{tab}</div>
+      <Controls onClose={onClose} />
+    </div>
+  );
+};

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

@@ -0,0 +1,34 @@
+import { Spinner, TxDataCard } from "@src/components";
+import { useHistory } from "@src/context";
+import { useMemo } from "react";
+import { Virtuoso } from "react-virtuoso";
+
+export const HistoryView = () => {
+  const { history, historyLoadedOnce } = useHistory();
+
+  const view = useMemo(() => {
+    if (!history || history.length === 0) {
+      return historyLoadedOnce ? (
+        <div className="text-center py-4 text-[#9e9e9e]">
+          Your history is empty
+        </div>
+      ) : (
+        <div className="flex justify-center w-full py-4 fill-white">
+          <Spinner className="w-8 h-8" />
+        </div>
+      );
+    }
+
+    return (
+      <Virtuoso
+        data={history}
+        style={{ height: "100%" }}
+        itemContent={(_, transaction) => {
+          return <TxDataCard transaction={transaction} />;
+        }}
+      />
+    );
+  }, [history, historyLoadedOnce]);
+
+  return <div className="h-[50vh] overflow-hidden">{view}</div>;
+};

package/src/components/Swap/SettingsView/Delivery/index.tsx

@@ -0,0 +1,42 @@
+import { HelpIcon } from "@src/assets/icons";
+import { ToggleButton, Tooltip } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { useRef } from "react";
+
+export const Delivery = () => {
+  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
+  const { expressDelivery, setExpressDelivery } = useSwapContext();
+
+  return (
+    <div className="flex flex-col gap-5 pt-5 border-t border-solid border-white border-opacity-10">
+      <h1 className="text-sm font-medium">Delivery</h1>
+      <div className="flex gap-2 items-center justify-between flex-wrap">
+        <div className="flex items-center">
+          <h2 className="text-xs">Express delivery: </h2>
+          <ToggleButton
+            checked={expressDelivery}
+            onClick={() => {
+              setExpressDelivery((x) => !x);
+            }}
+          />
+          <Tooltip
+            text={
+              "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $1000 USD."
+            }
+            position="BOTTOM"
+            triggerRef={tooltipTriggerRef}
+            id="express-delivery-tooltip"
+          />
+          <HelpIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help fill-x_blue_300 w-[18px] h-[18px]"
+          />
+        </div>
+        <div className="text-xs font-medium">
+          <span className="text-xs font-medium opacity-60">{`Max time: `}</span>
+          {expressDelivery ? "30 sec" : "30 min"}
+        </div>
+      </div>
+    </div>
+  );
+};