(null);
+
+ const {
+ data: submitRpcResponse,
+ mutate: submitRpc,
+ error: submitRpcError,
+ isPending: isSubmitRpcPending,
+ isSuccess: isSubmitRpcSuccess,
+ reset: resetSubmitRpc,
+ } = useSubmitRpcTx();
+
+ const {
+ data: submitHorizonResponse,
+ mutate: submitHorizon,
+ error: submitHorizonError,
+ isPending: isSubmitHorizonPending,
+ isSuccess: isSubmitHorizonSuccess,
+ reset: resetSubmitHorizon,
+ } = useSubmitHorizonTx();
+
+ // Derive the XDR to submit: validated > assembled > signed
+ const xdrBlob =
+ validate?.validatedXdr || simulate?.assembledXdr || sign.signedXdr;
+
+ const isSoroban = Boolean(build.soroban.operation.operation_type);
+ const isRpcAvailable = Boolean(network.rpcUrl);
+ const isSubmitInProgress = isSubmitRpcPending || isSubmitHorizonPending;
+
+ const IS_BLOCK_EXPLORER_ENABLED =
+ network.id === "testnet" || network.id === "mainnet";
+
+ const isSuccess = Boolean(
+ (isSubmitRpcSuccess && submitRpcResponse) ||
+ (isSubmitHorizonSuccess && submitHorizonResponse),
+ );
+
+ // Decode XDR to JSON for the transaction envelope display
+ const getXdrJson = useCallback(() => {
+ if (!xdrBlob) return null;
+
+ try {
+ const jsonString = StellarXdr.decode(
+ XDR_TYPE_TRANSACTION_ENVELOPE,
+ xdrBlob,
+ );
+ return {
+ jsonString: JSON.stringify(JSON.parse(jsonString), null, 2),
+ error: "",
+ };
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ } catch (e) {
+ return { jsonString: "", error: "Unable to decode XDR" };
+ }
+ }, [xdrBlob]);
+
+ const [xdrJson, setXdrJson] = useState<{
+ jsonString: string;
+ error: string;
+ } | null>(null);
+
+ // Initialize XDR decoding
+ useEffect(() => {
+ const init = async () => {
+ await StellarXdr.initialize();
+ setXdrJson(getXdrJson());
+ };
+ init();
+ }, [getXdrJson]);
+
+ // Set default submit method
+ useEffect(() => {
+ const localStorageMethod = localStorageSettings.get(SETTINGS_SUBMIT_METHOD);
+
+ if (localStorageMethod) {
+ setSubmitMethod(localStorageMethod);
+ } else {
+ setSubmitMethod(isSoroban && isRpcAvailable ? "rpc" : "horizon");
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isRpcAvailable, isSoroban]);
+
+ const isError = Boolean(submitRpcError || submitHorizonError);
+
+ // Scroll to success/error response
+ useScrollIntoView(isSuccess, responseSuccessEl);
+ useScrollIntoView(isError, responseErrorEl);
+
+ // Track submit events
+ useEffect(() => {
+ if (isSubmitRpcSuccess) {
+ trackEvent(TrackingEvent.TRANSACTION_SUBMIT_SUCCESS, { method: "rpc" });
+ }
+ }, [isSubmitRpcSuccess]);
+
+ useEffect(() => {
+ if (isSubmitHorizonSuccess) {
+ trackEvent(TrackingEvent.TRANSACTION_SUBMIT_SUCCESS, {
+ method: "horizon",
+ });
+ }
+ }, [isSubmitHorizonSuccess]);
+
+ // Close dropdown when clicked outside
+ const handleClickOutside = useCallback((event: MouseEvent) => {
+ if (dropdownRef?.current?.contains(event.target as Node)) {
+ return;
+ }
+ toggleDropdown(false);
+ }, []);
+
+ useLayoutEffect(() => {
+ if (isDropdownVisible) {
+ document.addEventListener("pointerup", handleClickOutside);
+ } else {
+ document.removeEventListener("pointerup", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("pointerup", handleClickOutside);
+ };
+ }, [isDropdownVisible, handleClickOutside]);
+
+ const toggleDropdown = (show: boolean) => {
+ const delay = 100;
+
+ if (show) {
+ setIsDropdownActive(true);
+ delayedAction({
+ action: () => {
+ setIsDropdownVisible(true);
+ },
+ delay,
+ });
+ } else {
+ setIsDropdownVisible(false);
+ delayedAction({
+ action: () => {
+ setIsDropdownActive(false);
+ },
+ delay,
+ });
+ }
+ };
+
+ const resetSubmitState = () => {
+ if (submitRpcError || submitRpcResponse) {
+ resetSubmitRpc();
+ }
+ if (submitHorizonError || submitHorizonResponse) {
+ resetSubmitHorizon();
+ }
+ };
+
+ const handleSubmit = () => {
+ resetSubmitState();
+
+ delayedAction({
+ action: () => {
+ if (submitMethod === "rpc") {
+ submitRpc({
+ rpcUrl: network.rpcUrl,
+ transactionXdr: xdrBlob,
+ networkPassphrase: network.passphrase,
+ headers: getNetworkHeaders(network, submitMethod),
+ });
+ } else if (submitMethod === "horizon") {
+ submitHorizon({
+ horizonUrl: network.horizonUrl,
+ transactionXdr: xdrBlob,
+ networkPassphrase: network.passphrase,
+ headers: getNetworkHeaders(network, submitMethod),
+ });
+ }
+ },
+ delay: 300,
+ });
+ };
+
+ // Store submit result in flow store when successful
+ useEffect(() => {
+ if (isSubmitRpcSuccess && submitRpcResponse) {
+ setSubmitResult(JSON.stringify(submitRpcResponse));
+ }
+ }, [isSubmitRpcSuccess, submitRpcResponse, setSubmitResult]);
+
+ useEffect(() => {
+ if (isSubmitHorizonSuccess && submitHorizonResponse) {
+ setSubmitResult(JSON.stringify(submitHorizonResponse));
+ }
+ }, [isSubmitHorizonSuccess, submitHorizonResponse, setSubmitResult]);
+
+ const getButtonLabel = () => {
+ return (
+ SUBMIT_OPTIONS.find((s) => s.id === submitMethod)?.title ||
+ "Select submit method"
+ );
+ };
+
+ const isSubmitDisabled = !submitMethod || !xdrBlob;
+
+ const renderSuccess = () => {
+ if (isSubmitRpcSuccess && submitRpcResponse && network.id) {
+ return (
+
+ }
+ footerLeftEl={
+ }
+ onClick={() => {
+ const href = buildEndpointHref(Routes.TRANSACTION_DASHBOARD, {
+ transactionHash: submitRpcResponse.hash,
+ });
+ openUrl(href);
+ }}
+ >
+ View in transaction dashboard
+
+ }
+ footerRightEl={
+ IS_BLOCK_EXPLORER_ENABLED ? (
+ <>
+ }
+ iconPosition="right"
+ onClick={() => {
+ const BLOCK_EXPLORER_LINK =
+ getBlockExplorerLink("stellar.expert")[network.id];
+ openUrl(
+ `${BLOCK_EXPLORER_LINK}/tx/${submitRpcResponse.hash}`,
+ );
+ }}
+ >
+ View on Stellar.Expert
+
+ }
+ iconPosition="right"
+ onClick={() => {
+ const BLOCK_EXPLORER_LINK =
+ getBlockExplorerLink("stellarchain.io")[network.id];
+ openUrl(
+ `${BLOCK_EXPLORER_LINK}/transactions/${submitRpcResponse.hash}`,
+ );
+ }}
+ >
+ View on Stellarchain.io
+
+
+ ) : null
+ }
+ response={
+
+ }
+ />
+
+
+ }
+ />
+
+ }
+ />
+
+ }
+ />
+
+
+ }
+ />
+
+ );
+ }
+
+ if (isSubmitHorizonSuccess && submitHorizonResponse) {
+ return (
+
+ }
+ footerLeftEl={
+ }
+ onClick={() => {
+ const href = buildEndpointHref(Routes.TRANSACTION_DASHBOARD, {
+ transactionHash: submitHorizonResponse.hash,
+ });
+ openUrl(href);
+ }}
+ >
+ View in transaction dashboard
+
+ }
+ footerRightEl={
+ IS_BLOCK_EXPLORER_ENABLED ? (
+ <>
+ }
+ iconPosition="right"
+ onClick={() => {
+ const BLOCK_EXPLORER_LINK =
+ getBlockExplorerLink("stellar.expert")[network.id];
+ openUrl(
+ `${BLOCK_EXPLORER_LINK}/tx/${submitHorizonResponse.hash}`,
+ );
+ }}
+ >
+ View on Stellar.Expert
+
+ }
+ iconPosition="right"
+ onClick={() => {
+ const BLOCK_EXPLORER_LINK =
+ getBlockExplorerLink("stellarchain.io")[network.id];
+ openUrl(
+ `${BLOCK_EXPLORER_LINK}/transactions/${submitHorizonResponse.hash}`,
+ );
+ }}
+ >
+ View on Stellarchain.io
+
+
+ ) : null
+ }
+ response={
+
+ }
+ />
+
+
+ }
+ />
+
+ }
+ />
+
+ }
+ />
+
+
+ }
+ />
+
+ );
+ }
+
+ return null;
+ };
+
+ const renderError = () => {
+ if (submitRpcError) {
+ return (
+
+
+
+ );
+ }
+
+ if (submitHorizonError) {
+ return (
+
+
+
+ );
+ }
+
+ return null;
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {xdrJson?.jsonString ? (
+
+ ) : null}
+
+
+
+
+
+
}
+ onClick={() => {
+ if (!isDropdownActive) {
+ toggleDropdown(true);
+ }
+ }}
+ >
+ {getButtonLabel()}
+
+
+
+ {SUBMIT_OPTIONS.map((s) => (
+
{
+ if (s.id === "rpc" && !isRpcAvailable) {
+ return;
+ }
+
+ setSubmitMethod(s.id);
+ toggleDropdown(false);
+ resetSubmitState();
+
+ localStorageSettings.set({
+ key: SETTINGS_SUBMIT_METHOD,
+ value: s.id,
+ });
+ }}
+ >
+
+ {s.title}
+ {s.id === submitMethod ? : null}
+
+
+ {s.description}
+
+ {s.note && s.id === "rpc" && !isRpcAvailable ? (
+
+ {s.note}
+
+ ) : null}
+
+ ))}
+
+
+