@ape.swap/bonds-sdk 1.0.169 → 1.0.170

package/dist/components/Bonds/Bonds.js

@@ -59,7 +59,8 @@ import Svg from '../uikit/Svg';
 import '../../scss/Bonds.scss';
 import { BigNumber } from 'bignumber.js';
 import { ChainId } from '../../config/chains';
-import Tooltip from '../Tooltip';
+import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
+import ProgressBar from '../ProgressBar/ProgressBar';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -162,9 +163,15 @@ 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: _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) {
+    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) {
                         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));
+                        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: _jsx(ProgressBarWrapper, { title: '', value: _jsx(ProgressBar, { value: new BigNumber(bond.tokensRemaining).div(bond.maxTotalPayout).times(100).toNumber() }), style: {
+                                            width: '127px',
+                                            height: '25px',
+                                            flexDirection: 'column',
+                                            justifyContent: 'center',
+                                            display: ['none', 'none', 'none', 'flex'],
+                                        }, showTooltip: false }) })), _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));
                     })] }))] })));
 };
 export default Bonds;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Flex: ({ children, ...props }: any) => React.JSX.Element;
+export default Flex;

package/dist/components/Flex/index.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);
+};
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Flex as ThemeUIFlex } from 'theme-ui';
+var Flex = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return _jsx(ThemeUIFlex, __assign({}, props, { children: children }));
+};
+export default Flex;

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ProgressBarProps {
+    value: number;
+    color?: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.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 } from "theme-ui/jsx-runtime";
+import { Box, Flex } from 'theme-ui';
+var ProgressBar = function (_a) {
+    var value = _a.value, _b = _a.color, color = _b === void 0 ? 'text' : _b;
+    return (_jsx(Flex, __assign({ sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' } }, { children: _jsx(Box, __assign({ sx: {
+                width: '100%',
+                height: '5px',
+                backgroundColor: 'white4',
+                borderRadius: '10px',
+                overflow: 'hidden',
+            } }, { children: _jsx(Box, { sx: {
+                    width: "".concat(value <= 3 ? 3 : value, "%"),
+                    background: color,
+                    borderRadius: '10px',
+                    height: '100%',
+                } }) })) })));
+};
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBarWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface ProgressBarWrapperProps {
+    title?: string;
+    value?: React.ReactNode;
+    value2Direction?: 'column' | 'row';
+    toolTip?: string;
+    toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft';
+    toolTipTransform?: string;
+    style?: ThemeUIStyleObject;
+    showTooltip?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressBarWrapperProps>;
+export default _default;

package/dist/components/ProgressBar/ProgressBarWrapper.js

@@ -0,0 +1,25 @@
+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 React from 'react';
+import { useTranslation } from '../../contexts/Localization';
+import { styles } from './styles';
+import Flex from '../Flex';
+import Text from '../Text';
+import TooltipBubble from '../Tooltip';
+import Skeleton from '../Skeleton';
+var ProgressBarWrapper = function (_a) {
+    var title = _a.title, value = _a.value, style = _a.style, showTooltip = _a.showTooltip, toolTipPlacement = _a.toolTipPlacement, toolTipTransform = _a.toolTipTransform, toolTip = _a.toolTip;
+    var t = useTranslation().t;
+    return (_jsxs(Flex, __assign({ sx: style }, { children: [_jsx(Flex, __assign({ sx: { alignItems: 'center' } }, { children: _jsx(Text, __assign({ sx: styles.titleText }, { children: t("".concat(title)) })) })), showTooltip ? (_jsx(Flex, __assign({ sx: { alignItems: 'center', width: '100%' } }, { children: _jsx(TooltipBubble, __assign({ placement: toolTipPlacement, transformTip: toolTipTransform, body: _jsx(Flex, __assign({ sx: { justifyContent: 'center' } }, { children: toolTip })), width: "250px" }, { children: _jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center', width: '127px' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })) })) }))) : (_jsx(Flex, __assign({ sx: { justifyContent: 'center', alignItems: 'center' } }, { children: value ? value : _jsx(Skeleton, { sx: styles.skeleton }) })))] })));
+};
+export default React.memo(ProgressBarWrapper);

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

@@ -0,0 +1,2 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const styles: Record<'listCardContainer' | 'listViewContainer' | 'titleContainer' | 'infoContentMobile' | 'tokensContainer' | 'titleText' | 'skeleton' | 'valueText' | 'secondaryText' | 'cardContentContainer' | 'animationDiv' | 'expandedWrapper', ThemeUIStyleObject>;

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,82 @@
+export var styles = {
+    listCardContainer: {
+        borderRadius: 0,
+        flexDirection: ['column', 'column', 'column', 'row'],
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        background: 'white2',
+        borderBottom: '1px solid rgba(226, 226, 226, .2)',
+        padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],
+        margin: '0 10px 0 10px',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+        width: '100%',
+        height: ['unset', 'unset', 'unset', '86px'],
+    },
+    listViewContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+    },
+    titleContainer: {
+        width: '100%',
+        justifyContent: 'space-between',
+        my: '5px',
+    },
+    infoContentMobile: {
+        display: ['flex', 'flex', 'flex', 'none'],
+        alignItems: 'center',
+    },
+    tokensContainer: {
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    },
+    valueText: {
+        fontSize: ['12px', '12px', '12px', '14px'],
+        color: 'primaryBright',
+        lineHeight: '16px',
+        fontWeight: 700,
+        mr: '5px',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    secondaryText: {
+        fontSize: '12px',
+        color: 'gray',
+        lineHeight: '16px',
+        fontWeight: 400,
+    },
+    cardContentContainer: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    animationDiv: {
+        position: 'relative',
+        width: '100%',
+        maxWidth: ['500px', '500px', '500px', '100%'],
+        minWidth: '300px',
+    },
+    expandedWrapper: {
+        background: 'white3',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        padding: '15px 10px',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SkeletonProps } from './types';
+declare const Skeleton: ({ variant, animation, ...props }: SkeletonProps | any) => React.JSX.Element;
+export default Skeleton;

package/dist/components/Skeleton/index.js

@@ -0,0 +1,31 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Box } from 'theme-ui';
+import { animation as ANIMATION, variant as VARIANT } from './types';
+import styles from './styles';
+var Skeleton = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? VARIANT.RECT : _b, _c = _a.animation, animation = _c === void 0 ? ANIMATION.PULSE : _c, props = __rest(_a, ["variant", "animation"]);
+    return (_jsx(Box, __assign({}, props, { sx: __assign(__assign({}, (animation === ANIMATION.WAVES ? styles.waves : styles.pulse)), { height: props.height, width: props.width, borderRadius: variant === VARIANT.RECT ? '10px' : '50%' }) })));
+};
+export default Skeleton;

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

@@ -0,0 +1,5 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare const waves: import("@emotion/serialize").Keyframes;
+export declare const pulse: import("@emotion/serialize").Keyframes;
+declare const styles: Record<string, ThemeUIStyleObject>;
+export default styles;

package/dist/components/Skeleton/styles.js

@@ -0,0 +1,40 @@
+import { keyframes } from '@emotion/react';
+export var waves = keyframes({
+    from: { left: '-150px' },
+    to: { left: '100%' },
+});
+export var pulse = keyframes({
+    '0%': { opacity: 1 },
+    '50%': { opacity: 0.4 },
+    '100%': { opacity: 1 },
+});
+var styles = {
+    waves: {
+        position: 'relative',
+        overflow: 'hidden',
+        transform: 'translate3d(0, 0, 0)',
+        borderRadius: '',
+        minHeight: '20px',
+        display: 'block',
+        backgroundColor: 'backgroundDisabled',
+        '&:before': {
+            content: "\"\"",
+            position: 'absolute',
+            backgroundImage: 'linear-gradient(90deg, transparent, rgba(243, 243, 243, 0.3), transparent)',
+            top: 0,
+            left: '-150px',
+            height: '100%',
+            width: '250px',
+            animation: "".concat(waves, " 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite"),
+        },
+    },
+    pulse: {
+        animation: "".concat(pulse, " 2s infinite ease-out"),
+        transform: 'translate3d(0, 0, 0)',
+        borderRadius: '2px',
+        minHeight: '20px',
+        display: 'block',
+        backgroundColor: 'backgroundDisabled',
+    },
+};
+export default styles;

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

@@ -0,0 +1,18 @@
+import { BoxProps } from 'theme-ui';
+export declare enum animation {
+    WAVES = "waves",
+    PULSE = "pulse"
+}
+export declare enum variant {
+    RECT = "rect",
+    CIRCLE = "circle"
+}
+type Animation = `${animation}`;
+type Variant = `${variant}`;
+export interface SkeletonProps extends BoxProps {
+    animation?: Animation;
+    variant?: Variant;
+    width?: string | number;
+    height?: string | number;
+}
+export {};

package/dist/components/Skeleton/types.js

@@ -0,0 +1,10 @@
+export var animation;
+(function (animation) {
+    animation["WAVES"] = "waves";
+    animation["PULSE"] = "pulse";
+})(animation || (animation = {}));
+export var variant;
+(function (variant) {
+    variant["RECT"] = "rect";
+    variant["CIRCLE"] = "circle";
+})(variant || (variant = {}));

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextProps } from './types';
+declare const Text: ({ variant, weight, size, children, color, ...props }: TextProps | any) => React.JSX.Element;
+export default Text;

package/dist/components/Text/index.js

@@ -0,0 +1,35 @@
+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;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { Text as ThemeUIText } from 'theme-ui';
+import { variants } from './types';
+var Text = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? variants.NORMAL : _b, _c = _a.weight, weight = _c === void 0 ? variants.NORMAL : _c, size = _a.size, children = _a.children, _d = _a.color, color = _d === void 0 ? 'text' : _d, props = __rest(_a, ["variant", "weight", "size", "children", "color"]);
+    return (_jsx(ThemeUIText, __assign({}, props, { sx: {
+            variant: variant === variants.LINK ? "flex.".concat(variant) : "text.".concat(variant),
+            color: color,
+            fontWeight: weight,
+            fontSize: size,
+        } }, { children: children })));
+};
+export default Text;

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

@@ -0,0 +1,23 @@
+import { TextProps as ThemeUITextProps } from 'theme-ui';
+export declare enum variants {
+    SMALL = "sm",
+    NORMAL = "md",
+    LARGE = "lg",
+    LINK = "link"
+}
+export declare enum weights {
+    LIGHT = "light",
+    NORMAL = "normal",
+    BOLD = "bold"
+}
+type variantProps = `${variants}`;
+type weightProps = `${weights}` | number;
+type sizeProps = string;
+export interface TextProps extends Omit<ThemeUITextProps, 'sx'> {
+    variant?: variantProps;
+    weight?: weightProps;
+    color?: string;
+    size?: sizeProps;
+    [key: string]: any;
+}
+export {};

package/dist/components/Text/types.js

@@ -0,0 +1,13 @@
+export var variants;
+(function (variants) {
+    variants["SMALL"] = "sm";
+    variants["NORMAL"] = "md";
+    variants["LARGE"] = "lg";
+    variants["LINK"] = "link";
+})(variants || (variants = {}));
+export var weights;
+(function (weights) {
+    weights["LIGHT"] = "light";
+    weights["NORMAL"] = "normal";
+    weights["BOLD"] = "bold";
+})(weights || (weights = {}));

package/package.json

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