@ape.swap/bonds-sdk 1.0.737 → 1.0.739
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.
|
@@ -53,20 +53,20 @@ import '../../../scss/YourBondsModal.scss';
|
|
|
53
53
|
import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
|
|
54
54
|
import BOND_ABI from '../../../config/abi/bond.json';
|
|
55
55
|
var YourBondsModal = function (_a) {
|
|
56
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q
|
|
56
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
57
57
|
var isOpen = _a.isOpen, onClose = _a.onClose, userBill = _a.userBill;
|
|
58
58
|
if (!isOpen)
|
|
59
59
|
return null;
|
|
60
60
|
var chainId = useChainId();
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
var
|
|
61
|
+
var _r = useSwitchChain(), chains = _r.chains, switchChain = _r.switchChain;
|
|
62
|
+
var _s = useWriteContract(), hash = _s.data, isPending = _s.isPending, writeContract = _s.writeContract, writeContractAsync = _s.writeContractAsync;
|
|
63
|
+
var _t = useWaitForTransactionReceipt({
|
|
64
64
|
confirmations: 4,
|
|
65
65
|
chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
|
|
66
66
|
hash: hash,
|
|
67
|
-
}), isConfirming =
|
|
68
|
-
var
|
|
69
|
-
var
|
|
67
|
+
}), isConfirming = _t.isLoading, isConfirmed = _t.isSuccess;
|
|
68
|
+
var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
|
|
69
|
+
var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
|
|
70
70
|
var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
71
71
|
var address, tx, error_1;
|
|
72
72
|
return __generator(this, function (_a) {
|
|
@@ -117,30 +117,60 @@ var YourBondsModal = function (_a) {
|
|
|
117
117
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
118
118
|
};
|
|
119
119
|
var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
|
|
120
|
-
var
|
|
121
|
-
var
|
|
120
|
+
var _w = useState(false), isOpenTraits = _w[0], setIsOpenTraits = _w[1];
|
|
121
|
+
var _x = useState(false), billRendered = _x[0], setBillRendered = _x[1];
|
|
122
122
|
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); });
|
|
123
|
-
var
|
|
124
|
-
var
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
123
|
+
var _y = useState(false), isImageLoaded = _y[0], setIsImageLoaded = _y[1];
|
|
124
|
+
var _z = useState(null), imageSrc = _z[0], setImageSrc = _z[1];
|
|
125
|
+
useEffect(function () {
|
|
126
|
+
var loadImage = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
127
|
+
var image_1, error_2;
|
|
128
|
+
var _a;
|
|
129
|
+
return __generator(this, function (_b) {
|
|
130
|
+
switch (_b.label) {
|
|
131
|
+
case 0:
|
|
132
|
+
_b.trys.push([0, 2, , 3]);
|
|
133
|
+
image_1 = new Image();
|
|
134
|
+
image_1.src = (_a = userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.image;
|
|
135
|
+
return [4 /*yield*/, new Promise(function (resolve, reject) {
|
|
136
|
+
image_1.onload = resolve;
|
|
137
|
+
image_1.onerror = reject;
|
|
138
|
+
})];
|
|
139
|
+
case 1:
|
|
140
|
+
_b.sent();
|
|
141
|
+
setImageSrc(image_1.src);
|
|
142
|
+
setIsImageLoaded(true);
|
|
143
|
+
return [3 /*break*/, 3];
|
|
144
|
+
case 2:
|
|
145
|
+
error_2 = _b.sent();
|
|
146
|
+
console.error('Error loading image:', error_2);
|
|
147
|
+
setIsImageLoaded(false);
|
|
148
|
+
return [3 /*break*/, 3];
|
|
149
|
+
case 3: return [2 /*return*/];
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
}); };
|
|
153
|
+
loadImage();
|
|
154
|
+
}, [userBill]);
|
|
155
|
+
return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal-backdrop", onClick: onClose, children: !isImageLoaded ? (_jsxs(Flex, { className: "yourbondsmodal-spinner", children: [" ", _jsx(Spinner, { size: 100 }), " "] }))
|
|
156
|
+
: (_jsxs(Flex, { className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _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: imageSrc,
|
|
157
|
+
// onLoad={handleImageLoad}
|
|
158
|
+
style: { display: isImageLoaded ? "block" : "none" } }) }), _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: (_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.earnToken.symbol, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
|
|
159
|
+
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));
|
|
160
|
+
}) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsxs(Flex, { className: "attributes-container", children: [_jsxs(Flex, { className: "attributes-header", sx: { borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
|
|
161
|
+
display: ['none', 'none', 'none', 'flex'] }, 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
|
|
162
|
+
? 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)); })
|
|
163
|
+
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
164
|
+
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
165
|
+
}) }) })) })] }), _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, { className: "tooltip-bubble", 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((_h = userBill.lastBlockTimestamp) !== null && _h !== void 0 ? _h : '', (_j = userBill.vesting) !== null && _j !== void 0 ? _j : '') }) })] })] }), _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, { className: "tooltip-bubble", 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: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _k !== void 0 ? _k : 'question' }), _jsx(TokenImage, { symbol: (_l = userBill.bond.showcaseTokenName) !== null && _l !== void 0 ? _l : userBill.bond.earnToken.symbol, 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) * ((_m = parseFloat(earnTokenPrice(userBill.bond))) !== null && _m !== void 0 ? _m : 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, { className: "tooltip-bubble", 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: (_o = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _o !== void 0 ? _o : 'question' }), _jsx(TokenImage, { symbol: (_p = userBill.bond.showcaseTokenName) !== null && _p !== void 0 ? _p : userBill.bond.earnToken.symbol, 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) * ((_q = parseFloat(earnTokenPrice(userBill.bond))) !== null && _q !== void 0 ? _q : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
|
|
166
|
+
_jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
|
|
167
|
+
event.stopPropagation();
|
|
168
|
+
switchChain({ chainId: userBill.bond.chainId });
|
|
169
|
+
}, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })
|
|
170
|
+
:
|
|
171
|
+
_jsx(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
|
|
137
172
|
event.stopPropagation();
|
|
138
|
-
|
|
139
|
-
}, children:
|
|
140
|
-
:
|
|
141
|
-
_jsx(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
|
|
142
|
-
event.stopPropagation();
|
|
143
|
-
handleClaim(userBill.id, userBill.address);
|
|
144
|
-
}, children: "Claim" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] })] }) }, userBill.address) }));
|
|
173
|
+
handleClaim(userBill.id, userBill.address);
|
|
174
|
+
}, children: "Claim" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] })) }) }, userBill.address) }));
|
|
145
175
|
};
|
|
146
176
|
export default YourBondsModal;
|