Skip to content

Commit 72739dc

Browse files
quietbitsquietbits
authored
Saved Requests: add name field (#1175)
* Refactor save modal to a generic component * Saved request name
1 parent 2268150 commit 72739dc

File tree

10 files changed

+286
-320
lines changed

10 files changed

+286
-320
lines changed

‎src/app/(sidebar)/account/create/page.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,17 @@ import { useQueryClient } from "@tanstack/react-query";
1111
import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
1212
import { useNetworkChanged } from "@/hooks/useNetworkChanged";
1313
import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
14+
import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
1415

1516
import { GenerateKeypair } from "@/components/GenerateKeypair";
1617
import { ExpandBox } from "@/components/ExpandBox";
1718
import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
1819
import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
1920
import { Box } from "@/components/layout/Box";
20-
import { SaveKeypairModal } from "@/components/SaveKeypairModal";
21+
import { PageCard } from "@/components/layout/PageCard";
22+
import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
2123

2224
import "../styles.scss";
23-
import { PageCard } from "@/components/layout/PageCard";
2425

2526
export default function CreateAccount() {
2627
const { account, network } = useStore();
@@ -176,14 +177,21 @@ export default function CreateAccount() {
176177
}}
177178
/>
178179

179-
<SaveKeypairModal
180+
<SaveToLocalStorageModal
180181
type="save"
182+
itemTitle="Keypair"
183+
itemProps={{
184+
publicKey: account.publicKey,
185+
secretKey: secretKey,
186+
}}
187+
allSavedItems={localStorageSavedKeypairs.get()}
181188
isVisible={isSaveModalVisible}
182189
onClose={() => {
183190
setIsSaveModalVisible(false);
184191
}}
185-
publicKey={account.publicKey!}
186-
secretKey={secretKey}
192+
onUpdate={(updatedItems) => {
193+
localStorageSavedKeypairs.set(updatedItems);
194+
}}
187195
/>
188196
</div>
189197
);

‎src/app/(sidebar)/account/saved/page.tsx

+9-4
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import {
1313

1414
import { Box } from "@/components/layout/Box";
1515
import { InputSideElement } from "@/components/InputSideElement";
16-
import { SaveKeypairModal } from "@/components/SaveKeypairModal";
1716
import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete";
17+
import { PageCard } from "@/components/layout/PageCard";
18+
import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
1819

1920
import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
2021
import { arrayItem } from "@/helpers/arrayItem";
@@ -27,7 +28,6 @@ import { useFriendBot } from "@/query/useFriendBot";
2728
import { useAccountInfo } from "@/query/useAccountInfo";
2829

2930
import { NetworkType, SavedKeypair } from "@/types/types";
30-
import { PageCard } from "@/components/layout/PageCard";
3131

3232
export default function SavedKeypairs() {
3333
const { network, selectNetwork, updateIsDynamicNetworkSelect } = useStore();
@@ -177,8 +177,11 @@ export default function SavedKeypairs() {
177177

178178
<>{renderOtherNetworkMessage()}</>
179179

180-
<SaveKeypairModal
180+
<SaveToLocalStorageModal
181181
type="editName"
182+
itemTitle="Keypair"
183+
itemTimestamp={currentKeypairTimestamp}
184+
allSavedItems={localStorageSavedKeypairs.get()}
182185
isVisible={currentKeypairTimestamp !== undefined}
183186
onClose={(isUpdate?: boolean) => {
184187
setCurrentKeypairTimestamp(undefined);
@@ -187,7 +190,9 @@ export default function SavedKeypairs() {
187190
updateSavedKeypairs();
188191
}
189192
}}
190-
keypairTimestamp={currentKeypairTimestamp}
193+
onUpdate={(updatedItems) => {
194+
localStorageSavedKeypairs.set(updatedItems);
195+
}}
191196
/>
192197
</Box>
193198
);

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

+38-31
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,15 @@ import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea";
2323
import { ShareUrlButton } from "@/components/ShareUrlButton";
2424
import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
2525
import { PageCard } from "@/components/layout/PageCard";
26+
import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
2627

2728
import { useStore } from "@/store/useStore";
2829
import { isEmptyObject } from "@/helpers/isEmptyObject";
2930
import { sanitizeArray } from "@/helpers/sanitizeArray";
3031
import { sanitizeObject } from "@/helpers/sanitizeObject";
3132
import { parseJsonString } from "@/helpers/parseJsonString";
32-
import { getSaveItemNetwork } from "@/helpers/getSaveItemNetwork";
3333
import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon";
3434
import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods";
35-
import { arrayItem } from "@/helpers/arrayItem";
3635
import { delayedAction } from "@/helpers/delayedAction";
3736
import { buildEndpointHref } from "@/helpers/buildEndpointHref";
3837
import { shareableUrl } from "@/helpers/shareableUrl";
@@ -51,6 +50,8 @@ import {
5150
AssetObjectValue,
5251
Network,
5352
FiltersObject,
53+
SavedRpcMethod,
54+
SavedEndpointHorizon,
5455
} from "@/types/types";
5556

5657
import { EndpointsLandingPage } from "../components/EndpointsLandingPage";
@@ -138,6 +139,7 @@ export default function Endpoints() {
138139
const [urlPath, setUrlPath] = useState("");
139140
const [urlPathParams, setUrlPathparams] = useState("");
140141
const [urlParams, setUrlParams] = useState("");
142+
const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
141143

142144
const isTransactionPost = () => {
143145
return [
@@ -678,35 +680,7 @@ export default function Endpoints() {
678680
icon={<Icon.Save01 />}
679681
type="button"
680682
onClick={() => {
681-
if (isRpcEndpoint) {
682-
const currentSaved = localStorageSavedRpcMethods.get();
683-
localStorageSavedRpcMethods.set(
684-
arrayItem.add(currentSaved, {
685-
url: requestUrl,
686-
method: pageData.requestMethod,
687-
rpcMethod: pageData.rpcMethod,
688-
timestamp: Date.now(),
689-
route: pathname,
690-
params,
691-
network: getSaveItemNetwork(network),
692-
shareableUrl: shareableUrl("requests"),
693-
payload: getPostPayload(),
694-
}),
695-
);
696-
} else {
697-
const currentSaved = localStorageSavedEndpointsHorizon.get();
698-
localStorageSavedEndpointsHorizon.set(
699-
arrayItem.add(currentSaved, {
700-
url: requestUrl,
701-
method: pageData.requestMethod,
702-
timestamp: Date.now(),
703-
route: pathname,
704-
params,
705-
network: getSaveItemNetwork(network),
706-
shareableUrl: shareableUrl("requests"),
707-
}),
708-
);
709-
}
683+
setIsSaveModalVisible(true);
710684
}}
711685
showActionTooltip
712686
actionTooltipText="Saved"
@@ -1031,6 +1005,39 @@ export default function Endpoints() {
10311005
<Alert variant="primary" placement="inline">
10321006
{renderInfoMessage()}
10331007
</Alert>
1008+
1009+
<SaveToLocalStorageModal
1010+
type="save"
1011+
itemTitle={isRpcEndpoint ? "RPC Method" : "Horizon Endpoint"}
1012+
itemProps={{
1013+
url: requestUrl,
1014+
method: pageData.requestMethod,
1015+
route: pathname,
1016+
params,
1017+
shareableUrl: shareableUrl("requests"),
1018+
...(isRpcEndpoint
1019+
? { payload: getPostPayload(), rpcMethod: pageData.rpcMethod }
1020+
: {}),
1021+
}}
1022+
allSavedItems={
1023+
isRpcEndpoint
1024+
? localStorageSavedRpcMethods.get()
1025+
: localStorageSavedEndpointsHorizon.get()
1026+
}
1027+
isVisible={isSaveModalVisible}
1028+
onClose={() => {
1029+
setIsSaveModalVisible(false);
1030+
}}
1031+
onUpdate={(updatedItems) => {
1032+
if (isRpcEndpoint) {
1033+
localStorageSavedRpcMethods.set(updatedItems as SavedRpcMethod[]);
1034+
} else {
1035+
localStorageSavedEndpointsHorizon.set(
1036+
updatedItems as SavedEndpointHorizon[],
1037+
);
1038+
}
1039+
}}
1040+
/>
10341041
</>
10351042
);
10361043
}

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

+92-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useRouter } from "next/navigation";
2-
import { useEffect, useState } from "react";
2+
import { useCallback, useEffect, useState } from "react";
33
import {
44
Alert,
55
Badge,
@@ -20,6 +20,7 @@ import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea";
2020
import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete";
2121
import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
2222
import { PageCard } from "@/components/layout/PageCard";
23+
import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
2324

2425
import { Routes } from "@/constants/routes";
2526
import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon";
@@ -54,18 +55,34 @@ export const SavedEndpointsPage = () => {
5455
number | undefined
5556
>();
5657

57-
useEffect(() => {
58+
const [currentRequestTimestamp, setCurrentRequestTimestamp] = useState<
59+
number | undefined
60+
>();
61+
62+
const isRpcTab = saved.activeTab === "rpc";
63+
64+
const updateSavedHorizonEndpoints = useCallback(() => {
5865
const horizonItems = localStorageSavedEndpointsHorizon
5966
.get()
6067
.filter((h) => h.network.id === network.id);
68+
setSavedEndpointsHorizon(horizonItems);
69+
}, [network.id]);
70+
71+
const updateSavedRpcRequests = useCallback(() => {
6172
const rpcItems = localStorageSavedRpcMethods
6273
.get()
6374
.filter((r) => r.network.id === network.id);
64-
65-
setSavedEndpointsHorizon(horizonItems);
6675
setSavedRpcMethods(rpcItems);
6776
}, [network.id]);
6877

78+
useEffect(() => {
79+
updateSavedHorizonEndpoints();
80+
}, [updateSavedHorizonEndpoints]);
81+
82+
useEffect(() => {
83+
updateSavedRpcRequests();
84+
}, [updateSavedRpcRequests]);
85+
6986
useEffect(() => {
7087
const mappedRpcIndex = savedRpcMethods.reduce(
7188
(acc, _, index) => {
@@ -147,6 +164,24 @@ export const SavedEndpointsPage = () => {
147164
key={`horizon-${e.timestamp}`}
148165
addlClassName="PageBody__content"
149166
>
167+
<Input
168+
id={`saved-horizon-${e.timestamp}`}
169+
fieldSize="md"
170+
value={e.name}
171+
readOnly
172+
placeholder="Click Edit to add Horizon Endpoint name"
173+
rightElement={
174+
<InputSideElement
175+
variant="button"
176+
placement="right"
177+
onClick={() => {
178+
setCurrentRequestTimestamp(e.timestamp);
179+
}}
180+
icon={<Icon.Edit05 />}
181+
/>
182+
}
183+
/>
184+
150185
<div className="Endpoints__urlBar">
151186
<Input
152187
id={`endpoint-url-${e.timestamp}`}
@@ -236,6 +271,25 @@ export const SavedEndpointsPage = () => {
236271
{e.rpcMethod}
237272
</Badge>
238273
</Box>
274+
275+
<Input
276+
id={`saved-rpc-${e.timestamp}`}
277+
fieldSize="md"
278+
value={e.name}
279+
readOnly
280+
placeholder="Click Edit to add RPC Request name"
281+
rightElement={
282+
<InputSideElement
283+
variant="button"
284+
placement="right"
285+
onClick={() => {
286+
setCurrentRequestTimestamp(e.timestamp);
287+
}}
288+
icon={<Icon.Edit05 />}
289+
/>
290+
}
291+
/>
292+
239293
<div className="Endpoints__urlBar">
240294
<Input
241295
id={`endpoint-url-${e.timestamp}`}
@@ -347,13 +401,12 @@ export const SavedEndpointsPage = () => {
347401
tab1={{
348402
id: "rpc",
349403
label: "RPC Methods",
350-
content: saved.activeTab === "rpc" ? <RpcEndpoints /> : null,
404+
content: isRpcTab ? <RpcEndpoints /> : null,
351405
}}
352406
tab2={{
353407
id: "horizon",
354408
label: "Horizon Endpoints",
355-
content:
356-
saved.activeTab === "horizon" ? <HorizonEndpoints /> : null,
409+
content: !isRpcTab ? <HorizonEndpoints /> : null,
357410
}}
358411
activeTabId={saved.activeTab}
359412
onTabChange={(id) => {
@@ -411,6 +464,38 @@ export const SavedEndpointsPage = () => {
411464
</Button>
412465
</Modal.Footer>
413466
</Modal>
467+
468+
<SaveToLocalStorageModal
469+
type="editName"
470+
itemTitle={isRpcTab ? "RPC Method" : "Horizon Endpoint"}
471+
itemTimestamp={currentRequestTimestamp}
472+
allSavedItems={
473+
isRpcTab
474+
? localStorageSavedRpcMethods.get()
475+
: localStorageSavedEndpointsHorizon.get()
476+
}
477+
isVisible={currentRequestTimestamp !== undefined}
478+
onClose={(isUpdate?: boolean) => {
479+
setCurrentRequestTimestamp(undefined);
480+
481+
if (isUpdate) {
482+
if (isRpcTab) {
483+
updateSavedRpcRequests();
484+
} else {
485+
updateSavedHorizonEndpoints();
486+
}
487+
}
488+
}}
489+
onUpdate={(updatedItems) => {
490+
if (isRpcTab) {
491+
localStorageSavedRpcMethods.set(updatedItems as SavedRpcMethod[]);
492+
} else {
493+
localStorageSavedEndpointsHorizon.set(
494+
updatedItems as SavedEndpointHorizon[],
495+
);
496+
}
497+
}}
498+
/>
414499
</Box>
415500
);
416501
};

0 commit comments

Comments
 (0)