Skip to content

Commit

Permalink
Add browserify
Browse files Browse the repository at this point in the history
  • Loading branch information
@vivekjain23
vivekjain23 committed Nov 12, 2024
1 parent 19adb21 commit c5f6720
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 117 deletions.
83 changes: 41 additions & 42 deletions docs/site/src/components/API/api-ref/networkselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,56 @@
// SPDX-License-Identifier: Apache-2.0

import React, { useState, useEffect } from "react";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
import BrowserOnly from "@docusaurus/BrowserOnly";
import { Select, MenuItem, FormControl, InputLabel } from "@mui/material";
import { StyledEngineProvider } from "@mui/material/styles";

const NETWORKS = ["Devnet", "Testnet", "Mainnet"];

const NetworkSelect = () => {
const [selection, setSelection] = useState(() => {
if (ExecutionEnvironment.canUseDOM) {
const network = localStorage.getItem("RPC");
if (network === null) {
return "mainnet";
}
return localStorage.getItem("RPC");
} else {
return "mainnet";
}
});
return (
<BrowserOnly fallback={<div>Loading...</div>}>
{() => {
const [selection, setSelection] = useState(() => {
const network = localStorage.getItem("RPC");
return network !== null ? network : "mainnet";
});

useEffect(() => {
localStorage.setItem("RPC", selection);
window.dispatchEvent(new Event("storage"));
}, [selection]);
useEffect(() => {
localStorage.setItem("RPC", selection);
window.dispatchEvent(new Event("storage"));
}, [selection]);

const handleChange = (e) => {
setSelection(e.target.value);
};
const handleChange = (e) => {
setSelection(e.target.value);
};

return (
<StyledEngineProvider injectFirst>
<div className="w-11/12 pb-3">
<FormControl fullWidth>
<InputLabel
id="network"
className="dark:text-white"
>{`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}</InputLabel>
<Select
label-id="network"
id="network-select"
value={selection}
label={`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}
onChange={handleChange}
className="dark:text-white dark:bg-iota-ghost-dark"
>
<MenuItem value="devnet">{NETWORKS[0]}</MenuItem>
<MenuItem value="testnet">{NETWORKS[1]}</MenuItem>
<MenuItem value="mainnet">{NETWORKS[2]}</MenuItem>
</Select>
</FormControl>
</div>
</StyledEngineProvider>
return (
<StyledEngineProvider injectFirst>
<div className="w-11/12 pb-3">
<FormControl fullWidth>
<InputLabel
id="network"
className="dark:text-white"
>{`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}</InputLabel>
<Select
label-id="network"
id="network-select"
value={selection}
label={`RPC: https://fullnode.${selection.toLowerCase()}.iota.io:443`}
onChange={handleChange}
className="dark:text-white dark:bg-iota-ghost-dark"
>
<MenuItem value="devnet">{NETWORKS[0]}</MenuItem>
<MenuItem value="testnet">{NETWORKS[1]}</MenuItem>
<MenuItem value="mainnet">{NETWORKS[2]}</MenuItem>
</Select>
</FormControl>
</div>
</StyledEngineProvider>
);
}}
</BrowserOnly>
);
};

Expand Down
147 changes: 72 additions & 75 deletions docs/site/src/components/API/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
// SPDX-License-Identifier: Apache-2.0

import React, { useState, useEffect } from "react";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
import BrowserOnly from "@docusaurus/BrowserOnly";
import Heading from "@theme/Heading";
import RefNav from "./api-ref/refnav";
import Methods from "./api-ref/method";

import ScrollSpy from "react-ui-scrollspy";

// TODO: Once the repo is public, we can use the old imports again and reactivate the ../../utils/getopenrpcspecs.js script
Expand All @@ -20,89 +19,87 @@ export function getRef(url) {
}

const Rpc = () => {
const [openrpc, setOpenRpc] = useState(() => {
if (ExecutionEnvironment.canUseDOM) {
const network = localStorage.getItem("RPC");
switch (network) {
case "mainnet":
return openrpc_mainnet;
case "testnet":
return openrpc_testnet;
case "devnet":
return openrpc_devnet;
default:
return openrpc_mainnet;
}
} else {
return openrpc_mainnet;
}
});
const [openDropdown, setOpenDropdown] = useState(null);
return (
<BrowserOnly fallback={<p>Loading...</p>}>
{() => {
const [openrpc, setOpenRpc] = useState(() => {
const network = localStorage.getItem("RPC");
switch (network) {
case "mainnet":
return openrpc_mainnet;
case "testnet":
return openrpc_testnet;
case "devnet":
return openrpc_devnet;
default:
return openrpc_mainnet;
}
});

useEffect(() => {
const rpcswitch = () => {
if (localStorage.getItem("RPC")) {
switch (localStorage.getItem("RPC")) {
case "mainnet":
setOpenRpc(openrpc_mainnet);
break;
case "testnet":
setOpenRpc(openrpc_testnet);
break;
case "devnet":
setOpenRpc(openrpc_devnet);
break;
default:
setOpenRpc(openrpc_mainnet);
}
} else {
setOpenRpc(openrpc_mainnet);
}
};
const [openDropdown, setOpenDropdown] = useState(null);

window.addEventListener("storage", rpcswitch);
useEffect(() => {
const rpcswitch = () => {
const network = localStorage.getItem("RPC");
switch (network) {
case "mainnet":
setOpenRpc(openrpc_mainnet);
break;
case "testnet":
setOpenRpc(openrpc_testnet);
break;
case "devnet":
setOpenRpc(openrpc_devnet);
break;
default:
setOpenRpc(openrpc_mainnet);
}
};

return () => {
window.removeEventListener("storage", rpcswitch);
};
}, [openrpc]);
window.addEventListener("storage", rpcswitch);
return () => {
window.removeEventListener("storage", rpcswitch);
};
}, []);

const apis = [
...new Set(openrpc["methods"].map((api) => api.tags[0].name)),
].sort();
const schemas = openrpc.components.schemas;
const apis = [
...new Set(openrpc["methods"].map((api) => api.tags[0].name)),
].sort();
const schemas = openrpc.components.schemas;

if (!openrpc) {
return <p>Open RPC file not found.</p>;
}
if (!openrpc) {
return <p>Open RPC file not found.</p>;
}

let ids = [];
openrpc["methods"].map((method) => {
ids.push(method.name.replaceAll(/\s/g, "-").toLowerCase());
});
let ids = openrpc["methods"].map((method) =>
method.name.replaceAll(/\s/g, "-").toLowerCase()
);

return (
<div className="mx-4 flex flex-row">
<div className="pt-12 w-[290px] mb-24 flex-none max-h-screen overflow-y-auto sticky top-12" style={!openDropdown ? {borderRight:'1px solid #444950'}:{}}>
<RefNav json={openrpc} apis={apis} openDropdown={openDropdown} setOpenDropdown={setOpenDropdown}/>
</div>
return (
<div className="mx-4 flex flex-row">
<div className="pt-12 w-[290px] mb-24 flex-none max-h-screen overflow-y-auto sticky top-12" style={!openDropdown ? { borderRight: '1px solid #444950' } : {}}>
<RefNav json={openrpc} apis={apis} openDropdown={openDropdown} setOpenDropdown={setOpenDropdown} />
</div>

<main className="flex-grow w-3/4">
<div className="mx-8">
<div className="">
<Heading as="h1" className=" w-full py-4 top-14">
IOTA JSON-RPC Reference - Version: {openrpc.info.version}
</Heading>
<ScrollSpy>
<div className="">
<p>{openrpc.info.description}</p>
<Methods json={openrpc} apis={apis} schemas={schemas} />
<main className="flex-grow w-3/4">
<div className="mx-8">
<div className="">
<Heading as="h1" className=" w-full py-4 top-14">
IOTA JSON-RPC Reference - Version: {openrpc.info.version}
</Heading>
<ScrollSpy>
<div className="">
<p>{openrpc.info.description}</p>
<Methods json={openrpc} apis={apis} schemas={schemas} />
</div>
</ScrollSpy>
</div>
</div>
</ScrollSpy>
</main>
</div>
</div>
</main>
</div>
);
}}
</BrowserOnly>
);
};

Expand Down

0 comments on commit c5f6720

Please sign in to comment.