@xswap-link/sdk 0.14.1 → 0.15.1

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/Header/index.tsx

@@ -1,37 +1,25 @@
-import { CloseIcon, HelpIcon } from "@src/assets/icons";
-import { Tooltip } from "@src/components/Tooltip/index";
-import { useRef } from "react";
+import { CloseIcon } from "@src/assets/icons";
 
 type Props = {
   onCloseClick: () => void;
 };
 
 export const Header = ({ onCloseClick }: Props) => {
-  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
-
   return (
-    <div className="flex justify-between items-center text-base font-medium">
-      <div className="text-t_text_primary">Confirmation</div>
-      <div className="flex gap-4 items-center">
-        <Tooltip
-          text="To sign the transaction open the wallet you have used to connect with XSwap."
-          position="BOTTOM"
-          triggerRef={tooltipTriggerRef}
-          id="connect-wallet-to-sign-tx-tooltip"
-        />
-
-        <HelpIcon
-          ref={tooltipTriggerRef}
-          className="cursor-help fill-t_main_accent_light w-[18px] h-[18px]"
-        />
-
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
-          onClick={onCloseClick}
-        >
+    <div className="flex justify-between items-center gap-6">
+      <div className="text-2xl font-medium leading-8 tracking-[0.01em] text-t_text_primary">
+        Confirmation
+      </div>
+      <button
+        type="button"
+        onClick={onCloseClick}
+        aria-label="Close"
+        className="flex items-center justify-center shrink-0 w-8 h-8 rounded-md bg-t_bg_tertiary bg-opacity-5 text-t_text_primary hover:bg-opacity-10 transition-colors"
+      >
+        <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
           <CloseIcon />
         </div>
-      </div>
+      </button>
     </div>
   );
 };

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/Steps/index.tsx

@@ -1,101 +1,57 @@
 import {
-  CheckIcon,
-  SignIcon,
-  ThumbUpRoundedIcon,
-  WaitingIcon,
+  CheckCircleThinIcon,
+  ProgressRingThinIcon,
+  SignThinIcon,
+  WalletCheckThinIcon,
 } from "@src/assets/icons";
 import { useTxUIWrapper } from "@src/context";
 import { TxStatus } from "@src/models";
 import { ReactElement, useMemo } from "react";
 
+type StepState = "pending" | "active" | "completed";
+
 type Step = {
-  icon: (className: string) => ReactElement;
+  icon: ReactElement;
   title: string;
-  state: "none" | "triggered" | "completed";
+  state: StepState;
   show: boolean;
 };
 
-// TODO item's 'show' logic is a bit complicated/weird. Think about an improvement...
 export const Steps = () => {
   const { txStatus, txNeedsApproval, txMsg } = useTxUIWrapper();
 
-  const items: Step[] = useMemo(
-    () => [
-      {
-        icon: (className) => (
-          <div className={`${className}`}>
-            <SignIcon />
-          </div>
-        ),
-        title: "sign approval transaction",
-        state:
-          txStatus === TxStatus.SIGNING_APPROVAL
-            ? "triggered"
-            : txStatus > TxStatus.SIGNING_APPROVAL
-            ? "completed"
-            : "none",
-        show: txMsg
-          ? txStatus === TxStatus.SIGNING_APPROVAL ||
-            txStatus === TxStatus.CONFIRMING_APPROVAL
-          : txNeedsApproval,
-      },
-      {
-        icon: (className) => (
-          <div className={`${className}`}>
-            <ThumbUpRoundedIcon />
-          </div>
-        ),
-        title: "confirming approval transaction...",
-        state:
-          txStatus === TxStatus.CONFIRMING_APPROVAL
-            ? "triggered"
-            : txStatus > TxStatus.CONFIRMING_APPROVAL
-            ? "completed"
-            : "none",
-        show: txMsg
-          ? txStatus === TxStatus.SIGNING_APPROVAL ||
-            txStatus === TxStatus.CONFIRMING_APPROVAL
-          : txNeedsApproval,
-      },
+  const items: Step[] = useMemo(() => {
+    const approvalActive =
+      txStatus === TxStatus.SIGNING_APPROVAL ||
+      txStatus === TxStatus.CONFIRMING_APPROVAL;
+    const txActive =
+      txStatus === TxStatus.SIGNING_TX || txStatus === TxStatus.CONFIRMING_TX;
+
+    return [
       {
-        icon: (className) => (
-          <div className={`${className}`}>
-            <SignIcon />
-          </div>
-        ),
-        title: "sign transaction",
-        state:
-          txStatus === TxStatus.SIGNING_TX
-            ? "triggered"
-            : txStatus > TxStatus.SIGNING_TX
-            ? "completed"
-            : "none",
-        show: txMsg
-          ? txStatus === TxStatus.SIGNING_TX ||
-            txStatus === TxStatus.CONFIRMING_TX
-          : true,
+        icon: <SignThinIcon className="w-6 h-6" />,
+        title: "Please, approve spending first.",
+        state: approvalActive
+          ? "active"
+          : txStatus > TxStatus.CONFIRMING_APPROVAL
+          ? "completed"
+          : "pending",
+        // With a custom tx message (e.g. approval reset) the modal only runs
+        // that single transaction, so show just the step it is on.
+        show: txMsg ? approvalActive : txNeedsApproval,
       },
       {
-        icon: (className) => (
-          <div className={`${className}`}>
-            <ThumbUpRoundedIcon />
-          </div>
-        ),
-        title: "confirming transaction...",
-        state:
-          txStatus === TxStatus.CONFIRMING_TX
-            ? "triggered"
-            : txStatus > TxStatus.CONFIRMING_TX
-            ? "completed"
-            : "none",
-        show: txMsg
-          ? txStatus === TxStatus.SIGNING_TX ||
-            txStatus === TxStatus.CONFIRMING_TX
-          : true,
+        icon: <WalletCheckThinIcon className="w-6 h-6" />,
+        title: "Confirm transaction in your wallet.",
+        state: txActive
+          ? "active"
+          : txStatus > TxStatus.CONFIRMING_TX
+          ? "completed"
+          : "pending",
+        show: txMsg ? txActive : true,
       },
-    ],
-    [txMsg, txNeedsApproval, txStatus],
-  );
+    ];
+  }, [txMsg, txNeedsApproval, txStatus]);
 
   const filteredItems = useMemo(
     () => items.filter(({ show }) => show),
@@ -103,42 +59,38 @@ export const Steps = () => {
   );
 
   return (
-    <div className="flex flex-col gap-1">
-      {filteredItems.map(({ icon, title, state }, index) => (
-        <div key={title} className="flex flex-col px-4 gap-1">
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              {icon(
-                `${
-                  state === "triggered"
-                    ? "fill-t_main_accent_light"
-                    : "fill-t_text_primary opacity-50"
-                }`,
-              )}
-              <div
-                className={`${
-                  state !== "triggered"
-                    ? "opacity-50"
-                    : state === "triggered" && "text-t_text_secondary"
-                }`}
-              >
-                {title}
-              </div>
+    <div className="flex flex-col rounded-xl bg-t_bg_tertiary bg-opacity-[0.02]">
+      {filteredItems.map(({ icon, title, state }) => (
+        <div
+          key={title}
+          className={`flex items-center justify-between gap-4 px-4 sm:px-6 py-4 rounded-lg ${
+            state === "active"
+              ? "bg-gradient-to-r from-transparent via-t_bg_tertiary/5 to-transparent"
+              : ""
+          }`}
+        >
+          <div className="flex items-center gap-4">
+            <div
+              className={`text-t_text_primary ${
+                state === "active" ? "opacity-50" : "opacity-25"
+              }`}
+            >
+              {icon}
             </div>
-            <div>
-              {state === "completed" ? (
-                <div className="fill-t_success_dark">
-                  <CheckIcon />
-                </div>
-              ) : state === "triggered" ? (
-                <div className="animate-spin-slow fill-t_main_accent_light">
-                  <WaitingIcon />
-                </div>
-              ) : null}
+            <div
+              className={`text-sm leading-5 tracking-[0.01em] text-t_text_primary ${
+                state === "active" ? "text-opacity-75" : "text-opacity-50"
+              }`}
+            >
+              {title}
             </div>
           </div>
-          {index !== filteredItems.length - 1 && (
-            <div className="vertical-separator py-3 ml-2" />
+          {state === "completed" ? (
+            <CheckCircleThinIcon className="w-6 h-6 shrink-0 text-[#6AE89B]" />
+          ) : state === "active" ? (
+            <ProgressRingThinIcon className="w-6 h-6 shrink-0 animate-spin-slow text-t_text_primary" />
+          ) : (
+            <div className="w-6 h-6 shrink-0 rounded-full border border-solid border-t_text_primary border-opacity-20" />
           )}
         </div>
       ))}

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

@@ -1,4 +1,3 @@
-import { Button } from "@src/components";
 import {
   CCIP_ROUTER_PROGRAM_ID,
   FALLBACK_CROSSCHAIN_ESTIMATION_TIME,
@@ -24,10 +23,9 @@ import { renderTxStatus } from "@src/services";
 import { ContractReceipt, constants, ethers } from "ethers";
 import { useCallback } from "react";
 import { FeesPanel } from "../../FeesPanel";
-import { ArrowIcon } from "./ArrowIcon";
+import { TokenTiles } from "../TokenTiles";
 import { Header } from "./Header";
 import { Steps } from "./Steps";
-import { SwapPanel } from "./SwapPanel";
 import { useWallet } from "@solana/wallet-adapter-react";
 
 import {
@@ -443,31 +441,29 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   ]);
 
   return (
-    <div className="flex flex-col text-t_text_primary gap-5">
+    <div className="flex flex-col text-t_text_primary gap-8">
       <Header onCloseClick={onCloseClick} />
       {txMsg ? (
-        <div>{txMsg}</div>
+        <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-75">
+          {txMsg}
+        </div>
       ) : (
-        <>
-          <div className="relative flex flex-col gap-5 fill-white">
-            <SwapPanel type="source" />
-            <ArrowIcon />
-            <SwapPanel type="destination" />
-          </div>
-          <FeesPanel />
-        </>
+        <TokenTiles />
       )}
+      <div className="h-px w-full gradient-sections-separator-container" />
       {txStatus === TxStatus.SWAP_INIT ? (
-        <Button
-          variant="filled-squared"
-          onClick={() => {
-            enqueueSwapTx();
-          }}
-          type="button"
-          className="text-t_button_pr_text border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark rounded-lg"
-        >
-          Sign and swap
-        </Button>
+        <>
+          {!txMsg && <FeesPanel />}
+          <button
+            type="button"
+            onClick={() => {
+              enqueueSwapTx();
+            }}
+            className="text-base font-medium leading-6 tracking-[0.01em] w-full px-6 py-3 cursor-pointer rounded-lg border-none transition-[filter] bg-gradient-to-b from-t_main_accent_light from-50% to-t_main_accent_dark text-t_button_pr_text hover:brightness-105"
+          >
+            Sign and swap
+          </button>
+        </>
       ) : (
         <Steps />
       )}

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

@@ -1,14 +1,10 @@
 import {
-  ArrowDownLongIcon,
-  CloseIcon,
-  ErrorModalStatusIcon,
-  LinkExternalIcon,
-  SuccessModalStatusIcon,
+  CheckCircleThinIcon,
+  ErrorCircleThinIcon,
+  RedirectThinIcon,
 } from "@src/assets/icons";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
-import { TokenItem } from "./TokenItem";
-import { useMemo } from "react";
-import { Ecosystem } from "@src/models";
+import { TokenTiles } from "../TokenTiles";
 
 type Props = {
   onCloseClick: () => void;
@@ -16,78 +12,60 @@ type Props = {
 
 export const TxResult = ({ onCloseClick }: Props) => {
   const { txError, txExplorerUrl, txMsg } = useTxUIWrapper();
-  const {
-    isExpressDeliveryActive,
-    srcChain,
-    srcToken,
-    dstChain,
-    dstToken,
-    srcValue,
-    dstValue,
-    bridgeUI,
-  } = useSwapContext();
-
-  const value = useMemo(() => {
-    if (bridgeUI && srcChain?.ecosystem === Ecosystem.SOLANA) {
-      return srcValue;
-    }
-    return dstValue;
-  }, [bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
+  const { isExpressDeliveryActive, srcChain, dstChain } = useSwapContext();
 
   return (
-    <div className="flex flex-col gap-5 text-t_text_primary justify-center items-center">
-      {txError ? (
-        <>
-          <div
-            className="flex justify-end fill-t_text_primary cursor-pointer w-full"
-            onClick={onCloseClick}
-          >
-            <CloseIcon className="w-3.5 h-3.5" />
-          </div>
-          <ErrorModalStatusIcon />
-          <div className="text-2xl font-bold">Transaction failed</div>
-          <div className="text-center">{txError}</div>
-        </>
-      ) : (
-        <>
-          <div
-            className="flex justify-end fill-t_text_primary cursor-pointer w-full"
-            onClick={onCloseClick}
-          >
-            <CloseIcon className="w-3.5 h-3.5" />
+    <div className="flex flex-col gap-8 text-t_text_primary">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-3">
+          <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
+            {txError ? "Transaction Error" : "Transaction Success"}
           </div>
-          <SuccessModalStatusIcon />
-          <div className="flex flex-col items-center">
-            <div className="text-2xl font-bold">Transaction success!</div>
-            {!txMsg && srcChain !== dstChain && (
-              <div className="text-sm font-normal opacity-60">
-                {`Approximated time of delivery: ${
-                  isExpressDeliveryActive ? "30 sec" : "30 min"
-                }`}
-              </div>
-            )}
+          {txError ? (
+            <ErrorCircleThinIcon className="w-6 h-6 shrink-0 text-[#F44336]" />
+          ) : (
+            <CheckCircleThinIcon className="w-6 h-6 shrink-0 text-[#6AE89B]" />
+          )}
+        </div>
+        {txError ? (
+          <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+            {txError}
           </div>
-          {!txMsg && (
-            <div className="flex items-center gap-2">
-              <TokenItem chain={srcChain} token={srcToken} value={srcValue} />
-              <div className="-rotate-90 flex justify-center w-8 fill-t_text_primary opacity-50">
-                <ArrowDownLongIcon />
-              </div>
-              <TokenItem chain={dstChain} token={dstToken} value={value} />
+        ) : (
+          !txMsg &&
+          srcChain !== dstChain && (
+            <div className="text-sm leading-5 tracking-[0.01em] text-t_text_primary text-opacity-50">
+              {`Approximated time of delivery: ${
+                isExpressDeliveryActive ? "30 sec" : "30 min"
+              }`}
             </div>
-          )}
+          )
+        )}
+      </div>
+      {!txMsg && <TokenTiles />}
+      <div className="h-px w-full gradient-sections-separator-container" />
+      <button
+        type="button"
+        onClick={onCloseClick}
+        className="w-full px-6 py-3 rounded-lg border-none cursor-pointer bg-t_bg_tertiary bg-opacity-5 text-sm font-medium leading-6 tracking-[0.01em] text-t_text_primary text-opacity-80 hover:bg-opacity-10 transition-colors"
+      >
+        Continue
+      </button>
+      {!txMsg && !txError && (
+        <div className="w-full flex gap-3 items-center">
           <a
             href={txExplorerUrl}
             target="_blank"
             rel="noreferrer"
-            className="flex gap-4 items-center mb-2 fill-t_main_accent_light"
+            className="flex items-center gap-1.5 text-sm text-t_text_primary text-opacity-25 hover:text-opacity-50 transition-colors"
           >
-            <p className="text-t_text_secondary underline">
-              View details on Explorer
-            </p>
-            <LinkExternalIcon />
+            View On Explorer{" "}
+            <div className="w-6 h-6 bg-t_bg_tertiary bg-opacity-5 rounded-[4px] flex items-center justify-center">
+              <RedirectThinIcon className="w-3 h-3" />
+            </div>
           </a>
-        </>
+          <div className="flex-1 h-px bg-t_text_primary bg-opacity-10" />
+        </div>
       )}
     </div>
   );

package/src/components/Swap/SwapView/FeesPanel/Fees/index.tsx

@@ -47,7 +47,7 @@ export const Fees = ({
           },
         ]
       : []),
-    { name: "Price Tolerance: ", value: `${slippage}%` },
+    { name: "Slippage: ", value: `${slippage}%` },
     {
       name: "Min. Received: ",
       value: `${

package/src/components/Swap/SwapView/FeesPanel/index.tsx

@@ -1,4 +1,4 @@
-import { CaretDownIcon } from "@src/assets/icons";
+import { ChevronDownThinIcon } from "@src/assets/icons";
 import { Skeleton } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
@@ -176,7 +176,7 @@ export const FeesPanel = () => {
       isFetchingSolanaFee);
 
   return (
-    <div className="flex flex-col rounded-xl py-2 px-4 sm:px-6 bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/0">
+    <div className="flex flex-col rounded-xl py-3 px-4 sm:px-6 bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/0">
       <button
         aria-label={`${expanded ? "Collapse" : "Expand"} fees panel`}
         type="button"
@@ -200,12 +200,14 @@ export const FeesPanel = () => {
               </>
             )}
           </div>
+          {/* The 24px glyph has 8px of built-in whitespace on each side; pull the
+              right side back so the chevron sits flush with the panel padding. */}
           <div
-            className={`flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-75 transition-transform [&_svg]:w-2.5 [&_svg]:h-[5px] ${
+            className={`flex items-center justify-center w-6 h-6 -mr-2 text-t_text_primary opacity-50 transition-transform ${
               expanded ? "rotate-180" : ""
             }`}
           >
-            <CaretDownIcon />
+            <ChevronDownThinIcon />
           </div>
         </div>
         {expanded && <Fees solanaBridgeFee={solanaBridgeFee} />}

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -1,4 +1,3 @@
-import { Modal } from "@src/components/Modal";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
 import { useWallet } from "@src/context/WalletProvider";
 import { ADDRESSES } from "@src/contracts";
@@ -10,7 +9,6 @@ import { safeBigNumberFrom } from "@src/utils";
 import { BigNumber } from "ethers";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount, useSwitchChain } from "wagmi";
-import { WalletPicker } from "../WalletPicker";
 
 type Button = {
   text: string;
@@ -53,11 +51,8 @@ export const SwapButton = () => {
   } = useNetworks();
 
   const {
-    openEVMWalletModal,
     setOpenEVMWalletModal,
-    openSolanaWalletModal,
     setOpenSolanaWalletModal,
-    openSuiWalletModal,
     setOpenSuiWalletModal,
     solana,
     sui,
@@ -314,30 +309,6 @@ export const SwapButton = () => {
 
   return (
     <>
-      {openEVMWalletModal && (
-        <Modal onClose={() => setOpenEVMWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.EVM}
-            onClose={() => setOpenEVMWalletModal(false)}
-          />
-        </Modal>
-      )}
-      {openSolanaWalletModal && (
-        <Modal onClose={() => setOpenSolanaWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.SOLANA}
-            onClose={() => setOpenSolanaWalletModal(false)}
-          />
-        </Modal>
-      )}
-      {openSuiWalletModal && (
-        <Modal onClose={() => setOpenSuiWalletModal(false)}>
-          <WalletPicker
-            ecosystem={Ecosystem.SUI}
-            onClose={() => setOpenSuiWalletModal(false)}
-          />
-        </Modal>
-      )}
       <button
         type="button"
         disabled={button.disabled}

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/index.tsx

@@ -22,10 +22,11 @@ export const AmountPanel = ({ type }: Props) => {
     setSrcValue,
     isFetchingRoute,
     bridgeUI,
+    isAsyncDataLoaded,
   } = useSwapContext();
 
   const onMaxClick = () => {
-    if (!srcTokenBalanceWei) {
+    if (!srcToken || !srcTokenBalanceWei) {
       return;
     }
     setSrcValue(
@@ -58,6 +59,14 @@ export const AmountPanel = ({ type }: Props) => {
     dstChain,
   ]);
 
+  if (!isAsyncDataLoaded) {
+    return (
+      <div className="flex items-center flex-1 min-w-0">
+        <Skeleton className="w-[100px] h-8" />
+      </div>
+    );
+  }
+
   return (
     <div className="flex items-center gap-3 flex-1 min-w-0 overflow-hidden text-left">
       {type === "source" ? (
@@ -69,7 +78,7 @@ export const AmountPanel = ({ type }: Props) => {
             value={srcValue}
             onChange={(value) => setSrcValue(value)}
           />
-          {!!srcTokenBalanceWei && (
+          {!!srcToken && !!srcTokenBalanceWei && (
             <button
               type="button"
               onClick={onMaxClick}

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/ChainPicker/index.tsx

@@ -1,4 +1,4 @@
-import { CloseIcon, SearchIcon, WarningIcon } from "@src/assets/icons";
+import { CloseIcon, SearchThinIcon, WarningIcon } from "@src/assets/icons";
 import { Chain } from "@src/models";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Virtuoso } from "react-virtuoso";
@@ -56,7 +56,7 @@ export const ChainPicker = ({
   return (
     <>
       <div className="flex justify-between items-center mb-6">
-        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em] text-t_text_primary">
           Select Network
         </div>
         <button
@@ -72,8 +72,8 @@ export const ChainPicker = ({
       </div>
 
       <div className="flex items-center gap-2 h-14 px-4 rounded-xl bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-5 mb-6">
-        <div className="fill-t_text_primary opacity-50 [&_svg]:w-4 [&_svg]:h-4 flex items-center shrink-0">
-          <SearchIcon />
+        <div className="text-t_text_primary opacity-60 flex items-center shrink-0">
+          <SearchThinIcon />
         </div>
         <input
           ref={chainSearchRef}