@ape.swap/bonds-sdk 1.0.76 → 1.0.77-4.0

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import '../../scss/BondMenu.scss';
+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,51 @@
+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);
+};
+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 '../../scss/BondMenu.scss';
+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, __assign({ className: "menu-container filters" }, { children: [_jsx(Flex, __assign({ className: "filters desktop-rec", sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' } }, { children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) })), _jsx(Flex, __assign({ 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, __assign({ className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' } }, { children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) })), _jsxs(Flex, __assign({ 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, __assign({ 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,10 @@
+/// <reference types="react" />
+import { BondsDataResponse } from "../../types/bonds";
+import '../../scss/BondRow.scss';
+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,92 @@
+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);
+};
+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 '../../scss/BondRow.scss';
+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, __assign({ className: "bonds-container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ 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, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ 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, __assign({ className: "column column-arr" }, { children: calculateARR(bond) !== undefined ? "".concat(calculateARR(bond), "%") : '-' })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ 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, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ 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,16 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import '../../scss/BondRowHeader.scss';
+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,23 @@
+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);
+};
+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 '../../scss/BondRowHeader.scss';
+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, __assign({ className: "bondrow-header" }, { children: [_jsx(Flex, __assign({ 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, __assign({ className: "bondrow-header rows" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens header" }, { children: [_jsx(Flex, __assign({ 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, __assign({ className: "column column-bondinfo header" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["DISCOUNT", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["TERMS", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining header" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["TOKENS REMAINING", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ 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,10 @@
+/// <reference types="react" />
+import { BondsDataResponse } from '../../types/bonds';
+import '../../scss/BondRowsByChain.scss';
+declare const BondRowsByChain: ({ bonds, hotBonds, hideTitles, chains }: {
+    bonds: BondsDataResponse[];
+    hotBonds?: string[] | undefined;
+    hideTitles: boolean;
+    chains?: number[] | undefined;
+}) => import("react").JSX.Element;
+export default BondRowsByChain;

package/dist/components/BondRows/BondRowsByChain.js

@@ -0,0 +1,24 @@
+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);
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import BondRowsWithTitle from './BondRowsWithTitle';
+import { MAINNET_CHAINS } from '../../config/constants/chains';
+import '../../scss/BondRowsByChain.scss';
+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, __assign({ 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,10 @@
+/// <reference types="react" />
+import { BondsDataResponse } from "../../types/bonds";
+import '../../scss/BondRowsWithTitle.scss';
+declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, hideTitles }: {
+    chain: number;
+    bonds: BondsDataResponse[];
+    hotBonds?: string[] | undefined;
+    hideTitles: boolean;
+}) => import("react").JSX.Element;
+export default BondRowsWithTitle;

package/dist/components/BondRows/BondRowsWithTitle.js

@@ -0,0 +1,31 @@
+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);
+};
+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 '../../scss/BondRowsWithTitle.scss';
+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, __assign({ className: "bondrowswithtitle" }, { children: _jsxs(AnimatePresence, __assign({ initial: false }, { children: [_jsx(Flex, __assign({ 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, __assign({ 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 | undefined;
+    isOpen: boolean;
+}) => React.JSX.Element;
+export default ChainTitle;

package/dist/components/BondRows/ChainTitle.js

@@ -0,0 +1,29 @@
+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);
+};
+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, __assign({ 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, __assign({ 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,4 @@
+import React from 'react';
+import { Option } from './types';
+declare const MenuSelect: ({ selectedOption, setOption, options, ...props }: any) => React.JSX.Element;
+export default MenuSelect;

package/dist/components/{uikit/Tabs/TabPanel.js → MenuSelect/MenuSelect.js}

@@ -21,9 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { Box } from 'theme-ui';
-var TabPanel = function (_a) {
-    var children = _a.children, index = _a.index, activeTab = _a.activeTab, props = __rest(_a, ["children", "index", "activeTab"]);
-    return activeTab === index ? (_jsx(Box, __assign({}, props, { sx: { pt: 8 } }, { children: children }))) : null;
+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, __assign({ size: "xsm", value: option.value }, { children: _jsx(Text, __assign({ sx: { fontWeight: 400, pl: '10px' } }, { children: option.label })) }), option.label));
+        }) })));
 };
-export default TabPanel;
+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,43 @@
+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);
+};
+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, __assign({ 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, __assign({ 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/Modals/BondModal/BondModal.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import '../../../scss/BondModal.scss';
+interface BondModalProps {
+    account: string;
+    isActive: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    bondAddress: string | null;
+    accountChainId: number;
+}
+declare const BondModal: React.FC<BondModalProps>;
+export default BondModal;