JSON code wrap toggle

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

@@ -24,6 +24,7 @@ import { ShareUrlButton } from "@/components/ShareUrlButton";
 import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
 import { PageCard } from "@/components/layout/PageCard";
 import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
+import { JsonCodeWrapToggle } from "@/components/JsonCodeWrapToggle";
 
 import { useStore } from "@/store/useStore";
 import { isEmptyObject } from "@/helpers/isEmptyObject";
@@ -44,6 +45,7 @@ import {
 } from "@/constants/endpointsPages";
 import { useEndpoint } from "@/query/useEndpoint";
 import { useScrollIntoView } from "@/hooks/useScrollIntoView";
+import { useCodeWrappedSetting } from "@/hooks/useCodeWrappedSetting";
 import {
   AnyObject,
   AssetObject,
@@ -141,6 +143,8 @@ export default function Endpoints() {
   const [urlParams, setUrlParams] = useState("");
   const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
 
+  const [isCodeWrapped, setIsCodeWrapped] = useCodeWrappedSetting();
+
   const isTransactionPost = () => {
     return [
       Routes.ENDPOINTS_TRANSACTIONS_POST.toString(),
@@ -615,9 +619,20 @@ export default function Endpoints() {
       return (
         <>
           <div className="Endpoints__txTextarea">
-            <PrettyJsonTextarea json={renderedProps} label="Payload" />
+            <PrettyJsonTextarea
+              json={renderedProps}
+              label="Payload"
+              isCodeWrapped={isCodeWrapped}
+            />
           </div>
-          <Box gap="md" direction="row" justify="end">
+          <Box gap="md" direction="row" justify="space-between" align="center">
+            <JsonCodeWrapToggle
+              isChecked={isCodeWrapped}
+              onChange={(isChecked) => {
+                setIsCodeWrapped(isChecked);
+              }}
+            />
+
             <CopyJsonPayloadButton
               jsonString={stringify(renderedProps, null, 2) || ""}
             />
@@ -983,19 +998,28 @@ export default function Endpoints() {
                 <div
                   className={`PageBody__content PageBody__scrollable ${endpointData.isError ? "PageBody__content--error" : ""}`}
                 >
-                  <EndpointsJsonResponse json={endpointData.json} />
+                  <EndpointsJsonResponse
+                    json={endpointData.json}
+                    isCodeWrapped={isCodeWrapped}
+                  />
                 </div>
 
                 <div className="PageFooter">
                   <div className="PageFooter__left">
-                    {renderPostAsyncTxResponseMessage()}
+                    <JsonCodeWrapToggle
+                      isChecked={isCodeWrapped}
+                      onChange={(isChecked) => {
+                        setIsCodeWrapped(isChecked);
+                      }}
+                    />
                   </div>
                   <div className="PageFooter__right">
                     <CopyJsonPayloadButton
                       jsonString={stringify(endpointData.json, null, 2) || ""}
                     />
                   </div>
                 </div>
+                {renderPostAsyncTxResponseMessage()}
               </div>
             </Card>
           ) : null}

src/app/(sidebar)/endpoints/components/EndpointsJsonResponse.tsx

@@ -1,12 +1,18 @@
-import { CustomKeyValueLinkMap, PrettyJson } from "@/components/PrettyJson";
 import { Routes } from "@/constants/routes";
+import { CustomKeyValueLinkMap, PrettyJson } from "@/components/PrettyJson";
+import { SdsLink } from "@/components/SdsLink";
 import { sanitizeArray } from "@/helpers/sanitizeArray";
+import { buildEndpointHref } from "@/helpers/buildEndpointHref";
 
 import { AnyObject } from "@/types/types";
-import { buildEndpointHref } from "@/helpers/buildEndpointHref";
-import { SdsLink } from "@/components/SdsLink";
 
-export const EndpointsJsonResponse = ({ json }: { json: AnyObject }) => {
+export const EndpointsJsonResponse = ({
+  json,
+  isCodeWrapped,
+}: {
+  json: AnyObject;
+  isCodeWrapped?: boolean;
+}) => {
   const handleLinkXdr = (val: string, key?: string) => {
     let xdrType = "";
 
@@ -421,6 +427,7 @@ export const EndpointsJsonResponse = ({ json }: { json: AnyObject }) => {
       json={json}
       customKeyValueLinkMap={customKeyValueLinkAction}
       customValueRenderer={customValueLinkAction}
+      isCodeWrapped={isCodeWrapped}
     />
   );
 };

src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx

@@ -21,13 +21,15 @@ import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndD
 import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
 import { PageCard } from "@/components/layout/PageCard";
 import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
+import { JsonCodeWrapToggle } from "@/components/JsonCodeWrapToggle";
 
 import { Routes } from "@/constants/routes";
 import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon";
 import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods";
 import { arrayItem } from "@/helpers/arrayItem";
 import { formatTimestamp } from "@/helpers/formatTimestamp";
 import { getNetworkById } from "@/helpers/getNetworkById";
+import { useCodeWrappedSetting } from "@/hooks/useCodeWrappedSetting";
 import { useStore } from "@/store/useStore";
 import {
   Network,
@@ -59,6 +61,8 @@ export const SavedEndpointsPage = () => {
     number | undefined
   >();
 
+  const [isCodeWrapped, setIsCodeWrapped] = useCodeWrappedSetting();
+
   const isRpcTab = saved.activeTab === "rpc";
 
   const updateSavedHorizonEndpoints = useCallback(() => {
@@ -387,9 +391,25 @@ export const SavedEndpointsPage = () => {
                   className="Endpoints__txTextarea"
                   data-testid="saved-rpc-payload"
                 >
-                  <PrettyJsonTextarea json={e.payload} label="Payload" />
+                  <PrettyJsonTextarea
+                    json={e.payload}
+                    label="Payload"
+                    isCodeWrapped={isCodeWrapped}
+                  />
                 </div>
-                <Box gap="md" direction="row" justify="end">
+                <Box
+                  gap="md"
+                  direction="row"
+                  justify="space-between"
+                  align="center"
+                >
+                  <JsonCodeWrapToggle
+                    isChecked={isCodeWrapped}
+                    onChange={(isChecked) => {
+                      setIsCodeWrapped(isChecked);
+                    }}
+                  />
+
                   <CopyJsonPayloadButton
                     jsonString={stringify(e.payload, null, 2) || ""}
                   />

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

@@ -17,16 +17,20 @@ 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 { localStorageSettings } from "@/helpers/localStorageSettings";
 import { buildEndpointHref } from "@/helpers/buildEndpointHref";
 import { localStorageSavedTransactions } from "@/helpers/localStorageSavedTransactions";
 import { shareableUrl } from "@/helpers/shareableUrl";
 
 import { Routes } from "@/constants/routes";
-import { XDR_TYPE_TRANSACTION_ENVELOPE } from "@/constants/settings";
+import {
+  SETTINGS_SUBMIT_METHOD,
+  XDR_TYPE_TRANSACTION_ENVELOPE,
+} from "@/constants/settings";
 
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
 import { useScrollIntoView } from "@/hooks/useScrollIntoView";
+import { useCodeWrappedSetting } from "@/hooks/useCodeWrappedSetting";
 
 import { useSubmitRpcTx } from "@/query/useSubmitRpcTx";
 import { useSubmitHorizonTx } from "@/query/useSubmitHorizonTx";
@@ -40,6 +44,7 @@ import { SdsLink } from "@/components/SdsLink";
 import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField";
 import { PageCard } from "@/components/layout/PageCard";
 import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
+import { JsonCodeWrapToggle } from "@/components/JsonCodeWrapToggle";
 
 import {
   HorizonErrorResponse,
@@ -62,8 +67,6 @@ const SUBMIT_OPTIONS = [
   },
 ];
 
-const SETTING_KEY = "submitMethod";
-
 export default function SubmitTransaction() {
   const { network, xdr, transaction } = useStore();
   const { blob, updateXdrBlob } = xdr;
@@ -81,6 +84,8 @@ export default function SubmitTransaction() {
     "",
   );
 
+  const [isCodeWrapped, setIsCodeWrapped] = useCodeWrappedSetting();
+
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const responseSuccessEl = useRef<HTMLDivElement | null>(null);
   const responseErrorEl = useRef<HTMLDivElement | null>(null);
@@ -122,7 +127,7 @@ export default function SubmitTransaction() {
 
   // Set default submit method
   useEffect(() => {
-    const localStorageMethod = localStorageSubmitMethod.get(SETTING_KEY);
+    const localStorageMethod = localStorageSettings.get(SETTINGS_SUBMIT_METHOD);
 
     if (localStorageMethod) {
       setSubmitMethod(localStorageMethod);
@@ -572,8 +577,8 @@ export default function SubmitTransaction() {
                           toggleDropdown(false);
                           resetSubmitState();
 
-                          localStorageSubmitMethod.set({
-                            key: SETTING_KEY,
+                          localStorageSettings.set({
+                            key: SETTINGS_SUBMIT_METHOD,
                             value: s.id,
                           });
                         }}
@@ -634,8 +639,17 @@ export default function SubmitTransaction() {
                   <PrettyJsonTransaction
                     json={JSON.parse(xdrJson.jsonString)}
                     xdr={blob}
+                    isCodeWrapped={isCodeWrapped}
                   />
                 </div>
+                <Box gap="md" direction="row" align="center">
+                  <JsonCodeWrapToggle
+                    isChecked={isCodeWrapped}
+                    onChange={(isChecked) => {
+                      setIsCodeWrapped(isChecked);
+                    }}
+                  />
+                </Box>
               </Box>
             ) : null}
           </>

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

@@ -26,20 +26,25 @@ import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOn
 import { LabelHeading } from "@/components/LabelHeading";
 import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
 import { PageCard } from "@/components/layout/PageCard";
+import { JsonCodeWrapToggle } from "@/components/JsonCodeWrapToggle";
 
 import * as StellarXdr from "@/helpers/StellarXdr";
 import { parseToLosslessJson } from "@/helpers/parseToLosslessJson";
 import { delayedAction } from "@/helpers/delayedAction";
 import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
+
 import { useIsXdrInit } from "@/hooks/useIsXdrInit";
+import { useCodeWrappedSetting } from "@/hooks/useCodeWrappedSetting";
 import { useStore } from "@/store/useStore";
+
 import { AnyObject } from "@/types/types";
 
 export default function ViewXdr() {
   const { xdr, network } = useStore();
   const { updateXdrBlob, updateXdrType, resetXdr } = xdr;
 
   const isXdrInit = useIsXdrInit();
+  const [isCodeWrapped, setIsCodeWrapped] = useCodeWrappedSetting();
 
   const {
     data: latestTxn,
@@ -200,6 +205,7 @@ export default function ViewXdr() {
                 key={`pretty-json-${index}`}
                 json={j}
                 xdr={xdr}
+                isCodeWrapped={isCodeWrapped}
               />
             </>
           ))}
@@ -209,7 +215,13 @@ export default function ViewXdr() {
     }
 
     if (jsonArray.length === 1) {
-      return <PrettyJsonTransaction json={jsonArray[0]} xdr={xdr} />;
+      return (
+        <PrettyJsonTransaction
+          json={jsonArray[0]}
+          xdr={xdr}
+          isCodeWrapped={isCodeWrapped}
+        />
+      );
     }
 
     return null;
@@ -305,7 +317,19 @@ export default function ViewXdr() {
                   })}
                 </div>
 
-                <Box gap="md" direction="row" justify="end">
+                <Box
+                  gap="md"
+                  direction="row"
+                  justify="space-between"
+                  align="center"
+                >
+                  <JsonCodeWrapToggle
+                    isChecked={isCodeWrapped}
+                    onChange={(isChecked) => {
+                      setIsCodeWrapped(isChecked);
+                    }}
+                  />
+
                   <CopyJsonPayloadButton
                     jsonString={prettifyJsonString(xdrJsonDecoded.jsonString)}
                   />

src/components/JsonCodeWrapToggle.tsx

@@ -0,0 +1,36 @@
+import { Label, Toggle } from "@stellar/design-system";
+import { Box } from "@/components/layout/Box";
+import { localStorageSettings } from "@/helpers/localStorageSettings";
+import { SETTINGS_CODE_WRAP } from "@/constants/settings";
+
+export const JsonCodeWrapToggle = ({
+  isChecked,
+  onChange,
+}: {
+  isChecked: boolean;
+  onChange: (isChecked: boolean) => void;
+}) => {
+  return (
+    <Box gap="sm" direction="row" align="center">
+      <Label htmlFor="json-code-wrap-toggle" size="sm">
+        Wrap Code
+      </Label>
+      <Toggle
+        id="json-code-wrap-toggle"
+        fieldSize="sm"
+        title="test"
+        onChange={() => {
+          const newValue = !isChecked;
+
+          onChange(newValue);
+
+          localStorageSettings.set({
+            key: SETTINGS_CODE_WRAP,
+            value: newValue.toString(),
+          });
+        }}
+        checked={isChecked}
+      />
+    </Box>
+  );
+};

src/components/PrettyJson/index.tsx

@@ -32,6 +32,7 @@ type PrettyJsonProps = {
   customKeyRenderer?: (item: any, key: string) => React.ReactNode | null;
   isLoading?: boolean;
   isCollapsible?: boolean;
+  isCodeWrapped?: boolean;
 };
 
 type Char = "{" | "}" | "[" | "]";
@@ -43,6 +44,7 @@ export const PrettyJson = ({
   customKeyRenderer,
   isLoading,
   isCollapsible = true,
+  isCodeWrapped,
 }: PrettyJsonProps) => {
   if (typeof json !== "object") {
     return null;
@@ -287,7 +289,7 @@ export const PrettyJson = ({
   }
 
   return (
-    <div className="PrettyJson">
+    <div className="PrettyJson" data-code-wrapped={Boolean(isCodeWrapped)}>
       <Bracket char="{" />
       {render(json)}
       <Bracket char="}" isEnd />