@xswap-link/sdk 0.14.0 → 0.15.0

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";
+  ChevronDownThinSmallIcon,
+  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 && (
+                  <>
+                    <ChevronDownThinSmallIcon className="w-4 h-4 shrink-0 -rotate-90 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/PickerView/index.tsx

@@ -0,0 +1,151 @@
+import { useSwapContext } from "@src/context";
+import { Chain, TokenOption } from "@src/models";
+import {
+  isBridgeTokenConnectionSupported,
+  isChainConnectionSupported,
+} from "@src/utils";
+import { ChainPicker } from "../SwapView/SwapPanel/TokenPanel/ChainPicker";
+import { TokenPicker } from "../SwapView/SwapPanel/TokenPanel/TokenPicker";
+
+/**
+ * Token/network picker rendered while `activePicker` is set:
+ * - sm and up it replaces the swap view inside the widget container, so it
+ *   sits on the exact same glass background,
+ * - below sm the same element becomes a bottom sheet pinned to the viewport.
+ */
+export const PickerView = () => {
+  const {
+    activePicker,
+    setActivePicker,
+    bridgeUI,
+    srcChain,
+    dstChain,
+    srcToken,
+    dstToken,
+    srcChainTokensOptions,
+    srcChainOtherTokensOptions,
+    dstChainTokensOptions,
+    dstChainOtherTokensOptions,
+    setSrcToken,
+    setSrcChain,
+    setDstToken,
+    setDstChain,
+    supportedChains,
+    dstChainOptions,
+    bridgeTokensDictionary,
+  } = useSwapContext();
+
+  const type = activePicker ?? "source";
+  // In bridge mode the destination token is derived from the source token,
+  // so the destination side picks a chain instead of a token.
+  const bridgeDestination = bridgeUI && type === "destination";
+  const chain = type === "source" ? srcChain : dstChain;
+  const token = type === "source" ? srcToken : dstToken;
+  const tokens =
+    type === "source" ? srcChainTokensOptions : dstChainTokensOptions;
+  const otherTokens =
+    type === "source" ? srcChainOtherTokensOptions : dstChainOtherTokensOptions;
+
+  const close = () => setActivePicker(null);
+
+  const onTokenSelect = (token: TokenOption) => {
+    const newChain = supportedChains.find(
+      (chain) => chain.chainId === token.chainId,
+    );
+
+    if (type === "source") {
+      setSrcToken(token);
+      setSrcChain(newChain);
+      // The new source token cannot reach the current destination —
+      // reset the destination so the user picks a reachable one.
+      if (
+        dstChain &&
+        (!isChainConnectionSupported(newChain, dstChain.chainId, bridgeUI) ||
+          (bridgeUI &&
+            !isBridgeTokenConnectionSupported({
+              token,
+              tokenChain: newChain,
+              dstChainId: dstChain.chainId,
+              bridgeTokensDictionary,
+            })))
+      ) {
+        setDstChain(undefined);
+        setDstToken(undefined);
+      }
+    } else {
+      setDstToken(token);
+      setDstChain(newChain);
+      // The current source cannot reach the new destination chain —
+      // reset the source so the user picks a reachable one.
+      if (
+        srcChain &&
+        newChain &&
+        !isChainConnectionSupported(srcChain, newChain.chainId, bridgeUI)
+      ) {
+        setSrcChain(undefined);
+        setSrcToken(undefined);
+      }
+    }
+    close();
+  };
+
+  const onDstChainSelect = (newChain: Chain & { disabled?: boolean }) => {
+    // The current source cannot reach the new destination chain —
+    // reset the source so the user picks a reachable one.
+    if (newChain.disabled || newChain.chainId === srcChain?.chainId) {
+      setSrcChain(undefined);
+      setSrcToken(undefined);
+    }
+    setDstChain(newChain);
+    // The destination token gets derived from the source token and the
+    // new chain by the SwapProvider validation effect.
+    setDstToken(undefined);
+    close();
+  };
+
+  if (!activePicker) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col justify-end bg-[rgba(2,2,2,0.8)] sm:absolute sm:z-[1] sm:justify-start sm:bg-transparent"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          e.preventDefault();
+          close();
+        }
+      }}
+    >
+      <div className="flex flex-col w-full h-[85vh] max-h-full overflow-hidden p-4 pt-2.5 rounded-t-[24px] border-t border-solid border-t_text_primary border-opacity-10 bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary sm:h-full sm:p-0 sm:rounded-none sm:border-0 sm:bg-none sm:bg-transparent">
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
+        {bridgeDestination ? (
+          <ChainPicker
+            chains={dstChainOptions}
+            selectedChainId={dstChain?.chainId}
+            sameChainId={srcChain?.chainId}
+            onSelect={onDstChainSelect}
+            onClose={close}
+          />
+        ) : (
+          <TokenPicker
+            type={type}
+            chain={chain}
+            tokens={tokens}
+            otherTokens={otherTokens}
+            selectedTokenAddress={token?.address}
+            onSelect={onTokenSelect}
+            isOpen
+            setModalOpen={(open) => {
+              if (!open) {
+                close();
+              }
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

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";
 
@@ -26,10 +26,10 @@ export const ReorderButton: FC = () => {
       <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-opacity-50 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

@@ -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 ? "Max. Time 30 Sec." : "Max. 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"
+          />
+          <HelpIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+          />
+        </div>
       </div>
       <ToggleButton
         checked={expressDelivery}

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

@@ -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"
+          />
+          <HelpIcon
+            ref={tooltipTriggerRef}
+            className="cursor-help fill-t_text_primary opacity-30 w-4 h-4 shrink-0"
+          />
+        </div>
       </div>
       <ToggleButton
         checked={infiniteApproval}