@ape.swap/bonds-sdk 1.0.480 → 1.0.482
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.
|
@@ -10,12 +10,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
13
|
+
/** @jsxImportSource theme-ui */
|
|
14
|
+
import { useCallback } from 'react';
|
|
13
15
|
import { Flex } from 'theme-ui';
|
|
14
16
|
import { Input } from '../uikit-sdk/Input';
|
|
15
17
|
import { Svg, TooltipBubble } from '../uikit-sdk';
|
|
16
18
|
import { TooltipText } from '../../enum/tooltips';
|
|
17
19
|
import '../../scss/BondRowHeader.scss';
|
|
18
20
|
import MenuSelect from '../MenuSelect/MenuSelect';
|
|
21
|
+
import RecommendationSelector from '../MenuSelect/RecommendationSelector';
|
|
19
22
|
var BondRowHeader = function (_a) {
|
|
20
23
|
var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
|
|
21
24
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
@@ -24,6 +27,10 @@ var BondRowHeader = function (_a) {
|
|
|
24
27
|
value: filter,
|
|
25
28
|
};
|
|
26
29
|
});
|
|
27
|
-
|
|
30
|
+
var handleFilterSelection = useCallback(function (newOption) {
|
|
31
|
+
//setChainFilterOption(['All Chains'])
|
|
32
|
+
setFilterOption(newOption);
|
|
33
|
+
}, [setFilterOption]);
|
|
34
|
+
return (_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(Flex, __assign({ sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' } }, { children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) })), _jsx(Flex, __assign({ sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' } }, { children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) })), _jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ 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, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["DISCOUNT", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["TERMS", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["TOKENS REMAINING", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px", color: "textDisabledButton" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })));
|
|
28
35
|
};
|
|
29
36
|
export default BondRowHeader;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const RecommendationSelector: ({ options, activeOption, setActiveOption, }: {
|
|
3
|
+
options: string[];
|
|
4
|
+
activeOption: string;
|
|
5
|
+
setActiveOption: (activeOption: string) => void;
|
|
6
|
+
}) => React.JSX.Element;
|
|
7
|
+
export default RecommendationSelector;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
13
|
+
import { Flex } from '../uikit-sdk';
|
|
14
|
+
import { useWeb3React } from '@web3-react/core';
|
|
15
|
+
var RecommendationSelector = function (_a) {
|
|
16
|
+
var options = _a.options, activeOption = _a.activeOption, setActiveOption = _a.setActiveOption;
|
|
17
|
+
var chainId = useWeb3React().chainId;
|
|
18
|
+
var handleClick = function (option) {
|
|
19
|
+
setActiveOption(option);
|
|
20
|
+
};
|
|
21
|
+
return (_jsx(Flex, __assign({ sx: {
|
|
22
|
+
alignItems: 'center',
|
|
23
|
+
color: 'grey',
|
|
24
|
+
fontSize: ['11px'],
|
|
25
|
+
fontWeight: 500,
|
|
26
|
+
'& > div:last-child': {
|
|
27
|
+
marginRight: '0',
|
|
28
|
+
},
|
|
29
|
+
} }, { children: options.map(function (option) {
|
|
30
|
+
var isActive = option === activeOption;
|
|
31
|
+
return (_jsx(Flex, __assign({ sx: {
|
|
32
|
+
background: isActive ? 'primaryShade' : 'white2',
|
|
33
|
+
color: isActive ? 'primaryButton' : 'textDisabledButton',
|
|
34
|
+
px: ['6px', '6px', '6px', '10px'],
|
|
35
|
+
borderRadius: 'small',
|
|
36
|
+
mr: ['8px', '8px', '8px', '10px'],
|
|
37
|
+
textTransform: 'uppercase',
|
|
38
|
+
cursor: 'pointer',
|
|
39
|
+
lineHeight: '11px',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
height: '24px',
|
|
42
|
+
}, onClick: function () { return handleClick(option); } }, { children: option }), option));
|
|
43
|
+
}) })));
|
|
44
|
+
};
|
|
45
|
+
export default RecommendationSelector;
|
|
@@ -56,7 +56,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
56
56
|
};
|
|
57
57
|
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
58
58
|
/** @jsxImportSource theme-ui */
|
|
59
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
59
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
60
60
|
import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
61
61
|
import axios from 'axios';
|
|
62
62
|
import { ethers } from 'ethers';
|
|
@@ -266,6 +266,27 @@ var Bonds = function (_a) {
|
|
|
266
266
|
var handleChangeFilterOption = useCallback(function (newOption) {
|
|
267
267
|
setFilterOption(newOption);
|
|
268
268
|
}, []);
|
|
269
|
+
var handleFilterSelection = useCallback(function (newOption) {
|
|
270
|
+
//setChainFilterOption(['All Chains'])
|
|
271
|
+
setFilterOption(newOption);
|
|
272
|
+
}, [setFilterOption]);
|
|
273
|
+
var billstoRender = useMemo(function () {
|
|
274
|
+
var billsToReturn = bondData !== null && bondData !== void 0 ? bondData : [];
|
|
275
|
+
if (inputValue) {
|
|
276
|
+
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) {
|
|
277
|
+
var _a;
|
|
278
|
+
return "".concat(bill.payoutTokenName.toUpperCase(), ",\n ").concat(bill.principalTokenName.toUpperCase(), ",\n ").concat((_a = bill === null || bill === void 0 ? void 0 : bill.showcaseTokenName) === null || _a === void 0 ? void 0 : _a.toUpperCase()).includes(inputValue.toUpperCase());
|
|
279
|
+
});
|
|
280
|
+
}
|
|
281
|
+
if (topTags.includes(filterOption)) {
|
|
282
|
+
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) { var _a; return (_a = bill === null || bill === void 0 ? void 0 : bill.tags) === null || _a === void 0 ? void 0 : _a.includes(filterOption); });
|
|
283
|
+
}
|
|
284
|
+
// if (filterOption === 'FAVORITES') {
|
|
285
|
+
// billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
|
|
286
|
+
// }
|
|
287
|
+
return billsToReturn;
|
|
288
|
+
//return sortBills(billsToReturn, sortOption)
|
|
289
|
+
}, [filterOption, bondData, inputValue, topTags]);
|
|
269
290
|
// Page render logic
|
|
270
291
|
var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
|
|
271
292
|
useEffect(function () {
|
|
@@ -273,6 +294,6 @@ var Bonds = function (_a) {
|
|
|
273
294
|
setBondsRendered(true);
|
|
274
295
|
}
|
|
275
296
|
}, [filteredBonds]);
|
|
276
|
-
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds:
|
|
297
|
+
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '', rowClick: rowClick })] })))] })));
|
|
277
298
|
};
|
|
278
299
|
export default Bonds;
|