@ape.swap/bonds-sdk 1.0.424 → 1.0.426

package/dist/components/YourBonds/YourBonds.js

@@ -75,6 +75,7 @@ import useCurrentTime from '../../hooks/useTimer';
 import { getPendingVesting } from '../../hooks/usePendingVesting';
 import axios from 'axios';
 import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
+import { Input } from '../uikit-sdk/Input';
 var YourBonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -119,7 +120,7 @@ var YourBonds = function (_a) {
             }
         });
     }); };
-    // Fetch data for user owned bill
+    // Fetch data
     var _d = useState([]), bondData = _d[0], setBondData = _d[1];
     var _e = useState([]), mappedUserBills = _e[0], setMappedUserBills = _e[1];
     useEffect(function () {
@@ -209,7 +210,7 @@ var YourBonds = function (_a) {
         });
         setSortedBonds(sorted);
     }, [sortConfig, mappedUserBills]);
-    // Functions to calculate display values for each row
+    // Functions for calculations
     var chainId = useWeb3React().chainId;
     var currentTime = useCurrentTime() / 1000;
     var vestingTimeRemaining = function (userBill) {
@@ -223,6 +224,14 @@ var YourBonds = function (_a) {
         var _a, _b, _c;
         return getBalanceNumber(new BigNumber(userBill.pendingRewards), (_c = (_b = (_a = userBill.bond.earnToken) === null || _a === void 0 ? void 0 : _a.decimals) === null || _b === void 0 ? void 0 : _b[chainId]) !== null && _c !== void 0 ? _c : 18);
     };
+    var claimableNumber = function (userBill) {
+        var _a;
+        var val = (claimable(userBill) * ((_a = parseFloat(earnTokenPrice(userBill.bond))) !== null && _a !== void 0 ? _a : 0));
+        return val !== null && val !== void 0 ? val : 0;
+    };
+    var hasPendingRewards = function (bills) {
+        return bills.some(function (bill) { return parseFloat(bill.pendingRewards) > 0; });
+    };
     var earnTokenPrice = function (bond) {
         var _a;
         return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
@@ -235,21 +244,38 @@ var YourBonds = function (_a) {
         setIsModalOpen(true);
         navigate("/YourBonds/?bondAddress=".concat(bill.address, "&bondChain=").concat(bill.bond.chainId), { replace: true });
     };
-    var _k = useState(false), bondsRendered = _k[0], setBondsRendered = _k[1];
+    // Search logic
+    var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = useState(sortedBonds), filteredBonds = _l[0], setFilteredBonds = _l[1];
+    useEffect(function () {
+        if (inputValue === '') {
+            setFilteredBonds(sortedBonds);
+        }
+        else {
+            setFilteredBonds(sortedBonds.filter(function (bond) {
+                return bond.bond.showcaseTokenName.toLowerCase().includes(inputValue.toLowerCase());
+            }));
+        }
+    }, [inputValue, sortedBonds]);
+    var handleInputChange = function (event) {
+        setInputValue(event.target.value);
+    };
+    // Page render logic
+    var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
     useEffect(function () {
-        if (sortedBonds.length > 0) {
+        if (filteredBonds.length > 0) {
             setBondsRendered(true);
         }
-    }, [sortedBonds]);
-    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: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children: _jsx(Flex, { className: "column column-tokeninfoname" }) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column header-claimable" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Claimable" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('claimable'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column header-pending" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Pending" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('pending'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column header-terms" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, __assign({ className: "column header-claimall" }, { children: _jsx(Button, __assign({ disabled: !account, sx: {
+    }, [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: [_jsx(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...' }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column header-claimable" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Claimable" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('claimable'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column header-pending" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Pending" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('pending'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column header-terms" }, { children: [_jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px' } }, { children: "Terms" })), _jsx(Flex, __assign({ className: "column header-icon", sx: { opacity: '0.6' }, onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, __assign({ className: "column header-claimall" }, { children: _jsx(Button, __assign({ disabled: !account && !hasPendingRewards(filteredBonds), sx: {
                                                 height: ['36px', '36px', '36px', '26px'],
                                                 lineHeight: '12px',
                                                 fontSize: '14px',
                                                 fontWeight: 600,
                                                 width: '100%',
-                                            } }, { children: "CLAIM ALL" })) }))] }))] })), sortedBonds.map(function (bill) {
+                                            } }, { children: "CLAIM ALL" })) }))] }))] })), filteredBonds.map(function (bill) {
                         var _a, _b;
-                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill); } }, { children: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children: _jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-claimable" }, { children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' } }, { children: "($".concat((claimable(bill) * ((_a = parseFloat(earnTokenPrice(bill.bond))) !== null && _a !== void 0 ? _a : 0)).toFixed(2), ")") }))] })), _jsxs(Flex, __assign({ className: "column column-pending" }, { children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' } }, { children: "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")") }))] })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") })), _jsx(Flex, __assign({ className: "column column-claimall" }, { children: _jsx(Button, __assign({ disabled: !account, onClick: function (event) {
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bill); } }, { children: [_jsx(Flex, __assign({ className: "column column-tokens" }, { children: _jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) })) })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-claimable" }, { children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' } }, { children: "($".concat((claimable(bill) * ((_a = parseFloat(earnTokenPrice(bill.bond))) !== null && _a !== void 0 ? _a : 0)).toFixed(2), ")") }))] })), _jsxs(Flex, __assign({ className: "column column-pending" }, { children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, __assign({ sx: { opacity: '0.6', fontSize: '12px', paddingLeft: '5px' } }, { children: "($".concat((totalPending(bill) * ((_b = parseFloat(earnTokenPrice(bill.bond))) !== null && _b !== void 0 ? _b : 0)).toFixed(2), ")") }))] })), _jsx(Flex, __assign({ className: "column column-terms" }, { children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") })), _jsx(Flex, __assign({ className: "column column-claimall" }, { children: _jsx(Button, __assign({ disabled: !account && (claimableNumber(bill) === 0), onClick: function (event) {
                                                     event.stopPropagation();
                                                     // Add your claim logic here
                                                 }, sx: {

package/dist/scss/Bonds.scss

@@ -49,6 +49,10 @@
     width: 40%;
 }
 
+.column.column-search {
+    padding-bottom: 15px; 
+}
+
 .column.column-tokeninfoname {
     width: 100%;
     height: 100%;

package/dist/scss/YourBonds.scss

@@ -43,6 +43,10 @@
     width: 40%;
 }
 
+.column.column-search {
+    padding-bottom: 15px; 
+}
+
 .column.column-tokeninfoname {
     width: 100%;
     height: 100%;
@@ -85,6 +89,7 @@
     align-items: center;
     width: 30%;
     padding-right: 20px;
+    padding-bottom: 15px;
 }
 
 .column.column-claimable {

package/package.json

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