From d6f4c046a09a36bd47abd37c104499ef75baeaae Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Wed, 3 Apr 2024 16:56:47 -0400
Subject: [PATCH] Explore Endpoints: pages part 2 (#807)

* All Assets

* Claimable Balances

* Effects + refactor endpoint URL template

* Fee Stats

* Ledgers

* Offers

* Operations

* Payments

* Transactions

* Update SDS

* Order book + asset object params

* Trade aggregations

* Fix PrettyJson records rendering

* Trades

* Cleanup

* Cleanup

* Fix linting
---
 package.json                                  |   2 +-
 .../explore-endpoints/[[...pages]]/page.tsx   | 188 +++++++++++---
 .../FormElements/PositiveIntPicker.tsx        |   1 -
 src/components/FormElements/TextPicker.tsx    |   1 -
 src/components/FormElements/XdrPicker.tsx     |  39 +++
 src/components/NetworkIndicator/styles.scss   |   2 +-
 src/components/PrettyJson/index.tsx           |  24 +-
 src/components/formComponentTemplate.tsx      | 136 +++++++++-
 src/constants/exploreEndpointsPages.ts        | 232 ++++++++++++++++--
 src/query/useExploreEndpoint.ts               |  26 +-
 src/styles/globals.scss                       |   6 +
 src/validate/index.ts                         |   2 +
 src/validate/methods/xdr.ts                   |   7 +
 yarn.lock                                     | 101 ++++----
 14 files changed, 652 insertions(+), 115 deletions(-)
 create mode 100644 src/components/FormElements/XdrPicker.tsx
 create mode 100644 src/validate/methods/xdr.ts

diff --git a/package.json b/package.json
index 8490d405..ba10109c 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.8",
+    "@stellar/design-system": "^2.0.0-beta.9",
     "@stellar/stellar-sdk": "^11.3.0",
     "@tanstack/react-query": "^5.28.8",
     "@tanstack/react-query-devtools": "^5.28.8",
diff --git a/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
index dac2e54c..7bce3c73 100644
--- a/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
+++ b/src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx
@@ -11,6 +11,7 @@ import {
   Input,
   Link,
   Text,
+  Textarea,
 } from "@stellar/design-system";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -85,7 +86,7 @@ export default function ExploreEndpoints() {
         const param = p.match(REGEX_TEMPLATE_PATH_PARAM_VALUE)?.[0];
 
         if (param) {
-          return urlPathParamArr.push(param);
+          urlPathParamArr.push(param);
         }
       });
 
@@ -115,7 +116,12 @@ export default function ExploreEndpoints() {
     refetch,
     isSuccess,
     isError,
-  } = useExploreEndpoint(requestUrl);
+  } = useExploreEndpoint(
+    requestUrl,
+    // There is only one endpoint request for POST, using params directly for
+    // simplicity.
+    pageData?.requestMethod === "POST" ? { tx: params.tx ?? "" } : undefined,
+  );
 
   const responseEl = useRef<HTMLDivElement | null>(null);
 
@@ -138,18 +144,34 @@ export default function ExploreEndpoints() {
     // Checking if there are any errors
     isValid = isEmptyObject(formError);
 
-    // When non-native asset is selected, code and issuer fields are required
-    if (params.asset) {
-      const assetObj = parseJsonString(params.asset);
+    // Asset components
+    const assetParams = [
+      params.asset,
+      params.selling_asset,
+      params.buying_asset,
+      params.base_asset,
+      params.counter_asset,
+    ];
+
+    assetParams.forEach((aParam) => {
+      // No need to keep checking if one field is invalid
+      if (!isValidReqAssetFields) {
+        return;
+      }
+
+      // When non-native asset is selected, code and issuer fields are required
+      if (aParam) {
+        const assetObj = parseJsonString(aParam);
 
-      if (
-        ["issued", "credit_alphanum4", "credit_alphanum12"].includes(
-          assetObj.type,
-        )
-      ) {
-        isValidReqAssetFields = Boolean(assetObj.code && assetObj.issuer);
+        if (
+          ["issued", "credit_alphanum4", "credit_alphanum12"].includes(
+            assetObj.type,
+          )
+        ) {
+          isValidReqAssetFields = Boolean(assetObj.code && assetObj.issuer);
+        }
       }
-    }
+    });
 
     return isValidReqAssetFields && isValidReqFields && isValid;
   };
@@ -158,7 +180,6 @@ export default function ExploreEndpoints() {
     () =>
       queryClient.resetQueries({
         queryKey: ["exploreEndpoint", "response"],
-        exact: true,
       }),
     [queryClient],
   );
@@ -192,6 +213,35 @@ export default function ExploreEndpoints() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const mapParamToValue = (key: string, value: string) => {
+    const [param, prop] = (value as string)?.split(".") || [];
+    const mappedValue = parseJsonString(params?.[param])?.[prop];
+
+    return mappedValue ? { [key]: mappedValue } : {};
+  };
+
+  // Persist mapped custom template props to params
+  useEffect(() => {
+    const paramMapping = pageData?.custom?.paramMapping;
+
+    if (paramMapping) {
+      const mappedParams = Object.entries(paramMapping).reduce(
+        (res, [key, value]) => {
+          const mappedVal = mapParamToValue(key, value as string);
+
+          return { ...res, ...mappedVal };
+        },
+        {} as AnyObject,
+      );
+
+      if (!isEmptyObject(mappedParams)) {
+        updateParams(mappedParams);
+      }
+    }
+    // Run this only once when page loads
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (currentPage) {
       updateCurrentEndpoint(currentPage);
@@ -248,6 +298,11 @@ export default function ExploreEndpoints() {
     };
 
     const baseUrl = `${endpointNetwork.horizonUrl}${parseUrlPath(urlPath)}`;
+
+    if (pageData?.requestMethod === "POST") {
+      return baseUrl;
+    }
+
     const searchParams = new URLSearchParams();
     const templateParams = urlParams?.split(",");
 
@@ -305,44 +360,72 @@ export default function ExploreEndpoints() {
     }, delay);
   };
 
+  const renderPostPayload = () => {
+    if (pageData?.requestMethod === "POST") {
+      return (
+        <div className="Endpoints__txTextarea">
+          <Textarea
+            id="tx"
+            fieldSize="md"
+            label="Payload"
+            value={JSON.stringify({ tx: params.tx ?? "" }, null, 2)}
+            rows={5}
+            disabled
+            spellCheck={false}
+          />
+        </div>
+      );
+    }
+
+    return null;
+  };
+
   const renderEndpointUrl = () => {
     if (!pageData) {
       return null;
     }
 
     return (
-      <div className="Endpoints__urlBar">
-        <Input
-          id="endpoint-url"
-          fieldSize="md"
-          value={requestUrl}
-          readOnly
-          disabled
-          leftElement={
-            <div className="Endpoints__input__requestType">
-              {pageData.requestMethod}
-            </div>
-          }
-        />
-        <Button
-          size="md"
-          variant="secondary"
-          type="submit"
-          disabled={!isSubmitEnabled()}
-          isLoading={isLoading || isFetching}
-        >
-          Submit
-        </Button>
-        <CopyText textToCopy={requestUrl}>
-          <Button size="md" variant="tertiary" icon={<Icon.Copy01 />}></Button>
-        </CopyText>
-      </div>
+      <>
+        <div className="Endpoints__urlBar">
+          <Input
+            id="endpoint-url"
+            fieldSize="md"
+            value={requestUrl}
+            readOnly
+            disabled
+            leftElement={
+              <div className="Endpoints__input__requestType">
+                {pageData.requestMethod}
+              </div>
+            }
+          />
+          <Button
+            size="md"
+            variant="secondary"
+            type="submit"
+            disabled={!isSubmitEnabled()}
+            isLoading={isLoading || isFetching}
+          >
+            Submit
+          </Button>
+          <CopyText textToCopy={requestUrl}>
+            <Button
+              size="md"
+              variant="tertiary"
+              icon={<Icon.Copy01 />}
+              type="button"
+            ></Button>
+          </CopyText>
+        </div>
+      </>
     );
   };
 
   const renderFields = () => {
     const allFields = sanitizeArray([
       ...urlPathParams.split(","),
+      ...(pageData?.custom?.renderComponents || []),
       ...urlParams.split(","),
     ]);
 
@@ -353,6 +436,8 @@ export default function ExploreEndpoints() {
     return (
       <div className="Endpoints__content">
         <div className="PageBody__content">
+          {renderPostPayload()}
+
           {allFields.map((f) => {
             const component = formComponentTemplate(f, pageData.custom?.[f]);
 
@@ -363,10 +448,29 @@ export default function ExploreEndpoints() {
               // formatting (sanitizing object or array, for exmaple).
               // Error check needs the original value.
               const handleChange = (value: any, storeValue: any) => {
-                resetQuery();
+                if (isSuccess || isError) {
+                  resetQuery();
+                }
+
+                // Mapping custom value to template params
+                const mappedParams = pageData?.custom?.paramMapping
+                  ? Object.entries(pageData.custom.paramMapping).reduce(
+                      (res, [key, val]) => {
+                        const [param, prop] = (val as string)?.split(".") || [];
+
+                        if (param === f) {
+                          return { ...res, [key]: value?.[prop] };
+                        }
+
+                        return res;
+                      },
+                      {} as AnyObject,
+                    )
+                  : {};
 
                 updateParams({
                   [f]: storeValue,
+                  ...mappedParams,
                 });
 
                 const error = component.validate?.(value, isRequired);
@@ -383,7 +487,11 @@ export default function ExploreEndpoints() {
               switch (f) {
                 case "asset":
                 case "selling":
+                case "selling_asset":
                 case "buying":
+                case "buying_asset":
+                case "base_asset":
+                case "counter_asset":
                   return component.render({
                     value: params[f],
                     error: formError[f],
diff --git a/src/components/FormElements/PositiveIntPicker.tsx b/src/components/FormElements/PositiveIntPicker.tsx
index a5404493..a1d322ee 100644
--- a/src/components/FormElements/PositiveIntPicker.tsx
+++ b/src/components/FormElements/PositiveIntPicker.tsx
@@ -9,7 +9,6 @@ interface PositiveIntPickerProps extends Omit<InputProps, "fieldSize"> {
   value: string;
   placeholder?: string;
   error: string | undefined;
-  // eslint-disable-next-line no-unused-vars
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
diff --git a/src/components/FormElements/TextPicker.tsx b/src/components/FormElements/TextPicker.tsx
index 93ac7063..2adf54f0 100644
--- a/src/components/FormElements/TextPicker.tsx
+++ b/src/components/FormElements/TextPicker.tsx
@@ -9,7 +9,6 @@ interface TextPickerProps extends Omit<InputProps, "fieldSize"> {
   value: string;
   placeholder?: string;
   error: string | undefined;
-  // eslint-disable-next-line no-unused-vars
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
diff --git a/src/components/FormElements/XdrPicker.tsx b/src/components/FormElements/XdrPicker.tsx
new file mode 100644
index 00000000..a75ee44d
--- /dev/null
+++ b/src/components/FormElements/XdrPicker.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Textarea, TextareaProps } from "@stellar/design-system";
+
+interface XdrPickerProps extends Omit<TextareaProps, "fieldSize"> {
+  id: string;
+  fieldSize?: "sm" | "md" | "lg";
+  labelSuffix?: string | React.ReactNode;
+  label: string;
+  value: string;
+  placeholder?: string;
+  error: string | undefined;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const XdrPicker = ({
+  id,
+  fieldSize = "md",
+  labelSuffix,
+  label,
+  value,
+  error,
+  onChange,
+  ...props
+}: XdrPickerProps) => {
+  return (
+    <Textarea
+      id={id}
+      fieldSize={fieldSize}
+      label={label}
+      labelSuffix={labelSuffix}
+      placeholder="Ex: AAAAABbxCy3mLg3hiTqX4VUEEp60pFOrJNxYM1JtxXTwXhY2AAAAZAAAAAMAAAAGAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAJAAAAAAAAAAHwXhY2AAAAQCPAo8QwsZe9FA0sz/deMdhlu6/zrk7SgkBG22ApvtpETBhnGkX4trSFDz8sVlKqvweqGUVgvjUyM0AcHxyXZQw="
+      value={value}
+      error={error}
+      rows={5}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};
diff --git a/src/components/NetworkIndicator/styles.scss b/src/components/NetworkIndicator/styles.scss
index d5ae9840..85d9232c 100644
--- a/src/components/NetworkIndicator/styles.scss
+++ b/src/components/NetworkIndicator/styles.scss
@@ -28,7 +28,7 @@
     }
 
     &[data-network="mainnet"] {
-      --NetworkSelector-dot-color: var(--sds-clr-green-09);
+      --NetworkSelector-dot-color: var(--sds-clr-lime-09);
     }
   }
 }
diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
index 9f8420d2..cf7c3c07 100644
--- a/src/components/PrettyJson/index.tsx
+++ b/src/components/PrettyJson/index.tsx
@@ -66,7 +66,29 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
                         <Key>{key}</Key>
                         <Bracket char="[" />
                       </div>
-                      <div>{value.map((v) => render(v, key))}</div>
+                      <div>
+                        {value.map((v, index) => {
+                          if (typeof v === "object") {
+                            return (
+                              <div
+                                key={`${keyProp}-${index}`}
+                                className="PrettyJson__nested"
+                              >
+                                <div className="PrettyJson__inline">
+                                  <Bracket char="{" />
+                                </div>
+                                <div>{render(v)}</div>
+                                <div>
+                                  <Bracket char="}" />
+                                  <Comma />
+                                </div>
+                              </div>
+                            );
+                          }
+
+                          return render(v, key);
+                        })}
+                      </div>
                       <div>
                         <Bracket char="]" />
                         <Comma />
diff --git a/src/components/formComponentTemplate.tsx b/src/components/formComponentTemplate.tsx
index c5d49204..d8e8d3a3 100644
--- a/src/components/formComponentTemplate.tsx
+++ b/src/components/formComponentTemplate.tsx
@@ -5,13 +5,14 @@ import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { OrderPicker } from "@/components/FormElements/OrderPicker";
 import { CursorPicker } from "@/components/FormElements/CursorPicker";
 import { LimitPicker } from "@/components/FormElements/LimitPicker";
+import { TextPicker } from "@/components/FormElements/TextPicker";
+import { PositiveIntPicker } from "@/components/FormElements/PositiveIntPicker";
+import { IncludeFailedPicker } from "@/components/FormElements/IncludeFailedPicker";
+import { XdrPicker } from "@/components/FormElements/XdrPicker";
 
 import { parseJsonString } from "@/helpers/parseJsonString";
 import { validate } from "@/validate";
 import { AnyObject, AssetObjectValue } from "@/types/types";
-import { TextPicker } from "./FormElements/TextPicker";
-import { PositiveIntPicker } from "./FormElements/PositiveIntPicker";
-import { IncludeFailedPicker } from "./FormElements/IncludeFailedPicker";
 
 type TemplateRenderProps = {
   value: string | undefined;
@@ -35,7 +36,6 @@ type TemplateRenderOrderProps = {
 
 type TemplateRenderIncludeFailedProps = {
   value: string | undefined;
-  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: boolean) => void;
   isRequired?: boolean;
 };
@@ -112,6 +112,23 @@ export const formComponentTemplate = (
         ),
         validate: validate.publicKey,
       };
+    case "base_asset":
+      return {
+        render: (templ: TemplateRenderAssetProps) => (
+          <AssetPicker
+            key={id}
+            assetInput={custom?.assetInput}
+            id="base_asset"
+            label="Base Asset"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={parseJsonString(templ.value)}
+            error={templ.error}
+            includeNative={custom?.includeNative}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: validate.asset,
+      };
     case "buying":
       return {
         render: (templ: TemplateRenderAssetProps) => (
@@ -129,6 +146,23 @@ export const formComponentTemplate = (
         ),
         validate: validate.asset,
       };
+    case "buying_asset":
+      return {
+        render: (templ: TemplateRenderAssetProps) => (
+          <AssetPicker
+            key={id}
+            assetInput={custom?.assetInput}
+            id="buying_asset"
+            label="Buying Asset"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={parseJsonString(templ.value)}
+            error={templ.error}
+            includeNative={custom?.includeNative}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: validate.asset,
+      };
     case "claimable_balance_id":
       return {
         render: (templ: TemplateRenderProps) => (
@@ -159,6 +193,23 @@ export const formComponentTemplate = (
         ),
         validate: validate.publicKey,
       };
+    case "counter_asset":
+      return {
+        render: (templ: TemplateRenderAssetProps) => (
+          <AssetPicker
+            key={id}
+            assetInput={custom?.assetInput}
+            id="counter_asset"
+            label="Counter Asset"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={parseJsonString(templ.value)}
+            error={templ.error}
+            includeNative={custom?.includeNative}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: validate.asset,
+      };
     case "cursor":
       return {
         render: (templ: TemplateRenderProps) => (
@@ -173,6 +224,21 @@ export const formComponentTemplate = (
         ),
         validate: null,
       };
+    case "end_time":
+      return {
+        render: (templ: TemplateRenderProps) => (
+          <TextPicker
+            key={id}
+            id={id}
+            label="End Time"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={templ.value || ""}
+            error={templ.error}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: null,
+      };
     case "include_failed":
       return {
         render: (templ: TemplateRenderIncludeFailedProps) => (
@@ -276,6 +342,21 @@ export const formComponentTemplate = (
         ),
         validate: null,
       };
+    case "resolution":
+      return {
+        render: (templ: TemplateRenderProps) => (
+          <TextPicker
+            key={id}
+            id={id}
+            label="Resolution"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={templ.value || ""}
+            error={templ.error}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: null,
+      };
     case "seller":
       return {
         render: (templ: TemplateRenderProps) => (
@@ -308,6 +389,23 @@ export const formComponentTemplate = (
         ),
         validate: validate.asset,
       };
+    case "selling_asset":
+      return {
+        render: (templ: TemplateRenderAssetProps) => (
+          <AssetPicker
+            key={id}
+            assetInput={custom?.assetInput}
+            id="selling_asset"
+            label="Selling Asset"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={parseJsonString(templ.value)}
+            error={templ.error}
+            includeNative={custom?.includeNative}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: validate.asset,
+      };
     case "signer":
       return {
         render: (templ: TemplateRenderProps) => (
@@ -338,6 +436,21 @@ export const formComponentTemplate = (
         ),
         validate: validate.publicKey,
       };
+    case "start_time":
+      return {
+        render: (templ: TemplateRenderProps) => (
+          <TextPicker
+            key={id}
+            id={id}
+            label="Start Time"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={templ.value || ""}
+            error={templ.error}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: null,
+      };
     case "transaction":
       return {
         render: (templ: TemplateRenderProps) => (
@@ -354,6 +467,21 @@ export const formComponentTemplate = (
         ),
         validate: validate.transactionHash,
       };
+    case "tx":
+      return {
+        render: (templ: TemplateRenderProps) => (
+          <XdrPicker
+            key={id}
+            id={id}
+            label="Transaction Envelope XDR"
+            labelSuffix={!templ.isRequired ? "optional" : undefined}
+            value={templ.value || ""}
+            error={templ.error}
+            onChange={templ.onChange}
+          />
+        ),
+        validate: validate.xdr,
+      };
     default:
       return null;
   }
diff --git a/src/constants/exploreEndpointsPages.ts b/src/constants/exploreEndpointsPages.ts
index 1f5f5379..ef6cc400 100644
--- a/src/constants/exploreEndpointsPages.ts
+++ b/src/constants/exploreEndpointsPages.ts
@@ -429,7 +429,35 @@ export const EXPLORE_ENDPOINTS_PAGES_HORIZON: ExploreEndpointsPagesProps = {
         {
           route: Routes.EXPLORE_ENDPOINTS_ORDER_BOOK_DETAILS,
           label: "Details",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/aggregations/order-books/single",
+            docsLabel: "order book",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/order_book{?selling_asset_type,selling_asset_code,selling_asset_issuer,buying_asset_type,buying_asset_code,buying_asset_issuer}",
+            requiredParams: "selling_asset,buying_asset",
+            isStreaming: true,
+            custom: {
+              renderComponents: ["selling_asset", "buying_asset"],
+              paramMapping: {
+                selling_asset_type: "selling_asset.type",
+                selling_asset_code: "selling_asset.code",
+                selling_asset_issuer: "selling_asset.issuer",
+                buying_asset_type: "buying_asset.type",
+                buying_asset_code: "buying_asset.code",
+                buying_asset_issuer: "buying_asset.issuer",
+              },
+              selling_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+              buying_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+            },
+          },
         },
       ],
     },
@@ -461,22 +489,59 @@ export const EXPLORE_ENDPOINTS_PAGES_HORIZON: ExploreEndpointsPagesProps = {
         {
           route: Routes.EXPLORE_ENDPOINTS_PAYMENTS,
           label: "All Payments",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/list-all-payments",
+            docsLabel: "payments",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/payments{?cursor,limit,order,include_failed}",
+            requiredParams: "",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_ACCOUNT,
           label: "Payments for Account",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/get-payments-by-account-id",
+            docsLabel: "payments for account",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/accounts/{account_id}/payments{?cursor,limit,order,include_failed}",
+            requiredParams: "account_id",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_LEDGER,
           label: "Payments for Ledger",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/retrieve-a-ledgers-payments",
+            docsLabel: "payments for ledger",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/ledgers/{ledger}/payments{?cursor,limit,order,include_failed}",
+            requiredParams: "ledger",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_TRANSACTION,
           label: "Payments for Transaction",
-          form: undefined,
+          form: {
+            docsUrl:
+              // TODO: no link in the docs for payments for transaction
+              "https://developers.stellar.org/network/horizon/resources/transactions",
+            docsLabel: "payments for transaction",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/transactions/{transaction}/payments{?cursor,limit,order}",
+            requiredParams: "transaction",
+            isStreaming: true,
+          },
         },
       ],
     },
@@ -487,7 +552,35 @@ export const EXPLORE_ENDPOINTS_PAGES_HORIZON: ExploreEndpointsPagesProps = {
         {
           route: Routes.EXPLORE_ENDPOINTS_TRADE_AGGREGATIONS,
           label: "All Trade Aggregations",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/aggregations/trade-aggregations/list",
+            docsLabel: "trade aggregations",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/trade_aggregations{?base_asset_type,base_asset_code,base_asset_issuer,counter_asset_type,counter_asset_code,counter_asset_issuer,resolution,start_time,end_time,limit,order}",
+            requiredParams: "base_asset,counter_asset,resolution",
+            isStreaming: true,
+            custom: {
+              renderComponents: ["base_asset", "counter_asset"],
+              paramMapping: {
+                base_asset_type: "base_asset.type",
+                base_asset_code: "base_asset.code",
+                base_asset_issuer: "base_asset.issuer",
+                counter_asset_type: "counter_asset.type",
+                counter_asset_code: "counter_asset.code",
+                counter_asset_issuer: "counter_asset.issuer",
+              },
+              base_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+              counter_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+            },
+          },
         },
       ],
     },
@@ -498,22 +591,77 @@ export const EXPLORE_ENDPOINTS_PAGES_HORIZON: ExploreEndpointsPagesProps = {
         {
           route: Routes.EXPLORE_ENDPOINTS_TRADES,
           label: "All Trades",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/get-all-trades",
+            docsLabel: "trades",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/trades{?base_asset_type,base_asset_code,base_asset_issuer,counter_asset_type,counter_asset_code,counter_asset_issuer,offer_id,cursor,limit,order}",
+            requiredParams: "",
+            isStreaming: true,
+            custom: {
+              renderComponents: ["base_asset", "counter_asset"],
+              paramMapping: {
+                base_asset_type: "base_asset.type",
+                base_asset_code: "base_asset.code",
+                base_asset_issuer: "base_asset.issuer",
+                counter_asset_type: "counter_asset.type",
+                counter_asset_code: "counter_asset.code",
+                counter_asset_issuer: "counter_asset.issuer",
+              },
+              base_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+              counter_asset: {
+                assetInput: "alphanumeric",
+                includeNative: true,
+              },
+            },
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRADES_ACCOUNT,
           label: "Trades for Account",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/get-trades-by-account-id",
+            docsLabel: "trades for account",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/accounts/{account_id}/trades{?cursor,limit,order}",
+            requiredParams: "account_id",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRADES_LIQUIDITY_POOL,
           label: "Trades for Liquidity Pool",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/retrieve-related-trades",
+            docsLabel: "trades for liquidity pool",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/liquidity_pools/{liquidity_pool_id}/trades{?cursor,limit,order}",
+            requiredParams: "liquidity_pool_id",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRADES_OFFER,
           label: "Trades for Offer",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/get-trades-by-offer-id",
+            docsLabel: "trades for offer",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/offers/{offer_id}/trades{?cursor,limit,order}",
+            requiredParams: "offer_id",
+            isStreaming: true,
+          },
         },
       ],
     },
@@ -524,32 +672,84 @@ export const EXPLORE_ENDPOINTS_PAGES_HORIZON: ExploreEndpointsPagesProps = {
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS,
           label: "All Transactions",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/transactions",
+            docsLabel: "transactions",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/transactions{?cursor,limit,order,include_failed}",
+            requiredParams: "",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_SINGLE,
           label: "Single Transaction",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/retrieve-a-transaction",
+            docsLabel: "transaction",
+            requestMethod: "GET",
+            endpointUrlTemplate: "/transactions/{transaction}",
+            requiredParams: "transaction",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_POST,
           label: "Post Transaction",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/submit-a-transaction",
+            docsLabel: "post transaction",
+            requestMethod: "POST",
+            endpointUrlTemplate: "/transactions{?tx}",
+            requiredParams: "tx",
+            isStreaming: false,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_ACCOUNT,
           label: "Transactions for Account",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/get-transactions-by-account-id",
+            docsLabel: "transactions for account",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/accounts/{account_id}/transactions{?cursor,limit,order,include_failed}",
+            requiredParams: "account_id",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_LEDGER,
           label: "Transactions for Ledger",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/retrieve-a-ledgers-transactions",
+            docsLabel: "transactions for ledger",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/ledgers/{ledger}/transactions{?cursor,limit,order,include_failed}",
+            requiredParams: "ledger",
+            isStreaming: true,
+          },
         },
         {
           route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_LIQUIDITY_POOL,
           label: "Transactions for Liquidity Pool",
-          form: undefined,
+          form: {
+            docsUrl:
+              "https://developers.stellar.org/network/horizon/resources/lp-retrieve-related-transactions",
+            docsLabel: "transactions for liquidity pool",
+            requestMethod: "GET",
+            endpointUrlTemplate:
+              "/liquidity_pools/{liquidity_pool_id}/transactions{?cursor,limit,order,include_failed}",
+            requiredParams: "liquidity_pool_id",
+            isStreaming: true,
+          },
         },
       ],
     },
diff --git a/src/query/useExploreEndpoint.ts b/src/query/useExploreEndpoint.ts
index adbf77c9..279ffbaa 100644
--- a/src/query/useExploreEndpoint.ts
+++ b/src/query/useExploreEndpoint.ts
@@ -1,10 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
+import { AnyObject } from "@/types/types";
 
-export const useExploreEndpoint = (requestUrl: string) => {
+export const useExploreEndpoint = (
+  requestUrl: string,
+  postData?: AnyObject,
+) => {
   const query = useQuery({
-    queryKey: ["exploreEndpoint", "response"],
+    queryKey: ["exploreEndpoint", "response", postData],
     queryFn: async () => {
-      const endpointResponse = await fetch(requestUrl);
+      const endpointResponse = await fetch(
+        requestUrl,
+        getPostOptions(postData),
+      );
       const endpointResponseJson = await endpointResponse.json();
 
       return {
@@ -17,3 +24,16 @@ export const useExploreEndpoint = (requestUrl: string) => {
 
   return query;
 };
+
+const getPostOptions = (postData: AnyObject | undefined) => {
+  if (postData) {
+    const formData = new FormData();
+    Object.entries(postData).forEach(([key, value]) => {
+      formData.append(key, value);
+    });
+
+    return { method: "POST", body: formData };
+  }
+
+  return undefined;
+};
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index d4a33caf..172eaa9f 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -419,4 +419,10 @@
       cursor: default;
     }
   }
+
+  &__txTextarea {
+    .Textarea textarea {
+      word-break: break-all;
+    }
+  }
 }
diff --git a/src/validate/index.ts b/src/validate/index.ts
index 2912381c..1770efbd 100644
--- a/src/validate/index.ts
+++ b/src/validate/index.ts
@@ -3,6 +3,7 @@ import { assetCode } from "./methods/assetCode";
 import { positiveInt } from "./methods/positiveInt";
 import { publicKey } from "./methods/publicKey";
 import { transactionHash } from "./methods/transactionHash";
+import { xdr } from "./methods/xdr";
 
 export const validate = {
   asset,
@@ -10,4 +11,5 @@ export const validate = {
   positiveInt,
   publicKey,
   transactionHash,
+  xdr,
 };
diff --git a/src/validate/methods/xdr.ts b/src/validate/methods/xdr.ts
new file mode 100644
index 00000000..8391e713
--- /dev/null
+++ b/src/validate/methods/xdr.ts
@@ -0,0 +1,7 @@
+export const xdr = (value: string) => {
+  if (value.match(/^[-A-Za-z0-9+/=]*$/) === null) {
+    return "Input is not valid base64";
+  }
+
+  return false;
+};
diff --git a/yarn.lock b/yarn.lock
index 2d157991..8c3086cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8,9 +8,9 @@
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
 "@babel/runtime@^7.23.2":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  version "7.24.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -53,7 +53,7 @@
   dependencies:
     "@floating-ui/utils" "^0.2.1"
 
-"@floating-ui/dom@^1.5.3":
+"@floating-ui/dom@^1.6.3":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
   integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
@@ -81,9 +81,9 @@
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
-  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
@@ -188,20 +188,20 @@
     playwright "1.42.1"
 
 "@rushstack/eslint-patch@^1.3.3":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.0.tgz#b88671c367284bb50b1cb6a842d7e0d98e9f4e55"
-  integrity sha512-ih6xH1dOGBTP/RNc/QbnVLLa/s80SkXydI7tnyq+a2eIdd7gDsmSpD1Jz7T1oCa+GIsVTyQCR3cW0tlYB97iFg==
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.1.tgz#7ca168b6937818e9a74b47ac4e2112b2e1a024cf"
+  integrity sha512-S3Kq8e7LqxkA9s7HKLqXGTGck1uwis5vAXan3FnU5yw1Ec5hsSGnq4s/UCaSqABPOnOTg7zASLyst7+ohgWexg==
 
-"@stellar/design-system@^2.0.0-beta.8":
-  version "2.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.8.tgz#462759beb8ca1497d44b78043e2cd6a0ef3fbd7a"
-  integrity sha512-ZPn1frWylT7lYYZJK8OtLbsXX2S8I1spyRBWmUrekaPvrDrrpYOUepWj8ZSC5NNWjR8Kbb5QnfV1wc8YYaCQ0A==
+"@stellar/design-system@^2.0.0-beta.9":
+  version "2.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.9.tgz#628f90facd625c3918a83eefd0c8f441cba2399d"
+  integrity sha512-0ZGFN42dMZgli61XEwz5vcQYZFSob6DIXt/RWOYi21Rw7oJGujrK2EXTCOBSQlKxNEcv1uywf2yl/Bz1w9xD3g==
   dependencies:
-    "@floating-ui/dom" "^1.5.3"
-    bignumber.js "^9.1.1"
+    "@floating-ui/dom" "^1.6.3"
+    bignumber.js "^9.1.2"
     lodash "^4.17.21"
     react-copy-to-clipboard "^5.1.0"
-    tslib "^2.5.0"
+    tslib "^2.6.2"
 
 "@stellar/js-xdr@^3.1.1":
   version "3.1.1"
@@ -247,10 +247,10 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/query-core@5.28.9":
-  version "5.28.9"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.28.9.tgz#170a7a8794ab73aeffbaf711ac62126479a5d026"
-  integrity sha512-hNlfCiqZevr3GRVPXS3MhaGW5hjcxvCsIQ4q6ff7EPlvFwYZaS+0d9EIIgofnegDaU2BbCDlyURoYfRl5rmzow==
+"@tanstack/query-core@5.28.13":
+  version "5.28.13"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.28.13.tgz#15c187c23b87a393e91d0fd2ea6dfc22b8a85b75"
+  integrity sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==
 
 "@tanstack/query-devtools@5.28.10":
   version "5.28.10"
@@ -258,18 +258,18 @@
   integrity sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==
 
 "@tanstack/react-query-devtools@^5.28.8":
-  version "5.28.10"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.28.10.tgz#0b968b93e301a696d06dc44198d39aac95e8c5b9"
-  integrity sha512-D+SiHZTWhK2sNgBYj+xIvUOqonsKy74OLU/YHmRB5OZVLLTiekvZd12C3rKlU+WM69jid0hjEjuFqkULOMwc3A==
+  version "5.28.14"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.28.14.tgz#3d5386de4e5c61f2db90b1a12a83561840bc8b6e"
+  integrity sha512-4CrFBI1O5wibV1ZdGAnBMmTuc7SiShhxWubxRMyIloeEioxs3DQkFbouGBea5nexuwIxAkvhUB8khpPnNjhxMw==
   dependencies:
     "@tanstack/query-devtools" "5.28.10"
 
 "@tanstack/react-query@^5.28.8":
-  version "5.28.9"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.28.9.tgz#13c2049daa5db6c3137473e279b209f76d39708e"
-  integrity sha512-vwifBkGXsydsLxFOBMe3+f8kvtDoqDRDwUNjPHVDDt+FoBetCbOWAUHgZn4k+CVeZgLmy7bx6aKeDbe3e8koOQ==
+  version "5.28.14"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.28.14.tgz#9585b6300eb8f167ed374e2748043dc8d6476709"
+  integrity sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==
   dependencies:
-    "@tanstack/query-core" "5.28.9"
+    "@tanstack/query-core" "5.28.13"
 
 "@types/dompurify@^3.0.5":
   version "3.0.5"
@@ -289,9 +289,9 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/node@^20.11.30":
-  version "20.11.30"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.30.tgz#9c33467fc23167a347e73834f788f4b9f399d66f"
-  integrity sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==
+  version "20.12.3"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.3.tgz#d6658c2c7776c1cad93534bb45428195ed840c65"
+  integrity sha512-sD+ia2ubTeWrOu+YMF+MTAB7E+O7qsMqAbMfW7DG3K1URwhZ5hN1pLlRVGbf4wDFzSfikL05M17EyorS86jShw==
   dependencies:
     undici-types "~5.26.4"
 
@@ -308,9 +308,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.2.71":
-  version "18.2.73"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.73.tgz#0579548ad122660d99e00499d22e33b81e73ed94"
-  integrity sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==
+  version "18.2.74"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.74.tgz#2d52eb80e4e7c4ea8812c89181d6d590b53f958c"
+  integrity sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
@@ -675,7 +675,7 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-bignumber.js@^9.1.1, bignumber.js@^9.1.2:
+bignumber.js@^9.1.2:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
   integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
@@ -739,9 +739,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001579:
-  version "1.0.30001600"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079"
-  integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==
+  version "1.0.30001605"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz#ca12d7330dd8bcb784557eb9aa64f0037870d9d6"
+  integrity sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==
 
 chalk@5.3.0:
   version "5.3.0"
@@ -1015,9 +1015,9 @@ entities@^4.2.0, entities@^4.5.0:
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2:
-  version "1.23.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.2.tgz#693312f3940f967b8dd3eebacb590b01712622e0"
-  integrity sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==
+  version "1.23.3"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
+  integrity sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==
   dependencies:
     array-buffer-byte-length "^1.0.1"
     arraybuffer.prototype.slice "^1.0.3"
@@ -1058,11 +1058,11 @@ es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23
     safe-regex-test "^1.0.3"
     string.prototype.trim "^1.2.9"
     string.prototype.trimend "^1.0.8"
-    string.prototype.trimstart "^1.0.7"
+    string.prototype.trimstart "^1.0.8"
     typed-array-buffer "^1.0.2"
     typed-array-byte-length "^1.0.1"
     typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.5"
+    typed-array-length "^1.0.6"
     unbox-primitive "^1.0.2"
     which-typed-array "^1.1.15"
 
@@ -2187,7 +2187,7 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
-minimatch@9.0.3, minimatch@^9.0.1:
+minimatch@9.0.3:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
   integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
@@ -2201,6 +2201,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -2876,7 +2883,7 @@ string.prototype.trimend@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-string.prototype.trimstart@^1.0.7:
+string.prototype.trimstart@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
   integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
@@ -2996,7 +3003,7 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.4.0, tslib@^2.5.0:
+tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -3050,7 +3057,7 @@ typed-array-byte-offset@^1.0.2:
     has-proto "^1.0.3"
     is-typed-array "^1.1.13"
 
-typed-array-length@^1.0.5:
+typed-array-length@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
   integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==