@ape.swap/bonds-sdk 1.0.507 → 1.0.508
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.d.ts +4 -0
- package/dist/components/BondRows/BondRowHeader.js +18 -1
- package/dist/components/Modals/BondModal/BondModal.js +6 -5
- package/dist/components/uikit-sdk/Toggle/index.d.ts +7 -0
- package/dist/components/uikit-sdk/Toggle/index.js +44 -0
- package/dist/components/uikit-sdk/Toggle/styles.d.ts +3 -0
- package/dist/components/uikit-sdk/Toggle/styles.js +40 -0
- package/dist/pages/YourBonds/YourBonds.js +1 -7
- package/package.json +1 -1
|
@@ -9,5 +9,9 @@ interface BondRowHeaderProps {
|
|
|
9
9
|
onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
10
|
onSort: (key: 'discount' | 'arr' | 'terms' | 'tokensRemaining') => void;
|
|
11
11
|
}
|
|
12
|
+
export declare enum BondsViewOptions {
|
|
13
|
+
BONDSMARKET = "Bonds Market",
|
|
14
|
+
YOURBONDS = "Your Bonds"
|
|
15
|
+
}
|
|
12
16
|
declare const BondRowHeader: React.FC<BondRowHeaderProps>;
|
|
13
17
|
export default BondRowHeader;
|
|
@@ -8,6 +8,11 @@ import { TooltipText } from '../../enum/tooltips';
|
|
|
8
8
|
import '../../scss/BondRowHeader.scss';
|
|
9
9
|
import MenuSelect from '../MenuSelect/MenuSelect';
|
|
10
10
|
import RecommendationSelector from '../MenuSelect/RecommendationSelector';
|
|
11
|
+
export var BondsViewOptions;
|
|
12
|
+
(function (BondsViewOptions) {
|
|
13
|
+
BondsViewOptions["BONDSMARKET"] = "Bonds Market";
|
|
14
|
+
BondsViewOptions["YOURBONDS"] = "Your Bonds";
|
|
15
|
+
})(BondsViewOptions || (BondsViewOptions = {}));
|
|
11
16
|
var BondRowHeader = function (_a) {
|
|
12
17
|
var inputValue = _a.inputValue, filterOptions = _a.filterOptions, filterOption = _a.filterOption, setFilterOption = _a.setFilterOption, onInputChange = _a.onInputChange, onSort = _a.onSort;
|
|
13
18
|
var mappedFilters = filterOptions.map(function (filter) {
|
|
@@ -20,6 +25,18 @@ var BondRowHeader = function (_a) {
|
|
|
20
25
|
//setChainFilterOption(['All Chains'])
|
|
21
26
|
setFilterOption(newOption);
|
|
22
27
|
}, [setFilterOption]);
|
|
23
|
-
|
|
28
|
+
// const handleChangeNav = useCallback(
|
|
29
|
+
// (navOption: string) => {
|
|
30
|
+
// if (navOption === BondsViewOptions.BONDSMARKET) {
|
|
31
|
+
// setBillsView(BondsViewOptions.BONDSMARKET)
|
|
32
|
+
// replace('/bonds', undefined, { shallow: true })
|
|
33
|
+
// } else {
|
|
34
|
+
// setBillsView(BondsViewOptions.YOURBONDS)
|
|
35
|
+
// push('/bonds?yourBonds', undefined, { shallow: true })
|
|
36
|
+
// }
|
|
37
|
+
// },
|
|
38
|
+
// [push, replace, setBillsView],
|
|
39
|
+
// )
|
|
40
|
+
return (_jsxs(Flex, { className: "header-container", children: [_jsx(Flex, { sx: { width: ['100%', '100%', '100%', '325px'] } }), _jsxs(Flex, { className: "header-container filters", children: [_jsx(Flex, { sx: { display: ['none', 'none', 'none', 'flex'], mr: '20px' }, children: _jsx(RecommendationSelector, { options: filterOptions, activeOption: filterOption, setActiveOption: handleFilterSelection }) }), _jsx(Flex, { sx: { display: ['flex', 'flex', 'flex', 'none'], width: '100%' }, children: _jsx(MenuSelect, { selectedOption: filterOption, setOption: setFilterOption, options: mappedFilters, sx: { background: 'white2' } }) })] }), _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" })] })] })] }));
|
|
24
41
|
};
|
|
25
42
|
export default BondRowHeader;
|
|
@@ -56,7 +56,7 @@ import { NETWORK_ICONS } from '../../../config/constants/chains';
|
|
|
56
56
|
import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
|
|
57
57
|
import '../../../scss/BondModal.scss';
|
|
58
58
|
import { useWriteContract } from "wagmi";
|
|
59
|
-
import {
|
|
59
|
+
import { getProvider } from '../../../config/constants/providers';
|
|
60
60
|
var BondModal = function (_a) {
|
|
61
61
|
var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive, isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
62
62
|
if (!isOpen)
|
|
@@ -188,16 +188,17 @@ var BondModal = function (_a) {
|
|
|
188
188
|
}
|
|
189
189
|
}, [isActive, account, bondData]);
|
|
190
190
|
var getTokenBalance = function (chainId, tokenAddress, walletAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
191
|
-
var contract, balance, balanceInEther, error_3;
|
|
191
|
+
var provider, contract, balance, balanceInEther, error_3;
|
|
192
192
|
return __generator(this, function (_a) {
|
|
193
193
|
switch (_a.label) {
|
|
194
194
|
case 0:
|
|
195
195
|
_a.trys.push([0, 2, , 3]);
|
|
196
|
-
|
|
197
|
-
|
|
196
|
+
provider = getProvider(56, true);
|
|
197
|
+
// const provider = RPC_PROVIDERS[chainId];
|
|
198
|
+
if (!provider) {
|
|
198
199
|
throw new Error("No provider found for chainId: ".concat(chainId));
|
|
199
200
|
}
|
|
200
|
-
contract = new ethers.Contract(tokenAddress, ERC_20_ABI,
|
|
201
|
+
contract = new ethers.Contract(tokenAddress, ERC_20_ABI, provider);
|
|
201
202
|
return [4 /*yield*/, contract.balanceOf(walletAddress)];
|
|
202
203
|
case 1:
|
|
203
204
|
balance = _a.sent();
|
|
@@ -0,0 +1,44 @@
|
|
|
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 styles from './styles';
|
|
14
|
+
import Text from '../Text';
|
|
15
|
+
import Flex from '../Flex';
|
|
16
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
17
|
+
// import { useBills } from 'state/bills/hooks'
|
|
18
|
+
// import { BondsViewOptions } from '../../../views/Bonds/BondsListView'
|
|
19
|
+
// import useRefresh from '../../../hooks/useRefresh'
|
|
20
|
+
var Toggle = function (_a) {
|
|
21
|
+
// const bills = useBills()
|
|
22
|
+
// const { fastRefresh } = useRefresh()
|
|
23
|
+
// const claimableBillsAmount = useMemo(() => {
|
|
24
|
+
// return bills
|
|
25
|
+
// ?.filter((bill) => (bill?.userOwnedBillsData?.length ?? 0) > 0)
|
|
26
|
+
// ?.map((bill) => {
|
|
27
|
+
// return {
|
|
28
|
+
// billIds: bill.userOwnedBillsData
|
|
29
|
+
// ?.filter((b) => parseFloat(b.pendingRewards) > 0)
|
|
30
|
+
// .map((b) => {
|
|
31
|
+
// return b.id
|
|
32
|
+
// }),
|
|
33
|
+
// }
|
|
34
|
+
// })
|
|
35
|
+
// ?.filter((bill) => bill?.billIds?.length ?? 0 > 0)
|
|
36
|
+
// ?.reduce((total, ownerBills) => total + (ownerBills.billIds?.length || 0), 0)
|
|
37
|
+
// /* eslint-disable react-hooks/exhaustive-deps */
|
|
38
|
+
// }, [fastRefresh])
|
|
39
|
+
var options = _a.options, activeOption = _a.activeOption, handleToggle = _a.handleToggle;
|
|
40
|
+
return (_jsx(Flex, { sx: styles.container, children: _jsx(AnimatePresence, { initial: false, children: options.map(function (option) {
|
|
41
|
+
return (_jsx(motion.div, { animate: { opacity: option === activeOption ? 1 : 0.6, scale: option === activeOption ? 1 : 0.9 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.2, type: 'spring', stiffness: 50 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: __assign(__assign({}, styles.switch), { background: option === activeOption ? 'primaryButton' : 'white2' }), onClick: function () { return handleToggle(option); }, children: _jsx(Text, { sx: { fontSize: '14px' }, children: option }) }) }, option));
|
|
42
|
+
}) }) }));
|
|
43
|
+
};
|
|
44
|
+
export default Toggle;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
var styles = {
|
|
2
|
+
container: {
|
|
3
|
+
display: 'flex',
|
|
4
|
+
borderRadius: '10px',
|
|
5
|
+
background: 'white2',
|
|
6
|
+
width: '100%',
|
|
7
|
+
position: 'relative',
|
|
8
|
+
},
|
|
9
|
+
switch: {
|
|
10
|
+
borderRadius: '10px',
|
|
11
|
+
color: 'primaryButtonDisable',
|
|
12
|
+
justifyContent: 'center',
|
|
13
|
+
px: '14px',
|
|
14
|
+
py: '5px',
|
|
15
|
+
cursor: 'pointer',
|
|
16
|
+
'&:hover': {
|
|
17
|
+
filter: '20%',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
button: {
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
border: 0,
|
|
23
|
+
top: 0,
|
|
24
|
+
height: '100%',
|
|
25
|
+
transition: 'left 0.2s linear',
|
|
26
|
+
textTransform: 'none',
|
|
27
|
+
'&:hover': {
|
|
28
|
+
filter: 'none',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
input: {
|
|
32
|
+
bottom: 0,
|
|
33
|
+
left: 0,
|
|
34
|
+
position: 'absolute',
|
|
35
|
+
opacity: 0,
|
|
36
|
+
pointerEvents: 'none',
|
|
37
|
+
width: '100%',
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export default styles;
|
|
@@ -293,13 +293,7 @@ var YourBonds = function (_a) {
|
|
|
293
293
|
setIsModalOpen(false);
|
|
294
294
|
};
|
|
295
295
|
return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isModalOpen &&
|
|
296
|
-
_jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), bondsRendered && (_jsxs(Flex, { className: "container table-container", children: [_jsxs(Flex, { className: "container header-container", children: [_jsx(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: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column header-claimable", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "CLAIMABLE" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-pending", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "PENDING" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-terms", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "TERMS" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column header-claimall"
|
|
297
|
-
height: ['36px', '36px', '36px', '26px'],
|
|
298
|
-
lineHeight: '12px',
|
|
299
|
-
fontSize: '14px',
|
|
300
|
-
fontWeight: 600,
|
|
301
|
-
width: '100%',
|
|
302
|
-
}, children: "CLAIM ALL" }) })] })] }), filteredBonds.map(function (bill) {
|
|
296
|
+
_jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), bondsRendered && (_jsxs(Flex, { className: "container table-container", children: [_jsxs(Flex, { className: "container header-container", children: [_jsx(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: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column header-claimable", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "CLAIMABLE" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-pending", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "PENDING" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-terms", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "TERMS" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column header-claimall" })] })] }), filteredBonds.map(function (bill) {
|
|
303
297
|
var _a, _b;
|
|
304
298
|
return (_jsxs(Flex, { className: "container bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((claimable(bill) * ((_a = parseFloat(earnTokenPrice(bill.bond))) !== null && _a !== void 0 ? _a : 0)).toFixed(2), ")") })] }), _jsxs(Flex, { className: "column column-pending", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")") })] }), _jsx(Flex, { className: "column column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "column column-claimall", children: _jsx(Button, { disabled: !account && (claimableNumber(bill) === 0), onClick: function (event) {
|
|
305
299
|
// event.stopPropagation();
|