@pioneer-platform/pioneer-react 0.0.2 → 0.2.33

package/src/lib/layout/Pioneer/Balances.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";
+
+// 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

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

@@ -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/layout/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;

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

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

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