@deframe-sdk/components 0.1.73 → 0.1.74

package/dist/index.d.mts

@@ -1638,6 +1638,7 @@ interface SwapQuoteDetailsLabels {
     blockchainCostsLabel: string;
     networkGasLabel: string;
     protocolFeeLabel: string;
+    priceImpactLabel: string;
     slippageLabel: string;
     etaLabel: string;
     quoteIdLabel: string;
@@ -1658,6 +1659,8 @@ interface SwapQuoteDetailsViewProps {
     feePercentage: string;
     gasCostFormatted: string;
     protocolFee: string;
+    priceImpactFormatted: string;
+    priceImpactIsPositive: boolean;
     slippageFormatted: string;
     etaFormatted: string;
     quoteId: string;

package/dist/index.d.ts

@@ -1638,6 +1638,7 @@ interface SwapQuoteDetailsLabels {
     blockchainCostsLabel: string;
     networkGasLabel: string;
     protocolFeeLabel: string;
+    priceImpactLabel: string;
     slippageLabel: string;
     etaLabel: string;
     quoteIdLabel: string;
@@ -1658,6 +1659,8 @@ interface SwapQuoteDetailsViewProps {
     feePercentage: string;
     gasCostFormatted: string;
     protocolFee: string;
+    priceImpactFormatted: string;
+    priceImpactIsPositive: boolean;
     slippageFormatted: string;
     etaFormatted: string;
     quoteId: string;

package/dist/index.js

@@ -8366,14 +8366,6 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
             ]
           }
         ),
-        transactionDetails.exchangeRateFormatted && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            "data-test-id": "swap-form-simple-advanced-panel-subtitle",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-secondary)] m-0 mb-[var(--deframe-widget-size-gap-sm)] leading-[1.4] font-[inherit]",
-            children: transactionDetails.exchangeRateFormatted
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -8382,9 +8374,15 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.exchangeRateLabel, value: transactionDetails.exchangeRateFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: transactionDetails.totalCostFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.networkGasLabel, value: transactionDetails.gasCostFormatted }),
-        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.protocolFeeLabel, value: transactionDetails.protocolFee }),
+        /* @__PURE__ */ jsxRuntime.jsx(DetailRow, { label: transactionDetails.labels.blockchainCostsLabel, value: `- ${transactionDetails.totalCostFormatted}`, valueColor: "negative" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DetailRow,
+          {
+            label: transactionDetails.labels.priceImpactLabel,
+            value: transactionDetails.priceImpactFormatted,
+            valueColor: transactionDetails.priceImpactIsPositive ? "positive" : "negative"
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           SlippageDetailRow,
           {
@@ -8401,7 +8399,12 @@ function AdvancedPanelContent({ advancedSettings, transactionDetails }) {
     }
   );
 }
-function DetailRow({ label, value }) {
+var valueColorClassNames = {
+  default: "text-[color:var(--deframe-widget-color-text-primary)]",
+  negative: "text-[color:var(--deframe-widget-color-state-error)]",
+  positive: "text-[color:var(--deframe-widget-color-state-success)]"
+};
+function DetailRow({ label, value, valueColor = "default" }) {
   if (!label && !value) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -8421,7 +8424,7 @@ function DetailRow({ label, value }) {
           "span",
           {
             "data-test-id": "swap-form-simple-detail-row-value",
-            className: "text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]",
+            className: tailwindMerge.twMerge("text-[13px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-right font-[var(--deframe-widget-font-family)]", valueColorClassNames[valueColor]),
             children: value
           }
         )