@ape.swap/bonds-sdk 1.0.367 → 1.0.369
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.
|
@@ -63,7 +63,7 @@ import { MAINNET_CHAINS } from '../../config/constants/chains';
|
|
|
63
63
|
import { getPendingVesting } from '../../hooks/usePendingVesting';
|
|
64
64
|
import { formatNumberSI } from '../../utils/formatNumber';
|
|
65
65
|
import { fetchUserOwnedBillsDataAsync } from '../YourBonds/fetchBillsUser';
|
|
66
|
-
import { TraitsContentContainer } from './styles';
|
|
66
|
+
import { StyledHeadingText, TraitsContentContainer } from './styles';
|
|
67
67
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
68
68
|
var YourBondsModal = function (_a) {
|
|
69
69
|
var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
@@ -122,14 +122,16 @@ var YourBondsModal = function (_a) {
|
|
|
122
122
|
var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
|
|
123
123
|
var _e = useState(false), isOpenTraits = _e[0], setIsOpenTraits = _e[1];
|
|
124
124
|
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: userOwnedBillsData.flat().map(function (data) {
|
|
125
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
125
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
126
126
|
var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
|
|
127
127
|
console.log("USER BILL LOG");
|
|
128
128
|
console.log(userBill);
|
|
129
129
|
var attributes = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.attributes) === null || _b === void 0 ? void 0 : _b.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
|
|
130
130
|
console.log("ATTRIBUTES LOG");
|
|
131
131
|
console.log(attributes);
|
|
132
|
-
return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_d = userBill.bond.showcaseTokenName) !== null && _d !== void 0 ? _d : userBill.bond.payoutTokenName, size: 40 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: (_e = userBill.bond) === null || _e === void 0 ? void 0 : _e.showcaseTokenName })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children:
|
|
132
|
+
return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "yourbondsmodal table-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondsmodal bondimage" }, { children: _jsx("img", { src: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _jsxs(Flex, __assign({ className: "yourbondsmodal yourbondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(TokenImage, { symbol: (_d = userBill.bond.showcaseTokenName) !== null && _d !== void 0 ? _d : userBill.bond.payoutTokenName, size: 40 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: _jsx(StyledHeadingText, { children: (_e = userBill.bond) === null || _e === void 0 ? void 0 : _e.showcaseTokenName }) })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: (_f = userBill.bond.tags) === null || _f === void 0 ? void 0 : _f.slice(0, 1).map(function (tag) {
|
|
133
|
+
return (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }), tag));
|
|
134
|
+
}) })), _jsxs(Text, __assign({ sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] } }, { children: ["#", userBill.id] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block attributes" }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: 'column', width: '100%' } }, { children: [_jsxs(Flex, __assign({ sx: {
|
|
133
135
|
justifyContent: 'space-between',
|
|
134
136
|
height: '24px',
|
|
135
137
|
background: 'white3',
|
|
@@ -140,7 +142,7 @@ var YourBondsModal = function (_a) {
|
|
|
140
142
|
? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.trait_type })), _jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: a === null || a === void 0 ? void 0 : a.value }))] }, a.value)); })
|
|
141
143
|
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
142
144
|
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: attrib })), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
143
|
-
}) })) }))) })] })) })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Fully Vested", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, __assign({ className: "block-info text" }, { children: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Pending", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsx(TokenImage, { symbol: (
|
|
145
|
+
}) })) }))) })] })) })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-vested" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Fully Vested", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, __assign({ className: "block-info text" }, { children: _jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: getPendingVesting(userBill.lastBlockTimestamp, userBill.vesting) })) }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-pending" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Pending", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsx(TokenImage, { symbol: (_g = userBill.bond.showcaseTokenName) !== null && _g !== void 0 ? _g : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400] } }, { children: "($".concat((totalPending(userBill) * ((_h = parseFloat(earnTokenPrice(userBill.bond))) !== null && _h !== void 0 ? _h : 0)).toFixed(2), ")") }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block row-claimable" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block header" }, { children: ["Claimable", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo-block info" }, { children: [_jsx(Flex, __assign({ className: "block-info icon" }, { children: _jsx(TokenImage, { symbol: (_j = userBill.bond.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [_jsx(Text, __assign({ sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 } }, { children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) })), _jsx(Text, __assign({ sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400] } }, { children: "($".concat((claimable(userBill) * ((_k = parseFloat(earnTokenPrice(userBill.bond))) !== null && _k !== void 0 ? _k : 0)).toFixed(2), ")") }))] }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container claim" }, { children: _jsx(Button, { children: "CLAIM" }) })), _jsx(Flex, __assign({ className: "button-container transfer" }, { children: _jsx(Button, __assign({ variant: "secondary" }, { children: "TRANSFER" })) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
|
|
144
146
|
}) })));
|
|
145
147
|
};
|
|
146
148
|
export default YourBondsModal;
|
|
@@ -3,9 +3,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled from "@emotion/styled";
|
|
6
|
-
import { Flex } from "../uikit-sdk";
|
|
7
|
-
export var
|
|
6
|
+
import { Flex, Text } from "../uikit-sdk";
|
|
7
|
+
export var StyledHeadingText = styled(Text)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: 12px;\n align-self: center;\n @media screen and (min-width: 1180px) {\n font-size: 22px;\n }\n"], ["\n font-size: 12px;\n align-self: center;\n @media screen and (min-width: 1180px) {\n font-size: 22px;\n }\n"])));
|
|
8
|
+
export var TraitsContentContainer = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n justify-content: space-between;\n background: ", ";\n padding: 0px 15px;\n &:last-child {\n border-radius: 0px 0px 6px 6px;\n }\n @media screen and (max-width: 667px) {\n :first-of-type {\n border-radius: 6px 6px 0px 0px;\n }\n }\n"], ["\n justify-content: space-between;\n background: ", ";\n padding: 0px 15px;\n &:last-child {\n border-radius: 0px 0px 6px 6px;\n }\n @media screen and (max-width: 667px) {\n :first-of-type {\n border-radius: 6px 6px 0px 0px;\n }\n }\n"])), function (_a) {
|
|
8
9
|
var theme = _a.theme;
|
|
9
10
|
return theme.colors.white4;
|
|
10
11
|
});
|
|
11
|
-
var templateObject_1;
|
|
12
|
+
var templateObject_1, templateObject_2;
|
|
@@ -31,6 +31,10 @@
|
|
|
31
31
|
justify-content: end;
|
|
32
32
|
align-items: center;
|
|
33
33
|
padding: 5px;
|
|
34
|
+
font-size: 12px;
|
|
35
|
+
font-weight: 400;
|
|
36
|
+
opacity: 0.6;
|
|
37
|
+
line-height: 14px;
|
|
34
38
|
|
|
35
39
|
.svg-close {
|
|
36
40
|
height: 12px;
|
|
@@ -108,19 +112,6 @@
|
|
|
108
112
|
margin-top: 5px;
|
|
109
113
|
}
|
|
110
114
|
|
|
111
|
-
.yourbondinfo-block {
|
|
112
|
-
display: flex;
|
|
113
|
-
flex-direction: row;
|
|
114
|
-
align-items: center;
|
|
115
|
-
background: var(--theme-ui-colors-white3);
|
|
116
|
-
font-weight: 900;
|
|
117
|
-
font-size: 16px;
|
|
118
|
-
border-radius: 10px;
|
|
119
|
-
height: 90%;
|
|
120
|
-
padding-top: 10px;
|
|
121
|
-
padding-bottom: 10px;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
115
|
.yourbondinfo-block.header {
|
|
125
116
|
color: white;
|
|
126
117
|
font-weight: bold;
|
|
@@ -141,6 +132,12 @@
|
|
|
141
132
|
align-items: center;
|
|
142
133
|
justify-content: end;
|
|
143
134
|
width: 50%;
|
|
135
|
+
display: flex;
|
|
136
|
+
background: var(--theme-ui-colors-white3);
|
|
137
|
+
border-radius: 10px;
|
|
138
|
+
height: 90%;
|
|
139
|
+
padding-top: 10px;
|
|
140
|
+
padding-bottom: 10px;
|
|
144
141
|
}
|
|
145
142
|
|
|
146
143
|
.block-info.icon {
|
|
@@ -151,21 +148,10 @@
|
|
|
151
148
|
padding-left: 10px;
|
|
152
149
|
}
|
|
153
150
|
|
|
154
|
-
.yourbondinfo-block.row-traits {
|
|
155
|
-
flex-direction: row;
|
|
156
|
-
height: 25px;
|
|
157
|
-
padding-left: 10px;
|
|
158
|
-
width: 100%;
|
|
159
|
-
margin-bottom: 10px;
|
|
160
|
-
align-items: center;
|
|
161
|
-
justify-content: start;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
151
|
.yourbondinfo-block.attributes {
|
|
165
152
|
flex-direction: column;
|
|
166
153
|
width: 100%;
|
|
167
154
|
height: 100%;
|
|
168
|
-
padding-left: 10px;
|
|
169
155
|
margin-bottom: 10px;
|
|
170
156
|
align-items: center;
|
|
171
157
|
}
|
|
@@ -179,6 +165,11 @@
|
|
|
179
165
|
padding-right: 10px;
|
|
180
166
|
align-items: center;
|
|
181
167
|
justify-content: space-between;
|
|
168
|
+
background: var(--theme-ui-colors-white3);
|
|
169
|
+
border-radius: 10px;
|
|
170
|
+
height: 90%;
|
|
171
|
+
padding-top: 10px;
|
|
172
|
+
padding-bottom: 10px;
|
|
182
173
|
}
|
|
183
174
|
|
|
184
175
|
.yourbondinfo-block.row-pending {
|
|
@@ -190,6 +181,11 @@
|
|
|
190
181
|
padding-right: 10px;
|
|
191
182
|
align-items: center;
|
|
192
183
|
justify-content: space-between;
|
|
184
|
+
background: var(--theme-ui-colors-white3);
|
|
185
|
+
border-radius: 10px;
|
|
186
|
+
height: 90%;
|
|
187
|
+
padding-top: 10px;
|
|
188
|
+
padding-bottom: 10px;
|
|
193
189
|
}
|
|
194
190
|
|
|
195
191
|
.yourbondinfo-block.row-claimable {
|
|
@@ -201,6 +197,11 @@
|
|
|
201
197
|
padding-right: 10px;
|
|
202
198
|
align-items: center;
|
|
203
199
|
justify-content: space-between;
|
|
200
|
+
background: var(--theme-ui-colors-white3);
|
|
201
|
+
border-radius: 10px;
|
|
202
|
+
height: 90%;
|
|
203
|
+
padding-top: 10px;
|
|
204
|
+
padding-bottom: 10px;
|
|
204
205
|
}
|
|
205
206
|
|
|
206
207
|
.yourbondinfo.button-container {
|