@ape.swap/bonds-sdk 1.0.494 → 1.0.496
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.
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/** @jsxImportSource theme-ui */
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { UserBill } from '../../../types/yourbonds';
|
|
3
4
|
import '../../../scss/YourBondsModal.scss';
|
|
4
|
-
declare const YourBondsModal: ({ isOpen, onClose,
|
|
5
|
+
declare const YourBondsModal: ({ isOpen, onClose, bond }: {
|
|
5
6
|
isOpen: boolean;
|
|
6
7
|
onClose: () => void;
|
|
7
|
-
|
|
8
|
+
bond: UserBill | null;
|
|
8
9
|
}) => React.JSX.Element | null;
|
|
9
10
|
export default YourBondsModal;
|
|
@@ -9,97 +9,32 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
-
function step(op) {
|
|
26
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
-
switch (op[0]) {
|
|
31
|
-
case 0: case 1: t = op; break;
|
|
32
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
-
default:
|
|
36
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
-
if (t[2]) _.ops.pop();
|
|
41
|
-
_.trys.pop(); continue;
|
|
42
|
-
}
|
|
43
|
-
op = body.call(thisArg, _);
|
|
44
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
12
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
|
|
49
13
|
/** @jsxImportSource theme-ui */
|
|
50
|
-
import { useEffect, useState } from 'react';
|
|
14
|
+
import React, { useEffect, useState } from 'react';
|
|
51
15
|
import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
52
16
|
import { useWeb3React } from '@web3-react/core';
|
|
53
|
-
import axios from 'axios';
|
|
54
17
|
import { BigNumber } from 'bignumber.js';
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
18
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
19
|
+
import { NETWORK_ICONS } from '../../../config/constants/chains';
|
|
57
20
|
import { getBalanceNumber } from '../../../utils/getBalanceNumber';
|
|
58
21
|
import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
|
|
59
22
|
import { defaultTheme } from '../../../theme';
|
|
23
|
+
import TokenImage from '../../uikit-sdk/TokenImage';
|
|
24
|
+
import { Button, ListTag, Skeleton, Svg, Text, TooltipBubble } from '../../uikit-sdk';
|
|
25
|
+
import { UserBillTooltipText } from '../../../enum/tooltips';
|
|
26
|
+
import { getPendingVesting } from '../../../hooks/usePendingVesting';
|
|
27
|
+
import { formatNumberSI } from '../../../utils/formatNumber';
|
|
28
|
+
import { StyledHeadingText, TraitsContentContainer } from './styles';
|
|
60
29
|
import '../../../scss/YourBondsModal.scss';
|
|
61
30
|
var YourBondsModal = function (_a) {
|
|
62
|
-
var isOpen = _a.isOpen, onClose = _a.onClose,
|
|
31
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, bond = _a.bond;
|
|
63
32
|
if (!isOpen)
|
|
64
33
|
return null;
|
|
65
34
|
var _b = useWeb3React(), account = _b.account, chainId = _b.chainId, isActive = _b.isActive;
|
|
66
35
|
// Fetch data for user owned bill
|
|
67
36
|
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
68
37
|
var _d = useState([]), userOwnedBillsData = _d[0], setUserOwnedBillsData = _d[1];
|
|
69
|
-
useEffect(function () {
|
|
70
|
-
console.log('HIT BOND ADDRESS');
|
|
71
|
-
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
72
|
-
var bond = response.data.bonds.filter(function (x) {
|
|
73
|
-
return x.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase());
|
|
74
|
-
});
|
|
75
|
-
setBondData(bond);
|
|
76
|
-
});
|
|
77
|
-
}, [bondAddress]);
|
|
78
|
-
useEffect(function () {
|
|
79
|
-
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
80
|
-
var results, error_1;
|
|
81
|
-
return __generator(this, function (_a) {
|
|
82
|
-
switch (_a.label) {
|
|
83
|
-
case 0:
|
|
84
|
-
if (!account) return [3 /*break*/, 4];
|
|
85
|
-
_a.label = 1;
|
|
86
|
-
case 1:
|
|
87
|
-
_a.trys.push([1, 3, , 4]);
|
|
88
|
-
return [4 /*yield*/, Promise.all(MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account, bondData); }))];
|
|
89
|
-
case 2:
|
|
90
|
-
results = _a.sent();
|
|
91
|
-
setUserOwnedBillsData(results);
|
|
92
|
-
return [3 /*break*/, 4];
|
|
93
|
-
case 3:
|
|
94
|
-
error_1 = _a.sent();
|
|
95
|
-
console.error('Error fetching user owned bills data:', error_1);
|
|
96
|
-
return [3 /*break*/, 4];
|
|
97
|
-
case 4: return [2 /*return*/];
|
|
98
|
-
}
|
|
99
|
-
});
|
|
100
|
-
}); };
|
|
101
|
-
fetchData();
|
|
102
|
-
}, [account]);
|
|
103
38
|
// Functions to calculate display values for modal
|
|
104
39
|
var totalPending = function (userBill) {
|
|
105
40
|
var _a, _b, _c, _d;
|
|
@@ -122,6 +57,24 @@ var YourBondsModal = function (_a) {
|
|
|
122
57
|
setBillRendered(true);
|
|
123
58
|
}
|
|
124
59
|
}, [userOwnedBillsData]);
|
|
125
|
-
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children:
|
|
60
|
+
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: billRendered && (_jsx(_Fragment, { children: userOwnedBillsData.flat().map(function (data) {
|
|
61
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
62
|
+
var userBill = data.userOwnedBills.find(function (bill) { var _a; return bill.bond.billAddress.toLowerCase() === ((_a = bond === null || bond === void 0 ? void 0 : bond.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
|
|
63
|
+
var attributes = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.attributes) === null || _b === void 0 ? void 0 : _b.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
|
|
64
|
+
return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.payoutTokenName, size: 40 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname" }, { children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
|
|
65
|
+
return (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }), tag));
|
|
66
|
+
}) })), _jsxs(Text, __assign({ sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] } }, { children: ["#", userBill.id] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block attributes" }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: 'column', width: '100%' } }, { children: [_jsxs(Flex, __assign({ sx: {
|
|
67
|
+
justifyContent: 'space-between',
|
|
68
|
+
height: '24px',
|
|
69
|
+
background: 'white3',
|
|
70
|
+
px: '15px',
|
|
71
|
+
borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
|
|
72
|
+
display: ['none', 'none', 'none', 'flex'],
|
|
73
|
+
}, onClick: function () { return setIsOpenTraits(!isOpenTraits); } }, { children: [_jsxs(Flex, __assign({ sx: { gap: '10px', alignItems: 'center' } }, { children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, __assign({ sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' } }, { children: "Traits" }))] })), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] })), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, __assign({ initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' } }, { children: _jsx(Flex, __assign({ sx: { flexDirection: 'column', gap: '1px' } }, { children: attributes
|
|
74
|
+
? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.trait_type })), _jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.value }))] }, a.value)); })
|
|
75
|
+
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
76
|
+
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: attrib })), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
77
|
+
}) })) }))) })] })) })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Fully Vested" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, __assign({ className: "block-info text" }, { children: _jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) })) }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Pending" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 10, height: 10, icon: (_h = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _h !== void 0 ? _h : 'question' }), _jsx(TokenImage, { symbol: (_j = userBill.bond.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill.bond.payoutTokenName, size: 25 })] })) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' } }, { children: "($".concat((totalPending(userBill) * ((_k = parseFloat(earnTokenPrice(userBill.bond))) !== null && _k !== void 0 ? _k : 0)).toFixed(2), ")") }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-claimable" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header-title" }, { children: "Claimable" })), _jsx(Flex, __assign({ className: "yourbondinfo-block header-tooltip" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.payoutTokenName, size: 25 })] })) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' } }, { children: "($".concat((claimable(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") }))] }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container claim" }, { children: _jsx(Button, { children: "CLAIM" }) })), _jsx(Flex, __assign({ className: "button-container transfer" }, { children: _jsx(Button, __assign({ variant: "secondary" }, { children: "TRANSFER" })) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
|
|
78
|
+
}) })) })));
|
|
126
79
|
};
|
|
127
80
|
export default YourBondsModal;
|
|
@@ -77,6 +77,7 @@ import axios from 'axios';
|
|
|
77
77
|
import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
|
|
78
78
|
import { Input } from '../../components/uikit-sdk/Input';
|
|
79
79
|
import useClaimBill from '../../hooks/useClaimBill';
|
|
80
|
+
import { YourBondsModal } from "../../index";
|
|
80
81
|
var YourBonds = function (_a) {
|
|
81
82
|
//const toastError = useToastError()
|
|
82
83
|
// const { onClaimBill } = useClaimBill(billAddress, billIds)
|
|
@@ -271,9 +272,10 @@ var YourBonds = function (_a) {
|
|
|
271
272
|
var _h = useState(false), isModalOpen = _h[0], setIsModalOpen = _h[1];
|
|
272
273
|
var _j = useState(null), selectedBill = _j[0], setSelectedBill = _j[1];
|
|
273
274
|
var rowClick = function (bill) {
|
|
275
|
+
console.log(bill);
|
|
274
276
|
setSelectedBill(bill);
|
|
275
277
|
setIsModalOpen(true);
|
|
276
|
-
navigate(
|
|
278
|
+
// navigate(`/yourBonds/?bondAddress=${bill.address}&bondChain=${bill.bond.chainId}`, { replace: true });
|
|
277
279
|
};
|
|
278
280
|
// Search logic
|
|
279
281
|
var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
|
|
@@ -298,25 +300,26 @@ var YourBonds = function (_a) {
|
|
|
298
300
|
setBondsRendered(true);
|
|
299
301
|
}
|
|
300
302
|
}, [filteredBonds]);
|
|
301
|
-
return (
|
|
302
|
-
|
|
303
|
-
lineHeight: '12px',
|
|
304
|
-
fontSize: '14px',
|
|
305
|
-
fontWeight: 600,
|
|
306
|
-
width: '100%',
|
|
307
|
-
} }, { children: "CLAIM ALL" })) }))] }))] })), filteredBonds.map(function (bill) {
|
|
308
|
-
var _a, _b;
|
|
309
|
-
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill); } }, { children: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children: _jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-claimable" }, { children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, __assign({ 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, __assign({ className: "column column-pending" }, { children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, __assign({ 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, __assign({ className: "column column-terms" }, { children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") })), _jsx(Flex, __assign({ className: "column column-claimall" }, { children: _jsx(Button, __assign({ disabled: !account && (claimableNumber(bill) === 0), onClick: function (event) {
|
|
310
|
-
// event.stopPropagation();
|
|
311
|
-
// Add your claim logic here
|
|
312
|
-
handleClaim(bill.bond.billAddress, [bill.id], bill.bond.chainId, event);
|
|
313
|
-
}, sx: {
|
|
303
|
+
return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isModalOpen &&
|
|
304
|
+
_jsx(YourBondsModal, { isOpen: true, onClose: function () { console.log('CLOSED'); }, bond: selectedBill }), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(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: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column header-claimable" }, { children: [_jsx(Text, __assign({ sx: { fontSize: '11px', color: 'textDisabledButton' } }, { children: "CLAIMABLE" })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('claimable'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column header-pending" }, { children: [_jsx(Text, __assign({ sx: { fontSize: '11px', color: 'textDisabledButton' } }, { children: "PENDING" })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('pending'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "column header-terms" }, { children: [_jsx(Text, __assign({ sx: { fontSize: '11px', color: 'textDisabledButton' } }, { children: "TERMS" })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsx(Flex, __assign({ className: "column header-claimall" }, { children: _jsx(Button, __assign({ disabled: !account && !hasPendingRewards(filteredBonds), sx: {
|
|
314
305
|
height: ['36px', '36px', '36px', '26px'],
|
|
315
306
|
lineHeight: '12px',
|
|
316
307
|
fontSize: '14px',
|
|
317
308
|
fontWeight: 600,
|
|
318
309
|
width: '100%',
|
|
319
|
-
} }, { children: "
|
|
320
|
-
|
|
310
|
+
} }, { children: "CLAIM ALL" })) }))] }))] })), filteredBonds.map(function (bill) {
|
|
311
|
+
var _a, _b;
|
|
312
|
+
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill); } }, { children: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children: _jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-claimable" }, { children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, __assign({ 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, __assign({ className: "column column-pending" }, { children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, __assign({ 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, __assign({ className: "column column-terms" }, { children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") })), _jsx(Flex, __assign({ className: "column column-claimall" }, { children: _jsx(Button, __assign({ disabled: !account && (claimableNumber(bill) === 0), onClick: function (event) {
|
|
313
|
+
// event.stopPropagation();
|
|
314
|
+
// Add your claim logic here
|
|
315
|
+
handleClaim(bill.bond.billAddress, [bill.id], bill.bond.chainId, event);
|
|
316
|
+
}, sx: {
|
|
317
|
+
height: ['36px', '36px', '36px', '26px'],
|
|
318
|
+
lineHeight: '12px',
|
|
319
|
+
fontSize: '14px',
|
|
320
|
+
fontWeight: 600,
|
|
321
|
+
width: '100%',
|
|
322
|
+
} }, { children: "Claim" })) }))] }))] }), bill.id));
|
|
323
|
+
})] })))] })));
|
|
321
324
|
};
|
|
322
325
|
export default YourBonds;
|