Network selector: setup for custom headers (#1101)

* Network Selector UI updated

* Update network requests

* Fix tests

* Comment out custom headers for now

* Replace SorobanRpc with StellarRpc

src/app/(sidebar)/account/create/page.tsx

@@ -9,6 +9,7 @@ import { useFriendBot } from "@/query/useFriendBot";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 import { GenerateKeypair } from "@/components/GenerateKeypair";
 import { ExpandBox } from "@/components/ExpandBox";
@@ -49,6 +50,7 @@ export default function CreateAccount() {
       network,
       publicKey: account.publicKey!,
       key: { type: "create" },
+      headers: getNetworkHeaders(network, "horizon"),
     });
 
   useEffect(() => {

src/app/(sidebar)/account/fund/page.tsx

@@ -6,6 +6,7 @@ import { useQueryClient } from "@tanstack/react-query";
 
 import { useFriendBot } from "@/query/useFriendBot";
 import { useStore } from "@/store/useStore";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 import { validate } from "@/validate";
 
@@ -38,6 +39,7 @@ export default function FundAccount() {
     network,
     publicKey: generatedPublicKey,
     key: { type: "fund" },
+    headers: getNetworkHeaders(network, "horizon"),
   });
 
   const queryClient = useQueryClient();

src/app/(sidebar)/endpoints/[[...pages]]/page.tsx

@@ -35,6 +35,7 @@ import { arrayItem } from "@/helpers/arrayItem";
 import { delayedAction } from "@/helpers/delayedAction";
 import { buildEndpointHref } from "@/helpers/buildEndpointHref";
 import { shareableUrl } from "@/helpers/shareableUrl";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 import { Routes } from "@/constants/routes";
 import {
@@ -278,12 +279,11 @@ export default function Endpoints() {
     refetch,
     isSuccess,
     isError,
-  } = useEndpoint(
+  } = useEndpoint({
     requestUrl,
-    // There is only one endpoint request for POST, using params directly for
-    // simplicity.
-    pageData?.requestMethod === "POST" ? getPostPayload() : undefined,
-  );
+    postData: pageData?.requestMethod === "POST" ? getPostPayload() : undefined,
+    headers: getNetworkHeaders(network, isRpcEndpoint ? "rpc" : "horizon"),
+  });
 
   const responseEl = useRef<HTMLDivElement | null>(null);
 

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

@@ -25,6 +25,7 @@ import { useStore } from "@/store/useStore";
 import { useAccountSequenceNumber } from "@/query/useAccountSequenceNumber";
 import { validate } from "@/validate";
 import { EmptyObj, KeysOfUnion } from "@/types/types";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 export const Params = () => {
   const requiredParams = ["source_account", "seq_num", "fee"] as const;
@@ -63,6 +64,7 @@ export const Params = () => {
   } = useAccountSequenceNumber({
     publicKey: txnParams.source_account,
     horizonUrl: network.horizonUrl,
+    headers: getNetworkHeaders(network, "horizon"),
   });
 
   // Preserve values and validate inputs when components mounts

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

@@ -10,6 +10,7 @@ import { PrettyJson } from "@/components/PrettyJson";
 import { useStore } from "@/store/useStore";
 import { useSimulateTx } from "@/query/useSimulateTx";
 import { delayedAction } from "@/helpers/delayedAction";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 import { validate } from "@/validate";
 
 export default function SimulateTransaction() {
@@ -75,6 +76,7 @@ export default function SimulateTransaction() {
         rpcUrl: network.rpcUrl,
         transactionXdr: xdr.blob,
         instructionLeeway: simulate.instructionLeeway,
+        headers: getNetworkHeaders(network, "rpc"),
       });
 
       if (simulate.triggerOnLaunch) {

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

@@ -16,6 +16,7 @@ import * as StellarXdr from "@/helpers/StellarXdr";
 import { delayedAction } from "@/helpers/delayedAction";
 import { openUrl } from "@/helpers/openUrl";
 import { getBlockExplorerLink } from "@/helpers/getBlockExplorerLink";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 import { localStorageSubmitMethod } from "@/helpers/localStorageSubmitMethod";
 import { buildEndpointHref } from "@/helpers/buildEndpointHref";
 
@@ -73,7 +74,9 @@ export default function SubmitTransaction() {
   const [isSaveTxnModalVisible, setIsSaveTxnModalVisible] = useState(false);
   const [isDropdownActive, setIsDropdownActive] = useState(false);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
-  const [submitMethod, setSubmitMethod] = useState("");
+  const [submitMethod, setSubmitMethod] = useState<"horizon" | "rpc" | string>(
+    "",
+  );
 
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const responseSuccessEl = useRef<HTMLDivElement | null>(null);
@@ -178,21 +181,30 @@ export default function SubmitTransaction() {
   };
 
   const handleSubmit = () => {
-    if (submitMethod === "rpc") {
-      submitRpc({
-        rpcUrl: network.rpcUrl,
-        transactionXdr: blob,
-        networkPassphrase: network.passphrase,
-      });
-    } else if (submitMethod === "horizon") {
-      submitHorizon({
-        horizonUrl: network.horizonUrl,
-        transactionXdr: blob,
-        networkPassphrase: network.passphrase,
-      });
-    } else {
-      // Do nothing
-    }
+    resetSubmitState();
+
+    delayedAction({
+      action: () => {
+        if (submitMethod === "rpc") {
+          submitRpc({
+            rpcUrl: network.rpcUrl,
+            transactionXdr: blob,
+            networkPassphrase: network.passphrase,
+            headers: getNetworkHeaders(network, submitMethod),
+          });
+        } else if (submitMethod === "horizon") {
+          submitHorizon({
+            horizonUrl: network.horizonUrl,
+            transactionXdr: blob,
+            networkPassphrase: network.passphrase,
+            headers: getNetworkHeaders(network, submitMethod),
+          });
+        } else {
+          // Do nothing
+        }
+      },
+      delay: 300,
+    });
   };
 
   const onSimulateTx = () => {

src/app/(sidebar)/xdr/view/page.tsx

@@ -29,6 +29,7 @@ import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
 import { useStore } from "@/store/useStore";
 import { delayedAction } from "@/helpers/delayedAction";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 export default function ViewXdr() {
   const { xdr, network } = useStore();
@@ -43,7 +44,7 @@ export default function ViewXdr() {
     isFetching: isLatestTxnFetching,
     isLoading: isLatestTxnLoading,
     refetch: fetchLatestTxn,
-  } = useLatestTxn(network.horizonUrl);
+  } = useLatestTxn(network.horizonUrl, getNetworkHeaders(network, "horizon"));
 
   const queryClient = useQueryClient();
 

src/components/FormElements/LedgerSeqPicker.tsx

@@ -6,6 +6,7 @@ import { PositiveIntPicker } from "@/components/FormElements/PositiveIntPicker";
 import { useLatestLedger } from "@/query/useLatestLedger";
 
 import { useStore } from "@/store/useStore";
+import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
 
 interface LedgerSeqPickerProps {
   id: string;
@@ -37,6 +38,7 @@ export const LedgerSeqPicker = ({
     isLoading,
   } = useLatestLedger({
     rpcUrl: network.rpcUrl,
+    headers: getNetworkHeaders(network, "rpc"),
   });
 
   useEffect(() => {