From cce80435b4c037a9f60aafdfee44b7cc660ec86b Mon Sep 17 00:00:00 2001 From: Clemens Ley Date: Thu, 1 Aug 2024 19:04:54 -0500 Subject: [PATCH 1/6] Apps: start to simplify the configuration --- packages/components/built/Auth.d.ts | 10 +++--- packages/components/built/Auth.js | 37 +++++++++----------- packages/components/src/Auth.tsx | 38 ++++++++------------- packages/explorer/.env.example | 6 +--- packages/explorer/src/components/Navbar.tsx | 2 +- packages/wallet/.env.example | 11 +++--- packages/wallet/src/components/Sidebar.tsx | 6 ++-- 7 files changed, 46 insertions(+), 64 deletions(-) diff --git a/packages/components/built/Auth.d.ts b/packages/components/built/Auth.d.ts index 530919328..2986ba4d0 100644 --- a/packages/components/built/Auth.d.ts +++ b/packages/components/built/Auth.d.ts @@ -8,13 +8,13 @@ declare function getBip44Path({ purpose, coinType, account }?: { coinType?: number | undefined; account?: number | undefined; }): string; -declare function getUrl(chain: Chain, network: Network): string; -declare function defaultConfiguration(): { +declare function getUrl(): string; +declare function loggedOutConfiguration(): { chain: Chain; network: Network; url: string; }; -declare function browserConfiguration(): { +declare function loggedInConfiguration(): { mnemonic: string | null; chain: Chain; network: Network; @@ -30,8 +30,8 @@ export declare const Auth: { getCoinType: typeof getCoinType; getBip44Path: typeof getBip44Path; getUrl: typeof getUrl; - defaultConfiguration: typeof defaultConfiguration; - browserConfiguration: typeof browserConfiguration; + defaultConfiguration: typeof loggedOutConfiguration; + browserConfiguration: typeof loggedInConfiguration; getComputer: typeof getComputer; LoginForm: typeof LoginForm; LoginModal: typeof LoginModal; diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js index d8edf91bf..b0261db68 100644 --- a/packages/components/built/Auth.js +++ b/packages/components/built/Auth.js @@ -56,20 +56,17 @@ function getEnvVariable(name) { else return res; } -function getUrl(chain, network) { - return getEnvVariable("REACT_APP_".concat(chain.toUpperCase(), "_").concat(network.toUpperCase(), "_URL")); -} -function defaultConfiguration() { - var chain = (localStorage.getItem("CHAIN") || - getEnvVariable("REACT_APP_CHAIN") || - "LTC"); - var network = (localStorage.getItem("NETWORK") || - getEnvVariable("REACT_APP_NETWORK") || - "regtest"); - var url = getUrl(chain, network); - return { chain: chain, network: network, url: url }; -} -function browserConfiguration() { +function getUrl() { + return getEnvVariable("REACT_APP_URL"); +} +function loggedOutConfiguration() { + return { + chain: getEnvVariable("REACT_APP_CHAIN"), + network: getEnvVariable("REACT_APP_NETWORK"), + url: getEnvVariable("REACT_APP_URL") + }; +} +function loggedInConfiguration() { var keys = ["BIP_39_KEY", "CHAIN", "NETWORK", "PATH", "URL"]; var someKeyIsUndefined = keys.some(function (key) { return typeof localStorage.getItem(key) === "undefined"; }); if (someKeyIsUndefined) @@ -83,7 +80,7 @@ function browserConfiguration() { }; } function getComputer() { - var configuration = isLoggedIn() ? browserConfiguration() : defaultConfiguration(); + var configuration = isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration(); return new Computer(configuration); } function MnemonicInput(_a) { @@ -113,11 +110,11 @@ function PathInput(_a) { return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "mt-4 flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Path" })), _jsx("button", __assign({ onClick: setDefaultPath, className: "mb-2 text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: "Update BIP 44 Path" }))] })), _jsx("input", { value: path, onChange: function (e) { return setPath(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" })] })); } function UrlInput(_a) { - var chain = _a.chain, network = _a.network, url = _a.url, setUrl = _a.setUrl; + var url = _a.url, setUrl = _a.setUrl; var setDefaultUrl = function (e) { e.stopPropagation(); e.preventDefault(); - setUrl(getUrl(chain, network)); + setUrl(getUrl()); }; return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "mt-4 flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Node Url" })), _jsx("button", __assign({ onClick: setDefaultUrl, className: "mb-2 text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: "Update Node Url" }))] })), _jsx("input", { value: url, onChange: function (e) { return setUrl(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" })] })); } @@ -144,7 +141,7 @@ function LoginForm() { var _b = useState("LTC"), chain = _b[0], setChain = _b[1]; var _c = useState("regtest"), network = _c[0], setNetwork = _c[1]; var _d = useState(getPath(chain, network)), path = _d[0], setPath = _d[1]; - var _e = useState(getUrl(chain, network)), url = _e[0], setUrl = _e[1]; + var _e = useState(getUrl()), url = _e[0], setUrl = _e[1]; useEffect(function () { initFlowbite(); }, []); @@ -159,8 +156,8 @@ export var Auth = { getCoinType: getCoinType, getBip44Path: getBip44Path, getUrl: getUrl, - defaultConfiguration: defaultConfiguration, - browserConfiguration: browserConfiguration, + defaultConfiguration: loggedOutConfiguration, + browserConfiguration: loggedInConfiguration, getComputer: getComputer, LoginForm: LoginForm, LoginModal: LoginModal diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx index bb16a8e84..09f3e6567 100644 --- a/packages/components/src/Auth.tsx +++ b/packages/components/src/Auth.tsx @@ -45,22 +45,19 @@ function getEnvVariable(name: string) { } else return res } -function getUrl(chain: Chain, network: Network) { - return getEnvVariable(`REACT_APP_${chain.toUpperCase()}_${network.toUpperCase()}_URL`) +function getUrl() { + return getEnvVariable(`REACT_APP_URL`) } -function defaultConfiguration() { - const chain = (localStorage.getItem("CHAIN") || - getEnvVariable(`REACT_APP_CHAIN`) || - "LTC") as Chain - const network = (localStorage.getItem("NETWORK") || - getEnvVariable(`REACT_APP_NETWORK`) || - "regtest") as Network - const url = getUrl(chain, network) - return { chain, network, url } +function loggedOutConfiguration() { + return { + chain: getEnvVariable(`REACT_APP_CHAIN`) as Chain, + network: getEnvVariable(`REACT_APP_NETWORK`) as Network, + url: getEnvVariable(`REACT_APP_URL`) + } } -function browserConfiguration() { +function loggedInConfiguration() { const keys = ["BIP_39_KEY", "CHAIN", "NETWORK", "PATH", "URL"] const someKeyIsUndefined = keys.some((key) => typeof localStorage.getItem(key) === "undefined") if (someKeyIsUndefined) throw new Error("Something went wrong, please log out and log in again") @@ -75,7 +72,7 @@ function browserConfiguration() { } function getComputer(): Computer { - const configuration: any = isLoggedIn() ? browserConfiguration() : defaultConfiguration() + const configuration: any = isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration() return new Computer(configuration) } @@ -309,12 +306,7 @@ function PathInput({ ) } -function UrlInput({ - chain, - network, - url, - setUrl -}: { +function UrlInput({ url, setUrl }: { chain: Chain network: Network url: string @@ -323,7 +315,7 @@ function UrlInput({ const setDefaultUrl = (e: React.MouseEvent) => { e.stopPropagation() e.preventDefault() - setUrl(getUrl(chain, network)) + setUrl(getUrl()) } return ( @@ -383,7 +375,7 @@ function LoginForm() { const [chain, setChain] = useState("LTC") const [network, setNetwork] = useState("regtest") const [path, setPath] = useState(getPath(chain, network)) - const [url, setUrl] = useState(getUrl(chain, network)) + const [url, setUrl] = useState(getUrl()) useEffect(() => { initFlowbite() @@ -419,8 +411,8 @@ export const Auth = { getCoinType, getBip44Path, getUrl, - defaultConfiguration, - browserConfiguration, + defaultConfiguration: loggedOutConfiguration, + browserConfiguration: loggedInConfiguration, getComputer, LoginForm, LoginModal diff --git a/packages/explorer/.env.example b/packages/explorer/.env.example index 572168a7f..7f6e4c6fc 100644 --- a/packages/explorer/.env.example +++ b/packages/explorer/.env.example @@ -1,8 +1,4 @@ -MNEMONIC=capital hurdle actual tunnel stool pause measure fresh deer mass thrive route fame initial bind GENERATE_SOURCEMAP=false -REACT_APP_LTC_REGTEST_URL=https://rltc.node.bitcoincomputer.io -REACT_APP_BTC_TESTNET_URL=https://btc.node.bitcoincomputer.io -REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031 -REACT_APP_PEPE_REGTEST_URL=http://127.0.0.1:1031 +REACT_APP_URL=https://rltc.node.bitcoincomputer.io REACT_APP_CHAIN=LTC REACT_APP_NETWORK=regtest \ No newline at end of file diff --git a/packages/explorer/src/components/Navbar.tsx b/packages/explorer/src/components/Navbar.tsx index 426c637a8..31b076353 100644 --- a/packages/explorer/src/components/Navbar.tsx +++ b/packages/explorer/src/components/Navbar.tsx @@ -156,7 +156,7 @@ function NotLoggedMenu() { const setChainAndNetwork = (chain: Chain, network: Network) => { try { - localStorage.setItem('URL', Auth.getUrl(chain, network)) + localStorage.setItem('URL', Auth.getUrl()) localStorage.setItem('CHAIN', chain) localStorage.setItem('NETWORK', network) setDropDownLabel(formatChainAndNetwork(chain, network)) diff --git a/packages/wallet/.env.example b/packages/wallet/.env.example index 70dfe7a81..3804abea0 100644 --- a/packages/wallet/.env.example +++ b/packages/wallet/.env.example @@ -1,10 +1,7 @@ -MNEMONIC=capital hurdle actual tunnel stool pause measure fresh deer mass thrive route fame initial bind +REACT_APP_CHAIN=LTC +REACT_APP_NETWORK=regtest +REACT_APP_URL=https://rltc.node.bitcoincomputer.io + PORT=1033 REACT_APP_EXPLORER_URL=localhost:1032 GENERATE_SOURCEMAP=false -REACT_APP_LTC_REGTEST_URL=https://rltc.node.bitcoincomputer.io -REACT_APP_BTC_TESTNET_URL=https://btc.node.bitcoincomputer.io -REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031 -REACT_APP_PEPE_REGTEST_URL=http://127.0.0.1:1031 -REACT_APP_CHAIN=LTC -REACT_APP_NETWORK=regtest diff --git a/packages/wallet/src/components/Sidebar.tsx b/packages/wallet/src/components/Sidebar.tsx index 4b0213b1a..bf7d2dca6 100644 --- a/packages/wallet/src/components/Sidebar.tsx +++ b/packages/wallet/src/components/Sidebar.tsx @@ -153,9 +153,9 @@ export function SideBar() { > From d07bed853e60165e32b27a50256d5bee87869871 Mon Sep 17 00:00:00 2001 From: Clemens Ley Date: Thu, 1 Aug 2024 19:16:11 -0500 Subject: [PATCH 2/6] Apps: .env (set by operator) takes precedence over localstorage (set by user) --- packages/components/built/Auth.js | 12 ++++-------- packages/components/src/Auth.tsx | 12 ++++-------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js index b0261db68..0d27f1ccc 100644 --- a/packages/components/built/Auth.js +++ b/packages/components/built/Auth.js @@ -67,16 +67,12 @@ function loggedOutConfiguration() { }; } function loggedInConfiguration() { - var keys = ["BIP_39_KEY", "CHAIN", "NETWORK", "PATH", "URL"]; - var someKeyIsUndefined = keys.some(function (key) { return typeof localStorage.getItem(key) === "undefined"; }); - if (someKeyIsUndefined) - throw new Error("Something went wrong, please log out and log in again"); return { mnemonic: localStorage.getItem("BIP_39_KEY"), - chain: localStorage.getItem("CHAIN"), - network: localStorage.getItem("NETWORK"), - path: localStorage.getItem("PATH"), - url: localStorage.getItem("URL") + chain: (process.env['REACT_APP_CHAIN'] || localStorage.getItem("CHAIN")), + network: (process.env['REACT_APP_NETWORK'] || localStorage.getItem("NETWORK")), + path: process.env['REACT_APP_PATH'] || localStorage.getItem("PATH"), + url: process.env['REACT_APP_URL'] || localStorage.getItem("URL") }; } function getComputer() { diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx index 09f3e6567..7f351518b 100644 --- a/packages/components/src/Auth.tsx +++ b/packages/components/src/Auth.tsx @@ -58,16 +58,12 @@ function loggedOutConfiguration() { } function loggedInConfiguration() { - const keys = ["BIP_39_KEY", "CHAIN", "NETWORK", "PATH", "URL"] - const someKeyIsUndefined = keys.some((key) => typeof localStorage.getItem(key) === "undefined") - if (someKeyIsUndefined) throw new Error("Something went wrong, please log out and log in again") - return { mnemonic: localStorage.getItem("BIP_39_KEY"), - chain: localStorage.getItem("CHAIN") as Chain, - network: localStorage.getItem("NETWORK") as Network, - path: localStorage.getItem("PATH"), - url: localStorage.getItem("URL") + chain: (process.env['REACT_APP_CHAIN'] || localStorage.getItem("CHAIN")) as Chain, + network: (process.env['REACT_APP_NETWORK'] || localStorage.getItem("NETWORK")) as Network, + path: process.env['REACT_APP_PATH'] || localStorage.getItem("PATH"), + url: process.env['REACT_APP_URL'] || localStorage.getItem("URL") } } From 50fa83b799dc5ce49dfaf2e966afc01d207977fd Mon Sep 17 00:00:00 2001 From: Clemens Ley Date: Sat, 3 Aug 2024 12:39:20 -0500 Subject: [PATCH 3/6] Apps: simplify configuration and signup modal --- packages/components/built/Auth.d.ts | 7 +- packages/components/built/Auth.js | 68 ++---- packages/components/built/Error404.d.ts | 4 +- packages/components/built/Error404.js | 12 +- packages/components/built/Modal.js | 2 +- packages/components/src/Auth.tsx | 136 +++--------- packages/components/src/Error404.tsx | 55 +++-- packages/components/src/Modal.tsx | 2 +- packages/explorer/.env.example | 10 +- packages/explorer/src/components/Navbar.tsx | 234 +------------------- packages/lib/dist/bc-lib.browser.min.mjs | 4 +- packages/lib/dist/bc-lib.commonjs.min.cjs | 6 +- packages/lib/dist/bc-lib.main.es.mjs | 2 +- packages/lib/dist/bc-lib.module.es.mjs | 4 +- packages/nft/.env.own-node | 23 +- packages/nft/.env.public-node | 17 +- packages/nft/scripts/deploy.mjs | 12 +- packages/nft/src/components/Navbar.tsx | 90 +------- packages/wallet/.env.example | 7 +- packages/wallet/src/App.tsx | 73 +++--- 20 files changed, 177 insertions(+), 591 deletions(-) diff --git a/packages/components/built/Auth.d.ts b/packages/components/built/Auth.d.ts index 2986ba4d0..0cc6201e0 100644 --- a/packages/components/built/Auth.d.ts +++ b/packages/components/built/Auth.d.ts @@ -8,18 +8,16 @@ declare function getBip44Path({ purpose, coinType, account }?: { coinType?: number | undefined; account?: number | undefined; }): string; -declare function getUrl(): string; declare function loggedOutConfiguration(): { chain: Chain; network: Network; - url: string; + url: string | undefined; }; declare function loggedInConfiguration(): { mnemonic: string | null; chain: Chain; network: Network; - path: string | null; - url: string | null; + url: string | undefined; }; declare function getComputer(): Computer; declare function LoginForm(): import("react/jsx-runtime").JSX.Element; @@ -29,7 +27,6 @@ export declare const Auth: { logout: typeof logout; getCoinType: typeof getCoinType; getBip44Path: typeof getBip44Path; - getUrl: typeof getUrl; defaultConfiguration: typeof loggedOutConfiguration; browserConfiguration: typeof loggedInConfiguration; getComputer: typeof getComputer; diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js index 0d27f1ccc..32f7aa44c 100644 --- a/packages/components/built/Auth.js +++ b/packages/components/built/Auth.js @@ -15,6 +15,7 @@ import { Computer } from "@bitcoin-computer/lib"; import { initFlowbite } from "flowbite"; import { useUtilsComponents } from "./UtilsContext"; import { Modal } from "./Modal"; +import { HiRefresh } from "react-icons/hi"; function isLoggedIn() { return !!localStorage.getItem("BIP_39_KEY"); } @@ -45,48 +46,27 @@ function getBip44Path(_a) { var _b = _a === void 0 ? {} : _a, _c = _b.purpose, purpose = _c === void 0 ? 44 : _c, _d = _b.coinType, coinType = _d === void 0 ? 2 : _d, _e = _b.account, account = _e === void 0 ? 0 : _e; return "m/".concat(purpose.toString(), "'/").concat(coinType.toString(), "'/").concat(account.toString(), "'"); } -function getPath(chain, network) { - return getBip44Path({ coinType: getCoinType(chain, network) }); -} -function getEnvVariable(name) { - var res = process.env[name]; - if (typeof res === "undefined") { - throw new Error("Cannot find environment variable \"".concat(name, "\" in the .env file.")); - } - else - return res; -} -function getUrl() { - return getEnvVariable("REACT_APP_URL"); -} function loggedOutConfiguration() { return { - chain: getEnvVariable("REACT_APP_CHAIN"), - network: getEnvVariable("REACT_APP_NETWORK"), - url: getEnvVariable("REACT_APP_URL") + chain: process.env["REACT_APP_CHAIN"], + network: process.env["REACT_APP_NETWORK"], + url: process.env["REACT_APP_URL"] }; } function loggedInConfiguration() { return { mnemonic: localStorage.getItem("BIP_39_KEY"), - chain: (process.env['REACT_APP_CHAIN'] || localStorage.getItem("CHAIN")), - network: (process.env['REACT_APP_NETWORK'] || localStorage.getItem("NETWORK")), - path: process.env['REACT_APP_PATH'] || localStorage.getItem("PATH"), - url: process.env['REACT_APP_URL'] || localStorage.getItem("URL") + chain: (localStorage.getItem("CHAIN") || process.env['REACT_APP_CHAIN']), + network: (localStorage.getItem("NETWORK") || process.env['REACT_APP_NETWORK']), + url: localStorage.getItem("URL") || process.env['REACT_APP_URL'] }; } function getComputer() { - var configuration = isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration(); - return new Computer(configuration); + return new Computer(isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration()); } function MnemonicInput(_a) { var mnemonic = _a.mnemonic, setMnemonic = _a.setMnemonic; - var generateMnemonic = function (e) { - e.stopPropagation(); - e.preventDefault(); - setMnemonic(new Computer().getMnemonic()); - }; - return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "BIP 39 Mnemonic" })), _jsx("button", __assign({ onClick: generateMnemonic, className: "mb-2 text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: "Generate in Browser" }))] })), _jsx("input", { value: mnemonic, onChange: function (e) { return setMnemonic(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white", required: true })] })); + return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "BIP 39 Mnemonic" })), _jsx(HiRefresh, { onClick: function () { return setMnemonic(new Computer().getMnemonic()); }, className: "w-4 h-4 ml-2 text-sm font-medium text-gray-900 dark:text-white inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsx("input", { value: mnemonic, onChange: function (e) { return setMnemonic(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white", required: true })] })); } function ChainInput(_a) { var chain = _a.chain, setChain = _a.setChain; @@ -96,23 +76,9 @@ function NetworkInput(_a) { var network = _a.network, setNetwork = _a.setNetwork; return (_jsxs(_Fragment, { children: [_jsx("label", __assign({ className: "block mt-4 mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Network" })), _jsxs("fieldset", __assign({ className: "flex" }, { children: [_jsx("legend", __assign({ className: "sr-only" }, { children: "Network" })), _jsxs("div", __assign({ className: "flex items-center mr-4" }, { children: [_jsx("input", { onChange: function () { return setNetwork("mainnet"); }, checked: network === "mainnet", id: "network-mainnet", type: "radio", name: "network", value: "Mainnet", className: "w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600" }), _jsx("label", __assign({ htmlFor: "network-mainnet", className: "block ms-2 text-sm font-medium text-gray-900 dark:text-gray-300" }, { children: "Mainnet" }))] })), _jsxs("div", __assign({ className: "flex items-center mr-4" }, { children: [_jsx("input", { onChange: function () { return setNetwork("testnet"); }, checked: network === "testnet", id: "network-testnet", type: "radio", name: "network", value: "Testnet", className: "w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600" }), _jsx("label", __assign({ htmlFor: "network-testnet", className: "block ms-2 text-sm font-medium text-gray-900 dark:text-gray-300" }, { children: "Testnet" }))] })), _jsxs("div", __assign({ className: "flex items-center mr-4" }, { children: [_jsx("input", { onChange: function () { return setNetwork("regtest"); }, checked: network === "regtest", id: "network-regtest", type: "radio", name: "network", value: "Regtest", className: "w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600" }), _jsx("label", __assign({ htmlFor: "network-regtest", className: "block ms-2 text-sm font-medium text-gray-900 dark:text-gray-300" }, { children: "Regtest" }))] }))] }))] })); } -function PathInput(_a) { - var chain = _a.chain, network = _a.network, path = _a.path, setPath = _a.setPath; - var setDefaultPath = function (e) { - e.stopPropagation(); - e.preventDefault(); - setPath(getPath(chain, network)); - }; - return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "mt-4 flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Path" })), _jsx("button", __assign({ onClick: setDefaultPath, className: "mb-2 text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: "Update BIP 44 Path" }))] })), _jsx("input", { value: path, onChange: function (e) { return setPath(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" })] })); -} function UrlInput(_a) { - var url = _a.url, setUrl = _a.setUrl; - var setDefaultUrl = function (e) { - e.stopPropagation(); - e.preventDefault(); - setUrl(getUrl()); - }; - return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "mt-4 flex justify-between" }, { children: [_jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Node Url" })), _jsx("button", __assign({ onClick: setDefaultUrl, className: "mb-2 text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: "Update Node Url" }))] })), _jsx("input", { value: url, onChange: function (e) { return setUrl(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" })] })); + var setUrl = _a.setUrl; + return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "mt-4 flex justify-between" }, { children: _jsx("label", __assign({ className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: "Node Url" })) })), _jsx("input", { onChange: function (e) { return setUrl(e.target.value); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" })] })); } function LoginButton(_a) { var mnemonic = _a.mnemonic, chain = _a.chain, network = _a.network, path = _a.path, url = _a.url; @@ -133,15 +99,14 @@ function LoginButton(_a) { return (_jsx(_Fragment, { children: _jsx("button", __assign({ onClick: login, type: "submit", className: "w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" }, { children: "Log In" })) })); } function LoginForm() { - var _a = useState(""), mnemonic = _a[0], setMnemonic = _a[1]; - var _b = useState("LTC"), chain = _b[0], setChain = _b[1]; - var _c = useState("regtest"), network = _c[0], setNetwork = _c[1]; - var _d = useState(getPath(chain, network)), path = _d[0], setPath = _d[1]; - var _e = useState(getUrl()), url = _e[0], setUrl = _e[1]; + var _a = useState(new Computer().getMnemonic()), mnemonic = _a[0], setMnemonic = _a[1]; + var _b = useState(process.env['REACT_APP_CHAIN']), chain = _b[0], setChain = _b[1]; + var _c = useState(process.env['REACT_APP_NETWORK']), network = _c[0], setNetwork = _c[1]; + var _d = useState(process.env['REACT_APP_URL']), url = _d[0], setUrl = _d[1]; useEffect(function () { initFlowbite(); }, []); - return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "p-4 md:p-5 space-y-4" }, { children: _jsx("form", __assign({ className: "space-y-6" }, { children: _jsxs("div", { children: [_jsx(MnemonicInput, { mnemonic: mnemonic, setMnemonic: setMnemonic }), _jsx(ChainInput, { chain: chain, setChain: setChain }), _jsx(NetworkInput, { network: network, setNetwork: setNetwork }), _jsx(PathInput, { chain: chain, network: network, path: path, setPath: setPath }), _jsx(UrlInput, { chain: chain, network: network, url: url, setUrl: setUrl })] }) })) })), _jsx("div", __assign({ className: "flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600" }, { children: _jsx(LoginButton, { mnemonic: mnemonic, chain: chain, network: network, path: path, url: url }) }))] })); + return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "max-w-sm mx-auto p-4 md:p-5 space-y-4" }, { children: _jsx("form", __assign({ className: "space-y-6" }, { children: _jsxs("div", { children: [_jsx(MnemonicInput, { mnemonic: mnemonic, setMnemonic: setMnemonic }), !process.env['REACT_APP_CHAIN'] && _jsx(ChainInput, { chain: chain, setChain: setChain }), !process.env['REACT_APP_NETWORK'] && _jsx(NetworkInput, { network: network, setNetwork: setNetwork }), !process.env['REACT_APP_URL'] && _jsx(UrlInput, { setUrl: setUrl })] }) })) })), _jsx("div", __assign({ className: "max-w-sm mx-auto flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600" }, { children: _jsx(LoginButton, { mnemonic: mnemonic, chain: chain, network: network, url: url }) }))] })); } function LoginModal() { return _jsx(Modal.Component, { title: "Sign in", content: LoginForm, id: "sign-in-modal" }); @@ -151,7 +116,6 @@ export var Auth = { logout: logout, getCoinType: getCoinType, getBip44Path: getBip44Path, - getUrl: getUrl, defaultConfiguration: loggedOutConfiguration, browserConfiguration: loggedInConfiguration, getComputer: getComputer, diff --git a/packages/components/built/Error404.d.ts b/packages/components/built/Error404.d.ts index 8b8f88a66..58becf8b9 100644 --- a/packages/components/built/Error404.d.ts +++ b/packages/components/built/Error404.d.ts @@ -1 +1,3 @@ -export declare const Error404: () => import("react/jsx-runtime").JSX.Element; +export declare const Error404: ({ message }: { + message?: string | undefined; +}) => import("react/jsx-runtime").JSX.Element; diff --git a/packages/components/built/Error404.js b/packages/components/built/Error404.js index 42afb47f2..3d1bc4e3b 100644 --- a/packages/components/built/Error404.js +++ b/packages/components/built/Error404.js @@ -9,5 +9,13 @@ var __assign = (this && this.__assign) || function () { }; return __assign.apply(this, arguments); }; -import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -export var Error404 = function () { return (_jsx("section", __assign({ className: "w-full bg-white dark:bg-gray-900" }, { children: _jsx("div", __assign({ className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6" }, { children: _jsxs("div", __assign({ className: "mx-auto max-w-screen-sm text-center" }, { children: [_jsx("h1", __assign({ className: "mb-4 text-6xl tracking-tight font-extrabold text-blue-700 dark:text-blue-600" }, { children: "404" })), _jsx("p", __assign({ className: "mb-4 text-3xl tracking-tight font-bold text-gray-700 md:text-4xl dark:text-white" }, { children: "Something's missing." })), _jsxs("p", __assign({ className: "mb-4 text-lg font-light text-gray-500 dark:text-gray-400" }, { children: ["Sorry, we can't find that page. You'll find lots to explore on the home page.", " "] })), _jsx("a", __assign({ href: "/", className: "inline-flex text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4" }, { children: "Back to Homepage" }))] })) })) }))); }; +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +export var Error404 = function (_a) { + var message = _a.message; + var Missing = function () { return (_jsxs(_Fragment, { children: [_jsx("h1", __assign({ className: "mb-4 text-6xl tracking-tight font-extrabold text-blue-700 dark:text-blue-600" }, { children: "404" })), _jsx("p", __assign({ className: "mb-4 text-3xl tracking-tight font-bold text-gray-700 md:text-4xl dark:text-white" }, { children: "Something's missing." })), _jsxs("p", __assign({ className: "mb-4 text-lg font-light text-gray-500 dark:text-gray-400" }, { children: ["Sorry, we can't find that page. You'll find lots to explore on the home page.", " "] })), _jsx("a", __assign({ href: "/", className: "inline-flex text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4" }, { children: "Back to Homepage" }))] })); }; + var Err = function (_a) { + var message = _a.message; + return (_jsxs(_Fragment, { children: [_jsx("h1", __assign({ className: "mb-4 text-6xl tracking-tight font-extrabold text-blue-700 dark:text-blue-600" }, { children: "400" })), _jsx("p", __assign({ className: "mb-4 text-3xl tracking-tight font-bold text-gray-700 md:text-4xl dark:text-white" }, { children: "Something went wrong." })), _jsx("p", __assign({ className: "mb-4 text-lg font-light text-gray-500 dark:text-gray-400" }, { children: message }))] })); + }; + return (_jsx("section", __assign({ className: "w-full bg-white dark:bg-gray-900" }, { children: _jsx("div", __assign({ className: "py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6" }, { children: _jsx("div", __assign({ className: "mx-auto max-w-screen-sm text-center" }, { children: message ? _jsx(Err, { message: message }) : _jsx(Missing, {}) })) })) }))); +}; diff --git a/packages/components/built/Modal.js b/packages/components/built/Modal.js index 1c14b7c73..e22935e0e 100644 --- a/packages/components/built/Modal.js +++ b/packages/components/built/Modal.js @@ -40,7 +40,7 @@ var ToggleButton = function (_a) { }; var Component = function (_a) { var title = _a.title, content = _a.content, contentData = _a.contentData, id = _a.id; - return (_jsx("div", __assign({ id: id, tabIndex: -1, "aria-hidden": "true", className: "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-2xl max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: title })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", "data-modal-hide": id, "data-modal-target": id, onClick: function () { return hideModal(id); } }, { children: [_jsx("svg", __assign({ className: "w-3 h-3", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14" }, { children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" }) })), _jsx("span", __assign({ className: "sr-only" }, { children: "Close modal" }))] }))] })), content(contentData)] })) })) }))); + return (_jsx("div", __assign({ id: id, tabIndex: -1, "aria-hidden": "true", className: "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-sm max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: title })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", "data-modal-hide": id, "data-modal-target": id, onClick: function () { return hideModal(id); } }, { children: [_jsx("svg", __assign({ className: "w-3 h-3", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14" }, { children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" }) })), _jsx("span", __assign({ className: "sr-only" }, { children: "Close modal" }))] }))] })), content(contentData)] })) })) }))); }; export var Modal = { get: get, diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx index 7f351518b..8a9c59b19 100644 --- a/packages/components/src/Auth.tsx +++ b/packages/components/src/Auth.tsx @@ -4,6 +4,7 @@ import { initFlowbite } from "flowbite" import { useUtilsComponents } from "./UtilsContext" import { Modal } from "./Modal" import type { Chain, Network } from "./common/types" +import { HiRefresh } from "react-icons/hi" function isLoggedIn(): boolean { return !!localStorage.getItem("BIP_39_KEY") @@ -34,42 +35,25 @@ function getBip44Path({ purpose = 44, coinType = 2, account = 0 } = {}) { return `m/${purpose.toString()}'/${coinType.toString()}'/${account.toString()}'` } -function getPath(chain: string, network: string): string { - return getBip44Path({ coinType: getCoinType(chain, network) }) -} - -function getEnvVariable(name: string) { - const res = process.env[name] - if (typeof res === "undefined") { - throw new Error(`Cannot find environment variable "${name}" in the .env file.`) - } else return res -} - -function getUrl() { - return getEnvVariable(`REACT_APP_URL`) -} - function loggedOutConfiguration() { return { - chain: getEnvVariable(`REACT_APP_CHAIN`) as Chain, - network: getEnvVariable(`REACT_APP_NETWORK`) as Network, - url: getEnvVariable(`REACT_APP_URL`) + chain: process.env[`REACT_APP_CHAIN`] as Chain, + network: process.env[`REACT_APP_NETWORK`] as Network, + url: process.env[`REACT_APP_URL`] } } function loggedInConfiguration() { return { mnemonic: localStorage.getItem("BIP_39_KEY"), - chain: (process.env['REACT_APP_CHAIN'] || localStorage.getItem("CHAIN")) as Chain, - network: (process.env['REACT_APP_NETWORK'] || localStorage.getItem("NETWORK")) as Network, - path: process.env['REACT_APP_PATH'] || localStorage.getItem("PATH"), - url: process.env['REACT_APP_URL'] || localStorage.getItem("URL") + chain: (localStorage.getItem("CHAIN") || process.env['REACT_APP_CHAIN']) as Chain, + network: (localStorage.getItem("NETWORK") || process.env['REACT_APP_NETWORK']) as Network, + url: localStorage.getItem("URL") || process.env['REACT_APP_URL'] } } function getComputer(): Computer { - const configuration: any = isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration() - return new Computer(configuration) + return new Computer(isLoggedIn() ? loggedInConfiguration() : loggedOutConfiguration()) } function MnemonicInput({ @@ -79,24 +63,16 @@ function MnemonicInput({ mnemonic: string setMnemonic: Dispatch }) { - const generateMnemonic = (e: React.MouseEvent) => { - e.stopPropagation() - e.preventDefault() - setMnemonic(new Computer().getMnemonic()) - } - return ( <>
- + setMnemonic(new Computer().getMnemonic())} + className="w-4 h-4 ml-2 text-sm font-medium text-gray-900 dark:text-white inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" + />
}) { +function ChainInput({ chain, setChain }: { chain: Chain | undefined; setChain: Dispatch }) { return ( <>