@ape.swap/bonds-sdk 1.0.531 → 1.0.533

package/dist/components/BondMenu/BondMenu.js

@@ -23,13 +23,8 @@ 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, { sx: {
+    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',

package/dist/components/BondMenu/useChainFilterOption.js

@@ -2,6 +2,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS } from '../../config/constants/queryKeys';
 import useCookie from '../../hooks/useCookie';
 import { useCallback } from 'react';
+// import { useRouter } from 'next/router'
 export default function useChainFilterOption() {
     var _a;
     var _b = useCookie(QUERY_KEYS.CHAIN_FILTER_OPTION, ['All Chains']), cookie = _b.cookie, updateCookie = _b.updateCookie;
@@ -10,17 +11,19 @@ export default function useChainFilterOption() {
         queryFn: function () { return cookie; },
         initialData: cookie,
     }).data;
-    var urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
+    var asPath = window.location.href;
+    var query = new URLSearchParams(window.location.search);
+    var pathname = window.location.pathname;
+    var urlParams = typeof window !== 'undefined' ? new URLSearchParams(new URL(asPath).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) {
             console.log('remove url');
-            urlParams === null || urlParams === void 0 ? void 0 : urlParams.delete('chain');
-            var newUrl = "".concat(window.location.pathname, "?").concat(urlParams === null || urlParams === void 0 ? void 0 : urlParams.toString());
-            window.history.replaceState(null, '', newUrl);
+            query.delete('chain');
+            window.history.replaceState(null, '', "".concat(pathname, "?").concat(query.toString()));
         }
-    }, [urlChain, urlParams]);
+    }, [urlChain, pathname, query]);
     var setChainFilterOption = useCallback(function (newValue) {
         updateCookie(newValue);
         queryClient.setQueryData(["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)], newValue);

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

@@ -3,6 +3,8 @@ 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;

package/dist/components/BondRows/BondRowHeader.js

@@ -7,23 +7,21 @@ 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 inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, 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 _b = useState(''), searchQuery = _b[0], setSearchQuery = _b[1];
     var handleChangeQuery = useCallback(function (event) {
         setSearchQuery(event.target.value);
         setFilterOption('ALL');

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();
@@ -221,9 +222,7 @@ var Bonds = function (_a) {
     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 +234,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, onInputChange: handleInputChange, onSort: handleSort }), bondsRendered && (_jsx(BondRowsByChain, { bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick }))] })] }));
 };
 export default Bonds;

package/dist/scss/BondMenu.scss

@@ -8,7 +8,7 @@
 
 .filters.network {
     display: flex;
-    width: 100%;
+    width: 20%;
 }
 
 .filters.desktop-rec {
@@ -21,4 +21,10 @@
     display: flex;
     width: 100%;
     justify-content: end;
+}
+
+.filters.clear-all {
+    display: flex;
+    align-items: center;
+    width: 13%;
 }

package/package.json

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