wao 0.41.3 → 0.41.5

package/app/components/Header.js

@@ -0,0 +1,306 @@
+import { Input, Box, Flex, Icon } from "@chakra-ui/react"
+import { DataItem } from "arbundles"
+import { useState } from "react"
+import { FaAngleRight } from "react-icons/fa6"
+import use from "/lib/use"
+import chalk from "chalk"
+import g from "/lib/global"
+import lf from "localforage"
+import { prop, indexBy, map, clone } from "ramda"
+import { getAct, tags } from "/lib/utils"
+
+export default function Header() {
+  const [path, setPath] = use("path")
+  const [proc, setProc] = use("proc")
+  const [module, setModule] = use("module")
+  const [modules, setModules] = use("modules")
+  const [tab, setTab] = use("tab")
+  const [cache, setCache] = use("cache")
+  const [message, setMessage] = use("message")
+  const [messages, setMessages] = use("messages")
+  const [wallet, setWallet] = use("wallet")
+  const modmap = indexBy(prop("id"))(modules ?? [])
+  const [search, setSearch] = useState("")
+  const [modal, setModal] = useState(false)
+  const [results, setResults] = useState(null)
+  const searchID = search => {
+    let results = []
+    if (g.ao.mem.wasms[search]) {
+      const wasm = g.ao.mem.wasms[search]
+      results.push({ id: search, type: "Module" })
+    }
+    if (g.ao.mem.env[search]) results.push({ id: search, type: "Process" })
+    if (g.ao.mem.msgs[search]) results.push({ id: search, type: "Message" })
+    const assignment = g.searchAssignment(search)
+    if (assignment) results.push({ id: search, type: "Assignment" })
+    if (g.ao.mem.txs[search] && !g.ao.mem.txs[search].bundle) {
+      results.push({ id: search, type: "Tx" })
+    }
+    if (results.length === 0) results.push({ id: search, type: "Account" })
+    setResults(results)
+  }
+  return (
+    <>
+      <Flex w="100%" bg="white" css={{ borderBottom: "1px solid #ddd" }}>
+        <Flex
+          fontWeight="bold"
+          color="#5137C5"
+          fontSize="12px"
+          align="center"
+          justify="center"
+          w="60px"
+        >
+          WAO
+        </Flex>
+        <Flex w="315px" justify="center">
+          <Input
+            fontSize="10px"
+            h="30px"
+            align="center"
+            w="315px"
+            value={search}
+            onClick={() => {
+              if (!modal) {
+                if (/\b[a-zA-Z0-9_-]{43}\b/.test(search)) {
+                  setModal(true)
+                  searchID(search)
+                }
+              }
+            }}
+            onChange={e => {
+              setSearch(e.target.value)
+              if (/\b[a-zA-Z0-9_-]{43}\b/.test(e.target.value)) {
+                setModal(true)
+                searchID(e.target.value)
+              } else {
+                setModal(false)
+              }
+            }}
+            css={{ border: "1px solid #5137C5", borderRadius: "0px" }}
+            placeholder="search modules / processes / messages222"
+          />
+        </Flex>
+        <Flex fontSize="10px" px={4} align="center">
+          <Flex
+            align="center"
+            css={{
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+            onClick={() => setTab("Networks")}
+          >
+            <Box css={{ borderRadius: "3px" }}>{cache}</Box>
+          </Flex>
+          {map(v => {
+            return (
+              <>
+                <Icon size="sm" color="#5137C5" mb="1px" ml={2}>
+                  <FaAngleRight />
+                </Icon>
+                {v.action ? (
+                  <Flex ml={2} px={2} bg="#eee" css={{ borderRadius: "3px" }}>
+                    {v.action}
+                  </Flex>
+                ) : null}
+                <Box
+                  css={{ cursor: "pointer", _hover: { opacity: 0.75 } }}
+                  ml={2}
+                  onClick={() => {
+                    switch (v.type) {
+                      case "module":
+                        g.getModule(v.id)
+                        break
+                      case "process":
+                        g.getProcess(v.id)
+                        break
+                      case "message":
+                        g.getMessage(v.id)
+                        break
+                    }
+                  }}
+                >
+                  {v.name ?? v.id}
+                </Box>
+              </>
+            )
+          })(path)}
+        </Flex>
+        <Flex flex={1} />
+        {wallet ? (
+          <Flex
+            justify="center"
+            fontSize="14px"
+            color="#5137C5"
+            w="200px"
+            px={4}
+            align="center"
+            css={{
+              border: "1px solid #5137C5",
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+            onClick={async () => {
+              setWallet(null)
+              g.walletRef.current = null
+              await lf.removeItem("wallet")
+              g.log(`Wallet Disconnected: ${wallet.address}`, {
+                type: "warning",
+                description: "Wallet Disconnected!",
+              })
+              if (g.prompt) {
+                await g.prompt(
+                  await g.stats(
+                    chalk.red(
+                      `wallet disconnected, using the preset default wallet now...\n\n`
+                    )
+                  )
+                )
+              }
+            }}
+          >
+            {wallet.address.slice(0, 5) + "..." + wallet.address.slice(-5)}
+          </Flex>
+        ) : (
+          <Flex
+            justify="center"
+            fontSize="14px"
+            bg="#5137C5"
+            color="#ddd"
+            w="200px"
+            px={4}
+            align="center"
+            css={{
+              cursor: "pointer",
+              _hover: { opacity: 0.75 },
+            }}
+            onClick={async () => {
+              try {
+                arweaveWallet.connect(
+                  ["ACCESS_ADDRESS", "SIGN_TRANSACTION", "ACCESS_PUBLIC_KEY"],
+                  {
+                    name: "WAO LOCALNET",
+                  }
+                )
+                const userAddress = await arweaveWallet.getActiveAddress()
+                setWallet({ address: userAddress })
+                g.walletRef.current = { address: userAddress }
+                await lf.setItem("wallet", { address: userAddress })
+                g.log(`Wallet Connected: ${userAddress}`, {
+                  type: "success",
+                  description: "Wallet Connected!",
+                })
+                if (g.prompt) {
+                  await g.prompt(
+                    await g.stats(
+                      chalk.green(`wallet connected!\n\n`),
+                      arweaveWallet
+                    )
+                  )
+                }
+              } catch (e) {
+                alert("Arweave wallet not found")
+              }
+            }}
+          >
+            Connect Wallet
+          </Flex>
+        )}
+      </Flex>
+      <>
+        {!modal ? null : (
+          <Flex
+            align="center"
+            justify="center"
+            css={{
+              position: "fixed",
+              top: "30px",
+              left: 0,
+              zIndex: 5,
+            }}
+            bg="rgba(1,1,1,0.5)"
+            w="100vw"
+            h="calc(100vh - 30px)"
+            onClick={() => setModal(false)}
+          >
+            <Box
+              mb="60px"
+              width="315px"
+              bg="white"
+              css={{ position: "absolute", top: 0, left: "60px" }}
+              onClick={e => {
+                e.stopPropagation()
+              }}
+            >
+              {(results ?? []).length === 0 ? (
+                <Flex
+                  h="60px"
+                  bg={"white"}
+                  fontSize="12px"
+                  p={4}
+                  direction="column"
+                  justify="center"
+                  color="#5137C5"
+                  css={{
+                    borderBottom: "1px solid #ddd",
+                    cursor: "pointer",
+                    _hover: { opacity: 0.75 },
+                  }}
+                >
+                  Not Found
+                </Flex>
+              ) : (
+                map(v => {
+                  return (
+                    <Flex
+                      h="60px"
+                      bg={"white"}
+                      fontSize="12px"
+                      p={4}
+                      direction="column"
+                      justify="center"
+                      onClick={() => {
+                        switch (v.type) {
+                          case "Module":
+                            g.getModule(v.id)
+                            break
+                          case "Process":
+                            g.getProcess(v.id)
+                            break
+                          case "Message":
+                            g.getMessage(v.id)
+                            break
+                          case "Tx":
+                            g.getTx(v.id)
+                            break
+                          case "Assignment":
+                            g.getAssingment(v.id)
+                            break
+                          case "Account":
+                            g.getEOS(v.id)
+                            break
+                        }
+                        setModal(false)
+                      }}
+                      css={{
+                        borderBottom: "1px solid #ddd",
+                        cursor: "pointer",
+                        _hover: { opacity: 0.75 },
+                      }}
+                    >
+                      <Box fontWeight="bold" color="#5137C5" mb={1}>
+                        {v.type}
+                      </Box>
+                      <Box fontSize="10px" color={"#222"}>
+                        {search}
+                      </Box>
+                    </Flex>
+                  )
+                })(results || [])
+              )}
+            </Box>
+          </Flex>
+        )}
+      </>
+    </>
+  )
+}

package/app/components/Left.js

@@ -0,0 +1,28 @@
+import use from "/lib/use"
+
+import LeftProjects from "/components/left/LeftProjects"
+import LeftTests from "/components/left/LeftTests"
+import LeftModules from "/components/left/LeftModules"
+import LeftProcesses from "/components/left/LeftProcesses"
+import LeftMessages from "/components/left/LeftMessages"
+import LeftNetworks from "/components/left/LeftNetworks"
+
+export default function Left() {
+  const [tab, setTab] = use("tab")
+  const [init, setInit] = use("init")
+  if (!init) return null
+  switch (tab) {
+    case "Projects":
+      return <LeftProjects />
+    case "Tests":
+      return <LeftTests />
+    case "Modules":
+      return <LeftModules />
+    case "Processes":
+      return <LeftProcesses />
+    case "Messages":
+      return <LeftMessages />
+    case "Networks":
+      return <LeftNetworks />
+  }
+}

package/app/components/Logo.js

@@ -0,0 +1,34 @@
+import { Box, Flex } from "@chakra-ui/react"
+import { Spinner } from "@chakra-ui/react"
+export default function Logo() {
+  return (
+    <Flex
+      w="100%"
+      h="100%"
+      align="center"
+      justify="center"
+      fontSize="30px"
+      bg="#5137C5"
+      color="#9C89F6"
+      direction="column"
+      css={{ position: "fixed", top: 0, left: 0, zIndex: 100 }}
+    >
+      <Flex css={{ position: "relative" }} align="center" justify="center">
+        <Spinner
+          boxSize="350px"
+          css={{ position: "absolute" }}
+          borderWidth="5px"
+          animationDuration="1s"
+        />
+        <Box
+          boxSize="300px"
+          css={{
+            backgroundImage: "url(/logo.png)",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+      </Flex>
+    </Flex>
+  )
+}

package/app/components/Middle.js

@@ -0,0 +1,37 @@
+import { Flex } from "@chakra-ui/react"
+import use from "/lib/use"
+
+import MiddleTests from "/components/middle/MiddleTests"
+import MiddleModules from "/components/middle/MiddleModules"
+import MiddleProcesses from "/components/middle/MiddleProcesses"
+import MiddleMessages from "/components/middle/MiddleMessages"
+import MiddleNetworks from "/components/middle/MiddleNetworks"
+import MiddleEntity from "/components/middle/MiddleEntity"
+import MiddleBlocks from "/components/middle/MiddleBlocks"
+
+export default function Middle() {
+  const [tab, setTab] = use("tab")
+  const [init, setInit] = use("init")
+  if (!init) return null
+  const middle = (() => {
+    switch (tab) {
+      case "Projects":
+        return null
+      case "Tests":
+        return <MiddleTests />
+      case "Modules":
+        return <MiddleModules />
+      case "Processes":
+        return <MiddleProcesses />
+      case "Messages":
+        return <MiddleMessages />
+      case "Networks":
+        return <MiddleNetworks />
+      case "Blocks":
+        return <MiddleBlocks />
+      case "Entity":
+        return <MiddleEntity />
+    }
+  })()
+  return <Flex w="100%">{!init ? null : <Flex w="100%">{middle}</Flex>}</Flex>
+}

package/app/components/Sidebar.js

@@ -0,0 +1,93 @@
+import {
+  Input,
+  NativeSelect,
+  Image,
+  Box,
+  Flex,
+  Textarea,
+  Icon,
+} from "@chakra-ui/react"
+import { Tooltip } from "@/components/ui/tooltip"
+import { keys, map, includes } from "ramda"
+import use from "/lib/use"
+
+import {
+  FaPuzzlePiece,
+  FaWallet,
+  FaCode,
+  FaBug,
+  FaCodeCompare,
+  FaEnvelopesBulk,
+  FaCubes,
+  FaNetworkWired,
+} from "react-icons/fa6"
+
+const tabmap = {
+  Projects: { icon: <FaCode /> },
+  Modules: { icon: <FaPuzzlePiece /> },
+  Processes: { icon: <FaCodeCompare /> },
+  Messages: { icon: <FaEnvelopesBulk /> },
+  Blocks: { icon: <FaCubes /> },
+  Entity: { icon: <FaWallet /> },
+  //    Tokens: { icon: <FaCoins /> },
+  //    Storage: { icon: <FaHardDrive /> },
+  //    Database: { icon: <FaDatabase /> },
+  Networks: { icon: <FaNetworkWired /> },
+  Tests: { icon: <FaBug /> },
+}
+const tabs = keys(tabmap)
+
+export default function Sidebar({}) {
+  const [tab, setTab] = use("tab")
+  const [init] = use("init")
+  const [proc] = use("proc")
+  const [acc] = use("acc")
+  return !init ? null : (
+    <Flex css={{ overflowY: "auto", borderRight: "1px solid #ddd" }}>
+      <Flex direction="column" w="60px">
+        {map(v => {
+          return (
+            <Tooltip
+              content={v.toUpperCase()}
+              positioning={{ placement: "right-end" }}
+              openDelay={0}
+              closeDelay={0}
+            >
+              <Flex
+                h="60px"
+                w="100%"
+                fontSize="12px"
+                align="center"
+                css={{
+                  cursor: "pointer",
+                  _hover: { opacity: 0.75 },
+                  flexShrink: "0",
+                }}
+                onClick={() => {
+                  if (v === "Messages" && proc === null) return
+                  if (v === "Accounts" && acc === null) return
+                  if (includes(v, ["Tokens", "Storage", "Database"])) {
+                    return alert("Coming Soon!")
+                  }
+                  setTab(v)
+                }}
+                bg={v === tab ? "#5137C5" : ""}
+                color={
+                  includes(v, ["Accounts", "Tokens", "Storage", "Database"]) ||
+                  (v === "Messages" && proc === null)
+                    ? "#999"
+                    : v === tab
+                      ? "white"
+                      : ""
+                }
+                justify="center"
+              >
+                <Icon size="lg">{tabmap[v].icon}</Icon>
+              </Flex>
+            </Tooltip>
+          )
+        })(tabs)}
+      </Flex>
+    </Flex>
+  )
+}

package/app/components/Tags.js

@@ -0,0 +1,42 @@
+import { Box, Flex } from "@chakra-ui/react"
+import { map } from "ramda"
+import g from "/lib/global"
+
+const isaddr = /^[A-Za-z0-9_-]{43}$/
+export default function Tags({ tags }) {
+  return (
+    <>
+      <Flex mb={2} fontWeight="bold" color="#5137C5" fontSize="14px">
+        Tags
+      </Flex>
+      {map(v => {
+        const addr = isaddr.test(v.value)
+        return (
+          <Flex my={2} align="center">
+            <Box
+              w="130px"
+              color="white"
+              bg="#5137C5"
+              px={2}
+              mr={4}
+              css={{
+                borderRadius: "3px",
+              }}
+            >
+              {v.name}
+            </Box>
+            <Box
+              onClick={() => addr && g.getAccount(v.value)}
+              css={{
+                _hover: { opacity: addr ? 0.75 : 1 },
+                cursor: addr ? "pointer" : "default",
+              }}
+            >
+              {v.value}
+            </Box>
+          </Flex>
+        )
+      })(tags)}
+    </>
+  )
+}