@ape.swap/bonds-sdk 1.0.384 → 1.0.386

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.
Files changed (3) hide show
  1. package/dist/components/Bonds/Bonds.js +44 -15
  2. package/dist/scss/Bonds.scss +11 -5
  3. package/package.json +1 -1
package/dist/components/Bonds/Bonds.js CHANGED
@@ -45,6 +45,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
45
45
  if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
46
46
  }
47
47
  };
48
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
49
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
50
+ if (ar || !(i in from)) {
51
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
52
+ ar[i] = from[i];
53
+ }
54
+ }
55
+ return to.concat(ar || Array.prototype.slice.call(from));
56
+ };
48
57
  import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
49
58
  /** @jsxImportSource theme-ui */
50
59
  import { useCallback, useEffect, useState } from 'react';
@@ -142,20 +151,19 @@ var Bonds = function (_a) {
142
151
  return true;
143
152
  return ((_b = new BigNumber(bond.tokensRemaining)) === null || _b === void 0 ? void 0 : _b.lte(thresholdToHide)) || bond.discount === 100;
144
153
  }, []);
145
- var sortedBonds = bondData.sort(function (a, b) {
146
- var _a, _b;
147
- var aIsHot = hotBonds.includes(a.billAddress.toLowerCase()) && ((_a = a.discount) !== null && _a !== void 0 ? _a : 0) > 0;
148
- var bIsHot = hotBonds.includes(b.billAddress.toLowerCase()) && ((_b = b.discount) !== null && _b !== void 0 ? _b : 0) > 0;
149
- if (aIsHot && !bIsHot) {
150
- return -1;
151
- }
152
- else if (!aIsHot && bIsHot) {
153
- return 1;
154
- }
155
- else {
156
- return b.discount - a.discount;
157
- }
158
- });
154
+ // const sortedBonds = bondData.sort((a, b) => {
155
+ // const aIsHot = hotBonds.includes(a.billAddress.toLowerCase()) && (a.discount ?? 0) > 0;
156
+ // const bIsHot = hotBonds.includes(b.billAddress.toLowerCase()) && (b.discount ?? 0) > 0;
157
+ // if (aIsHot && !bIsHot) {
158
+ // return -1;
159
+ // }
160
+ // else if (!aIsHot && bIsHot) {
161
+ // return 1;
162
+ // }
163
+ // else {
164
+ // return b.discount - a.discount;
165
+ // }
166
+ // });
159
167
  var _f = useState(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
160
168
  var _g = useState(null), selectedBond = _g[0], setSelectedBond = _g[1];
161
169
  var rowClick = function (bond) {
@@ -187,7 +195,28 @@ var Bonds = function (_a) {
187
195
  var explorerLink = BLOCK_EXPLORER[selectedChain];
188
196
  return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
189
197
  };
190
- return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })), _jsx(Svg, { icon: "sort", width: "12px" })] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })), _jsx(Svg, { icon: "sort", width: "12px" })] })), _jsxs(Flex, __assign({ className: "column column-term" }, { children: [_jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })), _jsx(Svg, { icon: "sort", width: "12px" })] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })), _jsx(Svg, { icon: "sort", width: "12px" })] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
198
+ var _h = useState({ key: 'discount', direction: 'asc' }), sortConfig = _h[0], setSortConfig = _h[1];
199
+ var _j = useState(bondData), sortedBonds = _j[0], setSortedBonds = _j[1];
200
+ var handleSort = function (key) {
201
+ var direction = 'asc';
202
+ if (sortConfig.key === key && sortConfig.direction === 'asc') {
203
+ direction = 'desc';
204
+ }
205
+ setSortConfig({ key: key, direction: direction });
206
+ };
207
+ useEffect(function () {
208
+ var sorted = __spreadArray([], bondData, true).sort(function (a, b) {
209
+ if (a[sortConfig.key] < b[sortConfig.key]) {
210
+ return sortConfig.direction === 'asc' ? -1 : 1;
211
+ }
212
+ if (a[sortConfig.key] > b[sortConfig.key]) {
213
+ return sortConfig.direction === 'asc' ? 1 : -1;
214
+ }
215
+ return 0;
216
+ });
217
+ setSortedBonds(sorted);
218
+ }, [sortConfig, bondData]);
219
+ return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-term" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
191
220
  var _a, _b, _c, _d, _e;
192
221
  return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-term" }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
193
222
  width: '127px',
package/dist/scss/Bonds.scss CHANGED
@@ -81,7 +81,7 @@
81
81
  }
82
82
 
83
83
  .column.column-discount {
84
- flex-direction: column;
84
+ flex-direction: row;
85
85
  justify-content: center;
86
86
  align-items: center;
87
87
  width: 20%;
@@ -98,33 +98,39 @@
98
98
  }
99
99
 
100
100
  .column.column-arr {
101
- flex-direction: column;
101
+ flex-direction: row;
102
102
  justify-content: center;
103
103
  align-items: center;
104
104
  width: 20%;
105
105
  }
106
106
 
107
107
  .column.column-term {
108
- flex-direction: column;
108
+ flex-direction: row;
109
109
  justify-content: center;
110
110
  align-items: center;
111
111
  width: 20%;
112
112
  }
113
113
 
114
114
  .column.column-tokensremaining {
115
- flex-direction: column;
115
+ flex-direction: row;
116
116
  justify-content: center;
117
117
  align-items: center;
118
118
  width: 20%;
119
119
  }
120
120
 
121
121
  .column.column-hotbond {
122
- flex-direction: column;
122
+ flex-direction: row;
123
123
  justify-content: center;
124
124
  align-items: center;
125
125
  width: 10%;
126
126
  }
127
127
 
128
+ .column.tooltip {
129
+ flex-direction: row;
130
+ align-items: center;
131
+ justify-content: space-around;
132
+ }
133
+
128
134
  .column.header-icon {
129
135
  padding-left: 5px;
130
136
  align-items: start;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Ape Bond SDK",
4
4
  "author": "Ape Bond",
5
5
  "license": "MIT",
6
- "version": "1.0.384",
6
+ "version": "1.0.386",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",