@ape.swap/bonds-sdk 1.0.77 → 1.0.78-2.test.10

package/dist/components/BondMenu/BondMenu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface BondMenuProps {
+    setChainFilterOption: (newValue: string[]) => void;
+    chainFilterOption: string[];
+    filterOptions: string[];
+    filterOption: string;
+    setFilterOption: (newOption: string) => void;
+    onHandleQueryChange: (value: string) => void;
+}
+declare const BondMenu: React.FC<BondMenuProps>;
+export default BondMenu;

package/dist/components/BondMenu/BondMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { useCallback } from 'react';
+import { Flex, IconButton } from '../uikit-sdk';
+import RecommendationSelector from '../MenuSelect/RecommendationSelector';
+import MenuSelect from '../MenuSelect/MenuSelect';
+import NetworkFilter from '../NetworkFilter';
+var BondMenu = function (_a) {
+    var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange;
+    var mappedFilters = filterOptions.map(function (filter) {
+        return {
+            label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
+            value: filter,
+        };
+    });
+    var asPath = window.location.pathname + window.location.search;
+    var handleFilterSelection = useCallback(function (newOption) {
+        setChainFilterOption(['All Chains']);
+        setFilterOption(newOption);
+    }, [setChainFilterOption, setFilterOption]);
+    return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters desktop-rec", sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' }, children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), _jsx(Flex, { className: "filtesr mobile-rec", sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' }, children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) }), _jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' }, children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), _jsxs(Flex, { className: "filters clear-all", sx: {
+                    display: ['none', 'none', 'none', 'flex'],
+                    color: 'textDisabledButton',
+                    fontSize: '14px',
+                    background: 'white2',
+                    borderRadius: 'normal',
+                    p: '8px 16px',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontWeight: 500,
+                    ml: '15px',
+                    lineHeight: '13px',
+                    cursor: 'pointer',
+                }, onClick: function () {
+                    setChainFilterOption(['All Chains']);
+                    setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
+                    onHandleQueryChange('');
+                }, children: ["Clear All", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
+};
+export default BondMenu;

package/dist/components/BondMenu/useChainFilterOption.d.ts

@@ -0,0 +1,4 @@
+export default function useChainFilterOption(): {
+    data: string[];
+    setChainFilterOption: (newValue: string[]) => void;
+};

package/dist/components/BondMenu/useChainFilterOption.js

@@ -0,0 +1,30 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEYS } from '../../config/constants/queryKeys';
+import useCookie from '../../hooks/useCookie';
+import { useCallback } from 'react';
+export default function useChainFilterOption() {
+    var _a;
+    var _b = useCookie(QUERY_KEYS.CHAIN_FILTER_OPTION, ['All Chains']), cookie = _b.cookie, updateCookie = _b.updateCookie;
+    var data = useQuery({
+        queryKey: ["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)],
+        queryFn: function () { return cookie; },
+        initialData: cookie,
+    }).data;
+    var urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+    var urlChain = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('chain')) !== null && _a !== void 0 ? _a : '';
+    var queryClient = useQueryClient();
+    var removeURLChain = useCallback(function () {
+        if (urlChain && urlParams) {
+            console.log('remove url');
+            urlParams.delete('chain');
+            var newUrl = "".concat(window.location.pathname, "?").concat(urlParams.toString());
+            window.history.replaceState({}, '', newUrl);
+        }
+    }, [urlChain, urlParams]);
+    var setChainFilterOption = useCallback(function (newValue) {
+        updateCookie(newValue);
+        queryClient.setQueryData(["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)], newValue);
+        removeURLChain();
+    }, [updateCookie, queryClient, removeURLChain]);
+    return { data: data, setChainFilterOption: setChainFilterOption };
+}

package/dist/components/BondRows/BondRow.d.ts

@@ -0,0 +1,8 @@
+import { BondsDataResponse } from "../../types/bonds";
+interface BondRowProps {
+    key: string;
+    bond: BondsDataResponse;
+    hotBonds?: string[];
+}
+declare const BondRow: React.FC<BondRowProps>;
+export default BondRow;

package/dist/components/BondRows/BondRow.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import BigNumber from "bignumber.js";
+import { ChainId } from "../../enum/apeswaplists";
+import ProgressBar from "../ProgressBar/ProgressBar";
+import ProgressBarWrapper from "../ProgressBar/ProgressBarWrapper";
+import TokenInfoAndName from "../TokenInfoAndName";
+import Tooltip from "../Tooltip/Tooltip";
+import { Svg, TooltipBubble } from "../uikit-sdk";
+import { formatDollar, formatValue } from "../../utils/formatNumbers";
+import getTimePeriods from "../../utils/getTimePeriods";
+import { BLOCK_EXPLORER } from "../../config/constants/chains";
+import { useEffect, useState } from "react";
+import { Flex } from "theme-ui";
+var BondRow = function (_a) {
+    var _b, _c, _d;
+    var bond = _a.bond, hotBonds = _a.hotBonds;
+    // Modal
+    var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
+    useEffect(function () {
+        if (isModalOpen === true) {
+            if (typeof window !== "undefined") {
+                var newUrl = "/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId);
+                window.history.pushState({ path: newUrl }, '', newUrl);
+                console.log(isModalOpen);
+            }
+        }
+    }, [isModalOpen]);
+    useEffect(function () {
+        var fullUrl = window.location.href;
+        console.log('URL: ', fullUrl);
+    }, []);
+    var rowClick = function (bond) {
+        setIsModalOpen(true);
+    };
+    // Functions for calcuations
+    var vestingTime = function (vestingTerm) {
+        return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
+    };
+    var getDiscountColor = function (discount) {
+        return discount < 0 ? 'discount-negative' : 'discount-positive';
+    };
+    var remainingPercentage = function (bond) {
+        var _a, _b;
+        var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.earnToken.decimals[bond.chainId]));
+        var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
+        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+    };
+    var remainingTokensFormat = function (bond) {
+        var _a;
+        return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
+    };
+    var remainingTokensUsd = function (bond) {
+        var _a, _b;
+        var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
+        return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
+    };
+    var getBillContractURL = function (bond) {
+        var _a;
+        var selectedChain = (_a = bond.chainId) !== null && _a !== void 0 ? _a : ChainId.BSC;
+        var explorerLink = BLOCK_EXPLORER[selectedChain];
+        return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
+    };
+    var calculateARR = function (bond) {
+        var _a;
+        var discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
+        var vestingDays = vestingTime(bond.vestingTerm).days;
+        return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
+    };
+    return (_jsxs(Flex, { className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); }, children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bond }) }), _jsx(Flex, { className: "column column-tokenicons", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.earnToken.address[bond.chainId]) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_b = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _b === void 0 ? void 0 : _b.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_c = bond.chainId) !== null && _c !== void 0 ? _c : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)", children: _jsx(Svg, { icon: "more", width: "20px" }) }) })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsx(Flex, { className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: (bond === null || bond === void 0 ? void 0 : bond.discount) !== undefined ? "".concat(bond.discount.toFixed(2), "%") : '-' }), _jsx(Flex, { className: "column column-arr", children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' }), _jsx(Flex, { className: "column column-terms", children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' }), _jsx(Flex, { className: "column column-tokensremaining", children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
+                                width: '127px',
+                                height: '25px',
+                                flexDirection: 'column',
+                                justifyContent: 'center',
+                                display: ['none', 'none', 'none', 'flex'],
+                            }, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.earnToken.symbol, " (").concat(formatDollar({
+                                num: remainingTokensUsd(bond).toNumber(),
+                                isPrice: true,
+                            }), ")") }) }), _jsx(Flex, { className: "column column-hotbond", children: _jsx(Flex, { className: "column column-icon", children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) }) })] })] }, bond.billAddress));
+};
+export default BondRow;

package/dist/components/BondRows/BondRowHeader.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+interface BondRowHeaderProps {
+    inputValue: string;
+    setChainFilterOption: (newValue: string[]) => void;
+    chainFilterOption: string[];
+    filterOptions: string[];
+    filterOption: string;
+    setFilterOption: (newOption: string) => void;
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onHandleQueryChange: (value: string) => void;
+    onSort: (key: 'discount' | 'arr' | 'terms' | 'tokensRemaining') => void;
+}
+declare const BondRowHeader: React.FC<BondRowHeaderProps>;
+export default BondRowHeader;

package/dist/components/BondRows/BondRowHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex } from 'theme-ui';
+import { Input } from '../uikit-sdk/Input';
+import { Svg, TooltipBubble } from '../uikit-sdk';
+import { TooltipText } from '../../enum/tooltips';
+import BondMenu from '../BondMenu/BondMenu';
+var BondRowHeader = function (_a) {
+    var inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onHandleQueryChange = _a.onHandleQueryChange, onSort = _a.onSort;
+    return (_jsxs(Flex, { className: "bondrow-header", children: [_jsx(Flex, { className: "bondrow-header filters", children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: onHandleQueryChange }) }), _jsxs(Flex, { className: "bondrow-header rows", children: [_jsxs(Flex, { className: "column column-tokens header", children: [_jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }), _jsx(Flex, { className: "column column-tokenicons header" })] }), _jsxs(Flex, { className: "column column-bondinfo header", children: [_jsxs(Flex, { className: "column column-discount header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)", children: ["DISCOUNT", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('discount'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-arr header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)", children: ["ARR", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('arr'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-terms header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)", children: ["TERMS", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column column-tokensremaining header", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)", children: ["TOKENS REMAINING", _jsx(Flex, { className: "column header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) })] }) }), _jsx(Flex, { className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column column-hotbond header" })] })] })] }));
+};
+export default BondRowHeader;

package/dist/components/BondRows/BondRowsByChain.d.ts

@@ -0,0 +1,8 @@
+import { BondsDataResponse } from '../../types/bonds';
+declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains }: {
+    bonds: BondsDataResponse[];
+    hotBonds?: string[];
+    hideTitles: boolean;
+    chains?: number[];
+}) => import("react").JSX.Element;
+export default BondRowsByChain;

package/dist/components/BondRows/BondRowsByChain.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import BondRowsWithTitle from './BondRowsWithTitle';
+import { MAINNET_CHAINS } from '../../config/constants/chains';
+import { Flex } from 'theme-ui';
+var BondRowsByChain = function (_a) {
+    var bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles, chains = _a.chains;
+    return (_jsx(Flex, { className: "bondrowsbychain", children: (MAINNET_CHAINS.map(function (chain, index) {
+            return ((!chains || chains.length === 0 || chains.includes(chain)) &&
+                _jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles }, chain));
+        })) }));
+};
+export default BondRowsByChain;

package/dist/components/BondRows/BondRowsWithTitle.d.ts

@@ -0,0 +1,8 @@
+import { BondsDataResponse } from "../../types/bonds";
+declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles }: {
+    chain: number;
+    bonds: BondsDataResponse[];
+    hotBonds?: string[];
+    hideTitles: boolean;
+}) => import("react").JSX.Element;
+export default BondRowsWithTitle;

package/dist/components/BondRows/BondRowsWithTitle.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import ChainTitle from "./ChainTitle";
+import BondRow from "./BondRow";
+import { useState } from "react";
+import { Flex } from "theme-ui";
+var BondRowsWithTitle = function (_a) {
+    var chain = _a.chain, bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles;
+    var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
+    var key = chain;
+    var _b = useState(true), isOpen = _b[0], setIsOpen = _b[1];
+    return (_jsx(Flex, { className: "bondrowswithtitle", children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: billsFilteredByChain.length > 0 ? false : true, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+                        position: 'relative',
+                        overflow: 'hidden',
+                        width: '100%',
+                        marginTop: '0px',
+                    }, children: billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map(function (bill) { return (_jsx(BondRow, { bond: bill, hotBonds: hotBonds }, bill.billAddress)); }) }, key))] }) }, key));
+};
+export default BondRowsWithTitle;

package/dist/components/BondRows/ChainTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const ChainTitle: ({ chain, pt, hideTitles, isOpen, }: {
+    chain: number;
+    pt: string;
+    hideTitles?: boolean;
+    isOpen: boolean;
+}) => React.JSX.Element;
+export default ChainTitle;

package/dist/components/BondRows/ChainTitle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, Svg } from '../uikit-sdk';
+import { NETWORK_LABEL } from '../../config/constants/chains';
+var ChainTitle = function (_a) {
+    var chain = _a.chain, pt = _a.pt, hideTitles = _a.hideTitles, isOpen = _a.isOpen;
+    return (_jsxs(Flex, { className: "chaintitle", sx: {
+            pt: pt,
+            pb: '10px',
+            color: 'textDisabledButton',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            display: hideTitles ? 'none' : 'flex',
+            width: '200px',
+        }, children: [NETWORK_LABEL[chain], " Bonds", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'down' : 'up', width: 8, color: "textDisabledButton" }) })] }));
+};
+export default ChainTitle;

package/dist/components/MenuSelect/MenuSelect.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Option } from './types';
+declare const MenuSelect: ({ selectedOption, setOption, options, ...props }: {
+    selectedOption: string;
+    setOption: (option: string) => void;
+    options: Option[] | undefined;
+} | any) => React.JSX.Element;
+export default MenuSelect;

package/dist/components/MenuSelect/MenuSelect.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Select, SelectItem, Text } from '../uikit-sdk';
+var MenuSelect = function (_a) {
+    var selectedOption = _a.selectedOption, setOption = _a.setOption, options = _a.options, props = __rest(_a, ["selectedOption", "setOption", "options"]);
+    return (_jsx(Select, __assign({ size: "xsm", onChange: function (e) { return setOption(e.target.value); }, active: selectedOption, sx: {
+            height: '36px',
+            display: 'flex',
+            width: '100%',
+            paddingRight: '4px',
+        } }, props, { children: options === null || options === void 0 ? void 0 : options.map(function (option) {
+            return (_jsx(SelectItem, { size: "xsm", value: option.value, children: _jsx(Text, { sx: { fontWeight: 400, pl: '10px' }, children: option.label }) }, option.label));
+        }) })));
+};
+export default MenuSelect;

package/dist/components/MenuSelect/RecommendationSelector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const RecommendationSelector: ({ options, activeOption, setActiveOption, }: {
+    options: string[];
+    activeOption: string;
+    setActiveOption: (activeOption: string) => void;
+}) => React.JSX.Element;
+export default RecommendationSelector;

package/dist/components/MenuSelect/RecommendationSelector.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Flex } from '../uikit-sdk';
+var RecommendationSelector = function (_a) {
+    var options = _a.options, activeOption = _a.activeOption, setActiveOption = _a.setActiveOption;
+    var handleClick = function (option) {
+        setActiveOption(option);
+    };
+    return (_jsx(Flex, { sx: {
+            alignItems: 'center',
+            color: 'grey',
+            fontSize: ['11px'],
+            fontWeight: 500,
+            '& > div:last-child': {
+                marginRight: '0',
+            },
+        }, children: options.map(function (option) {
+            var isActive = option === activeOption;
+            return (_jsx(Flex, { sx: {
+                    background: isActive ? 'primaryShade' : 'white2',
+                    color: isActive ? 'primaryButton' : 'textDisabledButton',
+                    px: ['6px', '6px', '6px', '10px'],
+                    borderRadius: 'small',
+                    mr: ['8px', '8px', '8px', '10px'],
+                    textTransform: 'uppercase',
+                    cursor: 'pointer',
+                    lineHeight: '11px',
+                    alignItems: 'center',
+                    height: '24px',
+                }, onClick: function () { return handleClick(option); }, children: option }, option));
+        }) }));
+};
+export default RecommendationSelector;

package/dist/components/MenuSelect/types.d.ts

@@ -0,0 +1,22 @@
+import React, { Dispatch, SetStateAction } from 'react';
+export interface ListMenuProps {
+    onHandleQueryChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    setFilterOption?: Dispatch<SetStateAction<string>>;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    filterOption?: string;
+    setSortOption: Dispatch<SetStateAction<string>>;
+    sortOption?: string;
+    query: string;
+    checkboxLabel: string;
+    showOnlyCheckbox: boolean;
+    setShowOnlyCheckbox: (value: boolean) => void;
+    toogleLabels: string[];
+    filterOptions?: Option[];
+    sortOptions?: Option[];
+    actionButton?: React.ReactNode;
+    showMonkeyImage?: boolean;
+}
+export type Option = {
+    label: string;
+    value: string;
+};

package/dist/components/NetworkFilter/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const NetworkFilter: ({ chainFilterOption, setChainFilterOption, }: {
+    chainFilterOption: string[];
+    setChainFilterOption: (newValue: string[]) => void;
+}) => React.JSX.Element;
+export default NetworkFilter;

package/dist/components/NetworkFilter/index.js

@@ -0,0 +1,66 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import { useState } from 'react';
+import { Flex, Svg, Text } from '../../components/uikit-sdk';
+import { MAINNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL } from '../../config/constants/chains';
+import Checkbox from '../../components/uikit-sdk/Checkbox';
+var NetworkFilter = function (_a) {
+    var chainFilterOption = _a.chainFilterOption, setChainFilterOption = _a.setChainFilterOption;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handleCheckbox = function (newChain) {
+        var prevChainFilterOptions = chainFilterOption;
+        var newChainFilterOption;
+        if (newChain === 'All Chains') {
+            newChainFilterOption = ['All Chains'];
+        }
+        else {
+            if (prevChainFilterOptions.includes(newChain)) {
+                var filteredChains = prevChainFilterOptions.filter(function (option) { return option !== newChain; });
+                newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains;
+            }
+            else {
+                var newArray_1 = __spreadArray(__spreadArray([], prevChainFilterOptions.filter(function (option) { return option !== 'All Chains'; }), true), [newChain], false);
+                var allChainsArePresent = MAINNET_CHAINS.every(function (chain) { return newArray_1.includes(chain.toString()); });
+                newChainFilterOption = allChainsArePresent ? ['All Chains'] : newArray_1;
+            }
+        }
+        setChainFilterOption(newChainFilterOption);
+    };
+    return (_jsxs(Flex, { sx: { width: '100%', position: 'relative' }, children: [_jsxs(Flex, { sx: {
+                    background: 'white2',
+                    p: '6px',
+                    borderRadius: 'normal',
+                    cursor: 'pointer',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                }, onClick: function () { return setIsOpen(!isOpen); }, children: [_jsx(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : "Chains (".concat(chainFilterOption.length, ")") }), _jsx(Flex, { sx: { ml: '5px' }, children: _jsx(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (_jsx(Flex, { sx: {
+                    flexDirection: ['column', 'column', 'column'],
+                    position: 'absolute',
+                    top: '45px',
+                    right: '0px',
+                    width: '200px',
+                    height: ['300px', '300px', '350px'],
+                    overflowY: 'scroll',
+                    borderRadius: 'normal',
+                    background: 'white2',
+                    zIndex: 555,
+                }, children: __spreadArray(['All Chains'], MAINNET_CHAINS, true).map(function (chainId) {
+                    return (_jsx(Flex, { sx: {
+                            borderRadius: 'normal',
+                            p: '5px 15px',
+                            minHeight: '40px',
+                            cursor: 'pointer',
+                            '&:hover': { bg: 'white3' },
+                        }, onClick: function () { return handleCheckbox(chainId.toString()); }, children: _jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [_jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: function () { return null; } }), chainId === 'All Chains' ? (_jsxs(_Fragment, { children: [_jsx(Flex, { sx: { mx: '8px' }, children: _jsx(Svg, { icon: "AllChains", width: "22px" }) }), _jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: _jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), _jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                }) }))] }));
+};
+export default NetworkFilter;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ProgressBarProps {
+    value: number;
+    color?: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Box, Flex } from 'theme-ui';
+var ProgressBar = function (_a) {
+    var value = _a.value, _b = _a.color, color = _b === void 0 ? 'text' : _b;
+    return (_jsx(Flex, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: _jsx(Box, { className: "progressbar-background", children: _jsx(Box, { className: "progressbar-completed", style: {
+                    width: "".concat(value <= 3 ? 3 : value, "%")
+                } }) }) }));
+};
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBarWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface ProgressBarWrapperProps {
+    title?: string;
+    value?: React.ReactNode;
+    value2Direction?: 'column' | 'row';
+    toolTip?: string;
+    toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
+    toolTipTransform?: string;
+    style?: ThemeUIStyleObject;
+    showTooltip?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;
+export default _default;

package/dist/components/ProgressBar/ProgressBarWrapper.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React from 'react';
+import { styles } from './styles';
+import { Flex, Text, TooltipBubble, Skeleton } from '../uikit-sdk';
+var ProgressBarWrapper = function (_a) {
+    var title = _a.title, value = _a.value, style = _a.style, showTooltip = _a.showTooltip, toolTipPlacement = _a.toolTipPlacement, toolTipTransform = _a.toolTipTransform, toolTip = _a.toolTip;
+    return (_jsxs(Flex, { sx: style, children: [_jsx(Flex, { sx: { alignItems: 'center' }, children: _jsx(Text, { sx: styles.titleText, children: "".concat(title) }) }), showTooltip ? (_jsx(Flex, { sx: { alignItems: 'center', width: '100%' }, children: _jsx(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: _jsx(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: _jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) }) }) })) : (_jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) }))] }));
+};
+export default React.memo(ProgressBarWrapper);

package/dist/components/ProgressBar/styles.d.ts

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,82 @@
+export var styles = {
+    listCardContainer: {
+        borderRadius: 0,
+        flexDirection: ['column', 'column', 'column', 'row'],
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'white2',
+        borderBottom: '1px solid rgba(226, 226, 226, .2)',
+        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
+        margin: '0 10px 0 10px',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+        width: '100%',
+        height: ['unset', 'unset', 'unset', '86px'],
+    },
+    listViewContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        my: '5px',
+    },
+    infoContentMobile: {
+        display: ['flex', 'flex', 'flex', 'none'],
+        alignItems: 'center',
+    },
+    tokensContainer: {
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    },
+    valueText: {
+        fontSize: ['12px', '12px', '12px', '14px'],
+        color: 'primaryBright',
+        lineHeight: '16px',
+        fontWeight: 700,
+        mr: '5px',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    secondaryText: {
+        fontSize: '12px',
+        color: 'gray',
+        lineHeight: '16px',
+        fontWeight: 400,
+    },
+    cardContentContainer: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    animationDiv: {
+        position: 'relative',
+        width: '100%',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+    },
+    expandedWrapper: {
+        background: 'white3',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '15px 10px',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+};