@ape.swap/bonds-sdk 1.0.358 → 1.0.361
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/BondModal/BondModal.js +17 -64
- package/dist/components/BondModal/helper.d.ts +9 -0
- package/dist/components/BondModal/helper.js +53 -0
- package/dist/components/YourBonds/YourBonds.js +6 -45
- package/dist/components/YourBondsModal/YourBondsModal.js +56 -44
- package/dist/scss/YourBondsModal.scss +7 -6
- package/package.json +1 -1
- package/dist/enum/abis.d.ts +0 -80
- package/dist/enum/abis.js +0 -1
- package/dist/state/bills/cleanBillsData.d.ts +0 -5
- package/dist/state/bills/cleanBillsData.js +0 -41
- package/dist/state/bills/fetchBills.d.ts +0 -4
- package/dist/state/bills/fetchBills.js +0 -61
- package/dist/state/bills/fetchBillsCalls.d.ts +0 -4
- package/dist/state/bills/fetchBillsCalls.js +0 -27
- package/dist/state/bills/fetchBillsUser.d.ts +0 -15
- package/dist/state/bills/fetchBillsUser.js +0 -171
- package/dist/state/bills/getBillNftData.d.ts +0 -9
- package/dist/state/bills/getBillNftData.js +0 -109
- package/dist/state/bills/hooks.d.ts +0 -4
- package/dist/state/bills/hooks.js +0 -142
- package/dist/state/bills/index.d.ts +0 -48
- package/dist/state/bills/index.js +0 -293
- package/dist/state/bills/types.d.ts +0 -168
- package/dist/state/bills/types.js +0 -1
|
@@ -59,12 +59,13 @@ import { useNavigate } from 'react-router-dom';
|
|
|
59
59
|
import { isNumber } from '../../utils/numbers';
|
|
60
60
|
import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
|
|
61
61
|
import { TooltipText } from '../../enum/tooltips';
|
|
62
|
-
import { formatNumberSI } from '../../utils/formatNumber';
|
|
63
62
|
import { ethers } from 'ethers';
|
|
64
63
|
import { adjustDecimals } from "../../utils/convertToTokenValue";
|
|
65
|
-
import { BondAbi } from '../../enum/abis';
|
|
66
64
|
import TokenImage from '../uikit-sdk/TokenImage';
|
|
67
65
|
import '../../scss/BondModal.scss';
|
|
66
|
+
import BOND_ABI from '../../config/abi/bond.json';
|
|
67
|
+
import ERC_20_ABI from '../../config/abi/bond.json';
|
|
68
|
+
import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
|
|
68
69
|
var BondModal = function (_a) {
|
|
69
70
|
var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
70
71
|
if (!isOpen)
|
|
@@ -115,57 +116,6 @@ var BondModal = function (_a) {
|
|
|
115
116
|
setSelectedBond(bond);
|
|
116
117
|
navigate("/bondsingle/".concat(bond.billAddress));
|
|
117
118
|
};
|
|
118
|
-
function formatNumber(input) {
|
|
119
|
-
var number = new BigNumber(input);
|
|
120
|
-
if (number.isNaN())
|
|
121
|
-
return '0';
|
|
122
|
-
return number.gt(1000000)
|
|
123
|
-
? formatNumberSI(number.toNumber())
|
|
124
|
-
: number.gt(1000)
|
|
125
|
-
? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
126
|
-
: number.gt(0.01)
|
|
127
|
-
? parseFloat(number.toFixed(2)).toLocaleString(undefined)
|
|
128
|
-
: parseFloat(number.toPrecision(5)).toLocaleString(undefined);
|
|
129
|
-
}
|
|
130
|
-
function formatUSDNumber(input) {
|
|
131
|
-
var number = new BigNumber(input);
|
|
132
|
-
if (number.isNaN())
|
|
133
|
-
return '0';
|
|
134
|
-
// If the number is greater than 0 but less than 0.01
|
|
135
|
-
if (number.gt(0) && number.lt(0.01)) {
|
|
136
|
-
return '< 0.01';
|
|
137
|
-
}
|
|
138
|
-
// If the number is greater than 1k, round to no decimals.
|
|
139
|
-
if (number.gt(1000)) {
|
|
140
|
-
return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
141
|
-
}
|
|
142
|
-
// Note: Between 1k and 0.01 show 2 decimals
|
|
143
|
-
return parseFloat(number.toFixed(2)).toLocaleString(undefined);
|
|
144
|
-
}
|
|
145
|
-
var youSpend = formatNumber(inputValue);
|
|
146
|
-
var youSpendUSD = function (bond) {
|
|
147
|
-
return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
|
|
148
|
-
};
|
|
149
|
-
var youGet = function (bond) {
|
|
150
|
-
var _a;
|
|
151
|
-
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
152
|
-
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
153
|
-
return formatNumber(billValue.toString());
|
|
154
|
-
};
|
|
155
|
-
var youGetUSD = function (bond) {
|
|
156
|
-
var _a;
|
|
157
|
-
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
158
|
-
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
159
|
-
return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
|
|
160
|
-
};
|
|
161
|
-
var premium = function (bond) {
|
|
162
|
-
var premiumUSD = parseFloat(youGetUSD(bond)) - parseFloat(youSpendUSD(bond));
|
|
163
|
-
return formatUSDNumber(premiumUSD.toString());
|
|
164
|
-
};
|
|
165
|
-
var getPremiumColor = function (bond) {
|
|
166
|
-
var getPremium = premium(bond);
|
|
167
|
-
return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
|
|
168
|
-
};
|
|
169
119
|
var handleBuy = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
170
120
|
var provider, signer, bondContract, maxPrice, amount, tx, error_1;
|
|
171
121
|
return __generator(this, function (_a) {
|
|
@@ -179,7 +129,7 @@ var BondModal = function (_a) {
|
|
|
179
129
|
}
|
|
180
130
|
provider = new ethers.providers.Web3Provider(window.ethereum);
|
|
181
131
|
signer = provider.getSigner();
|
|
182
|
-
bondContract = new ethers.Contract(bondAddress !== null && bondAddress !== void 0 ? bondAddress : "",
|
|
132
|
+
bondContract = new ethers.Contract(bondAddress !== null && bondAddress !== void 0 ? bondAddress : "", BOND_ABI, signer);
|
|
183
133
|
_a.label = 1;
|
|
184
134
|
case 1:
|
|
185
135
|
_a.trys.push([1, 4, , 5]);
|
|
@@ -202,10 +152,12 @@ var BondModal = function (_a) {
|
|
|
202
152
|
}
|
|
203
153
|
});
|
|
204
154
|
}); };
|
|
155
|
+
//You approve the token, not the contract (this code will have to be updated for zap)
|
|
205
156
|
var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
206
157
|
var provider, signer, bondContract, amount, tx, error_2;
|
|
207
|
-
|
|
208
|
-
|
|
158
|
+
var _a;
|
|
159
|
+
return __generator(this, function (_b) {
|
|
160
|
+
switch (_b.label) {
|
|
209
161
|
case 0:
|
|
210
162
|
console.log('handle approve clicked');
|
|
211
163
|
if (!window.ethereum) {
|
|
@@ -213,24 +165,25 @@ var BondModal = function (_a) {
|
|
|
213
165
|
alert('No Ethereum provider found');
|
|
214
166
|
return [2 /*return*/];
|
|
215
167
|
}
|
|
168
|
+
console.log(selectedBond === null || selectedBond === void 0 ? void 0 : selectedBond.principalToken);
|
|
216
169
|
provider = new ethers.providers.Web3Provider(window.ethereum);
|
|
217
170
|
signer = provider.getSigner();
|
|
218
|
-
bondContract = new ethers.Contract(
|
|
219
|
-
|
|
171
|
+
bondContract = new ethers.Contract((_a = selectedBond === null || selectedBond === void 0 ? void 0 : selectedBond.principalToken) !== null && _a !== void 0 ? _a : "", ERC_20_ABI, signer);
|
|
172
|
+
_b.label = 1;
|
|
220
173
|
case 1:
|
|
221
|
-
|
|
174
|
+
_b.trys.push([1, 4, , 5]);
|
|
222
175
|
amount = adjustDecimals(inputValue);
|
|
223
|
-
return [4 /*yield*/, bondContract.approve(
|
|
176
|
+
return [4 /*yield*/, bondContract.approve(bondAddress, amount)];
|
|
224
177
|
case 2:
|
|
225
|
-
tx =
|
|
178
|
+
tx = _b.sent();
|
|
226
179
|
return [4 /*yield*/, tx.wait()];
|
|
227
180
|
case 3:
|
|
228
|
-
|
|
181
|
+
_b.sent();
|
|
229
182
|
setApprovalStatus(true);
|
|
230
183
|
alert('Approve Successful');
|
|
231
184
|
return [3 /*break*/, 5];
|
|
232
185
|
case 4:
|
|
233
|
-
error_2 =
|
|
186
|
+
error_2 = _b.sent();
|
|
234
187
|
console.error('Approval error', error_2);
|
|
235
188
|
alert('Approval Failed');
|
|
236
189
|
return [3 /*break*/, 5];
|
|
@@ -240,7 +193,7 @@ var BondModal = function (_a) {
|
|
|
240
193
|
}); };
|
|
241
194
|
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
|
|
242
195
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
243
|
-
return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond)) }, { children: ["$ ", premium(bond)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
196
|
+
return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
244
197
|
if (v.currentTarget.value.includes(',')) {
|
|
245
198
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
246
199
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BondsDataResponse } from "../../types/bonds";
|
|
2
|
+
export declare function formatNumber(input: string): string;
|
|
3
|
+
export declare function formatUSDNumber(input: string): string;
|
|
4
|
+
export declare const youSpend: (inputValue: string) => string;
|
|
5
|
+
export declare const youSpendUSD: (bond: BondsDataResponse, inputValue: string) => string;
|
|
6
|
+
export declare const youGet: (bond: BondsDataResponse, inputValue: string) => string;
|
|
7
|
+
export declare const youGetUSD: (bond: BondsDataResponse, inputValue: string) => string;
|
|
8
|
+
export declare const premium: (bond: BondsDataResponse, inputValue: string) => string;
|
|
9
|
+
export declare const getPremiumColor: (bond: BondsDataResponse, inputValue: string) => string;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import BigNumber from "bignumber.js";
|
|
2
|
+
import { formatNumberSI } from "../../utils/formatNumber";
|
|
3
|
+
export function formatNumber(input) {
|
|
4
|
+
var number = new BigNumber(input);
|
|
5
|
+
if (number.isNaN())
|
|
6
|
+
return '0';
|
|
7
|
+
return number.gt(1000000)
|
|
8
|
+
? formatNumberSI(number.toNumber())
|
|
9
|
+
: number.gt(1000)
|
|
10
|
+
? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
11
|
+
: number.gt(0.01)
|
|
12
|
+
? parseFloat(number.toFixed(2)).toLocaleString(undefined)
|
|
13
|
+
: parseFloat(number.toPrecision(5)).toLocaleString(undefined);
|
|
14
|
+
}
|
|
15
|
+
export function formatUSDNumber(input) {
|
|
16
|
+
var number = new BigNumber(input);
|
|
17
|
+
if (number.isNaN())
|
|
18
|
+
return '0';
|
|
19
|
+
// If the number is greater than 0 but less than 0.01
|
|
20
|
+
if (number.gt(0) && number.lt(0.01)) {
|
|
21
|
+
return '< 0.01';
|
|
22
|
+
}
|
|
23
|
+
// If the number is greater than 1k, round to no decimals.
|
|
24
|
+
if (number.gt(1000)) {
|
|
25
|
+
return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
26
|
+
}
|
|
27
|
+
// Note: Between 1k and 0.01 show 2 decimals
|
|
28
|
+
return parseFloat(number.toFixed(2)).toLocaleString(undefined);
|
|
29
|
+
}
|
|
30
|
+
export var youSpend = function (inputValue) { return formatNumber(inputValue); };
|
|
31
|
+
export var youSpendUSD = function (bond, inputValue) {
|
|
32
|
+
return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
|
|
33
|
+
};
|
|
34
|
+
export var youGet = function (bond, inputValue) {
|
|
35
|
+
var _a;
|
|
36
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
37
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
38
|
+
return formatNumber(billValue.toString());
|
|
39
|
+
};
|
|
40
|
+
export var youGetUSD = function (bond, inputValue) {
|
|
41
|
+
var _a;
|
|
42
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
43
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
44
|
+
return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
|
|
45
|
+
};
|
|
46
|
+
export var premium = function (bond, inputValue) {
|
|
47
|
+
var premiumUSD = parseFloat(youGetUSD(bond, inputValue)) - parseFloat(youSpendUSD(bond, inputValue));
|
|
48
|
+
return formatUSDNumber(premiumUSD.toString());
|
|
49
|
+
};
|
|
50
|
+
export var getPremiumColor = function (bond, inputValue) {
|
|
51
|
+
var getPremium = premium(bond, inputValue);
|
|
52
|
+
return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
|
|
53
|
+
};
|
|
@@ -114,45 +114,12 @@ var YourBonds = function (_a) {
|
|
|
114
114
|
}
|
|
115
115
|
});
|
|
116
116
|
}); };
|
|
117
|
-
// const [hotBonds, setHotBonds] = useState<string[]>([]);
|
|
118
|
-
// const vestingTime = (vestingTerm: number) => {
|
|
119
|
-
// return getTimePeriods(vestingTerm ?? 0, true);
|
|
120
|
-
// }
|
|
121
117
|
useEffect(function () {
|
|
122
118
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
123
119
|
var bonds = response.data.bonds;
|
|
124
120
|
setBondData(bonds);
|
|
125
121
|
});
|
|
126
122
|
}, []);
|
|
127
|
-
// useEffect(() => {
|
|
128
|
-
// axios.get('https://apeswap-strapi.herokuapp.com/hot-bonds').then((response) => {
|
|
129
|
-
// const hotBondAddresses = response.data.map((bond: { BondAddress: string }) =>
|
|
130
|
-
// bond.BondAddress.toLowerCase(),
|
|
131
|
-
// );
|
|
132
|
-
// setHotBonds(hotBondAddresses);
|
|
133
|
-
// })
|
|
134
|
-
// }, []);
|
|
135
|
-
// const isSoldOut = useCallback((bond: BondsDataResponse) => {
|
|
136
|
-
// const thresholdToHide = new BigNumber(100).div(bond.payoutTokenPrice ?? 0);
|
|
137
|
-
// if (bond.soldOut) return true;
|
|
138
|
-
// if (bond.discount == null) return true;
|
|
139
|
-
// if (!bond.tokensRemaining) return false;
|
|
140
|
-
// if (bond.discount && bond.discount > 25 && bond.chainId === ChainId.BASE /*BASE*/) return true;
|
|
141
|
-
// return new BigNumber(bond.tokensRemaining)?.lte(thresholdToHide) || bond.discount === 100;
|
|
142
|
-
// }, []);
|
|
143
|
-
// const sortedBonds = bondData.sort((a, b) => {
|
|
144
|
-
// const aIsHot = hotBonds.includes(a.billAddress.toLowerCase()) && (a.discount ?? 0) > 0;
|
|
145
|
-
// const bIsHot = hotBonds.includes(b.billAddress.toLowerCase()) && (b.discount ?? 0) > 0;
|
|
146
|
-
// if (aIsHot && !bIsHot) {
|
|
147
|
-
// return -1;
|
|
148
|
-
// }
|
|
149
|
-
// else if (!aIsHot && bIsHot) {
|
|
150
|
-
// return 1;
|
|
151
|
-
// }
|
|
152
|
-
// else {
|
|
153
|
-
// return b.discount - a.discount;
|
|
154
|
-
// }
|
|
155
|
-
// });
|
|
156
123
|
var _d = useState(false), isModalOpen = _d[0], setIsModalOpen = _d[1];
|
|
157
124
|
var _e = useState(null), selectedBond = _e[0], setSelectedBond = _e[1];
|
|
158
125
|
var _f = useState([]), bondData = _f[0], setBondData = _f[1];
|
|
@@ -161,10 +128,6 @@ var YourBonds = function (_a) {
|
|
|
161
128
|
setIsModalOpen(true);
|
|
162
129
|
navigate("/YourBonds/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId), { replace: true });
|
|
163
130
|
};
|
|
164
|
-
var currentTime = useCurrentTime() / 1000;
|
|
165
|
-
var vestingTimeRemaining = function (userBill) {
|
|
166
|
-
return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
|
|
167
|
-
};
|
|
168
131
|
var fetchUserOwnedBillsDataAsync = function (chainId, account) { return __awaiter(void 0, void 0, void 0, function () {
|
|
169
132
|
var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData_1, ownedBillsData, userBillNftData_1, combinedData, error_2;
|
|
170
133
|
return __generator(this, function (_a) {
|
|
@@ -204,12 +167,6 @@ var YourBonds = function (_a) {
|
|
|
204
167
|
});
|
|
205
168
|
return __assign(__assign({}, data), { userOwnedBills: enrichedUserBills });
|
|
206
169
|
});
|
|
207
|
-
// console.log("userBillNftData");
|
|
208
|
-
// console.log(userBillNftData);
|
|
209
|
-
// console.log("userBillNftData");
|
|
210
|
-
// console.log("userOwnedBillsData");
|
|
211
|
-
// console.log(userOwnedBillsData);
|
|
212
|
-
// console.log("userOwnedBillsData");
|
|
213
170
|
console.log("combinedData");
|
|
214
171
|
console.log(combinedData);
|
|
215
172
|
console.log("combinedData");
|
|
@@ -325,6 +282,10 @@ var YourBonds = function (_a) {
|
|
|
325
282
|
fetchData();
|
|
326
283
|
}, [account]);
|
|
327
284
|
var chainId = useWeb3React().chainId;
|
|
285
|
+
var currentTime = useCurrentTime() / 1000;
|
|
286
|
+
var vestingTimeRemaining = function (userBill) {
|
|
287
|
+
return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
|
|
288
|
+
};
|
|
328
289
|
var totalPending = function (userBill) {
|
|
329
290
|
var _a, _b, _c, _d;
|
|
330
291
|
return getBalanceNumber(new BigNumber((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18);
|
|
@@ -352,8 +313,8 @@ var YourBonds = function (_a) {
|
|
|
352
313
|
return totalPending(b) - totalPending(a);
|
|
353
314
|
});
|
|
354
315
|
return sortedBills.map(function (bill) {
|
|
355
|
-
var _a, _b
|
|
356
|
-
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill.bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children:
|
|
316
|
+
var _a, _b;
|
|
317
|
+
return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill.bond); } }, { 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), "($".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), "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")")] })), _jsx(Flex, __assign({ className: "column column-term" }, { 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(Flex, __assign({ className: "column-claimall button" }, { children: _jsx(Button, __assign({ disabled: !account, sx: {
|
|
357
318
|
height: ['36px', '36px', '36px', '26px'],
|
|
358
319
|
lineHeight: '12px',
|
|
359
320
|
fontSize: '14px',
|
|
@@ -52,7 +52,6 @@ import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
|
52
52
|
import { useWeb3React } from '@web3-react/core';
|
|
53
53
|
import { defaultTheme } from '../../theme';
|
|
54
54
|
import '../../scss/YourBondsModal.scss';
|
|
55
|
-
import getTimePeriods from '../../utils/getTimePeriods';
|
|
56
55
|
import axios from 'axios';
|
|
57
56
|
import { BigNumber } from 'bignumber.js';
|
|
58
57
|
import { getFirstNonZeroDigits } from '../../utils/roundNumber';
|
|
@@ -67,12 +66,12 @@ import { ACF_TO_ABOND } from '../../config/constants/addresses';
|
|
|
67
66
|
import { MAINNET_CHAINS } from '../../config/constants/chains';
|
|
68
67
|
import { getPendingVesting } from '../../hooks/usePendingVesting';
|
|
69
68
|
import { formatNumberSI } from '../../utils/formatNumber';
|
|
69
|
+
import { fetchUserOwnedBillNftData } from '../YourBonds/fetchBillsUser';
|
|
70
70
|
var YourBondsModal = function (_a) {
|
|
71
71
|
var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
72
72
|
if (!isOpen)
|
|
73
73
|
return null;
|
|
74
|
-
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
75
|
-
var vestingTime = function (vestingTerm) { return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true); };
|
|
74
|
+
var _b = useWeb3React(), account = _b.account, chainId = _b.chainId, isActive = _b.isActive;
|
|
76
75
|
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
77
76
|
useEffect(function () {
|
|
78
77
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
@@ -82,44 +81,13 @@ var YourBondsModal = function (_a) {
|
|
|
82
81
|
setBondData(bond);
|
|
83
82
|
});
|
|
84
83
|
}, [bondAddress]);
|
|
85
|
-
// const [selectedBond, setSelectedBond] = useState<BondsDataResponse | null>(null);
|
|
86
|
-
// const navigate = useNavigate();
|
|
87
|
-
// const projectInfo = (bond: BondsDataResponse) => {
|
|
88
|
-
// setSelectedBond(bond);
|
|
89
|
-
// navigate(`/bondsingle/${bond.billAddress}`);
|
|
90
|
-
// };
|
|
91
84
|
var _d = useState([]), userOwnedBillsData = _d[0], setUserOwnedBillsData = _d[1];
|
|
92
|
-
useEffect(function () {
|
|
93
|
-
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
94
|
-
var results, error_1;
|
|
95
|
-
return __generator(this, function (_a) {
|
|
96
|
-
switch (_a.label) {
|
|
97
|
-
case 0:
|
|
98
|
-
if (!account) return [3 /*break*/, 4];
|
|
99
|
-
_a.label = 1;
|
|
100
|
-
case 1:
|
|
101
|
-
_a.trys.push([1, 3, , 4]);
|
|
102
|
-
return [4 /*yield*/, Promise.all(MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account); }))];
|
|
103
|
-
case 2:
|
|
104
|
-
results = _a.sent();
|
|
105
|
-
setUserOwnedBillsData(results);
|
|
106
|
-
return [3 /*break*/, 4];
|
|
107
|
-
case 3:
|
|
108
|
-
error_1 = _a.sent();
|
|
109
|
-
console.error('Error fetching user owned bills data:', error_1);
|
|
110
|
-
return [3 /*break*/, 4];
|
|
111
|
-
case 4: return [2 /*return*/];
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
}); };
|
|
115
|
-
fetchData();
|
|
116
|
-
}, [account]);
|
|
117
85
|
var fetchUserOwnedBillsDataAsync = function (chainId, account) { return __awaiter(void 0, void 0, void 0, function () {
|
|
118
|
-
var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData_1,
|
|
86
|
+
var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData_1, ownedBillsData, userBillNftData_1, combinedData, error_1;
|
|
119
87
|
return __generator(this, function (_a) {
|
|
120
88
|
switch (_a.label) {
|
|
121
89
|
case 0:
|
|
122
|
-
_a.trys.push([0,
|
|
90
|
+
_a.trys.push([0, 3, , 4]);
|
|
123
91
|
bonds = bondData.filter(function (bond) {
|
|
124
92
|
return bond.billVersion !== BillVersion.FixedPrice &&
|
|
125
93
|
(bond === null || bond === void 0 ? void 0 : bond.chainId) === chainId &&
|
|
@@ -136,12 +104,32 @@ var YourBondsModal = function (_a) {
|
|
|
136
104
|
index: bill.index,
|
|
137
105
|
userOwnedBills: mapUserOwnedBills_1[i],
|
|
138
106
|
}); });
|
|
139
|
-
|
|
107
|
+
ownedBillsData = mapUserOwnedBills_1.flatMap(function (bs) {
|
|
108
|
+
return bs.map(function (b) {
|
|
109
|
+
return { id: b.id, billNftAddress: b.billNftAddress, contractAddress: b.address };
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
return [4 /*yield*/, fetchUserOwnedBillNftData(ownedBillsData, chainId, bonds)
|
|
113
|
+
// Merge userBillNftData into userOwnedBillsData
|
|
114
|
+
];
|
|
140
115
|
case 2:
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
116
|
+
userBillNftData_1 = _a.sent();
|
|
117
|
+
combinedData = userOwnedBillsData_1.map(function (data) {
|
|
118
|
+
var enrichedUserBills = data.userOwnedBills.map(function (bill) {
|
|
119
|
+
var nftData = userBillNftData_1.find(function (nft) { return nft.id === parseInt(bill.id); });
|
|
120
|
+
return __assign(__assign({}, bill), { nftData: nftData ? nftData : undefined });
|
|
121
|
+
});
|
|
122
|
+
return __assign(__assign({}, data), { userOwnedBills: enrichedUserBills });
|
|
123
|
+
});
|
|
124
|
+
console.log("combinedData");
|
|
125
|
+
console.log(combinedData);
|
|
126
|
+
console.log("combinedData");
|
|
127
|
+
return [2 /*return*/, Promise.resolve(combinedData)];
|
|
128
|
+
case 3:
|
|
129
|
+
error_1 = _a.sent();
|
|
130
|
+
console.error('Error fetching user owned bills data:', error_1);
|
|
131
|
+
return [2 /*return*/, Promise.reject(error_1)];
|
|
132
|
+
case 4: return [2 /*return*/];
|
|
145
133
|
}
|
|
146
134
|
});
|
|
147
135
|
}); };
|
|
@@ -221,7 +209,31 @@ var YourBondsModal = function (_a) {
|
|
|
221
209
|
}
|
|
222
210
|
});
|
|
223
211
|
}); };
|
|
224
|
-
|
|
212
|
+
useEffect(function () {
|
|
213
|
+
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
214
|
+
var results, error_2;
|
|
215
|
+
return __generator(this, function (_a) {
|
|
216
|
+
switch (_a.label) {
|
|
217
|
+
case 0:
|
|
218
|
+
if (!account) return [3 /*break*/, 4];
|
|
219
|
+
_a.label = 1;
|
|
220
|
+
case 1:
|
|
221
|
+
_a.trys.push([1, 3, , 4]);
|
|
222
|
+
return [4 /*yield*/, Promise.all(MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account); }))];
|
|
223
|
+
case 2:
|
|
224
|
+
results = _a.sent();
|
|
225
|
+
setUserOwnedBillsData(results);
|
|
226
|
+
return [3 /*break*/, 4];
|
|
227
|
+
case 3:
|
|
228
|
+
error_2 = _a.sent();
|
|
229
|
+
console.error('Error fetching user owned bills data:', error_2);
|
|
230
|
+
return [3 /*break*/, 4];
|
|
231
|
+
case 4: return [2 /*return*/];
|
|
232
|
+
}
|
|
233
|
+
});
|
|
234
|
+
}); };
|
|
235
|
+
fetchData();
|
|
236
|
+
}, [account]);
|
|
225
237
|
var totalPending = function (userBill) {
|
|
226
238
|
var _a, _b, _c, _d;
|
|
227
239
|
return getBalanceNumber(new BigNumber((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18);
|
|
@@ -235,11 +247,11 @@ var YourBondsModal = function (_a) {
|
|
|
235
247
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
236
248
|
};
|
|
237
249
|
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: userOwnedBillsData.flat().map(function (data) {
|
|
238
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
250
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
239
251
|
var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
|
|
240
252
|
console.log("USER BILL LOG");
|
|
241
253
|
console.log(userBill);
|
|
242
|
-
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: "
|
|
254
|
+
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: (_a = userBill.nftData) === null || _a === void 0 ? void 0 : _a.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: _jsx(TokenImage, { symbol: (_b = userBill.bond.showcaseTokenName) !== null && _b !== void 0 ? _b : userBill.bond.payoutTokenName, size: 40 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: (_c = userBill.bond) === null || _c === void 0 ? void 0 : _c.showcaseTokenName })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_e = (_d = userBill.bond) === null || _d === void 0 ? void 0 : _d.tags) === null || _e === void 0 ? void 0 : _e[0], variant: ((_g = (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.tags) === null || _g === void 0 ? void 0 : _g[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block row-traits" }, { children: _jsx(Flex, __assign({ className: "yourbondinfo-block header" }, { children: "Traits" })) })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Fully Vested", _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: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Pending", _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: _jsx(TokenImage, { symbol: (_h = userBill.bond.showcaseTokenName) !== null && _h !== void 0 ? _h : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4), "($".concat((totalPending(userBill) * ((_j = parseFloat(earnTokenPrice(userBill.bond))) !== null && _j !== void 0 ? _j : 0)).toFixed(2), ")")] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-claimable" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Claimable", _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: _jsx(TokenImage, { symbol: (_k = userBill.bond.showcaseTokenName) !== null && _k !== void 0 ? _k : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4), "($".concat((claimable(userBill) * ((_l = parseFloat(earnTokenPrice(userBill.bond))) !== null && _l !== void 0 ? _l : 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, { children: "TRANSFER" }) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
|
|
243
255
|
}) })));
|
|
244
256
|
};
|
|
245
257
|
export default YourBondsModal;
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
align-items: center;
|
|
11
11
|
z-index: 1000;
|
|
12
12
|
overflow: auto;
|
|
13
|
+
padding: 50px;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.yourbondsmodal.content {
|
|
@@ -20,8 +21,8 @@
|
|
|
20
21
|
padding: 10px;
|
|
21
22
|
border-radius: 10px;
|
|
22
23
|
z-index: 1001;
|
|
23
|
-
max-width:
|
|
24
|
-
min-width:
|
|
24
|
+
max-width: 1200px;
|
|
25
|
+
min-width: 1000px;
|
|
25
26
|
overflow: auto;
|
|
26
27
|
}
|
|
27
28
|
|
|
@@ -154,7 +155,7 @@
|
|
|
154
155
|
flex-direction: row;
|
|
155
156
|
height: 25px;
|
|
156
157
|
padding-left: 10px;
|
|
157
|
-
width:
|
|
158
|
+
width: 100%;
|
|
158
159
|
margin-bottom: 10px;
|
|
159
160
|
align-items: center;
|
|
160
161
|
justify-content: start;
|
|
@@ -163,7 +164,7 @@
|
|
|
163
164
|
.yourbondinfo-block.row-vested {
|
|
164
165
|
flex-direction: row;
|
|
165
166
|
height: 50px;
|
|
166
|
-
width:
|
|
167
|
+
width: 100%;
|
|
167
168
|
margin-bottom: 10px;
|
|
168
169
|
padding-left: 10px;
|
|
169
170
|
padding-right: 10px;
|
|
@@ -174,7 +175,7 @@
|
|
|
174
175
|
.yourbondinfo-block.row-pending {
|
|
175
176
|
flex-direction: row;
|
|
176
177
|
height: 50px;
|
|
177
|
-
width:
|
|
178
|
+
width: 100%;
|
|
178
179
|
margin-bottom: 10px;
|
|
179
180
|
padding-left: 10px;
|
|
180
181
|
padding-right: 10px;
|
|
@@ -185,7 +186,7 @@
|
|
|
185
186
|
.yourbondinfo-block.row-claimable {
|
|
186
187
|
flex-direction: row;
|
|
187
188
|
height: 50px;
|
|
188
|
-
width:
|
|
189
|
+
width: 100%;
|
|
189
190
|
margin-bottom: 10px;
|
|
190
191
|
padding-left: 10px;
|
|
191
192
|
padding-right: 10px;
|