@pioneer-platform/pioneer-react 0.0.2 → 0.2.32

package/dist/index_3bde86fb.js

@@ -0,0 +1,205 @@
+import { u as usePioneer, j as jsxRuntimeExports, S as Search2Icon, M as MiddleEllipsis, W as WalletSelect, A as AssetSelect } from "./index_49fce0b0.js";
+import { Stack, InputGroup, InputLeftElement, Input, Box, Text, Checkbox, HStack, Avatar, Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter } from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+import "react-dom";
+import "@emotion/react";
+function BlockchainSelect({ onClose }) {
+  const { state, dispatch } = usePioneer();
+  const { api, app, user } = state;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState([]);
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+  const [showOwnedAssets, setShowOwnedAssets] = useState(false);
+  const [timeOut, setTimeOut] = useState(null);
+  const itemsPerPage = 6;
+  const handleSelectClick = async (asset) => {
+    try {
+      const changeAssetContext = await app.setAssetContext(asset);
+      onClose();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const onSearch = async function(searchQuery2) {
+    try {
+      if (!api) {
+        alert("Failed to init API!");
+        return;
+      }
+      const search = {
+        limit: itemsPerPage,
+        skip: currentPageIndex * itemsPerPage,
+        // Use currentPageIndex for pagination
+        collection: "blockchains",
+        searchQuery: searchQuery2,
+        searchFields: ["name", "symbol"]
+      };
+      const info = await api.SearchAtlas(search);
+      const currentPageData = info.data.results;
+      setCurrentPage(currentPageData);
+      setTotalBlockchains(info.data.total);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const fetchPage = async (pageIndex) => {
+    try {
+      if (!api) {
+        alert("Failed to init API!");
+        return;
+      }
+      const search = {
+        limit: itemsPerPage,
+        skip: pageIndex * itemsPerPage,
+        collection: "blockchains",
+        ownedBy: showOwnedAssets ? user.id : void 0
+      };
+      const info = await api.SearchAtlas(search);
+      const currentPageData = info.data.results;
+      setCurrentPage(currentPageData);
+      setTotalBlockchains(info.data.total);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  useEffect(() => {
+    fetchPage(currentPageIndex);
+  }, [currentPageIndex, showOwnedAssets]);
+  const [totalBlockchains, setTotalBlockchains] = useState(0);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { spacing: 4, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(InputLeftElement, { pointerEvents: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search2Icon, { color: "gray.300" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Input,
+        {
+          placeholder: "Bitcoin...",
+          type: "text",
+          value: searchQuery,
+          onChange: (e) => {
+            setSearchQuery(e.target.value);
+            if (timeOut) {
+              clearTimeout(timeOut);
+            }
+            setTimeOut(
+              // @ts-ignore
+              setTimeout(() => {
+                setCurrentPageIndex(0);
+                onSearch(e.target.value);
+              }, 1e3)
+            );
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { fontSize: "2xl", children: [
+        "Total Chains: ",
+        totalBlockchains
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
+        {
+          isChecked: showOwnedAssets,
+          onChange: () => setShowOwnedAssets(!showOwnedAssets),
+          children: "Show only blockchains you have assets on"
+        }
+      ),
+      currentPage.map((blockchain, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(HStack, { spacing: 4, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { src: blockchain == null ? void 0 : blockchain.image }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
+              "blockchain: ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx(MiddleEllipsis, { text: blockchain == null ? void 0 : blockchain.caip })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
+              "name: ",
+              blockchain.name
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(HStack, { mt: 2, spacing: 2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "outline",
+            onClick: () => handleSelectClick(blockchain),
+            children: "Select"
+          }
+        ) })
+      ] }, index))
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(HStack, { mt: 4, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          isDisabled: currentPageIndex === 0,
+          onClick: () => setCurrentPageIndex(currentPageIndex - 1),
+          children: "Previous Page"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          isDisabled: currentPage.length < itemsPerPage,
+          onClick: () => setCurrentPageIndex(currentPageIndex + 1),
+          children: "Next Page"
+        }
+      )
+    ] })
+  ] });
+}
+const Home = () => {
+  const { state } = usePioneer();
+  const { api, app, context, assetContext, blockchainContext, pubkeyContext } = state;
+  const [address, setAddress] = useState("");
+  const [modalType, setModalType] = useState("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  useEffect(() => {
+    console.log("pubkeyContext: ", pubkeyContext);
+    setAddress(pubkeyContext.master || pubkeyContext.pubkey);
+  }, [pubkeyContext]);
+  const openModal = (type) => {
+    setModalType(type);
+    onOpen();
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { isOpen, onClose: () => onClose(), size: "xl", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ModalOverlay, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalContent, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalHeader, { children: modalType }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalCloseButton, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalBody, { children: [
+          modalType === "Select wallet" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(WalletSelect, { onClose }) }),
+          modalType === "Select Asset" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AssetSelect, { onClose }) }),
+          modalType === "Select Blockchain" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(BlockchainSelect, { onClose }) }),
+          modalType === "View Address" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            "address: ",
+            address
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ModalFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { colorScheme: "blue", onClick: onClose, children: "Close" }) })
+      ] })
+    ] }),
+    "Context: ",
+    context,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select wallet"), children: "Select wallet" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "Asset Context: ",
+    assetContext == null ? void 0 : assetContext.name,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select Asset"), children: "Select Asset" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "Blockchain Context: ",
+    blockchainContext == null ? void 0 : blockchainContext.name,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("Select Blockchain"), children: "Select Blockchain" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "Address: ",
+    (pubkeyContext == null ? void 0 : pubkeyContext.master) || (pubkeyContext == null ? void 0 : pubkeyContext.pubkey),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("View Address"), children: "View Address" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+  ] });
+};
+export {
+  Home as default
+};