@ape.swap/bonds-sdk 1.0.42 → 1.0.44

package/dist/components/{Bonds.js → Bonds/Bonds.js}

@@ -45,9 +45,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import { useEffect, useState } from 'react';
+import { ThemeProvider, Flex } from "theme-ui";
+import axios from "axios";
 import { ethers } from 'ethers';
 import { useWeb3React } from "@web3-react/core";
+import styles, { getColumnDiscountStyle } from './styles';
+import getTimePeriods from '../../utils/getTimePeriods';
+import { defaultTheme } from '../../theme';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -91,6 +98,42 @@ var Bonds = function (_a) {
             }
         });
     }); };
-    return (_jsx("div", { children: _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USD TEST" })) }));
+    var _c = useState([]), bondData = _c[0], setBondData = _c[1];
+    var _d = useState([]), hotBonds = _d[0], setHotBonds = _d[1];
+    var vestingTime = function (vestingTerm) {
+        return getTimePeriods(vestingTerm !== null && vestingTerm !== void 0 ? vestingTerm : 0, true);
+    };
+    useEffect(function () {
+        axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
+            var bonds = response.data.bonds.filter(function (x) {
+                return x.soldOut !== true && x.inactive !== true;
+            });
+            setBondData(bonds);
+        });
+    }, []);
+    useEffect(function () {
+        axios.get('https://apeswap-strapi.herokuapp.com/hot-bonds').then(function (response) {
+            var hotBondAddresses = response.data.map(function (bond) { return bond.BondAddress.toLowerCase(); });
+            setHotBonds(hotBondAddresses);
+        });
+    }, []);
+    var sortedBonds = bondData.sort(function (a, b) {
+        var _a, _b;
+        var aIsHot = hotBonds.includes(a.billAddress.toLowerCase()) && ((_a = a.discount) !== null && _a !== void 0 ? _a : 0) > 0;
+        var bIsHot = hotBonds.includes(b.billAddress.toLowerCase()) && ((_b = b.discount) !== null && _b !== void 0 ? _b : 0) > 0;
+        if (aIsHot && !bIsHot) {
+            return -1;
+        }
+        else if (!aIsHot && bIsHot) {
+            return 1;
+        }
+        else {
+            return a.discount - b.discount;
+        }
+    });
+    return (_jsxs(ThemeProvider, __assign({ theme: defaultTheme }, { children: [_jsxs("p", { children: [isActive, "-", account] }), isActive && account && (_jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" }))), _jsxs(Flex, __assign({ className: "container table-container", sx: styles.tableContainer }, { children: [_jsx("h1", { children: connectionString !== null && connectionString !== void 0 ? connectionString : "TEST" }), _jsxs(Flex, __assign({ className: "container header-container", sx: styles.headerContainer }, { children: [_jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Discount" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "ARR" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column column-header" }, { children: "Tokens Remaining" })), _jsx(Flex, { className: "column column-header" })] })), sortedBonds.map(function (bond) {
+                        var _a, _b, _c;
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", sx: styles.bondrowContainer }, { children: [_jsx(Flex, __assign({ className: "column column-token", sx: styles.columnToken }, { children: bond.showcaseTokenName })), _jsx(Flex, __assign({ className: "column column-discount", sx: getColumnDiscountStyle((_a = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _a !== void 0 ? _a : 0) }, { children: "".concat((_b = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _b === void 0 ? void 0 : _b.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr", sx: styles.columnArr }, { children: "".concat("".concat(((((_c = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _c !== void 0 ? _c : 0) * 365) / vestingTime(bond.vestingTerm).days).toFixed(2), "%")) })), _jsx(Flex, __assign({ className: "column column-term", sx: styles.columnTerm }, { children: vestingTime(bond.vestingTerm).days ? "".concat(vestingTime(bond.vestingTerm).days, " D") : '-' })), _jsx(Flex, __assign({ className: "column column-tokensremaining", sx: styles.columnTokensRemaining }, { children: bond.tokensRemaining.split('.')[0] })), _jsx(Flex, { className: "column column-hotbond", sx: styles.hotBond })] })));
+                    })] }))] })));
 };
 export default Bonds;

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

@@ -0,0 +1,4 @@
+import { ThemeUIStyleObject } from 'theme-ui';
+export declare function getColumnDiscountStyle(discount: number): ThemeUIStyleObject;
+export declare const styles: Record<'tableContainer' | 'headerContainer' | 'bondrowContainer' | 'columnToken' | 'columnDiscount' | 'columnArr' | 'columnTerm' | 'columnTokensRemaining' | 'hotBond', ThemeUIStyleObject>;
+export default styles;

package/dist/components/Bonds/styles.js

@@ -0,0 +1,75 @@
+var getDiscountColorStyle = function (discount) {
+    return discount < 0 ? '#DF4141' : '#38A611';
+};
+export function getColumnDiscountStyle(discount) {
+    return {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: getDiscountColorStyle(discount)
+    };
+}
+export var styles = {
+    tableContainer: {
+        width: '80vw',
+        flexDirection: 'column',
+        p: '20px',
+        marginLeft: 'auto',
+        marginRight: 'auto'
+    },
+    headerContainer: {
+        display: 'flex',
+        justifyContent: ['flex-end', 'flex-end', 'flex-end', 'space-around'],
+        padding: '5px',
+        fontWeight: 'bold'
+    },
+    bondrowContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        justifyContent: ['flex-end', 'flex-end', 'flex-end', 'space-around'],
+        backgroundColor: '#151320',
+        marginBottom: '10px',
+        padding: '20px',
+        borderRadius: '10px',
+        border: '1px solid #4B4B53',
+    },
+    columnToken: {
+        width: '100px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    columnDiscount: {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    columnArr: {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    columnTerm: {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    columnTokensRemaining: {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    hotBond: {
+        width: '50px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+};
+export default styles;

package/dist/components/Bonds/type.d.ts

@@ -0,0 +1,33 @@
+import { ChainId } from "@ape.swap/apeswap-lists";
+export interface BondsDataResponse {
+    index: number;
+    cmcId?: number;
+    label: string;
+    chainId: ChainId;
+    type: string;
+    principalToken: string;
+    principalTokenName: string;
+    principalTokenDecimals: number;
+    payoutToken: string;
+    payoutTokenName: string;
+    payoutTokenDecimals: number;
+    discount: number;
+    billAddress: string;
+    billNftAddress: string;
+    initTime: number;
+    soldOut: boolean;
+    inactive: boolean;
+    trueBillPrice: string;
+    maxTotalPayout: string;
+    totalPayoutGiven: string;
+    maxPayout: string;
+    tokensRemaining: string;
+    showcaseToken: string;
+    showcaseTokenName: string;
+    vestingTerm: number;
+    principalTokenPrice: string;
+    payoutTokenPrice: string;
+    priceUsd: string;
+    tags?: string[];
+    arr: string;
+}

package/dist/components/Bonds/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-import MyComponent from './components/MyComponent';
-import Bonds from './components/Bonds';
-export { MyComponent, Bonds };
+import Bonds from './components/Bonds/Bonds';
+export { Bonds };

package/dist/index.js

@@ -1,4 +1,3 @@
 // src/index.ts
-import MyComponent from './components/MyComponent';
-import Bonds from './components/Bonds';
-export { MyComponent, Bonds };
+import Bonds from './components/Bonds/Bonds';
+export { Bonds };

package/dist/theme/base.d.ts

@@ -0,0 +1,103 @@
+import { MediaQueries } from './types';
+export declare const breakpointMap: {
+    [key: string]: number;
+};
+declare const baseTheme: {
+    breakpoints: string[];
+    space: number[];
+    fontSizes: number[];
+    borderWidths: number[];
+    mediaQueries: MediaQueries;
+    fontWeights: {
+        light: number;
+        normal: number;
+        bold: number;
+    };
+    fonts: {
+        body: string;
+        poppins: string;
+    };
+    radii: {
+        small: string;
+        default: string;
+        normal: string;
+        card: string;
+        circle: string;
+    };
+    zIndices: {
+        dropdown: number;
+        modal: number;
+    };
+    styles: {
+        root: {
+            fontFamily: string;
+            webkitFontSmoothing: string;
+            fontWeight: number;
+            color: string;
+            bg: string;
+            textDecoration: string;
+        };
+        a: {
+            color: string;
+            textDecoration: string;
+            ':hover': {
+                color: string;
+                textDecoration: string;
+            };
+        };
+        nav: {
+            textDecoration: string;
+            breakpoints: string[];
+            a: {
+                textDecoration: string;
+            };
+        };
+        progress: {
+            primary: string;
+            color: string;
+            background: string;
+            height: string;
+        };
+        hr: {
+            background: string;
+            height: string;
+            border: string;
+        };
+        h1: {
+            variant: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        h2: {
+            variant: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        h3: {
+            variant: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        h4: {
+            variant: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        h5: {
+            variant: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        banner: {
+            variant: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+        input: {
+            fontFamily: string;
+            fontWeight: string;
+        };
+    };
+};
+export default baseTheme;

package/dist/theme/base.js

@@ -0,0 +1,123 @@
+export var breakpointMap = {
+    xs: 370,
+    sm: 576,
+    md: 852,
+    lg: 968,
+    xl: 1080,
+    xxl: 1200,
+    xxxl: 1550,
+};
+var mediaQueries = {
+    xs: "@media screen and (min-width: ".concat(breakpointMap.xs, "px)"),
+    sm: "@media screen and (min-width: ".concat(breakpointMap.sm, "px)"),
+    md: "@media screen and (min-width: ".concat(breakpointMap.md, "px)"),
+    lg: "@media screen and (min-width: ".concat(breakpointMap.lg, "px)"),
+    xl: "@media screen and (min-width: ".concat(breakpointMap.xl, "px)"),
+    xxl: "@media screen and (min-width: ".concat(breakpointMap.xxl, "px)"),
+    xxxl: "@media screen and (min-width: ".concat(breakpointMap.xxxl, "px)"),
+    nav: "@media screen and (min-width: ".concat(breakpointMap.lg, "px)"),
+};
+var baseTheme = {
+    breakpoints: [
+        "".concat(breakpointMap.xs, "px"),
+        "".concat(breakpointMap.sm, "px"),
+        "".concat(breakpointMap.md, "px"),
+        "".concat(breakpointMap.lg, "px"),
+        "".concat(breakpointMap.xl, "px"),
+        "".concat(breakpointMap.xxl, "px"),
+        "".concat(breakpointMap.xxxl, "px"),
+    ],
+    space: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 48, 64],
+    fontSizes: [12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 48, 64],
+    borderWidths: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 48, 64],
+    mediaQueries: mediaQueries,
+    fontWeights: {
+        light: 400,
+        normal: 600,
+        bold: 700,
+    },
+    fonts: {
+        body: 'Poppins, sans-serif',
+        poppins: 'Poppins',
+    },
+    radii: {
+        small: '6px',
+        default: '16px',
+        normal: '10px',
+        card: '32px',
+        circle: '50%',
+    },
+    zIndices: { dropdown: 10, modal: 102 },
+    styles: {
+        root: {
+            fontFamily: 'body',
+            webkitFontSmoothing: 'antialiasing',
+            fontWeight: 600,
+            color: 'text',
+            bg: 'white1',
+            textDecoration: 'none',
+        },
+        a: {
+            color: 'text',
+            textDecoration: 'none',
+            ':hover': {
+                color: 'secondary',
+                textDecoration: 'underline',
+            },
+        },
+        nav: {
+            textDecoration: 'none',
+            breakpoints: ["@media screen and (min-width: ".concat(breakpointMap.lg, "px)")],
+            a: {
+                textDecoration: 'none',
+            },
+        },
+        progress: {
+            primary: 'primary',
+            color: 'green',
+            background: '#DAA628',
+            height: '20px',
+        },
+        hr: {
+            background: 'dividerColor',
+            height: '1px',
+            border: 'none',
+        },
+        h1: {
+            variant: 'text.heading',
+            fontSize: '30px',
+            lineHeight: '45px',
+        },
+        h2: {
+            variant: 'text.heading',
+            fontSize: '25px',
+            lineHeight: '37px',
+        },
+        h3: {
+            variant: 'text.heading',
+            fontSize: '22px',
+            lineHeight: '33px',
+        },
+        h4: {
+            variant: 'text.heading',
+            fontSize: '20px',
+            lineHeight: '30px',
+        },
+        h5: {
+            variant: 'text.heading',
+            fontSize: '16px',
+            lineHeight: '24px',
+        },
+        banner: {
+            variant: 'text.heading',
+            fontWeight: '800',
+            fontSize: '60px',
+            lineHeight: '66px',
+        },
+        input: {
+            fontFamily: 'base',
+            fontWeight: 'base',
+        },
+    },
+};
+export default baseTheme;

package/dist/theme/colors.d.ts

@@ -0,0 +1,88 @@
+declare const abondColors: {
+    white1: string;
+    white2: string;
+    white3: string;
+    white4: string;
+    white5: string;
+    brandPrimary140: string;
+    navBar: string;
+    primaryButton: string;
+    secondary: string;
+    footer: string;
+    success: string;
+    error: string;
+    yellow: string;
+    primaryButtonDisable: string;
+    primaryButtonHovered: string;
+    textDisabledButton: string;
+    text: string;
+    textDisabled: string;
+    home: {
+        c1: string;
+        c2: string;
+        c3: string;
+        cShadow: string;
+        hideCircles: string;
+        title: string;
+        shadowImage: string;
+    };
+    backgroundDisabled: string;
+    listTagBg: {
+        ape: string;
+        launch: string;
+        reserve: string;
+        liquidity: string;
+        ark: string;
+        hot: string;
+        new: string;
+        default: string;
+        auto: string;
+        beta: string;
+        max: string;
+        real_yield: string;
+        bondLp: string;
+        migration: string;
+        cex_fund: string;
+        expired: string;
+        permatlock: string;
+    };
+    listTagTextColor: {
+        liquidity: string;
+        cex_fund: string;
+    };
+    body: string;
+    lvl1: string;
+    lvl2: string;
+    primaryBright: string;
+    primaryDark: string;
+    info: string;
+    secondaryButtonDisableBg: string;
+    secondaryButtonDisableColor: string;
+    buttonDisabledText: string;
+    dividerColor: string;
+    textareaColor: string;
+    heading: string;
+    black: string;
+    gradient: string;
+    smartGradient: string;
+    white2Opacity09: string;
+    radioChecked: string;
+    navMenuLogo: string;
+    input: string;
+    primaryGray: string;
+    gray: string;
+    brown: string;
+    hoveredYellow: string;
+    hoveredSuccess: string;
+    hoveredDanger: string;
+    modalOverlay: string;
+    opacityBadge: string;
+    gnanaWarningBackground: string;
+    moon: string;
+    island: string;
+    migration: string;
+    bg1: string;
+    bg2: string;
+    progressBar: string;
+};
+export default abondColors;

package/dist/theme/colors.js

@@ -0,0 +1,92 @@
+var abondColors = {
+    // main background gradients
+    white1: '#0E0D16',
+    white2: '#161420',
+    white3: '#1F1D29',
+    white4: '#282632',
+    white5: '#312F3A',
+    brandPrimary140: '#C1BDE7',
+    navBar: 'rgba(22, 20, 32, 0.8)',
+    primaryButton: '#6560C5',
+    secondary: '#E69275',
+    footer: '#000000',
+    success: '#38A611',
+    error: '#DF4141',
+    yellow: '#FFB300',
+    // Button colors
+    primaryButtonDisable: '#48475B',
+    primaryButtonHovered: '#8480D1',
+    textDisabledButton: '#73728E',
+    // Text-related colors
+    text: '#FAFAFA',
+    textDisabled: '#424242',
+    home: {
+        c1: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+        c2: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+        c3: 'radial-gradient(50% 50% at 50% 50%, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.02) 100%)',
+        cShadow: 'transparent',
+        hideCircles: '#0E0D16',
+        title: 'linear-gradient(98.79deg, #6560C5 -2.37%, #E07753 100%)',
+        shadowImage: 'rgba(101, 96, 197, 0.25)',
+    },
+    backgroundDisabled: '#3c3742',
+    listTagBg: {
+        ape: 'linear-gradient(99.09deg, rgba(161, 101, 82, 0.8) 0%, rgba(255, 179, 0, 0.8) 106.96%)',
+        launch: 'rgba(213, 49, 49, 0.2)',
+        reserve: 'rgba(90, 208, 109, 0.2)',
+        liquidity: 'rgba(60, 106, 181, 0.19)',
+        ark: 'rgba(208, 126, 90, 0.8)',
+        hot: '#DF4141',
+        new: '#38A611',
+        default: '#38A611',
+        auto: '#DF4141',
+        beta: '#38A611',
+        max: '#38A611',
+        real_yield: '#F0B90B',
+        bondLp: 'rgba(254, 185, 1, 0.2)',
+        migration: '#6F6AC930',
+        cex_fund: 'rgba(213, 49, 49, 0.2)',
+        expired: '#E07753',
+        permatlock: '#38A611',
+    },
+    listTagTextColor: {
+        liquidity: '#3B78D3',
+        cex_fund: '#D53131',
+    },
+    //
+    body: '#FDFBF5',
+    lvl1: '#F1EADA',
+    lvl2: '#EADFC7',
+    primaryBright: '#FAFAFA',
+    primaryDark: '#0B0B0B',
+    info: '#4D4040',
+    secondaryButtonDisableBg: '#F1EADA',
+    secondaryButtonDisableColor: 'rgba(66, 66, 66, 0.5)',
+    buttonDisabledText: '#A09F9C',
+    dividerColor: '#E2E2E2',
+    textareaColor: '#4D4040',
+    heading: '#4D4040',
+    black: '#000000',
+    gradient: 'linear-gradient(53.53deg, #A16552 15.88%, #E1B242 92.56%)',
+    smartGradient: 'linear-gradient(94.44deg, #BA801E -9.73%, #E7CF67 40.14%, #BA801E 93.01%)',
+    white2Opacity09: 'rgba(241, 234, 218, 0.50)',
+    radioChecked: '#FAFAFA',
+    navMenuLogo: '#C8BA9C',
+    input: '#4D4040',
+    primaryGray: '#4D40407F',
+    gray: '#7A7A7A',
+    brown: '#4D4040',
+    hoveredYellow: '#FFDA00',
+    hoveredSuccess: '#38A611B3',
+    hoveredDanger: '#DF4141B3',
+    modalOverlay: 'rgba(66, 66, 66, 0.5)',
+    opacityBadge: 'rgba(66, 66, 66, 0.5)',
+    gnanaWarningBackground: '#FFB300',
+    moon: '#7A7A7A',
+    island: '#4D4040',
+    migration: '#6560C5',
+    bg1: 'linear-gradient(180deg, #FFFFFF 0%, #EEDFC7 10%, #FFFFFF 40%, #FEFAE0 50%, #EEDFC7 100%), linear-gradient(180deg, #FEFCEC 27.58%, #EEDFC7 79.74%, #FEFAE0 131.91%, #F5ECDD 154.81%)',
+    bg2: 'linear-gradient(180deg, #FEFCEC 27.58%, #EEDFC7 79.74%, #FEFAE0 131.91%, #F5ECDD 154.81%)',
+    progressBar: 'linear-gradient(90deg, #312E7A 0%, #5C4FAE 41.5%, #AD6568 74.5%, #AD6E66 100%)',
+};
+export default abondColors;