@ape.swap/bonds-sdk 1.0.528 → 1.0.530
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
2
2
|
import { useCallback } from 'react';
|
|
3
|
-
import { Flex } from '../uikit-sdk';
|
|
3
|
+
import { Flex, IconButton } from '../uikit-sdk';
|
|
4
4
|
import RecommendationSelector from '../MenuSelect/RecommendationSelector';
|
|
5
5
|
import MenuSelect from '../MenuSelect/MenuSelect';
|
|
6
6
|
import '../../scss/BondMenu.scss';
|
|
7
7
|
import NetworkFilter from '../NetworkFilter';
|
|
8
|
+
import { useRouter } from 'next/router';
|
|
8
9
|
var BondMenu = function (_a) {
|
|
9
|
-
var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption;
|
|
10
|
+
var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange;
|
|
11
|
+
var _b = useRouter(), push = _b.push, replace = _b.replace, asPath = _b.asPath;
|
|
10
12
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
11
13
|
return {
|
|
12
14
|
label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
|
|
@@ -20,6 +22,23 @@ var BondMenu = function (_a) {
|
|
|
20
22
|
setChainFilterOption,
|
|
21
23
|
setFilterOption
|
|
22
24
|
]);
|
|
23
|
-
return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters
|
|
25
|
+
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: {
|
|
26
|
+
display: ['none', 'none', 'none', 'flex'],
|
|
27
|
+
color: 'textDisabledButton',
|
|
28
|
+
fontSize: '14px',
|
|
29
|
+
background: 'white2',
|
|
30
|
+
borderRadius: 'normal',
|
|
31
|
+
p: '8px 16px',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
justifyContent: 'center',
|
|
34
|
+
fontWeight: 500,
|
|
35
|
+
ml: '15px',
|
|
36
|
+
lineHeight: '13px',
|
|
37
|
+
cursor: 'pointer',
|
|
38
|
+
}, onClick: function () {
|
|
39
|
+
setChainFilterOption(['All Chains']);
|
|
40
|
+
setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
|
|
41
|
+
onHandleQueryChange('');
|
|
42
|
+
}, children: ["Clear All", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
|
|
24
43
|
};
|
|
25
44
|
export default BondMenu;
|
|
@@ -2,7 +2,6 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
|
|
|
2
2
|
import { QUERY_KEYS } from '../../config/constants/queryKeys';
|
|
3
3
|
import useCookie from '../../hooks/useCookie';
|
|
4
4
|
import { useCallback } from 'react';
|
|
5
|
-
import { useRouter } from 'next/router';
|
|
6
5
|
export default function useChainFilterOption() {
|
|
7
6
|
var _a;
|
|
8
7
|
var _b = useCookie(QUERY_KEYS.CHAIN_FILTER_OPTION, ['All Chains']), cookie = _b.cookie, updateCookie = _b.updateCookie;
|
|
@@ -11,20 +10,17 @@ export default function useChainFilterOption() {
|
|
|
11
10
|
queryFn: function () { return cookie; },
|
|
12
11
|
initialData: cookie,
|
|
13
12
|
}).data;
|
|
14
|
-
var
|
|
15
|
-
var urlParams = typeof window !== 'undefined' ? new URLSearchParams(new URL(asPath, window.location.origin).search) : null;
|
|
13
|
+
var urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null;
|
|
16
14
|
var urlChain = (_a = urlParams === null || urlParams === void 0 ? void 0 : urlParams.get('chain')) !== null && _a !== void 0 ? _a : '';
|
|
17
15
|
var queryClient = useQueryClient();
|
|
18
16
|
var removeURLChain = useCallback(function () {
|
|
19
17
|
if (urlChain) {
|
|
20
18
|
console.log('remove url');
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
query: query,
|
|
25
|
-
}, undefined, { scroll: false });
|
|
19
|
+
urlParams === null || urlParams === void 0 ? void 0 : urlParams.delete('chain');
|
|
20
|
+
var newUrl = "".concat(window.location.pathname, "?").concat(urlParams === null || urlParams === void 0 ? void 0 : urlParams.toString());
|
|
21
|
+
window.history.replaceState(null, '', newUrl);
|
|
26
22
|
}
|
|
27
|
-
}, [urlChain,
|
|
23
|
+
}, [urlChain, urlParams]);
|
|
28
24
|
var setChainFilterOption = useCallback(function (newValue) {
|
|
29
25
|
updateCookie(newValue);
|
|
30
26
|
queryClient.setQueryData(["".concat(QUERY_KEYS.CHAIN_FILTER_OPTION)], newValue);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
2
2
|
/** @jsxImportSource theme-ui */
|
|
3
|
-
import { useCallback } from 'react';
|
|
3
|
+
import { useCallback, useState } from 'react';
|
|
4
4
|
import { Flex } from 'theme-ui';
|
|
5
5
|
import { Input } from '../uikit-sdk/Input';
|
|
6
6
|
import { Svg, TooltipBubble } from '../uikit-sdk';
|
|
@@ -23,6 +23,11 @@ var BondRowHeader = function (_a) {
|
|
|
23
23
|
var handleChangeChainFilterOption = useCallback(function (newOptions) {
|
|
24
24
|
setChainFilterOption(newOptions);
|
|
25
25
|
}, [setChainFilterOption]);
|
|
26
|
-
|
|
26
|
+
var _c = useState(''), searchQuery = _c[0], setSearchQuery = _c[1];
|
|
27
|
+
var handleChangeQuery = useCallback(function (event) {
|
|
28
|
+
setSearchQuery(event.target.value);
|
|
29
|
+
setFilterOption('ALL');
|
|
30
|
+
}, []);
|
|
31
|
+
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" })] })] })] }));
|
|
27
32
|
};
|
|
28
33
|
export default BondRowHeader;
|