@ape.swap/bonds-sdk 1.0.362 → 1.0.364
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 +7 -5
- package/dist/components/YourBonds/fetchBillsUser.js +2 -2
- package/dist/components/YourBondsModal/YourBondsModal.js +14 -3
- package/dist/components/YourBondsModal/styles.d.ts +1 -0
- package/dist/components/YourBondsModal/styles.js +11 -0
- package/dist/scss/YourBondsModal.scss +7 -0
- package/package.json +1 -1
|
@@ -110,6 +110,7 @@ var YourBonds = function (_a) {
|
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
112
|
}); };
|
|
113
|
+
// Fetch data for user owned bill
|
|
113
114
|
useEffect(function () {
|
|
114
115
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
115
116
|
var bonds = response.data.bonds;
|
|
@@ -119,11 +120,6 @@ var YourBonds = function (_a) {
|
|
|
119
120
|
var _d = useState([]), bondData = _d[0], setBondData = _d[1];
|
|
120
121
|
var _e = useState(false), isModalOpen = _e[0], setIsModalOpen = _e[1];
|
|
121
122
|
var _f = useState(null), selectedBill = _f[0], setSelectedBill = _f[1];
|
|
122
|
-
var rowClick = function (bill) {
|
|
123
|
-
setSelectedBill(bill);
|
|
124
|
-
setIsModalOpen(true);
|
|
125
|
-
navigate("/YourBonds/?bondAddress=".concat(bill.address, "&bondChain=").concat(bill.bond.chainId), { replace: true });
|
|
126
|
-
};
|
|
127
123
|
var _g = useState([]), userOwnedBillsData = _g[0], setUserOwnedBillsData = _g[1];
|
|
128
124
|
useEffect(function () {
|
|
129
125
|
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
@@ -150,6 +146,12 @@ var YourBonds = function (_a) {
|
|
|
150
146
|
}); };
|
|
151
147
|
fetchData();
|
|
152
148
|
}, [account]);
|
|
149
|
+
var rowClick = function (bill) {
|
|
150
|
+
setSelectedBill(bill);
|
|
151
|
+
setIsModalOpen(true);
|
|
152
|
+
navigate("/YourBonds/?bondAddress=".concat(bill.address, "&bondChain=").concat(bill.bond.chainId), { replace: true });
|
|
153
|
+
};
|
|
154
|
+
// Functions to calculate display values for each row
|
|
153
155
|
var chainId = useWeb3React().chainId;
|
|
154
156
|
var currentTime = useCurrentTime() / 1000;
|
|
155
157
|
var vestingTimeRemaining = function (userBill) {
|
|
@@ -109,7 +109,7 @@ export var fetchUserOwnedBillNftData = function (ownedBillsData, chainId, bills)
|
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
111
|
}); };
|
|
112
|
-
|
|
112
|
+
/* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
|
|
113
113
|
export var fetchUserOwnedBillsDataAsync = function (chainId, account, bondData) { return __awaiter(void 0, void 0, void 0, function () {
|
|
114
114
|
var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData, ownedBillsData, userBillNftData_1, combinedData, error_1;
|
|
115
115
|
return __generator(this, function (_a) {
|
|
@@ -161,7 +161,7 @@ export var fetchUserOwnedBillsDataAsync = function (chainId, account, bondData)
|
|
|
161
161
|
}
|
|
162
162
|
});
|
|
163
163
|
}); };
|
|
164
|
-
|
|
164
|
+
/* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
|
|
165
165
|
export var fetchUserOwnedBills = function (chainId, account, bonds) { return __awaiter(void 0, void 0, void 0, function () {
|
|
166
166
|
var billIdCalls, billIds, billsPendingRewardCall, billDataCalls, billVersions, billData, pendingRewardsCall, result, i, billDataPos, data;
|
|
167
167
|
var _a, _b, _c, _d, _e;
|
|
@@ -55,7 +55,7 @@ import '../../scss/YourBondsModal.scss';
|
|
|
55
55
|
import axios from 'axios';
|
|
56
56
|
import { BigNumber } from 'bignumber.js';
|
|
57
57
|
import { getFirstNonZeroDigits } from '../../utils/roundNumber';
|
|
58
|
-
import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
|
|
58
|
+
import { TooltipBubble, Button, Svg, ListTag, Skeleton, Text } from '../uikit-sdk';
|
|
59
59
|
import { UserBillTooltipText } from '../../enum/tooltips';
|
|
60
60
|
import TokenImage from '../uikit-sdk/TokenImage';
|
|
61
61
|
import { getBalanceNumber } from '../../utils/getBalanceNumber';
|
|
@@ -63,11 +63,14 @@ 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';
|
|
67
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
66
68
|
var YourBondsModal = function (_a) {
|
|
67
69
|
var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
|
|
68
70
|
if (!isOpen)
|
|
69
71
|
return null;
|
|
70
72
|
var _b = useWeb3React(), account = _b.account, chainId = _b.chainId, isActive = _b.isActive;
|
|
73
|
+
// Fetch data for user owned bill
|
|
71
74
|
var _c = useState([]), bondData = _c[0], setBondData = _c[1];
|
|
72
75
|
useEffect(function () {
|
|
73
76
|
axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
|
|
@@ -103,6 +106,7 @@ var YourBondsModal = function (_a) {
|
|
|
103
106
|
}); };
|
|
104
107
|
fetchData();
|
|
105
108
|
}, [account]);
|
|
109
|
+
// Functions to calculate display values for modal
|
|
106
110
|
var totalPending = function (userBill) {
|
|
107
111
|
var _a, _b, _c, _d;
|
|
108
112
|
return getBalanceNumber(new BigNumber((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18);
|
|
@@ -115,12 +119,19 @@ var YourBondsModal = function (_a) {
|
|
|
115
119
|
var _a;
|
|
116
120
|
return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
|
|
117
121
|
};
|
|
122
|
+
var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
|
|
123
|
+
var _e = useState(false), isOpenTraits = _e[0], setIsOpenTraits = _e[1];
|
|
118
124
|
return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: userOwnedBillsData.flat().map(function (data) {
|
|
119
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
125
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
120
126
|
var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
|
|
121
127
|
console.log("USER BILL LOG");
|
|
122
128
|
console.log(userBill);
|
|
123
|
-
|
|
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
|
+
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: _jsx(ListTag, { text: (_g = (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.tags) === null || _g === void 0 ? void 0 : _g[0], variant: ((_j = (_h = userBill.bond) === null || _h === void 0 ? void 0 : _h.tags) === null || _j === void 0 ? void 0 : _j[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })), "#", userBill.id] })), _jsxs(Flex, __assign({ className: "yourbondinfo blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "yourbondinfo-block row-traits" }, { children: [_jsx(Flex, __assign({ className: "yourbondinfo-block header" }, { children: "Traits" })), _jsx(Flex, __assign({ className: "yourbondinfo-block attributes" }, { children: _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, __assign({ initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' } }, { children: _jsx(Flex, __assign({ sx: { flexDirection: 'column', gap: '1px' } }, { children: attributes
|
|
131
|
+
? 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)); })
|
|
132
|
+
: BILL_ATTRIBUTES.map(function (attrib) {
|
|
133
|
+
return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, __assign({ sx: { fontSize: '10px', fontWeight: 500 } }, { children: attrib })), _jsx(Skeleton, { width: "150px" })] }, attrib));
|
|
134
|
+
}) })) }))) }) }))] })), _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: (_k = userBill.bond.showcaseTokenName) !== null && _k !== void 0 ? _k : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4), "($".concat((totalPending(userBill) * ((_l = parseFloat(earnTokenPrice(userBill.bond))) !== null && _l !== void 0 ? _l : 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: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.payoutTokenName, size: 25 }) })), _jsxs(Flex, __assign({ className: "block-info text" }, { children: [formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4), "($".concat((claimable(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 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;
|
|
124
135
|
}) })));
|
|
125
136
|
};
|
|
126
137
|
export default YourBondsModal;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TraitsContentContainer: import("@emotion/styled").StyledComponent<any, {}, {}>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import styled from "@emotion/styled";
|
|
6
|
+
import { Flex } from "../uikit-sdk";
|
|
7
|
+
export var TraitsContentContainer = styled(Flex)(templateObject_1 || (templateObject_1 = __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
|
+
var theme = _a.theme;
|
|
9
|
+
return theme.colors.white4;
|
|
10
|
+
});
|
|
11
|
+
var templateObject_1;
|
|
@@ -161,6 +161,13 @@
|
|
|
161
161
|
justify-content: start;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
+
.yourbondinfo-block.attributes {
|
|
165
|
+
flex-direction: column;
|
|
166
|
+
width: 100%;
|
|
167
|
+
height: 100%;
|
|
168
|
+
align-items: center;
|
|
169
|
+
}
|
|
170
|
+
|
|
164
171
|
.yourbondinfo-block.row-vested {
|
|
165
172
|
flex-direction: row;
|
|
166
173
|
height: 50px;
|