@ape.swap/bonds-sdk 1.0.507 → 1.0.509
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 +18 -21
- 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,6 @@ 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 { RPC_PROVIDERS } from '../../../config/constants/providers';
|
|
60
59
|
var BondModal = function (_a) {
|
|
61
60
|
var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive, isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
62
61
|
if (!isOpen)
|
|
@@ -188,28 +187,26 @@ var BondModal = function (_a) {
|
|
|
188
187
|
}
|
|
189
188
|
}, [isActive, account, bondData]);
|
|
190
189
|
var getTokenBalance = function (chainId, tokenAddress, walletAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
191
|
-
var contract, balance, balanceInEther, error_3;
|
|
192
190
|
return __generator(this, function (_a) {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
return [2 /*return*/, 'Error fetching token balance'];
|
|
211
|
-
case 3: return [2 /*return*/];
|
|
191
|
+
try {
|
|
192
|
+
return [2 /*return*/, "4"];
|
|
193
|
+
// const provider = getProvider(56, true)
|
|
194
|
+
//
|
|
195
|
+
// // const provider = RPC_PROVIDERS[chainId];
|
|
196
|
+
// if (!provider) {
|
|
197
|
+
// throw new Error(`No provider found for chainId: ${chainId}`);
|
|
198
|
+
// }
|
|
199
|
+
// const contract = new ethers.Contract(tokenAddress, ERC_20_ABI, provider);
|
|
200
|
+
// const balance = await contract.balanceOf(walletAddress);
|
|
201
|
+
// const balanceInEther = ethers.utils.formatUnits(balance, 18); // Assuming the token has 18 decimals
|
|
202
|
+
// console.log(`Token Balance: ${balanceInEther}`);
|
|
203
|
+
// return balanceInEther;
|
|
204
|
+
}
|
|
205
|
+
catch (error) {
|
|
206
|
+
console.error('Error fetching token balance', error);
|
|
207
|
+
return [2 /*return*/, 'Error fetching token balance'];
|
|
212
208
|
}
|
|
209
|
+
return [2 /*return*/];
|
|
213
210
|
});
|
|
214
211
|
}); };
|
|
215
212
|
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
|
|
@@ -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();
|