Skip to content

Commit

Permalink
[Endpoints] Saved Endpoints (#892)
Browse files Browse the repository at this point in the history
  • Loading branch information
@quietbits
quietbits authored Jun 28, 2024
1 parent 7e3e82e commit 03b6ae6
Show file tree
Hide file tree
Showing 17 changed files with 595 additions and 117 deletions.
127 changes: 56 additions & 71 deletions src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,12 @@ import {
CopyText,
Icon,
Input,
Link,
Text,
Textarea,
} from "@stellar/design-system";
import { useQueryClient } from "@tanstack/react-query";

import { InfoCards } from "@/components/InfoCards";
import { SdsLink } from "@/components/SdsLink";
import { NextLink } from "@/components/NextLink";
import { formComponentTemplateEndpoints } from "@/components/formComponentTemplateEndpoints";
import { PrettyJson } from "@/components/PrettyJson";
import { InputSideElement } from "@/components/InputSideElement";
Expand All @@ -27,7 +24,7 @@ import { isEmptyObject } from "@/helpers/isEmptyObject";
import { sanitizeArray } from "@/helpers/sanitizeArray";
import { sanitizeObject } from "@/helpers/sanitizeObject";
import { parseJsonString } from "@/helpers/parseJsonString";
import { openUrl } from "@/helpers/openUrl";
import { saveEndpointHorizon } from "@/helpers/saveEndpointHorizon";

import { Routes } from "@/constants/routes";
import { ENDPOINTS_PAGES_HORIZON } from "@/constants/endpointsPages";
Expand All @@ -39,6 +36,9 @@ import {
Network,
} from "@/types/types";

import { EndpointsLandingPage } from "../components/EndpointsLandingPage";
import { SavedEndpointsPage } from "../components/SavedEndpointsPage";

export default function Endpoints() {
const pathname = usePathname();
const currentPage = pathname.split(Routes.ENDPOINTS)?.[1];
Expand All @@ -52,7 +52,7 @@ export default function Endpoints() {
pageData?.requiredParams?.split(",") || [],
);

const { endpoints, network } = useStore();
const { endpoints, network, isDynamicNetworkSelect } = useStore();
const {
params,
currentEndpoint,
Expand Down Expand Up @@ -287,7 +287,7 @@ export default function Endpoints() {

// Clear form and errors if navigating to another endpoint page. We don't
// want to keep previous form values.
if (currentEndpoint && currentEndpoint !== currentPage) {
if (currentEndpoint && ![currentPage, "/saved"].includes(currentEndpoint)) {
resetStates();
}
}, [currentEndpoint, currentPage, resetStates, updateCurrentEndpoint]);
Expand All @@ -305,11 +305,21 @@ export default function Endpoints() {
if (network.id && !endpointNetwork.id) {
updateNetwork(network as Network);
// When network changes, clear saved params and errors.
} else if (network.id && network.id !== endpointNetwork.id) {
} else if (
network.id &&
network.id !== endpointNetwork.id &&
!isDynamicNetworkSelect
) {
resetStates();
updateNetwork(network as Network);
}
}, [endpointNetwork.id, network, resetStates, updateNetwork]);
}, [
endpointNetwork.id,
isDynamicNetworkSelect,
network,
resetStates,
updateNetwork,
]);

// Scroll to response
useEffect(() => {
Expand Down Expand Up @@ -453,6 +463,7 @@ export default function Endpoints() {
variant="text"
placement="left"
data-testid="endpoints-url-method"
addlClassName="Endpoints__urlBar__requestMethod"
>
{pageData.requestMethod}
</InputSideElement>
Expand All @@ -476,6 +487,39 @@ export default function Endpoints() {
type="button"
></Button>
</CopyText>
<Button
size="md"
variant="tertiary"
icon={<Icon.Save01 />}
type="button"
onClick={() => {
saveEndpointHorizon({
url: requestUrl,
method: pageData.requestMethod,
timestamp: Date.now(),
route: pathname,
params,
network: {
id: network.id,
label: network.label,
// Mainnet with custom RPC URL
...(network.id === "mainnet" && network.rpcUrl
? {
rpcUrl: network.rpcUrl,
}
: {}),
// Custom network
...(network.id === "custom"
? {
horizonUrl: network.horizonUrl,
rpcUrl: network.rpcUrl,
passphrase: network.passphrase,
}
: {}),
},
});
}}
></Button>
</div>
</>
);
Expand Down Expand Up @@ -616,6 +660,10 @@ export default function Endpoints() {
return <EndpointsLandingPage />;
}

if (pathname === Routes.ENDPOINTS_SAVED) {
return <SavedEndpointsPage />;
}

if (!pageData) {
return <>{`${page?.label} page is coming soon.`}</>;
}
Expand Down Expand Up @@ -708,66 +756,3 @@ export default function Endpoints() {
</>
);
}

const EndpointsLandingPage = () => {
const infoCards = [
{
id: "stellar-rpc",
title: "Stellar RPC Endpoints",
description: "Learn about the RPC endpoints in our Developer Docs.",
buttonLabel: "See docs",
buttonIcon: <Icon.LinkExternal01 />,
buttonAction: () =>
openUrl("https://developers.stellar.org/network/soroban-rpc/methods"),
},
{
id: "horizon",
title: "Horizon Endpoints",
description: "Learn about the Horizon endpoints in our Developer Docs.",
buttonLabel: "See docs",
buttonIcon: <Icon.LinkExternal01 />,
buttonAction: () =>
openUrl("https://developers.stellar.org/network/horizon/resources"),
},
];

return (
<>
<Card>
<div className="CardText">
<Text size="lg" as="h1" weight="medium">
Endpoints
</Text>

<Text size="sm" as="p">
The Stellar Laboratory is a set of tools that enables people to try
out and learn about the Stellar network. The Laboratory can{" "}
<NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
build transactions
</NextLink>
,{" "}
<NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
sign them
</NextLink>
, and{" "}
<NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
submit them to the network
</NextLink>
. In this section of the Laboratory, you can explore the various
endpoints from the RPC and Horizon, make requests to these
endpoints, and save them for future use.
</Text>

<Text size="sm" as="p">
For Stellar docs, take a look at the{" "}
<Link href="https://developers.stellar.org/">
Stellar developers site
</Link>
.
</Text>
</div>
</Card>
<InfoCards infoCards={infoCards} />
</>
);
};
68 changes: 68 additions & 0 deletions src/app/(sidebar)/endpoints/components/EndpointsLandingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { Icon, Card, Text, Link } from "@stellar/design-system";
import { NextLink } from "@/components/NextLink";
import { Routes } from "@/constants/routes";
import { InfoCards } from "@/components/InfoCards";
import { openUrl } from "@/helpers/openUrl";

export const EndpointsLandingPage = () => {
const infoCards = [
{
id: "stellar-rpc",
title: "Stellar RPC Endpoints",
description: "Learn about the RPC endpoints in our Developer Docs.",
buttonLabel: "See docs",
buttonIcon: <Icon.LinkExternal01 />,
buttonAction: () =>
openUrl("https://developers.stellar.org/network/soroban-rpc/methods"),
},
{
id: "horizon",
title: "Horizon Endpoints",
description: "Learn about the Horizon endpoints in our Developer Docs.",
buttonLabel: "See docs",
buttonIcon: <Icon.LinkExternal01 />,
buttonAction: () =>
openUrl("https://developers.stellar.org/network/horizon/resources"),
},
];

return (
<>
<Card>
<div className="CardText">
<Text size="lg" as="h1" weight="medium">
Endpoints
</Text>

<Text size="sm" as="p">
The Stellar Laboratory is a set of tools that enables people to try
out and learn about the Stellar network. The Laboratory can{" "}
<NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
build transactions
</NextLink>
,{" "}
<NextLink href={Routes.SIGN_TRANSACTION} sds-variant="primary">
sign them
</NextLink>
, and{" "}
<NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
submit them to the network
</NextLink>
. In this section of the Laboratory, you can explore the various
endpoints from the RPC and Horizon, make requests to these
endpoints, and save them for future use.
</Text>

<Text size="sm" as="p">
For Stellar docs, take a look at the{" "}
<Link href="https://developers.stellar.org/">
Stellar developers site
</Link>
.
</Text>
</div>
</Card>
<InfoCards infoCards={infoCards} />
</>
);
};
Loading

0 comments on commit 03b6ae6

Please sign in to comment.