@ape.swap/bonds-sdk 1.0.478 → 1.0.480

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

@@ -3,6 +3,9 @@ import React from 'react';
 import '../../scss/BondRowHeader.scss';
 interface BondRowHeaderProps {
     inputValue: string;
+    filterOptions: string[];
+    filterOption: string;
+    setFilterOption: (newOption: string) => void;
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onSort: (key: 'discount' | 'arr' | 'terms' | 'tokensRemaining') => void;
 }

package/dist/components/BondRows/BondRowHeader.js

@@ -15,8 +15,15 @@ import { Input } from '../uikit-sdk/Input';
 import { Svg, TooltipBubble } from '../uikit-sdk';
 import { TooltipText } from '../../enum/tooltips';
 import '../../scss/BondRowHeader.scss';
+import MenuSelect from '../MenuSelect/MenuSelect';
 var BondRowHeader = function (_a) {
-    var inputValue = _a.inputValue, onInputChange = _a.onInputChange, onSort = _a.onSort;
-    return (_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { 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" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" })] }))] })));
+    var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
+    var mappedFilters = filterOptions.map(function (filter) {
+        return {
+            label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
+            value: filter,
+        };
+    });
+    return (_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { 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, __assign({ className: "column column-tokenicons" }, { children: _jsx(Flex, __assign({ sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' } }, { children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ 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" })] }))] })));
 };
 export default BondRowHeader;

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/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, __assign({ size: "xsm", value: option.value }, { children: _jsx(Text, __assign({ sx: { fontWeight: 400, pl: '10px' } }, { children: option.label })) }), option.label));
+        }) })));
+};
+export default MenuSelect;

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/MenuSelect/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uikit-sdk/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectProps } from './types';
+declare const Select: ({ children, active, width, size, position, className, label, ...props }: SelectProps) => React.JSX.Element;
+export default Select;

package/dist/components/uikit-sdk/Select/Select.js

@@ -0,0 +1,61 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+import React, { useRef, useState } from 'react';
+import { Box, Flex } from 'theme-ui';
+import { AnimatePresence, motion } from 'framer-motion';
+import { selectPadding, sizes, positions, selectedExtraPadding } from './types';
+import Svg from '../Svg';
+import styles from './styles';
+var Select = function (_a) {
+    var children = _a.children, active = _a.active, _b = _a.width, width = _b === void 0 ? 'fit-content' : _b, _c = _a.size, size = _c === void 0 ? sizes.MEDIUM : _c, _d = _a.position, position = _d === void 0 ? positions.BOTTOM : _d, className = _a.className, label = _a.label, props = __rest(_a, ["children", "active", "width", "size", "position", "className", "label"]);
+    var inputRef = useRef(null);
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var handleClick = function () { return setOpen(function (prev) { return !prev; }); };
+    var setNativeInput = function (val) {
+        var _a, _b, _c;
+        var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        if (input) {
+            (_c = (_b = (_a = Object === null || Object === void 0 ? void 0 : Object.getOwnPropertyDescriptor) === null || _a === void 0 ? void 0 : _a.call(Object, window.HTMLInputElement.prototype, 'value')) === null || _b === void 0 ? void 0 : _b.set) === null || _c === void 0 ? void 0 : _c.call(input, val);
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, __assign({ sx: __assign(__assign({}, styles.container), { width: width }), onClick: handleClick, className: className }, { children: [_jsxs(Flex, __assign({ sx: {
+                            padding: selectedExtraPadding[size],
+                            pr: selectPadding[size],
+                            columnGap: '10px',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            overflow: 'hidden',
+                        } }, { children: [label ? (_jsx(Box, { children: label })) : (React.Children.map(children, function (child) {
+                                var _a;
+                                if (((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value) !== active) {
+                                    return null;
+                                }
+                                return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { active: true }));
+                            })), _jsx(Flex, __assign({ sx: { minWidth: '10px' } }, { children: _jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) }))] })), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, __assign({ initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, sx: __assign(__assign({}, styles.ul), { zIndex: 10, top: position === positions.BOTTOM ? 'calc(100% + 5px)' : undefined, bottom: position === positions.TOP ? 'calc(100% + 5px)' : undefined }) }, { children: React.Children.map(children, function (child) {
+                                return React.cloneElement(child, __assign(__assign({}, child === null || child === void 0 ? void 0 : child.props), { active: false, onClick: function () { var _a; return setNativeInput((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.value); } }));
+                            }) }))) }), _jsx("input", __assign({ ref: inputRef, value: active || '', "aria-hidden": "true", tabIndex: -1 }, props, { sx: styles.input }))] })), open && _jsx("div", { "aria-hidden": "true", onClick: function () { return setOpen(false); }, sx: styles.backdrop })] }));
+};
+export default Select;

package/dist/components/uikit-sdk/Select/SelectItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SelectItemProps } from './types';
+declare const SelectItem: ({ onClick, value, active, size, children, ...props }: SelectItemProps) => import("react").JSX.Element;
+export default SelectItem;

package/dist/components/uikit-sdk/Select/SelectItem.js

@@ -0,0 +1,40 @@
+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 { selectItemPadding, sizes } from './types';
+import { dynamicStyles } from './styles';
+import Flex from '../Flex';
+var SelectItem = function (_a) {
+    var onClick = _a.onClick, value = _a.value, active = _a.active, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, children = _a.children, props = __rest(_a, ["onClick", "value", "active", "size", "children"]);
+    var style = dynamicStyles.dropdownItem({ size: size });
+    return (_jsx(Flex, __assign({ as: "li" }, props, { onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(value); }, sx: {
+            padding: selectItemPadding[size],
+            listStyleType: 'none',
+            cursor: 'pointer',
+            borderRadius: '10px',
+            '&:hover': {
+                backgroundColor: !active ? 'white3' : undefined,
+            },
+        } }, { children: _jsx(Flex, __assign({ sx: style }, { children: children })) })));
+};
+export default SelectItem;

package/dist/components/uikit-sdk/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export { default as SelectItem } from './SelectItem';

package/dist/components/uikit-sdk/Select/index.js

@@ -0,0 +1,2 @@
+export { default as Select } from './Select';
+export { default as SelectItem } from './SelectItem';

package/dist/components/uikit-sdk/Select/styles.d.ts

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+declare const styles: Record<'container' | 'ul' | 'backdrop' | 'input', ThemeUIStyleObject>;
+export declare const dynamicStyles: Record<string, (props: any) => ThemeUIStyleObject>;
+export default styles;

package/dist/components/uikit-sdk/Select/styles.js

@@ -0,0 +1,50 @@
+import { fontSizes } from './types';
+var styles = {
+    container: {
+        background: 'white3',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        width: 'fit-content',
+        height: 'fit-content',
+        position: 'relative',
+    },
+    ul: {
+        position: 'absolute',
+        background: 'white2',
+        borderRadius: '10px',
+        cursor: 'pointer',
+        minWidth: '100%',
+        width: 'max-content',
+        overflow: 'hidden',
+        boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
+    },
+    backdrop: {
+        width: '98vw',
+        height: '100vh',
+        position: 'fixed',
+        background: 'transparent',
+        top: 0,
+        left: 0,
+    },
+    input: {
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+        width: '100%',
+    },
+};
+export var dynamicStyles = {
+    dropdownItem: function (_a) {
+        var size = _a.size;
+        return ({
+            width: '100%',
+            fontSize: fontSizes[size],
+            '*': {
+                fontSize: fontSizes[size],
+            },
+        });
+    },
+};
+export default styles;

package/dist/components/uikit-sdk/Select/types.d.ts

@@ -0,0 +1,55 @@
+import React, { InputHTMLAttributes } from 'react';
+export declare enum positions {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export declare enum sizes {
+    XSMALL = "xsm",
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare const fontSizes: {
+    xsm: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const selectPadding: {
+    xsm: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const selectedExtraPadding: {
+    xsm: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export declare const selectItemPadding: {
+    xsm: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+type sizeProps = `${sizes}`;
+type positionProps = `${positions}`;
+export interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    active?: number | string;
+    size?: sizeProps;
+    width?: string | number;
+    label?: JSX.Element;
+    position?: positionProps;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export interface SelectItemProps {
+    children: React.ReactNode;
+    onClick?: (value: number | string) => void;
+    url?: string;
+    active?: boolean;
+    size?: sizeProps;
+    value: number | string;
+    sx?: any;
+}
+export {};

package/dist/components/uikit-sdk/Select/types.js

@@ -0,0 +1,37 @@
+var _a, _b, _c, _d;
+export var positions;
+(function (positions) {
+    positions["TOP"] = "top";
+    positions["BOTTOM"] = "bottom";
+})(positions || (positions = {}));
+export var sizes;
+(function (sizes) {
+    sizes["XSMALL"] = "xsm";
+    sizes["SMALL"] = "sm";
+    sizes["MEDIUM"] = "md";
+    sizes["LARGE"] = "lg";
+})(sizes || (sizes = {}));
+export var fontSizes = (_a = {},
+    _a[sizes.XSMALL] = 1,
+    _a[sizes.SMALL] = 1,
+    _a[sizes.MEDIUM] = 3,
+    _a[sizes.LARGE] = 6,
+    _a);
+export var selectPadding = (_b = {},
+    _b[sizes.XSMALL] = 2,
+    _b[sizes.SMALL] = 4,
+    _b[sizes.MEDIUM] = 6,
+    _b[sizes.LARGE] = 8,
+    _b);
+export var selectedExtraPadding = (_c = {},
+    _c[sizes.XSMALL] = 1,
+    _c[sizes.SMALL] = 0,
+    _c[sizes.MEDIUM] = 0,
+    _c[sizes.LARGE] = 0,
+    _c);
+export var selectItemPadding = (_d = {},
+    _d[sizes.XSMALL] = 2,
+    _d[sizes.SMALL] = 4,
+    _d[sizes.MEDIUM] = 6,
+    _d[sizes.LARGE] = 8,
+    _d);

package/dist/components/uikit-sdk/index.d.ts

@@ -4,4 +4,5 @@ export { default as Text } from './Text';
 export { default as Skeleton } from './Skeleton';
 export { default as TooltipBubble } from './TooltipBubble';
 export { Button, IconButton } from './Button';
+export { Select, SelectItem } from './Select';
 export { Tag, ListTag } from './Tag';

package/dist/components/uikit-sdk/index.js

@@ -6,4 +6,5 @@ export { default as Skeleton } from './Skeleton';
 export { default as TooltipBubble } from './TooltipBubble';
 // Exports
 export { Button, IconButton } from './Button';
+export { Select, SelectItem } from './Select';
 export { Tag, ListTag } from './Tag';

package/dist/hooks/useTopThreeTags.d.ts

@@ -0,0 +1,2 @@
+import { BondsDataResponse } from '../types/bonds';
+export declare const useTopTags: (initialBondList: BondsDataResponse[]) => string[];

package/dist/hooks/useTopThreeTags.js

@@ -0,0 +1,25 @@
+// This basically returns the 2 tags with the higher active bond count
+export var useTopTags = function (initialBondList) {
+    var bonds = initialBondList;
+    var countTagsInBonds = function (bonds) {
+        var tagCount = {};
+        bonds === null || bonds === void 0 ? void 0 : bonds.forEach(function (bond) {
+            var _a;
+            if (bond.soldOut)
+                return;
+            (_a = bond.tags) === null || _a === void 0 ? void 0 : _a.forEach(function (tag) {
+                if (tag in tagCount) {
+                    tagCount[tag] += 1;
+                }
+                else {
+                    tagCount[tag] = 1;
+                }
+            });
+        });
+        return tagCount;
+    };
+    var activeBonds = bonds.filter(function (bond) { return !bond.soldOut; });
+    var countedTags = countTagsInBonds(activeBonds);
+    var sortedTagsArray = Object.entries(countedTags).sort(function (a, b) { return b[1] - a[1]; });
+    return sortedTagsArray.slice(0, 2).map(function (tagCountArray) { return tagCountArray[0]; });
+};

package/dist/pages/Bonds/Bonds.js

@@ -70,6 +70,7 @@ import { BLOCK_EXPLORER } from '../../config/constants/chains';
 import '../../scss/Bonds.scss';
 import BondRowHeader from '../../components/BondRows/BondRowHeader';
 import BondRowsByChain from '../../components/BondRows/BondRowsByChain';
+import { useTopTags } from '../../hooks/useTopThreeTags';
 var Bonds = function (_a) {
     var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
     //const { account, isActive } = useWeb3React();
@@ -259,13 +260,19 @@ var Bonds = function (_a) {
     var handleInputChange = function (event) {
         setInputValue(event.target.value);
     };
+    var topTags = useTopTags(filteredBonds);
+    var filterOptions = __spreadArray(__spreadArray(['ALL', 'FAVORITES'], topTags, true), ['SOLD OUT'], false);
+    var _l = useState(filterOptions[0]), filterOption = _l[0], setFilterOption = _l[1];
+    var handleChangeFilterOption = useCallback(function (newOption) {
+        setFilterOption(newOption);
+    }, []);
     // Page render logic
-    var _l = useState(false), bondsRendered = _l[0], setBondsRendered = _l[1];
+    var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
     useEffect(function () {
         if (filteredBonds.length > 0) {
             setBondsRendered(true);
         }
     }, [filteredBonds]);
-    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds: filteredBonds, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick })] })))] })));
+    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds: filteredBonds, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick })] })))] })));
 };
 export default Bonds;

package/dist/pages/YourBonds/YourBonds.js

@@ -78,9 +78,9 @@ import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
 import { Input } from '../../components/uikit-sdk/Input';
 import useClaimBill from '../../hooks/useClaimBill';
 var YourBonds = function (_a) {
-    var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
     //const toastError = useToastError()
     // const { onClaimBill } = useClaimBill(billAddress, billIds)
+    var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
     var _b = useState(false), pendingTrx = _b[0], setPendingTrx = _b[1];
     var handleClaim = function (billAddress, billIds, chainId, event) { return __awaiter(void 0, void 0, void 0, function () {
         var onClaimBill;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.478",
+  "version": "1.0.480",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",