@pioneer-platform/pioneer-react 0.2.42 → 0.2.43

package/dist/lib/components/BlockchainSelect/index.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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) => {
-        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) {
-        try {
-            if (!api) {
-                alert("Failed to init API!");
-                return;
-            }
-            //console.log("searchQuery: ", searchQuery);
-            const search = {
-                limit: itemsPerPage,
-                skip: currentPageIndex * itemsPerPage,
-                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) => {
-        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 (_jsxs(Stack, { spacing: 4, children: [_jsxs(InputGroup, { children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search2Icon, { color: "gray.300" }) }), _jsx(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));
-                        } })] }), _jsxs(Box, { children: [_jsxs(Text, { fontSize: "2xl", children: ["Total Chains: ", totalBlockchains] }), _jsx(Checkbox, { isChecked: showOwnedAssets, onChange: () => setShowOwnedAssets(!showOwnedAssets), children: "Show only blockchains you have assets on" }), currentPage.map((blockchain, index) => (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 4, alignItems: "center", children: [_jsx(Avatar, { src: blockchain?.image }), _jsxs(Box, { children: [_jsxs("small", { children: ["blockchain: ", _jsx(MiddleEllipsis, { text: blockchain?.caip })] }), _jsx("br", {}), _jsxs("small", { children: ["name: ", blockchain.name] })] })] }), _jsx(HStack, { mt: 2, spacing: 2, children: _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleSelectClick(blockchain), children: "Select" }) })] }, index)))] }), _jsxs(HStack, { mt: 4, children: [_jsx(Button, { isDisabled: currentPageIndex === 0, onClick: () => setCurrentPageIndex(currentPageIndex - 1), children: "Previous Page" }), _jsx(Button, { isDisabled: currentPage.length < itemsPerPage, onClick: () => setCurrentPageIndex(currentPageIndex + 1), children: "Next Page" })] })] }));
-}

package/dist/lib/components/MiddleEllipsis/index.d.ts

@@ -1,6 +0,0 @@
-import type React from "react";
-interface MiddleEllipsisProps {
-    text: string;
-}
-declare const MiddleEllipsis: React.FC<MiddleEllipsisProps>;
-export default MiddleEllipsis;

package/dist/lib/components/MiddleEllipsis/index.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MiddleEllipsis = ({ text }) => {
-    const maxLength = 20;
-    const ellipsis = "...";
-    if (!text || text.length <= maxLength) {
-        return _jsx("span", { children: text });
-    }
-    const frontPart = text.slice(0, 7);
-    const backPart = text.slice(-10);
-    return (_jsxs("span", { children: [frontPart, ellipsis, backPart] }));
-};
-export default MiddleEllipsis;

package/dist/lib/components/Onboarding/index.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface ModalProps {
-    onClose: () => void;
-}
-declare const Onboarding: React.FC<ModalProps>;
-export default Onboarding;

package/dist/lib/components/Onboarding/index.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Avatar, Input, FormControl, FormLabel, FormErrorMessage, VStack } from "@chakra-ui/react";
-import { useState, useEffect } from "react";
-import * as bip39 from 'bip39';
-// @ts-ignore
-import PIONEER_ICON from "lib/assets/png/pioneer.png";
-import { usePioneer } from "lib/context/Pioneer";
-//@ts-ignore
-const Onboarding = ({ 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) {
-        try {
-            //console.log("setContextWallet: ", wallet);
-            // eslint-disable-next-line no-console
-            //console.log("wallets: ", app.wallets);
-            const matchedWallet = app.wallets.find((w) => 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) => {
-        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) => {
-        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 (_jsxs(Box, { children: ["Welcome to Pioneer SDK! Please select a wallet to continue.", _jsx("br", {}), _jsx(Avatar, { size: "lg", src: PIONEER_ICON }), action ? (_jsxs(_Fragment, { children: [_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs(FormControl, { isInvalid: !!error, children: [_jsx(FormLabel, { htmlFor: "seedPhrase", children: "Seed Phrase" }), _jsx(Input, { id: "seedPhrase", name: "seedPhrase", type: "text", value: seedPhrase, onChange: (e) => setSeedPhrase(e.target.value), borderColor: isValid ? 'green.500' : 'red.500' }), _jsx(FormErrorMessage, { children: error })] }), _jsx(Button, { mt: 4, colorScheme: "teal", type: "submit", children: "Submit" })] }), _jsx(Button, { mt: 4, onClick: () => setAction(null), children: "Go Back" })] })) : (_jsxs(VStack, { spacing: 4, children: [_jsx(Button, { colorScheme: "teal", onClick: handleGenerate, children: "Generate New Seed Phrase" }), _jsx(Button, { colorScheme: "teal", onClick: handleImport, children: "Import Seed Phrase" })] }))] }));
-};
-export default Onboarding;

package/dist/lib/components/WalletSelect/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export default function WalletSelect({ onClose }: {
-    onClose: any;
-}): JSX.Element;

package/dist/lib/components/WalletSelect/index.js

@@ -1,62 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Button, HStack, Stack, } 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(null);
-    const [walletType, setWalletType] = useState("");
-    const [pubkeyContext, setPubkeyContext] = useState("");
-    const handleSelectClick = async (wallet) => {
-        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) => 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 (_jsx(Stack, { spacing: 4, children: _jsx(Box, { children: app?.wallets.map((wallet, index) => (_jsxs(Box, { children: [_jsx(HStack, { spacing: 4, alignItems: "center", children: _jsxs(Box, { children: [_jsxs("small", { children: ["type: ", wallet.type] }), _jsx("br", {}), _jsxs("small", { children: ["context: ", wallet.context] })] }) }), _jsx(HStack, { mt: 2, spacing: 2, children: _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleSelectClick(wallet), children: "Select" }) })] }, index))) }) }));
-}

package/dist/lib/components/modals/AssetModal.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-declare const AssetModal: React.FC<ModalProps>;
-export default AssetModal;

package/dist/lib/components/modals/AssetModal.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, } from "@chakra-ui/react";
-import { useState, useEffect } from "react";
-import { usePioneer } from "lib/context/Pioneer";
-//@ts-ignore
-const AssetModal = ({ 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 (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: "Asset Select" }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, {}), _jsxs(ModalFooter, { children: [_jsx(Button, { colorScheme: "blue", mr: 3, onClick: onClose, children: "Close" }), _jsx(Button, { variant: "ghost", children: "Secondary Action" })] })] })] }));
-};
-export default AssetModal;

package/dist/lib/components/modals/SettingsModal.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface SettingsModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-}
-declare const SettingsModal: React.FC<SettingsModalProps>;
-export default SettingsModal;

package/dist/lib/components/modals/SettingsModal.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tabs, Tab, TabList, TabPanel, TabPanels, } from "@chakra-ui/react";
-import Balances from "lib/components/pioneer/Pioneer/Balances";
-import Wallets from "lib/components/pioneer/Pioneer/Wallets";
-import Pubkeys from "lib/components/pioneer/Pioneer/Pubkeys";
-import Onboarding from "lib/components/Onboarding";
-import { usePioneer } from "lib/context/Pioneer";
-const SettingsModal = ({ isOpen, onClose }) => {
-    const { state } = usePioneer();
-    const { app, status } = state;
-    const [isOnboarded, setIsOnboarded] = useState(false);
-    const onStart = async function () {
-        try {
-            console.log("onStart");
-            let isOnboarded = await localStorage.getItem("isOnboarded");
-            if (!isOnboarded) {
-                console.log("Starting onboarding process");
-            }
-        }
-        catch (e) {
-            console.error(e);
-        }
-    };
-    useEffect(() => {
-        onStart();
-    }, []);
-    useEffect(() => {
-        //console.log("app: ", app);
-    }, [app, app?.balances, app?.pubkeys, app?.wallets, app?.paths, status]);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, size: "xl", children: [_jsx(ModalOverlay, {}), _jsx(ModalContent, { children: !isOnboarded ? (_jsx(Onboarding, { onClose: onClose })) : (_jsxs("div", { children: [_jsx(ModalHeader, { children: "Pioneer Settings" }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { children: _jsxs(Tabs, { variant: "enclosed", children: [_jsxs(TabList, { children: [_jsx(Tab, { children: "Wallets" }), _jsx(Tab, { children: "Nodes" }), _jsx(Tab, { children: "PubKeys" }), _jsx(Tab, { children: "Balances" })] }), _jsxs(TabPanels, { children: [_jsx(TabPanel, { children: _jsx(Wallets, { wallets: app?.wallets || [] }) }), _jsx(TabPanel, { children: _jsx(Pubkeys, { pubkeys: app?.pubkeys || [] }) }), _jsx(TabPanel, { children: _jsx(Balances, { balances: app?.balances || [] }) })] })] }) }), _jsx(ModalFooter, { children: _jsx(Button, { colorScheme: "blue", mr: 3, onClick: onClose, children: "Close" }) })] })) })] }));
-};
-export default SettingsModal;

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

@@ -1,168 +0,0 @@
-import { Search2Icon, ChevronUpIcon, ChevronDownIcon } from "@chakra-ui/icons";
-import {
-  Avatar,
-  Box,
-  Button,
-  Flex,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Stack,
-  Text,
-  Checkbox,
-} from "@chakra-ui/react";
-// @ts-ignore
-import { COIN_MAP_LONG } from "@pioneer-platform/pioneer-coins";
-import { useEffect, useState } from "react";
-
-import { usePioneer } from "../../context/Pioneer";
-
-// eslint-disable-next-line react/prop-types
-export default function AssetSelect({ onClose }: { onClose: () => void }) {
-  const { state } = usePioneer();
-  const { app, balances } = state;
-  const [currentPage, setCurrentPage] = useState([]);
-  const [currentPageIndex, setCurrentPageIndex] = useState(0);
-  const [showOwnedAssets, setShowOwnedAssets] = useState(false);
-  const [totalAssets, setTotalAssets] = useState(0);
-  const [search, setSearch] = useState("");
-  const [sortOrder, setSortOrder] = useState("desc");
-  const itemsPerPage = 6;
-  // const cardWidth = useBreakpointValue({ base: "90%", md: "60%", lg: "40%" });
-
-  const handleSelectClick = async (asset: any) => {
-    try {
-      app.setAssetContext(asset);
-      onClose();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const handleSearchChange = (event: any) => {
-    setSearch(event.target.value);
-    setCurrentPageIndex(0);
-  };
-
-  const toggleSortOrder = () => {
-    setSortOrder(sortOrder === "asc" ? "desc" : "asc");
-  };
-
-  const filteredAssets = currentPage
-      .filter((asset: any) => {
-        return (
-            (showOwnedAssets ? asset.valueUsd !== null : true) &&
-            asset?.name?.toLowerCase().includes(search.toLowerCase()) &&
-            (asset.valueUsd ? parseFloat(asset.valueUsd) >= 1 : false)
-        );
-      })
-      .sort((a: any, b: any) => {
-        if (sortOrder === "asc") {
-          return (a.valueUsd || 0) - (b.valueUsd || 0);
-        }
-        return (b.valueUsd || 0) - (a.valueUsd || 0);
-      });
-
-  useEffect(() => {
-    setTotalAssets(filteredAssets.length);
-  }, [showOwnedAssets, currentPage, search, sortOrder]);
-
-  const fetchPage = async () => {
-    try {
-      if (balances) {
-        setShowOwnedAssets(true);
-        setCurrentPage(balances);
-        console.log("balances: ", balances);
-        setTotalAssets(balances.length);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    fetchPage();
-  }, [balances]);
-
-  return (
-      <Stack spacing={4}>
-        <InputGroup>
-          <InputLeftElement pointerEvents="none">
-            <Search2Icon color="gray.300" />
-          </InputLeftElement>
-          <Input
-              value={search}
-              onChange={handleSearchChange}
-              placeholder="Bitcoin..."
-              type="text"
-          />
-        </InputGroup>
-        <Box>
-          <Text fontSize="2xl">Total Assets: {totalAssets}</Text>
-          <Checkbox
-              isChecked={showOwnedAssets}
-              onChange={() => setShowOwnedAssets(!showOwnedAssets)}
-          >
-            Show only owned assets
-          </Checkbox>
-          <Button onClick={toggleSortOrder} size="sm">
-            Sort by Value{" "}
-            {sortOrder === "asc" ? <ChevronUpIcon /> : <ChevronDownIcon />}
-          </Button>
-          <br />
-          <br />
-          {filteredAssets.map((asset: any, index: number) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Box key={index}>
-                <Flex
-                    alignItems="center"
-                    borderRadius="md"
-                    border="1px solid #fff"
-                    bg="black"
-                    boxShadow="sm"
-                    padding={2}
-                >
-                  <Avatar
-                      size="md"
-                      src={`https://pioneers.dev/coins/${
-                          COIN_MAP_LONG[asset?.chain]
-                      }.png`}
-                  />
-                  <Box ml={3}>
-                    <Text fontSize="sm">Asset: {asset?.symbol}</Text>
-                    <Text fontSize="sm">
-                      Value USD:{" "}
-                      {typeof asset?.valueUsd === "string"
-                          ? (+asset.valueUsd).toFixed(2).toLocaleString()
-                          : ""}
-                    </Text>
-                  </Box>
-                  <Button
-                      ml="auto"
-                      onClick={() => handleSelectClick(asset)}
-                      size="sm"
-                      variant="outline"
-                  >
-                    Select
-                  </Button>
-                </Flex>
-              </Box>
-          ))}
-        </Box>
-        <Flex justifyContent="space-between" mt={4}>
-          <Button
-              isDisabled={currentPageIndex === 0}
-              onClick={() => setCurrentPageIndex(currentPageIndex - 1)}
-          >
-            Previous Page
-          </Button>
-          <Button
-              isDisabled={filteredAssets.length < itemsPerPage}
-              onClick={() => setCurrentPageIndex(currentPageIndex + 1)}
-          >
-            Next Page
-          </Button>
-        </Flex>
-      </Stack>
-  );
-}