Feat/vite template

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;

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" });

packages/components/built/ComputerContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { Computer } from "@bitcoin-computer/lib";
 export declare const ComputerContext: import("react").Context<Computer>;

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 = {

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<unknown>;
+export declare function getEnv(name: string): any;
 export {};

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)];
+}

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<string>(new Computer().getMnemonic())
-  const [chain, setChain] = useState<Chain | undefined>(
-    process.env.REACT_APP_CHAIN as Chain | undefined
-  )
-  const [network, setNetwork] = useState<Network | undefined>(
-    process.env.REACT_APP_NETWORK as Network | undefined
-  )
-  const [url] = useState<string | undefined>(process.env.REACT_APP_URL)
+  const [chain, setChain] = useState<Chain | undefined>(getEnv('CHAIN') as Chain | undefined)
+  const [network, setNetwork] = useState<Network | undefined>(getEnv('NETWORK') as Network | undefined)
+  const [url] = useState<string | undefined>(getEnv('URL'))
   const urlInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -310,11 +307,9 @@ function LoginForm() {
         <form className="space-y-6">
           <div>
             <MnemonicInput mnemonic={mnemonic} setMnemonic={setMnemonic} />
-            {!process.env.REACT_APP_CHAIN && <ChainInput chain={chain} setChain={setChain} />}
-            {!process.env.REACT_APP_NETWORK && (
-              <NetworkInput network={network} setNetwork={setNetwork} />
-            )}
-            {!process.env.REACT_APP_URL && <UrlInput urlInputRef={urlInputRef} />}
+            {!chain && <ChainInput chain={chain} setChain={setChain} />}
+            {!network && <NetworkInput network={network} setNetwork={setNetwork} />}
+            {!url && <UrlInput urlInputRef={urlInputRef} />}
           </div>
         </form>
       </div>

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 (
-    <div id="dropdown-cta" className="relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900" role="alert">
+    <div
+      id="dropdown-cta"
+      className="relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900"
+      role="alert"
+    >
       <div className="text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400">
         {balance / 1e8} {computer.getChain()}{" "}
         <HiRefresh
           onClick={refreshBalance}
           className="w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100"
-          />
+        />
       </div>
       <div className="text-center uppercase text-xs text-blue-800 dark:text-blue-400">
         {computer.getNetwork()}
       </div>
-      {computer.getNetwork() === 'regtest' && <button 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">
-        Fund
-      </button>}    
+      {computer.getNetwork() === "regtest" && (
+        <button
+          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"
+        >
+          Fund
+        </button>
+      )}
     </div>
   )
 }
@@ -88,20 +102,22 @@ const PublicKey = ({ computer }: any) => (
 
 const Mnemonic = ({ computer }: any) => {
   const [mnemonicShown, setMnemonicShown] = useState(false)
-  return <div className="mb-4">
+  return (
+    <div className="mb-4">
       <h6 className="text-lg font-bold dark:text-white">
         Mnemonic&nbsp;
         <button
           onClick={() => 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"
         >
-          {mnemonicShown ? 'hide' : 'show'}
+          {mnemonicShown ? "hide" : "show"}
         </button>
       </h6>
       <p className="text-xs font-mono text-gray-500 dark:text-gray-400 break-words">
-        { mnemonicShown ? computer.getMnemonic() : '' }
+        {mnemonicShown ? computer.getMnemonic() : ""}
       </p>
     </div>
+  )
 }
 
 const Url = ({ computer }: any) => (
@@ -152,17 +168,16 @@ const LogOut = () => (
 
 export function Wallet({ paymentModSpec }: { paymentModSpec?: string }) {
   const computer = useContext(ComputerContext)
-
   const Content = () => (
     <>
       <h4 className="text-2xl font-bold dark:text-white">Wallet</h4>
       <Balance computer={computer} paymentModSpec={paymentModSpec} />
       <Address computer={computer} />
       <PublicKey computer={computer} />
       <Mnemonic computer={computer} />
-      {!process.env.REACT_APP_CHAIN && <Chain computer={computer} />}
-      {!process.env.REACT_APP_NETWORK && <Network computer={computer} />}
-      {!process.env.REACT_APP_URL && <Url computer={computer} />}
+      {!getEnv('CHAIN') && <Chain computer={computer} />}
+      {!getEnv('NETWORK') && <Network computer={computer} />}
+      {!getEnv('URL') && <Url computer={computer} />}
       <hr className="h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" />
       <LogOut />
     </>

packages/components/src/common/utils.ts

@@ -66,3 +66,8 @@ export function isValidRev(value: any): boolean {
 
 // eslint-disable-next-line
 export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+
+export function getEnv(name: string) {
+  return (typeof process !== "undefined" && process.env[`REACT_APP_${name}`]) || import.meta.env[`VITE_${name}`]
+}

packages/components/tsconfig.json

@@ -17,8 +17,9 @@
     "jsx": "react-jsx",
     "declaration": true,
     "outDir": "./built",
+    "types": ["vite/client"],
     "paths": {
-      "react": [ "./node_modules/@types/react" ]
+      "react": ["./node_modules/@types/react"]
     }
   },
   "include": ["src"],

packages/explorer-vite/.env.local.example

@@ -0,0 +1,6 @@
+MNEMONIC=travel upgrade inside soda birth essence junk merit never twenty system opinion
+GENERATE_SOURCEMAP=false
+VITE_PORT=1032
+VITE_URL=http://127.0.0.1:1031
+VITE_CHAIN=LTC
+VITE_NETWORK=regtest