@xswap-link/sdk 0.14.1 → 0.15.1

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

@@ -1,14 +1,9 @@
 import {
-  faArrowUpRightFromSquare,
-  faChevronRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  Spinner,
-  Timer,
-  TimerDisplayFormat,
-  TokenLogo,
-} from "@src/components";
+  ChevronRightThinIcon,
+  LinkExternalThinIcon,
+  LoadingRingIcon,
+} from "@src/assets/icons";
+import { Timer, TimerDisplayFormat, TokenLogoWithChain } from "@src/components";
 import { CCIP_EXPLORER } from "@src/constants";
 import { useSwapContext } from "@src/context";
 import { useWallet } from "@src/context/WalletProvider";
@@ -54,16 +49,12 @@ export const ActivityCard = ({ transaction }: Props) => {
     (chain) => chain.chainId === transaction.targetChainId,
   );
 
-  const date = format(
-    new Date(transaction.timestamp * 1000),
-    "dd.MM.yyyy · hh.mmaa",
-  );
+  const txDate = new Date(transaction.timestamp * 1000);
+  const date = format(txDate, "dd.MM.yyyy");
+  const time = format(txDate, "hh.mmaa");
 
   const receivedToken = dstToken || srcToken;
 
-  const amountToken =
-    transaction.tokenOutAmount && dstToken ? dstToken : srcToken;
-
   const amount = useMemo(() => {
     if (transaction.tokenOutAmount && dstToken) {
       return weiToHumanReadable({
@@ -98,112 +89,116 @@ export const ActivityCard = ({ transaction }: Props) => {
         )?.transactionExplorer
       }/${transaction.hash}`;
 
+  const destinationChain = dstChain || srcChain;
+
   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 className="pb-2">
+      <div className="flex flex-col gap-4 p-4 rounded-2xl bg-t_bg_tertiary bg-opacity-[0.03]">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-t_bg_tertiary bg-opacity-[0.03]">
+            <span className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
+              {date}
+            </span>
+            <span className="w-0.5 h-0.5 shrink-0 bg-t_text_primary opacity-25" />
+            <span className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
+              {time}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {transaction.status === "IN_PROGRESS" ? (
+              <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-t_text_orange bg-opacity-[0.07] text-t_text_orange">
+                <LoadingRingIcon className="w-4 h-4 shrink-0 animate-spin" />
+                <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" ? (
+              <div className="flex items-center px-3 py-2 rounded-md bg-t_text_green bg-opacity-5">
+                <p className="text-xs leading-[18px] whitespace-nowrap text-t_text_green text-opacity-80">
+                  Done
+                </p>
+              </div>
+            ) : transaction.status === "REVERTED" ? (
+              <div className="flex items-center px-3 py-2 rounded-md bg-t_bg_tertiary bg-opacity-[0.03]">
+                <p className="text-xs leading-[18px] whitespace-nowrap text-t_text_primary text-opacity-50">
+                  Reverted
+                </p>
+              </div>
+            ) : null}
+            <a
+              href={explorerUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center justify-center w-[34px] h-[34px] shrink-0 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"
+            >
+              <LinkExternalThinIcon className="w-3 h-3 opacity-50" />
+            </a>
+          </div>
         </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 className="flex items-center gap-3">
+          <div className="flex items-center shrink-0">
+            {dstToken && (
+              <div className="-mr-2">
+                <TokenLogoWithChain
+                  token={srcToken}
+                  chain={srcChain}
+                  tokenLogoClassName="min-w-10 w-10 h-10 border border-solid border-t_bg_secondary"
+                  generatedLogoClassName="min-w-10 w-10 h-10 text-[16px] border border-solid border-t_bg_secondary"
+                  chainLogoClassName="w-[18px]"
                 />
-              )}
-            </div>
-          )}
-          <div className="flex items-end">
-            <TokenLogo
+              </div>
+            )}
+            <TokenLogoWithChain
               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"
+              chain={dstChain}
+              tokenLogoClassName="min-w-10 w-10 h-10 border border-solid border-t_bg_secondary"
+              generatedLogoClassName="min-w-10 w-10 h-10 text-[16px] border border-solid border-t_bg_secondary"
+              chainLogoClassName="w-[18px]"
             />
-            {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 className="flex justify-between items-center gap-2 w-full min-w-0">
+            <div className="flex flex-col gap-0.5 text-left min-w-0">
+              <div className="flex items-center gap-2 text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary">
+                <span>{srcToken?.symbol || "?"}</span>
+                {dstToken && (
+                  <>
+                    <ChevronRightThinIcon className="shrink-0 opacity-50" />
+                    <span className="truncate">{dstToken.symbol}</span>
+                  </>
+                )}
+              </div>
+              <div className="flex items-center gap-2 text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50 min-w-0">
+                {destinationChain && (
+                  <>
+                    <span className="whitespace-nowrap truncate">
+                      {`Destination ${destinationChain.displayName || destinationChain.name}`}
+                    </span>
+                    <span className="w-0.5 h-0.5 shrink-0 bg-t_text_primary opacity-25" />
+                  </>
+                )}
+                <span className="whitespace-nowrap">
+                  {receiverAddress ? shortAddress(receiverAddress) : "-"}
+                </span>
+              </div>
             </div>
-            {amountUsd && (
-              <div className="text-xs leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-50">
-                {`${amountUsd} USD`}
+            <div className="flex flex-col gap-0.5 text-right shrink-0">
+              <div className="text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary">
+                {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

@@ -56,13 +56,16 @@ export const HistoryView = () => {
     }
 
     return (
-      <Virtuoso
-        data={unifiedHistory}
-        style={{ height: "424px" }}
-        itemContent={(_, transaction) => {
-          return <ActivityCard transaction={transaction} />;
-        }}
-      />
+      <div className="relative h-full">
+        <Virtuoso
+          data={unifiedHistory}
+          style={{ height: "100%" }}
+          itemContent={(_, transaction) => {
+            return <ActivityCard transaction={transaction} />;
+          }}
+        />
+        <div className="pointer-events-none absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-t_bg_primary/[0.65] to-transparent" />
+      </div>
     );
   }, [
     historyLoadedOnce,

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

@@ -1,4 +1,4 @@
-import { CaretsUpDownIcon } from "@src/assets/icons";
+import { ChevronsUpDownThinIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { FC } from "react";
 
@@ -23,13 +23,16 @@ export const ReorderButton: FC = () => {
 
   return (
     <div className="h-0 w-full relative z-[1]">
+      {/* Opaque bg on purpose: Chromium ignores backdrop-filter nested
+          inside the widget's own backdrop-blur, so a translucent bg would
+          let the panel edges show through the button. */}
       <button
         onClick={onReorderClick}
         aria-label="Switch target token with the source token"
-        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"
+        className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-[24px] bg-t_bg_secondary bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 hover:from-t_bg_tertiary/10 hover:to-t_bg_tertiary/10 transition-colors"
       >
-        <div className="flex fill-t_text_primary opacity-75 [&_svg]:w-2.5 [&_svg]:h-4">
-          <CaretsUpDownIcon />
+        <div className="flex text-t_text_primary opacity-50">
+          <ChevronsUpDownThinIcon />
         </div>
       </button>
     </div>

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

@@ -1,4 +1,4 @@
-import { HelpIcon } from "@src/assets/icons";
+import { InfoThinIcon } from "@src/assets/icons";
 import { ToggleButton, Tooltip } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { useRef } from "react";
@@ -8,27 +8,29 @@ export const Delivery = () => {
   const { expressDelivery, setExpressDelivery } = useSwapContext();
 
   return (
-    <div className="flex gap-2 items-center justify-between p-4 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.01]">
-      <div className="flex items-center gap-3 min-w-0">
+    <div className="flex gap-2 items-center justify-between py-4 px-6 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.01]">
+      <div className="flex items-center gap-2 min-w-0">
         <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
           Fast Delivery
         </h2>
         <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
-        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
-          {expressDelivery ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
-        </p>
-        <Tooltip
-          text={
-            "Fast 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-t_text_primary opacity-30 w-4 h-4 shrink-0"
-        />
+        <div className="flex items-center gap-1.5 min-w-0">
+          <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
+            {expressDelivery ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
+          </p>
+          <Tooltip
+            text={
+              "Fast 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"
+          />
+          <InfoThinIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help text-t_text_primary w-4 h-4 shrink-0"
+          />
+        </div>
       </div>
       <ToggleButton
         checked={expressDelivery}

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

@@ -1,4 +1,4 @@
-import { HelpIcon } from "@src/assets/icons";
+import { InfoThinIcon } from "@src/assets/icons";
 import { ToggleButton } from "@src/components/ToggleButton";
 import { Tooltip } from "@src/components/Tooltip";
 import { useSwapContext } from "@src/context";
@@ -9,27 +9,29 @@ export const InfiniteApproval = () => {
   const { infiniteApproval, setInfiniteApproval } = useSwapContext();
 
   return (
-    <div className="flex gap-2 items-center justify-between p-4 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.01]">
-      <div className="flex items-center gap-3 min-w-0">
+    <div className="flex gap-2 items-center justify-between py-4 px-6 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.01]">
+      <div className="flex items-center gap-2 min-w-0">
         <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
           Persistent Access
         </h2>
         <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
-        <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
-          Don't Ask Every Tx.
-        </p>
-        <Tooltip
-          text={
-            "Enabling persistent access (infinite approval) allows to access your tokens without requiring repeated approvals for each transaction. This streamlines multiple transactions but may pose a security risk if the spender's address is compromised."
-          }
-          position="BOTTOM"
-          triggerRef={tooltipTriggerRef}
-          id="infinite-approval-tooltip"
-        />
-        <HelpIcon
-          ref={tooltipTriggerRef}
-          className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
-        />
+        <div className="flex items-center gap-1.5 min-w-0">
+          <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
+            Don't Ask Every Tx.
+          </p>
+          <Tooltip
+            text={
+              "Enabling persistent access (infinite approval) allows to access your tokens without requiring repeated approvals for each transaction. This streamlines multiple transactions but may pose a security risk if the spender's address is compromised."
+            }
+            position="BOTTOM"
+            triggerRef={tooltipTriggerRef}
+            id="infinite-approval-tooltip"
+          />
+          <InfoThinIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help text-t_text_primary w-4 h-4 shrink-0"
+          />
+        </div>
       </div>
       <ToggleButton
         checked={infiniteApproval}

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

@@ -27,59 +27,67 @@ export const Slippage = () => {
   };
 
   return (
-    <div className="flex flex-col gap-5 p-4 rounded-xl bg-gradient-to-b from-t_bg_tertiary/[0.02] to-t_bg_tertiary/0">
-      <div className="flex items-center gap-2">
-        <h2 className="text-sm leading-5 tracking-[0.01em] text-t_text_primary">
-          Price Tolerance
-        </h2>
-        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
-        <p className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
-          {`${Number(slippage).toFixed(2)}%`}
-        </p>
-      </div>
-      <div className="flex items-center gap-4 w-full">
-        <div className="flex items-center justify-between flex-1 gap-3 p-3 rounded-[10px] bg-t_bg_tertiary bg-opacity-5 border border-solid border-t_text_primary border-opacity-25">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
-            <div className="flex items-center justify-center w-6 h-6 rounded bg-t_bg_tertiary bg-opacity-5 shrink-0">
-              <AdjustmentsIcon className="w-3.5 h-3.5 text-t_text_primary opacity-70" />
+    <div className="flex flex-col gap-6 py-4 px-6 rounded-xl bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.01]">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm leading-6 tracking-[0.01em] text-t_text_primary">
+            Slippage
+          </h2>
+          <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
+          <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50">
+            {`${Number(slippage).toFixed(2)}%`}
+          </p>
+        </div>
+        <div className="flex items-center gap-4 w-full">
+          <div className="flex items-center justify-between flex-1 h-12 gap-3 p-3 rounded-[10px] bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-[rgba(40,40,40,0.15)] border border-solid border-t_text_primary border-opacity-5">
+            <div className="flex items-center gap-3 min-w-0 flex-1">
+              <div className="flex items-center justify-center w-6 h-6 rounded bg-t_bg_tertiary bg-opacity-5 shrink-0">
+                <AdjustmentsIcon className="w-3.5 h-3.5 text-t_text_primary" />
+              </div>
+              <SafeInput
+                id="slippage-input"
+                placeholder="0.00"
+                regex={NUMBER_INPUT_REGEX}
+                value={customSlippage}
+                onChange={onInputChange}
+                className="text-sm leading-6 bg-transparent border-none px-0 w-full min-w-0 placeholder:text-t_text_primary placeholder:text-opacity-50 focus:outline-none text-t_text_primary"
+              />
             </div>
-            <SafeInput
-              id="slippage-input"
-              placeholder="0.00"
-              regex={NUMBER_INPUT_REGEX}
-              value={customSlippage}
-              onChange={onInputChange}
-              className="text-sm leading-6 bg-transparent border-none px-0 w-full min-w-0 placeholder:text-t_text_primary placeholder:text-opacity-50 focus:outline-none text-t_text_primary"
-            />
+            <span className="text-sm leading-6 text-t_text_primary text-opacity-50 shrink-0">
+              %
+            </span>
+          </div>
+          <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0 hidden sm:block" />
+          <div className="flex items-center gap-2">
+            {presets.map((preset) => (
+              <button
+                key={preset}
+                type="button"
+                onClick={() => onInputChange(preset)}
+                className={`w-14 sm:w-[72px] h-12 px-3 rounded-[10px] text-sm leading-6 text-center transition-colors ${
+                  slippage === preset
+                    ? "border border-solid border-t_main_accent_light/60 bg-gradient-to-r from-t_main_accent_light/10 to-t_main_accent_dark/10 text-t_text_primary"
+                    : "bg-t_bg_tertiary bg-opacity-[0.04] text-t_text_primary text-opacity-60 hover:bg-opacity-10"
+                }`}
+              >
+                {`${preset}%`}
+              </button>
+            ))}
           </div>
-          <span className="text-sm leading-6 text-t_text_primary text-opacity-50 shrink-0">
-            %
-          </span>
-        </div>
-        <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0 hidden sm:block" />
-        <div className="flex items-center gap-2">
-          {presets.map((preset) => (
-            <button
-              key={preset}
-              type="button"
-              onClick={() => onInputChange(preset)}
-              className={`w-14 sm:w-[72px] px-3 py-2.5 rounded-lg text-sm leading-5 tracking-[0.06em] text-center transition-colors ${
-                slippage === preset
-                  ? "bg-gradient-to-r from-t_main_accent_light/40 to-t_main_accent_dark/60 text-t_text_primary"
-                  : "bg-t_bg_tertiary bg-opacity-5 text-t_text_primary text-opacity-75 hover:bg-opacity-10"
-              }`}
-            >
-              {`${preset}%`}
-            </button>
-          ))}
         </div>
       </div>
-      <p className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-40">
-        <span className="font-medium">Price Tolerance</span>
-        {` defines how much a price can change before your transfer falls back
-        to USDC. If the price moves more than your tolerance allows, you'll
-        receive USDC on your destination chain.`}
-      </p>
+      <div className="flex flex-col gap-3">
+        <p className="text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30">
+          NOTE.
+        </p>
+        <p className="text-sm leading-[18px] tracking-[0.01em] text-t_text_primary text-opacity-40">
+          {/* The design sets the leading term in Medium, the rest Regular. */}
+          <span className="font-medium">Slippage</span>
+          {` defines how much a price can change before your
+          transfer falls back to USDC. If the price moves more than your
+          tolerance allows, you'll receive USDC on your destination chain.`}
+        </p>
+      </div>
     </div>
   );
 };

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

@@ -0,0 +1,72 @@
+import { ChevronDownWideThinIcon } from "@src/assets/icons";
+import { TokenLogoWithChain } from "@src/components";
+import { useSwapContext } from "@src/context";
+import { Ecosystem } from "@src/models";
+import { useMemo } from "react";
+import { SwapPanelType } from "../../index";
+
+const TokenTile = ({ type }: { type: SwapPanelType }) => {
+  const {
+    srcToken,
+    srcChain,
+    dstToken,
+    dstChain,
+    srcValue,
+    dstValue,
+    bridgeUI,
+  } = useSwapContext();
+
+  const token = type === "source" ? srcToken : dstToken;
+  const chain = type === "source" ? srcChain : dstChain;
+
+  const value = useMemo(() => {
+    if (
+      type === "destination" &&
+      bridgeUI &&
+      srcChain?.ecosystem === Ecosystem.SOLANA
+    ) {
+      return srcValue;
+    }
+    return type === "source" ? srcValue : dstValue;
+  }, [type, bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
+
+  return (
+    <div className="flex items-center justify-between gap-4 h-[72px] px-4 sm:px-6 rounded-xl backdrop-blur-[12px] bg-t_bg_tertiary bg-opacity-5">
+      <div className="text-2xl leading-6 text-t_text_primary opacity-50 truncate min-w-0">
+        {value}
+      </div>
+      <div className="flex items-center gap-3 shrink-0">
+        <p className="text-sm font-medium leading-6 tracking-[0.01em] text-t_text_primary">
+          {token?.symbol}
+        </p>
+        <TokenLogoWithChain
+          token={token}
+          chain={chain}
+          tokenLogoClassName="w-10 h-10"
+          generatedLogoClassName="w-10 h-10 text-[16px]"
+          chainLogoClassName="w-[18px]"
+        />
+      </div>
+    </div>
+  );
+};
+
+/** Source and destination amounts of the pending swap as two stacked tiles
+ *  with a decorative direction marker between them. */
+export const TokenTiles = () => {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <TokenTile type="source" />
+      {/* Zero-height anchor between the tiles, like ReorderButton in SwapView.
+          Opaque bg on purpose: Chromium ignores backdrop-filter nested inside
+          the widget's own backdrop-blur, so a translucent bg would let the
+          tile edges show through the marker. */}
+      <div className="h-0 w-full relative z-[1]">
+        <div className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-md backdrop-blur-[24px] bg-t_bg_secondary bg-gradient-to-b from-t_bg_tertiary/10 to-t_bg_tertiary/[0.08]">
+          <ChevronDownWideThinIcon className="w-6 h-6 text-t_text_primary opacity-50" />
+        </div>
+      </div>
+      <TokenTile type="destination" />
+    </div>
+  );
+};