+
+
+
+
setUrl(e.target.value)}
+ value={url}
+ type="text"
+ name="url"
+ id="url"
+ 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"
+ placeholder="http://127.0.0.1:1031"
+ required
+ />
+
+
-
+
+
+
+
+
+
+ )
+}
+
+function NotLoggedMenu() {
+ const [dropDownLabel, setDropDownLabel] = useState
("LTC")
+ const { showSnackBar } = UtilsContext.useUtilsComponents()
+
+ useEffect(() => {
+ initFlowbite()
+
+ const { chain, network } = Auth.defaultConfiguration()
+ setDropDownLabel(formatChainAndNetwork(chain, network))
+ }, [])
+
+ const setChainAndNetwork = (chain: Chain, network: Network) => {
+ try {
+ localStorage.setItem("URL", Auth.getUrl(chain, network))
+ localStorage.setItem("CHAIN", chain)
+ localStorage.setItem("NETWORK", network)
+ setDropDownLabel(formatChainAndNetwork(chain, network))
+ window.location.href = "/"
+ } catch (err) {
+ showSnackBar("Error setting chain and network", false)
+ Modal.get(modalId).show()
+ }
+ }
+
+ return (
+ <>
+
+
+ -
+
+
+
-
-
- )}
- {loggedIn && (
- <>
- - setDropDownHidden(false)}
- onMouseLeave={() => setDropDownHidden(true)}
+
-
+
setChainAndNetwork("LTC", "testnet")}
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ Litecoin Testnet
+
+
+ -
+
setChainAndNetwork("LTC", "regtest")}
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ Litecoin Regtest
+
+
+
+
+ -
+
setChainAndNetwork("BTC", "mainnet")}
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ Bitcoin
+
+
+ -
+
setChainAndNetwork("BTC", "testnet")}
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+ >
+ Bitcoin Testnet
+
+
+ -
+
setChainAndNetwork("BTC", "regtest")}
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
>
-
-
-
- -
- {
- logout()
- }}
- >
- Log Out
-
-
-
-
-
-
-
-
- {
- setIsOpen(true)
- }}
- className="block py-2 pl-3 pr-4 text-gray-700 rounded md:bg-transparent hover:text-gray-900 cursor-pointer md:p-0 dark:text-white"
- >
-
-
-
-
- )}
-
+ Bitcoin Regtest
+
+
+
+
+ -
+
+
+
+
+ )
+}
+
+export default function Navbar() {
+ useEffect(() => {
+ initFlowbite()
+ }, [])
+
+ return (
+ <>
+
-
+
+
)
}
diff --git a/packages/cra-template/src/components/NavbarWrapper.tsx b/packages/cra-template/src/components/NavbarWrapper.tsx
deleted file mode 100644
index 6788e8f7f..000000000
--- a/packages/cra-template/src/components/NavbarWrapper.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Dispatch, SetStateAction, useState } from "react"
-import Wallet from "./Wallet"
-import Navbar from "./Navbar"
-import Login from "./Login"
-import { Computer } from "@bitcoin-computer/lib"
-import { Config } from "../types/common"
-
-export default function NavbarWrapper(props: {
- computer: Computer
- config: Config
- setComputer: Dispatch
>
-}) {
- const { computer, config, setComputer } = props
- const [loggedIn] = useState(localStorage.getItem("BIP_39_KEY") !== null)
- const [isOpen, setIsOpen] = useState(false && loggedIn)
- const [showLogin, setShowLogin] = useState(false)
-
- return (
-
-
-
- {showLogin && (
-
- )}
-
- )
-}
diff --git a/packages/cra-template/src/components/SnackBar.tsx b/packages/cra-template/src/components/SnackBar.tsx
deleted file mode 100644
index 13be0b754..000000000
--- a/packages/cra-template/src/components/SnackBar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-function SnackBar(props: any) {
- const { message, success, setShow, callback } = props
-
- const closeMessage = (evt: any) => {
- evt.preventDefault()
- setShow(false)
- }
-
- setTimeout(async () => {
- setShow(false)
- if (callback) callback()
- }, 4000)
-
- return (
-
-
{message}
-
-
-
-
- {
- setIsOpen(false)
- }}
- className="justify-end text-2xl mt-4 mr-4 hover:text-slate-500 cursor-pointer"
- >
-
-
-
Balance
-
-
- {balance / 1e8}
- LTC
-
-
-
-
-
- Address
-
- {computer ? computer.getAddress() : ""}
- {/* */}
-
-
- Public Key
-
- {computer ? computer.getPublicKey() : ""}
- {/* */}
-
-
-
- {
- setIsOpen(false)
- }}
- >
-
- )
-}
diff --git a/packages/cra-template/src/types/common.ts b/packages/cra-template/src/types/common.ts
index 19f04e9e1..5eb750411 100644
--- a/packages/cra-template/src/types/common.ts
+++ b/packages/cra-template/src/types/common.ts
@@ -1,6 +1,2 @@
-export interface Config {
- chain: string
- network: string
- mnemonic: string
- url: string
-}
+export type Chain = "LTC" | "BTC" | "DOGE"
+export type Network = "testnet" | "mainnet" | "regtest"
diff --git a/packages/cra-template/tailwind.config.js b/packages/cra-template/tailwind.config.js
index 37cc65141..1a612e113 100644
--- a/packages/cra-template/tailwind.config.js
+++ b/packages/cra-template/tailwind.config.js
@@ -1,8 +1,16 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ content: ["./src/**/*.{js,jsx,ts,tsx}", "../components/built/**/*.{js,jsx,ts,tsx}"],
+ darkMode: "media",
theme: {
- extend: {},
+ extend: {
+ colors: {
+ "blue-1": "#000F38",
+ "blue-2": "#002A99",
+ "blue-3": "#0046FF",
+ "blue-4": "#A7BFFF",
+ },
+ },
},
plugins: [],
-};
+}
diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index ee4e95842..9216dc687 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -4,7 +4,6 @@ import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
import NavBar from "./components/Navbar"
import Block from "./components/Block"
import Blocks from "./components/Blocks"
-import Wallet from "./components/Wallet"
import Module from "./components/Module"
import Playground from "./components/playground/Playground"
import { initFlowbite } from "flowbite"
@@ -15,6 +14,7 @@ import {
Transaction,
Error404,
UtilsContext,
+ Wallet,
} from "@bitcoin-computer/components"
export default function App() {
useEffect(() => {
diff --git a/packages/explorer/src/components/Drawer.tsx b/packages/explorer/src/components/Drawer.tsx
deleted file mode 100644
index 122d4b186..000000000
--- a/packages/explorer/src/components/Drawer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-export function ShowDrawer({ text, id }: { text: string, id: string }) {
- return
-}
-
-export function Drawer({ Content, id }: any) {
- return (
-
- {Content()}
-
-
-
@@ -161,7 +160,7 @@ function NotLoggedMenu() {
className="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
-
@@ -190,7 +189,7 @@ function NotLoggedMenu() {
-
diff --git a/packages/explorer/src/components/playground/CreateNew.tsx b/packages/explorer/src/components/playground/CreateNew.tsx
index 9c2d57e1f..63d52fa34 100644
--- a/packages/explorer/src/components/playground/CreateNew.tsx
+++ b/packages/explorer/src/components/playground/CreateNew.tsx
@@ -4,6 +4,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage, getValueForType, isValidRev, sleep } from "../../utils"
import { ModSpec } from "./Modspec"
+import { UtilsContext } from "@bitcoin-computer/components"
interface Argument {
type: string
@@ -24,6 +25,7 @@ const CreateNew = (props: {
const [modSpec, setModSpec] = useState()
const [argumentsList, setArgumentsList] = useState([])
const options = ["object", "string", "number", "bigint", "boolean", "undefined", "symbol"]
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
const newArgumentsList = [...argumentsList]
@@ -61,6 +63,7 @@ const CreateNew = (props: {
const handleDeploy = async () => {
try {
+ showLoader(true)
const createClassFunction = new Function(`return ${code?.trim()}`)
const dynamicClass = createClassFunction()
if (
@@ -118,6 +121,8 @@ const CreateNew = (props: {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
setShow(true)
+ } finally {
+ showLoader(false)
}
}
diff --git a/packages/explorer/src/components/playground/DeployModule.tsx b/packages/explorer/src/components/playground/DeployModule.tsx
index 592642550..ed50c0808 100644
--- a/packages/explorer/src/components/playground/DeployModule.tsx
+++ b/packages/explorer/src/components/playground/DeployModule.tsx
@@ -1,6 +1,7 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage } from "../../utils"
+import { UtilsContext } from "@bitcoin-computer/components"
const DeployModule = (props: {
computer: Computer
@@ -11,6 +12,7 @@ const DeployModule = (props: {
}) => {
const { computer, exampleModule, setShow, setModalTitle, setFunctionResult } = props
const [module, setModule] = useState()
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
setModule(exampleModule)
@@ -18,6 +20,7 @@ const DeployModule = (props: {
const handleModuleDeploy = async () => {
try {
+ showLoader(true)
// @ts-ignore
const modSpec = await computer.deploy(module?.trim())
setFunctionResult({ _rev: modSpec, type: "modules" })
@@ -27,6 +30,8 @@ const DeployModule = (props: {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
setShow(true)
+ } finally {
+ showLoader(false)
}
}
diff --git a/packages/explorer/src/components/playground/ExecuteExpression.tsx b/packages/explorer/src/components/playground/ExecuteExpression.tsx
index d0a65ddfc..944e4e210 100644
--- a/packages/explorer/src/components/playground/ExecuteExpression.tsx
+++ b/packages/explorer/src/components/playground/ExecuteExpression.tsx
@@ -3,6 +3,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage, isValidRev } from "../../utils"
import { ModSpec } from "./Modspec"
+import { UtilsContext } from "@bitcoin-computer/components"
interface ExpressionArgument {
name: string
@@ -23,6 +24,7 @@ const ExecuteExpression = (props: {
const [expression, setExpression] = useState()
const [modSpec, setModSpec] = useState()
const [expressionArgumentsList, setExpressoinArgumentsList] = useState([])
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
setExpression(exampleExpression)
@@ -49,6 +51,7 @@ const ExecuteExpression = (props: {
}
const handleExpressionCall = async () => {
try {
+ showLoader(true)
const expressionCode = expression?.trim()
const revMap: any = {}
@@ -86,6 +89,8 @@ const ExecuteExpression = (props: {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
setShow(true)
+ } finally {
+ showLoader(false)
}
}