@ape.swap/bonds-sdk 1.0.532 → 1.0.534

package/dist/components/BondMenu/BondMenu.js

@@ -23,11 +23,6 @@ var BondMenu = function (_a) {
     var handleFilterSelection = useCallback(function (newOption) {
         setChainFilterOption(['All Chains']);
         setFilterOption(newOption);
-        // Update the URL without reloading the page
-        var urlParams = new URLSearchParams(window.location.search);
-        urlParams.set('filter', newOption);
-        var newUrl = "".concat(window.location.pathname, "?").concat(urlParams.toString());
-        window.history.replaceState(null, '', newUrl);
     }, [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'],

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

@@ -3,10 +3,12 @@ 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>;

package/dist/components/BondRows/BondRowHeader.js

@@ -1,33 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-/** @jsxImportSource theme-ui */
-import { useCallback, useState } from 'react';
 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';
-import useChainFilterOption from '../BondMenu/useChainFilterOption';
 var BondRowHeader = function (_a) {
-    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,
-        };
-    });
-    var _b = useChainFilterOption(), chainFilterOption = _b.data, setChainFilterOption = _b.setChainFilterOption;
-    var handleChangeFilterOption = useCallback(function (newOption) {
-        setFilterOption(newOption);
-    }, []);
-    var handleChangeChainFilterOption = useCallback(function (newOptions) {
-        setChainFilterOption(newOptions);
-    }, [setChainFilterOption]);
-    var _c = useState(''), searchQuery = _c[0], setSearchQuery = _c[1];
-    var handleChangeQuery = useCallback(function (event) {
-        setSearchQuery(event.target.value);
-        setFilterOption('ALL');
-    }, []);
-    return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { className: "header-container filters", children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: handleChangeChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onHandleQueryChange: setSearchQuery }) }), _jsxs(Flex, { className: "header-container rows", children: [_jsxs(Flex, { className: "column column-tokens", 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" })] }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-discount", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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" })] })] })] }));
+    var inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange, onSort = _a.onSort;
+    return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { className: "header-container 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: "header-container rows", children: [_jsxs(Flex, { className: "column column-tokens", children: [_jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: onHandleQueryChange, 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, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-discount", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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", children: [_jsx(Flex, { className: "column tooltip", children: _jsxs(TooltipBubble, { 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" })] })] })] }));
 };
 export default BondRowHeader;

package/dist/pages/Bonds/Bonds.js

@@ -58,6 +58,7 @@ import '../../scss/Bonds.scss';
 import BondRowHeader from '../../components/BondRows/BondRowHeader';
 import BondRowsByChain from '../../components/BondRows/BondRowsByChain';
 import { useTopTags } from '../../hooks/useTopThreeTags';
+import useChainFilterOption from '../../components/BondMenu/useChainFilterOption';
 var Bonds = function (_a) {
     var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
     //const { account, isActive } = useWeb3React();
@@ -215,15 +216,14 @@ var Bonds = function (_a) {
     };
     // Search logic
     var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
-    var handleInputChange = function (event) {
+    var handleChangeQuery = useCallback(function (event) {
         setInputValue(event.target.value);
-    };
+        setFilterOption('ALL');
+    }, []);
     var topTags = useTopTags(sortedBonds);
     var filterOptions = __spreadArray(__spreadArray(['ALL'], topTags, true), ['SOLD OUT'], false);
     var _k = useState(filterOptions[0]), filterOption = _k[0], setFilterOption = _k[1];
-    var handleChangeFilterOption = useCallback(function (newOption) {
-        setFilterOption(newOption);
-    }, []);
+    var _l = useChainFilterOption(), chainFilterOption = _l.data, setChainFilterOption = _l.setChainFilterOption;
     var billstoRender = useMemo(function () {
         var billsToReturn = sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : [];
         if (inputValue) {
@@ -235,19 +235,28 @@ var Bonds = function (_a) {
         if (topTags.includes(filterOption)) {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) { var _a; return (_a = bill === null || bill === void 0 ? void 0 : bill.tags) === null || _a === void 0 ? void 0 : _a.includes(filterOption); });
         }
+        if (!(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes('All Chains'))) {
+            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) { return chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes(bill.chainId.toString()); });
+        }
         // if (filterOption === 'FAVORITES') {
         //     billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
         // }
         return billsToReturn;
         //return sortBills(billsToReturn, sortOption)
-    }, [filterOption, bondData, inputValue, topTags]);
+    }, [filterOption, bondData, inputValue, chainFilterOption, topTags]);
+    var handleChangeFilterOption = useCallback(function (newOption) {
+        setFilterOption(newOption);
+    }, []);
+    var handleChangeChainFilterOption = useCallback(function (newOptions) {
+        setChainFilterOption(newOptions);
+    }, [setChainFilterOption]);
     // 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 (billstoRender.length > 0) {
             setBondsRendered(true);
         }
     }, [billstoRender]);
-    return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", { onClick: handleApprove, children: "Approve USDT" }), _jsxs(Flex, { className: "container table-container", children: [_jsx(BondRowHeader, { inputValue: inputValue, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onSort: handleSort }), bondsRendered && (_jsx(BondRowsByChain, { bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick }))] })] }));
+    return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", { onClick: handleApprove, children: "Approve USDT" }), _jsxs(Flex, { className: "container table-container", children: [_jsx(BondRowHeader, { inputValue: inputValue, setChainFilterOption: handleChangeChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onHandleQueryChange: setInputValue, onSort: handleSort }), bondsRendered && (_jsx(BondRowsByChain, { bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick }))] })] }));
 };
 export default Bonds;

package/dist/scss/BondMenu.scss

@@ -8,7 +8,6 @@
 
 .filters.network {
     display: flex;
-    width: 20%;
 }
 
 .filters.desktop-rec {

package/package.json

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