@ape.swap/bonds-sdk 1.0.504 → 1.0.506
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.
|
@@ -56,6 +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 { RPC_PROVIDERS } from '../../../config/constants/providers';
|
|
59
60
|
var BondModal = function (_a) {
|
|
60
61
|
var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive, isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
61
62
|
if (!isOpen)
|
|
@@ -105,39 +106,35 @@ var BondModal = function (_a) {
|
|
|
105
106
|
}); };
|
|
106
107
|
//You approve the token, not the contract (this code will have to be updated for zap)
|
|
107
108
|
var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
108
|
-
var tokenAddress;
|
|
109
|
+
var tokenAddress, tx, error_2;
|
|
109
110
|
var _a;
|
|
110
111
|
return __generator(this, function (_b) {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
switch (_b.label) {
|
|
113
|
+
case 0:
|
|
114
|
+
console.log('---!');
|
|
115
|
+
console.log((_a = bondData[0]) === null || _a === void 0 ? void 0 : _a.principalToken);
|
|
116
|
+
console.log(account);
|
|
117
|
+
tokenAddress = bondData[0].principalToken;
|
|
118
|
+
_b.label = 1;
|
|
119
|
+
case 1:
|
|
120
|
+
_b.trys.push([1, 3, , 4]);
|
|
121
|
+
console.log('BBBBB');
|
|
122
|
+
return [4 /*yield*/, writeContract({
|
|
123
|
+
address: tokenAddress,
|
|
124
|
+
abi: ERC_20_ABI,
|
|
125
|
+
functionName: 'approve',
|
|
126
|
+
args: [account, adjustDecimals(inputValue)],
|
|
127
|
+
})];
|
|
128
|
+
case 2:
|
|
129
|
+
tx = _b.sent();
|
|
130
|
+
console.log('Transaction:', tx);
|
|
131
|
+
return [3 /*break*/, 4];
|
|
132
|
+
case 3:
|
|
133
|
+
error_2 = _b.sent();
|
|
134
|
+
console.error('Approval failed:', error_2);
|
|
135
|
+
return [3 /*break*/, 4];
|
|
136
|
+
case 4: return [2 /*return*/];
|
|
116
137
|
}
|
|
117
|
-
console.log('---!');
|
|
118
|
-
console.log((_a = bondData[0]) === null || _a === void 0 ? void 0 : _a.principalToken);
|
|
119
|
-
//Here we need to approve the token, not the bond
|
|
120
|
-
// const provider = new ethers.providers.Web3Provider(window.ethereum);
|
|
121
|
-
// const signer = provider.getSigner();
|
|
122
|
-
//
|
|
123
|
-
// console.log(signer)
|
|
124
|
-
console.log(account);
|
|
125
|
-
tokenAddress = bondData[0].principalToken;
|
|
126
|
-
//
|
|
127
|
-
// const { writeAsync, isLoading, isSuccess, error } = useContractWrite({
|
|
128
|
-
// addressOrName: tokenAddress,
|
|
129
|
-
// contractInterface: ERC_20_ABI,
|
|
130
|
-
// functionName: 'approve',
|
|
131
|
-
// args: [account, adjustDecimals(inputValue)],
|
|
132
|
-
// });
|
|
133
|
-
// @ts-ignore
|
|
134
|
-
writeContract({
|
|
135
|
-
address: tokenAddress,
|
|
136
|
-
abi: ERC_20_ABI,
|
|
137
|
-
functionName: 'approve',
|
|
138
|
-
args: [account, adjustDecimals(inputValue)],
|
|
139
|
-
});
|
|
140
|
-
return [2 /*return*/];
|
|
141
138
|
});
|
|
142
139
|
}); };
|
|
143
140
|
// Fetch data
|
|
@@ -182,6 +179,39 @@ var BondModal = function (_a) {
|
|
|
182
179
|
setSelectedBond(bond);
|
|
183
180
|
navigate("/bondsingle/".concat(bond.billAddress));
|
|
184
181
|
};
|
|
182
|
+
var _f = useState(null), tokenBalance = _f[0], setTokenBalance = _f[1];
|
|
183
|
+
useEffect(function () {
|
|
184
|
+
if (isActive && account && bondData.length > 0) {
|
|
185
|
+
getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (balance) {
|
|
186
|
+
setTokenBalance(balance);
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
}, [isActive, account, bondData]);
|
|
190
|
+
var getTokenBalance = function (chainId, tokenAddress, walletAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
191
|
+
var provider, contract, balance, balanceInEther, error_3;
|
|
192
|
+
return __generator(this, function (_a) {
|
|
193
|
+
switch (_a.label) {
|
|
194
|
+
case 0:
|
|
195
|
+
_a.trys.push([0, 2, , 3]);
|
|
196
|
+
provider = RPC_PROVIDERS[chainId];
|
|
197
|
+
if (!provider) {
|
|
198
|
+
throw new Error("No provider found for chainId: ".concat(chainId));
|
|
199
|
+
}
|
|
200
|
+
contract = new ethers.Contract(tokenAddress, ERC_20_ABI, provider);
|
|
201
|
+
return [4 /*yield*/, contract.balanceOf(walletAddress)];
|
|
202
|
+
case 1:
|
|
203
|
+
balance = _a.sent();
|
|
204
|
+
balanceInEther = ethers.utils.formatUnits(balance, 18);
|
|
205
|
+
console.log("Token Balance: ".concat(balanceInEther));
|
|
206
|
+
return [2 /*return*/, balanceInEther];
|
|
207
|
+
case 2:
|
|
208
|
+
error_3 = _a.sent();
|
|
209
|
+
console.error('Error fetching token balance', error_3);
|
|
210
|
+
return [2 /*return*/, 'Error fetching token balance'];
|
|
211
|
+
case 3: return [2 /*return*/];
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
}); };
|
|
185
215
|
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
|
|
186
216
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
187
217
|
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, { className: "modal modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modal-container table-container", children: [_jsxs(Flex, { className: "modal-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.payoutTokenName, size: 50 })] }) }), _jsx(Flex, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { className: "title-container tokentags", children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })] }), _jsx(Flex, { className: "modal-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modal-container blocks-container", children: [_jsxs(Flex, { className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header header", children: ["Discount", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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 ? void 0 : _e.toFixed(2), "%")] }), _jsxs(Flex, { className: "modal-block column-arr", children: [_jsxs(Flex, { className: "block-header header", children: ["ARR", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%")] }), _jsxs(Flex, { className: "modal-block column-term", children: [_jsxs(Flex, { className: "block-header header", children: ["Terms", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-'] }), _jsxs(Flex, { className: "modal-block column-maxbuy", children: [_jsxs(Flex, { className: "block-header header", children: ["Max Buy", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US')] })] }), _jsxs(Flex, { className: "modal-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] }), _jsxs(Flex, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modal-container input-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { className: "input-container input", children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
@@ -198,7 +228,7 @@ var BondModal = function (_a) {
|
|
|
198
228
|
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
199
229
|
? v.currentTarget.value
|
|
200
230
|
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
201
|
-
} }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [
|
|
231
|
+
} }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approvalStatus === true ?
|
|
202
232
|
_jsxs(Button, { onClick: handleBuy, children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })
|
|
203
233
|
:
|
|
204
234
|
_jsx(Button, { onClick: handleApprove, children: "Approve" }) })] })] })] }) }) }, bond.billAddress));
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { UserBill } from '../../../types/yourbonds';
|
|
4
4
|
import '../../../scss/YourBondsModal.scss';
|
|
5
|
-
declare const YourBondsModal: ({ isOpen, onClose,
|
|
5
|
+
declare const YourBondsModal: ({ isOpen, onClose, userBill }: {
|
|
6
6
|
isOpen: boolean;
|
|
7
7
|
onClose: () => void;
|
|
8
|
-
|
|
8
|
+
userBill: UserBill | undefined;
|
|
9
9
|
}) => React.JSX.Element | null;
|
|
10
10
|
export default YourBondsModal;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
|
|
2
2
|
/** @jsxImportSource theme-ui */
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
|
-
import { Flex
|
|
4
|
+
import { Flex } from 'theme-ui';
|
|
5
5
|
import { useWeb3React } from '@web3-react/core';
|
|
6
6
|
import { BigNumber } from 'bignumber.js';
|
|
7
7
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
8
8
|
import { NETWORK_ICONS } from '../../../config/constants/chains';
|
|
9
9
|
import { getBalanceNumber } from '../../../utils/getBalanceNumber';
|
|
10
10
|
import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
|
|
11
|
-
import { defaultTheme } from '../../../theme';
|
|
12
11
|
import TokenImage from '../../uikit-sdk/TokenImage';
|
|
13
12
|
import { Button, ListTag, Skeleton, Svg, Text, TooltipBubble } from '../../uikit-sdk';
|
|
14
13
|
import { UserBillTooltipText } from '../../../enum/tooltips';
|
|
@@ -17,13 +16,14 @@ import { formatNumberSI } from '../../../utils/formatNumber';
|
|
|
17
16
|
import { StyledHeadingText, TraitsContentContainer } from './styles';
|
|
18
17
|
import '../../../scss/YourBondsModal.scss';
|
|
19
18
|
var YourBondsModal = function (_a) {
|
|
20
|
-
var
|
|
19
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
20
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, userBill = _a.userBill;
|
|
21
21
|
if (!isOpen)
|
|
22
22
|
return null;
|
|
23
|
-
var
|
|
23
|
+
var _s = useWeb3React(), account = _s.account, chainId = _s.chainId, isActive = _s.isActive;
|
|
24
24
|
// Fetch data for user owned bill
|
|
25
|
-
var
|
|
26
|
-
var
|
|
25
|
+
var _t = useState([]), bondData = _t[0], setBondData = _t[1];
|
|
26
|
+
var _u = useState([]), userOwnedBillsData = _u[0], setUserOwnedBillsData = _u[1];
|
|
27
27
|
// Functions to calculate display values for modal
|
|
28
28
|
var totalPending = function (userBill) {
|
|
29
29
|
var _a, _b, _c, _d;
|
|
@@ -38,26 +38,22 @@ var YourBondsModal = function (_a) {
|
|
|
38
38
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
39
39
|
};
|
|
40
40
|
var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
59
|
-
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
60
|
-
}) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { 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, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { 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, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { 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, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { 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, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary", children: "TRANSFER" }) })] })] })] })] }) }) }, userBill.bond.billAddress)) : null;
|
|
61
|
-
}) }) }));
|
|
41
|
+
var _v = useState(false), isOpenTraits = _v[0], setIsOpenTraits = _v[1];
|
|
42
|
+
var _w = useState(false), billRendered = _w[0], setBillRendered = _w[1];
|
|
43
|
+
var attributes = (_c = (_b = userBill.nftData) === null || _b === void 0 ? void 0 : _b.data.attributes) === null || _c === void 0 ? void 0 : _c.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
|
|
44
|
+
return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal backdrop", children: _jsxs(Flex, { className: "yourbondsmodal content", children: [_jsx(Flex, { className: "yourbondsmodal header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image }) }), _jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.payoutTokenName, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.slice(0, 1).map(function (tag) {
|
|
45
|
+
return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
|
|
46
|
+
}) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsx(Flex, { className: "yourbondinfo-block attributes", children: _jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [_jsxs(Flex, { sx: {
|
|
47
|
+
justifyContent: 'space-between',
|
|
48
|
+
height: '24px',
|
|
49
|
+
background: 'white3',
|
|
50
|
+
px: '15px',
|
|
51
|
+
borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
|
|
52
|
+
display: ['none', 'none', 'none', 'flex'],
|
|
53
|
+
}, onClick: function () { return setIsOpenTraits(!isOpenTraits); }, children: [_jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, { 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, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
|
|
54
|
+
? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
|
|
55
|
+
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
56
|
+
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
57
|
+
}) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { 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, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.payoutTokenName, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary", children: "TRANSFER" }) })] })] })] })] }) }) }, userBill.address) }));
|
|
62
58
|
};
|
|
63
59
|
export default YourBondsModal;
|
|
@@ -259,7 +259,7 @@ var YourBonds = function (_a) {
|
|
|
259
259
|
};
|
|
260
260
|
// Modal
|
|
261
261
|
var _h = useState(false), isModalOpen = _h[0], setIsModalOpen = _h[1];
|
|
262
|
-
var _j = useState(
|
|
262
|
+
var _j = useState(undefined), selectedBill = _j[0], setSelectedBill = _j[1];
|
|
263
263
|
var rowClick = function (bill) {
|
|
264
264
|
console.log(bill);
|
|
265
265
|
setSelectedBill(bill);
|
|
@@ -289,8 +289,11 @@ var YourBonds = function (_a) {
|
|
|
289
289
|
setBondsRendered(true);
|
|
290
290
|
}
|
|
291
291
|
}, [filteredBonds]);
|
|
292
|
+
var closeModal = function () {
|
|
293
|
+
setIsModalOpen(false);
|
|
294
|
+
};
|
|
292
295
|
return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isModalOpen &&
|
|
293
|
-
_jsx(YourBondsModal, { isOpen: true, onClose:
|
|
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", children: _jsx(Button, { disabled: !account && !hasPendingRewards(filteredBonds), sx: {
|
|
294
297
|
height: ['36px', '36px', '36px', '26px'],
|
|
295
298
|
lineHeight: '12px',
|
|
296
299
|
fontSize: '14px',
|