@ape.swap/bonds-sdk 1.0.526 → 1.0.528

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.
Files changed (5) hide show
  1. package/dist/components/BondMenu/BondMenu.d.ts +2 -0
  2. package/dist/components/BondMenu/BondMenu.js +5 -6
  3. package/dist/components/BondRows/BondRowHeader.js +6 -14
  4. package/dist/scss/BondMenu.scss +6 -4
  5. package/package.json +1 -1
package/dist/components/BondMenu/BondMenu.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import '../../scss/BondMenu.scss';
3
3
  interface BondMenuProps {
4
+ setChainFilterOption: (newValue: string[]) => void;
5
+ chainFilterOption: string[];
4
6
  filterOptions: string[];
5
7
  filterOption: string;
6
8
  setFilterOption: (newOption: string) => void;
package/dist/components/BondMenu/BondMenu.js CHANGED
@@ -4,10 +4,9 @@ import { Flex } from '../uikit-sdk';
4
4
  import RecommendationSelector from '../MenuSelect/RecommendationSelector';
5
5
  import MenuSelect from '../MenuSelect/MenuSelect';
6
6
  import '../../scss/BondMenu.scss';
7
+ import NetworkFilter from '../NetworkFilter';
7
8
  var BondMenu = function (_a) {
8
- var
9
- // setChainFilterOption, chainFilterOption,
10
- 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;
11
10
  var mappedFilters = filterOptions.map(function (filter) {
12
11
  return {
13
12
  label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),
@@ -15,12 +14,12 @@ var BondMenu = function (_a) {
15
14
  };
16
15
  });
17
16
  var handleFilterSelection = useCallback(function (newOption) {
18
- // setChainFilterOption(['All Chains'])
17
+ setChainFilterOption(['All Chains']);
19
18
  setFilterOption(newOption);
20
19
  }, [
21
- // setChainFilterOption,
20
+ setChainFilterOption,
22
21
  setFilterOption
23
22
  ]);
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' } }) })] }));
23
+ return (_jsxs(Flex, { className: "menu-container filters", children: [_jsx(Flex, { className: "filters network", sx: { width: ['49%', '49%', '49%', 'unset'], minWidth: '120px' }, children: _jsx(NetworkFilter, { chainFilterOption: chainFilterOption, setChainFilterOption: setChainFilterOption }) }), _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' } }) })] }));
25
24
  };
26
25
  export default BondMenu;
package/dist/components/BondRows/BondRowHeader.js CHANGED
@@ -7,6 +7,7 @@ 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';
10
11
  var BondRowHeader = function (_a) {
11
12
  var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
12
13
  var mappedFilters = filterOptions.map(function (filter) {
@@ -15,22 +16,13 @@ var BondRowHeader = function (_a) {
15
16
  value: filter,
16
17
  };
17
18
  });
18
- // const { data: chainFilterOption, setChainFilterOption } = useChainFilterOption()
19
+ var _b = useChainFilterOption(), chainFilterOption = _b.data, setChainFilterOption = _b.setChainFilterOption;
19
20
  var handleChangeFilterOption = useCallback(function (newOption) {
20
21
  setFilterOption(newOption);
21
22
  }, []);
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" })] })] })] }));
23
+ var handleChangeChainFilterOption = useCallback(function (newOptions) {
24
+ setChainFilterOption(newOptions);
25
+ }, [setChainFilterOption]);
26
+ 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 }) }), _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" })] })] })] }));
35
27
  };
36
28
  export default BondRowHeader;
package/dist/scss/BondMenu.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .menu-container.filters {
2
2
  display: flex;
3
- justify-content: space-around;
3
+ justify-content: space-between;
4
4
  align-items: center;
5
5
  flex-direction: row;
6
6
  width: 100%;
@@ -8,15 +8,17 @@
8
8
 
9
9
  .filters.network {
10
10
  display: flex;
11
- width: 100%
11
+ width: 100%;
12
12
  }
13
13
 
14
14
  .filters.desktop-rec {
15
15
  display: flex;
16
- width: 100%
16
+ width: 100%;
17
+ justify-content: end;
17
18
  }
18
19
 
19
20
  .filters.mobile-rec {
20
21
  display: flex;
21
- width: 100%
22
+ width: 100%;
23
+ justify-content: end;
22
24
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "1.0.526",
6
+ "version": "1.0.528",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",