@pioneer-platform/pioneer-react 0.2.35 → 0.2.36

package/src/lib/pages/home/index.tsx

@@ -14,15 +14,33 @@ import { usePioneer } from "lib/context/Pioneer";
 import AssetSelect from "lib/components/AssetSelect";
 import BlockchainSelect from "lib/components/BlockchainSelect";
 import WalletSelect from "lib/components/WalletSelect";
+import Onboarding from "lib/components/Onboarding";
 
 const Home = () => {
   const { state } = usePioneer();
-  const { api, app, context, assetContext, blockchainContext, pubkeyContext } =
+  const { api, app, context, assetContext, blockchainContext, pubkeyContext, modals } =
     state;
   const [address, setAddress] = useState("");
   const [modalType, setModalType] = useState("");
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const onStart = async function(){
+      try{
+          console.log("onStart")
+          let isOnboarded = await localStorage.getItem("isOnboarded")
+          if(!isOnboarded){
+              console.log("Starting onboarding process")
+              openModal("Onboarding")
+          }
+      }catch(e){
+          console.error(e)
+      }
+  }
+    useEffect(() => {
+        onStart()
+    }, []);
+
+
   useEffect(() => {
     console.log("2 pubkeyContext: ", pubkeyContext);
     setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
@@ -33,6 +51,13 @@ const Home = () => {
     onOpen();
   };
 
+  let refresh = async () => {
+      //TODO why do I need to press refresh?
+      console.log("2 pubkeyContext: ", pubkeyContext);
+      setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
+      console.log("assetContext: ",assetContext)
+  }
+
   return (
     <div>
       <Modal isOpen={isOpen} onClose={() => onClose()} size="xl">
@@ -58,6 +83,16 @@ const Home = () => {
               </div>
             )}
             {modalType === "View Address" && <div>address: {address}</div>}
+            {modalType === "Select Outbound" && (
+              <div>
+                <BlockchainSelect onClose={onClose}></BlockchainSelect>
+              </div>
+            )}
+              {modalType === "Onboarding" && (
+                  <div>
+                      <Onboarding onClose={onClose}></Onboarding>
+                  </div>
+              )}
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={onClose}>
@@ -66,7 +101,7 @@ const Home = () => {
           </ModalFooter>
         </ModalContent>
       </Modal>
-      Context: {context}
+      Wallet Context: {context}
       <Button onClick={() => openModal("Select wallet")}>Select wallet</Button>
       <br />
       Asset Context: {assetContext?.name}
@@ -77,9 +112,13 @@ const Home = () => {
         Select Blockchain
       </Button>
       <br />
-      Address: {address}
+      Address for context: {address}
       <Button onClick={() => openModal("View Address")}>View Address</Button>
       <br />
+      Outbound asset context: {address}
+      <Button onClick={() => openModal("Select Outbound")}>Select asset</Button>
+      <br />
+      <Button onClick={refresh}>refresh</Button>
     </div>
   );
 };

package/dist/index_622864fe.js

@@ -1,205 +0,0 @@
-import { u as usePioneer, j as jsxRuntimeExports, S as Search2Icon, M as MiddleEllipsis, W as WalletSelect, A as AssetSelect } from "./index_bc632802.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("2 pubkeyContext: ", pubkeyContext);
-    setAddress(pubkeyContext.master || pubkeyContext.pubkey || pubkeyContext);
-  }, [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: ",
-    address,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: () => openModal("View Address"), children: "View Address" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] });
-};
-export {
-  Home as default
-};