@ape.swap/bonds-sdk 1.0.269 → 1.0.271

package/dist/components/BondModal/BondModal.js

@@ -125,7 +125,7 @@ var BondModal = function (_a) {
     };
     return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsxs(Flex, __assign({ className: "modal modal-header" }, { children: [_jsx(Flex, __assign({ className: "new", onClick: function () { return projectInfo(bond); } }, { children: "NEW" }), bond.billAddress), _jsxs(Flex, __assign({ className: "project-info", onClick: function () { return projectInfo(bond); } }, { children: ["Project Info", _jsx(Flex, __assign({ className: "project-info icon" }, { children: _jsx(Svg, { icon: "expand" }) }))] }), bond.billAddress), _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) }))] })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(BondTokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond)) }, { children: ["$ ", premium(bond)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
+            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal modal-backdrop" }, { children: _jsxs(Flex, __assign({ className: "modal modal-content" }, { children: [isActive && account && (_jsxs("p", { children: ["Wallet Address: ", account] })), _jsx(Flex, __assign({ className: "modal modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modal-container table-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsx(BondTokenImage, { symbol: (_a = bond.showcaseTokenName) !== null && _a !== void 0 ? _a : bond.payoutTokenName, size: 50 }) })), _jsx(Flex, __assign({ className: "title-container bondname" }, { children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName })), _jsxs(Flex, __assign({ className: "title-container price-container" }, { children: [_jsxs(Flex, __assign({ className: "price-container price" }, { children: ["$", earnTokenPrice(bond)] })), _jsxs(Flex, __assign({ className: "price-container discounted" }, { children: ["$", discountEarnTokenPrice(bond)] }))] })), _jsx(Flex, __assign({ className: "title-container tokentags" }, { children: _jsx(ListTag, { text: (_b = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _b === void 0 ? void 0 : _b[0], variant: ((_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modal-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modal-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat((_d = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _d === void 0 ? void 0 : _d.toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), "".concat(((((_e = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _e !== void 0 ? _e : 0) * 365) / vestingTime((_f = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _f !== void 0 ? _f : 0).days).toFixed(2), "%")] })), _jsxs(Flex, __assign({ className: "modal-block column-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days ? "".concat(vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days, " D") : '-'] })), _jsxs(Flex, __assign({ className: "modal-block column-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "block-header icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), (_j = parseFloat(maxBuy(bond).toFixed(0))) === null || _j === void 0 ? void 0 : _j.toLocaleString('en-US')] }))] })), _jsxs(Flex, __assign({ className: "modal-container text-container" }, { children: [_jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsx(Flex, __assign({ className: "row-container spend" }, { children: "You spend:" })), _jsxs(Flex, __assign({ className: "row-container spend-val" }, { children: [youSpend, " ", bond.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "row-container premium-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsxs(Flex, __assign({ className: "row-container premium-val ".concat(getPremiumColor(bond)) }, { children: ["$ ", premium(bond)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_k = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _k !== void 0 ? _k : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond))] }))] }))] })), _jsxs(Flex, __assign({ className: "modal-container input-container" }, { children: [_jsx(Flex, __assign({ className: "input-container input" }, { children: _jsx(Input, { placeholder: "0.0", value: inputValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: function (v) {
                                                         if (v.currentTarget.value.includes(',')) {
                                                             v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                                         }

package/dist/components/YourBonds/YourBonds.d.ts

@@ -0,0 +1,33 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import '../../scss/Bonds.scss';
+declare global {
+    interface Window {
+        ethereum?: any;
+    }
+}
+interface BondsProps {
+    connectionString?: string;
+}
+export interface UserBill {
+    address: string;
+    id: string;
+    vesting: string;
+    payout: string;
+    totalPayout?: string;
+    truePricePaid: string;
+    lastBlockTimestamp: string;
+    pendingRewards: string;
+    billNftAddress: string;
+    nftData?: UserBillNft;
+}
+export interface UserBillNft {
+    image: string;
+    tokenId: string;
+    attributes: {
+        trait_type: string;
+        value: string;
+    }[];
+}
+declare const YourBonds: React.FC<BondsProps>;
+export default YourBonds;

package/dist/components/YourBonds/YourBonds.js

@@ -0,0 +1,324 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import { useCallback, useEffect, useState } from 'react';
+import { Flex, ThemeUIProvider } from 'theme-ui';
+import axios from 'axios';
+import { ethers } from 'ethers';
+import { useWeb3React } from '@web3-react/core';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import getTimePeriods from '../../utils/getTimePeriods';
+import { defaultTheme } from '../../theme';
+import '../../scss/Bonds.scss';
+import { BigNumber } from 'bignumber.js';
+import { BillVersion, ChainId } from '../../enum/apeswaplists';
+import ProgressBarWrapper from '../ProgressBar/ProgressBarWrapper';
+import ProgressBar from '../ProgressBar/ProgressBar';
+import { formatDollar, formatValue } from '../../utils/formatNumbers';
+import { TooltipText } from '../../enum/tooltips';
+import { TooltipBubble, Svg } from '../uikit-sdk';
+import Tooltip from '../Tooltip/Tooltip';
+import { BLOCK_EXPLORER, MAINNET_CHAINS } from '../../config/constants/chains';
+import TokenInfoAndName from '../TokenInfoAndName';
+import useRefresh from '../../hooks/useRefresh';
+import { ACF_TO_ABOND } from '../../config/constants/addresses';
+import multicall from '../../utils/multicall';
+import billAbi from '../../config/abi/bond.json';
+var YourBonds = function (_a) {
+    var connectionString = _a.connectionString;
+    var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
+    var _c = useSearchParams(), searchParams = _c[0], setSearchParams = _c[1];
+    var navigate = useNavigate();
+    var USDT_ABI = [
+        // The ERC-20 approve function ABI
+        'function approve(address spender, uint256 amount) public returns (bool)',
+    ];
+    var USDT_ADDRESS = '0xdAC17F958D2ee523a2206206994597C13D831ec7'; // USDT contract address on Ethereum mainnet
+    var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var provider, signer, usdtContract, tx, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!window.ethereum) {
+                        console.error('No Ethereum provider found');
+                        alert('No Ethereum provider found');
+                        return [2 /*return*/];
+                    }
+                    provider = new ethers.providers.Web3Provider(window.ethereum);
+                    signer = provider.getSigner();
+                    usdtContract = new ethers.Contract(USDT_ADDRESS, USDT_ABI, signer);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, usdtContract.approve(account, // Replace with the actual spender address
+                        ethers.utils.parseUnits('1000.0', 6))];
+                case 2:
+                    tx = _a.sent();
+                    return [4 /*yield*/, tx.wait()];
+                case 3:
+                    _a.sent();
+                    alert('Approval Successful');
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    console.error('Approval error', error_1);
+                    alert('Approval Failed');
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var _d = useState([]), userBondData = _d[0], setUserBondData = _d[1];
+    var _e = useState([]), hotBonds = _e[0], setHotBonds = _e[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;
+            setUserBondData(bonds);
+        });
+        usePollUserBills;
+    }, []);
+    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 isSoldOut = useCallback(function (bond) {
+        var _a, _b;
+        var thresholdToHide = new BigNumber(100).div((_a = bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : 0);
+        if (bond.soldOut)
+            return true;
+        if (bond.discount == null)
+            return true;
+        if (!bond.tokensRemaining)
+            return false;
+        if (bond.discount && bond.discount > 25 && bond.chainId === ChainId.BASE /*BASE*/)
+            return true;
+        return ((_b = new BigNumber(bond.tokensRemaining)) === null || _b === void 0 ? void 0 : _b.lte(thresholdToHide)) || bond.discount === 100;
+    }, []);
+    var sortedBonds = userBondData.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 b.discount - a.discount;
+        }
+    });
+    var _f = useState(false), isModalOpen = _f[0], setIsModalOpen = _f[1];
+    var _g = useState(null), selectedBond = _g[0], setSelectedBond = _g[1];
+    var rowClick = function (bond) {
+        setSelectedBond(bond);
+        setIsModalOpen(true);
+        navigate("/?bondAddress=".concat(bond.billAddress, "&bondChain=").concat(bond.chainId), { replace: true });
+    };
+    var getDiscountColor = function (discount) {
+        return discount < 0 ? 'discount-negative' : 'discount-positive';
+    };
+    var remainingPercentage = function (bond) {
+        var _a, _b;
+        var totalMaxPayout = new BigNumber((_a = bond.maxTotalPayout) !== null && _a !== void 0 ? _a : '0').div(new BigNumber(10).pow(bond.payoutTokenDecimals));
+        var remainingTokens = new BigNumber((_b = bond.tokensRemaining) !== null && _b !== void 0 ? _b : '0');
+        return remainingTokens.div(totalMaxPayout).times(100).toNumber();
+    };
+    var remainingTokensFormat = function (bond) {
+        var _a;
+        return formatValue({ num: new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0') });
+    };
+    var remainingTokensUsd = function (bond) {
+        var _a, _b;
+        var tokens = new BigNumber((_a = bond.tokensRemaining) !== null && _a !== void 0 ? _a : '0');
+        return tokens.times((_b = bond.payoutTokenPrice) !== null && _b !== void 0 ? _b : 0);
+    };
+    var getBillContractURL = function (bond) {
+        var _a;
+        var selectedChain = (_a = bond.chainId) !== null && _a !== void 0 ? _a : ChainId.BSC;
+        var explorerLink = BLOCK_EXPLORER[selectedChain];
+        return "".concat(explorerLink, "/address/").concat(bond === null || bond === void 0 ? void 0 : bond.billAddress);
+    };
+    var usePollUserBills = function () {
+        var slowRefresh = useRefresh().slowRefresh;
+        // const dispatch = useAppDispatch()
+        var _a = useWeb3React(), account = _a.account, isActive = _a.isActive;
+        useEffect(function () {
+            if (account) {
+                MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account); });
+            }
+        }, [account, slowRefresh]);
+    };
+    var fetchUserOwnedBillsDataAsync = function (chainId, account) { return __awaiter(void 0, void 0, void 0, function () {
+        var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    bonds = userBondData.filter(function (bond) {
+                        return bond.billVersion !== BillVersion.FixedPrice &&
+                            (bond === null || bond === void 0 ? void 0 : bond.chainId) === chainId &&
+                            bond.type !== 'migration' &&
+                            bond.billAddress.toLowerCase() !== ACF_TO_ABOND.toLowerCase();
+                    });
+                    return [4 /*yield*/, fetchUserOwnedBills(chainId, account, bonds)];
+                case 1:
+                    userOwnedBills_1 = _a.sent();
+                    mapUserOwnedBills_1 = bonds.map(function (bill) {
+                        return userOwnedBills_1.filter(function (b) { return b.address.toLowerCase() === bill.billAddress.toLowerCase(); });
+                    });
+                    userOwnedBillsData = bonds.map(function (bill, i) { return ({
+                        index: bill.index,
+                        userOwnedBills: mapUserOwnedBills_1[i],
+                    }); });
+                    console.log('userOwnedBillsData');
+                    console.log(userOwnedBillsData);
+                    return [2 /*return*/, Promise.resolve(userOwnedBillsData)];
+                case 2:
+                    error_2 = _a.sent();
+                    console.error('Error fetching user owned bills data:', error_2);
+                    return [2 /*return*/, Promise.reject(error_2)];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var fetchUserOwnedBills = function (chainId, account, bonds) { return __awaiter(void 0, void 0, void 0, function () {
+        var billIdCalls, billIds, billsPendingRewardCall, billDataCalls, billVersions, billData, pendingRewardsCall, result, i, billDataPos, data;
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    billIdCalls = bonds.map(function (b) { return ({
+                        address: b.billAddress,
+                        name: 'getBillIds',
+                        params: [account],
+                    }); });
+                    return [4 /*yield*/, multicall(chainId, billAbi, billIdCalls, true, 15)];
+                case 1:
+                    billIds = _f.sent();
+                    billsPendingRewardCall = [];
+                    billDataCalls = [];
+                    billVersions = [];
+                    billIds.forEach(function (idArray, index) {
+                        return idArray[0].forEach(function (id) {
+                            return id.gt(0) &&
+                                (billDataCalls.push({
+                                    address: bonds[index].billAddress,
+                                    name: bonds[index].billVersion !== BillVersion.V1 ? 'getBillInfo' : 'billInfo',
+                                    params: [id],
+                                }),
+                                    billDataCalls.push({ address: bonds[index].billAddress, name: 'billNft' }),
+                                    billsPendingRewardCall.push({
+                                        address: bonds[index].billAddress,
+                                        name: bonds[index].billVersion !== BillVersion.V1 ? 'claimablePayout' : 'pendingPayoutFor',
+                                        params: [id],
+                                    }),
+                                    billVersions.push(bonds[index].billVersion));
+                        });
+                    });
+                    return [4 /*yield*/, multicall(chainId, billAbi, billDataCalls, true, 150)];
+                case 2:
+                    billData = _f.sent();
+                    return [4 /*yield*/, multicall(chainId, billAbi, billsPendingRewardCall)];
+                case 3:
+                    pendingRewardsCall = _f.sent();
+                    result = [];
+                    for (i = 0; i < billsPendingRewardCall.length; i++) {
+                        billDataPos = i === 0 ? 0 : i * 2;
+                        data = billVersions[i] !== BillVersion.V1
+                            ? {
+                                address: billsPendingRewardCall[i].address,
+                                id: billsPendingRewardCall[i].params[0].toString(),
+                                payout: new BigNumber((_a = billData[billDataPos][0]) === null || _a === void 0 ? void 0 : _a.payout.toString())
+                                    .minus((_b = billData[billDataPos][0]) === null || _b === void 0 ? void 0 : _b.payoutClaimed.toString())
+                                    .toString(),
+                                billNftAddress: billData[billDataPos + 1][0].toString(),
+                                vesting: (_c = billData[billDataPos][0]) === null || _c === void 0 ? void 0 : _c.vesting.toString(),
+                                lastBlockTimestamp: (_d = billData[billDataPos][0]) === null || _d === void 0 ? void 0 : _d.lastClaimTimestamp.toString(),
+                                truePricePaid: (_e = billData[billDataPos][0]) === null || _e === void 0 ? void 0 : _e.truePricePaid.toString(),
+                                pendingRewards: pendingRewardsCall[i][0].toString(),
+                            }
+                            : {
+                                address: billsPendingRewardCall[i].address,
+                                id: billsPendingRewardCall[i].params[0].toString(),
+                                payout: billData[billDataPos][0].toString(),
+                                billNftAddress: billData[billDataPos + 1][0].toString(),
+                                vesting: billData[billDataPos][1].toString(),
+                                lastBlockTimestamp: billData[billDataPos][2].toString(),
+                                truePricePaid: billData[billDataPos][3].toString(),
+                                pendingRewards: pendingRewardsCall[i][0].toString(),
+                            };
+                        result.push(data);
+                    }
+                    return [2 /*return*/, result];
+            }
+        });
+    }); };
+    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: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokenname" }, { children: "Tokens" })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount" }, { 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 column-arr" }, { 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 column-term" }, { 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 column-tokensremaining" }, { 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, { className: "column column-hotbond" })] }))] })), sortedBonds.map(function (bond) {
+                        var _a, _b, _c, _d, _e;
+                        return (_jsxs(Flex, __assign({ className: "container bondrow-container", onClick: function () { return rowClick(bond); } }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bond: bond }) })), _jsx(Flex, __assign({ className: "column column-tokenicons" }, { children: _jsx(TooltipBubble, __assign({ body: _jsx(Tooltip, { tokenContract: (bond === null || bond === void 0 ? void 0 : bond.payoutToken) || '', secondURL: getBillContractURL(bond), secondURLTitle: 'View Bond Contract', thirdURL: "https://dashboard.ape.bond/bond/".concat((_a = bond === null || bond === void 0 ? void 0 : bond.billAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()), thirdURLTitle: 'View Insights', twitter: bond === null || bond === void 0 ? void 0 : bond.twitter, projectLink: bond === null || bond === void 0 ? void 0 : bond.projectLink, audit: bond === null || bond === void 0 ? void 0 : bond.audit, chain: (_b = bond.chainId) !== null && _b !== void 0 ? _b : ChainId.BSC }), width: "205px", placement: "bottomRight", transformTip: "translate(11%, 0%)" }, { children: _jsx(Svg, { icon: "more", width: "20px" }) })) }))] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsx(Flex, __assign({ className: "column column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: "".concat((_c = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _c === void 0 ? void 0 : _c.toFixed(2), "%") })), _jsx(Flex, __assign({ className: "column column-arr" }, { children: "".concat(((((_d = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _d !== void 0 ? _d : 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: remainingPercentage(bond) }), style: {
+                                                    width: '127px',
+                                                    height: '25px',
+                                                    flexDirection: 'column',
+                                                    justifyContent: 'center',
+                                                    display: ['none', 'none', 'none', 'flex'],
+                                                }, 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()) && ((_e = bond.discount) !== null && _e !== void 0 ? _e : 0) > 0 && (_jsx(Svg, { icon: "hot", width: "20px" })) })) }))] }))] }), bond.billAddress));
+                    })] }))] })));
+};
+export default YourBonds;