@pioneer-platform/pioneer-react 0.2.42 → 0.2.43

package/src/lib/components/BlockchainSelect/index.tsx

@@ -1,166 +0,0 @@
-import { Search2Icon } from "@chakra-ui/icons";
-import {
-  Avatar,
-  Box,
-  Button,
-  Checkbox,
-  HStack,
-  Stack,
-  InputGroup,
-  InputLeftElement,
-  Input,
-  Text,
-} from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { usePioneer } from "lib/context/Pioneer";
-import MiddleEllipsis from "lib/components/MiddleEllipsis";
-
-//@ts-ignore
-export default function BlockchainSelect({ onClose }) {
-  const { state, dispatch } = usePioneer();
-  const { api, app, user } = state;
-  const [searchQuery, setSearchQuery] = useState("");
-  const [currentPage, setCurrentPage] = useState([]);
-  const [currentPageIndex, setCurrentPageIndex] = useState(0);
-  const [showOwnedAssets, setShowOwnedAssets] = useState(false);
-  const [timeOut, setTimeOut] = useState(null); // Added timeout state
-  const itemsPerPage = 6;
-
-  const handleSelectClick = async (asset: any) => {
-    try {
-      //console.log("asset select: ", asset.name);
-      const changeAssetContext = await app.setAssetContext(asset);
-      //console.log("changeAssetContext: ", changeAssetContext);
-      onClose();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const onSearch = async function (searchQuery: string) {
-    try {
-      if (!api) {
-        alert("Failed to init API!");
-        return;
-      }
-      //console.log("searchQuery: ", searchQuery);
-      const search = {
-        limit: itemsPerPage,
-        skip: currentPageIndex * itemsPerPage, // Use currentPageIndex for pagination
-        collection: "blockchains",
-        searchQuery: searchQuery,
-        searchFields: ["name", "symbol"],
-      };
-
-      const info = await api.SearchAtlas(search);
-      const currentPageData = info.data.results;
-      setCurrentPage(currentPageData);
-      setTotalBlockchains(info.data.total); // Update total assets count
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const fetchPage = async (pageIndex: number) => {
-    try {
-      if (!api) {
-        alert("Failed to init API!");
-        return;
-      }
-
-      const search = {
-        limit: itemsPerPage,
-        skip: pageIndex * itemsPerPage,
-        collection: "blockchains",
-        ownedBy: showOwnedAssets ? user.id : undefined,
-      };
-
-      const info = await api.SearchAtlas(search);
-      const currentPageData = info.data.results;
-      setCurrentPage(currentPageData);
-      setTotalBlockchains(info.data.total); // Update total assets count
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchPage(currentPageIndex);
-  }, [currentPageIndex, showOwnedAssets]);
-
-  const [totalBlockchains, setTotalBlockchains] = useState(0);
-
-  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);
-            if (timeOut) {
-              clearTimeout(timeOut);
-            }
-            setTimeOut(
-              // @ts-ignore
-              setTimeout(() => {
-                setCurrentPageIndex(0); // Reset pageIndex when searching
-                onSearch(e.target.value);
-              }, 1000)
-            );
-          }}
-        />
-      </InputGroup>
-      <Box>
-        <Text fontSize="2xl">Total Chains: {totalBlockchains}</Text>
-        <Checkbox
-          isChecked={showOwnedAssets}
-          onChange={() => setShowOwnedAssets(!showOwnedAssets)}
-        >
-          Show only blockchains you have assets on
-        </Checkbox>
-        {currentPage.map((blockchain: any, index: number) => (
-          <Box key={index}>
-            <HStack spacing={4} alignItems="center">
-              <Avatar src={blockchain?.image} />
-              <Box>
-                <small>
-                  blockchain: <MiddleEllipsis text={blockchain?.caip} />
-                </small>
-                <br />
-                <small>name: {blockchain.name}</small>
-              </Box>
-            </HStack>
-            <HStack mt={2} spacing={2}>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => handleSelectClick(blockchain)}
-              >
-                Select
-              </Button>
-            </HStack>
-          </Box>
-        ))}
-      </Box>
-      <HStack mt={4}>
-        <Button
-          isDisabled={currentPageIndex === 0}
-          onClick={() => setCurrentPageIndex(currentPageIndex - 1)}
-        >
-          Previous Page
-        </Button>
-        <Button
-          isDisabled={currentPage.length < itemsPerPage}
-          onClick={() => setCurrentPageIndex(currentPageIndex + 1)}
-        >
-          Next Page
-        </Button>
-      </HStack>
-    </Stack>
-  );
-}

package/src/lib/components/MiddleEllipsis/index.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/components/Onboarding/index.tsx

@@ -1,251 +0,0 @@
-import {
-    Box,
-    Text,
-    Button,
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalCloseButton,
-    ModalBody,
-    ModalFooter,
-    Tabs,
-    TabList,
-    Tab,
-    TabPanels,
-    Card,
-    CardBody,
-    TabPanel,
-    Avatar,
-    SimpleGrid,
-    AvatarBadge,
-    Input,
-    FormControl,
-    FormLabel,
-    FormErrorMessage,
-    VStack,
-    Radio,
-    RadioGroup
-} from "@chakra-ui/react";
-import { useState, useEffect } from "react";
-import * as bip39 from 'bip39';
-// @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";
-
-interface ModalProps {
-    onClose: () => void;
-}
-//@ts-ignore
-const Onboarding: React.FC<ModalProps> = ({ onClose }) => {
-    const { state, dispatch } = usePioneer();
-    const { api, app, user, context } = state;
-    const [walletDescriptions, setWalletDescriptions] = useState([]);
-    const [balances, setBalances] = useState([]);
-    const [metamaskPaired, setMetamaskPaired] = useState(false);
-    const [keepkeyPaired, setKeepkeyPaired] = useState(false);
-    const [nativePaired, setNativePaired] = useState(false);
-    const [walletType, setWalletType] = useState("");
-    const [pubkeyContext, setPubkeyContext] = useState("");
-    const [seedPhrase, setSeedPhrase] = useState('');
-    const [error, setError] = useState(null);
-    const [isValid, setIsValid] = useState(false);
-    const [action, setAction] = useState(null);
-
-    const setUser = async function () {
-        try {
-            if (user && user.wallets) {
-                const { wallets, walletDescriptions, balances, pubkeys } = user;
-                setWalletDescriptions(walletDescriptions);
-                setBalances(balances);
-            }
-        } catch (e) {
-            console.error("header e: ", e);
-        }
-    };
-
-    const setContextWallet = async function (wallet: string) {
-        try {
-            //console.log("setContextWallet: ", wallet);
-            // eslint-disable-next-line no-console
-            //console.log("wallets: ", app.wallets);
-            const matchedWallet = app.wallets.find(
-                (w: { type: string }) => w.type === wallet
-            );
-            //console.log("matchedWallet: ", matchedWallet);
-            if (matchedWallet) {
-                setWalletType(matchedWallet.type);
-                const context = await app.setContext(matchedWallet.wallet);
-                //console.log("result change: ", context);
-                //console.log("app.context: ", app.context);
-
-                //console.log(
-                //   "app.pubkeyContext: ",
-                //   app.pubkeyContext.master || app.pubkeyContext.pubkey
-                // );
-
-                const pubkeyContext =
-                    app.pubkeyContext.master || app.pubkeyContext.pubkey;
-
-                setPubkeyContext(pubkeyContext);
-                dispatch({ type: "SET_CONTEXT", payload: app.context });
-                dispatch({ type: "SET_PUBKEY_CONTEXT", payload: app.pubkeyContext });
-                // dispatch({ type: "SET_WALLET", payload: wallet });
-            } else {
-                //console.log("No wallet matched the type of the context");
-            }
-        } catch (e) {
-            console.error("header e: ", e);
-        }
-    };
-
-    useEffect(() => {
-        setUser();
-    }, [user]); // once on startup
-
-    useEffect(() => {
-        const words = seedPhrase.trim().split(' ');
-        if (words.length === 12 && words.every(word => word.length > 0)) {
-            setError(null);
-            setIsValid(true);
-        } else {
-            // @ts-ignore
-            setError('Seed phrase must be exactly 12 words');
-            setIsValid(false);
-        }
-    }, [seedPhrase]);
-
-    const handleSubmit = (event: { preventDefault: () => void; }) => {
-        event.preventDefault();
-        if (isValid) {
-            console.log('Seed Phrase Submitted:', seedPhrase);
-            //save to local storage
-            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()
-        }
-    };
-
-    const handleActionSelection = (value: string) => {
-        console.log("value: ", value);
-        // @ts-ignore
-        setAction(value);
-        if (value === 'import'){
-            setSeedPhrase('');
-        }
-    };
-
-    const handleImport = () => {
-        setSeedPhrase("");
-        // @ts-ignore
-        setAction('import')
-    };
-
-    const handleGenerate = () => {
-        const newSeedPhrase = bip39.generateMnemonic();
-        setSeedPhrase(newSeedPhrase);
-        // @ts-ignore
-        setAction('generate');
-    };
-
-    return (
-        <Box>
-            Welcome to Pioneer SDK! Please select a wallet to continue.
-            <br/>
-            <Avatar size="lg" src={PIONEER_ICON}>
-            </Avatar>
-            {action ? (
-                <>
-                    <form onSubmit={handleSubmit}>
-                        <FormControl isInvalid={!!error}>
-                            <FormLabel htmlFor="seedPhrase">Seed Phrase</FormLabel>
-                            <Input
-                                id="seedPhrase"
-                                name="seedPhrase"
-                                type="text"
-                                value={seedPhrase}
-                                onChange={(e) => setSeedPhrase(e.target.value)}
-                                borderColor={isValid ? 'green.500' : 'red.500'}
-                            />
-                            <FormErrorMessage>{error}</FormErrorMessage>
-                        </FormControl>
-                        <Button mt={4} colorScheme="teal" type="submit">
-                            Submit
-                        </Button>
-                    </form>
-                    <Button mt={4} onClick={() => setAction(null)}>
-                        Go Back
-                    </Button>
-                </>
-            ) : (
-                <VStack spacing={4}>
-                    <Button colorScheme="teal" onClick={handleGenerate}>
-                        Generate New Seed Phrase
-                    </Button>
-                    <Button colorScheme="teal" onClick={handleImport}>
-                        Import Seed Phrase
-                    </Button>
-                </VStack>
-            )}
-            {/*<SimpleGrid columns={3} row={1}>*/}
-            {/*    <Card align="center" onClick={() => setContextWallet("native")}>*/}
-            {/*        <CardBody>*/}
-            {/*            <Avatar src={PIONEER_ICON}>*/}
-            {/*                {nativePaired ? (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
-            {/*                    </div>*/}
-            {/*                ) : (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
-            {/*                    </div>*/}
-            {/*                )}*/}
-            {/*            </Avatar>*/}
-            {/*        </CardBody>*/}
-            {/*        <small>Pioneer</small>*/}
-            {/*    </Card>*/}
-            {/*    <Card align="center" onClick={() => setContextWallet("metamask")}>*/}
-            {/*        <CardBody>*/}
-            {/*            <Avatar src={METAMASK_ICON}>*/}
-            {/*                {metamaskPaired ? (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
-            {/*                    </div>*/}
-            {/*                ) : (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
-            {/*                    </div>*/}
-            {/*                )}*/}
-            {/*            </Avatar>*/}
-            {/*        </CardBody>*/}
-            {/*        <small>MetaMask</small>*/}
-            {/*    </Card>*/}
-            {/*    <Card align="center" onClick={() => setContextWallet("keepkey")}>*/}
-            {/*        <CardBody>*/}
-            {/*            <Avatar src={KEEPKEY_ICON}>*/}
-            {/*                {keepkeyPaired ? (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="green.500" />*/}
-            {/*                    </div>*/}
-            {/*                ) : (*/}
-            {/*                    <div>*/}
-            {/*                        <AvatarBadge boxSize="1.25em" bg="red.500" />*/}
-            {/*                    </div>*/}
-            {/*                )}*/}
-            {/*            </Avatar>*/}
-            {/*        </CardBody>*/}
-            {/*        <small>KeepKey</small>*/}
-            {/*    </Card>*/}
-            {/*</SimpleGrid>*/}
-        </Box>
-    );
-};
-
-export default Onboarding;

package/src/lib/components/WalletSelect/index.tsx

@@ -1,112 +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 { useEffect, useState } from "react";
-import { usePioneer } from "lib/context/Pioneer";
-
-// @ts-ignore
-export default function WalletSelect({ onClose }) {
-  const { state, dispatch } = usePioneer();
-  const { api, app, user } = state;
-  const [context, setContext] = useState<any>(null);
-  const [walletType, setWalletType] = useState("");
-  const [pubkeyContext, setPubkeyContext] = useState("");
-
-  const handleSelectClick = async (wallet: any) => {
-    try {
-      //
-      //console.log("wallet selected! wallet: ", wallet.context);
-      //console.log("setContextWallet: ", wallet);
-      // eslint-disable-next-line no-console
-      //console.log("wallets: ", app.wallets);
-      const matchedWallet = app.wallets.find(
-        (w: { context: string }) => w.context === wallet.context
-      );
-      //console.log("matchedWallet: ", matchedWallet);
-      if (matchedWallet) {
-        setWalletType(matchedWallet.type);
-        const context = await app.setContext(matchedWallet.wallet);
-        //console.log("result change: ", context);
-        //console.log("app.context: ", app.context);
-        setContext(app.context);
-        //console.log(
-        //   "app.pubkeyContext: ",
-        //   app.pubkeyContext.master || app.pubkeyContext.pubkey
-        // );
-        const pubkeyContext =
-          app.pubkeyContext.master || app.pubkeyContext.pubkey;
-        setPubkeyContext(pubkeyContext);
-        dispatch({ type: "SET_CONTEXT", payload: app.context });
-        dispatch({ type: "SET_PUBKEY_CONTEXT", payload: app.pubkeyContext });
-        // dispatch({ type: "SET_WALLET", payload: wallet });
-        onClose();
-      } else {
-        //console.log("No wallet matched the type of the context");
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const onRender = async () => {
-    try {
-      //console.log("context: ", app?.context);
-      //console.log("wallets: ", app?.wallets);
-      //
-      dispatch({ type: "SET_CONTEXT", payload: context });
-      setContext(app?.context);
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    onRender();
-  }, [app, app?.context, app?.wallets]); // once on startup
-
-  return (
-    <Stack spacing={4}>
-      <Box>
-        {app?.wallets.map((wallet: any, index: number) => (
-          <Box key={index}>
-            <HStack spacing={4} alignItems="center">
-              {/*<Avatar src={balance.image} />*/}
-              <Box>
-                <small>type: {wallet.type}</small>
-                <br />
-                <small>context: {wallet.context}</small>
-              </Box>
-            </HStack>
-            <HStack mt={2} spacing={2}>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => handleSelectClick(wallet)}
-              >
-                Select
-              </Button>
-            </HStack>
-          </Box>
-        ))}
-      </Box>
-    </Stack>
-  );
-}

package/src/lib/components/modals/AssetModal.tsx

@@ -1,67 +0,0 @@
-import {
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  ModalBody,
-  ModalFooter,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  Card,
-  CardBody,
-  TabPanel,
-} from "@chakra-ui/react";
-import { useState, useEffect } from "react";
-
-import { usePioneer } from "lib/context/Pioneer";
-
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-//@ts-ignore
-const AssetModal: React.FC<ModalProps> = ({ isOpen, onClose }) => {
-  const { state, dispatch } = usePioneer();
-  const { api, app, user, context } = state;
-  const [walletDescriptions, setWalletDescriptions] = useState([]);
-  const [balances, setBalances] = useState([]);
-
-  const setUser = async function () {
-    try {
-      if (user && user.wallets) {
-        const { wallets, walletDescriptions, balances, pubkeys } = user;
-        setWalletDescriptions(walletDescriptions);
-        setBalances(balances);
-      }
-    } catch (e) {
-      console.error("header e: ", e);
-    }
-  };
-
-  useEffect(() => {
-    setUser();
-  }, [user]); // once on startup
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="xl">
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Asset Select</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody></ModalBody>
-        <ModalFooter>
-          <Button colorScheme="blue" mr={3} onClick={onClose}>
-            Close
-          </Button>
-          <Button variant="ghost">Secondary Action</Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export default AssetModal;