[New Tx Flow] Fix bugs and update 'restore footprint' & 'extend ttl' functinality

src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractStorage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Link, Loader, Text } from "@stellar/design-system";
 import { useRouter } from "next/navigation";
 
-import { useStore } from "@/store/useStore";
+import { useBuildFlowStore } from "@/store/createTransactionFlowStore";
 
 import { ErrorText } from "@/components/ErrorText";
 import { Box } from "@/components/layout/Box";
@@ -21,7 +21,6 @@ import { getContractDataXDR } from "@/helpers/sorobanUtils";
 
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
 import { CONTRACT_STORAGE_MAX_ENTRIES } from "@/constants/settings";
-import { INITIAL_OPERATION } from "@/constants/transactionOperations";
 import { Routes } from "@/constants/routes";
 
 import { trackEvent, TrackingEvent } from "@/metrics/tracking";
@@ -54,7 +53,7 @@ export const ContractStorage = ({
   isSourceStellarExpert: boolean;
 }) => {
   const isXdrInit = useIsXdrInit();
-  const { transaction } = useStore();
+  const { resetAll, setBuildSorobanOperation } = useBuildFlowStore();
   const router = useRouter();
 
   const [currentHref, setCurrentHref] = useState<string | undefined>();
@@ -199,17 +198,9 @@ export const ContractStorage = ({
 
   const keyValueFilters = getKeyValueFilters();
 
-  const handleResetTransactions = () => {
-    // reset transaction related stores
-    transaction.updateBuildOperations([INITIAL_OPERATION]);
-    transaction.updateBuildXdr("");
-    transaction.updateSorobanBuildOperation(INITIAL_OPERATION);
-    transaction.updateSorobanBuildXdr("");
-  };
-
   const handleRestore = (key: string, durability: string) => {
-    // reset transaction related stores
-    handleResetTransactions();
+    // Reset the flow store to a clean state
+    resetAll();
 
     const contractDataXdr = getContractDataXDR({
       contractAddress: contractId,
@@ -221,16 +212,17 @@ export const ContractStorage = ({
       contractId,
     });
 
-    router.push(Routes.BUILD_TRANSACTION);
-
     if (contractDataXdr) {
-      transaction.updateSorobanBuildOperation({
+      setBuildSorobanOperation({
         operation_type: "restore_footprint",
         params: {
           contractDataLedgerKey: contractDataXdr,
         },
+        source_account: "",
       });
     }
+
+    router.push(Routes.BUILD_TRANSACTION);
   };
 
   return (

src/app/(sidebar)/transaction/build/components/ClassicOperation.tsx

@@ -455,6 +455,19 @@ export const ClassicOperation = ({
                                 });
                               },
                             });
+                          case "destination":
+                          case "source_account":
+                            return component.render({
+                              ...baseProps,
+                              onChange: (value: string) => {
+                                handleOperationParamChange({
+                                  opIndex: idx,
+                                  opParam: input,
+                                  opValue: value,
+                                  opType: op.operation_type,
+                                });
+                              },
+                            });
                           default:
                             return component.render({
                               ...baseProps,

src/app/(sidebar)/transaction/build/components/ClassicTransactionXdr.tsx

@@ -48,18 +48,7 @@ export const ClassicTransactionXdr = () => {
 
   const isXdrInit = useIsXdrInit();
 
-  useEffect(() => {
-    // Reset transaction.xdr if the transaction is not valid
-    if (!(isValid.params && isValid.operations)) {
-      setBuildClassicXdr("");
-    }
-    // Not including setBuildClassicXdr
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isValid.params, isValid.operations]);
-
-  if (!(isXdrInit && isValid.params && isValid.operations)) {
-    return null;
-  }
+  const isReady = isXdrInit && isValid.params && isValid.operations;
 
   const txnJsonToXdr = () => {
     try {
@@ -480,21 +469,27 @@ export const ClassicTransactionXdr = () => {
         jsonString || "",
       );
 
-      setBuildClassicXdr(txnXdr);
-
       return {
         xdr: txnXdr,
       };
     } catch (e) {
-      setBuildClassicXdr("");
-
       return { error: `${e}` };
     }
   };
 
-  const txnXdr = txnJsonToXdr();
+  const txnXdr = isReady ? txnJsonToXdr() : null;
+
+  useEffect(() => {
+    setBuildClassicXdr(txnXdr?.xdr ?? "");
+    // Not including setBuildClassicXdr
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [txnXdr?.xdr]);
+
+  if (!isReady) {
+    return null;
+  }
 
-  if (txnXdr.error) {
+  if (txnXdr?.error) {
     return (
       <ValidationResponseCard
         variant="error"
@@ -504,7 +499,7 @@ export const ClassicTransactionXdr = () => {
     );
   }
 
-  if (txnXdr.xdr) {
+  if (txnXdr?.xdr) {
     try {
       const txnHash = TransactionBuilder.fromXDR(txnXdr.xdr, network.passphrase)
         .hash()

src/app/(sidebar)/transaction/build/components/Operations.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChangeEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Select,
   Notification,
@@ -151,7 +151,9 @@ export const Operations = () => {
     setBuildClassicXdr("");
   };
 
-  // Preserve values and validate inputs when components mounts
+  // Initialise or re-validate operations.
+  // Runs on mount AND whenever the store operations are externally reset to
+  // empty (e.g. "Clear all"), since the component stays mounted.
   useEffect(() => {
     // If no operations to preserve, add inital operation and error template
     if (txnOperations.length === 0 && !soroban.operation.operation_type) {
@@ -285,9 +287,9 @@ export const Operations = () => {
 
       setOperationsError([...errors]);
     }
-    // Check this only when mounts, don't need to check any dependencies
+    // Re-run when operations are externally reset (e.g. "Clear all")
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [txnOperations.length, soroban.operation.operation_type]);
 
   // Update operations error when operations change
   useEffect(() => {
@@ -761,10 +763,10 @@ export const Operations = () => {
           value: currentOperation.source_account,
           error: operationsError[index]?.error?.["source_account"],
           isRequired: false,
-          onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          onChange: (value: string) => {
             handleOperationSourceAccountChange(
               index,
-              e.target.value,
+              value,
               opType,
               isSorobanOperationType(opType),
             );