@ape.swap/bonds-sdk 1.0.430 → 1.0.431

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

@@ -3,7 +3,7 @@ import { BondsDataResponse } from "../../../types/bonds";
 interface BondRowProps {
     key: string;
     bond: BondsDataResponse;
-    hotBonds: string[];
+    hotBonds?: string[];
     rowClick: (bond: BondsDataResponse) => void;
 }
 declare const BondRow: React.FC<BondRowProps>;

package/dist/components/Bonds/BondRow/BondRow.js

@@ -77,6 +77,6 @@ var BondRow = function (_a) {
                             }, showTooltip: true, toolTip: "".concat(remainingTokensFormat(bond), " ").concat(bond.payoutTokenName, " (").concat(formatDollar({
                                 num: remainingTokensUsd(bond).toNumber(),
                                 isPrice: true,
-                            }), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: hotBonds.includes(bond.billAddress.toLowerCase()) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
+                            }), ")") }) })), _jsx(Flex, __assign({ className: "column column-hotbond" }, { children: _jsx(Flex, __assign({ className: "column column-icon" }, { children: (hotBonds === null || hotBonds === void 0 ? void 0 : hotBonds.includes(bond.billAddress.toLowerCase())) && ((_d = bond.discount) !== null && _d !== void 0 ? _d : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
 };
 export default BondRow;

package/dist/components/Bonds/BondRow/BondRowsByChain.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BondsDataResponse } from '../../../types/bonds';
+declare const BondRowsByChain: ({ bonds, hotBonds, rowClick }: {
+    bonds: BondsDataResponse[];
+    hotBonds?: string[] | undefined;
+    rowClick: (bond: BondsDataResponse) => void;
+}) => React.JSX.Element;
+export default BondRowsByChain;

package/dist/components/Bonds/BondRow/BondRowsByChain.js

@@ -0,0 +1,53 @@
+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 { useEffect, useRef, useState } from 'react';
+import { Flex } from '../../../components/uikit-sdk';
+import { ChainId, MAINNET_CHAINS } from '../../../config/constants/chains';
+import BondRowsWithTitle from './BondRowsWithTitle';
+var BondRowsByChain = function (_a) {
+    var bonds = _a.bonds, hotBonds = _a.hotBonds, rowClick = _a.rowClick;
+    //used to render list only on client
+    var _b = useState(false), show = _b[0], setShow = _b[1];
+    var observerRef = useRef(null);
+    useEffect(function () {
+        var observer;
+        observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            if (entry.isIntersecting) {
+                setShow(true);
+                if (observer) {
+                    observer.disconnect();
+                }
+            }
+        }, {
+            rootMargin: '0px',
+            threshold: 1,
+        });
+        if (observerRef.current) {
+            observer.observe(observerRef.current);
+        }
+        return function () {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, []);
+    return (_jsxs(Flex, __assign({ sx: { width: '100%', flexDirection: 'column', mt: '5px' } }, { children: [[ChainId.MAINNET].map(function (chain, index) {
+                return (_jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, rowClick: rowClick }, chain));
+            }), [ChainId.BSC].map(function (chain, index) {
+                return (_jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, hotBonds: hotBonds, rowClick: rowClick }, chain));
+            }), (MAINNET_CHAINS.slice(2, MAINNET_CHAINS.length).map(function (chain, index) {
+                return (_jsx(BondRowsWithTitle, { chain: chain, bonds: bonds, rowClick: rowClick }, chain));
+            }))] })));
+};
+export default BondRowsByChain;

package/dist/components/Bonds/BondRow/BondRowsWithTitle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BondsDataResponse } from "../../../types/bonds";
+declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, rowClick, }: {
+    chain: number;
+    bonds: BondsDataResponse[];
+    hotBonds?: string[] | undefined;
+    rowClick: (bond: BondsDataResponse) => void;
+}) => import("react").JSX.Element;
+export default BondRowsWithTitle;

package/dist/components/Bonds/BondRow/BondRowsWithTitle.js

@@ -0,0 +1,28 @@
+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 "../../uikit-sdk";
+import { AnimatePresence, motion } from "framer-motion";
+import ChainTitle from "./ChainTitle";
+import BondRow from "./BondRow";
+var BondRowsWithTitle = function (_a) {
+    var chain = _a.chain, bonds = _a.bonds, hotBonds = _a.hotBonds, rowClick = _a.rowClick;
+    var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
+    var key = chain;
+    return (_jsx(Flex, __assign({ sx: { width: '100%', flexDirection: 'column' } }, { children: _jsxs(AnimatePresence, __assign({ initial: false }, { children: [_jsx(ChainTitle, { chain: chain, pt: '5px' }), billsFilteredByChain.length > 0 && (_jsx(motion.div, __assign({ initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+                        position: 'relative',
+                        overflow: 'hidden',
+                        width: '100%',
+                        marginTop: '0px',
+                    } }, { children: billsFilteredByChain === null || billsFilteredByChain === void 0 ? void 0 : billsFilteredByChain.map(function (bill) { return (_jsx(BondRow, { bond: bill, hotBonds: hotBonds, rowClick: rowClick }, bill.billAddress)); }) }), key))] })) }), key));
+};
+export default BondRowsWithTitle;

package/dist/components/Bonds/BondRow/ChainTitle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ChainTitle: ({ chain, pt, }: {
+    chain: number;
+    pt: string;
+}) => React.JSX.Element;
+export default ChainTitle;

package/dist/components/Bonds/BondRow/ChainTitle.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 { NETWORK_LABEL } from '../../../config/constants/chains';
+import { Flex, Svg } from '../../../components/uikit-sdk';
+var ChainTitle = function (_a) {
+    var chain = _a.chain, pt = _a.pt;
+    return (_jsxs(Flex, __assign({ sx: {
+            pt: pt,
+            pb: '10px',
+            color: 'textDisabledButton',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            display: 'flex',
+            width: '200px',
+        } }, { children: [NETWORK_LABEL[chain], " Bonds", _jsx(Flex, __assign({ sx: { ml: '7px' } }, { children: _jsx(Svg, { icon: "caret", direction: 'down', width: 8, color: "textDisabledButton" }) }))] })));
+};
+export default ChainTitle;

package/dist/components/Bonds/Bonds.js

@@ -70,9 +70,9 @@ import { ChainId } from '../../enum/apeswaplists';
 import { formatValue } from '../../utils/formatNumbers';
 import { TooltipText } from '../../enum/tooltips';
 import { TooltipBubble, Svg } from '../uikit-sdk';
-import { BLOCK_EXPLORER, MAINNET_CHAINS } from '../../config/constants/chains';
+import { BLOCK_EXPLORER } from '../../config/constants/chains';
 import { Input } from '../uikit-sdk/Input';
-import BondRow from './BondRow/BondRow';
+import BondRowsByChain from './BondRow/BondRowsByChain';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -269,12 +269,39 @@ var Bonds = function (_a) {
             setBondsRendered(true);
         }
     }, [filteredBonds]);
-    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_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-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] } }, { children: _jsx(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), filteredBonds.map(function (bond) { return (_jsxs(Flex, __assign({ sx: { width: '100%', flexDirection: 'column', mt: '5px' } }, { children: [[ChainId.MAINNET].map(function (chain, index) {
-                                return (_jsx(BondRow, { bond: bond, hotBonds: hotBonds, rowClick: rowClick }, bond.billAddress));
-                            }), [ChainId.BSC].map(function (chain, index) {
-                                return (_jsx(BondRow, { bond: bond, hotBonds: hotBonds, rowClick: rowClick }, bond.billAddress));
-                            }), (MAINNET_CHAINS.slice(2, MAINNET_CHAINS.length).map(function (chain, index) {
-                                return (_jsx(BondRow, { bond: bond, hotBonds: hotBonds, rowClick: rowClick }, bond.billAddress));
-                            }))] }))); })] })))] })));
+    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_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-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] } }, { children: _jsx(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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 header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { 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, __assign({ className: "column header-icon", onClick: function () { return handleSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })), filteredBonds.map(function (bond) { return (_jsx(BondRowsByChain, { bonds: filteredBonds, hotBonds: hotBonds, rowClick: rowClick }, bond.billAddress)
+                    // <Flex sx={{ width: '100%', flexDirection: 'column', mt: '5px' }}>
+                    //     {[ChainId.MAINNET].map((chain, index) => {
+                    //         return (
+                    //             <BondRow 
+                    //                 key={bond.billAddress} 
+                    //                 bond={bond} 
+                    //                 hotBonds={hotBonds} 
+                    //                 rowClick={rowClick} 
+                    //             />
+                    //         )
+                    //     })}
+                    //     {[ChainId.BSC].map((chain, index) => {
+                    //         return (
+                    //             <BondRow 
+                    //                 key={bond.billAddress} 
+                    //                 bond={bond} 
+                    //                 hotBonds={hotBonds} 
+                    //                 rowClick={rowClick} 
+                    //             />
+                    //         )
+                    //     })}
+                    //     {(MAINNET_CHAINS.slice(2, MAINNET_CHAINS.length).map((chain, index) => {
+                    //         return (
+                    //             <BondRow 
+                    //                 key={bond.billAddress} 
+                    //                 bond={bond} 
+                    //                 hotBonds={hotBonds} 
+                    //                 rowClick={rowClick} 
+                    //             />
+                    //         )
+                    //     }))}
+                    // </Flex>
+                    ); })] })))] })));
 };
 export default Bonds;

package/package.json

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