@pioneer-platform/pioneer-react 0.2.36 → 0.2.37

package/dist/index.js

@@ -102719,7 +102719,7 @@ CAUSE: ${cause === null || cause === void 0 ? void 0 : cause.stack}`;
   };
   var REGISTRATION_IN_PROGRESS = "REGISTRATION_IN_PROGRESS";
   var FORWARDER_ID = "FORWARDER_ID";
-  var Onboarding = (
+  var Onboarding$1 = (
     /** @class */
     function() {
       function Onboarding2(_a2) {
@@ -102877,7 +102877,7 @@ CAUSE: ${cause === null || cause === void 0 ? void 0 : cause.stack}`;
   );
   const metamaskOnboarding_es = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: Onboarding
+    default: Onboarding$1
   }, Symbol.toStringTag, { value: "Module" }));
   const require$$1$9 = /* @__PURE__ */ getAugmentedNamespace(metamaskOnboarding_es);
   var dist$7 = {};
@@ -149764,7 +149764,7 @@ CAUSE: ${cause === null || cause === void 0 ? void 0 : cause.stack}`;
     rng2 = rng2 || ((size2) => buffer$2.Buffer.from(utils_1$l.randomBytes(size2)));
     return entropyToMnemonic(rng2(strength / 8), wordlist2);
   }
-  src$3.generateMnemonic = generateMnemonic;
+  var generateMnemonic_1 = src$3.generateMnemonic = generateMnemonic;
   function validateMnemonic(mnemonic, wordlist2) {
     try {
       mnemonicToEntropy(mnemonic, wordlist2);
@@ -393793,14 +393793,116 @@ Proven: ${(0, encoding_1$e.toHex)(op2.key)}`);
       ] })
     ] });
   }
+  const Onboarding = ({ onClose }) => {
+    const { state: state2, dispatch: dispatch2 } = usePioneer();
+    const { api: api2, app, user, context: context2 } = state2;
+    const [walletDescriptions, setWalletDescriptions] = React.useState([]);
+    const [balances, setBalances] = React.useState([]);
+    React.useState(false);
+    React.useState(false);
+    React.useState(false);
+    React.useState("");
+    React.useState("");
+    const [seedPhrase, setSeedPhrase] = React.useState("");
+    const [error2, setError] = React.useState(null);
+    const [isValid, setIsValid] = React.useState(false);
+    const [action, setAction] = React.useState(null);
+    const setUser = async function() {
+      try {
+        if (user && user.wallets) {
+          const { wallets, walletDescriptions: walletDescriptions2, balances: balances2, pubkeys: pubkeys2 } = user;
+          setWalletDescriptions(walletDescriptions2);
+          setBalances(balances2);
+        }
+      } catch (e2) {
+        console.error("header e: ", e2);
+      }
+    };
+    React.useEffect(() => {
+      setUser();
+    }, [user]);
+    React.useEffect(() => {
+      const words2 = seedPhrase.trim().split(" ");
+      if (words2.length === 12 && words2.every((word) => word.length > 0)) {
+        setError(null);
+        setIsValid(true);
+      } else {
+        setError("Seed phrase must be exactly 12 words");
+        setIsValid(false);
+      }
+    }, [seedPhrase]);
+    const handleSubmit = (event2) => {
+      event2.preventDefault();
+      if (isValid) {
+        console.log("Seed Phrase Submitted:", seedPhrase);
+        localStorage.setItem("seedPhrase", seedPhrase);
+        localStorage.setItem("isOnboarded", "true");
+        alert("Wallet Saved to localstorage. please restart app /n (Note: this is not secure! use a hardware wallet!)");
+        onClose();
+      }
+    };
+    const handleImport = () => {
+      setSeedPhrase("");
+      setAction("import");
+    };
+    const handleGenerate = () => {
+      const newSeedPhrase = generateMnemonic_1();
+      setSeedPhrase(newSeedPhrase);
+      setAction("generate");
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(react.Box, { children: [
+      "Welcome to Pioneer SDK! Please select a wallet to continue.",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(react.Avatar, { size: "lg", src: PIONEER_ICON }),
+      action ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(react.FormControl, { isInvalid: !!error2, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(react.FormLabel, { htmlFor: "seedPhrase", children: "Seed Phrase" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              react.Input,
+              {
+                id: "seedPhrase",
+                name: "seedPhrase",
+                type: "text",
+                value: seedPhrase,
+                onChange: (e2) => setSeedPhrase(e2.target.value),
+                borderColor: isValid ? "green.500" : "red.500"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(react.FormErrorMessage, { children: error2 })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(react.Button, { mt: 4, colorScheme: "teal", type: "submit", children: "Submit" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(react.Button, { mt: 4, onClick: () => setAction(null), children: "Go Back" })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(react.VStack, { spacing: 4, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(react.Button, { colorScheme: "teal", onClick: handleGenerate, children: "Generate New Seed Phrase" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(react.Button, { colorScheme: "teal", onClick: handleImport, children: "Import Seed Phrase" })
+      ] })
+    ] });
+  };
   const SettingsModal = ({ isOpen, onClose }) => {
     const { state: state2 } = usePioneer();
     const { app, status: status2 } = state2;
+    const [isOnboarded, setIsOnboarded] = React.useState(false);
+    const onStart = async function() {
+      try {
+        console.log("onStart");
+        let isOnboarded2 = await localStorage.getItem("isOnboarded");
+        if (!isOnboarded2) {
+          console.log("Starting onboarding process");
+        }
+      } catch (e2) {
+        console.error(e2);
+      }
+    };
+    React.useEffect(() => {
+      onStart();
+    }, []);
     React.useEffect(() => {
     }, [app, app == null ? void 0 : app.balances, app == null ? void 0 : app.pubkeys, app == null ? void 0 : app.wallets, app == null ? void 0 : app.paths, status2]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(react.Modal, { isOpen, onClose, size: "xl", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalOverlay, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(react.ModalContent, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalContent, { children: !isOnboarded ? /* @__PURE__ */ jsxRuntimeExports.jsx(Onboarding, { onClose }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalHeader, { children: "Pioneer Settings" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalCloseButton, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(react.Tabs, { variant: "enclosed", children: [
@@ -393817,7 +393919,7 @@ Proven: ${(0, encoding_1$e.toHex)(op2.key)}`);
           ] })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(react.ModalFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(react.Button, { colorScheme: "blue", mr: 3, onClick: onClose, children: "Close" }) })
-      ] })
+      ] }) })
     ] });
   };
   const getWalletBadgeContent = (walletType) => {
@@ -393866,6 +393968,21 @@ Proven: ${(0, encoding_1$e.toHex)(op2.key)}`);
     React.useState(false);
     React.useState([]);
     const [balances, setBalances] = React.useState([]);
+    const onStart = async function() {
+      try {
+        console.log("onStart");
+        let isOnboarded = await localStorage.getItem("isOnboarded");
+        if (!isOnboarded) {
+          console.log("Starting onboarding process");
+          onOpen();
+        }
+      } catch (e2) {
+        console.error(e2);
+      }
+    };
+    React.useEffect(() => {
+      onStart();
+    }, []);
     const settingsSelected = async function() {
       try {
         onOpen();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pioneer-platform/pioneer-react",
-  "version": "0.2.36",
+  "version": "0.2.37",
   "author": "highlander",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/lib/components/Onboarding/index.tsx

@@ -128,6 +128,8 @@ const Onboarding: React.FC<ModalProps> = ({ onClose }) => {
             localStorage.setItem("seedPhrase", seedPhrase);
             // @ts-ignore
             localStorage.setItem("isOnboarded", "true");
+            alert("Wallet Saved to localstorage. please restart app /n (Note: this is not secure! use a hardware wallet!)");
+            onClose()
         }
     };
 

package/src/lib/components/modals/SettingsModal.tsx

@@ -18,6 +18,7 @@ import Balances from "lib/components/pioneer/Pioneer/Balances";
 import Wallets from "lib/components/pioneer/Pioneer/Wallets";
 import Paths from "lib/components/pioneer/Pioneer/Paths";
 import Pubkeys from "lib/components/pioneer/Pioneer/Pubkeys";
+import Onboarding from "lib/components/Onboarding";
 import { usePioneer } from "lib/context/Pioneer";
 
 interface SettingsModalProps {
@@ -28,6 +29,22 @@ interface SettingsModalProps {
 const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
   const { state } = usePioneer();
   const { app, status } = state;
+  const [isOnboarded, setIsOnboarded] = useState(false);
+
+  const onStart = async function(){
+    try{
+      console.log("onStart")
+      let isOnboarded = await localStorage.getItem("isOnboarded")
+      if(!isOnboarded){
+        console.log("Starting onboarding process")
+      }
+    }catch(e){
+      console.error(e)
+    }
+  }
+  useEffect(() => {
+    onStart()
+  }, []);
 
   useEffect(() => {
     //console.log("app: ", app);
@@ -37,37 +54,39 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
     <Modal isOpen={isOpen} onClose={onClose} size={"xl"}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Pioneer Settings</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <Tabs variant="enclosed">
-            <TabList>
-              <Tab>Wallets</Tab>
-              <Tab>Nodes</Tab>
-              <Tab>PubKeys</Tab>
-              <Tab>Balances</Tab>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <Wallets wallets={app?.wallets || []} />
-              </TabPanel>
-              {/*<TabPanel>*/}
-              {/*  <Paths paths={app?.paths || []} />*/}
-              {/*</TabPanel>*/}
-              <TabPanel>
-                <Pubkeys pubkeys={app?.pubkeys || []} />
-              </TabPanel>
-              <TabPanel>
-                <Balances balances={app?.balances || []} />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </ModalBody>
-        <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={onClose}>
-            Close
-          </Button>
-        </ModalFooter>
+        {!isOnboarded ? (<Onboarding onClose={onClose} />) : (<div>
+          <ModalHeader>Pioneer Settings</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Tabs variant="enclosed">
+              <TabList>
+                <Tab>Wallets</Tab>
+                <Tab>Nodes</Tab>
+                <Tab>PubKeys</Tab>
+                <Tab>Balances</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <Wallets wallets={app?.wallets || []} />
+                </TabPanel>
+                {/*<TabPanel>*/}
+                {/*  <Paths paths={app?.paths || []} />*/}
+                {/*</TabPanel>*/}
+                <TabPanel>
+                  <Pubkeys pubkeys={app?.pubkeys || []} />
+                </TabPanel>
+                <TabPanel>
+                  <Balances balances={app?.balances || []} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </div>)}
       </ModalContent>
     </Modal>
   );

package/src/lib/components/pioneer/index.tsx

@@ -136,6 +136,22 @@ const Pioneer = () => {
   const [pubkeys, setPubkeys] = useState([]);
   const [balances, setBalances] = useState([]);
 
+  const onStart = async function(){
+    try{
+      console.log("onStart")
+      let isOnboarded = await localStorage.getItem("isOnboarded")
+      if(!isOnboarded){
+        console.log("Starting onboarding process")
+        onOpen();
+      }
+    }catch(e){
+      console.error(e)
+    }
+  }
+  useEffect(() => {
+    onStart()
+  }, []);
+
   const settingsSelected = async function () {
     try {
       //console.log("settingsSelected");
@@ -248,9 +264,12 @@ const Pioneer = () => {
               dispatch({ type: "SET_PUBKEY_CONTEXT", payload: pubkeyContext });
             }
           }
+
           //if address[0] !== pubkey
 
-          // re-register metamask with more pubkeys
+          //
+
+
         });
       }
     } catch (e) {

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

@@ -14,7 +14,6 @@ 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();
@@ -24,22 +23,6 @@ const Home = () => {
   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);
@@ -88,11 +71,6 @@ const Home = () => {
                 <BlockchainSelect onClose={onClose}></BlockchainSelect>
               </div>
             )}
-              {modalType === "Onboarding" && (
-                  <div>
-                      <Onboarding onClose={onClose}></Onboarding>
-                  </div>
-              )}
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="blue" onClick={onClose}>

package/src/lib/layout/Pioneer/Balances.tsx

@@ -1,290 +0,0 @@
-import { Search2Icon } from "@chakra-ui/icons";
-import {
-  Avatar,
-  AvatarBadge,
-  Box,
-  Button,
-  HStack,
-  Stack,
-  Image,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  ModalFooter,
-  useDisclosure,
-  InputGroup,
-  InputLeftElement,
-  Input,
-} from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
-
-//@ts-ignore
-import KEEPKEY_ICON from "lib/assets/png/keepkey.png";
-//@ts-ignore
-import METAMASK_ICON from "lib/assets/png/metamask.png";
-//@ts-ignore
-import PIONEER_ICON from "lib/assets/png/pioneer.png";
-import { usePioneer } from "lib/context/Pioneer";
-
-import Receive from "./Receive";
-import Send from "./Send";
-import View from "./View";
-
-// Import icons
-// @ts-ignore
-// @ts-ignore
-// @ts-ignore
-
-interface Balance {
-  image?: string;
-  symbol: string;
-  name?: string;
-  balance?: any;
-  size?: string;
-  context?: string; // Added context field
-}
-
-const getWalletType = (user: { walletDescriptions: any[] }, context: any) => {
-  if (user && user.walletDescriptions) {
-    const wallet = user.walletDescriptions.find((w) => w.id === context);
-    return wallet ? wallet.type : null;
-  }
-  return null;
-};
-
-const getWalletBadgeContent = (walletType: string) => {
-  const icons: any = {
-    metamask: METAMASK_ICON,
-    keepkey: KEEPKEY_ICON,
-    native: PIONEER_ICON,
-  };
-
-  const icon = icons[walletType];
-
-  if (!icon) {
-    return null;
-  }
-
-  return (
-    <AvatarBadge boxSize="1.25em" bg="green.500">
-      <Image rounded="full" src={icon} />
-    </AvatarBadge>
-  );
-};
-
-export default function Balances({ balances }: { balances: Balance[] }) {
-  const { state, dispatch } = usePioneer();
-  const { user } = state;
-  const [currentPage, setCurrentPage] = useState(1);
-  const [selectedBalance, setSelectedBalance] = useState<Balance | null>(null);
-  const [selectedAction, setSelectedAction] = useState<string | null>(null);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const [searchQuery, setSearchQuery] = useState("");
-  const balancesPerPage = 3;
-
-  const handlePageChange = (pageNumber: any) => {
-    setCurrentPage(pageNumber);
-  };
-
-  const handleSendClick = (balance: Balance) => {
-    setSelectedBalance(balance);
-    setSelectedAction("send");
-    onOpen();
-  };
-
-  const handleReceiveClick = (balance: Balance) => {
-    setSelectedBalance(balance);
-    setSelectedAction("receive");
-    onOpen();
-  };
-
-  const handleViewClick = (balance: Balance) => {
-    setSelectedBalance(balance);
-    setSelectedAction("view");
-    onOpen();
-  };
-
-  useEffect(() => {
-    const setUser = async () => {
-      try {
-        if (user && user.wallets) {
-          const { walletDescriptions, balances } = user;
-          // console.log("walletDescriptions: ", walletDescriptions);
-          const updatedBalances = balances.map((balance: Balance) => {
-            const walletType = getWalletType(user, balance.context);
-            const badgeContent = getWalletBadgeContent(walletType);
-            // @ts-ignore
-            return {
-              ...balance,
-              context: {
-                // @ts-ignore
-                ...balance.context,
-                badge: badgeContent,
-              },
-            };
-          });
-          dispatch({ type: "SET_BALANCES", payload: updatedBalances });
-        }
-      } catch (e) {
-        console.error("Error: ", e);
-      }
-    };
-
-    setUser();
-  }, [user]);
-
-  // Filter and sort balances based on search query
-  const filteredBalances = balances.filter((balance: Balance) => {
-    // Convert the search query and balance symbol/name to lowercase for case-insensitive search
-    const query = searchQuery.toLowerCase();
-    const symbol = balance.symbol.toLowerCase();
-    const name = balance.name ? balance.name.toLowerCase() : "";
-
-    // Check if the symbol or name contains the search query
-    return symbol.includes(query) || name.includes(query);
-  });
-
-  const sortedBalances = filteredBalances.sort(
-    (a: Balance, b: Balance) => b.balance - a.balance
-  );
-  const currentBalances = sortedBalances.slice(
-    (currentPage - 1) * balancesPerPage,
-    currentPage * balancesPerPage
-  );
-  const totalPages = Math.ceil(filteredBalances.length / balancesPerPage);
-
-  // Function to generate custom pagination array
-  const generatePaginationArray = () => {
-    const paginationArray = [];
-    const totalPageButtons = 5; // Number of page buttons to display around the current page
-
-    if (totalPages <= totalPageButtons) {
-      // If total pages are less than or equal to totalPageButtons, show all page numbers
-      for (let i = 1; i <= totalPages; i++) {
-        paginationArray.push(i);
-      }
-    } else {
-      // If total pages are more than totalPageButtons, generate custom pagination
-      const middleButton = Math.floor(totalPageButtons / 2);
-      const startPage = Math.max(currentPage - middleButton, 1);
-      const endPage = Math.min(currentPage + middleButton, totalPages);
-
-      if (startPage > 1) {
-        // Add the first page and ellipsis if the current page is far enough from the first page
-        paginationArray.push(1, "...");
-      }
-
-      // Add page numbers between startPage and endPage (inclusive)
-      for (let i = startPage; i <= endPage; i++) {
-        paginationArray.push(i);
-      }
-
-      if (endPage < totalPages) {
-        // Add the last page and ellipsis if the current page is far enough from the last page
-        paginationArray.push("...", totalPages);
-      }
-    }
-
-    return paginationArray;
-  };
-
-  return (
-    <Stack spacing={4}>
-      <InputGroup>
-        <InputLeftElement pointerEvents="none">
-          <Search2Icon color="gray.300" />
-        </InputLeftElement>
-        <Input
-          placeholder="Bitcoin..."
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-      </InputGroup>
-      {currentBalances.map((balance: Balance, index: number) => (
-        <Box key={index}>
-          <HStack spacing={4} alignItems="center">
-            <Avatar src={balance.image} />
-            <Box>
-              <small>asset: {balance.symbol}</small>
-              <br />
-              <small>balance: {balance.balance}</small>
-            </Box>
-          </HStack>
-          <HStack mt={2} spacing={2}>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => handleSendClick(balance)}
-            >
-              Send
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => handleReceiveClick(balance)}
-            >
-              Receive
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => handleViewClick(balance)}
-            >
-              View
-            </Button>
-          </HStack>
-        </Box>
-      ))}
-      <Box mt={4}>
-        {generatePaginationArray().map((page, index) => (
-          <Button
-            key={index}
-            size="sm"
-            variant={currentPage === page ? "solid" : "outline"}
-            onClick={() => handlePageChange(page)}
-          >
-            {page === "..." ? "..." : page}
-          </Button>
-        ))}
-      </Box>
-
-      <Modal isOpen={isOpen} onClose={onClose} isCentered blockScrollOnMount>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>{selectedAction}</ModalHeader>
-          <ModalCloseButton />
-          {selectedAction === "send" && (
-            <div>
-              <h3>Selected Action: Send</h3>
-              <p>Selected Asset: {selectedBalance?.symbol}</p>
-              <Send asset={selectedBalance} />
-            </div>
-          )}
-          {selectedAction === "receive" && (
-            <div>
-              <h3>Selected Action: Receive</h3>
-              <p>Selected Asset: {selectedBalance?.symbol}</p>
-              <Receive />
-            </div>
-          )}
-          {selectedAction === "view" && (
-            <div>
-              <h3>Selected Action: View</h3>
-              <p>Selected Asset: {selectedBalance?.symbol}</p>
-              <View />
-            </div>
-          )}
-          <ModalFooter>
-            <Button colorScheme="blue" onClick={onClose}>
-              Cancel
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </Stack>
-  );
-}

package/src/lib/layout/Pioneer/MiddleEllipsis.tsx

@@ -1,27 +0,0 @@
-import type React from "react";
-
-interface MiddleEllipsisProps {
-  text: string;
-}
-
-const MiddleEllipsis: React.FC<MiddleEllipsisProps> = ({ text }) => {
-  const maxLength = 20;
-  const ellipsis = "...";
-
-  if (!text || text.length <= maxLength) {
-    return <span>{text}</span>;
-  }
-
-  const frontPart = text.slice(0, 7);
-  const backPart = text.slice(-10);
-
-  return (
-    <span>
-      {frontPart}
-      {ellipsis}
-      {backPart}
-    </span>
-  );
-};
-
-export default MiddleEllipsis;

package/src/lib/layout/Pioneer/Pubkey.tsx

@@ -1,67 +0,0 @@
-import {
-  chakra,
-  Stack,
-  CircularProgress,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
-  DrawerHeader,
-  DrawerBody,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel,
-  Avatar,
-  AvatarBadge,
-  Box,
-  Button,
-  Flex,
-  HStack,
-  IconButton,
-  Link,
-  Menu,
-  Image,
-  MenuButton,
-  MenuDivider,
-  Icon,
-  MenuItem,
-  MenuList,
-  Spacer,
-  Text,
-  useDisclosure,
-  Accordion,
-  AccordionItem,
-  AccordionButton,
-  AccordionIcon,
-  AccordionPanel,
-  SimpleGrid,
-  Card,
-  CardHeader,
-  Heading,
-  CardBody,
-  CardFooter,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  ModalFooter,
-} from "@chakra-ui/react";
-import React, { useState } from "react";
-
-import MiddleEllipsis from "./MiddleEllipsis";
-
-interface Balance {
-  rating: number;
-  setRating: (rating: number) => void;
-  count?: number;
-  size?: number;
-}
-
-export default function Pubkey(Balance: any) {
-  const [hover, setHover] = useState<number | null>(null);
-
-  return <div>{JSON.stringify(Balance)}</div>;
-}

package/src/lib/layout/Pioneer/Receive.tsx

@@ -1,26 +0,0 @@
-import { FormControl, FormLabel, Input, Text } from "@chakra-ui/react";
-import React, { useState } from "react";
-import QRCode from "react-qr-code";
-
-const Receive = () => {
-  const [address, setAddress] = useState("");
-
-  return (
-    <>
-      <FormControl>
-        <FormLabel>Address:</FormLabel>
-        <Input value={address} onChange={(e) => setAddress(e.target.value)} />
-      </FormControl>
-
-      {address && (
-        <>
-          <Text mt={4}>QR Code:</Text>
-          <QRCode value={address} size={128} />
-          <Text mt={2}>{address}</Text>
-        </>
-      )}
-    </>
-  );
-};
-
-export default Receive;

package/src/lib/layout/Pioneer/Send.tsx

@@ -1,135 +0,0 @@
-import {
-  Card,
-  Button,
-  FormControl,
-  FormLabel,
-  Input,
-  Spinner,
-  Avatar,
-} from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
-
-import { usePioneer } from "lib/context/Pioneer";
-
-const Send = (Asset: any) => {
-  const { state, dispatch } = usePioneer();
-  const { user, app, api, wallet } = state;
-  const [amount, setAmount] = useState("");
-  const [address, setAddress] = useState("");
-  const [balance, setBalance] = useState("");
-  const [blockchain, setBlockchain] = useState("");
-  const [caip, setCaip] = useState(null);
-  const [txid, setTxid] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSend = async () => {
-    try {
-      setIsLoading(true);
-      //console.log("Asset: ", Asset.asset);
-      //console.log("Address: ", address);
-      //console.log("amount: ", amount);
-      const ASSET = Asset.asset.symbol;
-      if (!address) alert("Must set an address!");
-      if (!amount) alert("Must set an amount!");
-      const send: any = {
-        blockchain,
-        network: Asset.asset.network,
-        asset: Asset.asset.symbol,
-        balance: Asset.asset.balance,
-        address,
-        amount,
-        noBroadcast: false,
-      };
-      if (Asset.asset.contract) send.contract = Asset.asset.contract;
-      const tx = {
-        type: "sendToAddress",
-        payload: send,
-      };
-      // console.log("tx: ", tx);
-      let invocation = await app.build(tx);
-      // console.log("invocation: ", invocation);
-      // sign
-      invocation = await app.sign(invocation, wallet);
-      // console.log("invocation: ", invocation);
-      invocation.network = ASSET; // TODO dont do this bullshit, use caip
-      invocation.noBroadcast = false;
-      invocation.sync = true;
-      invocation = await app.broadcast(invocation);
-      // console.log("invocation: ", invocation);
-      if (invocation && invocation.broadcast && invocation.broadcast.txid) {
-        setIsLoading(false);
-        setTxid(invocation.broadcast.txid);
-        // TODO open block explorer link
-        // window.open('https://example.com', '_blank'); // Open link in a new tab
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  // onStart get balance of asset
-  // get max amount able to send
-  const onStart = async () => {
-    try {
-      // console.log("Asset: ", Asset.asset.caip);
-      // console.log("Asset: ", Asset.asset);
-      setCaip(Asset.asset.caip);
-      setBalance(Asset.asset.balance);
-
-      // get asset by caip
-      const asset = await api.AssetByCaip({ caip: Asset.asset.caip });
-      // console.log("asset: ",asset.data)
-      // console.log("asset: ",asset.data[0].blockchain)
-      setBlockchain(asset.data[0].blockchain);
-      // @ts-ignore
-      if (!asset.data[0].blockchain)
-        alert(`unknown asset! ciap: ${Asset.asset.caip}`);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  useEffect(() => {
-    onStart(); // Call the onStart function when the component mounts
-  }, []);
-
-  return (
-    <Card>
-      <h2>Balance: {balance}</h2>
-      <Avatar src={Asset.asset.image} />
-      <small>caip: {caip}</small>
-      <br />
-      {txid ? (
-        <div>
-          txid: <small> {txid} </small>
-          <Button>view on block explorer</Button>
-        </div>
-      ) : (
-        <div>
-          <FormControl>
-            <FormLabel>Amount:</FormLabel>
-            <Input
-              type="number"
-              value={amount}
-              onChange={(e) => setAmount(e.target.value)}
-            />
-          </FormControl>
-
-          <FormControl mt={4}>
-            <FormLabel>Address:</FormLabel>
-            <Input
-              value={address}
-              onChange={(e) => setAddress(e.target.value)}
-            />
-          </FormControl>
-
-          <Button mt={4} colorScheme="blue" onClick={handleSend}>
-            {isLoading ? <Spinner /> : "Send"}
-          </Button>
-        </div>
-      )}
-    </Card>
-  );
-};
-
-export default Send;

package/src/lib/layout/Pioneer/View.tsx

@@ -1,44 +0,0 @@
-import { List, ListItem, Text } from "@chakra-ui/react";
-import React from "react";
-
-const View = () => {
-  // Mocked transaction history data
-  const transactions = [
-    {
-      id: 1,
-      date: "2023-07-01",
-      amount: "0.5 BTC",
-      sender: "Sender A",
-      receiver: "Receiver B",
-    },
-    {
-      id: 2,
-      date: "2023-07-02",
-      amount: "1 ETH",
-      sender: "Sender C",
-      receiver: "Receiver D",
-    },
-    {
-      id: 3,
-      date: "2023-07-03",
-      amount: "0.2 LTC",
-      sender: "Sender E",
-      receiver: "Receiver F",
-    },
-  ];
-
-  return (
-    <List spacing={4}>
-      {transactions.map((transaction) => (
-        <ListItem key={transaction.id}>
-          <Text>Date: {transaction.date}</Text>
-          <Text>Amount: {transaction.amount}</Text>
-          <Text>Sender: {transaction.sender}</Text>
-          <Text>Receiver: {transaction.receiver}</Text>
-        </ListItem>
-      ))}
-    </List>
-  );
-};
-
-export default View;

package/src/lib/layout/Pioneer/Wallets.tsx

@@ -1,166 +0,0 @@
-import {
-  Avatar,
-  AvatarBadge,
-  Box,
-  Button,
-  HStack,
-  Stack,
-  Image,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  ModalFooter,
-  useDisclosure,
-  InputGroup,
-  InputLeftElement,
-  Input,
-  Text,
-} from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
-
-// Import icons
-// @ts-ignore
-import KEEPKEY_ICON from "lib/assets/png/keepkey.png";
-// @ts-ignore
-import METAMASK_ICON from "lib/assets/png/metamask.png";
-// @ts-ignore
-import PIONEER_ICON from "lib/assets/png/pioneer.png";
-import { usePioneer } from "lib/context/Pioneer";
-
-import MiddleEllipsis from "./MiddleEllipsis";
-
-interface Wallet {
-  context: string;
-  type: string;
-  valueUsdContext: number;
-  icon: any; // @ts-ignore
-  paired: boolean;
-}
-
-const getWalletBadgeContent = (walletType: string) => {
-  const icons: any = {
-    metamask: METAMASK_ICON,
-    keepkey: KEEPKEY_ICON,
-    native: PIONEER_ICON,
-  };
-
-  const icon = icons[walletType];
-
-  if (!icon) {
-    return null;
-  }
-
-  return (
-    <AvatarBadge boxSize="1.25em" bg="green.500">
-      <Image rounded="full" src={icon} />
-    </AvatarBadge>
-  );
-};
-
-export default function Wallets({ wallets }: { wallets: Wallet[] }) {
-  const { state, dispatch } = usePioneer();
-  const { user } = state;
-  const [currentPage, setCurrentPage] = useState(1);
-  const [walletsWithIcons, setWalletsWithIcons] = useState([]);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const walletsPerPage = 3;
-
-  const handlePageChange = (pageNumber: any) => {
-    setCurrentPage(pageNumber);
-  };
-
-  for (let i = 0; i < wallets.length; i++) {
-    const wallet = wallets[i];
-    if (wallet.type === "native") {
-      wallets[i].icon = PIONEER_ICON;
-    } else if (wallet.type === "metamask") {
-      wallets[i].icon = METAMASK_ICON;
-    } else if (wallet.type === "keepkey") {
-      wallets[i].icon = KEEPKEY_ICON;
-    }
-  }
-
-  const currentWallets = wallets.slice(
-    (currentPage - 1) * walletsPerPage,
-    currentPage * walletsPerPage
-  );
-  const totalPages = Math.ceil(wallets.length / walletsPerPage);
-
-  // Function to generate custom pagination array
-  const generatePaginationArray = () => {
-    const paginationArray = [];
-    const totalPageButtons = 5; // Number of page buttons to display around the current page
-
-    if (totalPages <= totalPageButtons) {
-      // If total pages are less than or equal to totalPageButtons, show all page numbers
-      for (let i = 1; i <= totalPages; i++) {
-        paginationArray.push(i);
-      }
-    } else {
-      // If total pages are more than totalPageButtons, generate custom pagination
-      const middleButton = Math.floor(totalPageButtons / 2);
-      const startPage = Math.max(currentPage - middleButton, 1);
-      const endPage = Math.min(currentPage + middleButton, totalPages);
-
-      if (startPage > 1) {
-        // Add the first page and ellipsis if the current page is far enough from the first page
-        paginationArray.push(1, "...");
-      }
-
-      // Add page numbers between startPage and endPage (inclusive)
-      for (let i = startPage; i <= endPage; i++) {
-        paginationArray.push(i);
-      }
-
-      if (endPage < totalPages) {
-        // Add the last page and ellipsis if the current page is far enough from the last page
-        paginationArray.push("...", totalPages);
-      }
-    }
-
-    return paginationArray;
-  };
-
-  return (
-    <Stack spacing={4}>
-      {/* <Text fontSize='xl'>Wallets Tracked</Text> */}
-      {currentWallets.map((wallet: Wallet, index: number) => (
-        <Box key={index}>
-          <HStack spacing={4} alignItems="center">
-            <Avatar src={wallet.icon} />
-            <Box>
-              <small>
-                Context: <MiddleEllipsis text={wallet?.context} />
-              </small>
-              <br />
-              <small>Type: {wallet.type}</small>
-              <br />
-              <small>Value (USD): {wallet.valueUsdContext}</small>
-              <br />
-              <small>Paired: {wallet.paired ? "Yes" : "No"}</small>
-              <br />
-            </Box>
-          </HStack>
-          <HStack mt={2} spacing={2}>
-            {/* ... (rest of the buttons and click handlers) */}
-          </HStack>
-        </Box>
-      ))}
-      <Box mt={4}>
-        {generatePaginationArray().map((page, index) => (
-          <Button
-            key={index}
-            size="sm"
-            variant={currentPage === page ? "solid" : "outline"}
-            onClick={() => handlePageChange(page)}
-          >
-            {page === "..." ? "..." : page}
-          </Button>
-        ))}
-      </Box>
-    </Stack>
-  );
-}