@xswap-link/sdk 0.14.0 → 0.15.0

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/tailwind.config.js

@@ -96,7 +96,10 @@ export default {
         x_modal: "var(--modal-width, 340px)",
       },
       width: {
-        x_modal: "var(--modal-width, 620px)",
+        // No fallback on purpose: unless the integrator sets --modal-width,
+        // the width resolves to `auto` so the widget can shrink on mobile.
+        // The default 620px cap comes from max-width below.
+        x_modal: "var(--modal-width)",
       },
       maxWidth: {
         x_modal: "var(--modal-width, 620px)",

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>
-  );
-};