set default peer

ProvableHQ · Nov 9, 2023 · 5069b6d · 5069b6d
1 parent d90c857
commit 5069b6d
Show file tree

Hide file tree

Showing 15 changed files with 85 additions and 16 deletions.
diff --git a/website/src/main.jsx b/website/src/main.jsx
@@ -1,6 +1,6 @@
 import "./App.css";
 import { useEffect, useState } from "react";
-import { App, ConfigProvider, Layout, Menu, Switch, theme } from "antd";
+import {App, Button, ConfigProvider, Input, Layout, Menu, Modal, Switch, theme, Typography} from "antd";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 
 import {
@@ -47,6 +47,8 @@ const menuItems = [
         icon: <SwapOutlined />,
     },
 ];
+
+const DEFAULT_PEER_URL = "https://api.explorer.aleo.org/v1";
 function Main() {
     const [menuIndex, setMenuIndex] = useState("account");
 
@@ -65,6 +67,33 @@ function Main() {
 
     const [darkMode, setDarkMode] = useState(true);
 
+    // Default host modal
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [defaultPeerURL, setdefaultPeerURL] = useState(localStorage.getItem('defaultPeerURL') || DEFAULT_PEER_URL);
+
+    const showModal = () => {
+        setIsModalVisible(true);
+    };
+
+    const handleOk = () => {
+        localStorage.setItem('defaultPeerURL', defaultPeerURL); // Save to localStorage
+        setIsModalVisible(false);
+        navigate(0);
+    };
+
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+
+    const handleChange = (e) => {
+        setdefaultPeerURL(e.target.value);
+    };
+
+    const handleReset = () => {
+        setdefaultPeerURL(DEFAULT_PEER_URL);
+        localStorage.setItem('defaultPeerURL', DEFAULT_PEER_URL); // Reset to default in localStorage
+    };
+
     return (
         <ConfigProvider
             theme={{
@@ -111,6 +140,42 @@ function Main() {
                             checkedChildren="Dark"
                             unCheckedChildren="Light"
                         />
+                        <Button
+                            style={{
+                                marginTop: "24px",
+                                marginLeft: "24px",
+                            }}
+                            type="primary"
+                            onClick={showModal}
+                        >
+                            Default Peer URL
+                        </Button>
+                        <Modal
+                            title="Set Peer URL"
+                            open={isModalVisible}
+                            onOk={handleOk}
+                            onCancel={handleCancel}
+                            footer={[
+                                <Button key="reset" onClick={handleReset}>
+                                    Reset
+                                </Button>,
+                                <Button key="back" onClick={handleCancel}>
+                                    Cancel
+                                </Button>,
+                                <Button key="submit" type="primary" onClick={handleOk}>
+                                    OK
+                                </Button>,
+                            ]}
+                        >
+                            <Typography.Text type="secondary">
+                                Example: http://your.network.peer:3033
+                            </Typography.Text>
+                            <Input
+                                value={defaultPeerURL}
+                                onChange={handleChange}
+                                placeholder="Enter Peer URL"
+                            />
+                        </Modal>
                     </Sider>
                     <Layout>
                         <Content style={{ padding: "50px 50px" }}>

diff --git a/website/src/tabs/develop/Deploy.jsx b/website/src/tabs/develop/Deploy.jsx
@@ -19,7 +19,7 @@ export const Deploy = () => {
 
     const [form] = Form.useForm();
     const [deploymentFeeRecord, setDeploymentFeeRecord] = useState(null);
-    const [deployUrl, setDeployUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [deployUrl, setDeployUrl] = useState(localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1");
     const [deploymentFee, setDeploymentFee] = useState("1");
     const [loading, setLoading] = useState(false);
     const [feeLoading, setFeeLoading] = useState(false);

diff --git a/website/src/tabs/develop/ExecuteLegacy.jsx b/website/src/tabs/develop/ExecuteLegacy.jsx
@@ -19,7 +19,7 @@ import { useAleoWASM } from "../../aleo-wasm-hook";
 
 export const ExecuteLegacy = () => {
     const [executionFeeRecord, setExecutionFeeRecord] = useState(null);
-    const [executeUrl, setExecuteUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [executeUrl, setExecuteUrl] = useState(localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1");
     const [functionID, setFunctionID] = useState(null);
     const [executionFee, setExecutionFee] = useState("1");
     const [inputs, setInputs] = useState(null);

diff --git a/website/src/tabs/develop/Join.jsx b/website/src/tabs/develop/Join.jsx
@@ -6,7 +6,7 @@ export const Join = () => {
     const [joinFeeRecord, setJoinFeeRecord] = useState(null);
     const [recordOne, setRecordOne] = useState(null);
     const [recordTwo, setRecordTwo] = useState(null);
-    const [joinUrl, setJoinUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [joinUrl, setJoinUrl] = useState(localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1");
     const [joinFee, setJoinFee] = useState("1.0");
     const [privateFee, setPrivateFee] = useState(true);
     const [loading, setLoading] = useState(false);

diff --git a/website/src/tabs/develop/Split.jsx b/website/src/tabs/develop/Split.jsx
@@ -4,7 +4,7 @@ import axios from "axios";
 
 export const Split = () => {
     const [amountRecord, setAmountRecord] = useState(null);
-    const [splitUrl, setSplitUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [splitUrl, setSplitUrl] = useState(localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1");
     const [splitAmount, setSplitAmount] = useState("1.0");
     const [loading, setLoading] = useState(false);
     const [privateKey, setPrivateKey] = useState(null);
@@ -18,6 +18,7 @@ export const Split = () => {
             new URL("../../workers/worker.js", import.meta.url),
             { type: "module" },
         );
+
         worker.addEventListener("message", (ev) => {
             if (ev.data.type == "SPLIT_TRANSACTION_COMPLETED") {
                 const transactionId = ev.data.splitTransaction;

diff --git a/website/src/tabs/develop/Transfer.jsx b/website/src/tabs/develop/Transfer.jsx
@@ -6,7 +6,7 @@ import axios from "axios";
 export const Transfer = () => {
     const [transferFeeRecord, setTransferFeeRecord] = useState(null);
     const [amountRecord, setAmountRecord] = useState(null);
-    const [transferUrl, setTransferUrl] = useState("https://api.explorer.aleo.org/v1");
+    const [transferUrl, setTransferUrl] = useState(localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1");
     const [transferAmount, setTransferAmount] = useState("1.0");
     const [transferFee, setTransferFee] = useState("1.0");
     const [privateFee, setPrivateFee] = useState(true);

diff --git a/website/src/tabs/develop/execute/index.jsx b/website/src/tabs/develop/execute/index.jsx
@@ -336,7 +336,7 @@ export const Execute = () => {
                                 <Form.Item
                                     label="Peer URL"
                                     name="peer_url"
-                                    initialValue="https://api.explorer.aleo.org/v1"
+                                    initialValue={localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}
                                     hidden={!getFieldValue("execute_onchain")}
                                 >
                                     <Input />

diff --git a/website/src/tabs/rest/GetBlockByHash.jsx b/website/src/tabs/rest/GetBlockByHash.jsx
@@ -21,7 +21,7 @@ export const GetBlockByHash = () => {
         try {
             if (hash) {
                 axios
-                    .get(`https://api.explorer.aleo.org/v1/testnet3/block/${hash}`)
+                    .get(`${localStorage.getItem('defaultPeerURL') || ""}/testnet3/block/${hash}`)
                     .then((response) => {
                         setBlockByHash(JSON.stringify(response.data, null, 2));
                         setStatus("success");

diff --git a/website/src/tabs/rest/GetBlockByHeight.jsx b/website/src/tabs/rest/GetBlockByHeight.jsx
@@ -21,7 +21,7 @@ export const GetBlockByHeight = () => {
         try {
             if (height) {
                 axios
-                    .get(`https://api.explorer.aleo.org/v1/testnet3/block/${height}`)
+                    .get(`${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/block/${height}`)
                     .then((response) => {
                         setBlockByHeight(
                             JSON.stringify(response.data, null, 2),

diff --git a/website/src/tabs/rest/GetLatestBlock.jsx b/website/src/tabs/rest/GetLatestBlock.jsx
@@ -10,7 +10,7 @@ export const GetLatestBlock = () => {
         setLatestBlock(null);
         try {
             axios
-                .get(`https://api.explorer.aleo.org/v1/testnet3/latest/block`)
+                .get(`${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/latest/block`)
                 .then((response) =>
                     setLatestBlock(JSON.stringify(response.data, null, 2)),
                 );

diff --git a/website/src/tabs/rest/GetLatestBlockHeight.jsx b/website/src/tabs/rest/GetLatestBlockHeight.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Card, Col, Divider, Form, Input, Row } from "antd";
+import {Button, Card, Col, Divider, Form, Input, Row, Typography} from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
 
@@ -10,7 +10,7 @@ export const GetLatestBlockHeight = () => {
         setLatestHeight(null);
         try {
             axios
-                .get(`https://api.explorer.aleo.org/v1/testnet3/latest/height`)
+                .get(`${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/latest/height`)
                 .then((response) =>
                     setLatestHeight(JSON.stringify(response.data, null, 2)),
                 );
@@ -25,6 +25,8 @@ export const GetLatestBlockHeight = () => {
         latestHeight !== null ? latestHeight.toString() : "";
 
     return (
+        <>
+        <Typography type="secondary">Current Peer URL: ${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}</Typography>
         <Card
             title="Get Latest Block Height"
             style={{ width: "100%" }}
@@ -61,5 +63,6 @@ export const GetLatestBlockHeight = () => {
                 </Form>
             ) : null}
         </Card>
+        </>
     );
 };
diff --git a/website/src/tabs/rest/GetMappingNames.jsx b/website/src/tabs/rest/GetMappingNames.jsx
@@ -32,7 +32,7 @@ export const GetMappingNames = () => {
             if (id) {
                 axios
                     .get(
-                        `https://api.explorer.aleo.org/v1/testnet3/program/${id}/mappings`,
+                        `${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/program/${id}/mappings`,
                     )
                     .then((response) => {
                         setStatus("success");

diff --git a/website/src/tabs/rest/GetMappingValue.jsx b/website/src/tabs/rest/GetMappingValue.jsx
@@ -54,7 +54,7 @@ export const GetMappingValue = () => {
             if (programID && mappingName && mappingKey) {
                 axios
                     .get(
-                        `https://api.explorer.aleo.org/v1/testnet3/program/${programID}/mapping/${mappingName}/${mappingKey}`,
+                        `${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/program/${programID}/mapping/${mappingName}/${mappingKey}`,
                     )
                     .then((response) => {
                         if (response.data === null) {

diff --git a/website/src/tabs/rest/GetProgram.jsx b/website/src/tabs/rest/GetProgram.jsx
@@ -31,7 +31,7 @@ export const GetProgram = () => {
         try {
             if (id) {
                 axios
-                    .get(`https://api.explorer.aleo.org/v1/testnet3/program/${id}`)
+                    .get(`${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/program/${id}`)
                     .then((response) => {
                         setStatus("success");
                         setProgram(response.data);

diff --git a/website/src/tabs/rest/GetTransaction.jsx b/website/src/tabs/rest/GetTransaction.jsx
@@ -21,7 +21,7 @@ export const GetTransaction = () => {
         try {
             if (id) {
                 axios
-                    .get(`https://api.explorer.aleo.org/v1/testnet3/transaction/${id}`)
+                    .get(`${localStorage.getItem('defaultPeerURL') || "https://api.explorer.aleo.org/v1"}/testnet3/transaction/${id}`)
                     .then((response) => {
                         setTransaction(JSON.stringify(response.data, null, 2));
                         setStatus("success");