Update Import transaction's UI

src/app/(sidebar)/transaction/build/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { Notification, Card } from "@stellar/design-system";
 
 import { useBuildFlowStore } from "@/store/createTransactionFlowStore";
@@ -39,6 +39,7 @@ export default function BuildTransaction() {
     setActiveStep,
     goToNextStep,
     markStepCompleted,
+    resetDownstreamState,
     resetAll,
   } = useBuildFlowStore();
 
@@ -103,6 +104,39 @@ export default function BuildTransaction() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isNextDisabled, activeStep]);
 
+  // When the user edits the transaction on the build step after having already
+  // progressed past it, the rebuilt XDR no longer matches what was simulated,
+  // signed, or validated downstream — those results are now stale. Reset them
+  // so a signature produced against the previous transaction can't be carried
+  // through to submit; the user must re-run the later steps against the edited
+  // transaction.
+  const prevBuiltXdrRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!currentXdr) {
+      return;
+    }
+
+    if (prevBuiltXdrRef.current === null) {
+      prevBuiltXdrRef.current = currentXdr;
+      return;
+    }
+    if (prevBuiltXdrRef.current === currentXdr) {
+      return;
+    }
+    prevBuiltXdrRef.current = currentXdr;
+
+    const buildIndex = steps.indexOf("build");
+    const highestIndex = highestCompletedStep
+      ? steps.indexOf(highestCompletedStep)
+      : -1;
+
+    // Only reset when there is downstream progress to invalidate.
+    if (highestIndex > buildIndex) {
+      resetDownstreamState(steps[buildIndex + 1], steps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentXdr]);
+
   const renderError = () => {
     if (paramsError.length > 0 || operationsError.length > 0) {
       return (

src/app/(sidebar)/transaction/components/SignStepContent.tsx

@@ -3,16 +3,31 @@
 import { useState } from "react";
 import { Notification, Card, Text } from "@stellar/design-system";
 
+import { useStore } from "@/store/useStore";
+
+import { decodeXdr } from "@/helpers/decodeXdr";
+
+import { useIsXdrInit } from "@/hooks/useIsXdrInit";
+
 import { SignTransactionXdr } from "@/components/SignTransactionXdr";
 import { Box } from "@/components/layout/Box";
+import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
+import { prettifyJsonString } from "@/helpers/prettifyJsonString";
 
 import { TransactionStepHeader } from "./TransactionStepHeader";
+import { CodeEditor } from "@/components/CodeEditor";
 
 type Props = {
   xdrToSign: string;
   signedXdr: string;
   onSigned: (signedXdr: string) => void;
   onClearAll: () => void;
+  /**
+   * Optional slot rendered above the signing UI — the import flow passes a
+   * signature-status panel here so a co-signer can review existing signatures
+   * before adding their own. Omitted by the build flow.
+   */
+  signatureContext?: React.ReactNode;
 };
 
 /**
@@ -38,8 +53,25 @@ export const SignStepContent = ({
   signedXdr,
   onSigned,
   onClearAll,
+  signatureContext,
 }: Props) => {
+  const { network } = useStore();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedLanguage, setSelectedLanguage] = useState<"json" | "xdr">(
+    "json",
+  );
+
+  const isXdrInit = useIsXdrInit();
+
+  const xdrJsonDecoded = decodeXdr({
+    xdrType: "TransactionEnvelope",
+    xdrBlob: xdrToSign,
+    isReady: isXdrInit,
+  });
+
+  const signedXdrJsonString = xdrJsonDecoded?.jsonString
+    ? `${prettifyJsonString(xdrJsonDecoded.jsonString)}\n`
+    : "";
 
   return (
     <Box gap="md">
@@ -54,6 +86,8 @@ export const SignStepContent = ({
         submitted to the network.
       </Text>
 
+      {signatureContext}
+
       <SignTransactionXdr
         id="sign-step"
         xdrToSign={xdrToSign || null}
@@ -77,25 +111,29 @@ export const SignStepContent = ({
             </Notification>
 
             <Box gap="xxl">
-              <Box gap="xs">
-                <Text
-                  size="xs"
-                  weight="medium"
-                  as="div"
-                  addlClassName="SignStepContent__label"
-                >
-                  Signed transaction (Base64 XDR)
-                </Text>
-
-                <div className="SignStepContent__xdrBox">
-                  <Text
-                    size="sm"
-                    as="div"
-                    addlClassName="SignStepContent__xdrText"
-                  >
-                    {signedXdr}
-                  </Text>
-                </div>
+              <Box gap="lg">
+                <TransactionHashReadOnlyField
+                  xdr={signedXdr}
+                  networkPassphrase={network.passphrase}
+                />
+
+                {signedXdrJsonString ? (
+                  <CodeEditor
+                    title="Signed transaction"
+                    value={
+                      selectedLanguage === "json"
+                        ? signedXdrJsonString
+                        : signedXdr
+                    }
+                    languages={["json", "xdr"]}
+                    selectedLanguage={selectedLanguage}
+                    onLanguageChange={(id) => {
+                      const selectedValue = id === "xdr" ? "xdr" : "json";
+                      setSelectedLanguage(selectedValue);
+                    }}
+                    maxHeightInRem="20"
+                  />
+                ) : null}
               </Box>
             </Box>
           </Box>

src/app/(sidebar)/transaction/components/Signatures.tsx

@@ -87,11 +87,11 @@ const getEnvelopeSummary = (
     if (hasUnrecognized) {
       return {
         message:
-          "Includes signature(s) from signers that can’t be verified offline (e.g. multisig cosigners). Submit to verify.",
+          "Includes signature(s) that can't be verified offline (e.g. from multisig cosigners)",
       };
     }
     return {
-      message: `Missing signature${missing.length > 1 ? "s" : ""} from ${missing.join(", ")}.`,
+      message: `Couldn’t verify a signature for ${missing.join(", ")} offline. If it’s a multisig account, an existing signature may already cover it on-chain — you can submit to let the network verify, or add a signature first.`,
     };
   }
 
@@ -106,7 +106,9 @@ const getEnvelopeSummary = (
     );
   }
   if (hasUnrecognized) {
-    notes.push("Signature(s) from unrecognized signers were also found.");
+    notes.push(
+      "Signature(s) from unverified existing signers were also found.",
+    );
   }
 
   return {
@@ -339,7 +341,7 @@ const renderSigner = (matchStatus: MatchStatus, signer?: string) => {
   return (
     <Box gap="xs" direction="row" align="center" addlClassName="info-message">
       <Icon.InfoCircle />
-      <span>Unrecognized signer</span>
+      <span>Existing signer (unverified)</span>
     </Box>
   );
 };

src/app/(sidebar)/transaction/components/SubmitStepContent.tsx

@@ -23,7 +23,6 @@ import { useSubmitHorizonTx } from "@/query/useSubmitHorizonTx";
 import { Box } from "@/components/layout/Box";
 import { XdrPicker } from "@/components/FormElements/XdrPicker";
 import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
-import { CodeEditor } from "@/components/CodeEditor";
 import { ValidationResponseCard } from "@/components/ValidationResponseCard";
 import { TxResponse } from "@/components/TxResponse";
 import {
@@ -32,6 +31,7 @@ import {
 } from "@/components/TxErrorResponse";
 import { XdrLink } from "@/components/XdrLink";
 import { TxHashLink } from "@/components/TxHashLink";
+import { PrettyJsonTransaction } from "@/components/PrettyJsonTransaction";
 
 import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 import { getBlockExplorerLink } from "@/helpers/getBlockExplorerLink";
@@ -40,6 +40,7 @@ import { delayedAction } from "@/helpers/delayedAction";
 import { localStorageSettings } from "@/helpers/localStorageSettings";
 import * as StellarXdr from "@/helpers/StellarXdr";
 import { buildEndpointHref } from "@/helpers/buildEndpointHref";
+import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
 
 import { useScrollIntoView } from "@/hooks/useScrollIntoView";
 
@@ -145,16 +146,22 @@ export const SubmitStepContent = ({
       );
       return {
         jsonString: JSON.stringify(JSON.parse(jsonString), null, 2),
+        jsonObject: parseToLosslessJson(jsonString),
         error: "",
       };
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (e) {
-      return { jsonString: "", error: "Unable to decode XDR" };
+      return {
+        jsonString: "",
+        jsonObject: null,
+        error: "Unable to decode XDR",
+      };
     }
   }, [xdrBlob]);
 
   const [xdrJson, setXdrJson] = useState<{
     jsonString: string;
+    jsonObject: Record<string, unknown> | null;
     error: string;
   } | null>(null);
 
@@ -580,13 +587,15 @@ export const SubmitStepContent = ({
               networkPassphrase={network.passphrase}
             />
 
-            {xdrJson?.jsonString ? (
-              <CodeEditor
-                title="Transaction envelope"
-                value={xdrJson.jsonString}
-                selectedLanguage="json"
-              />
-            ) : null}
+            <div className="PageBody__content">
+              {xdrJson?.jsonObject ? (
+                <PrettyJsonTransaction
+                  json={xdrJson.jsonObject}
+                  xdr={xdrBlob}
+                  isCodeWrapped={true}
+                />
+              ) : null}
+            </div>
           </Box>
           <Box gap="sm" direction="row" align="center" justify="left">
             <Button

src/app/(sidebar)/transaction/import/components/ImportStepContent.tsx

@@ -11,8 +11,6 @@ import { Notification } from "@stellar/design-system";
 import { useImportFlowStore } from "@/store/createTransactionFlowStore";
 import { useStore } from "@/store/useStore";
 
-import { useImportSignatureCompleteness } from "@/hooks/useImportSignatureCompleteness";
-
 import { parseImportXdr, ParsedImportXdr } from "@/helpers/parseImportXdr";
 
 import { trackEvent, TrackingEvent } from "@/metrics/tracking";
@@ -64,11 +62,6 @@ export const ImportStepContent = ({
   const parseError = importState?.parseError ?? null;
   const parsedTxType = importState?.parsedTxType ?? null;
 
-  const signatureCompleteness = useImportSignatureCompleteness();
-  const isMultisigDeferred =
-    Boolean(isReadyToSubmit) &&
-    (signatureCompleteness?.missingSigners.length ?? 0) > 0;
-
   const parsedTx: Transaction | FeeBumpTransaction | null = (() => {
     if (!importXdr || parseError || !parsedTxType) return null;
     try {
@@ -121,13 +114,6 @@ export const ImportStepContent = ({
   }, []);
 
   const renderSuccessImportAlert = () => {
-    if (isMultisigDeferred) {
-      return (
-        <Notification variant="primary" title="Transaction imported.">
-          Signatures from unrecognized signers detected. Submit to verify.
-        </Notification>
-      );
-    }
     if (isReadyToSubmit) {
       return (
         <Notification