@ape.swap/bonds-sdk 1.0.123 → 1.0.124

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/BondSingle/BondSingle.js +30 -5
  2. package/dist/scss/bondsingle.scss +155 -38
  3. package/package.json +1 -1
package/dist/components/BondSingle/BondSingle.js CHANGED
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
12
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-runtime";
13
13
  /** @jsxImportSource theme-ui */
14
14
  import { useEffect, useState } from 'react';
15
15
  import { Flex, ThemeUIProvider } from "theme-ui";
@@ -20,6 +20,9 @@ import '../../scss/bondsingle.scss';
20
20
  import { useParams } from 'react-router-dom';
21
21
  import getTimePeriods from '../../utils/getTimePeriods';
22
22
  import { Button } from '../uikit/Button';
23
+ import { Input, Svg } from '../uikit';
24
+ import BigNumber from 'bignumber.js';
25
+ import { getFirstNonZeroDigits } from '../../utils/roundNumber';
23
26
  var BondSingle = function (_a) {
24
27
  // make pages for modal and single bond page
25
28
  // make button to buy bond
@@ -40,9 +43,31 @@ var BondSingle = function (_a) {
40
43
  var getDiscountColor = function (discount) {
41
44
  return discount < 0 ? 'discount-negative' : 'discount-positive';
42
45
  };
43
- return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [_jsxs("div", { children: ["Bond Single Page", _jsx("p", { children: billAddress })] }), isActive && account && (_jsx("p", { children: account })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Token" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" }))] })), bondData.map(function (bond) {
44
- var _a, _b;
45
- return (_jsxs(Flex, __assign({ className: "container bondrow-container" }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: _jsxs(Button, { children: ["Buy ", bond.showcaseTokenName] }) })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat("".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 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: bond.tokensRemaining.split('.')[0] }))] })));
46
- })] }))] })));
46
+ var discountEarnTokenPrice = function (bond) {
47
+ var _a, _b;
48
+ var earnTokenPrice = parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0');
49
+ return getFirstNonZeroDigits(earnTokenPrice - earnTokenPrice * (((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) / 100));
50
+ };
51
+ var earnTokenPrice = function (bond) {
52
+ var _a;
53
+ return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
54
+ };
55
+ var maxBuy = function (bond) {
56
+ var _a, _b, _c, _d;
57
+ var available = new BigNumber((_a = bond === null || bond === void 0 ? void 0 : bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
58
+ var threshold = 5;
59
+ var thresholdToShow = new BigNumber(threshold).div((_b = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
60
+ var safeAvailable = available.minus(thresholdToShow);
61
+ 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));
62
+ return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
63
+ };
64
+ var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
65
+ var handleInputChange = function (event) {
66
+ setInputValue(event.target.value);
67
+ };
68
+ return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [_jsxs("div", { children: ["Bond Single Page", _jsx("p", { children: billAddress })] }), isActive && account && (_jsx("p", { children: account })), _jsx(Flex, __assign({ className: "container page-container" }, { children: bondData.map(function (bond) {
69
+ var _a, _b, _c, _d, _e, _f;
70
+ return (_jsxs(_Fragment, { children: [_jsxs(Flex, __assign({ className: "container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "block-container discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Discount", _jsx(Flex, __assign({ className: "block-container icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "block-container arr" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["ARR", _jsx(Flex, __assign({ className: "block-container icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 0) * 365) / vestingTime((_c = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _c !== void 0 ? _c : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "block-container term" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Terms", _jsx(Flex, __assign({ className: "block-container icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), vestingTime((_d = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _d !== void 0 ? _d : 0).days ? "".concat(vestingTime((_e = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _e !== void 0 ? _e : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "block-container maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-container header" }, { children: ["Max Buy", _jsx(Flex, __assign({ className: "block-container icon" }, { children: _jsx(Svg, { icon: "questionFill", width: "15px" }) }))] })), (_f = parseFloat(maxBuy(bond).toFixed(0))) === null || _f === void 0 ? void 0 : _f.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "container bondinfo-container" }, { children: [_jsxs(Flex, __assign({ className: "bondinfo-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bond" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "price-container price" }, { children: [_jsxs(Flex, __assign({ className: "bond-price price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "bond-price discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] }))] })), _jsx(Flex, __assign({ className: "bondinfo-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "bondinfo-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { type: "number", className: "number-input", placeholder: "0.0", value: inputValue, onChange: handleInputChange }) })), _jsx(Flex, __assign({ className: "input-container token" }, { children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName }))] })), _jsxs(Flex, __assign({ className: "bondinfo-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, { children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] }) }))] }))] }))] }));
71
+ }) }))] })));
47
72
  };
48
73
  export default BondSingle;
package/dist/scss/bondsingle.scss CHANGED
@@ -1,44 +1,90 @@
1
-
2
- .container.table-container {
1
+ .container.page-container {
3
2
  width: 100%;
4
3
  display: flex;
5
4
  flex-direction: column;
6
- padding: 50px;
7
- }
8
-
9
- .container.header-container {
10
- display: flex;
11
- justify-content: space-around;
12
- padding: 5px;
13
- font-size: 12px;
14
- color: #78787D;
5
+ padding-left: 10px;
6
+ padding-right: 10px;
7
+ padding-bottom: 10px;
15
8
  }
16
9
 
17
- .container.bondrow-container {
10
+ .container.blocks-container {
18
11
  display: flex;
19
12
  flex-direction: row;
13
+ align-items: center;
20
14
  width: 100%;
21
15
  justify-content: space-around;
22
- background-color:#151320;
23
16
  margin-bottom: 10px;
24
- padding: 20px;
25
- border-radius: 10px;
26
- border: 1px solid #4B4B53;
27
- cursor: pointer;
17
+ margin-top: 5px;
28
18
  }
29
19
 
30
- .column.column-token {
31
- width: 100px;
20
+ .modal-block {
21
+ min-width: 0px;
22
+ display: flex;
32
23
  flex-direction: column;
33
- justify-content: center;
34
24
  align-items: center;
25
+ background: var(--theme-ui-colors-white3);
26
+ font-weight: 900;
27
+ font-size: 16px;
28
+ border-radius: 10px;
29
+ height: 90%;
30
+ padding-top: 10px;
31
+ padding-bottom: 10px;
35
32
  }
36
33
 
37
- .column.column-discount {
38
- width: 50px;
39
- flex-direction: column;
40
- justify-content: center;
34
+ .modal-container.title-container {
35
+ font-weight: bold;
36
+ font-size: 1.5rem;
37
+ display: flex;
38
+ flex-direction: row;
41
39
  align-items: center;
40
+ padding-top: 5px;
41
+ padding-bottom: 5px;
42
+ }
43
+
44
+ .title-container.bond {
45
+ display: flex;
46
+ }
47
+
48
+ .title-container.bond-price {
49
+ display: flex;
50
+ flex-direction: column;
51
+ padding-left: 10px;
52
+ }
53
+
54
+ .bond-price.price {
55
+ font-size: 14px;
56
+ color: var(--theme-ui-colors-gray);
57
+ text-decoration: line-through;
58
+ }
59
+
60
+ .bond-price.discounted {
61
+ display: flex;
62
+ }
63
+
64
+ .modal-container.description-container {
65
+ display: flex;
66
+ align-items: start;
67
+ padding-top: 10px;
68
+ padding-bottom: 10px;
69
+ font-weight: normal;
70
+ }
71
+
72
+ .block-header.header {
73
+ color: white;
74
+ font-weight: bold;
75
+ font-size: 12px;
76
+ padding-bottom: 10px;
77
+ }
78
+
79
+ .block-header.icon {
80
+ padding-left: 5px;
81
+ align-items: start;
82
+ cursor: pointer;
83
+ }
84
+
85
+ .modal-block.column-discount {
86
+ margin: 0px 10px 0px 0px;
87
+ width: 350px;
42
88
  }
43
89
 
44
90
  .discount-positive {
@@ -49,30 +95,101 @@
49
95
  color: #DF4141;
50
96
  }
51
97
 
52
- .column.column-arr {
53
- width: 50px;
54
- flex-direction: column;
55
- justify-content: center;
56
- align-items: center;
98
+ .modal-block.column-arr {
99
+ margin: 0px 10px 0px 0px;
100
+ width: 350px;
101
+ }
102
+
103
+ .modal-block.column-term {
104
+ margin: 0px 10px 0px 0px;
105
+ width: 350px;
57
106
  }
58
107
 
59
- .column.column-term {
60
- width: 50px;
108
+ .modal-block.column-maxbuy {
109
+ width: 350px;
110
+ }
111
+
112
+ .modal-container.text-container {
113
+ display: flex;
61
114
  flex-direction: column;
62
115
  justify-content: center;
63
- align-items: center;
116
+ font-size: 12px;
64
117
  }
65
118
 
66
- .column.column-tokensremaining {
67
- width: 50px;
68
- flex-direction: column;
119
+ .text-container.row {
120
+ padding-top: 2px;
121
+ padding-bottom: 2px;
122
+ display: flex;
123
+ flex-direction: row;
124
+ justify-content: space-between;
125
+ }
126
+
127
+ .premium-positive {
128
+ color: #38A611;
129
+ }
130
+
131
+ .premium-negative {
132
+ color: #DF4141;
133
+ }
134
+
135
+ .modal-container.input-container {
136
+ display: flex;
137
+ flex-direction: row;
138
+ background: var(--theme-ui-colors-white3);
139
+ border-radius: 10px;
140
+ min-height: 100px;
141
+ margin-top: 10px;
142
+ margin-bottom: 0px;
143
+ padding: 10px;
144
+ }
145
+
146
+ .input-container.input {
147
+ background: var(--theme-ui-colors-white3);
148
+ border-radius: 10px;
149
+ border: medium;
150
+ padding-right: 10px;
151
+ width: 80%;
152
+ height: 50px;
153
+ font-size: 22px;
154
+ }
155
+
156
+ .input-container.token {
157
+ display: flex;
158
+ align-items: center;
159
+ font-size: 12px;
160
+ font-weight: bold;
161
+ background: var(--theme-ui-colors-white4);
162
+ border-radius: 10px;
163
+ position: relative;
164
+ width: 190px;
165
+ height: 40px;
166
+ padding: 5px 4px;
167
+ cursor: unset;
168
+ }
169
+
170
+ .modal-container.button-container {
171
+ width: 100%;
172
+ padding-top: 10px;
173
+ display: flex;
174
+ flex-direction: row;
175
+ justify-content: space-between;
176
+ }
177
+
178
+ .button-container.get {
69
179
  justify-content: center;
70
180
  align-items: center;
181
+ cursor: pointer;
182
+
183
+ Button {
184
+ width: 275px;
185
+ }
71
186
  }
72
187
 
73
- .column.column-hotbond {
74
- width: 50px;
75
- flex-direction: column;
188
+ .button-container.buy {
76
189
  justify-content: center;
77
190
  align-items: center;
191
+
192
+ Button {
193
+ width: 375px;
194
+ }
78
195
  }
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.123",
6
+ "version": "1.0.124",
7
7
  "main": "dist/index.js",
8
8
  "module": "dist/index.es.js",
9
9
  "types": "dist/index.d.ts",