Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show a message on top of RPC pages when the RPC URL is not input #1014

Merged
merged 3 commits into from
Sep 12, 2024
Merged

Show a message on top of RPC pages when the RPC URL is not input #1014

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e21ecf0
display an error message when there is no rpc url set
jeesunikim Sep 11, 2024
3027184
Use the updated SDS library
Sep 12, 2024
fac68cb
Merge branch 'master' into display-message-rpc
jeesunikim Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import {
Alert,
Banner,
Button,
Card,
CopyText,
Expand Down Expand Up @@ -541,7 +542,13 @@ export default function Endpoints() {
return `${baseUrl}${searchParamString ? `?${searchParamString}` : ""}`;
// Not including RegEx const
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [endpointNetwork.horizonUrl, params, urlParams, urlPath]);
}, [
endpointNetwork.horizonUrl,
endpointNetwork.rpcUrl,
params,
urlParams,
urlPath,
]);

useEffect(() => {
setRequestUrl(buildUrl());
Expand Down Expand Up @@ -631,6 +638,7 @@ export default function Endpoints() {
</InputSideElement>
}
/>

<Button
size="md"
variant="secondary"
Expand Down Expand Up @@ -902,6 +910,14 @@ export default function Endpoints() {
<Card>
<form className="PageBody" onSubmit={handleSubmit}>
{renderEndpointUrl()}

{/* display a missing request url banner if requestUrl is empty */}
{!requestUrl ? (
<Banner icon={<Icon.AlertTriangle />} variant="warning">
Set a {endpointNetwork.label} RPC URL in order to submit
</Banner>
jeesunikim marked this conversation as resolved.
Show resolved Hide resolved
) : null}

{renderFields()}
</form>
</Card>
Expand Down
7 changes: 7 additions & 0 deletions src/components/NetworkSelector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import "./styles.scss";

export const NetworkSelector = () => {
const {
endpoints,
network,
isDynamicNetworkSelect,
selectNetwork,
Expand All @@ -28,6 +29,8 @@ export const NetworkSelector = () => {
const [isDropdownActive, setIsDropdownActive] = useState(false);
const [isDropdownVisible, setIsDropdownVisible] = useState(false);

const { updateNetwork } = endpoints;

const initialCustomState = {
horizonUrl: network.id === "custom" ? network.horizonUrl : "",
rpcUrl: network.id === "custom" ? network.rpcUrl : "",
Expand Down Expand Up @@ -194,6 +197,10 @@ export const NetworkSelector = () => {
const latestData = getData();

selectNetwork(latestData);

// also update the network setting for endpoints
updateNetwork(latestData);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added this to update its global endpoints network setting so that users would see the change right away vs. refresh the page to see the updated endpoint


setCustomNetwork(
networkData.id === "custom" ? customNetwork : initialCustomState,
);
Expand Down
9 changes: 9 additions & 0 deletions src/styles/globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,15 @@
flex-direction: column;
gap: pxToRem(16px);

.Banner--warning {
padding: pxToRem(6px) pxToRem(10px);

.Banner__message {
max-width: 100%;
text-align: left;
}
}

&__title {
display: flex;
align-items: center;
Expand Down