@pioneer-platform/pioneer-react 0.2.36 → 0.2.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pioneer-platform/pioneer-react",
-  "version": "0.2.36",
+  "version": "0.2.38",
   "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/context/Pioneer/index.tsx

@@ -353,24 +353,28 @@ export const PioneerProvider = ({
           //@ts-ignore
           walletMetaMask.accounts = accounts;
 
-          const successMetaMask = await appInit.pairWallet(walletMetaMask);
-          console.log("successMetaMask: ", successMetaMask);
-          if (successMetaMask) {
-            // @ts-ignore
-            if (appInit.pubkeyContext?.master || appInit?.pubkey) {
-              // @ts-ignore
-              dispatch({
-                type: WalletActions.SET_PUBKEY_CONTEXT,
-                // @ts-ignore
-                payload: appInit.pubkeyContext?.master || appInit?.pubkey,
-              });
-            }
-          }
           // @ts-ignore
           dispatch({
             type: WalletActions.SET_STATUS,
             payload: "MetaMask connected!",
           });
+          //@ts-ignore
+          dispatch({ type: WalletActions.ADD_WALLET, payload: walletMetaMask });
+
+          appInit.pairWallet(walletMetaMask);
+          // console.log("successMetaMask: ", successMetaMask);
+          // if (successMetaMask) {
+          //   // @ts-ignore
+          //   if (appInit.pubkeyContext?.master || appInit?.pubkey) {
+          //     // @ts-ignore
+          //     dispatch({
+          //       type: WalletActions.SET_PUBKEY_CONTEXT,
+          //       // @ts-ignore
+          //       payload: appInit.pubkeyContext?.master || appInit?.pubkey,
+          //     });
+          //   }
+          // }
+
         }
       } else {
         console.log("MetaMask is not available");
@@ -399,9 +403,6 @@ export const PioneerProvider = ({
             KkRestAdapter.useKeyring(keyring).pairDevice(sdkKeepKey),
             timeout(30000),
           ]);
-          // pair keepkey
-          const successKeepKey = await appInit.pairWallet(walletKeepKey);
-          //console.log("successKeepKey: ", successKeepKey);
           //@ts-ignore
           dispatch({ type: WalletActions.ADD_WALLET, payload: walletKeepKey });
           // @ts-ignore
@@ -409,6 +410,10 @@ export const PioneerProvider = ({
             type: WalletActions.SET_STATUS,
             payload: "KeepKey connected!",
           });
+          // pair keepkey
+          appInit.pairWallet(walletKeepKey);
+          //console.log("successKeepKey: ", successKeepKey);
+
         } catch (error) {
           //@ts-ignore
           console.error("Error or Timeout:", error.message);
@@ -430,9 +435,7 @@ export const PioneerProvider = ({
         await nativeAdapter.initialize();
         // @ts-ignore
         await walletSoftware.loadDevice({ mnemonic });
-        console.log("walletSoftware: ", walletSoftware);
-        const successSoftware = await appInit.pairWallet(walletSoftware);
-        console.log("successSoftware: ", successSoftware);
+
         // @ts-ignore
         dispatch({ type: WalletActions.ADD_WALLET, payload: walletSoftware });
         // @ts-ignore
@@ -440,6 +443,9 @@ export const PioneerProvider = ({
           type: WalletActions.SET_STATUS,
           payload: "Software wallet connected!",
         });
+        
+        console.log("walletSoftware: ", walletSoftware);
+        appInit.pairWallet(walletSoftware);
       }
 
 

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;