diff --git a/packages/components/built/Auth.d.ts b/packages/components/built/Auth.d.ts index 29a7bdb05..1ea26cdd5 100644 --- a/packages/components/built/Auth.d.ts +++ b/packages/components/built/Auth.d.ts @@ -11,14 +11,14 @@ declare function getBip44Path({ purpose, coinType, account }?: { declare function loggedOutConfiguration(): { chain: Chain; network: Network; - url: string | undefined; + url: any; moduleStorageType: ModuleStorageType; }; declare function loggedInConfiguration(): { mnemonic: string | null; chain: Chain; network: Network; - url: string | undefined; + url: any; moduleStorageType: ModuleStorageType; }; declare function getComputer(): Computer; diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js index 8c75cad86..bd37ac7a5 100644 --- a/packages/components/built/Auth.js +++ b/packages/components/built/Auth.js @@ -16,6 +16,7 @@ import { initFlowbite } from "flowbite"; import { HiRefresh } from "react-icons/hi"; import { useUtilsComponents } from "./UtilsContext"; import { Modal } from "./Modal"; +import { getEnv } from "./common/utils"; function isLoggedIn() { return !!localStorage.getItem("BIP_39_KEY"); } @@ -48,19 +49,19 @@ function getBip44Path(_a) { } function loggedOutConfiguration() { return { - chain: process.env.REACT_APP_CHAIN, - network: process.env.REACT_APP_NETWORK, - url: process.env.REACT_APP_URL, - moduleStorageType: process.env.REACT_APP_MODULE_STORAGE_TYPE + chain: getEnv('CHAIN'), + network: getEnv('NETWORK'), + url: getEnv('URL'), + moduleStorageType: getEnv('MODULE_STORAGE_TYPE') }; } function loggedInConfiguration() { return { mnemonic: localStorage.getItem("BIP_39_KEY"), - 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, - moduleStorageType: process.env.REACT_APP_MODULE_STORAGE_TYPE + chain: (localStorage.getItem("CHAIN") || getEnv('CHAIN')), + network: (localStorage.getItem("NETWORK") || getEnv('NETWORK')), + url: localStorage.getItem("URL") || getEnv('URL'), + moduleStorageType: getEnv('MODULE_STORAGE_TYPE') }; } function getComputer() { @@ -103,14 +104,14 @@ function LoginButton(_a) { } function LoginForm() { 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 url = useState(process.env.REACT_APP_URL)[0]; + var _b = useState(getEnv('CHAIN')), chain = _b[0], setChain = _b[1]; + var _c = useState(getEnv('NETWORK')), network = _c[0], setNetwork = _c[1]; + var url = useState(getEnv('URL'))[0]; var urlInputRef = useRef(null); useEffect(function () { initFlowbite(); }, []); - 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, { urlInputRef: urlInputRef })] }) })) })), _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, urlInputRef: urlInputRef }) }))] })); + 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 }), !chain && _jsx(ChainInput, { chain: chain, setChain: setChain }), !network && _jsx(NetworkInput, { network: network, setNetwork: setNetwork }), !url && _jsx(UrlInput, { urlInputRef: urlInputRef })] }) })) })), _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, urlInputRef: urlInputRef }) }))] })); } function LoginModal() { return _jsx(Modal.Component, { title: "Sign in", content: LoginForm, id: "sign-in-modal" }); diff --git a/packages/components/built/ComputerContext.d.ts b/packages/components/built/ComputerContext.d.ts index 77e029d1b..1c1946fa7 100644 --- a/packages/components/built/ComputerContext.d.ts +++ b/packages/components/built/ComputerContext.d.ts @@ -1,3 +1,2 @@ -/// import { Computer } from "@bitcoin-computer/lib"; export declare const ComputerContext: import("react").Context; diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js index d0c6a62c4..a2482b086 100644 --- a/packages/components/built/Wallet.js +++ b/packages/components/built/Wallet.js @@ -52,6 +52,7 @@ import { Auth } from "./Auth"; import { Drawer } from "./Drawer"; import { UtilsContext } from "./UtilsContext"; import { ComputerContext } from "./ComputerContext"; +import { getEnv } from "./common/utils"; var Balance = function (_a) { var computer = _a.computer, paymentModSpec = _a.paymentModSpec; var _b = useState(0), balance = _b[0], setBalance = _b[1]; @@ -119,7 +120,7 @@ var Balance = function (_a) { useEffect(function () { refreshBalance(); }, []); - return (_jsxs("div", __assign({ id: "dropdown-cta", className: "relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900", role: "alert" }, { children: [_jsxs("div", __assign({ className: "text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400" }, { children: [balance / 1e8, " ", computer.getChain(), " ", _jsx(HiRefresh, { onClick: refreshBalance, className: "w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsx("div", __assign({ className: "text-center uppercase text-xs text-blue-800 dark:text-blue-400" }, { children: computer.getNetwork() })), computer.getNetwork() === 'regtest' && _jsx("button", __assign({ type: "button", onClick: fund, className: "absolute bottom-2 right-2 px-1 py-1 text-center text-xs font-medium text-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800" }, { children: "Fund" }))] }))); + return (_jsxs("div", __assign({ id: "dropdown-cta", className: "relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900", role: "alert" }, { children: [_jsxs("div", __assign({ className: "text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400" }, { children: [balance / 1e8, " ", computer.getChain(), " ", _jsx(HiRefresh, { onClick: refreshBalance, className: "w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsx("div", __assign({ className: "text-center uppercase text-xs text-blue-800 dark:text-blue-400" }, { children: computer.getNetwork() })), computer.getNetwork() === "regtest" && (_jsx("button", __assign({ type: "button", onClick: fund, className: "absolute bottom-2 right-2 px-1 py-1 text-center text-xs font-medium text-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800" }, { children: "Fund" })))] }))); }; var Address = function (_a) { var computer = _a.computer; @@ -132,7 +133,7 @@ var PublicKey = function (_a) { var Mnemonic = function (_a) { var computer = _a.computer; var _b = useState(false), mnemonicShown = _b[0], setMnemonicShown = _b[1]; - return _jsxs("div", __assign({ className: "mb-4" }, { children: [_jsxs("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: ["Mnemonic\u00A0", _jsx("button", __assign({ onClick: function () { return setMnemonicShown(!mnemonicShown); }, className: "text-xs font-mono font-normal text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: mnemonicShown ? 'hide' : 'show' }))] })), _jsx("p", __assign({ className: "text-xs font-mono text-gray-500 dark:text-gray-400 break-words" }, { children: mnemonicShown ? computer.getMnemonic() : '' }))] })); + return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsxs("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: ["Mnemonic\u00A0", _jsx("button", __assign({ onClick: function () { return setMnemonicShown(!mnemonicShown); }, className: "text-xs font-mono font-normal text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: mnemonicShown ? "hide" : "show" }))] })), _jsx("p", __assign({ className: "text-xs font-mono text-gray-500 dark:text-gray-400 break-words" }, { children: mnemonicShown ? computer.getMnemonic() : "" }))] }))); }; var Url = function (_a) { var computer = _a.computer; @@ -150,7 +151,7 @@ var LogOut = function () { return (_jsxs(_Fragment, { children: [_jsxs("div", __ export function Wallet(_a) { var paymentModSpec = _a.paymentModSpec; var computer = useContext(ComputerContext); - var Content = function () { return (_jsxs(_Fragment, { children: [_jsx("h4", __assign({ className: "text-2xl font-bold dark:text-white" }, { children: "Wallet" })), _jsx(Balance, { computer: computer, paymentModSpec: paymentModSpec }), _jsx(Address, { computer: computer }), _jsx(PublicKey, { computer: computer }), _jsx(Mnemonic, { computer: computer }), !process.env.REACT_APP_CHAIN && _jsx(Chain, { computer: computer }), !process.env.REACT_APP_NETWORK && _jsx(Network, { computer: computer }), !process.env.REACT_APP_URL && _jsx(Url, { computer: computer }), _jsx("hr", { className: "h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" }), _jsx(LogOut, {})] })); }; + var Content = function () { return (_jsxs(_Fragment, { children: [_jsx("h4", __assign({ className: "text-2xl font-bold dark:text-white" }, { children: "Wallet" })), _jsx(Balance, { computer: computer, paymentModSpec: paymentModSpec }), _jsx(Address, { computer: computer }), _jsx(PublicKey, { computer: computer }), _jsx(Mnemonic, { computer: computer }), !getEnv('CHAIN') && _jsx(Chain, { computer: computer }), !getEnv('NETWORK') && _jsx(Network, { computer: computer }), !getEnv('URL') && _jsx(Url, { computer: computer }), _jsx("hr", { className: "h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" }), _jsx(LogOut, {})] })); }; return _jsx(Drawer.Component, { Content: Content, id: "wallet-drawer" }); } export var WalletComponents = { diff --git a/packages/components/built/common/utils.d.ts b/packages/components/built/common/utils.d.ts index 2aa0059f1..433ec35de 100644 --- a/packages/components/built/common/utils.d.ts +++ b/packages/components/built/common/utils.d.ts @@ -11,4 +11,5 @@ export declare const capitalizeFirstLetter: (string: string) => string; export declare function isValidRevString(outId: string): boolean; export declare function isValidRev(value: any): boolean; export declare const sleep: (ms: number) => Promise; +export declare function getEnv(name: string): any; export {}; diff --git a/packages/components/built/common/utils.js b/packages/components/built/common/utils.js index 0a9d9b37b..08271ded0 100644 --- a/packages/components/built/common/utils.js +++ b/packages/components/built/common/utils.js @@ -75,3 +75,6 @@ export function isValidRev(value) { } // eslint-disable-next-line export var sleep = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); }; +export function getEnv(name) { + return (typeof process !== "undefined" && process.env["REACT_APP_".concat(name)]) || import.meta.env["VITE_".concat(name)]; +} diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx index c84b91143..fafce15eb 100644 --- a/packages/components/src/Auth.tsx +++ b/packages/components/src/Auth.tsx @@ -5,6 +5,7 @@ import { HiRefresh } from "react-icons/hi" import { useUtilsComponents } from "./UtilsContext" import { Modal } from "./Modal" import type { Chain, Network, ModuleStorageType } from "./common/types" +import { getEnv } from "./common/utils" function isLoggedIn(): boolean { return !!localStorage.getItem("BIP_39_KEY") @@ -37,20 +38,20 @@ function getBip44Path({ purpose = 44, coinType = 2, account = 0 } = {}) { function loggedOutConfiguration() { return { - chain: process.env.REACT_APP_CHAIN as Chain, - network: process.env.REACT_APP_NETWORK as Network, - url: process.env.REACT_APP_URL, - moduleStorageType: process.env.REACT_APP_MODULE_STORAGE_TYPE as ModuleStorageType + chain: getEnv('CHAIN') as Chain, + network: getEnv('NETWORK') as Network, + url: getEnv('URL'), + moduleStorageType: getEnv('MODULE_STORAGE_TYPE') as ModuleStorageType } } function loggedInConfiguration() { return { mnemonic: localStorage.getItem("BIP_39_KEY"), - 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, - moduleStorageType: process.env.REACT_APP_MODULE_STORAGE_TYPE as ModuleStorageType + chain: (localStorage.getItem("CHAIN") || getEnv('CHAIN')) as Chain, + network: (localStorage.getItem("NETWORK") || getEnv('NETWORK')) as Network, + url: localStorage.getItem("URL") || getEnv('URL'), + moduleStorageType: getEnv('MODULE_STORAGE_TYPE') as ModuleStorageType } } @@ -291,13 +292,9 @@ function LoginButton({ mnemonic, chain, network, path, url, urlInputRef }: any) function LoginForm() { const [mnemonic, setMnemonic] = useState(new Computer().getMnemonic()) - const [chain, setChain] = useState( - process.env.REACT_APP_CHAIN as Chain | undefined - ) - const [network, setNetwork] = useState( - process.env.REACT_APP_NETWORK as Network | undefined - ) - const [url] = useState(process.env.REACT_APP_URL) + const [chain, setChain] = useState(getEnv('CHAIN') as Chain | undefined) + const [network, setNetwork] = useState(getEnv('NETWORK') as Network | undefined) + const [url] = useState(getEnv('URL')) const urlInputRef = useRef(null) useEffect(() => { @@ -310,11 +307,9 @@ function LoginForm() {
- {!process.env.REACT_APP_CHAIN && } - {!process.env.REACT_APP_NETWORK && ( - - )} - {!process.env.REACT_APP_URL && } + {!chain && } + {!network && } + {!url && }
diff --git a/packages/components/src/Wallet.tsx b/packages/components/src/Wallet.tsx index e2bac2880..ad3d4bedf 100644 --- a/packages/components/src/Wallet.tsx +++ b/packages/components/src/Wallet.tsx @@ -5,6 +5,7 @@ import { Auth } from "./Auth" import { Drawer } from "./Drawer" import { UtilsContext } from "./UtilsContext" import { ComputerContext } from "./ComputerContext" +import { getEnv } from "./common/utils" const Balance = ({ computer, @@ -24,10 +25,13 @@ const Balance = ({ const publicKey = computer.getPublicKey() const mod = paymentModSpec const paymentRevs = paymentModSpec ? await computer.query({ publicKey, mod }) : [] - const payments = (await Promise.all(paymentRevs.map((rev: string) => computer.sync(rev)))) as any[] - const amountsInPaymentToken = payments && payments.length - ? payments.reduce((total, pay) => total + (pay._amount - computer.getMinimumFees()), 0) - : 0 + const payments = (await Promise.all( + paymentRevs.map((rev: string) => computer.sync(rev)) + )) as any[] + const amountsInPaymentToken = + payments && payments.length + ? payments.reduce((total, pay) => total + (pay._amount - computer.getMinimumFees()), 0) + : 0 const availableWalletBalance = await computer.getBalance() setBalance(availableWalletBalance.balance + amountsInPaymentToken) @@ -50,20 +54,30 @@ const Balance = ({ }, []) return ( -