@ape.swap/bonds-sdk 1.0.306 → 1.0.308
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/YourBonds/YourBonds.js +1 -1
- package/dist/components/YourBondsModal/YourBondsModal.d.ts +9 -0
- package/dist/components/YourBondsModal/YourBondsModal.js +219 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/scss/YourBondsModal.scss +328 -0
- package/package.json +1 -1
- /package/dist/scss/{bonds.scss → Bonds.scss} +0 -0
|
@@ -168,7 +168,7 @@ var YourBonds = function (_a) {
|
|
|
168
168
|
var rowClick = function (bond) {
|
|
169
169
|
setSelectedBond(bond);
|
|
170
170
|
setIsModalOpen(true);
|
|
171
|
-
navigate("/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId), { replace: true });
|
|
171
|
+
navigate("/YourBonds/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId), { replace: true });
|
|
172
172
|
};
|
|
173
173
|
// const usePollUserBills = () => {
|
|
174
174
|
// const { slowRefresh } = useRefresh()
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** @jsxImportSource theme-ui */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import '../../scss/BondModal.scss';
|
|
4
|
+
declare const YourBondsModal: ({ isOpen, onClose, bondAddress }: {
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
bondAddress: string | null;
|
|
8
|
+
}) => React.JSX.Element | null;
|
|
9
|
+
export default YourBondsModal;
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
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;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
49
|
+
/** @jsxImportSource theme-ui */
|
|
50
|
+
import React, { useEffect, useState } from 'react';
|
|
51
|
+
import { Flex, Input, ThemeUIProvider } from 'theme-ui';
|
|
52
|
+
import { useWeb3React } from '@web3-react/core';
|
|
53
|
+
import { defaultTheme } from '../../theme';
|
|
54
|
+
import '../../scss/BondModal.scss';
|
|
55
|
+
import getTimePeriods from '../../utils/getTimePeriods';
|
|
56
|
+
import axios from 'axios';
|
|
57
|
+
import { BigNumber } from 'bignumber.js';
|
|
58
|
+
import { getFirstNonZeroDigits } from '../../utils/roundNumber';
|
|
59
|
+
import { isNumber } from '../../utils/numbers';
|
|
60
|
+
import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
|
|
61
|
+
import { TooltipText } from '../../enum/tooltips';
|
|
62
|
+
import { formatNumberSI } from '../../utils/formatNumber';
|
|
63
|
+
import { ethers } from 'ethers';
|
|
64
|
+
import { adjustDecimals } from "../../utils/convertToTokenValue";
|
|
65
|
+
import { BondAbi } from '../../enum/abis';
|
|
66
|
+
import TokenImage from '../uikit-sdk/TokenImage';
|
|
67
|
+
var YourBondsModal = function (_a) {
|
|
68
|
+
var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
69
|
+
if (!isOpen)
|
|
70
|
+
return null;
|
|
71
|
+
var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
|
|
72
|
+
var vestingTime = function (vestingTerm) { return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true); };
|
|
73
|
+
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
74
|
+
useEffect(function () {
|
|
75
|
+
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
76
|
+
var bond = response.data.bonds.filter(function (x) {
|
|
77
|
+
return x.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase());
|
|
78
|
+
});
|
|
79
|
+
setBondData(bond);
|
|
80
|
+
});
|
|
81
|
+
}, [bondAddress]);
|
|
82
|
+
var getDiscountColor = function (discount) {
|
|
83
|
+
return discount < 0 ? 'discount-negative' : 'discount-positive';
|
|
84
|
+
};
|
|
85
|
+
var discountEarnTokenPrice = function (bond) {
|
|
86
|
+
var _a, _b;
|
|
87
|
+
var earnTokenPrice = parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
|
|
88
|
+
return getFirstNonZeroDigits(earnTokenPrice - earnTokenPrice * (((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) / 100));
|
|
89
|
+
};
|
|
90
|
+
var earnTokenPrice = function (bond) {
|
|
91
|
+
var _a;
|
|
92
|
+
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
93
|
+
};
|
|
94
|
+
var maxBuy = function (bond) {
|
|
95
|
+
var _a, _b, _c, _d;
|
|
96
|
+
var available = new BigNumber((_a = bond === null || bond === void 0 ? void 0 : bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
|
|
97
|
+
var threshold = 5;
|
|
98
|
+
var thresholdToShow = new BigNumber(threshold).div((_b = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
|
|
99
|
+
var safeAvailable = available.minus(thresholdToShow);
|
|
100
|
+
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));
|
|
101
|
+
return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
|
|
102
|
+
};
|
|
103
|
+
var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
|
|
104
|
+
var handleInputChange = function (event) {
|
|
105
|
+
setInputValue(event.target.value);
|
|
106
|
+
};
|
|
107
|
+
// const [selectedBond, setSelectedBond] = useState<BondsDataResponse | null>(null);
|
|
108
|
+
// const navigate = useNavigate();
|
|
109
|
+
// const projectInfo = (bond: BondsDataResponse) => {
|
|
110
|
+
// setSelectedBond(bond);
|
|
111
|
+
// navigate(`/bondsingle/${bond.billAddress}`);
|
|
112
|
+
// };
|
|
113
|
+
function formatNumber(input) {
|
|
114
|
+
var number = new BigNumber(input);
|
|
115
|
+
if (number.isNaN())
|
|
116
|
+
return '0';
|
|
117
|
+
return number.gt(1000000)
|
|
118
|
+
? formatNumberSI(number.toNumber())
|
|
119
|
+
: number.gt(1000)
|
|
120
|
+
? number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 })
|
|
121
|
+
: number.gt(0.01)
|
|
122
|
+
? parseFloat(number.toFixed(2)).toLocaleString(undefined)
|
|
123
|
+
: parseFloat(number.toPrecision(5)).toLocaleString(undefined);
|
|
124
|
+
}
|
|
125
|
+
function formatUSDNumber(input) {
|
|
126
|
+
var number = new BigNumber(input);
|
|
127
|
+
if (number.isNaN())
|
|
128
|
+
return '0';
|
|
129
|
+
// If the number is greater than 0 but less than 0.01
|
|
130
|
+
if (number.gt(0) && number.lt(0.01)) {
|
|
131
|
+
return '< 0.01';
|
|
132
|
+
}
|
|
133
|
+
// If the number is greater than 1k, round to no decimals.
|
|
134
|
+
if (number.gt(1000)) {
|
|
135
|
+
return number.toNumber().toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
136
|
+
}
|
|
137
|
+
// Note: Between 1k and 0.01 show 2 decimals
|
|
138
|
+
return parseFloat(number.toFixed(2)).toLocaleString(undefined);
|
|
139
|
+
}
|
|
140
|
+
var youSpend = formatNumber(inputValue);
|
|
141
|
+
var youSpendUSD = function (bond) {
|
|
142
|
+
return (parseFloat(inputValue) * parseFloat(bond.principalTokenPrice)).toString();
|
|
143
|
+
};
|
|
144
|
+
var youGet = function (bond) {
|
|
145
|
+
var _a;
|
|
146
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
147
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
148
|
+
return formatNumber(billValue.toString());
|
|
149
|
+
};
|
|
150
|
+
var youGetUSD = function (bond) {
|
|
151
|
+
var _a;
|
|
152
|
+
var bigValue = new BigNumber(inputValue).times(new BigNumber(10).pow(18));
|
|
153
|
+
var billValue = bigValue.div(new BigNumber((_a = bond.trueBillPrice) !== null && _a !== void 0 ? _a : 0));
|
|
154
|
+
return (billValue.toNumber() * parseFloat(bond.payoutTokenPrice)).toString();
|
|
155
|
+
};
|
|
156
|
+
var premium = function (bond) {
|
|
157
|
+
var premiumUSD = parseFloat(youGetUSD(bond)) - parseFloat(youSpendUSD(bond));
|
|
158
|
+
return formatUSDNumber(premiumUSD.toString());
|
|
159
|
+
};
|
|
160
|
+
var getPremiumColor = function (bond) {
|
|
161
|
+
var getPremium = premium(bond);
|
|
162
|
+
return parseFloat(getPremium) < 0 ? 'premium-negative' : 'premium-positive';
|
|
163
|
+
};
|
|
164
|
+
var handleBuy = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
165
|
+
var provider, signer, bondContract, maxPrice, amount, tx, error_1;
|
|
166
|
+
return __generator(this, function (_a) {
|
|
167
|
+
switch (_a.label) {
|
|
168
|
+
case 0:
|
|
169
|
+
console.log('handle buy clicked');
|
|
170
|
+
if (!window.ethereum) {
|
|
171
|
+
console.error('No Ethereum provider found');
|
|
172
|
+
alert('No Ethereum provider found');
|
|
173
|
+
return [2 /*return*/];
|
|
174
|
+
}
|
|
175
|
+
provider = new ethers.providers.Web3Provider(window.ethereum);
|
|
176
|
+
signer = provider.getSigner();
|
|
177
|
+
bondContract = new ethers.Contract(bondAddress !== null && bondAddress !== void 0 ? bondAddress : "", BondAbi, signer);
|
|
178
|
+
_a.label = 1;
|
|
179
|
+
case 1:
|
|
180
|
+
_a.trys.push([1, 4, , 5]);
|
|
181
|
+
maxPrice = new BigNumber(bondData[0].trueBillPrice).times(102).div(100);
|
|
182
|
+
amount = adjustDecimals(inputValue);
|
|
183
|
+
return [4 /*yield*/, bondContract.deposit(amount, maxPrice, account)];
|
|
184
|
+
case 2:
|
|
185
|
+
tx = _a.sent();
|
|
186
|
+
return [4 /*yield*/, tx.wait()];
|
|
187
|
+
case 3:
|
|
188
|
+
_a.sent();
|
|
189
|
+
alert('Buy Successful');
|
|
190
|
+
return [3 /*break*/, 5];
|
|
191
|
+
case 4:
|
|
192
|
+
error_1 = _a.sent();
|
|
193
|
+
console.error('Approval error', error_1);
|
|
194
|
+
alert('Approval Failed');
|
|
195
|
+
return [3 /*break*/, 5];
|
|
196
|
+
case 5: return [2 /*return*/];
|
|
197
|
+
}
|
|
198
|
+
});
|
|
199
|
+
}); };
|
|
200
|
+
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
|
|
201
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
202
|
+
return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond)) }, { children: ["$ ", premium(bond)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
|
|
203
|
+
if (v.currentTarget.value.includes(',')) {
|
|
204
|
+
v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
|
|
205
|
+
}
|
|
206
|
+
if (v.currentTarget.value.includes('%')) {
|
|
207
|
+
v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '');
|
|
208
|
+
}
|
|
209
|
+
if (v.currentTarget.value === '.') {
|
|
210
|
+
v.currentTarget.value = '0.';
|
|
211
|
+
}
|
|
212
|
+
v.currentTarget.value =
|
|
213
|
+
!!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
|
|
214
|
+
? v.currentTarget.value
|
|
215
|
+
: v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
|
|
216
|
+
} }) })), _jsx(Flex, __assign({ className: "input-container token" }, { children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName }))] })), _jsxs(Flex, __assign({ className: "modal-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsxs(Button, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: _jsxs(Button, __assign({ onClick: handleBuy }, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })) }))] }))] }))] })) })) }, bond.billAddress));
|
|
217
|
+
}) })));
|
|
218
|
+
};
|
|
219
|
+
export default YourBondsModal;
|
package/dist/index.d.ts
CHANGED
|
@@ -2,4 +2,5 @@ import Bonds from './components/Bonds/Bonds';
|
|
|
2
2
|
import BondSingle from './components/BondSingle/BondSingle';
|
|
3
3
|
import BondModal from './components/BondModal/BondModal';
|
|
4
4
|
import YourBonds from './components/YourBonds/YourBonds';
|
|
5
|
-
|
|
5
|
+
import YourBondsModal from './components/YourBondsModal/YourBondsModal';
|
|
6
|
+
export { Bonds, BondSingle, BondModal, YourBonds, YourBondsModal };
|
package/dist/index.js
CHANGED
|
@@ -3,4 +3,5 @@ import Bonds from './components/Bonds/Bonds';
|
|
|
3
3
|
import BondSingle from './components/BondSingle/BondSingle';
|
|
4
4
|
import BondModal from './components/BondModal/BondModal';
|
|
5
5
|
import YourBonds from './components/YourBonds/YourBonds';
|
|
6
|
-
|
|
6
|
+
import YourBondsModal from './components/YourBondsModal/YourBondsModal';
|
|
7
|
+
export { Bonds, BondSingle, BondModal, YourBonds, YourBondsModal };
|
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
.modal.modal-backdrop {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
background-color: rgba(66, 66, 66, 0.5);
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
z-index: 1000;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.modal.modal-content {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
border-radius: 10px;
|
|
18
|
+
background-color: var(--theme-ui-colors-white2);
|
|
19
|
+
padding: 10px;
|
|
20
|
+
border-radius: 10px;
|
|
21
|
+
z-index: 1001;
|
|
22
|
+
max-width: 700px;
|
|
23
|
+
min-width: 700px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.modal.modal-header {
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: end;
|
|
29
|
+
align-items: center;
|
|
30
|
+
padding: 5px;
|
|
31
|
+
|
|
32
|
+
.svg-close {
|
|
33
|
+
height: 12px;
|
|
34
|
+
width: 12px;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.project-info {
|
|
39
|
+
align-items: center;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
margin: 0px 10px 0px 0px;
|
|
42
|
+
min-width: 0px;
|
|
43
|
+
display: flex;
|
|
44
|
+
font-size: 12px;
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
background: var(--theme-ui-colors-primaryButton);
|
|
47
|
+
padding-left: 10px;
|
|
48
|
+
padding-top: 2px;
|
|
49
|
+
padding-bottom: 2px;
|
|
50
|
+
border-radius: 10px;
|
|
51
|
+
align-items: center;
|
|
52
|
+
position: relative;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
|
|
55
|
+
.icon {
|
|
56
|
+
padding-left: 5px;
|
|
57
|
+
padding-right: 0px;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.new {
|
|
62
|
+
color: white;
|
|
63
|
+
display: flex;
|
|
64
|
+
background: rgba(223, 65, 65, 0.4);
|
|
65
|
+
border-radius: 6px;
|
|
66
|
+
padding: 1px 5px;
|
|
67
|
+
font-size: 12px;
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
line-height: 17px;
|
|
70
|
+
margin-right: 10px;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.modal-container.table-container {
|
|
76
|
+
width: 100%;
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
padding-left: 10px;
|
|
80
|
+
padding-right: 10px;
|
|
81
|
+
padding-bottom: 10px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.modal-container.title-container {
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
font-size: 1.5rem;
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: row;
|
|
89
|
+
align-items: center;
|
|
90
|
+
padding-top: 5px;
|
|
91
|
+
padding-bottom: 5px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.title-container.bondicon {
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: row;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.title-container.bondname {
|
|
101
|
+
display: flex;
|
|
102
|
+
flex-direction: row;
|
|
103
|
+
align-items: center;
|
|
104
|
+
padding-left: 20px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.title-container.price-container {
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: column;
|
|
110
|
+
padding-left: 10px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
.price-container.price {
|
|
115
|
+
font-size: 14px;
|
|
116
|
+
color: var(--theme-ui-colors-gray);
|
|
117
|
+
text-decoration: line-through;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.price-container.discounted {
|
|
121
|
+
display: flex;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.title-container.tokentags {
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
padding-left: 10px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.modal-container.description-container {
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: start;
|
|
133
|
+
padding-top: 10px;
|
|
134
|
+
padding-bottom: 10px;
|
|
135
|
+
font-weight: normal;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.modal-container.blocks-container {
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-direction: row;
|
|
141
|
+
align-items: center;
|
|
142
|
+
width: 100%;
|
|
143
|
+
justify-content: space-around;
|
|
144
|
+
margin-bottom: 10px;
|
|
145
|
+
margin-top: 5px;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.modal-block {
|
|
149
|
+
min-width: 0px;
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-direction: column;
|
|
152
|
+
align-items: center;
|
|
153
|
+
background: var(--theme-ui-colors-white3);
|
|
154
|
+
font-weight: 900;
|
|
155
|
+
font-size: 16px;
|
|
156
|
+
border-radius: 10px;
|
|
157
|
+
height: 90%;
|
|
158
|
+
padding-top: 10px;
|
|
159
|
+
padding-bottom: 10px;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.block-header.header {
|
|
163
|
+
color: white;
|
|
164
|
+
font-weight: bold;
|
|
165
|
+
font-size: 12px;
|
|
166
|
+
padding-bottom: 10px;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.block-header.icon {
|
|
170
|
+
padding-left: 5px;
|
|
171
|
+
align-items: start;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.modal-block.column-discount {
|
|
176
|
+
margin: 0px 10px 0px 0px;
|
|
177
|
+
width: 350px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.discount-positive {
|
|
181
|
+
color: #38A611;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.discount-negative {
|
|
185
|
+
color: #DF4141;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.modal-block.column-arr {
|
|
189
|
+
margin: 0px 10px 0px 0px;
|
|
190
|
+
width: 350px;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.modal-block.column-term {
|
|
194
|
+
margin: 0px 10px 0px 0px;
|
|
195
|
+
width: 350px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.modal-block.column-maxbuy {
|
|
199
|
+
width: 350px;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.modal-container.text-container {
|
|
203
|
+
display: flex;
|
|
204
|
+
flex-direction: column;
|
|
205
|
+
justify-content: center;
|
|
206
|
+
font-size: 12px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.text-container.row {
|
|
210
|
+
padding-top: 2px;
|
|
211
|
+
padding-bottom: 2px;
|
|
212
|
+
display: flex;
|
|
213
|
+
flex-direction: row;
|
|
214
|
+
justify-content: space-between;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.row-container {
|
|
218
|
+
display: flex;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.row-container.spend {
|
|
222
|
+
display: flex;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.row-container.spend-val {
|
|
226
|
+
display: flex;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.row-container.premium {
|
|
230
|
+
display: flex;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.row-container.premium-icon {
|
|
234
|
+
padding-left: 5px;
|
|
235
|
+
align-items: start;
|
|
236
|
+
cursor: pointer;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.row-container.premium-val {
|
|
240
|
+
display: flex;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.premium-positive {
|
|
244
|
+
color: #38A611;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.premium-negative {
|
|
248
|
+
color: #DF4141;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.row-container.get {
|
|
252
|
+
display: flex;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.row-container.get-val {
|
|
256
|
+
display: flex;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.modal-container.input-container {
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-direction: row;
|
|
262
|
+
background: var(--theme-ui-colors-white3);
|
|
263
|
+
border-radius: 10px;
|
|
264
|
+
min-height: 100px;
|
|
265
|
+
margin-top: 10px;
|
|
266
|
+
margin-bottom: 0px;
|
|
267
|
+
padding: 10px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.input-container.input {
|
|
271
|
+
background: var(--theme-ui-colors-white3);
|
|
272
|
+
border-radius: 10px;
|
|
273
|
+
border: medium;
|
|
274
|
+
padding-right: 10px;
|
|
275
|
+
width: 80%;
|
|
276
|
+
height: 50px;
|
|
277
|
+
font-size: 22px;
|
|
278
|
+
|
|
279
|
+
Input {
|
|
280
|
+
border: none;
|
|
281
|
+
display: inline-block;
|
|
282
|
+
|
|
283
|
+
&:focus {
|
|
284
|
+
outline: none;
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.input-container.token {
|
|
290
|
+
display: flex;
|
|
291
|
+
align-items: center;
|
|
292
|
+
font-size: 12px;
|
|
293
|
+
font-weight: bold;
|
|
294
|
+
background: var(--theme-ui-colors-white4);
|
|
295
|
+
border-radius: 10px;
|
|
296
|
+
position: relative;
|
|
297
|
+
width: 190px;
|
|
298
|
+
height: 40px;
|
|
299
|
+
padding: 5px 4px;
|
|
300
|
+
cursor: unset;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.modal-container.button-container {
|
|
304
|
+
width: 100%;
|
|
305
|
+
padding-top: 10px;
|
|
306
|
+
display: flex;
|
|
307
|
+
flex-direction: row;
|
|
308
|
+
justify-content: space-between;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.button-container.get {
|
|
312
|
+
justify-content: center;
|
|
313
|
+
align-items: center;
|
|
314
|
+
cursor: pointer;
|
|
315
|
+
|
|
316
|
+
Button {
|
|
317
|
+
width: 275px;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.button-container.buy {
|
|
322
|
+
justify-content: center;
|
|
323
|
+
align-items: center;
|
|
324
|
+
|
|
325
|
+
Button {
|
|
326
|
+
width: 375px;
|
|
327
|
+
}
|
|
328
|
+
}
|
package/package.json
CHANGED
|
File without changes
|