Improve fees display on send

@shared/api/internal.ts

@@ -2208,6 +2208,7 @@ export const simulateTransaction = async (args: {
     body: JSON.stringify({
       xdr,
       network_passphrase: networkDetails.networkPassphrase,
+      network_url: networkDetails.sorobanRpcUrl,
     }),
   };
   const res = await fetch(`${INDEXER_URL}/simulate-tx`, options);

extension/src/popup/components/InternalTransaction/EditSettings/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Button, Card, Input } from "@stellar/design-system";
+import React, { useRef } from "react";
+import { Button, Card, Icon, Input } from "@stellar/design-system";
 import { Field, FieldProps, Formik, Form } from "formik";
 import { useTranslation } from "react-i18next";
 
@@ -17,7 +17,10 @@ interface EditSettingsProps {
   timeout: number;
   congestion: string;
   title: string;
+  isSoroban?: boolean;
   onClose: () => void;
+  onFeeChange?: (fee: string) => void;
+  onShowFeesInfo?: (currentDraftFee: string) => void;
   onSubmit: (args: EditSettingsFormValue) => void;
 }
 
@@ -26,10 +29,16 @@ export const EditSettings = ({
   timeout,
   congestion,
   title,
+  isSoroban = false,
   onClose,
+  onFeeChange,
+  onShowFeesInfo,
   onSubmit,
 }: EditSettingsProps) => {
   const { t } = useTranslation();
+  // Tracks the current draft fee so onShowFeesInfo can pass it to the parent
+  // for an accurate FeesPane total without requiring a Redux save first.
+  const draftFeeRef = useRef<string>(fee);
   const initialValues: EditSettingsFormValue = {
     fee,
     timeout,
@@ -38,6 +47,23 @@ export const EditSettings = ({
     onSubmit(values);
   };
 
+  const feeLabel = (
+    <span className="EditTxSettings__fee-label">
+      {isSoroban ? t("Inclusion Fee") : t("Transaction Fee")}
+      {isSoroban && onShowFeesInfo && (
+        <button
+          className="EditTxSettings__fee-info-btn"
+          type="button"
+          onClick={() => onShowFeesInfo?.(draftFeeRef.current)}
+          aria-label={t("Fee breakdown")}
+          data-testid="edit-settings-fees-info-btn"
+        >
+          <Icon.InfoCircle />
+        </button>
+      )}
+    </span>
+  );
+
   return (
     <div className="EditTxSettings">
       <Card>
@@ -57,13 +83,15 @@ export const EditSettings = ({
                       autoComplete="off"
                       id="fee"
                       placeholder={t("Fee")}
-                      label={t("Transaction Fee")}
+                      label={feeLabel}
                       {...field}
                       error={errors.fee}
                       onChange={(e) => {
                         let value = e.target.value;
                         if (value === "") {
                           setFieldValue("fee", "");
+                          draftFeeRef.current = "";
+                          onFeeChange?.("");
                           return;
                         }
 
@@ -76,13 +104,19 @@ export const EditSettings = ({
                         }
 
                         setFieldValue("fee", value);
+                        draftFeeRef.current = value;
+                        onFeeChange?.(value);
                       }}
                       rightElement={
                         <Button
                           type="button"
                           size="md"
                           variant="tertiary"
-                          onClick={() => setFieldValue("fee", fee)}
+                          onClick={() => {
+                            setFieldValue("fee", fee);
+                            draftFeeRef.current = fee;
+                            onFeeChange?.(fee);
+                          }}
                         >
                           {t("Default")}
                         </Button>

extension/src/popup/components/InternalTransaction/EditSettings/styles.scss

@@ -28,6 +28,31 @@
     }
   }
 
+  &__fee-label {
+    display: inline-flex;
+    align-items: center;
+    gap: pxToRem(4px);
+  }
+
+  &__fee-info-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--sds-clr-gray-09);
+
+    svg {
+      width: pxToRem(14px);
+      height: pxToRem(14px);
+    }
+
+    &:hover {
+      color: var(--sds-clr-gray-12);
+    }
+  }
+
   &__actions {
     display: flex;
     margin-top: pxToRem(32px);

extension/src/popup/components/InternalTransaction/FeesPane/index.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Icon } from "@stellar/design-system";
+import { useTranslation } from "react-i18next";
+
+import { RequestState, State } from "constants/request";
+import { SimulateTxData } from "types/transactions";
+
+import "./styles.scss";
+
+export interface FeesPaneProps {
+  fee: string;
+  simulationState: State<SimulateTxData, string>;
+  isSoroban?: boolean;
+  onClose: () => void;
+}
+
+export const FeesPane = ({
+  fee,
+  simulationState,
+  isSoroban = false,
+  onClose,
+}: FeesPaneProps) => {
+  const { t } = useTranslation();
+
+  const isLoading =
+    simulationState.state === RequestState.IDLE ||
+    simulationState.state === RequestState.LOADING;
+
+  return (
+    <div className="FeesPane" data-testid="review-tx-fees-pane">
+      <div className="FeesPane__Header">
+        <div className="FeesPane__Header__Icon">
+          <Icon.Route />
+        </div>
+        <button
+          type="button"
+          className="FeesPane__Header__Close"
+          data-testid="review-tx-fees-close-btn"
+          onClick={onClose}
+          aria-label={t("Close")}
+        >
+          <Icon.X />
+        </button>
+      </div>
+      <div className="FeesPane__Title">
+        <span>{t("Fees")}</span>
+      </div>
+      <div className="FeesPane__Card">
+        {!isLoading && simulationState.data?.inclusionFee && (
+          <div className="FeesPane__Card__Row">
+            <span className="FeesPane__Card__Row__Label">
+              {t("Inclusion Fee")}
+            </span>
+            <span
+              className="FeesPane__Card__Row__Value"
+              data-testid="review-tx-inclusion-fee"
+            >
+              {simulationState.data.inclusionFee} XLM
+            </span>
+          </div>
+        )}
+        {!isLoading && simulationState.data?.resourceFee && (
+          <div className="FeesPane__Card__Row">
+            <span className="FeesPane__Card__Row__Label">
+              {t("Resource Fee")}
+            </span>
+            <span
+              className="FeesPane__Card__Row__Value"
+              data-testid="review-tx-resource-fee"
+            >
+              {simulationState.data.resourceFee} XLM
+            </span>
+          </div>
+        )}
+        <div className="FeesPane__Card__Row">
+          <span className="FeesPane__Card__Row__Label FeesPane__Card__Row__Label--total">
+            {t("Total Fee")}
+          </span>
+          <span
+            className="FeesPane__Card__Row__Value FeesPane__Card__Row__Value--total"
+            data-testid="review-tx-total-fee"
+          >
+            {isLoading ? t("Calculating...") : `${fee} XLM`}
+          </span>
+        </div>
+      </div>
+      <div
+        className="FeesPane__Description"
+        data-testid="review-tx-fees-description"
+      >
+        {isSoroban
+          ? t("Fees description soroban")
+          : t("Fees description classic")}
+      </div>
+    </div>
+  );
+};

extension/src/popup/components/InternalTransaction/FeesPane/styles.scss

@@ -0,0 +1,101 @@
+@use "../../../styles/utils.scss" as *;
+
+.FeesPane {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 0;
+  gap: pxToRem(16px);
+
+  .multi-pane-slider & {
+    padding: 0;
+  }
+
+  &__Header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__Icon {
+      display: flex;
+      width: pxToRem(32px);
+      height: pxToRem(32px);
+      justify-content: center;
+      align-items: center;
+      border-radius: pxToRem(8px);
+      background: var(--sds-clr-lilac-03);
+      border: 1px solid var(--sds-clr-lilac-06);
+
+      svg {
+        width: pxToRem(20px);
+        height: pxToRem(20px);
+        color: var(--sds-clr-lilac-09);
+      }
+    }
+
+    &__Close {
+      display: flex;
+      width: pxToRem(32px);
+      height: pxToRem(32px);
+      justify-content: center;
+      align-items: center;
+      border-radius: 1000px;
+      background: var(--sds-clr-gray-03);
+      color: var(--sds-clr-gray-09);
+      cursor: pointer;
+    }
+  }
+
+  &__Title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: pxToRem(18px);
+    font-weight: var(--font-weight-medium);
+  }
+
+  &__Card {
+    display: flex;
+    flex-direction: column;
+    border-radius: pxToRem(16px);
+    background-color: var(--sds-clr-gray-03);
+    padding: pxToRem(4px) pxToRem(16px);
+
+    &__Row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: pxToRem(12px) 0;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--sds-clr-gray-06);
+      }
+
+      &__Label {
+        font-size: pxToRem(14px);
+        font-weight: var(--font-weight-medium);
+        color: var(--sds-clr-gray-11);
+
+        &--total {
+          color: var(--sds-clr-lilac-11);
+        }
+      }
+
+      &__Value {
+        font-size: pxToRem(14px);
+        font-weight: var(--font-weight-medium);
+        color: var(--sds-clr-gray-12);
+
+        &--total {
+          color: var(--sds-clr-lilac-11);
+        }
+      }
+    }
+  }
+
+  &__Description {
+    color: var(--sds-clr-gray-11);
+    font-size: pxToRem(14px);
+    line-height: pxToRem(20px);
+  }
+}