@ape.swap/bonds-sdk 1.0.621 → 1.0.623
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.
|
@@ -54,19 +54,21 @@ 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
63
|
var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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];
|
|
70
72
|
//This is a temp solution, but we will force approval each time, and then once set we will set status here and allow
|
|
71
73
|
//user to buy
|
|
72
74
|
//Check with Fede if this needs to be temp, if we force approval everytime, isn't this fine?
|
|
@@ -81,16 +83,17 @@ var BondModal = function (_a) {
|
|
|
81
83
|
case 1:
|
|
82
84
|
_a.trys.push([1, 3, , 4]);
|
|
83
85
|
console.log('HANDLEBUY CLICKED');
|
|
84
|
-
maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100);
|
|
86
|
+
maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100).toFixed(0);
|
|
85
87
|
amount = convertToTokenValue(inputValue, decimals);
|
|
86
88
|
console.log('BillAddress:', billAddress);
|
|
87
89
|
console.log('Amount:', amount);
|
|
88
90
|
console.log('MaxPrice:', maxPrice);
|
|
91
|
+
console.log('Price:', bondData[0].trueBillPrice);
|
|
89
92
|
return [4 /*yield*/, writeContractAsync({
|
|
90
93
|
address: billAddress,
|
|
91
94
|
abi: BOND_ABI,
|
|
92
95
|
functionName: 'deposit',
|
|
93
|
-
args: [amount, maxPrice
|
|
96
|
+
args: [amount, maxPrice, account],
|
|
94
97
|
})];
|
|
95
98
|
case 2:
|
|
96
99
|
tx = _a.sent();
|
|
@@ -109,7 +112,7 @@ var BondModal = function (_a) {
|
|
|
109
112
|
}
|
|
110
113
|
});
|
|
111
114
|
}); };
|
|
112
|
-
var
|
|
115
|
+
var _d = useState(null), buyTx = _d[0], setBuyTx = _d[1];
|
|
113
116
|
//You approve the token, not the contract (this code will have to be updated for zap)
|
|
114
117
|
var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
115
118
|
var tokenAddress, decimals, amount, tx, error_2;
|
|
@@ -131,14 +134,20 @@ var BondModal = function (_a) {
|
|
|
131
134
|
})];
|
|
132
135
|
case 2:
|
|
133
136
|
tx = _a.sent();
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
+
// const receipt = useWaitForTransactionReceipt({
|
|
138
|
+
// confirmations: 4,
|
|
139
|
+
// chainId: accountChainId,
|
|
140
|
+
// hash: tx,
|
|
141
|
+
// pollingInterval: 1_000
|
|
142
|
+
// });
|
|
143
|
+
// console.log('Receipt',receipt);
|
|
144
|
+
// if(receipt.isSuccess) {
|
|
145
|
+
// setReceiptTx(receipt.data.transactionHash);
|
|
146
|
+
// console.log('Receipt:', receipt);
|
|
147
|
+
// }
|
|
137
148
|
if (tx) {
|
|
138
149
|
setApproveTx(tx);
|
|
139
|
-
console.log('
|
|
140
|
-
console.log('isConfirming:', isConfirming);
|
|
141
|
-
console.log('isConfirmed', isConfirmed);
|
|
150
|
+
console.log('setApproveTx:', tx);
|
|
142
151
|
}
|
|
143
152
|
return [3 /*break*/, 4];
|
|
144
153
|
case 3:
|
|
@@ -150,16 +159,10 @@ var BondModal = function (_a) {
|
|
|
150
159
|
}
|
|
151
160
|
});
|
|
152
161
|
}); };
|
|
162
|
+
var _e = useState(null), receiptTx = _e[0], setReceiptTx = _e[1];
|
|
153
163
|
var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
|
|
154
|
-
var _g = useState(null),
|
|
155
|
-
|
|
156
|
-
if (isConfirmed) {
|
|
157
|
-
setToastMessage("Transaction complete.");
|
|
158
|
-
setTimeout(function () { return setToastMessage(null); }, 10000);
|
|
159
|
-
}
|
|
160
|
-
}, [approveTx, buyTx, isConfirmed]);
|
|
161
|
-
var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
|
|
162
|
-
var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
|
|
164
|
+
var _g = useState(null), tokenBalance = _g[0], setTokenBalance = _g[1];
|
|
165
|
+
var _h = useState(null), tokenDecimals = _h[0], setTokenDecimals = _h[1];
|
|
163
166
|
useEffect(function () {
|
|
164
167
|
if (isActive && account && bondData.length > 0) {
|
|
165
168
|
getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (_a) {
|
|
@@ -232,13 +235,13 @@ var BondModal = function (_a) {
|
|
|
232
235
|
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));
|
|
233
236
|
return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
|
|
234
237
|
};
|
|
235
|
-
var
|
|
238
|
+
var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
|
|
236
239
|
var handleInputChange = function (event) {
|
|
237
240
|
setInputValue(event.target.value);
|
|
238
241
|
};
|
|
239
242
|
return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: bondData.map(function (bond) {
|
|
240
243
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
241
|
-
return (_jsx(React.Fragment, { children: _jsx(Flex, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [
|
|
244
|
+
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) {
|
|
242
245
|
if (v.currentTarget.value.includes(',')) {
|
|
243
246
|
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
244
247
|
}
|
|
@@ -252,10 +255,10 @@ var BondModal = function (_a) {
|
|
|
252
255
|
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
253
256
|
? v.currentTarget.value
|
|
254
257
|
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
255
|
-
} }) }), _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
|
|
256
|
-
|
|
258
|
+
} }) }), _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 ?
|
|
259
|
+
_jsxs(Button, { disabled: isPending, onClick: handleBuy, children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })
|
|
257
260
|
:
|
|
258
|
-
_jsx(Button, { disabled: isPending
|
|
261
|
+
_jsx(Button, { disabled: isPending, onClick: handleApprove, children: "Approve" }) })] })] })] }) }) }, bond.billAddress));
|
|
259
262
|
}) }));
|
|
260
263
|
};
|
|
261
264
|
export default BondModal;
|
|
@@ -51,7 +51,7 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
|
|
|
51
51
|
import { formatNumberSI } from '../../../utils/formatNumber';
|
|
52
52
|
import { StyledHeadingText, TraitsContentContainer } from './styles';
|
|
53
53
|
import '../../../scss/YourBondsModal.scss';
|
|
54
|
-
import {
|
|
54
|
+
import { useWriteContract } from 'wagmi';
|
|
55
55
|
import BOND_ABI from '../../../config/abi/bond.json';
|
|
56
56
|
var YourBondsModal = function (_a) {
|
|
57
57
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -59,49 +59,40 @@ var YourBondsModal = function (_a) {
|
|
|
59
59
|
if (!isOpen)
|
|
60
60
|
return null;
|
|
61
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
|
|
63
|
-
var _u = useWaitForTransactionReceipt({
|
|
64
|
-
confirmations: 4,
|
|
65
|
-
chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
|
|
66
|
-
hash: hash,
|
|
67
|
-
}), isConfirming = _u.isLoading, isConfirmed = _u.isSuccess;
|
|
62
|
+
var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract;
|
|
68
63
|
var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
|
|
69
|
-
var address
|
|
64
|
+
var address;
|
|
70
65
|
return __generator(this, function (_a) {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
case 2:
|
|
84
|
-
tx = _a.sent();
|
|
85
|
-
if (tx) {
|
|
86
|
-
setClaimTx(tx);
|
|
87
|
-
}
|
|
88
|
-
return [3 /*break*/, 4];
|
|
89
|
-
case 3:
|
|
90
|
-
error_1 = _a.sent();
|
|
91
|
-
console.error('Approval failed:', error_1);
|
|
92
|
-
return [3 /*break*/, 4];
|
|
93
|
-
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
|
+
}
|
|
94
78
|
}
|
|
79
|
+
catch (error) {
|
|
80
|
+
console.error('Approval failed:', error);
|
|
81
|
+
}
|
|
82
|
+
return [2 /*return*/];
|
|
95
83
|
});
|
|
96
84
|
}); };
|
|
97
|
-
var
|
|
98
|
-
var
|
|
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
88
|
if (claimTx) {
|
|
101
|
-
setToastMessage("Transaction complete.
|
|
102
|
-
setTimeout(function () { return setToastMessage(null); },
|
|
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',
|
package/dist/scss/BondModal.scss
CHANGED
|
@@ -405,28 +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: var(--theme-ui-colors-success);
|
|
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
|
-
}
|
|
423
|
-
|
|
424
|
-
@keyframes fadein {
|
|
425
|
-
from { bottom: 0; opacity: 0; }
|
|
426
|
-
to { bottom: 50px; opacity: 1; }
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
@keyframes fadeout {
|
|
430
|
-
from { bottom: 50px; opacity: 1; }
|
|
431
|
-
to { bottom: 0; opacity: 0; }
|
|
432
408
|
}
|
|
@@ -263,28 +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: var(--theme-ui-colors-success);
|
|
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
|
-
}
|
|
281
|
-
|
|
282
|
-
@keyframes fadein {
|
|
283
|
-
from { bottom: 0; opacity: 0; }
|
|
284
|
-
to { bottom: 50px; opacity: 1; }
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
@keyframes fadeout {
|
|
288
|
-
from { bottom: 50px; opacity: 1; }
|
|
289
|
-
to { bottom: 0; opacity: 0; }
|
|
290
266
|
}
|