@ape.swap/bonds-sdk 1.0.167 → 1.0.168

package/dist/components/Bonds/Bonds.js

@@ -59,6 +59,7 @@ import Svg from '../uikit/Svg';
 import '../../scss/Bonds.scss';
 import { BigNumber } from 'bignumber.js';
 import { ChainId } from '../../config/chains';
+import Tooltip from '../Tooltip';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -161,7 +162,7 @@ var Bonds = function (_a) {
     var getDiscountColor = function (discount) {
         return discount < 0 ? 'discount-negative' : 'discount-positive';
     };
-    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: [_jsx(Flex, __assign({ className: "column column-token" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-discount" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-term" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-hotbond" })] })), sortedBonds.map(function (bond) {
+    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: [_jsx(Flex, __assign({ className: "column column-token" }, { children: _jsx(Tooltip, __assign({ body: "test" }, { children: "Tokens" })) })), _jsx(Flex, __assign({ className: "column column-discount" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-term" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-tokensremaining" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-hotbond" })] })), sortedBonds.map(function (bond) {
                         var _a, _b, _c;
                         return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsx(Flex, __assign({ className: "column column-token" }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_a = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _a === void 0 ? void 0 : _a.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_b = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _b !== void 0 ? _b : 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: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_c = bond.discount) !== null && _c !== void 0 ? _c : 0) > 0 && (_jsx(Svg, { icon: "fire", width: "20px" })) })) }))] }), bond.billAddress));
                     })] }))] })));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TooltipProps } from './types';
+declare const TooltipBubble: React.FC<TooltipProps>;
+export default TooltipBubble;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,66 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Box } from 'theme-ui';
+import { placements } from './types';
+import style, { container } from './styles';
+var placementStyles = (_a = {},
+    _a[placements.BOTTOMLEFT] = {
+        top: 'calc(100% + 15px)',
+        left: 0,
+    },
+    _a[placements.BOTTOMRIGHT] = {
+        top: 'calc(100% + 15px)',
+        right: 0,
+    },
+    _a[placements.TOPLEFT] = {
+        bottom: 'calc(100% + 15px)',
+        left: 0,
+    },
+    _a[placements.TOPRIGHT] = {
+        bottom: 'calc(100% + 15px)',
+        right: 0,
+    },
+    _a[placements.ONLYCONTAINERRIGHT] = {
+        top: 'calc(100% + 15px)',
+        right: 0,
+    },
+    _a);
+var TooltipBubble = function (_a) {
+    var width = _a.width, _b = _a.placement, placement = _b === void 0 ? placements.BOTTOMRIGHT : _b, body = _a.body, backgroundColor = _a.backgroundColor, hideTooltip = _a.hideTooltip, children = _a.children, transformTip = _a.transformTip, props = __rest(_a, ["width", "placement", "body", "backgroundColor", "hideTooltip", "children", "transformTip"]);
+    var backgroundColorStyle = backgroundColor
+        ? {
+            backgroundColor: backgroundColor,
+            '&:before': {
+                borderBottomColor: placement === placements.BOTTOMLEFT || placement === placements.BOTTOMRIGHT ? backgroundColor : undefined,
+                borderTopColor: placement === placements.TOPLEFT || placement === placements.TOPRIGHT ? backgroundColor : undefined,
+            },
+        }
+        : {};
+    var handleClick = function (event) {
+        event.stopPropagation();
+    };
+    return (_jsxs(Box, __assign({ sx: container(hideTooltip), onClick: handleClick }, { children: [_jsx(Box, __assign({ sx: __assign({ position: 'absolute' }, (placementStyles[placement] || {})) }, { children: _jsx(Box, __assign({ sx: __assign(__assign(__assign(__assign({ position: 'relative' }, style.default), style[placement]), backgroundColorStyle), { width: width, transform: transformTip }) }, props, { children: body })) })), children] })));
+};
+export default TooltipBubble;

package/dist/components/Tooltip/styles.d.ts

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const container: (hide?: boolean) => ThemeUIStyleObject;
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,60 @@
+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 baseStyle = {
+    p: 9,
+    borderRadius: 'normal',
+    background: 'white2',
+    width: 'max-content',
+    zIndex: 'modal',
+    boxShadow: "0px 0px 30px rgb(200,200,200, .4)",
+};
+var baseDirectionArrow = {
+    content: '""',
+    display: 'block',
+    width: 0,
+    border: '12px solid transparent',
+};
+var topArrow = __assign(__assign({ bottom: 0 }, baseDirectionArrow), { borderBottom: 0, borderTopWidth: '15px', borderTopStyle: 'solid', transform: 'translate(-50%, calc(100%))' });
+var bottomArrow = __assign(__assign({ top: 0 }, baseDirectionArrow), { borderTop: 0, borderBottomWidth: '15px', borderBottomStyle: 'solid', transform: 'translate(-50%, calc(-100%))' });
+export var container = function (hide) { return ({
+    position: 'relative',
+    display: 'inline-block',
+    '& > div:first-of-type': {
+        display: 'none',
+    },
+    '&:hover > div:first-of-type': {
+        display: hide ? 'none' : 'block',
+    },
+}); };
+var styles = {
+    default: __assign({ color: 'text', fontSize: 0, lineHeight: '18px', fontWeight: 'normal' }, baseStyle),
+    bottomRight: {
+        '&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { right: '3%', borderBottomColor: 'white2' }),
+    },
+    bottomLeft: {
+        '&::before': __assign(__assign({ position: 'absolute' }, bottomArrow), { left: 'calc(3% + 15px)', borderBottomColor: 'white2' }),
+    },
+    topRight: {
+        '&::before': __assign(__assign({ position: 'absolute' }, topArrow), { right: '3%', borderTopColor: 'white2' }),
+    },
+    topLeft: {
+        '&::before': __assign(__assign({ position: 'absolute' }, topArrow), { left: 'calc(3% + 15px)', borderTopColor: 'white2' }),
+    },
+    onlyContainerRight: {
+        '&::before': {
+            position: 'absolute',
+            right: '3%',
+            borderBottomColor: 'white2',
+        },
+    },
+};
+export default styles;

package/dist/components/Tooltip/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { BoxProps } from 'theme-ui';
+export declare enum placements {
+    TOPRIGHT = "topRight",
+    TOPLEFT = "topLeft",
+    BOTTOMRIGHT = "bottomRight",
+    BOTTOMLEFT = "bottomLeft",
+    ONLYCONTAINERRIGHT = "onlyContainerRight"
+}
+export type placementProps = `${placements}`;
+export interface TooltipProps extends BoxProps {
+    width?: string;
+    placement?: placementProps;
+    body: ReactNode;
+    hideTooltip?: boolean;
+    transformTip?: string;
+}

package/dist/components/Tooltip/types.js

@@ -0,0 +1,8 @@
+export var placements;
+(function (placements) {
+    placements["TOPRIGHT"] = "topRight";
+    placements["TOPLEFT"] = "topLeft";
+    placements["BOTTOMRIGHT"] = "bottomRight";
+    placements["BOTTOMLEFT"] = "bottomLeft";
+    placements["ONLYCONTAINERRIGHT"] = "onlyContainerRight";
+})(placements || (placements = {}));

package/package.json

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