@pioneer-platform/pioneer-react 0.2.36 → 0.2.38

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>
-  );
-}