add copy button for the json payload for RPC (#1141)

will add a component in the next pr
stellar · Nov 8, 2024 · 85b9df0 · 85b9df0
1 parent a775d84
commit 85b9df0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
@@ -610,9 +610,27 @@ export default function Endpoints() {
 
     if (renderedProps) {
       return (
-        <div className="Endpoints__txTextarea">
-          <PrettyJsonTextarea json={renderedProps} label="Payload" />
-        </div>
+        <>
+          <div className="Endpoints__txTextarea">
+            <PrettyJsonTextarea json={renderedProps} label="Payload" />
+          </div>
+          <Box gap="md" direction="row" justify="end">
+            <CopyText textToCopy={stringify(renderedProps, null, 2) || ""}>
+              <Button
+                size="md"
+                variant="tertiary"
+                icon={<Icon.Copy01 />}
+                iconPosition="left"
+                // needed this to prevent the form from submitting
+                onClick={(e) => {
+                  e.preventDefault();
+                }}
+              >
+                Copy JSON
+              </Button>
+            </CopyText>
+          </Box>
+        </>
       );
     }
     return null;

diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx
@@ -5,6 +5,7 @@ import {
   Badge,
   Button,
   Card,
+  CopyText,
   Icon,
   Input,
   Modal,
@@ -24,6 +25,7 @@ import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEn
 import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods";
 import { arrayItem } from "@/helpers/arrayItem";
 import { formatTimestamp } from "@/helpers/formatTimestamp";
+import { stringify } from "lossless-json";
 import { useStore } from "@/store/useStore";
 import {
   Network,
@@ -316,9 +318,23 @@ export const SavedEndpointsPage = () => {
                 </Box>
               </Box>
               {expandedPayloadIndex[idx] ? (
-                <div className="Endpoints__txTextarea">
-                  <PrettyJsonTextarea json={e.payload} label="Payload" />
-                </div>
+                <>
+                  <div className="Endpoints__txTextarea">
+                    <PrettyJsonTextarea json={e.payload} label="Payload" />
+                  </div>
+                  <Box gap="md" direction="row" justify="end">
+                    <CopyText textToCopy={stringify(e.payload, null, 2) || ""}>
+                      <Button
+                        size="md"
+                        variant="tertiary"
+                        icon={<Icon.Copy01 />}
+                        iconPosition="left"
+                      >
+                        Copy JSON
+                      </Button>
+                    </CopyText>
+                  </Box>
+                </>
               ) : (
                 <></>
               )}