@ape.swap/bonds-sdk 1.0.651 → 1.0.652
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.
|
@@ -7,6 +7,6 @@ import '../../scss/BondRowHeader.scss';
|
|
|
7
7
|
import BondMenu from '../BondMenu/BondMenu';
|
|
8
8
|
var BondRowHeader = function (_a) {
|
|
9
9
|
var inputValue = _a.inputValue, setChainFilterOption = _a.setChainFilterOption, chainFilterOption = _a.chainFilterOption, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onHandleQueryChange = _a.onHandleQueryChange, onSort = _a.onSort;
|
|
10
|
-
return (_jsxs(Flex, { className: "header
|
|
10
|
+
return (_jsxs(Flex, { className: "bondrow-header", children: [_jsx(Flex, { className: "bondrow-header filters", children: _jsx(BondMenu, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: onHandleQueryChange }) }), _jsxs(Flex, { className: "bondrow-header rows", children: [_jsxs(Flex, { className: "column column-tokens header", 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 header" })] }), _jsxs(Flex, { className: "column column-bondinfo header", children: [_jsxs(Flex, { className: "column column-discount header", 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 header", 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 header", 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 header", 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 header" })] })] })] }));
|
|
11
11
|
};
|
|
12
12
|
export default BondRowHeader;
|
|
@@ -5,7 +5,7 @@ import { Flex } from '../uikit-sdk';
|
|
|
5
5
|
import { MAINNET_CHAINS } from '../../config/constants/chains';
|
|
6
6
|
var BondRowsByChain = function (_a) {
|
|
7
7
|
var bonds = _a.bonds, hotBonds = _a.hotBonds, hideTitles = _a.hideTitles, rowClick = _a.rowClick;
|
|
8
|
-
return (_jsxs(Flex, { className: "
|
|
8
|
+
return (_jsxs(Flex, { className: "bondrowsbychain", sx: { width: '100%', flexDirection: 'column', mt: '5px' }, children: [[ChainId.MAINNET].map(function (chain, index) {
|
|
9
9
|
return (_jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles, rowClick: rowClick }, chain));
|
|
10
10
|
}), [ChainId.BSC].map(function (chain, index) {
|
|
11
11
|
return (_jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, hideTitles: hideTitles, rowClick: rowClick }, chain));
|
|
@@ -9,7 +9,7 @@ var BondRowsWithTitle = function (_a) {
|
|
|
9
9
|
var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
|
|
10
10
|
var key = chain;
|
|
11
11
|
var _b = useState(true), isOpen = _b[0], setIsOpen = _b[1];
|
|
12
|
-
return (_jsx(Flex, { className: "
|
|
12
|
+
return (_jsx(Flex, { className: "bondrowswithtitle", sx: { width: '100%', flexDirection: 'column' }, children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: billsFilteredByChain.length > 0 ? false : true, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
|
|
13
13
|
position: 'relative',
|
|
14
14
|
overflow: 'hidden',
|
|
15
15
|
width: '100%',
|
|
@@ -3,7 +3,7 @@ import { Flex, Svg } from '../uikit-sdk';
|
|
|
3
3
|
import { NETWORK_LABEL } from '../../config/constants/chains';
|
|
4
4
|
var ChainTitle = function (_a) {
|
|
5
5
|
var chain = _a.chain, pt = _a.pt, hideTitles = _a.hideTitles, isOpen = _a.isOpen;
|
|
6
|
-
return (_jsxs(Flex, { sx: {
|
|
6
|
+
return (_jsxs(Flex, { className: "chaintitle", sx: {
|
|
7
7
|
pt: pt,
|
|
8
8
|
pb: '10px',
|
|
9
9
|
color: 'textDisabledButton',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.header
|
|
1
|
+
.bondrow-header {
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: space-around;
|
|
4
4
|
align-items: center;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
font-size: 11px;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.header
|
|
10
|
+
.bondrow-header.filters {
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: row;
|
|
13
13
|
align-items: center;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
width: 100%;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.header
|
|
19
|
+
.bondrow-header.rows {
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: row;
|
|
22
22
|
align-items: center;
|