@ape.swap/bonds-sdk 1.0.524 → 1.0.525
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,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '../../scss/BondMenu.scss';
|
|
3
3
|
interface BondMenuProps {
|
|
4
|
-
setChainFilterOption: (newValue: string[]) => void;
|
|
5
|
-
chainFilterOption: string[];
|
|
6
4
|
filterOptions: string[];
|
|
7
5
|
filterOption: string;
|
|
8
6
|
setFilterOption: (newOption: string) => void;
|
|
@@ -5,7 +5,9 @@ import RecommendationSelector from '../MenuSelect/RecommendationSelector';
|
|
|
5
5
|
import MenuSelect from '../MenuSelect/MenuSelect';
|
|
6
6
|
import '../../scss/BondMenu.scss';
|
|
7
7
|
var BondMenu = function (_a) {
|
|
8
|
-
var
|
|
8
|
+
var
|
|
9
|
+
// setChainFilterOption, chainFilterOption,
|
|
10
|
+
filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption;
|
|
9
11
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
10
12
|
return {
|
|
11
13
|
label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
|
|
@@ -13,9 +15,12 @@ var BondMenu = function (_a) {
|
|
|
13
15
|
};
|
|
14
16
|
});
|
|
15
17
|
var handleFilterSelection = useCallback(function (newOption) {
|
|
16
|
-
setChainFilterOption(['All Chains'])
|
|
18
|
+
// setChainFilterOption(['All Chains'])
|
|
17
19
|
setFilterOption(newOption);
|
|
18
|
-
}, [
|
|
20
|
+
}, [
|
|
21
|
+
// setChainFilterOption,
|
|
22
|
+
setFilterOption
|
|
23
|
+
]);
|
|
19
24
|
return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' } }), _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' } }) })] }));
|
|
20
25
|
};
|
|
21
26
|
export default BondMenu;
|
|
@@ -7,7 +7,6 @@ import { Svg, TooltipBubble } from '../uikit-sdk';
|
|
|
7
7
|
import { TooltipText } from '../../enum/tooltips';
|
|
8
8
|
import '../../scss/BondRowHeader.scss';
|
|
9
9
|
import BondMenu from '../BondMenu/BondMenu';
|
|
10
|
-
import useChainFilterOption from '../BondMenu/useChainFilterOption';
|
|
11
10
|
var BondRowHeader = function (_a) {
|
|
12
11
|
var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
|
|
13
12
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
@@ -16,13 +15,22 @@ var BondRowHeader = function (_a) {
|
|
|
16
15
|
value: filter,
|
|
17
16
|
};
|
|
18
17
|
});
|
|
19
|
-
|
|
18
|
+
// const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption()
|
|
20
19
|
var handleChangeFilterOption = useCallback(function (newOption) {
|
|
21
20
|
setFilterOption(newOption);
|
|
22
21
|
}, []);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
// const handleChangeChainFilterOption = useCallback(
|
|
23
|
+
// (newOptions: string[]) => {
|
|
24
|
+
// setChainFilterOption(newOptions)
|
|
25
|
+
// },
|
|
26
|
+
// [setChainFilterOption],
|
|
27
|
+
// )
|
|
28
|
+
return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { className: "header-container filters", children: _jsx(BondMenu
|
|
29
|
+
// chainFilterOption={chainFilterOption ?? ['All Chains']}
|
|
30
|
+
// setChainFilterOption={handleChangeChainFilterOption}
|
|
31
|
+
, {
|
|
32
|
+
// chainFilterOption={chainFilterOption ?? ['All Chains']}
|
|
33
|
+
// setChainFilterOption={handleChangeChainFilterOption}
|
|
34
|
+
filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption }) }), _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
35
|
};
|
|
28
36
|
export default BondRowHeader;
|