@ape.swap/bonds-sdk 1.0.636 → 1.0.637
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BondRows/BondRowsWithTitle.js +1 -1
- package/dist/components/Modals/BondModal/BondModal.js +44 -33
- package/dist/components/Modals/YourBondsModal/YourBondsModal.js +34 -43
- package/dist/pages/Bonds/Bonds.js +91 -19
- package/dist/pages/YourBonds/YourBonds.js +41 -52
- package/dist/scss/BondModal.scss +0 -25
- package/dist/scss/YourBonds.scss +6 -8
- package/dist/scss/YourBondsModal.scss +0 -25
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var BondRowsWithTitle = function (_a) {
|
|
|
9
9
|
var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
|
|
10
10
|
var key = chain;
|
|
11
11
|
var _b = useState(true), isOpen = _b[0], setIsOpen = _b[1];
|
|
12
|
-
return (_jsx(Flex, { className: "container bondRowsWithTitle", sx: { width: '100%', flexDirection: 'column' }, children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles:
|
|
12
|
+
return (_jsx(Flex, { className: "container bondRowsWithTitle", sx: { width: '100%', flexDirection: 'column' }, children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: hideTitles, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
|
|
13
13
|
position: 'relative',
|
|
14
14
|
overflow: 'hidden',
|
|
15
15
|
width: '100%',
|
|
@@ -47,40 +47,33 @@ import { isNumber } from '../../../utils/numbers';
|
|
|
47
47
|
import { TooltipBubble, Button, Svg, ListTag } from '../../uikit-sdk';
|
|
48
48
|
import { TooltipText } from '../../../enum/tooltips';
|
|
49
49
|
import { ethers } from 'ethers';
|
|
50
|
-
import convertToTokenValue from "../../../utils/convertToTokenValue";
|
|
50
|
+
import convertToTokenValue, { adjustDecimals } from "../../../utils/convertToTokenValue";
|
|
51
51
|
import TokenImage from '../../uikit-sdk/TokenImage';
|
|
52
52
|
import BOND_ABI from '../../../config/abi/bond.json';
|
|
53
53
|
import ERC_20_ABI from '../../../config/abi/erc20.json';
|
|
54
54
|
import { NETWORK_ICONS } from '../../../config/constants/chains';
|
|
55
55
|
import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
|
|
56
56
|
import '../../../scss/BondModal.scss';
|
|
57
|
-
import {
|
|
57
|
+
import { useWriteContract } from "wagmi";
|
|
58
58
|
import { PUBLIC_RPC_URLS } from "../../../config/constants/networks";
|
|
59
59
|
var BondModal = function (_a) {
|
|
60
60
|
var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
61
61
|
if (!isOpen)
|
|
62
62
|
return null;
|
|
63
|
-
var _b =
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var
|
|
72
|
-
var _g = useState(null), buyTx = _g[0], setBuyTx = _g[1];
|
|
73
|
-
var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
|
|
74
|
-
var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
|
|
75
|
-
var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
|
|
76
|
-
var handleInputChange = function (event) {
|
|
77
|
-
setInputValue(event.target.value);
|
|
78
|
-
};
|
|
63
|
+
var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
|
|
64
|
+
// const { isLoading: isConfirming, isSuccess: isConfirmed } =
|
|
65
|
+
// useWaitForTransactionReceipt({
|
|
66
|
+
// confirmations: 4,
|
|
67
|
+
// chainId: accountChainId,
|
|
68
|
+
// hash: hash,
|
|
69
|
+
// pollingInterval: 1_000
|
|
70
|
+
// });
|
|
71
|
+
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
79
72
|
//This is a temp solution, but we will force approval each time, and then once set we will set status here and allow
|
|
80
73
|
//user to buy
|
|
81
74
|
//Check with Fede if this needs to be temp, if we force approval everytime, isn't this fine?
|
|
82
75
|
var handleBuy = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
83
|
-
var billAddress, decimals, maxPrice, amount, tx, error_1;
|
|
76
|
+
var billAddress, decimals, maxPrice, rawAmount, amount, tx, error_1;
|
|
84
77
|
return __generator(this, function (_a) {
|
|
85
78
|
switch (_a.label) {
|
|
86
79
|
case 0:
|
|
@@ -90,16 +83,18 @@ var BondModal = function (_a) {
|
|
|
90
83
|
case 1:
|
|
91
84
|
_a.trys.push([1, 3, , 4]);
|
|
92
85
|
console.log('HANDLEBUY CLICKED');
|
|
93
|
-
maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100);
|
|
94
|
-
|
|
86
|
+
maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100).toFixed(0);
|
|
87
|
+
rawAmount = adjustDecimals(inputValue);
|
|
88
|
+
amount = new BigNumber(rawAmount).times(new BigNumber(10).pow(decimals !== null && decimals !== void 0 ? decimals : 18)).toString();
|
|
95
89
|
console.log('BillAddress:', billAddress);
|
|
96
90
|
console.log('Amount:', amount);
|
|
97
91
|
console.log('MaxPrice:', maxPrice);
|
|
92
|
+
console.log('Price:', bondData[0].trueBillPrice);
|
|
98
93
|
return [4 /*yield*/, writeContractAsync({
|
|
99
94
|
address: billAddress,
|
|
100
95
|
abi: BOND_ABI,
|
|
101
96
|
functionName: 'deposit',
|
|
102
|
-
args: [amount, maxPrice
|
|
97
|
+
args: [amount, maxPrice, account],
|
|
103
98
|
})];
|
|
104
99
|
case 2:
|
|
105
100
|
tx = _a.sent();
|
|
@@ -118,6 +113,7 @@ var BondModal = function (_a) {
|
|
|
118
113
|
}
|
|
119
114
|
});
|
|
120
115
|
}); };
|
|
116
|
+
var _d = useState(null), buyTx = _d[0], setBuyTx = _d[1];
|
|
121
117
|
//You approve the token, not the contract (this code will have to be updated for zap)
|
|
122
118
|
var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
123
119
|
var tokenAddress, decimals, amount, tx, error_2;
|
|
@@ -130,6 +126,7 @@ var BondModal = function (_a) {
|
|
|
130
126
|
case 1:
|
|
131
127
|
_a.trys.push([1, 3, , 4]);
|
|
132
128
|
amount = convertToTokenValue(inputValue, decimals);
|
|
129
|
+
console.log('Amount:', amount);
|
|
133
130
|
return [4 /*yield*/, writeContractAsync({
|
|
134
131
|
address: tokenAddress,
|
|
135
132
|
abi: ERC_20_ABI,
|
|
@@ -138,8 +135,20 @@ var BondModal = function (_a) {
|
|
|
138
135
|
})];
|
|
139
136
|
case 2:
|
|
140
137
|
tx = _a.sent();
|
|
138
|
+
// const receipt = useWaitForTransactionReceipt({
|
|
139
|
+
// confirmations: 4,
|
|
140
|
+
// chainId: accountChainId,
|
|
141
|
+
// hash: tx,
|
|
142
|
+
// pollingInterval: 1_000
|
|
143
|
+
// });
|
|
144
|
+
// console.log('Receipt',receipt);
|
|
145
|
+
// if(receipt.isSuccess) {
|
|
146
|
+
// setReceiptTx(receipt.data.transactionHash);
|
|
147
|
+
// console.log('Receipt:', receipt);
|
|
148
|
+
// }
|
|
141
149
|
if (tx) {
|
|
142
150
|
setApproveTx(tx);
|
|
151
|
+
console.log('setApproveTx:', tx);
|
|
143
152
|
}
|
|
144
153
|
return [3 /*break*/, 4];
|
|
145
154
|
case 3:
|
|
@@ -151,13 +160,10 @@ var BondModal = function (_a) {
|
|
|
151
160
|
}
|
|
152
161
|
});
|
|
153
162
|
}); };
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
setTimeout(function () { return setToastMessage(null); }, 10000);
|
|
159
|
-
}
|
|
160
|
-
}, [approveTx, buyTx, isConfirmed]);
|
|
163
|
+
var _e = useState(null), receiptTx = _e[0], setReceiptTx = _e[1];
|
|
164
|
+
var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
|
|
165
|
+
var _g = useState(null), tokenBalance = _g[0], setTokenBalance = _g[1];
|
|
166
|
+
var _h = useState(null), tokenDecimals = _h[0], setTokenDecimals = _h[1];
|
|
161
167
|
useEffect(function () {
|
|
162
168
|
if (isActive && account && bondData.length > 0) {
|
|
163
169
|
getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (_a) {
|
|
@@ -188,6 +194,7 @@ var BondModal = function (_a) {
|
|
|
188
194
|
case 2:
|
|
189
195
|
balance = _a.sent();
|
|
190
196
|
balanceInEther = ethers.utils.formatUnits(balance, decimals);
|
|
197
|
+
console.log("Token Balance: ".concat(balanceInEther));
|
|
191
198
|
return [2 /*return*/, { balanceInEther: balanceInEther, decimals: decimals }];
|
|
192
199
|
case 3:
|
|
193
200
|
error_3 = _a.sent();
|
|
@@ -229,9 +236,13 @@ var BondModal = function (_a) {
|
|
|
229
236
|
var singlePurchaseLimit = new BigNumber((_c = bond === null || bond === void 0 ? void 0 : bond.maxPayout) !== null && _c !== void 0 ? _c : 0).div(new BigNumber(10).pow((_d = bond === null || bond === void 0 ? void 0 : bond.payoutTokenDecimals) !== null && _d !== void 0 ? _d : 18));
|
|
230
237
|
return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
|
|
231
238
|
};
|
|
239
|
+
var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
|
|
240
|
+
var handleInputChange = function (event) {
|
|
241
|
+
setInputValue(event.target.value);
|
|
242
|
+
};
|
|
232
243
|
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
|
|
233
244
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
234
|
-
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [
|
|
245
|
+
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [_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) {
|
|
235
246
|
if (v.currentTarget.value.includes(',')) {
|
|
236
247
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
237
248
|
}
|
|
@@ -245,10 +256,10 @@ var BondModal = function (_a) {
|
|
|
245
256
|
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
246
257
|
? v.currentTarget.value
|
|
247
258
|
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
248
|
-
} }) }), _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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null
|
|
249
|
-
|
|
259
|
+
} }) }), _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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null ?
|
|
260
|
+
_jsxs(Button, { disabled: isPending, onClick: handleBuy, children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })
|
|
250
261
|
:
|
|
251
|
-
_jsx(Button, { disabled: isPending
|
|
262
|
+
_jsx(Button, { disabled: isPending, onClick: handleApprove, children: "Approve" }) })] })] })] }) }) }, bond.billAddress));
|
|
252
263
|
}) }));
|
|
253
264
|
};
|
|
254
265
|
export default BondModal;
|
|
@@ -38,6 +38,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-
|
|
|
38
38
|
/** @jsxImportSource theme-ui */
|
|
39
39
|
import React, { useEffect, useState } from 'react';
|
|
40
40
|
import { Flex } from 'theme-ui';
|
|
41
|
+
import { useWeb3React } from '@web3-react/core';
|
|
41
42
|
import { BigNumber } from 'bignumber.js';
|
|
42
43
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
43
44
|
import { NETWORK_ICONS } from '../../../config/constants/chains';
|
|
@@ -50,58 +51,48 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
|
|
|
50
51
|
import { formatNumberSI } from '../../../utils/formatNumber';
|
|
51
52
|
import { StyledHeadingText, TraitsContentContainer } from './styles';
|
|
52
53
|
import '../../../scss/YourBondsModal.scss';
|
|
53
|
-
import {
|
|
54
|
+
import { useWriteContract } from 'wagmi';
|
|
54
55
|
import BOND_ABI from '../../../config/abi/bond.json';
|
|
55
56
|
var YourBondsModal = function (_a) {
|
|
56
57
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
57
58
|
var isOpen = _a.isOpen, onClose = _a.onClose, userBill = _a.userBill;
|
|
58
59
|
if (!isOpen)
|
|
59
60
|
return null;
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var _t = useWaitForTransactionReceipt({
|
|
63
|
-
confirmations: 4,
|
|
64
|
-
chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
|
|
65
|
-
hash: hash,
|
|
66
|
-
}), isConfirming = _t.isLoading, isConfirmed = _t.isSuccess;
|
|
67
|
-
var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
|
|
68
|
-
var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
|
|
61
|
+
var _s = useWeb3React(), account = _s.account, chainId = _s.chainId, isActive = _s.isActive;
|
|
62
|
+
var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract;
|
|
69
63
|
var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
70
|
-
var address
|
|
64
|
+
var address;
|
|
71
65
|
return __generator(this, function (_a) {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
setClaimTx(tx);
|
|
88
|
-
}
|
|
89
|
-
return [3 /*break*/, 4];
|
|
90
|
-
case 3:
|
|
91
|
-
error_1 = _a.sent();
|
|
92
|
-
console.error('Approval failed:', error_1);
|
|
93
|
-
return [3 /*break*/, 4];
|
|
94
|
-
case 4: return [2 /*return*/];
|
|
66
|
+
address = billAddress;
|
|
67
|
+
try {
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
writeContract({
|
|
70
|
+
address: address,
|
|
71
|
+
abi: BOND_ABI,
|
|
72
|
+
functionName: 'redeem',
|
|
73
|
+
args: [billId],
|
|
74
|
+
});
|
|
75
|
+
if (hash) {
|
|
76
|
+
setClaimTx(hash);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
catch (error) {
|
|
80
|
+
console.error('Approval failed:', error);
|
|
95
81
|
}
|
|
82
|
+
return [2 /*return*/];
|
|
96
83
|
});
|
|
97
84
|
}); };
|
|
98
|
-
|
|
85
|
+
var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
|
|
86
|
+
var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
|
|
99
87
|
useEffect(function () {
|
|
100
|
-
if (
|
|
101
|
-
setToastMessage("Transaction
|
|
102
|
-
setTimeout(function () { return setToastMessage(null); },
|
|
88
|
+
if (claimTx) {
|
|
89
|
+
setToastMessage("Transaction complete: ".concat(claimTx));
|
|
90
|
+
setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
|
|
103
91
|
}
|
|
104
|
-
}, [claimTx
|
|
92
|
+
}, [claimTx]);
|
|
93
|
+
// Fetch data for user owned bill
|
|
94
|
+
var _w = useState([]), bondData = _w[0], setBondData = _w[1];
|
|
95
|
+
var _x = useState([]), userOwnedBillsData = _x[0], setUserOwnedBillsData = _x[1];
|
|
105
96
|
// Functions to calculate display values for modal
|
|
106
97
|
var totalPending = function (userBill) {
|
|
107
98
|
var _a, _b, _c, _d;
|
|
@@ -116,10 +107,10 @@ var YourBondsModal = function (_a) {
|
|
|
116
107
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
117
108
|
};
|
|
118
109
|
var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
|
|
119
|
-
var
|
|
120
|
-
var
|
|
110
|
+
var _y = useState(false), isOpenTraits = _y[0], setIsOpenTraits = _y[1];
|
|
111
|
+
var _z = useState(false), billRendered = _z[0], setBillRendered = _z[1];
|
|
121
112
|
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); });
|
|
122
|
-
return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal backdrop", children: _jsxs(Flex, { className: "yourbondsmodal content", children: [
|
|
113
|
+
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) {
|
|
123
114
|
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));
|
|
124
115
|
}) }), _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: {
|
|
125
116
|
justifyContent: 'space-between',
|
|
@@ -132,6 +123,6 @@ var YourBondsModal = function (_a) {
|
|
|
132
123
|
? 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)); })
|
|
133
124
|
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
134
125
|
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
135
|
-
}) }) })) })] }) }), _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, { disabled: claimable(userBill) === 0 || isPending, onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary",
|
|
126
|
+
}) }) })) })] }) }), _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, { disabled: claimable(userBill) === 0 || isPending, onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary", onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] }) }) }, userBill.address) }));
|
|
136
127
|
};
|
|
137
128
|
export default YourBondsModal;
|
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
+
function step(op) {
|
|
15
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
17
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
+
switch (op[0]) {
|
|
20
|
+
case 0: case 1: t = op; break;
|
|
21
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
+
default:
|
|
25
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
+
if (t[2]) _.ops.pop();
|
|
30
|
+
_.trys.pop(); continue;
|
|
31
|
+
}
|
|
32
|
+
op = body.call(thisArg, _);
|
|
33
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
+
}
|
|
36
|
+
};
|
|
1
37
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
38
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
39
|
if (ar || !(i in from)) {
|
|
@@ -12,7 +48,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
|
12
48
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
13
49
|
import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
14
50
|
import axios from 'axios';
|
|
15
|
-
import {
|
|
51
|
+
import { ethers } from 'ethers';
|
|
52
|
+
import { useSearchParams, useNavigate } from 'react-router-dom';
|
|
16
53
|
import getTimePeriods from '../../utils/getTimePeriods';
|
|
17
54
|
import { defaultTheme } from '../../theme';
|
|
18
55
|
import { BigNumber } from 'bignumber.js';
|
|
@@ -24,10 +61,51 @@ import { useTopTags } from '../../hooks/useTopThreeTags';
|
|
|
24
61
|
import useChainFilterOption from '../../components/BondMenu/useChainFilterOption';
|
|
25
62
|
var Bonds = function (_a) {
|
|
26
63
|
var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
|
|
64
|
+
//const { account, isActive } = useWeb3React();
|
|
65
|
+
var _b = useSearchParams(), searchParams = _b[0], setSearchParams = _b[1];
|
|
27
66
|
var navigate = useNavigate();
|
|
67
|
+
var USDT_ABI = [
|
|
68
|
+
// The ERC-20 approve function ABI
|
|
69
|
+
'function approve(address spender, uint256 amount) public returns (bool)',
|
|
70
|
+
];
|
|
71
|
+
var USDT_ADDRESS = '0xdAC17F958D2ee523a2206206994597C13D831ec7'; // USDT contract address on Ethereum mainnet
|
|
72
|
+
var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
73
|
+
var provider, signer, usdtContract, tx, error_1;
|
|
74
|
+
return __generator(this, function (_a) {
|
|
75
|
+
switch (_a.label) {
|
|
76
|
+
case 0:
|
|
77
|
+
if (!window.ethereum) {
|
|
78
|
+
console.error('No Ethereum provider found');
|
|
79
|
+
alert('No Ethereum provider found');
|
|
80
|
+
return [2 /*return*/];
|
|
81
|
+
}
|
|
82
|
+
provider = new ethers.providers.Web3Provider(window.ethereum);
|
|
83
|
+
signer = provider.getSigner();
|
|
84
|
+
usdtContract = new ethers.Contract(USDT_ADDRESS, USDT_ABI, signer);
|
|
85
|
+
_a.label = 1;
|
|
86
|
+
case 1:
|
|
87
|
+
_a.trys.push([1, 4, , 5]);
|
|
88
|
+
return [4 /*yield*/, usdtContract.approve(account, // Replace with the actual spender address
|
|
89
|
+
ethers.utils.parseUnits('1000.0', 6))];
|
|
90
|
+
case 2:
|
|
91
|
+
tx = _a.sent();
|
|
92
|
+
return [4 /*yield*/, tx.wait()];
|
|
93
|
+
case 3:
|
|
94
|
+
_a.sent();
|
|
95
|
+
alert('Approval Successful');
|
|
96
|
+
return [3 /*break*/, 5];
|
|
97
|
+
case 4:
|
|
98
|
+
error_1 = _a.sent();
|
|
99
|
+
console.error('Approval error', error_1);
|
|
100
|
+
alert('Approval Failed');
|
|
101
|
+
return [3 /*break*/, 5];
|
|
102
|
+
case 5: return [2 /*return*/];
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}); };
|
|
28
106
|
// Fetch data
|
|
29
|
-
var
|
|
30
|
-
var
|
|
107
|
+
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
108
|
+
var _d = useState([]), hotBonds = _d[0], setHotBonds = _d[1];
|
|
31
109
|
var isSoldOut = useCallback(function (bond) {
|
|
32
110
|
var _a, _b;
|
|
33
111
|
var thresholdToHide = new BigNumber(100).div((_a = bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : 0);
|
|
@@ -43,7 +121,7 @@ var Bonds = function (_a) {
|
|
|
43
121
|
}, []);
|
|
44
122
|
useEffect(function () {
|
|
45
123
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
46
|
-
var bonds = response.data.bonds;
|
|
124
|
+
var bonds = response.data.bonds.filter(function (bond) { return !isSoldOut(bond); });
|
|
47
125
|
setBondData(bonds);
|
|
48
126
|
});
|
|
49
127
|
}, []);
|
|
@@ -54,7 +132,7 @@ var Bonds = function (_a) {
|
|
|
54
132
|
});
|
|
55
133
|
setHotBonds(hotBondAddresses);
|
|
56
134
|
});
|
|
57
|
-
}, [
|
|
135
|
+
}, []);
|
|
58
136
|
// Sort functions
|
|
59
137
|
var sortedHotBonds = bondData.sort(function (a, b) {
|
|
60
138
|
var _a, _b;
|
|
@@ -70,8 +148,8 @@ var Bonds = function (_a) {
|
|
|
70
148
|
return b.discount - a.discount;
|
|
71
149
|
}
|
|
72
150
|
});
|
|
73
|
-
var
|
|
74
|
-
var
|
|
151
|
+
var _e = useState(null), sortConfig = _e[0], setSortConfig = _e[1];
|
|
152
|
+
var _f = useState(sortedHotBonds), sortedBonds = _f[0], setSortedBonds = _f[1];
|
|
75
153
|
var handleSort = function (key) {
|
|
76
154
|
var direction = 'asc';
|
|
77
155
|
if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'asc') {
|
|
@@ -113,8 +191,8 @@ var Bonds = function (_a) {
|
|
|
113
191
|
setSortedBonds(sorted);
|
|
114
192
|
}, [sortConfig, bondData]);
|
|
115
193
|
// Modal
|
|
116
|
-
var
|
|
117
|
-
var
|
|
194
|
+
var _g = useState(false), isModalOpen = _g[0], setIsModalOpen = _g[1];
|
|
195
|
+
var _h = useState(null), selectedBond = _h[0], setSelectedBond = _h[1];
|
|
118
196
|
var rowClick = function (bond) {
|
|
119
197
|
setSelectedBond(bond);
|
|
120
198
|
setIsModalOpen(true);
|
|
@@ -137,11 +215,11 @@ var Bonds = function (_a) {
|
|
|
137
215
|
return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
|
|
138
216
|
};
|
|
139
217
|
// Search logic
|
|
140
|
-
var
|
|
218
|
+
var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
|
|
141
219
|
var topTags = useTopTags(sortedBonds);
|
|
142
220
|
var filterOptions = __spreadArray(__spreadArray(['ALL'], topTags, true), ['SOLD OUT'], false);
|
|
143
|
-
var
|
|
144
|
-
var
|
|
221
|
+
var _k = useState(filterOptions[0]), filterOption = _k[0], setFilterOption = _k[1];
|
|
222
|
+
var _l = useChainFilterOption(), chainFilterOption = _l.data, setChainFilterOption = _l.setChainFilterOption;
|
|
145
223
|
var billstoRender = useMemo(function () {
|
|
146
224
|
var billsToReturn = sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : [];
|
|
147
225
|
if (inputValue) {
|
|
@@ -156,12 +234,6 @@ var Bonds = function (_a) {
|
|
|
156
234
|
if (!(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes('All Chains'))) {
|
|
157
235
|
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) { return chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes(bill.chainId.toString()); });
|
|
158
236
|
}
|
|
159
|
-
if (filterOption !== 'SOLD OUT') {
|
|
160
|
-
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bond) { return !isSoldOut(bond); });
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bond) { return bond.soldOut; });
|
|
164
|
-
}
|
|
165
237
|
// if (filterOption === 'FAVORITES') {
|
|
166
238
|
// billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
|
|
167
239
|
// }
|
|
@@ -175,7 +247,7 @@ var Bonds = function (_a) {
|
|
|
175
247
|
setInputValue(event.target.value);
|
|
176
248
|
};
|
|
177
249
|
// Page render logic
|
|
178
|
-
var
|
|
250
|
+
var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
|
|
179
251
|
useEffect(function () {
|
|
180
252
|
if (billstoRender.length > 0) {
|
|
181
253
|
setBondsRendered(true);
|
|
@@ -47,6 +47,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
|
47
47
|
/** @jsxImportSource theme-ui */
|
|
48
48
|
import { useEffect, useState } from 'react';
|
|
49
49
|
import { Flex, ThemeUIProvider } from 'theme-ui';
|
|
50
|
+
import { useWeb3React } from '@web3-react/core';
|
|
50
51
|
import getTimePeriods from '../../utils/getTimePeriods';
|
|
51
52
|
import { defaultTheme } from '../../theme';
|
|
52
53
|
import '../../scss/YourBonds.scss';
|
|
@@ -64,55 +65,43 @@ import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
|
|
|
64
65
|
import { Input } from '../../components/uikit-sdk/Input';
|
|
65
66
|
import { YourBondsModal } from "../../index";
|
|
66
67
|
import BOND_ABI from '../../config/abi/bond.json';
|
|
67
|
-
import {
|
|
68
|
+
import { useWriteContract } from 'wagmi';
|
|
68
69
|
var YourBonds = function (_a) {
|
|
69
|
-
var account = _a.account
|
|
70
|
-
var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract
|
|
71
|
-
var _c = useWaitForTransactionReceipt({
|
|
72
|
-
confirmations: 4,
|
|
73
|
-
chainId: accountChainId,
|
|
74
|
-
hash: hash,
|
|
75
|
-
}), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
|
|
70
|
+
var account = _a.account;
|
|
71
|
+
var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract;
|
|
76
72
|
var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
77
|
-
var address
|
|
73
|
+
var address;
|
|
78
74
|
return __generator(this, function (_a) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
setClaimTx(tx);
|
|
95
|
-
}
|
|
96
|
-
return [3 /*break*/, 4];
|
|
97
|
-
case 3:
|
|
98
|
-
error_1 = _a.sent();
|
|
99
|
-
console.error('Approval failed:', error_1);
|
|
100
|
-
return [3 /*break*/, 4];
|
|
101
|
-
case 4: return [2 /*return*/];
|
|
75
|
+
address = billAddress;
|
|
76
|
+
try {
|
|
77
|
+
// @ts-ignore
|
|
78
|
+
writeContract({
|
|
79
|
+
address: address,
|
|
80
|
+
abi: BOND_ABI,
|
|
81
|
+
functionName: 'redeem',
|
|
82
|
+
args: [billId],
|
|
83
|
+
});
|
|
84
|
+
if (hash) {
|
|
85
|
+
setClaimTx(hash);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
catch (error) {
|
|
89
|
+
console.error('Approval failed:', error);
|
|
102
90
|
}
|
|
91
|
+
return [2 /*return*/];
|
|
103
92
|
});
|
|
104
93
|
}); };
|
|
105
|
-
var
|
|
106
|
-
var
|
|
94
|
+
var _c = useState(null), claimTx = _c[0], setClaimTx = _c[1];
|
|
95
|
+
var _d = useState(null), toastMessage = _d[0], setToastMessage = _d[1];
|
|
107
96
|
useEffect(function () {
|
|
108
|
-
if (
|
|
109
|
-
setToastMessage("Transaction
|
|
110
|
-
setTimeout(function () { return setToastMessage(null); },
|
|
97
|
+
if (claimTx) {
|
|
98
|
+
setToastMessage("Transaction complete: ".concat(claimTx));
|
|
99
|
+
setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
|
|
111
100
|
}
|
|
112
|
-
}, [claimTx
|
|
101
|
+
}, [claimTx]);
|
|
113
102
|
// Fetch data
|
|
114
|
-
var
|
|
115
|
-
var
|
|
103
|
+
var _e = useState([]), bondData = _e[0], setBondData = _e[1];
|
|
104
|
+
var _f = useState([]), mappedUserBills = _f[0], setMappedUserBills = _f[1];
|
|
116
105
|
useEffect(function () {
|
|
117
106
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
118
107
|
var bonds = response.data.bonds;
|
|
@@ -121,7 +110,7 @@ var YourBonds = function (_a) {
|
|
|
121
110
|
}, []);
|
|
122
111
|
useEffect(function () {
|
|
123
112
|
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
124
|
-
var results, mappedBills,
|
|
113
|
+
var results, mappedBills, error_1;
|
|
125
114
|
return __generator(this, function (_a) {
|
|
126
115
|
switch (_a.label) {
|
|
127
116
|
case 0:
|
|
@@ -137,8 +126,8 @@ var YourBonds = function (_a) {
|
|
|
137
126
|
console.log('User owned bills data:', mappedBills);
|
|
138
127
|
return [3 /*break*/, 4];
|
|
139
128
|
case 3:
|
|
140
|
-
|
|
141
|
-
console.error('Error fetching user owned bills data:',
|
|
129
|
+
error_1 = _a.sent();
|
|
130
|
+
console.error('Error fetching user owned bills data:', error_1);
|
|
142
131
|
return [3 /*break*/, 4];
|
|
143
132
|
case 4: return [2 /*return*/];
|
|
144
133
|
}
|
|
@@ -146,8 +135,8 @@ var YourBonds = function (_a) {
|
|
|
146
135
|
}); };
|
|
147
136
|
fetchData();
|
|
148
137
|
}, [account, bondData, claimTx]);
|
|
149
|
-
var
|
|
150
|
-
var
|
|
138
|
+
var _g = useState(null), sortConfig = _g[0], setSortConfig = _g[1];
|
|
139
|
+
var _h = useState(mappedUserBills), sortedBonds = _h[0], setSortedBonds = _h[1];
|
|
151
140
|
var handleSort = function (key) {
|
|
152
141
|
var direction = 'asc';
|
|
153
142
|
if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'asc') {
|
|
@@ -202,7 +191,7 @@ var YourBonds = function (_a) {
|
|
|
202
191
|
setSortedBonds(sorted);
|
|
203
192
|
}, [sortConfig, mappedUserBills]);
|
|
204
193
|
// Functions for calculations
|
|
205
|
-
var chainId =
|
|
194
|
+
var chainId = useWeb3React().chainId;
|
|
206
195
|
var currentTime = useCurrentTime() / 1000;
|
|
207
196
|
var vestingTimeRemaining = function (userBill) {
|
|
208
197
|
return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);
|
|
@@ -223,16 +212,16 @@ var YourBonds = function (_a) {
|
|
|
223
212
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
224
213
|
};
|
|
225
214
|
// Modal
|
|
226
|
-
var
|
|
227
|
-
var
|
|
215
|
+
var _j = useState(false), isModalOpen = _j[0], setIsModalOpen = _j[1];
|
|
216
|
+
var _k = useState(undefined), selectedBill = _k[0], setSelectedBill = _k[1];
|
|
228
217
|
var rowClick = function (bill) {
|
|
229
218
|
console.log(bill);
|
|
230
219
|
setSelectedBill(bill);
|
|
231
220
|
setIsModalOpen(true);
|
|
232
221
|
};
|
|
233
222
|
// Search logic
|
|
234
|
-
var
|
|
235
|
-
var
|
|
223
|
+
var _l = useState(''), inputValue = _l[0], setInputValue = _l[1];
|
|
224
|
+
var _m = useState(sortedBonds), filteredBonds = _m[0], setFilteredBonds = _m[1];
|
|
236
225
|
useEffect(function () {
|
|
237
226
|
if (inputValue === '') {
|
|
238
227
|
setFilteredBonds(sortedBonds);
|
|
@@ -247,7 +236,7 @@ var YourBonds = function (_a) {
|
|
|
247
236
|
setInputValue(event.target.value);
|
|
248
237
|
};
|
|
249
238
|
// Page render logic
|
|
250
|
-
var
|
|
239
|
+
var _o = useState(false), bondsRendered = _o[0], setBondsRendered = _o[1];
|
|
251
240
|
useEffect(function () {
|
|
252
241
|
if (filteredBonds.length > 0) {
|
|
253
242
|
setBondsRendered(true);
|
|
@@ -259,7 +248,7 @@ var YourBonds = function (_a) {
|
|
|
259
248
|
return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isModalOpen &&
|
|
260
249
|
_jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), bondsRendered && (_jsxs(Flex, { className: "container table-container", children: [_jsxs(Flex, { className: "container header-container", children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column header-claimable", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "CLAIMABLE" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-pending", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "PENDING" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-terms", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "TERMS" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column header-claimall" })] })] }), filteredBonds.map(function (bill) {
|
|
261
250
|
var _a, _b;
|
|
262
|
-
return (_jsxs(Flex, { className: "container bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(
|
|
251
|
+
return (_jsxs(Flex, { className: "container bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((claimable(bill) * ((_a = parseFloat(earnTokenPrice(bill.bond))) !== null && _a !== void 0 ? _a : 0)).toFixed(2), ")") })] }), _jsxs(Flex, { className: "column column-pending", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, { sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' }, children: "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")") })] }), _jsx(Flex, { className: "column column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "column column-claimall", children: _jsx(Button, { disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
|
|
263
252
|
event.stopPropagation();
|
|
264
253
|
// Add your claim logic here
|
|
265
254
|
handleClaim(bill.id, bill.address);
|
package/dist/scss/BondModal.scss
CHANGED
|
@@ -405,29 +405,4 @@
|
|
|
405
405
|
Button {
|
|
406
406
|
width: 375px;
|
|
407
407
|
}
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
.toast {
|
|
411
|
-
position: fixed;
|
|
412
|
-
bottom: 50px;
|
|
413
|
-
right: 20px;
|
|
414
|
-
background-color: var(--theme-ui-colors-white2);
|
|
415
|
-
color: white;
|
|
416
|
-
font-size: 24px;
|
|
417
|
-
padding: 10px 20px;
|
|
418
|
-
border-radius: 5px;
|
|
419
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
420
|
-
z-index: 9999;
|
|
421
|
-
animation: fadein 0.5s, fadeout 0.5s 4.5s;
|
|
422
|
-
cursor: pointer;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
@keyframes fadein {
|
|
426
|
-
from { bottom: 0; opacity: 0; }
|
|
427
|
-
to { bottom: 50px; opacity: 1; }
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
@keyframes fadeout {
|
|
431
|
-
from { bottom: 50px; opacity: 1; }
|
|
432
|
-
to { bottom: 0; opacity: 0; }
|
|
433
408
|
}
|
package/dist/scss/YourBonds.scss
CHANGED
|
@@ -132,25 +132,23 @@
|
|
|
132
132
|
|
|
133
133
|
.toast {
|
|
134
134
|
position: fixed;
|
|
135
|
-
bottom:
|
|
135
|
+
bottom: 20px;
|
|
136
136
|
right: 20px;
|
|
137
|
-
background-color:
|
|
138
|
-
color:
|
|
139
|
-
font-size: 24px;
|
|
137
|
+
background-color: #333;
|
|
138
|
+
color: #fff;
|
|
140
139
|
padding: 10px 20px;
|
|
141
140
|
border-radius: 5px;
|
|
142
141
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
143
|
-
z-index:
|
|
142
|
+
z-index: 1000;
|
|
144
143
|
animation: fadein 0.5s, fadeout 0.5s 4.5s;
|
|
145
|
-
cursor: pointer;
|
|
146
144
|
}
|
|
147
145
|
|
|
148
146
|
@keyframes fadein {
|
|
149
147
|
from { bottom: 0; opacity: 0; }
|
|
150
|
-
to { bottom:
|
|
148
|
+
to { bottom: 20px; opacity: 1; }
|
|
151
149
|
}
|
|
152
150
|
|
|
153
151
|
@keyframes fadeout {
|
|
154
|
-
from { bottom:
|
|
152
|
+
from { bottom: 20px; opacity: 1; }
|
|
155
153
|
to { bottom: 0; opacity: 0; }
|
|
156
154
|
}
|
|
@@ -263,29 +263,4 @@
|
|
|
263
263
|
Button {
|
|
264
264
|
width: 125px;
|
|
265
265
|
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.toast {
|
|
269
|
-
position: fixed;
|
|
270
|
-
bottom: 50px;
|
|
271
|
-
right: 20px;
|
|
272
|
-
background-color: var(--theme-ui-colors-white2);
|
|
273
|
-
color: white;
|
|
274
|
-
font-size: 24px;
|
|
275
|
-
padding: 10px 20px;
|
|
276
|
-
border-radius: 5px;
|
|
277
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
278
|
-
z-index: 9999;
|
|
279
|
-
animation: fadein 0.5s, fadeout 0.5s 4.5s;
|
|
280
|
-
cursor: pointer;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
@keyframes fadein {
|
|
284
|
-
from { bottom: 0; opacity: 0; }
|
|
285
|
-
to { bottom: 50px; opacity: 1; }
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
@keyframes fadeout {
|
|
289
|
-
from { bottom: 50px; opacity: 1; }
|
|
290
|
-
to { bottom: 0; opacity: 0; }
|
|
291
266
|
}
|