@xswap-link/sdk 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/assets/icons/AdjustmentsIcon.tsx

@@ -0,0 +1,18 @@
+export const AdjustmentsIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/CaretDownIcon.tsx

@@ -0,0 +1,12 @@
+export const CaretDownIcon = () => {
+  return (
+    <svg
+      width="10"
+      height="5"
+      viewBox="0 0 10 5"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M4.9999 5.0002L0 0L5 1.25006L10 0L4.9999 5.0002Z" />
+    </svg>
+  );
+};

package/src/assets/icons/CaretsUpDownIcon.tsx

@@ -0,0 +1,13 @@
+export const CaretsUpDownIcon = () => {
+  return (
+    <svg
+      width="10"
+      height="16"
+      viewBox="0 0 10 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M4.99987 16L0 10.9999L5 12.2499L10 10.9999L4.99987 16Z" />
+      <path d="M5.00013 0L10 5.00013L5 3.7501L0 5.00013L5.00013 0Z" />
+    </svg>
+  );
+};

package/src/assets/icons/ChainlinkMarkIcon.tsx

@@ -0,0 +1,17 @@
+export const ChainlinkMarkIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="24" height="24" rx="4" fill="white" fillOpacity="0.03" />
+      <path
+        d="M12.0667 5L6 8.5V15.5L12.0667 19L18.1333 15.5V8.5L12.0667 5ZM15.5632 14.0166L12.0678 16.0331L8.57239 14.0166V9.98344L12.0678 7.96688L15.5632 9.98344V14.0166Z"
+        fill="#0847F7"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/ClockIcon.tsx

@@ -0,0 +1,18 @@
+export const ClockIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/WarningIcon.tsx

@@ -0,0 +1,16 @@
+export const WarningIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -1,12 +1,17 @@
+export * from "./AdjustmentsIcon";
 export * from "./ArrowDownIcon";
+export * from "./ClockIcon";
 export * from "./ArrowDownLongIcon";
 export * from "./ArrowLeftIcon";
 export * from "./ArrowRightIcon";
 export * from "./ArrowsExchange";
 export * from "./ArrowUpIcon";
 export * from "./ArrowUpRightIcon";
+export * from "./CaretDownIcon";
+export * from "./CaretsUpDownIcon";
 export * from "./CashbacklIcon";
 export * from "./ChainlinkIcon";
+export * from "./ChainlinkMarkIcon";
 export * from "./CheckIcon";
 export * from "./ChevronDownIcon";
 export * from "./ChevronUpIcon";
@@ -37,6 +42,7 @@ export * from "./ThumbUpRoundedIcon";
 export * from "./TimerIcon";
 export * from "./TokensIcon";
 export * from "./WaitingIcon";
+export * from "./WarningIcon";
 export * from "./WalletConnectIcon";
 export * from "./XMarkIcon";
 export * from "./XPowerIcon";

package/src/components/Modal/index.tsx

@@ -44,10 +44,10 @@ export const Modal: FC<{
       }}
     >
       <div
-        className="flex flex-col bg-t_bg_primary rounded-3xl p-4 w-full min-w-[340px]"
+        className="flex flex-col bg-t_bg_primary rounded-[20px] border border-solid border-t_text_primary border-opacity-10 p-5 sm:p-6 w-full min-w-[340px]"
         style={{
           height: overlay ? "600px" : "100%",
-          maxWidth: "480px",
+          maxWidth: "636px",
           maxHeight: "100%",
         }}
       >

package/src/components/PoweredBy/index.tsx

@@ -1,11 +1,20 @@
-import { ChainlinkIcon } from "@src/assets/icons";
+import { ChainlinkMarkIcon } from "@src/assets/icons";
 
 export const PoweredBy = () => {
   return (
-    <div className="flex justify-center items-center gap-2 my-3">
-      <span className="text-t_text_primary opacity-50">Powered by</span>
-      <div className="flex items-center gap-1 fill-t_chainlink_logo">
-        <ChainlinkIcon />
+    <div className="flex justify-end items-center">
+      <div className="flex items-center gap-2 p-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
+        <div className="flex items-center [&_svg]:h-6 [&_svg]:w-6">
+          <ChainlinkMarkIcon />
+        </div>
+        <p className="text-sm whitespace-nowrap leading-6">
+          <span className="text-t_text_primary text-opacity-50">
+            {`Backed By `}
+          </span>
+          <span className="text-t_text_primary text-opacity-75">
+            Chainlink.
+          </span>
+        </p>
       </div>
     </div>
   );

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

@@ -1,58 +1,72 @@
-import {
-  CloseIcon,
-  HistoryGradientBgIcon,
-  SettingsGradientBgIcon,
-} from "@src/assets/icons";
+import { AdjustmentsIcon, ClockIcon, CloseIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
+import { FC, ReactNode } from "react";
 
 type Props = {
   onClose: () => void;
 };
+
+const HeaderIconButton: FC<{
+  onClick: () => void;
+  label: string;
+  children: ReactNode;
+}> = ({ onClick, label, children }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    aria-label={label}
+    className="flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_tertiary bg-opacity-5 text-t_text_primary hover:bg-opacity-10 transition-colors"
+  >
+    {children}
+  </button>
+);
+
 export const Controls = ({ onClose }: Props) => {
   const { tab, setTab, overlay } = useSwapContext();
 
   return (
-    <div className="flex gap-5 items-center">
+    <div className="flex gap-2 items-center">
       {tab === "Swap" ? (
         <>
-          <button
-            type="button"
+          <HeaderIconButton
             onClick={() => setTab("Settings")}
-            aria-label="Open settings"
-            className="fill-white"
+            label="Open preferences"
           >
-            <SettingsGradientBgIcon />
-          </button>
-          <button
-            type="button"
+            <AdjustmentsIcon className="w-4 h-4 opacity-50" />
+          </HeaderIconButton>
+          <HeaderIconButton
             onClick={() => setTab("History")}
-            aria-label="Open history"
-            className="fill-white"
+            label="Open activity"
           >
-            <HistoryGradientBgIcon />
-          </button>
+            <ClockIcon className="w-4 h-4 opacity-50" />
+          </HeaderIconButton>
           {overlay && (
-            <button
-              type="button"
-              onClick={() => onClose()}
-              aria-label="Close"
-              className="fill-t_text_primary"
-            >
-              <CloseIcon />
-            </button>
+            <HeaderIconButton onClick={onClose} label="Close">
+              <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+                <CloseIcon />
+              </div>
+            </HeaderIconButton>
           )}
         </>
       ) : (
-        <button
-          type="button"
-          onClick={() => {
-            setTab("Swap");
-          }}
-          aria-label="Switch to swap view"
-          className="fill-t_text_primary"
-        >
-          <CloseIcon />
-        </button>
+        <>
+          {tab === "Settings" && (
+            <HeaderIconButton
+              onClick={() => setTab("Settings")}
+              label="Preferences"
+            >
+              <AdjustmentsIcon className="w-4 h-4 opacity-50" />
+            </HeaderIconButton>
+          )}
+          <HeaderIconButton
+            onClick={() => setTab("Swap")}
+            label="Back to swap"
+          >
+            <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+              <CloseIcon />
+            </div>
+          </HeaderIconButton>
+        </>
       )}
     </div>
   );

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

@@ -1,17 +1,24 @@
 import { useSwapContext } from "@src/context";
 import { Controls } from "./Controls";
 
+const DEFAULT_WIDGET_TITLE = "XLane.";
+
 type Props = {
   onClose: () => void;
 };
 export const Header = ({ onClose }: Props) => {
-  const { tab, bridgeUI } = useSwapContext();
+  const { tab, integrationConfig } = useSwapContext();
+
+  const title =
+    tab === "Settings"
+      ? "Preferences"
+      : tab === "History"
+      ? "My Activity"
+      : integrationConfig.widgetTitle || DEFAULT_WIDGET_TITLE;
 
   return (
-    <div className="flex justify-between mt-2 px-4">
-      <div className="text-xl font-sans-bold font-bold">
-        {tab === "Swap" && bridgeUI ? "Bridge" : tab}
-      </div>
+    <div className="flex justify-between items-center">
+      <div className="text-2xl leading-8 tracking-[0.01em]">{title}</div>
       <Controls onClose={onClose} />
     </div>
   );

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

@@ -0,0 +1,212 @@
+import {
+  faArrowUpRightFromSquare,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  Spinner,
+  Timer,
+  TimerDisplayFormat,
+  TokenLogo,
+} from "@src/components";
+import { CCIP_EXPLORER } from "@src/constants";
+import { useSwapContext } from "@src/context";
+import { useWallet } from "@src/context/WalletProvider";
+import { Transaction } from "@src/models";
+import { shortAddress, weiToHumanReadable } from "@src/utils";
+import { format } from "date-fns";
+import { useMemo } from "react";
+
+interface Props {
+  transaction: Transaction;
+}
+
+export const ActivityCard = ({ transaction }: Props) => {
+  const { supportedChains, findTokenDataByAddressAndChain, tokenPrices } =
+    useSwapContext();
+  const { evm, solana } = useWallet();
+
+  const receiverAddress =
+    transaction.receiver ||
+    (transaction.sourceChainId === "mainnet-beta"
+      ? solana.address
+      : evm.address);
+
+  const srcToken = findTokenDataByAddressAndChain(
+    transaction.sourceChainId === "mainnet-beta"
+      ? transaction.tokenAddress
+      : transaction.tokenAddress.toLowerCase(),
+    transaction.sourceChainId,
+  );
+  const dstToken = transaction.tokenOutAddress
+    ? findTokenDataByAddressAndChain(
+        transaction.sourceChainId === "mainnet-beta"
+          ? transaction.tokenOutAddress
+          : transaction.tokenOutAddress?.toLowerCase(),
+        transaction.targetChainId,
+      )
+    : undefined;
+
+  const srcChain = supportedChains.find(
+    (chain) => chain.chainId === transaction.sourceChainId,
+  );
+  const dstChain = supportedChains.find(
+    (chain) => chain.chainId === transaction.targetChainId,
+  );
+
+  const date = format(
+    new Date(transaction.timestamp * 1000),
+    "dd.MM.yyyy · hh.mmaa",
+  );
+
+  const receivedToken = dstToken || srcToken;
+
+  const amountToken =
+    transaction.tokenOutAmount && dstToken ? dstToken : srcToken;
+
+  const amount = useMemo(() => {
+    if (transaction.tokenOutAmount && dstToken) {
+      return weiToHumanReadable({
+        amount: transaction.tokenOutAmount,
+        decimals: dstToken.decimals,
+        precisionFractionalPlaces: 4,
+      });
+    }
+    return weiToHumanReadable({
+      amount: transaction.amountWei,
+      decimals: srcToken?.decimals || 18,
+      precisionFractionalPlaces: 4,
+    });
+  }, [transaction, srcToken, dstToken]);
+
+  const amountUsd = useMemo(() => {
+    const token = dstToken || srcToken;
+    const chainId = dstToken
+      ? transaction.targetChainId
+      : transaction.sourceChainId;
+    if (!token) return null;
+    const price = tokenPrices[chainId]?.[token.address];
+    if (!price) return null;
+    return (Number(amount.replace(/,/g, "")) * Number(price)).toFixed(2);
+  }, [amount, dstToken, srcToken, tokenPrices, transaction]);
+
+  const explorerUrl = transaction.messageId
+    ? `${CCIP_EXPLORER}${transaction.messageId}`
+    : `${
+        supportedChains.find(
+          (chain) => chain.chainId === transaction.sourceChainId,
+        )?.transactionExplorer
+      }/${transaction.hash}`;
+
+  return (
+    <div className="flex flex-col gap-px pb-2">
+      <div className="flex items-center justify-between gap-2 px-4 py-2 rounded-t-xl bg-t_bg_tertiary bg-opacity-5">
+        <p className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
+          {date}
+        </p>
+        <div className="flex items-center gap-2">
+          {transaction.status === "IN_PROGRESS" ? (
+            <div className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-t_warning_dark bg-opacity-10 text-t_text_orange">
+              <Spinner className="w-3 h-3" />
+              <p className="text-xs leading-[18px] whitespace-nowrap">
+                {`Est. Time `}
+                <Timer
+                  displayFormat={TimerDisplayFormat.Minutes}
+                  expiryTimestamp={
+                    new Date(transaction.estimatedDeliveryTimestamp)
+                  }
+                  customTextOnExpire="finalizing"
+                />
+              </p>
+            </div>
+          ) : transaction.status === "DONE" ? (
+            <p className="text-xs leading-[18px] text-t_text_green px-2 py-1">
+              Done
+            </p>
+          ) : transaction.status === "REVERTED" ? (
+            <p className="text-xs leading-[18px] text-t_text_red px-2 py-1">
+              Reverted
+            </p>
+          ) : null}
+          <a
+            href={explorerUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center justify-center w-6 h-6 rounded-md bg-t_bg_tertiary bg-opacity-5 no-underline text-t_text_primary hover:bg-opacity-10 transition-colors"
+            aria-label="Show the transaction in the chain explorer"
+          >
+            <FontAwesomeIcon
+              icon={faArrowUpRightFromSquare}
+              className="w-3 h-3 opacity-70"
+            />
+          </a>
+        </div>
+      </div>
+      <div className="flex items-center gap-3 px-4 py-3 rounded-b-xl bg-t_bg_tertiary bg-opacity-[0.03]">
+        <div className="flex items-center shrink-0">
+          {dstToken && (
+            <div className="flex items-end -mr-2">
+              <TokenLogo
+                token={srcToken}
+                className="min-w-[38px] w-[38px] h-[38px] -mr-2.5"
+                generatedLogoClassName="min-w-[38px] w-[38px] h-[38px] text-[15px] -mr-2.5"
+              />
+              {srcChain && (
+                <img
+                  src={srcChain.image}
+                  alt={srcChain.name}
+                  className="w-4 h-4 shrink-0 border border-solid border-t_bg_secondary rounded-full"
+                />
+              )}
+            </div>
+          )}
+          <div className="flex items-end">
+            <TokenLogo
+              token={receivedToken}
+              className="min-w-[38px] w-[38px] h-[38px] -mr-2.5"
+              generatedLogoClassName="min-w-[38px] w-[38px] h-[38px] text-[15px] -mr-2.5"
+            />
+            {dstChain && (
+              <img
+                src={dstChain.image}
+                alt={dstChain.name}
+                className="w-4 h-4 shrink-0 border border-solid border-t_bg_secondary rounded-full"
+              />
+            )}
+          </div>
+        </div>
+        <div className="flex justify-between items-center gap-2 w-full min-w-0">
+          <div className="text-left min-w-0">
+            <div className="flex items-center gap-1.5 text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary">
+              <span>{srcToken?.symbol || "?"}</span>
+              {dstToken && (
+                <>
+                  <FontAwesomeIcon
+                    icon={faChevronRight}
+                    className="w-2.5 h-2.5 opacity-50"
+                  />
+                  <span>{dstToken.symbol}</span>
+                </>
+              )}
+            </div>
+            <div className="flex gap-2 items-center text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+              <span className="whitespace-nowrap truncate">
+                {`Receiver ${receiverAddress ? shortAddress(receiverAddress) : "-"}`}
+              </span>
+            </div>
+          </div>
+          <div className="text-right shrink-0">
+            <div className="text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary">
+              {amountToken ? `${amount} ${amountToken.symbol}` : amount}
+            </div>
+            {amountUsd && (
+              <div className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
+                {`${amountUsd} USD`}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,8 +1,9 @@
-import { Spinner, TxDataCard } from "@src/components";
+import { Spinner } from "@src/components";
 import { useHistory } from "@src/context";
 import { useWallet } from "@src/context/WalletProvider";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
+import { ActivityCard } from "./ActivityCard";
 
 export const HistoryView = () => {
   const { history, historyLoadedOnce, solanaHistory, solanaHistoryLoadedOnce } =
@@ -27,12 +28,29 @@ export const HistoryView = () => {
         historyLoadedOnce && (solanaAddress ? solanaHistoryLoadedOnce : true);
 
       return isHistoryLoaded ? (
-        <div className="text-center py-4 text-[#9e9e9e]">
-          Your history is empty
+        <div className="flex flex-col items-center justify-center gap-2 h-full min-h-[320px] text-center">
+          <p className="text-sm font-medium text-t_text_primary">
+            Nothing here yet...
+          </p>
+          <p className="text-xs leading-[18px] text-t_text_primary text-opacity-50">
+            Your swaps will show up here
+            <br />
+            once you make the first one.
+          </p>
         </div>
       ) : (
-        <div className="flex justify-center w-full py-4 fill-t_text_primary">
+        <div className="flex flex-col items-center justify-center gap-4 h-full min-h-[320px] text-center">
           <Spinner className="w-8 h-8" />
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-t_text_primary">
+              Where's it...
+            </p>
+            <p className="text-xs leading-[18px] text-t_text_primary text-opacity-50">
+              We crunch data for your view.
+              <br />
+              Please wait a moment.
+            </p>
+          </div>
         </div>
       );
     }
@@ -40,9 +58,9 @@ export const HistoryView = () => {
     return (
       <Virtuoso
         data={unifiedHistory}
-        style={{ height: "532px" }}
+        style={{ height: "424px" }}
         itemContent={(_, transaction) => {
-          return <TxDataCard transaction={transaction} />;
+          return <ActivityCard transaction={transaction} />;
         }}
       />
     );

package/src/components/Swap/ReorderButton/ReorderButton.tsx

@@ -1,4 +1,4 @@
-import { ArrowsExchange } from "@src/assets/icons";
+import { CaretsUpDownIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { FC } from "react";
 
@@ -22,16 +22,14 @@ export const ReorderButton: FC = () => {
   };
 
   return (
-    <div className="h-[1px] w-full">
+    <div className="h-0 w-full relative z-[1]">
       <button
         onClick={onReorderClick}
         aria-label="Switch target token with the source token"
-        className="absolute -translate-y-5 left-1/2 -translate-x-5 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
+        className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_secondary border border-solid border-t_text_primary border-opacity-10 hover:border-opacity-25 transition-colors"
       >
-        <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
-            <ArrowsExchange />
-          </div>
+        <div className="flex fill-t_text_primary opacity-75 [&_svg]:w-2.5 [&_svg]:h-4">
+          <CaretsUpDownIcon />
         </div>
       </button>
     </div>