@ape.swap/bonds-sdk 1.0.253 → 1.0.255

package/dist/components/Bonds/Bonds.js

@@ -65,6 +65,7 @@ import { TooltipText } from '../../enum/tooltips';
 import { TooltipBubble, Svg, ListTag } from '../uikit-sdk';
 import Tooltip from '../Tooltip/Tooltip';
 import { BLOCK_EXPLORER } from '../../config/constants/chains';
+import TokenInfoAndName from '../TokenInfoAndName';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -188,7 +189,7 @@ var Bonds = function (_a) {
     };
     return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), _jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["Discount", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-term" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["Terms", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["Tokens Remaining", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
                         var _a, _b, _c, _d, _e, _f, _g;
-                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) })), _jsx(Flex, __assign({ className: "column column-tokentags" }, { children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0].toLocaleUpperCase(), variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 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: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenimage" }, { children: _jsx(TokenInfoAndName, { bond: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenname" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) })), _jsx(Flex, __assign({ className: "column column-tokentags" }, { children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0].toLocaleUpperCase(), variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 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: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: remainingPercentage(bond) }), style: {
                                                     width: '127px',
                                                     height: '25px',
                                                     flexDirection: 'column',

package/dist/components/TokenInfoAndName/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BondsDataResponse } from '../../types/bonds';
+export declare const NETWORK_COLORS: Partial<Record<number, string>>;
+declare const TokenInfoAndName: ({ bond }: {
+    bond: BondsDataResponse;
+}) => React.JSX.Element;
+export default TokenInfoAndName;

package/dist/components/TokenInfoAndName/index.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Flex, ListTag, Svg } from '../../components/uikit-sdk';
+import { NETWORK_ICONS } from '../../config/constants/chains';
+import { ChainId } from '@ape.swap/apeswap-lists';
+import BondTokenImage from '../../components/uikit-sdk/BondTokenImage';
+// import { CleanedBondsState } from 'state/bills/types'
+// import FavComponent from '../../../components/FavComponent'
+export var NETWORK_COLORS = (_a = {},
+    _a[ChainId.BSC] = '#F3BA2F',
+    _a[ChainId.MAINNET] = '#627eea',
+    _a[ChainId.MATIC] = '#8247e5',
+    _a[ChainId.LIGHTLINK] = '#6087ff',
+    _a[ChainId.BASE] = '#0052ff',
+    _a[ChainId.ARBITRUM] = '#289fef',
+    _a[ChainId.LINEA] = '#fff',
+    _a[ChainId.IOTA] = '#fff',
+    _a);
+var TokenInfoAndName = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var bond = _a.bond;
+    return (_jsxs(Flex, __assign({ sx: {
+            width: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            height: '100%',
+            alignItems: 'center',
+            pl: '20px',
+            borderRadius: 'normal',
+            ml: '-20px',
+        } }, { children: [_jsx(Flex, __assign({ sx: {
+                    position: 'absolute',
+                    left: '0px',
+                    top: '0px',
+                    overflow: 'hidden',
+                    borderRadius: '10px 0px 8px 0px',
+                    zIndex: 5,
+                } }, { children: _jsx(Svg, { width: 22, height: 22, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond === null || bond === void 0 ? void 0 : bond.chainId]) !== null && _b !== void 0 ? _b : 'question' }) })), _jsx(Flex, { sx: {
+                    position: 'absolute',
+                    zIndex: 0,
+                    left: '0px',
+                    width: '30px',
+                    height: '100%',
+                    background: NETWORK_COLORS[bond.chainId],
+                    filter: 'blur(35px)',
+                } }), _jsxs(Flex, __assign({ sx: { pl: '6px', width: '100%', maxWidth: '150px' } }, { children: [_jsx(BondTokenImage, { symbol: (_c = bond.showcaseTokenName) !== null && _c !== void 0 ? _c : bond.payoutTokenName, size: 33 }), _jsx(Flex, __assign({ sx: { ml: '10px', fontSize: '16px', fontWeight: 700, alignItems: 'center', width: 'calc(100% - 30px)' } }, { children: (_d = bond.showcaseTokenName) !== null && _d !== void 0 ? _d : bond.payoutTokenName }))] })), _jsx(Flex, __assign({ sx: {
+                    ml: '10px',
+                    display: ['none', 'none', 'none', 'flex'],
+                    minWidth: '70px',
+                    alignItems: 'center',
+                } }, { children: ((_e = bond.tags) === null || _e === void 0 ? void 0 : _e[0]) && (_jsx(Flex, __assign({ sx: { marginRight: '10px' } }, { children: _jsx(ListTag, { variant: ((_f = bond.tags) === null || _f === void 0 ? void 0 : _f[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: (_h = (_g = bond.tags) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.toUpperCase() }) }))) }))] })));
+};
+export default TokenInfoAndName;

package/dist/components/uikit-sdk/BondTokenImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const BondTokenImage: ({ symbol, size, chain }: {
+    symbol: string;
+    size: number;
+    chain?: number | undefined;
+}) => React.JSX.Element;
+export default BondTokenImage;

package/dist/components/uikit-sdk/BondTokenImage.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import Flex from './Flex';
+import { APESWAP_LIST_REPO } from '../../config/constants/lists';
+import { NETWORK_ICONS } from '../../config/constants/chains';
+import { Svg } from './index';
+var BondTokenImage = function (_a) {
+    var _b;
+    var symbol = _a.symbol, size = _a.size, chain = _a.chain;
+    return (_jsxs(Flex, __assign({ sx: {
+            width: size - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        } }, { children: [_jsx("img", { src: "".concat(APESWAP_LIST_REPO, "/assets/").concat(symbol.toUpperCase(), ".png"), alt: "tokenImgFor:".concat(symbol), width: size, height: symbol === 'BNB-ICHI' ? 19 : size }), chain && (_jsx(Flex, __assign({ sx: { zIndex: 5, position: 'absolute', top: '-2px', right: '-4px', overflow: 'hidden', borderRadius: '50px' } }, { children: _jsx(Svg, { width: size / 2.5, height: size / 2.5, icon: (_b = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[chain]) !== null && _b !== void 0 ? _b : 'question' }) })))] })));
+};
+export default BondTokenImage;

package/dist/scss/Bonds.scss

@@ -49,8 +49,16 @@
     width: 40%;
 }
 
+.column.column-image {
+    width: 25%;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    padding-left: 20px;
+}
+
 .column.column-tokenname {
-    width: 33%;
+    width: 25%;
     flex-direction: row;
     justify-content: start;
     align-items: center;
@@ -58,14 +66,14 @@
 }
 
 .column.column-tokenicons {
-    width: 20%;
+    width: 10%;
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
 }
 
 .column.column-tokentags {
-    width: 33%;
+    width: 25%;
     flex-direction: row;
     align-items: center;
 }

package/package.json

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