@skip-go/widget 3.12.5 → 3.12.7

package/build/{index-NF5xbldM.js → index-CjTzvgxI.js}

@@ -45295,7 +45295,7 @@ function walletConnect(parameters) {
         const optionalChains = config2.chains.map((x2) => x2.id);
         if (!optionalChains.length)
           return;
-        const { EthereumProvider } = await import("./index.es-DGe-RoNu.js");
+        const { EthereumProvider } = await import("./index.es-CqdKzOS3.js");
         return await EthereumProvider.init({
           ...parameters,
           disableProviderPing: true,
@@ -48400,7 +48400,7 @@ const getFeeDetail = (estimatedFee) => {
   const totalUsd = Number(estimatedFee.usdAmount);
   return {
     assetAmount: Number(humanReadableAmount),
-    formattedAssetAmount: `${humanReadableAmount} ${estimatedFee.originAsset.symbol}`,
+    formattedAssetAmount: `${formatDisplayAmount(humanReadableAmount)} ${estimatedFee.originAsset.symbol}`,
     formattedUsdAmount: formatUSD(totalUsd.toString())
   };
 };
@@ -49189,7 +49189,9 @@ const SwapPageAssetChainInput = ({
   priceChangePercentage,
   isWaitingToUpdateInputValue,
   badPriceWarning,
-  disabled
+  disabled,
+  feeAmountUsd,
+  feeWarning
 }) => {
   var _a;
   const theme = nt();
@@ -49273,6 +49275,7 @@ const SwapPageAssetChainInput = ({
     }
     return theme.error.text;
   }, [priceChangePercentage, theme.error.text, theme.primary.text.normal, theme.success.text]);
+  const feeColor = feeWarning ? theme.error.text : theme.primary.text.lowContrast;
   const displayedValue = formatNumberWithCommas(value || "");
   const isLargeNumber = shouldReduceFontSize(value);
   const [isAssetButtonHovered, setIsAssetButtonHovered] = useState(false);
@@ -49340,29 +49343,34 @@ const SwapPageAssetChainInput = ({
       )
     ] }),
     /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "center", children: [
-      priceChangePercentage ? /* @__PURE__ */ jsxs(Row, { align: "center", gap: 6, children: [
-        /* @__PURE__ */ jsx(
-          SmallTextButton,
-          {
-            color: priceChangeColor,
-            onMouseEnter: () => setShowPriceChangePercentage(true),
-            onMouseLeave: () => setShowPriceChangePercentage(false),
-            children: usdValue && formatUSD(usdValue)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TinyTriangleIcon,
-          {
-            color: priceChangeColor,
-            direction: (priceChangePercentage ?? 0) > 0 ? "up" : "down",
-            style: { scale: showPriceChangePercentage ? "1" : "0.7" }
-          }
-        ),
-        showPriceChangePercentage && /* @__PURE__ */ jsxs(SmallText, { color: priceChangeColor, children: [
-          priceChangePercentage,
-          "%"
-        ] })
-      ] }) : /* @__PURE__ */ jsx(SmallText, { children: usdValue && formatUSD(usdValue) }),
+      /* @__PURE__ */ jsxs(Row, { align: "center", gap: 8, children: [
+        priceChangePercentage ? /* @__PURE__ */ jsxs(Row, { align: "center", gap: 6, children: [
+          /* @__PURE__ */ jsx(
+            SmallTextButton,
+            {
+              onMouseEnter: () => setShowPriceChangePercentage(true),
+              onMouseLeave: () => setShowPriceChangePercentage(false),
+              children: usdValue && formatUSD(usdValue)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TinyTriangleIcon,
+            {
+              color: priceChangeColor,
+              direction: (priceChangePercentage ?? 0) > 0 ? "up" : "down",
+              style: { scale: showPriceChangePercentage ? "1" : "0.7" }
+            }
+          ),
+          showPriceChangePercentage && /* @__PURE__ */ jsxs(SmallText, { color: priceChangeColor, children: [
+            priceChangePercentage,
+            "%"
+          ] })
+        ] }) : /* @__PURE__ */ jsx(SmallText, { children: usdValue && formatUSD(usdValue) }),
+        feeAmountUsd && /* @__PURE__ */ jsx(Row, { align: "center", gap: 4, children: /* @__PURE__ */ jsxs(SmallText, { color: feeColor, children: [
+          feeAmountUsd,
+          " in fees"
+        ] }) })
+      ] }),
       (assetDetails == null ? void 0 : assetDetails.chainName) ? /* @__PURE__ */ jsx(
         StyledOnChainGhostButton,
         {
@@ -50060,10 +50068,6 @@ const EstimatedDuration = ({ seconds }) => {
   const formatted = seconds ? convertSecondsToMinutesOrHours(seconds) : null;
   return formatted ? /* @__PURE__ */ jsx(Row, { gap: 4, align: "flex-end", children: formatted }) : null;
 };
-const Fee = ({ amount }) => amount ? /* @__PURE__ */ jsxs(Row, { gap: 4, align: "flex-end", children: [
-  "Fee: ",
-  amount
-] }) : null;
 const SettingsButton = ({ highlight, changed }) => /* @__PURE__ */ jsxs(StyledSettingsContainer$1, { align: "flex-end", gap: 3, highlightSettings: highlight, children: [
   /* @__PURE__ */ jsxs(CogIconWrapper, { children: [
     /* @__PURE__ */ jsx(CogIcon, {}),
@@ -50083,18 +50087,14 @@ const SwapPageFooterItems = ({
   content,
   showRouteInfo = false,
   showEstimatedTime = false,
-  highlightSettings = false,
-  showFee = false
+  highlightSettings = false
 }) => {
-  var _a;
   const { data: route2, isLoading } = useAtomValue(skipRouteAtom);
   const routePreference = useAtomValue(routePreferenceAtom);
   const settingsChanged = useSettingsChanged();
   const isMobile2 = useIsMobileScreenSize();
   const isGoFast = useIsGoFast(route2);
   const estimatedSeconds = route2 == null ? void 0 : route2.estimatedRouteDurationSeconds;
-  const fees2 = useMemo(() => route2 ? getFeeList(route2) : [], [route2]);
-  const totalFees = (_a = getTotalFees(fees2)) == null ? void 0 : _a.formattedUsdAmount;
   const signaturesRequired = (route2 == null ? void 0 : route2.txsRequired) ?? 1;
   const leftContent = () => {
     if (content) return content;
@@ -50104,7 +50104,6 @@ const SwapPageFooterItems = ({
         /* @__PURE__ */ jsx(SettingsButton, { highlight: highlightSettings, changed: settingsChanged }),
         /* @__PURE__ */ jsx(EstimatedDuration, { seconds: estimatedSeconds })
       ] }),
-      showFee && /* @__PURE__ */ jsx(Fee, { amount: totalFees }),
       !isMobile2 && signaturesRequired > 1 && /* @__PURE__ */ jsx(SignatureRequired, { count: signaturesRequired }),
       !isMobile2 && signaturesRequired <= 1 && isGoFast && /* @__PURE__ */ jsx(RoutePreferenceLabel, { preference: routePreference })
     ] });
@@ -50179,7 +50178,6 @@ const useSettingsDrawer = () => {
         disabled: isRouteError || isWaitingForNewRoute || route2 === void 0,
         showRouteInfo: true,
         showEstimatedTime: true,
-        showFee: true,
         onClick: openSettingsDrawer,
         ...props
       }
@@ -52548,7 +52546,7 @@ const useConnectToMissingCosmosChain = () => {
   return { isAskingToApproveConnection };
 };
 const SwapPage = () => {
-  var _a;
+  var _a, _b;
   const { SettingsFooter, drawerOpen } = useSettingsDrawer();
   useAtom(onRouteUpdatedEffect);
   useAtom(preloadSigningStargateClientEffect);
@@ -52694,6 +52692,12 @@ const SwapPage = () => {
     }
     return calculatePercentageChange(route2.usdAmountIn, route2.usdAmountOut);
   }, [isWaitingForNewRoute, route2 == null ? void 0 : route2.usdAmountIn, route2 == null ? void 0 : route2.usdAmountOut]);
+  const fees2 = useMemo(() => route2 ? getFeeList(route2) : [], [route2]);
+  const totalFeeUsd = (_a = getTotalFees(fees2)) == null ? void 0 : _a.formattedUsdAmount;
+  const feeWarning = useMemo(() => {
+    if (!(route2 == null ? void 0 : route2.usdAmountIn) || !(route2 == null ? void 0 : route2.usdAmountOut)) return false;
+    return parseFloat(route2.usdAmountOut) <= parseFloat(route2.usdAmountIn) * 0.9;
+  }, [route2 == null ? void 0 : route2.usdAmountIn, route2 == null ? void 0 : route2.usdAmountOut]);
   const swapButton = useMemo(() => {
     var _a2;
     const computeFontSize = (label) => label.length > 36 ? 18 : 24;
@@ -52753,7 +52757,7 @@ const SwapPage = () => {
       return /* @__PURE__ */ jsx(MainButton, { label, disabled: true, icon: ICONS.swap, fontSize: computeFontSize(label) });
     }
     const onClick = () => {
-      var _a3, _b;
+      var _a3, _b2;
       track("swap page: continue button - clicked", {
         route: route2,
         type: isSwapOperation ? "swap" : "send",
@@ -52798,7 +52802,7 @@ const SwapPage = () => {
         });
         return;
       }
-      if (((_b = route2 == null ? void 0 : route2.warning) == null ? void 0 : _b.type) === "LOW_INFO_WARNING") {
+      if (((_b2 = route2 == null ? void 0 : route2.warning) == null ? void 0 : _b2.type) === "LOW_INFO_WARNING") {
         track("warning page: low info", { route: route2 });
         setError({
           errorWarningType: ErrorWarningType.LowInfoWarning,
@@ -52902,7 +52906,9 @@ const SwapPage = () => {
               usdValue: route2 == null ? void 0 : route2.usdAmountOut,
               value: destinationAsset == null ? void 0 : destinationAsset.amount,
               priceChangePercentage: Number(priceChangePercentage),
-              badPriceWarning: ((_a = route2 == null ? void 0 : route2.warning) == null ? void 0 : _a.type) === "BAD_PRICE_WARNING",
+              badPriceWarning: ((_b = route2 == null ? void 0 : route2.warning) == null ? void 0 : _b.type) === "BAD_PRICE_WARNING",
+              feeAmountUsd: totalFeeUsd,
+              feeWarning,
               onChangeValue: (v2) => {
                 track("swap page: destination asset amount input - changed", { amount: v2 });
                 setDestinationAssetAmount(v2);
@@ -54092,7 +54098,7 @@ const initSentry = () => {
 };
 const name = "@skip-go/widget";
 const description = "Swap widget";
-const version = "3.12.5";
+const version = "3.12.7";
 const repository = {
   url: "https://github.com/skip-mev/skip-go",
   directory: "packages/widget"

package/build/{index.es-DGe-RoNu.js → index.es-CqdKzOS3.js}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs, p as process$1 } from "./index-NF5xbldM.js";
+import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs, p as process$1 } from "./index-CjTzvgxI.js";
 import qg, { PROPOSAL_EXPIRY_MESSAGE } from "@walletconnect/sign-client";
 const global = globalThis || void 0 || self;
 var buffer$1 = {};

package/build/index.js

@@ -1,4 +1,4 @@
-import { W, d, l, o, r, s } from "./index-NF5xbldM.js";
+import { W, d, l, o, r, s } from "./index-CjTzvgxI.js";
 export {
   W as Widget,
   d as defaultTheme,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skip-go/widget",
   "description": "Swap widget",
-  "version": "3.12.5",
+  "version": "3.12.7",
   "repository": {
     "url": "https://github.com/skip-mev/skip-go",
     "directory": "packages/widget"
@@ -42,7 +42,7 @@
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@r2wc/react-to-web-component": "^2.0.3",
     "@sentry/react": "^8.46.0",
-    "@skip-go/client": "1.3.2",
+    "@skip-go/client": "1.3.4",
     "@solana/spl-token": "^0.4.8",
     "@solana/wallet-adapter-ledger": "^0.9.25",
     "@solana/wallet-adapter-react": "^0.15.39",