@pioneer-platform/pioneer-react 0.0.2 → 0.2.33

package/src/lib/components/pioneer/Pioneer/Paths.tsx

@@ -0,0 +1,290 @@
+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";
+
+interface Path {
+  image?: string;
+  symbol: string;
+  name?: string;
+  path?: any;
+  size?: string;
+  context?: string; // Added context field
+  note: string;
+  blockchain: string;
+  network: string;
+  script_type: string;
+  available_scripts_types: string[];
+  type: string;
+  addressNList: number[];
+  addressNListMaster: number[];
+  curve: string;
+  showDisplay: boolean;
+}
+
+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 Paths({ paths }: { paths: any[] }) {
+  const { state, dispatch } = usePioneer();
+  const { api, app, user } = state;
+  const [selectedPath, setSelectedPath] = useState<Path | null>(null);
+  const [selectedAction, setSelectedAction] = useState<string | null>(null);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleSelectClick = async (path: Path) => {
+    try {
+      //
+      //console.log("path: ", path);
+
+      //set Path
+      let assetFromPioneer = await api.GetAsset({ symbol: path.symbol });
+      assetFromPioneer = assetFromPioneer.data[0];
+      let blockchainFromPioneer = await api.GetBlockchain({
+        symbol: path.symbol,
+      });
+      blockchainFromPioneer = blockchainFromPioneer.data[0];
+      //console.log("assetFromPioneer: ", path);
+      //set Blockchain
+      await app.setBlockchainContext(blockchainFromPioneer);
+      await app.setAssetContext(assetFromPioneer);
+      //set pubkey
+      // await app.setPubkeyContext(path.context)
+      //console.log("app.assetContext: ", app.assetContext);
+      //console.log("app.blockchainContext: ", app.blockchainContext);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleSendClick = (path: Path) => {
+    setSelectedPath(path);
+    setSelectedAction("send");
+    onOpen();
+  };
+
+  const handleReceiveClick = (path: Path) => {
+    setSelectedPath(path);
+    setSelectedAction("receive");
+    onOpen();
+  };
+
+  const handleViewClick = (path: Path) => {
+    setSelectedPath(path);
+    setSelectedAction("view");
+    onOpen();
+  };
+
+  useEffect(() => {
+    const setUser = async () => {
+      try {
+        if (user && user.wallets) {
+          const { walletDescriptions, paths } = user;
+          const updatedPaths = paths.map((path: Path) => {
+            const walletType = getWalletType(user, path.context);
+            const badgeContent = getWalletBadgeContent(walletType);
+            return {
+              //@ts-ignore
+              ...path,
+              context: {
+                //@ts-ignore
+                ...path.context,
+                badge: badgeContent,
+              },
+            };
+          });
+          dispatch({ type: "SET_BALANCES", payload: updatedPaths });
+        }
+      } catch (e) {
+        console.error("Error: ", e);
+      }
+    };
+
+    setUser();
+  }, [user]);
+
+  // Filter and sort paths based on search query
+  const filteredPaths = paths.filter((path: Path) => {
+    // Convert the search query and path symbol/name to lowercase for case-insensitive search
+    const query = searchQuery.toLowerCase();
+    const symbol = path.symbol.toLowerCase();
+    const name = path.name ? path.name.toLowerCase() : "";
+
+    // Check if the symbol or name contains the search query
+    return symbol.includes(query) || name.includes(query);
+  });
+
+  const sortedPaths = filteredPaths.sort((a: Path, b: Path) => b.path - a.path);
+
+  // CSS for the scrollable container
+  const scrollContainerStyles: React.CSSProperties = {
+    maxHeight: "15em", // This value may need to be adjusted according to your design
+    overflowY: "scroll",
+  };
+
+  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>
+      <Box style={scrollContainerStyles}>
+        {sortedPaths.map((path: Path, index: number) => (
+          <Box key={index}>
+            <HStack spacing={4} alignItems="center">
+              <Avatar src={path.image} />
+              <Box>
+                {path && (
+                  <>
+                    <div>
+                      <strong>Note:</strong> {path.note}
+                    </div>
+                    <div>
+                      <strong>Blockchain:</strong> {path.blockchain}
+                    </div>
+                    <div>
+                      <strong>Symbol:</strong> {path.symbol}
+                    </div>
+                    <div>
+                      <strong>Network:</strong> {path.network}
+                    </div>
+                    <div>
+                      <strong>Script Type:</strong> {path.script_type}
+                    </div>
+                    <div>
+                      <strong>Available Script Types:</strong>{" "}
+                      {path.available_scripts_types?.join(", ")}
+                    </div>
+                    <div>
+                      <strong>Type:</strong> {path.type}
+                    </div>
+                    <div>
+                      <strong>Address N List:</strong>{" "}
+                      {path.addressNList?.join(", ")}
+                    </div>
+                    <div>
+                      <strong>Address N List Master:</strong>{" "}
+                      {path.addressNListMaster?.join(", ")}
+                    </div>
+                    <div>
+                      <strong>Curve:</strong> {path.curve}
+                    </div>
+                    <div>
+                      <strong>Show Display:</strong>{" "}
+                      {path.showDisplay ? "true" : "false"}
+                    </div>
+                  </>
+                )}
+              </Box>
+            </HStack>
+            <HStack mt={2} spacing={2}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => handleSelectClick(path)}
+              >
+                Select
+              </Button>
+            </HStack>
+          </Box>
+        ))}
+      </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: {selectedPath?.symbol}</p>
+              <Send asset={selectedPath} />
+            </div>
+          )}
+          {selectedAction === "receive" && (
+            <div>
+              <h3>Selected Action: Receive</h3>
+              <p>Selected Asset: {selectedPath?.symbol}</p>
+              <Receive />
+            </div>
+          )}
+          {selectedAction === "view" && (
+            <div>
+              <h3>Selected Action: View</h3>
+              <p>Selected Asset: {selectedPath?.symbol}</p>
+              <View />
+            </div>
+          )}
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={onClose}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Stack>
+  );
+}

package/src/lib/components/pioneer/Pioneer/Pubkey.tsx

@@ -0,0 +1,67 @@
+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/components/pioneer/Pioneer/Pubkeys.tsx

@@ -0,0 +1,265 @@
+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";
+
+interface Pubkey {
+  image?: string;
+  symbol: string;
+  name?: string;
+  pubkey?: 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 Pubkeys({ pubkeys }: { pubkeys: Pubkey[] }) {
+  const { state, dispatch } = usePioneer();
+  const { api, app, user } = state;
+  const [selectedPubkey, setSelectedPubkey] = useState<Pubkey | null>(null);
+  const [selectedAction, setSelectedAction] = useState<string | null>(null);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const handleSelectClick = async (pubkey: Pubkey) => {
+    try {
+      //
+      //console.log("pubkey: ", pubkey);
+
+      //set Pubkey
+      let assetFromPioneer = await api.GetAsset({ symbol: pubkey.symbol });
+      assetFromPioneer = assetFromPioneer.data[0];
+      let blockchainFromPioneer = await api.GetBlockchain({
+        symbol: pubkey.symbol,
+      });
+      blockchainFromPioneer = blockchainFromPioneer.data[0];
+      //console.log("assetFromPioneer: ", pubkey);
+      //set Blockchain
+      await app.setBlockchainContext(blockchainFromPioneer);
+      await app.setAssetContext(assetFromPioneer);
+      //set pubkey
+      // await app.setPubkeyContext(pubkey.context)
+      //console.log("app.assetContext: ", app.assetContext);
+      //console.log("app.blockchainContext: ", app.blockchainContext);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleSendClick = (pubkey: Pubkey) => {
+    setSelectedPubkey(pubkey);
+    setSelectedAction("send");
+    onOpen();
+  };
+
+  const handleReceiveClick = (pubkey: Pubkey) => {
+    setSelectedPubkey(pubkey);
+    setSelectedAction("receive");
+    onOpen();
+  };
+
+  const handleViewClick = (pubkey: Pubkey) => {
+    setSelectedPubkey(pubkey);
+    setSelectedAction("view");
+    onOpen();
+  };
+
+  useEffect(() => {
+    const setUser = async () => {
+      try {
+        if (user && user.wallets) {
+          const { walletDescriptions, pubkeys } = user;
+          const updatedPubkeys = pubkeys.map((pubkey: Pubkey) => {
+            const walletType = getWalletType(user, pubkey.context);
+            const badgeContent = getWalletBadgeContent(walletType);
+            return {
+              //@ts-ignore
+              ...pubkey,
+              context: {
+                //@ts-ignore
+                ...pubkey.context,
+                badge: badgeContent,
+              },
+            };
+          });
+          dispatch({ type: "SET_BALANCES", payload: updatedPubkeys });
+        }
+      } catch (e) {
+        console.error("Error: ", e);
+      }
+    };
+
+    setUser();
+  }, [user]);
+
+  // Filter and sort pubkeys based on search query
+  const filteredPubkeys = pubkeys.filter((pubkey: Pubkey) => {
+    // Convert the search query and pubkey symbol/name to lowercase for case-insensitive search
+    const query = searchQuery.toLowerCase();
+    const symbol = pubkey.symbol.toLowerCase();
+    const name = pubkey.name ? pubkey.name.toLowerCase() : "";
+
+    // Check if the symbol or name contains the search query
+    return symbol.includes(query) || name.includes(query);
+  });
+
+  const sortedPubkeys = filteredPubkeys.sort(
+    (a: Pubkey, b: Pubkey) => b.pubkey - a.pubkey
+  );
+
+  // CSS for the scrollable container
+  const scrollContainerStyles: React.CSSProperties = {
+    maxHeight: "15em", // This value may need to be adjusted according to your design
+    overflowY: "scroll",
+  };
+
+  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>
+      <Box style={scrollContainerStyles}>
+        {sortedPubkeys.map((pubkey: Pubkey, index: number) => (
+          <Box key={index}>
+            <HStack spacing={4} alignItems="center">
+              <Avatar src={pubkey.image} />
+              <Box>
+                <small>asset: {pubkey.symbol}</small>
+                <br />
+                <small>pubkey: {pubkey.pubkey}</small>
+              </Box>
+            </HStack>
+            <HStack mt={2} spacing={2}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => handleSelectClick(pubkey)}
+              >
+                Select
+              </Button>
+              {/*<Button*/}
+              {/*    size="sm"*/}
+              {/*    variant="outline"*/}
+              {/*    onClick={() => handleSendClick(pubkey)}*/}
+              {/*>*/}
+              {/*  Send*/}
+              {/*</Button>*/}
+              {/*<Button*/}
+              {/*    size="sm"*/}
+              {/*    variant="outline"*/}
+              {/*    onClick={() => handleReceiveClick(pubkey)}*/}
+              {/*>*/}
+              {/*  Receive*/}
+              {/*</Button>*/}
+              {/*<Button*/}
+              {/*    size="sm"*/}
+              {/*    variant="outline"*/}
+              {/*    onClick={() => handleViewClick(pubkey)}*/}
+              {/*>*/}
+              {/*  View*/}
+              {/*</Button>*/}
+            </HStack>
+          </Box>
+        ))}
+      </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: {selectedPubkey?.symbol}</p>
+              <Send asset={selectedPubkey} />
+            </div>
+          )}
+          {selectedAction === "receive" && (
+            <div>
+              <h3>Selected Action: Receive</h3>
+              <p>Selected Asset: {selectedPubkey?.symbol}</p>
+              <Receive />
+            </div>
+          )}
+          {selectedAction === "view" && (
+            <div>
+              <h3>Selected Action: View</h3>
+              <p>Selected Asset: {selectedPubkey?.symbol}</p>
+              <View />
+            </div>
+          )}
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={onClose}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Stack>
+  );
+}

package/src/lib/components/pioneer/Pioneer/Receive.tsx

@@ -0,0 +1,26 @@
+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;