@xswap-link/sdk 0.14.0 → 0.15.0

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

@@ -27,59 +27,65 @@ 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">
+            Price Tolerance
+          </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] font-medium 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">
+          {`Price Tolerance 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,69 @@
+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 */}
+      <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-opacity-50 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>
+  );
+};

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 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,
@@ -11,11 +10,12 @@ import {
   crosschainEstimationTimes,
 } from "@src/constants";
 import { useHistory, useSwapContext, useTxUIWrapper } from "@src/context";
-import { ADDRESSES, XSwapRouterAbi } from "@src/contracts";
+import { ADDRESSES, ERC20Abi, XSwapRouterAbi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import {
   Ecosystem,
+  TransactionRequest,
   TxStatus,
   Transaction as EVMTransaction,
 } from "@src/models";
@@ -23,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 {
@@ -206,7 +205,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   const enqueueSwapTx = useCallback(async () => {
     if (srcToken) {
       if (route && route.ecosystem === Ecosystem.EVM) {
-        const enqueueSwap = () => {
+        const enqueueSwap = ({ afterApproval = false } = {}) => {
           enqueueTransaction({
             executeTransaction: () => {
               if (!route.transactions.swap || !signer) {
@@ -216,6 +215,9 @@ export const TxOverview = ({ onCloseClick }: Props) => {
               return evmContractApi.executeCalldata(
                 signer,
                 route.transactions.swap,
+                // right after an approval the RPC may not see the new
+                // allowance yet, so let the gas estimation retry
+                { retryGasEstimation: afterApproval },
               );
             },
             txStatus: TxStatus.SIGNING_TX,
@@ -258,7 +260,15 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             },
             txStatus: TxStatus.SIGNING_APPROVAL,
             handlers: {
-              onSuccess: () => enqueueSwap(),
+              onSuccess: async () => {
+                if (signer && route.transactions.approve) {
+                  await waitForApprovalAllowance(
+                    signer,
+                    route.transactions.approve,
+                  );
+                }
+                enqueueSwap({ afterApproval: true });
+              },
             },
           });
         } else {
@@ -431,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-white 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 />
       )}
@@ -463,6 +471,40 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   );
 };
 
+const ALLOWANCE_POLL_INTERVAL_MS = 500;
+const ALLOWANCE_POLL_MAX_ATTEMPTS = 10;
+
+// After an approval is mined, RPC nodes behind a load balancer may still
+// return the stale allowance for a while, which makes the swap's gas
+// estimation revert. Poll until the approved amount is visible (or give up
+// after ~5s and let the gas estimation retry handle the rest).
+async function waitForApprovalAllowance(
+  signer: ethers.Signer,
+  approveTx: TransactionRequest,
+) {
+  try {
+    const erc20 = new ethers.Contract(approveTx.to, ERC20Abi, signer);
+    const [spender, amount] = erc20.interface.decodeFunctionData(
+      "approve",
+      approveTx.data,
+    );
+    const owner = await signer.getAddress();
+    for (let attempt = 0; attempt < ALLOWANCE_POLL_MAX_ATTEMPTS; attempt++) {
+      const currentAllowance = await erc20.allowance(owner, spender);
+      if (currentAllowance.gte(amount)) {
+        return;
+      }
+      await new Promise((resolve) =>
+        setTimeout(resolve, ALLOWANCE_POLL_INTERVAL_MS),
+      );
+    }
+  } catch (err) {
+    // best-effort — non-standard approve calldata or a failing allowance
+    // call shouldn't block the swap
+    console.error("Failed to poll allowance after approval:", err);
+  }
+}
+
 // Add this function to check token delegation and delegate if necessary
 async function checkAndDelegateTokenAuthority(
   connection: Connection,