@pioneer-platform/pioneer-react 0.0.2 → 0.2.32

package/src/lib/components/pioneer/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/components/pioneer/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;

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

@@ -0,0 +1,166 @@
+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">All paired wallets</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>
+  );
+}