@ape.swap/bonds-sdk 1.0.529 → 1.0.531
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,25 +1,51 @@
|
|
|
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
8
|
var BondMenu = function (_a) {
|
|
9
|
-
var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption;
|
|
9
|
+
var setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onHandleQueryChange = _a.onHandleQueryChange;
|
|
10
10
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
11
11
|
return {
|
|
12
12
|
label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
|
|
13
13
|
value: filter,
|
|
14
14
|
};
|
|
15
15
|
});
|
|
16
|
+
var push = function (url) {
|
|
17
|
+
window.location.assign(url);
|
|
18
|
+
};
|
|
19
|
+
var replace = function (url) {
|
|
20
|
+
window.location.replace(url);
|
|
21
|
+
};
|
|
22
|
+
var asPath = window.location.pathname + window.location.search;
|
|
16
23
|
var handleFilterSelection = useCallback(function (newOption) {
|
|
17
24
|
setChainFilterOption(['All Chains']);
|
|
18
25
|
setFilterOption(newOption);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
// Update the URL without reloading the page
|
|
27
|
+
var urlParams = new URLSearchParams(window.location.search);
|
|
28
|
+
urlParams.set('filter', newOption);
|
|
29
|
+
var newUrl = "".concat(window.location.pathname, "?").concat(urlParams.toString());
|
|
30
|
+
window.history.replaceState(null, '', newUrl);
|
|
31
|
+
}, [setChainFilterOption, setFilterOption]);
|
|
32
|
+
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: {
|
|
33
|
+
display: ['none', 'none', 'none', 'flex'],
|
|
34
|
+
color: 'textDisabledButton',
|
|
35
|
+
fontSize: '14px',
|
|
36
|
+
background: 'white2',
|
|
37
|
+
borderRadius: 'normal',
|
|
38
|
+
p: '8px 16px',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
fontWeight: 500,
|
|
42
|
+
ml: '15px',
|
|
43
|
+
lineHeight: '13px',
|
|
44
|
+
cursor: 'pointer',
|
|
45
|
+
}, onClick: function () {
|
|
46
|
+
setChainFilterOption(['All Chains']);
|
|
47
|
+
setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
|
|
48
|
+
onHandleQueryChange('');
|
|
49
|
+
}, children: ["Clear All", _jsx(Flex, { sx: { ml: '7px' }, children: _jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
|
|
24
50
|
};
|
|
25
51
|
export default BondMenu;
|
|
@@ -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;
|