@ape.swap/bonds-sdk 1.0.367 → 1.0.368
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, { 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;
|
|
@@ -108,19 +108,6 @@
|
|
|
108
108
|
margin-top: 5px;
|
|
109
109
|
}
|
|
110
110
|
|
|
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
111
|
.yourbondinfo-block.header {
|
|
125
112
|
color: white;
|
|
126
113
|
font-weight: bold;
|
|
@@ -141,6 +128,14 @@
|
|
|
141
128
|
align-items: center;
|
|
142
129
|
justify-content: end;
|
|
143
130
|
width: 50%;
|
|
131
|
+
display: flex;
|
|
132
|
+
background: var(--theme-ui-colors-white3);
|
|
133
|
+
font-weight: 900;
|
|
134
|
+
font-size: 16px;
|
|
135
|
+
border-radius: 10px;
|
|
136
|
+
height: 90%;
|
|
137
|
+
padding-top: 10px;
|
|
138
|
+
padding-bottom: 10px;
|
|
144
139
|
}
|
|
145
140
|
|
|
146
141
|
.block-info.icon {
|
|
@@ -151,16 +146,6 @@
|
|
|
151
146
|
padding-left: 10px;
|
|
152
147
|
}
|
|
153
148
|
|
|
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
149
|
.yourbondinfo-block.attributes {
|
|
165
150
|
flex-direction: column;
|
|
166
151
|
width: 100%;
|
|
@@ -179,6 +164,13 @@
|
|
|
179
164
|
padding-right: 10px;
|
|
180
165
|
align-items: center;
|
|
181
166
|
justify-content: space-between;
|
|
167
|
+
background: var(--theme-ui-colors-white3);
|
|
168
|
+
font-weight: 900;
|
|
169
|
+
font-size: 16px;
|
|
170
|
+
border-radius: 10px;
|
|
171
|
+
height: 90%;
|
|
172
|
+
padding-top: 10px;
|
|
173
|
+
padding-bottom: 10px;
|
|
182
174
|
}
|
|
183
175
|
|
|
184
176
|
.yourbondinfo-block.row-pending {
|
|
@@ -190,6 +182,13 @@
|
|
|
190
182
|
padding-right: 10px;
|
|
191
183
|
align-items: center;
|
|
192
184
|
justify-content: space-between;
|
|
185
|
+
background: var(--theme-ui-colors-white3);
|
|
186
|
+
font-weight: 900;
|
|
187
|
+
font-size: 16px;
|
|
188
|
+
border-radius: 10px;
|
|
189
|
+
height: 90%;
|
|
190
|
+
padding-top: 10px;
|
|
191
|
+
padding-bottom: 10px;
|
|
193
192
|
}
|
|
194
193
|
|
|
195
194
|
.yourbondinfo-block.row-claimable {
|
|
@@ -201,6 +200,13 @@
|
|
|
201
200
|
padding-right: 10px;
|
|
202
201
|
align-items: center;
|
|
203
202
|
justify-content: space-between;
|
|
203
|
+
background: var(--theme-ui-colors-white3);
|
|
204
|
+
font-weight: 900;
|
|
205
|
+
font-size: 16px;
|
|
206
|
+
border-radius: 10px;
|
|
207
|
+
height: 90%;
|
|
208
|
+
padding-top: 10px;
|
|
209
|
+
padding-bottom: 10px;
|
|
204
210
|
}
|
|
205
211
|
|
|
206
212
|
.yourbondinfo.button-container {
|