Sign a tx from link opened via CLI

src/app/(sidebar)/transaction/cli-sign/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Routes } from "@/constants/routes";
+import { useStore } from "@/store/useStore";
+import { Loader } from "@stellar/design-system";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function CliSignTransaction() {
+  const { network, transaction } = useStore();
+  const { sign } = transaction;
+  const router = useRouter();
+  useEffect(() => {
+    router.push(Routes.SIGN_TRANSACTION);
+  }, [sign.importXdr, network, router]);
+
+  return <Loader />;
+}

src/app/layout.tsx

@@ -1,12 +1,13 @@
-import React from "react";
 import type { Metadata } from "next";
+import React from "react";
 
 import { LayoutMain } from "@/components/layout/LayoutMain";
 import { QueryProvider } from "@/query/QueryProvider";
 import { StoreProvider } from "@/store/StoreProvider";
 
-import "@stellar/design-system/build/styles.min.css";
+import { NetworkByPasswordProvider } from "@/components/NetworkByPasswordProvider";
 import "@/styles/globals.scss";
+import "@stellar/design-system/build/styles.min.css";
 
 // Needed for CSP
 export const dynamic = "force-dynamic";
@@ -29,7 +30,9 @@ export default function RootLayout({
         <div id="root">
           <StoreProvider>
             <QueryProvider>
-              <LayoutMain>{children}</LayoutMain>
+              <NetworkByPasswordProvider>
+                <LayoutMain>{children}</LayoutMain>
+              </NetworkByPasswordProvider>
             </QueryProvider>
           </StoreProvider>
         </div>

src/components/NetworkByPasswordProvider.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { NetworkOptions } from "@/constants/settings";
+import { useStore } from "@/store/useStore";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+// Component to set Network and Xdr if only password is given in query string
+export const NetworkByPasswordProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { updateIsDynamicNetworkSelect, transaction, selectNetwork } =
+    useStore();
+
+  const searchParams = useSearchParams();
+
+  const getNetworkByPassphrase = (passphrase: string) => {
+    return NetworkOptions.find((network) => network.passphrase === passphrase);
+  };
+
+  useEffect(() => {
+    const networkPassphrase = searchParams.get("networkPassphrase");
+    const xdr = searchParams.get("xdr");
+
+    if (networkPassphrase) {
+      const network = getNetworkByPassphrase(networkPassphrase);
+      if (network) {
+        updateIsDynamicNetworkSelect(true);
+        selectNetwork(network);
+      }
+    }
+
+    if (xdr) {
+      transaction.updateSignActiveView("overview");
+      transaction.updateSignImportXdr(xdr);
+    }
+  }, [searchParams, selectNetwork, updateIsDynamicNetworkSelect, transaction]);
+
+  return children;
+};

src/constants/routes.ts

@@ -71,6 +71,7 @@ export enum Routes {
   // Transactions
   BUILD_TRANSACTION = "/transaction/build",
   SIGN_TRANSACTION = "/transaction/sign",
+  CLI_SIGN_TRANSACTION = "/transaction/cli-sign",
   SIMULATE_TRANSACTION = "/transaction/simulate",
   SUBMIT_TRANSACTION = "/transaction/submit",
   FEE_BUMP_TRANSACTION = "/transaction/fee-bump",