@ape.swap/bonds-sdk 1.0.481 → 1.0.483
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.
- package/dist/components/BondRows/BondRowHeader.js +8 -1
- package/dist/components/MenuSelect/RecommendationSelector.d.ts +7 -0
- package/dist/components/MenuSelect/RecommendationSelector.js +45 -0
- package/dist/pages/Bonds/Bonds.js +24 -23
- package/dist/scss/BondRowHeader.scss +11 -1
- package/package.json +1 -1
|
@@ -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: [_jsxs(Flex, __assign({ className: "header filters" }, { 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: "header rows-header" }, { children: [_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';
|
|
@@ -65,8 +65,6 @@ import getTimePeriods from '../../utils/getTimePeriods';
|
|
|
65
65
|
import { defaultTheme } from '../../theme';
|
|
66
66
|
import { BigNumber } from 'bignumber.js';
|
|
67
67
|
import { ChainId } from '../../enum/apeswaplists';
|
|
68
|
-
import { formatValue } from '../../utils/formatNumbers';
|
|
69
|
-
import { BLOCK_EXPLORER } from '../../config/constants/chains';
|
|
70
68
|
import '../../scss/Bonds.scss';
|
|
71
69
|
import BondRowHeader from '../../components/BondRows/BondRowHeader';
|
|
72
70
|
import BondRowsByChain from '../../components/BondRows/BondRowsByChain';
|
|
@@ -214,30 +212,12 @@ var Bonds = function (_a) {
|
|
|
214
212
|
var vestingTime = function (vestingTerm) {
|
|
215
213
|
return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
|
|
216
214
|
};
|
|
217
|
-
var getDiscountColor = function (discount) {
|
|
218
|
-
return discount < 0 ? 'discount-negative' : 'discount-positive';
|
|
219
|
-
};
|
|
220
215
|
var remainingPercentage = function (bond) {
|
|
221
216
|
var _a, _b;
|
|
222
217
|
var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.payoutTokenDecimals));
|
|
223
218
|
var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
|
|
224
219
|
return remainingTokens.div(totalMaxPayout).times(100).toNumber();
|
|
225
220
|
};
|
|
226
|
-
var remainingTokensFormat = function (bond) {
|
|
227
|
-
var _a;
|
|
228
|
-
return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
|
|
229
|
-
};
|
|
230
|
-
var remainingTokensUsd = function (bond) {
|
|
231
|
-
var _a, _b;
|
|
232
|
-
var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
|
|
233
|
-
return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
234
|
-
};
|
|
235
|
-
var getBillContractURL = function (bond) {
|
|
236
|
-
var _a;
|
|
237
|
-
var selectedChain = (_a = bond.chainId) !== null && _a !== void 0 ? _a : ChainId.BSC;
|
|
238
|
-
var explorerLink = BLOCK_EXPLORER[selectedChain];
|
|
239
|
-
return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
|
|
240
|
-
};
|
|
241
221
|
var calculateARR = function (bond) {
|
|
242
222
|
var _a;
|
|
243
223
|
var discount = (_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0;
|
|
@@ -261,11 +241,32 @@ var Bonds = function (_a) {
|
|
|
261
241
|
setInputValue(event.target.value);
|
|
262
242
|
};
|
|
263
243
|
var topTags = useTopTags(filteredBonds);
|
|
264
|
-
var filterOptions = __spreadArray(__spreadArray(['ALL'
|
|
244
|
+
var filterOptions = __spreadArray(__spreadArray(['ALL'], topTags, true), ['SOLD OUT'], false);
|
|
265
245
|
var _l = useState(filterOptions[0]), filterOption = _l[0], setFilterOption = _l[1];
|
|
266
246
|
var handleChangeFilterOption = useCallback(function (newOption) {
|
|
267
247
|
setFilterOption(newOption);
|
|
268
248
|
}, []);
|
|
249
|
+
var handleFilterSelection = useCallback(function (newOption) {
|
|
250
|
+
//setChainFilterOption(['All Chains'])
|
|
251
|
+
setFilterOption(newOption);
|
|
252
|
+
}, [setFilterOption]);
|
|
253
|
+
var billstoRender = useMemo(function () {
|
|
254
|
+
var billsToReturn = bondData !== null && bondData !== void 0 ? bondData : [];
|
|
255
|
+
if (inputValue) {
|
|
256
|
+
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) {
|
|
257
|
+
var _a;
|
|
258
|
+
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());
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
if (topTags.includes(filterOption)) {
|
|
262
|
+
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); });
|
|
263
|
+
}
|
|
264
|
+
// if (filterOption === 'FAVORITES') {
|
|
265
|
+
// billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
|
|
266
|
+
// }
|
|
267
|
+
return billsToReturn;
|
|
268
|
+
//return sortBills(billsToReturn, sortOption)
|
|
269
|
+
}, [filterOption, bondData, inputValue, topTags]);
|
|
269
270
|
// Page render logic
|
|
270
271
|
var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
|
|
271
272
|
useEffect(function () {
|
|
@@ -273,6 +274,6 @@ var Bonds = function (_a) {
|
|
|
273
274
|
setBondsRendered(true);
|
|
274
275
|
}
|
|
275
276
|
}, [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:
|
|
277
|
+
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
278
|
};
|
|
278
279
|
export default Bonds;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
justify-content: space-around;
|
|
4
4
|
align-items: center;
|
|
5
|
-
flex-direction:
|
|
5
|
+
flex-direction: column;
|
|
6
6
|
width: 100%;
|
|
7
7
|
padding-top: 5px;
|
|
8
8
|
padding-left: 15px;
|
|
@@ -12,6 +12,16 @@
|
|
|
12
12
|
color: #73728E;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
+
.header.filters {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: row;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.header.rows-header {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: row;
|
|
23
|
+
}
|
|
24
|
+
|
|
15
25
|
.column.column-tokens {
|
|
16
26
|
display: flex;
|
|
17
27
|
align-items: center;
|