@ape.swap/bonds-sdk 1.0.721 → 1.0.723

package/dist/components/Modals/BondModal/BondModal.js

@@ -120,7 +120,7 @@ var BondModal = function (_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    tokenAddress = bondData[0].lpToken.address;
+                    tokenAddress = bondData[0].lpToken.address[chainId];
                     decimals = tokenDecimals !== null && tokenDecimals !== void 0 ? tokenDecimals : 18;
                     _a.label = 1;
                 case 1:

package/dist/components/Modals/YourBondsModal/YourBondsModal.js

@@ -127,18 +127,11 @@ var YourBondsModal = function (_a) {
     return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "yourbondsmodal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image, onLoad: handleImageLoad }) }), isImageLoaded &&
                                     (_jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.earnToken.symbol, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.slice(0, 1).map(function (tag) {
                                                             return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
-                                                        }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsx(Flex, { className: "yourbondinfo-block attributes", children: _jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [_jsxs(Flex, { sx: {
-                                                                        justifyContent: 'space-between',
-                                                                        height: '24px',
-                                                                        background: 'white3',
-                                                                        px: '15px',
-                                                                        borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
-                                                                        display: ['none', 'none', 'none', 'flex'],
-                                                                    }, onClick: function () { return setIsOpenTraits(!isOpenTraits); }, children: [_jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
-                                                                                ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
-                                                                                : BILL_ATTRIBUTES.map(function (attrib) {
-                                                                                    return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
-                                                                                }) }) })) })] }) }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
+                                                        }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsxs(Flex, { className: "attributes-container", children: [_jsxs(Flex, { className: "attributes-header", onClick: function () { return setIsOpenTraits(!isOpenTraits); }, children: [_jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
+                                                                            ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
+                                                                            : BILL_ATTRIBUTES.map(function (attrib) {
+                                                                                return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
+                                                                            }) }) })) })] }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
                                                             _jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
                                                                     event.stopPropagation();
                                                                     switchChain({ chainId: userBill.bond.chainId });

package/dist/scss/YourBondsModal.scss

@@ -186,12 +186,32 @@
     padding-left: 10px;
 }
 
-.yourbondinfo-block.attributes {
+.attributes-container {
     flex-direction: column;
     width: 100%;
     height: 100%;
     margin-bottom: 10px;
     align-items: center;
+
+    .attributes-header {
+        justify-content: space-between;
+        height: 24px;
+        background: $white3; // Assuming 'white3' is a variable in your SCSS
+        padding-left: 15px;
+        padding-right: 15px;
+        border-radius: normal; // Default value
+        display: none;
+        
+        // Media query for the fourth breakpoint
+        @media (min-width: 1024px) { // Adjust the breakpoint as needed
+            display: flex;
+        }
+        
+        // Conditional border-radius
+        &.is-open-traits {
+            border-radius: 6px 6px 0px 0px;
+        }
+    }
 }
 
 .yourbondinfo-block.row-vested {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "1.0.721",
+  "version": "1.0.723",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",