Skip to content

Simplify app configuration #242

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

Merged
merged 6 commits into from
Aug 5, 2024
Merged

Simplify app configuration #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cce8043
Apps: start to simplify the configuration
ClemensLey Aug 2, 2024
d07bed8
Apps: .env (set by operator) takes precedence over localstorage (set …
ClemensLey Aug 2, 2024
50fa83b
Apps: simplify configuration and signup modal
ClemensLey Aug 3, 2024
0b09c0e
Components: rename script from "compile" to "build"
ClemensLey Aug 3, 2024
797a0b8
Apps: refactor readme files
ClemensLey Aug 3, 2024
fd218dd
Lib and Node: refactor readme files
ClemensLey Aug 5, 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
15 changes: 6 additions & 9 deletions packages/components/built/Auth.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,16 @@ 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 loggedOutConfiguration(): {
chain: Chain;
network: Network;
url: string;
url: string | undefined;
};
declare function browserConfiguration(): {
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;
Expand All @@ -29,9 +27,8 @@ export declare const Auth: {
logout: typeof logout;
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;
Expand Down
87 changes: 22 additions & 65 deletions packages/components/built/Auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down Expand Up @@ -45,55 +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(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 loggedOutConfiguration() {
return {
chain: process.env["REACT_APP_CHAIN"],
network: process.env["REACT_APP_NETWORK"],
url: process.env["REACT_APP_URL"]
};
}
function browserConfiguration() {
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");
function loggedInConfiguration() {
return {
mnemonic: localStorage.getItem("BIP_39_KEY"),
chain: localStorage.getItem("CHAIN"),
network: localStorage.getItem("NETWORK"),
path: localStorage.getItem("PATH"),
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() ? browserConfiguration() : defaultConfiguration();
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;
Expand All @@ -103,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 chain = _a.chain, network = _a.network, url = _a.url, setUrl = _a.setUrl;
var setDefaultUrl = function (e) {
e.stopPropagation();
e.preventDefault();
setUrl(getUrl(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: "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;
Expand All @@ -140,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(chain, network)), 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" });
Expand All @@ -158,9 +116,8 @@ export var Auth = {
logout: logout,
getCoinType: getCoinType,
getBip44Path: getBip44Path,
getUrl: getUrl,
defaultConfiguration: defaultConfiguration,
browserConfiguration: browserConfiguration,
defaultConfiguration: loggedOutConfiguration,
browserConfiguration: loggedInConfiguration,
getComputer: getComputer,
LoginForm: LoginForm,
LoginModal: LoginModal
Expand Down
4 changes: 3 additions & 1 deletion packages/components/built/Error404.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
12 changes: 10 additions & 2 deletions packages/components/built/Error404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, {}) })) })) })));
};
Loading