@xswap-link/sdk 0.14.1 → 0.15.0

package/src/context/SwapProvider.tsx

@@ -1,5 +1,7 @@
 import { TxConfigFormPayload } from "@src/components";
 import {
+  DEFAULT_BRIDGE_DESTINATION_CHAIN_ID,
+  DEFAULT_BRIDGE_SOURCE_CHAIN_ID,
   DEFAULT_DESTINATION_CHAIN_ID,
   DEFAULT_REQUEST_ABORT_MSG,
   DEFAULT_SOURCE_CHAIN_ID,
@@ -291,6 +293,19 @@ export const SwapProvider = ({
   const routeAbortController = useRef<AbortController | null>(null);
   const refreshSelectedTokenBalanceNonce = useRef(crypto.randomUUID());
   const prevWalletAddresses = useRef<string | undefined>(undefined);
+  // last wallet chain id seen by the follow-the-wallet effect below
+  const prevFollowedWalletChainId = useRef<string | undefined>(undefined);
+  // True between the bridgeUI-change reset and the re-init that follows it.
+  // Effects in the reset's commit still close over the pre-reset state (with
+  // the new bridgeUI), so acting on that mix would remap the old mode's route
+  // as the new mode's — this ref lets them bail out synchronously.
+  const initPending = useRef(false);
+  // True while a bridgeUI-change re-init is pending. The web-component
+  // wrapper delivers attribute updates one by one, so at re-init time the
+  // route config may still hold the previous mode's values (there is no way
+  // to tell them apart from intentional ones) — the re-init therefore
+  // ignores route config entirely and starts from the new mode's defaults.
+  const modeSwitchReinit = useRef(false);
 
   // =============================================================================
   // Memoized Values
@@ -691,6 +706,12 @@ export const SwapProvider = ({
         !srcToken ||
         !srcToken?.address
       ) {
+        // Nothing to read a balance for — drop the previous selection's
+        // balance (and invalidate any in-flight read) so the MAX button
+        // never acts on a stale value.
+        refreshSelectedTokenBalanceNonce.current = crypto.randomUUID();
+        setSrcTokenBalanceWei("");
+        setIsFetchingBalance(false);
         return;
       }
 
@@ -1077,9 +1098,23 @@ export const SwapProvider = ({
   // useEffects responsible for state updates and validations
   // =============================================================================
 
-  // sets the initial source chain based on the wallet's chain ID if not already initialized.
+  // Follows a real in-session wallet network switch with the source chain.
+  // Only a defined -> defined change counts: the chain id first appearing
+  // during reconnect is ignored, since wagmi restores a persisted (possibly
+  // stale) chain id before the connector reports the actual one. Bridge keeps
+  // its fixed default route instead of following the wallet chain.
   useEffect(() => {
-    if (!walletChainId || !isInitialStateSet || integrationConfig?.srcChainId) {
+    const prevWalletChainId = prevFollowedWalletChainId.current;
+    prevFollowedWalletChainId.current = walletChainId;
+
+    if (
+      !walletChainId ||
+      !prevWalletChainId ||
+      prevWalletChainId === walletChainId ||
+      !isInitialStateSet ||
+      integrationConfig?.srcChainId ||
+      bridgeUI
+    ) {
       return;
     }
     const initSrcChain = supportedChains.find(
@@ -1093,19 +1128,29 @@ export const SwapProvider = ({
     isInitialStateSet,
     supportedChains,
     integrationConfig?.srcChainId,
+    bridgeUI,
   ]);
 
-  // resets source and destination tokens and chains when bridgeUI changes and initial state is not yet set.
+  // resets the widget state when bridgeUI changes at runtime: back to the
+  // main view (leaving Settings/History), cleared selection and amount, and
+  // re-arms the init effect below so the new mode gets its default route
+  // (config -> wallet chain -> mode defaults) applied again.
   useEffect(() => {
     if (!isInitialStateSet) {
       return;
     }
 
+    initPending.current = true;
+    modeSwitchReinit.current = true;
+    setTab(init.tab);
     setActivePicker(null);
+    setError(init.error);
+    setSrcValue(init.srcValue);
     setSrcToken(undefined);
     setDstToken(undefined);
     setSrcChain(undefined);
     setDstChain(undefined);
+    setIsInitialStateSet(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bridgeUI]);
@@ -1121,21 +1166,51 @@ export const SwapProvider = ({
       return;
     }
 
+    // During a bridgeUI-change re-init the route config may still hold the
+    // previous mode's values (web-component attribute updates arrive one by
+    // one), so it is ignored — the new mode starts from its own defaults.
+    // Route config still seeds the very first init (deep links, integrator
+    // presets).
+    const ignoreRouteConfig = modeSwitchReinit.current;
+    const cfgSrcChainId = ignoreRouteConfig
+      ? undefined
+      : integrationConfig?.srcChainId;
+    const cfgDstChainId = ignoreRouteConfig
+      ? undefined
+      : integrationConfig?.dstChainId;
+    const cfgSrcTokenAddr = ignoreRouteConfig
+      ? undefined
+      : integrationConfig?.srcTokenAddr;
+    const cfgDstTokenAddr = ignoreRouteConfig
+      ? undefined
+      : integrationConfig?.dstTokenAddr;
+
     // find chains
+    // Default routes are fixed (swap: ETH -> ETH, bridge: ETH -> Base) and do
+    // not follow the wallet's chain — on load wagmi can still report a stale,
+    // persisted chain id, so it can't be trusted here. Integrator config
+    // still takes precedence, and a real in-session network switch is
+    // followed by the effect below.
     const searchedSrcChainId =
-      srcChain ||
-      integrationConfig?.srcChainId ||
-      (walletChainId ? `${walletChainId}` : undefined) ||
-      (bridgeUI ? undefined : DEFAULT_SOURCE_CHAIN_ID);
+      srcChain?.chainId ||
+      cfgSrcChainId ||
+      (bridgeUI ? DEFAULT_BRIDGE_SOURCE_CHAIN_ID : DEFAULT_SOURCE_CHAIN_ID);
 
     const initSrcChain = supportedChains.find(
       ({ chainId }) => chainId === searchedSrcChainId,
     );
 
+    // Bridge can't route within one chain, so when the source already sits on
+    // the default bridge destination, fall back to the reversed default route.
+    const bridgeDefaultDstChainId =
+      initSrcChain?.chainId === DEFAULT_BRIDGE_DESTINATION_CHAIN_ID
+        ? DEFAULT_BRIDGE_SOURCE_CHAIN_ID
+        : DEFAULT_BRIDGE_DESTINATION_CHAIN_ID;
+
     const searchedDstChainId =
-      dstChain ||
-      integrationConfig?.dstChainId ||
-      (bridgeUI ? undefined : DEFAULT_DESTINATION_CHAIN_ID);
+      dstChain?.chainId ||
+      cfgDstChainId ||
+      (bridgeUI ? bridgeDefaultDstChainId : DEFAULT_DESTINATION_CHAIN_ID);
 
     const initDstChain = supportedChains.find(
       ({ chainId }) => chainId === searchedDstChainId,
@@ -1146,13 +1221,13 @@ export const SwapProvider = ({
     let initSrcToken: Token | undefined;
 
     const srcTokenAddress = resolveTokenAddress(
-      integrationConfig.srcTokenAddr,
-      integrationConfig?.srcChainId,
+      cfgSrcTokenAddr,
+      cfgSrcChainId,
       supportedChains,
     );
     const dstTokenAddress = resolveTokenAddress(
-      integrationConfig.dstTokenAddr,
-      integrationConfig?.dstChainId,
+      cfgDstTokenAddr,
+      cfgDstChainId,
       supportedChains,
     );
 
@@ -1182,6 +1257,8 @@ export const SwapProvider = ({
     setSrcToken(source.token);
     setDstToken(target.token);
     // Mark initial state as set
+    modeSwitchReinit.current = false;
+    initPending.current = false;
     setIsInitialStateSet(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
@@ -1200,7 +1277,11 @@ export const SwapProvider = ({
     if (
       !bridgeTokensDictionary ||
       supportedChains.length === 0 ||
-      !isInitialStateSet
+      !isInitialStateSet ||
+      // A bridgeUI-change reset is in flight: this closure still holds the
+      // previous mode's route, so mapping it against the new mode would
+      // resurrect it. The re-init applies the new mode's defaults instead.
+      initPending.current
     ) {
       return;
     }
@@ -1241,9 +1322,15 @@ export const SwapProvider = ({
     bridgeTokensDictionary,
     isInitialStateSet,
   ]);
+  // Notify effects below also re-run whenever the integrator recreates the
+  // callback props (inline arrows give them a new identity every render).
+  // During a bridgeUI-change reset their closures still hold the previous
+  // mode's route, and re-emitting it would feed it back to the integrator as
+  // config — the initPending guard keeps them quiet until the re-init lands.
+
   // notifies integration or global callback when the destination chain changes.
   useEffect(() => {
-    if (!isInitialStateSet) {
+    if (!isInitialStateSet || initPending.current) {
       return;
     }
     if (integrationConfig.onDstChainChange) {
@@ -1255,7 +1342,7 @@ export const SwapProvider = ({
   }, [integrationConfig.onDstChainChange, dstChain]);
   // notifies integration or global callback when the destination token changes.
   useEffect(() => {
-    if (!isInitialStateSet) {
+    if (!isInitialStateSet || initPending.current) {
       return;
     }
     const token = dstToken
@@ -1271,7 +1358,7 @@ export const SwapProvider = ({
   }, [integrationConfig.onDstTokenChange, dstToken]);
   // notifies integration or global callback when the source chain changes.
   useEffect(() => {
-    if (!isInitialStateSet) {
+    if (!isInitialStateSet || initPending.current) {
       return;
     }
     if (integrationConfig.onSrcChainChange) {
@@ -1283,7 +1370,7 @@ export const SwapProvider = ({
   }, [integrationConfig.onSrcChainChange, srcChain]);
   // notifies integration or global callback when the source token changes.
   useEffect(() => {
-    if (!isInitialStateSet) {
+    if (!isInitialStateSet || initPending.current) {
       return;
     }
     const token = srcToken

package/src/utils/validation.ts

@@ -379,11 +379,16 @@ const mapToValidPathBridge = ({
       chain: newSourceChain,
       bridgeTokensDictionary,
     });
-    if (defaultToken && newSourceChain && newTargetChain) {
-      const isDefaultTokenBridgeable =
-        !!bridgeTokensDictionary[newSourceChain.chainId]?.[
+    if (defaultToken && newSourceChain) {
+      const bridgeTargets =
+        bridgeTokensDictionary[newSourceChain.chainId]?.[
           defaultToken.address.toLowerCase()
-        ]?.[newTargetChain.chainId];
+        ] || {};
+      // With no target chain picked yet the default still applies, as long as
+      // the token is bridgeable somewhere.
+      const isDefaultTokenBridgeable = newTargetChain
+        ? !!bridgeTargets[newTargetChain.chainId]
+        : Object.keys(bridgeTargets).length > 0;
 
       if (isDefaultTokenBridgeable) {
         newSourceToken = defaultToken;

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

@@ -1,13 +0,0 @@
-import { ArrowDownLongIcon } from "@src/assets/icons";
-
-export const ArrowIcon = () => {
-  return (
-    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary">
-      <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-xl">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
-          <ArrowDownLongIcon />
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,72 +0,0 @@
-import { TokenLogo } from "@src/components";
-import { useSwapContext } from "@src/context";
-import { SwapPanelType } from "../../../index";
-import { useMemo } from "react";
-import { Ecosystem } from "@src/models";
-
-type Props = {
-  type: SwapPanelType;
-};
-export const SwapPanel = ({ type }: Props) => {
-  const {
-    srcToken,
-    srcChain,
-    dstToken,
-    dstChain,
-    srcValue,
-    srcValueUsd,
-    dstValue,
-    dstValueUsd,
-    bridgeUI,
-  } = useSwapContext();
-
-  const token = useMemo(
-    () => (type === "source" ? srcToken : dstToken),
-    [dstToken, srcToken, type],
-  );
-
-  const chain = useMemo(
-    () => (type === "source" ? srcChain : dstChain),
-    [dstChain, srcChain, type],
-  );
-
-  const value = useMemo(() => {
-    if (
-      type === "destination" &&
-      bridgeUI &&
-      srcChain?.ecosystem === Ecosystem.SOLANA
-    ) {
-      return srcValue;
-    }
-    return type === "source" ? srcValue : dstValue;
-  }, [type, bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
-
-  const valueUsd = useMemo(() => {
-    return type === "source" ? srcValueUsd : dstValueUsd;
-  }, [dstValueUsd, srcValueUsd, type]);
-
-  return (
-    <div className="flex justify-between bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20 p-5 rounded-xl">
-      <div className="flex flex-col">
-        <div className="opacity-60 text-sm mb-2">{`You ${
-          type === "source" ? "pay" : "receive"
-        }`}</div>
-        <div className={`${type === "destination" && "text-t_text_secondary"}`}>
-          {value}
-        </div>
-        {valueUsd && <div className="opacity-60">${valueUsd}</div>}
-      </div>
-      <div className="flex items-center gap-3">
-        <div className="flex flex-col text-right">
-          <div>{token?.symbol}</div>
-          <div className="opacity-60">{chain?.displayName}</div>
-        </div>
-        <TokenLogo
-          token={token}
-          className="w-9 h-9"
-          generatedLogoClassName="w-9 h-9"
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,25 +0,0 @@
-import { TokenLogoWithChain } from "@src/components";
-import { Chain, Token } from "@src/models";
-
-type Props = {
-  chain: Chain | undefined;
-  token: Token | undefined;
-  value: string;
-};
-export const TokenItem = ({ chain, token, value }: Props) => {
-  return (
-    <div className="flex items-center gap-2">
-      <TokenLogoWithChain
-        chain={chain}
-        token={token}
-        chainLogoClassName="w-5"
-        tokenLogoClassName="w-9 h-9"
-        generatedLogoClassName="w-9 h-9 text-[16px]"
-      />
-      <div className="flex flex-col w-min sm:w-auto">
-        <div>{`${value} ${token?.symbol}`}</div>
-        <div className="opacity-60">{chain?.displayName}</div>
-      </div>
-    </div>
-  );
-};