@xswap-link/sdk 0.13.1 → 0.14.1

package/localTheme.ts

@@ -50,8 +50,9 @@ const lightThemeStyles: ModalIntegrationThemeStyles = {
 };
 
 const darkThemeStyles: ModalIntegrationThemeStyles = {
-  mainAccentLight: "#3681C6",
-  mainAccentDark: "#2B4A9D",
+  // Lavender CTA gradient from the swap-v2 design
+  mainAccentLight: "#D3DAF2",
+  mainAccentDark: "#B8C1E9",
   bgPrimary: "#020202",
   bgSecondary: "#0F0F0F",
   bgTertiary: "#ffffff",
@@ -62,7 +63,8 @@ const darkThemeStyles: ModalIntegrationThemeStyles = {
   textGreen: "#4CAF50",
   clickSecondary: "#3681C6",
   clickTertiary: "#FFFFFF",
-  buttonPrText: "#FFFFFF",
+  // Dark text sits on the light lavender primary button
+  buttonPrText: "#020202",
   buttonPrOffBg: "#272727",
   buttonPrOffText: "#90A4AE",
   labelText: "#FFFFFF",

package/package.json

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

package/src/assets/icons/AdjustmentsIcon.tsx

@@ -0,0 +1,16 @@
+export const AdjustmentsIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      // The 20px-wide artwork is clipped to a 16px box in the design,
+      // so the slider lines run edge to edge.
+      viewBox="2 0 16 10.4"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="M8.4 2.1L20 2.1M5.2 2.1C5.2 1.21634 5.91635 0.5 6.8 0.5C7.68366 0.5 8.4 1.21635 8.4 2.1C8.4 2.98366 7.68366 3.7 6.8 3.7C5.91635 3.7 5.2 2.98365 5.2 2.1ZM0 2.1H5.2M14.8 8.3L20 8.3M11.6 8.3C11.6 7.41634 12.3163 6.7 13.2 6.7C14.0837 6.7 14.8 7.41635 14.8 8.3C14.8 9.18366 14.0837 9.9 13.2 9.9C12.3163 9.9 11.6 9.18366 11.6 8.3ZM6.8 8.3H11.6" />
+    </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,14 @@
+export const ClockIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      className={className}
+    >
+      <path d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.0748 12.2503 15.3875 8.20117 15.4941L4.35352 11.6465C3.67047 10.924 2.67065 9.92446 1.84375 9.10742C1.42752 8.69616 1.05392 8.32896 0.78418 8.06543C0.671658 7.9555 0.576752 7.86393 0.504883 7.79395C0.614072 3.7471 3.92679 0.5 8 0.5Z" />
+      <path d="M8 4V8H10.0011" />
+    </svg>
+  );
+};

package/src/assets/icons/CloseIcon.tsx

@@ -6,10 +6,14 @@ export const CloseIcon: FC<{ className?: string }> = ({ className }) => {
       height="18"
       width="18"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 10.312 8.319"
+      viewBox="0 0 10 9"
+      fill="none"
+      stroke="currentColor"
       className={className || ""}
     >
-      <path d="M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z" />
+      {/* Hairline 1px stroke at any render size, as in the design */}
+      <path vectorEffect="non-scaling-stroke" d="M0 0.5H1L9 8.5H10" />
+      <path vectorEffect="non-scaling-stroke" d="M10 0.5H9L1 8.5H0" />
     </svg>
   );
 };

package/src/assets/icons/WarningIcon.tsx

@@ -0,0 +1,19 @@
+export const WarningIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M11 0C12.6568 6.60986e-05 14 1.34319 14 3V11C14 12.6568 12.6568 13.9999 11 14H3C1.34315 14 1.61073e-08 12.6569 0 11V3C1.28858e-07 1.34315 1.34315 0 3 0H11Z"
+        fill="#F46F28"
+      />
+      <path
+        d="M7.66699 9.66699V11H6.33301V9.66699H7.66699ZM8 3V4.33301L7.66699 5.66699V8.33301H6.33301V5.66699L6 4.33301V3H8Z"
+        fill="#0B0B0B"
+      />
+    </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

@@ -7,6 +7,11 @@ import { FC, ReactNode } from "react";
  * - Modals needs to be inside all app's main contexts,
  * - Modals' need to rerender on props change.
  *
+ * Presentation follows the swap-v2 design:
+ * - sm and up: the content replaces the widget in place (fills the widget
+ *   container with the same radius), or is centered when in overlay mode,
+ * - below sm: a bottom sheet pinned to the viewport with a drag handle.
+ *
  * Usage:
  * ```
  * const [open, setOpen] = useState(false);
@@ -30,12 +35,14 @@ export const Modal: FC<{
   return (
     <div
       className={`${
-        overlay ? "fixed bg-[rgba(0,0,0,0.8)]" : "absolute"
-      } top-0 left-0 right-0 bottom-0 flex items-center justify-center z-10 ${
+        overlay
+          ? "fixed bg-[rgba(0,0,0,0.8)]"
+          : "fixed sm:absolute bg-[rgba(2,2,2,0.8)] sm:bg-transparent"
+      } top-0 left-0 right-0 bottom-0 flex flex-col justify-end sm:justify-center items-center z-10 ${
         className || ""
       }`}
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget && overlay) {
+        if (e.target === e.currentTarget) {
           e.stopPropagation();
           e.nativeEvent.stopImmediatePropagation();
           e.preventDefault();
@@ -44,13 +51,11 @@ export const Modal: FC<{
       }}
     >
       <div
-        className="flex flex-col bg-t_bg_primary rounded-3xl p-4 w-full min-w-[340px]"
-        style={{
-          height: overlay ? "600px" : "100%",
-          maxWidth: "480px",
-          maxHeight: "100%",
-        }}
+        className={`flex flex-col w-full bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary border-t sm:border border-solid border-t_text_primary border-opacity-10 rounded-t-[24px] rounded-b-none sm:rounded-[32px] p-4 pt-2.5 sm:p-8 h-[85vh] max-h-full overflow-hidden ${
+          overlay ? "sm:h-[600px] sm:max-w-[636px]" : "sm:h-full"
+        }`}
       >
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
         {children}
       </div>
     </div>

package/src/components/PoweredBy/index.tsx

@@ -1,11 +1,18 @@
-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.5 px-3 py-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
+        <div className="flex items-center [&_svg]:h-5 [&_svg]:w-5">
+          <ChainlinkMarkIcon />
+        </div>
+        <p className="text-xs whitespace-nowrap leading-5 tracking-[0.015em]">
+          <span className="text-t_text_primary text-opacity-70">
+            {`POWERED BY `}
+          </span>
+          <span className="text-t_text_primary">CCIP.</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} />;
         }}
       />
     );