@ape.swap/bonds-sdk 1.0.778 → 1.0.779

package/dist/{components/Modals → views}/BondModal/BondModal.js

@@ -1,14 +1,3 @@
-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) {
@@ -19,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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.");
@@ -45,28 +34,28 @@ 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, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
 import React, { useEffect, useState } from 'react';
-import { Flex, Input, ThemeUIProvider } from 'theme-ui';
-import { defaultTheme } from '../../../theme';
-import getTimePeriods from '../../../utils/getTimePeriods';
+import { Flex, Input } from 'theme-ui';
+import getTimePeriods from '../../utils/getTimePeriods';
 import axios from 'axios';
 import { BigNumber } from 'bignumber.js';
-import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
-import { isNumber } from '../../../utils/numbers';
-import { TooltipBubble, Button, Svg, ListTag } from '../../uikit-sdk';
-import { TooltipText } from '../../../enum/tooltips';
+import { getFirstNonZeroDigits } from '../../utils/roundNumber';
+import { isNumber } from '../../utils/numbers';
+import { TooltipBubble, Button, Svg, ListTag, Modal } from '../../components/uikit-sdk';
+import { TooltipText } from '../../enum/tooltips';
 import { ethers } from 'ethers';
-import convertToTokenValue, { adjustDecimals } from "../../../utils/convertToTokenValue";
-import TokenImage from '../../uikit-sdk/TokenImage';
-import BOND_ABI from '../../../config/abi/bond.json';
-import ERC_20_ABI from '../../../config/abi/erc20.json';
-import { NETWORK_ICONS, NETWORK_LABEL } from '../../../config/constants/chains';
+import convertToTokenValue, { adjustDecimals } from "../../utils/convertToTokenValue";
+import TokenImage from '../../components/uikit-sdk/TokenImage';
+import BOND_ABI from '../../config/abi/bond.json';
+import ERC_20_ABI from '../../config/abi/erc20.json';
+import { NETWORK_ICONS, NETWORK_LABEL } from '../../config/constants/chains';
 import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
-import '../../../scss/BondModal.scss';
+import '../../scss/BondModal.scss';
 import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
-import { PUBLIC_RPC_URLS } from "../../../config/constants/networks";
+import { PUBLIC_RPC_URLS } from "../../config/constants/networks";
+import useModal from "../../hooks/useModal";
 var BondModal = function (_a) {
     var account = _a.account, isActive = _a.isActive, isOpen = _a.isOpen, accountChainId = _a.accountChainId, onClose = _a.onClose, bondAddress = _a.bondAddress;
     if (!isOpen)
@@ -243,9 +232,19 @@ var BondModal = function (_a) {
         var singlePurchaseLimit = new BigNumber((_c = bond === null || bond === void 0 ? void 0 : bond.maxPayout) !== null && _c !== void 0 ? _c : 0).div(new BigNumber(10).pow((_d = bond === null || bond === void 0 ? void 0 : bond.earnToken.decimals[chainId]) !== null && _d !== void 0 ? _d : 18));
         return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
     };
-    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: bondData.map(function (bond) {
+    var onAsd = useModal(_jsx(Modal, { sx: { zIndex: 5000 }, children: _jsx(_Fragment, { children: "asd!" }) }))[0];
+    // const ref = React.useRef<boolean>(false);
+    //
+    // useEffect(() => {
+    //     if (!ref.current) {
+    //         console.log('open modal!!')
+    //         onAsd();
+    //         ref.current = true;
+    //     }
+    // }, []);
+    return (_jsx(_Fragment, { children: bondData.map(function (bond) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            return (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "modal-backdrop", onClick: onClose }, { children: _jsxs(Flex, __assign({ className: "modal-content", onClick: function (event) { return event.stopPropagation(); } }, { children: [toastMessage && (_jsx(Flex, __assign({ className: "toast" }, { children: toastMessage }))), _jsx(Flex, __assign({ className: "modal-header" }, { children: _jsx(Flex, __assign({ className: "svg-close", onClick: onClose }, { children: _jsx(Svg, { icon: "close" }) })) })), _jsxs(Flex, __assign({ className: "modaltable-container" }, { children: [_jsxs(Flex, __assign({ className: "modaltable-container title-container" }, { children: [_jsx(Flex, __assign({ className: "title-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container" }, { children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.earnToken.symbol, 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: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) }))] })), _jsx(Flex, __assign({ className: "modaltable-container description-container" }, { children: bond === null || bond === void 0 ? void 0 : bond.shortDescription })), _jsxs(Flex, __assign({ className: "modaltable-container blocks-container" }, { children: [_jsxs(Flex, __assign({ className: "modal-block block-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)) }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Discount", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") }))] })), _jsxs(Flex, __assign({ className: "modal-block block-arr" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["ARR", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%") }))] })), _jsxs(Flex, __assign({ className: "modal-block block-term" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Terms", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-' }))] })), _jsxs(Flex, __assign({ className: "modal-block block-maxbuy" }, { children: [_jsxs(Flex, __assign({ className: "block-header" }, { children: ["Max Buy", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)" }, { children: _jsx(Flex, __assign({ className: "header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) })) }))] })), _jsx(Flex, __assign({ className: "block-content" }, { children: (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US') }))] }))] })), _jsxs(Flex, __assign({ className: "modaltable-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(inputValue), " ", bond.lpToken.symbol, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container premium" }, { children: ["Premium:", _jsx(TooltipBubble, __assign({ className: "tooltip-bubble", 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, inputValue)) }, { children: ["$ ", premium(bond, inputValue)] }))] })), _jsxs(Flex, __assign({ className: "text-container row" }, { children: [_jsxs(Flex, __assign({ className: "row-container get" }, { children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] })), _jsxs(Flex, __assign({ className: "row-container get-val" }, { children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] }))] }))] })), _jsxs(Flex, __assign({ className: "modaltable-container buy-container" }, { children: [_jsxs(Flex, __assign({ className: "input-container inputrow" }, { 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, { className: "modal-backdrop", onClick: onClose, children: _jsxs(Flex, { className: "modal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modaltable-container", children: [_jsxs(Flex, { className: "modaltable-container title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 20, height: 20, icon: (_a = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _a !== void 0 ? _a : 'question' }), _jsx(TokenImage, { symbol: (_b = bond.showcaseTokenName) !== null && _b !== void 0 ? _b : bond.earnToken.symbol, size: 50 })] }) }), _jsx(Flex, { className: "title-container bondname", children: bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName }), _jsxs(Flex, { className: "title-container price-container", children: [_jsxs(Flex, { className: "price-container price", children: ["$", earnTokenPrice(bond)] }), _jsxs(Flex, { className: "price-container discounted", children: ["$", discountEarnTokenPrice(bond)] })] }), _jsx(Flex, { className: "title-container tokentags", children: _jsx(ListTag, { text: (_c = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _c === void 0 ? void 0 : _c[0], variant: ((_d = bond === null || bond === void 0 ? void 0 : bond.tags) === null || _d === void 0 ? void 0 : _d[0]) === 'Cex Fund' ? 'cex_fund' : 'liquidity' }) })] }), _jsx(Flex, { className: "modaltable-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modaltable-container blocks-container", children: [_jsxs(Flex, { className: "modal-block block-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header", children: ["Discount", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".concat((_e = bond === null || bond === void 0 ? void 0 : bond.discount) === null || _e === void 0 ? void 0 : _e.toFixed(2), "%") })] }), _jsxs(Flex, { className: "modal-block block-arr", children: [_jsxs(Flex, { className: "block-header", children: ["ARR", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: "".concat(((((_f = bond === null || bond === void 0 ? void 0 : bond.discount) !== null && _f !== void 0 ? _f : 0) * 365) / vestingTime((_g = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _g !== void 0 ? _g : 0).days).toFixed(2), "%") })] }), _jsxs(Flex, { className: "modal-block block-term", children: [_jsxs(Flex, { className: "block-header", children: ["Terms", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: vestingTime((_h = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _h !== void 0 ? _h : 0).days ? "".concat(vestingTime((_j = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _j !== void 0 ? _j : 0).days, " D") : '-' })] }), _jsxs(Flex, { className: "modal-block block-maxbuy", children: [_jsxs(Flex, { className: "block-header", children: ["Max Buy", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.earnToken.symbol) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "header-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsx(Flex, { className: "block-content", children: (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US') })] })] }), _jsxs(Flex, { className: "modaltable-container text-container", children: [_jsxs(Flex, { className: "text-container row", children: [_jsx(Flex, { className: "row-container spend", children: "You spend:" }), _jsxs(Flex, { className: "row-container spend-val", children: [youSpend(inputValue), " ", bond.lpToken.symbol, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: TooltipText.Premium }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "row-container premium-icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), _jsxs(Flex, { className: "row-container premium-val ".concat(getPremiumColor(bond, inputValue)), children: ["$ ", premium(bond, inputValue)] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container get", children: ["You get (over ", vestingTime((_l = bond === null || bond === void 0 ? void 0 : bond.vestingTerm) !== null && _l !== void 0 ? _l : 0).days, " days):"] }), _jsxs(Flex, { className: "row-container get-val", children: [youGet(bond, inputValue), " ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName, " = $ ", formatUSDNumber(youGetUSD(bond, inputValue))] })] })] }), _jsxs(Flex, { className: "modaltable-container buy-container", children: [_jsxs(Flex, { className: "input-container inputrow", children: [_jsx(Flex, { 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, '.');
                                                                 }
@@ -259,18 +258,20 @@ var BondModal = function (_a) {
                                                                     !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                                                         ? v.currentTarget.value
                                                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                                                            } }) })), _jsxs(Flex, __assign({ className: "input-container token" }, { children: [_jsx(Flex, __assign({ className: "input-container bondicon" }, { children: _jsxs("div", __assign({ className: "icon-container-small" }, { children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] })) })), _jsx(Flex, __assign({ className: "title-container tokenname-small" }, { children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol }))] }))] })), isActive && account && (_jsxs(Flex, __assign({ className: "input-container balancerow" }, { children: [_jsxs(Flex, __assign({ className: "balancerow text" }, { children: ["Balance: ", tokenBalance] })), _jsx(Flex, __assign({ className: "balancerow max" }, { children: _jsx(Button, __assign({ className: "max-button", onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); } }, { children: "Max" })) }))] })))] })), _jsxs(Flex, __assign({ className: "modaltable-container button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container get" }, { children: _jsxs(Button, __assign({ className: "action-button", onClick: function () { window.open('https://ape.bond/swap', '_blank'); } }, { children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] })) })), _jsx(Flex, __assign({ className: "button-container buy" }, { children: chainId !== bond.chainId
+                                                            } }) }), _jsxs(Flex, { className: "input-container token", children: [_jsx(Flex, { className: "input-container bondicon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 12, height: 12, icon: (_m = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[bond.chainId]) !== null && _m !== void 0 ? _m : 'question' }), _jsx(TokenImage, { symbol: (_o = bond.lpToken.symbol) !== null && _o !== void 0 ? _o : bond.earnToken.symbol, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol })] })] }), isActive && account && (_jsxs(Flex, { className: "input-container balancerow", children: [_jsxs(Flex, { className: "balancerow text", children: ["Balance: ", tokenBalance] }), _jsx(Flex, { className: "balancerow max", children: _jsx(Button, { className: "max-button", onClick: function () {
+                                                                setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0');
+                                                            }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modaltable-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { className: "action-button", onClick: onAsd, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.lpToken.symbol] }) }), _jsx(Flex, { className: "button-container buy", children: chainId !== bond.chainId
                                                     ?
-                                                        _jsxs(Button, __assign({ className: "switch-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: function (event) {
+                                                        _jsxs(Button, { className: "switch-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: function (event) {
                                                                 event.stopPropagation();
                                                                 // Add your claim logic here
                                                                 switchChain({ chainId: bond.chainId });
-                                                            } }, { children: ["Switch to ", NETWORK_LABEL[bond.chainId]] }))
+                                                            }, children: ["Switch to ", NETWORK_LABEL[bond.chainId]] })
                                                     :
                                                         approveTx != null && isConfirmed ?
-                                                            _jsx(Button, __assign({ className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleBuy }, { children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) }))
+                                                            _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleBuy, children: isConfirming ? 'Confirming...' : "Buy ".concat(bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName) })
                                                             :
-                                                                _jsx(Button, __assign({ className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleApprove }, { children: isConfirming ? 'Confirming...' : 'Approve' })) }))] }))] }))] })) })) }, bond.billAddress));
-        }) })));
+                                                                _jsx(Button, { className: "action-button", disabled: isPending || isConfirming || (bond === null || bond === void 0 ? void 0 : bond.soldOut), onClick: handleApprove, children: isConfirming ? 'Confirming...' : 'Approve' }) })] })] })] }) }) }, bond.billAddress));
+        }) }));
 };
 export default BondModal;

package/dist/{components/Modals → views}/BondModal/helper.d.ts

@@ -1,4 +1,4 @@
-import { BondsDataResponse } from "../../../types/bonds";
+import { BondsDataResponse } from "../../types/bonds";
 declare function formatNumber(input: string): string;
 declare function formatUSDNumber(input: string): string;
 declare const youSpend: (inputValue: string) => string;

package/dist/{components/Modals → views}/BondModal/helper.js

@@ -1,5 +1,5 @@
 import BigNumber from "bignumber.js";
-import { formatNumberSI } from "../../../utils/formatNumber";
+import { formatNumberSI } from "../../utils/formatNumber";
 function formatNumber(input) {
     var number = new BigNumber(input);
     if (number.isNaN())

package/dist/views/BondModal/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BondModalProps } from "./BondModal";
+declare const BondModalWithProviders: React.FC<BondModalProps>;
+export default BondModalWithProviders;

package/dist/views/BondModal/index.js

@@ -0,0 +1,18 @@
+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 Providers from "../../providers";
+import BondModal from "./BondModal";
+var BondModalWithProviders = function (props) {
+    return (_jsx(Providers, { children: _jsx(BondModal, __assign({}, props)) }));
+};
+export default BondModalWithProviders;

package/dist/{pages → views}/Bonds/Bonds.js

@@ -1,14 +1,3 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -179,7 +168,7 @@ var Bonds = function (_a) {
             setBondsRendered(true);
         }
     }, [billstoRender]);
-    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: !bondsRendered ? (_jsxs(Flex, __assign({ className: "bonds-spinner" }, { children: [" ", _jsx(Spinner, { size: 100 }), " "] })))
-            : (_jsxs(Flex, __assign({ className: "bonds-container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onHandleQueryChange: setInputValue, onSort: handleSort }), _jsx(BondRowsByChain, { chains: chains, bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '' })] }))) })));
+    return (_jsx(ThemeUIProvider, { theme: defaultTheme, children: !bondsRendered ? (_jsxs(Flex, { className: "bonds-spinner", children: [" ", _jsx(Spinner, { size: 100 }), " "] }))
+            : (_jsxs(Flex, { className: "bonds-container table-container", children: [_jsx(BondRowHeader, { inputValue: inputValue, setChainFilterOption: setChainFilterOption, chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], filterOptions: filterOptions, filterOption: filterOption, setFilterOption: handleChangeFilterOption, onInputChange: handleInputChange, onHandleQueryChange: setInputValue, onSort: handleSort }), _jsx(BondRowsByChain, { chains: chains, bonds: billstoRender, hotBonds: hotBonds, hideTitles: inputValue !== '' })] })) }));
 };
 export default Bonds;

package/dist/{pages → views}/YourBonds/YourBonds.js

@@ -1,14 +1,3 @@
-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) {
@@ -19,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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.");
@@ -266,22 +255,22 @@ var YourBonds = function (_a) {
     var closeModal = function () {
         setIsModalOpen(false);
     };
-    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isModalOpen &&
-                _jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), toastMessage && (_jsx(Flex, __assign({ className: "toast" }, { children: toastMessage }))), !bondsRendered ? (_jsxs(Flex, __assign({ className: "yourbonds-spinner" }, { children: [" ", _jsx(Spinner, { size: 100 }), " "] })))
-                : (_jsxs(Flex, __assign({ className: "yourbonds table-container" }, { children: [_jsxs(Flex, __assign({ className: "yourbonds header-container" }, { children: [_jsx(Flex, __assign({ className: "yourbonds column-tokens" }, { children: _jsx(Flex, __assign({ className: "yourbonds 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', color: 'white' }, width: '100%', placeholder: 'Search...' }) })) })), _jsxs(Flex, __assign({ className: "yourbonds column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbonds header-claimable" }, { children: ["CLAIMABLE", _jsx(Flex, __assign({ className: "yourbonds header-icon", onClick: function () { return handleSort('claimable'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "yourbonds header-pending" }, { children: ["PENDING", _jsx(Flex, __assign({ className: "yourbonds header-icon", onClick: function () { return handleSort('pending'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsxs(Flex, __assign({ className: "yourbonds header-terms" }, { children: ["TERMS", _jsx(Flex, __assign({ className: "yourbonds header-icon", onClick: function () { return handleSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) }))] })), _jsx(Flex, { className: "yourbonds header-claimall" })] }))] })), filteredBonds.map(function (bill) {
+    return (_jsxs(ThemeUIProvider, { theme: defaultTheme, children: [isModalOpen &&
+                _jsx(YourBondsModal, { isOpen: true, onClose: closeModal, userBill: selectedBill }), toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), !bondsRendered ? (_jsxs(Flex, { className: "yourbonds-spinner", children: [" ", _jsx(Spinner, { size: 100 }), " "] }))
+                : (_jsxs(Flex, { className: "yourbonds table-container", children: [_jsxs(Flex, { className: "yourbonds header-container", children: [_jsx(Flex, { className: "yourbonds column-tokens", children: _jsx(Flex, { className: "yourbonds 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', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "yourbonds column-bondinfo", children: [_jsxs(Flex, { className: "yourbonds header-claimable", children: ["CLAIMABLE", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "yourbonds header-pending", children: ["PENDING", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "yourbonds header-terms", children: ["TERMS", _jsx(Flex, { className: "yourbonds header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "yourbonds header-claimall" })] })] }), filteredBonds.map(function (bill) {
                             var _a, _b;
-                            return (_jsxs(Flex, __assign({ className: "yourbonds bondrow-container", onClick: function () { return rowClick(bill); } }, { children: [_jsx(Flex, __assign({ className: "yourbonds column-tokens" }, { children: _jsx(Flex, __assign({ className: "yourbonds column-tokeninfoname" }, { children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) })) })), _jsxs(Flex, __assign({ className: "yourbonds column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "yourbonds column-claimable" }, { children: [formatNumberSI(parseFloat(claimable(bill).toFixed(4)), 4), _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: "yourbonds 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: "yourbonds column-terms" }, { children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") })), _jsx(Flex, __assign({ className: "yourbonds column-claimall" }, { children: chainId !== bill.bond.chainId ?
-                                                    _jsxs(Button, __assign({ className: "switch-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
+                            return (_jsxs(Flex, { className: "yourbonds bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "yourbonds column-tokens", children: _jsx(Flex, { className: "yourbonds column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "yourbonds column-bondinfo", children: [_jsxs(Flex, { className: "yourbonds column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(4)), 4), _jsx(Text, { 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, { className: "yourbonds column-pending", children: [formatNumberSI(parseFloat(totalPending(bill).toFixed(0)), 0), _jsx(Text, { 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, { className: "yourbonds column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "yourbonds column-claimall", children: chainId !== bill.bond.chainId ?
+                                                    _jsxs(Button, { className: "switch-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
                                                             event.stopPropagation();
                                                             // Add your claim logic here
                                                             switchChain({ chainId: bill.bond.chainId });
-                                                        } }, { children: ["Switch to ", NETWORK_LABEL[bill.bond.chainId]] }))
+                                                        }, children: ["Switch to ", NETWORK_LABEL[bill.bond.chainId]] })
                                                     :
-                                                        _jsx(Button, __assign({ className: "claim-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
+                                                        _jsx(Button, { className: "claim-button", disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
                                                                 event.stopPropagation();
                                                                 // Add your claim logic here
                                                                 handleClaim(bill.id, bill.address);
-                                                            } }, { children: "Claim" })) }))] }))] }), bill.id));
-                        })] })))] })));
+                                                            }, children: "Claim" }) })] })] }, bill.id));
+                        })] }))] }));
 };
 export default YourBonds;

package/dist/{pages → views}/YourBonds/fetchBillsUser.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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.");
@@ -91,14 +91,12 @@ export var fetchUserOwnedBillNftData = function (ownedBillsData, chainId, bills)
                     return acc;
                 }, {});
                 groupedBillsToFetchArray = Object.values(groupedBillsToFetch);
-                return [4 /*yield*/, Promise.all(groupedBillsToFetchArray.map(function (_a) {
-                        var billNftAddress = _a.billNftAddress, chainId = _a.chainId, ids = _a.ids;
-                        return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_b) {
-                                return [2 /*return*/, getBillNftBatchData(ids, billNftAddress, chainId)];
-                            });
+                return [4 /*yield*/, Promise.all(groupedBillsToFetchArray.map(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+                        var billNftAddress = _b.billNftAddress, chainId = _b.chainId, ids = _b.ids;
+                        return __generator(this, function (_c) {
+                            return [2 /*return*/, getBillNftBatchData(ids, billNftAddress, chainId)];
                         });
-                    }))
+                    }); }))
                     // Flatten the resulting array of arrays into a single array
                 ];
             case 1:

package/dist/{pages → views}/YourBonds/getBillNftData.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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.");

package/dist/{components/Modals → views}/YourBondsModal/YourBondsModal.d.ts

@@ -1,7 +1,7 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
-import { UserBill } from '../../../types/yourbonds';
-import '../../../scss/YourBondsModal.scss';
+import { UserBill } from '../../types/yourbonds';
+import '../../scss/YourBondsModal.scss';
 declare const YourBondsModal: ({ isOpen, onClose, userBill }: {
     isOpen: boolean;
     onClose: () => void;

package/dist/views/YourBondsModal/YourBondsModal.js

@@ -0,0 +1,173 @@
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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, Fragment as _Fragment } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React, { useEffect, useState } from 'react';
+import { Flex, Spinner } from 'theme-ui';
+import { BigNumber } from 'bignumber.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { NETWORK_ICONS, NETWORK_LABEL } from '../../config/constants/chains';
+import { getBalanceNumber } from '../../utils/getBalanceNumber';
+import { getFirstNonZeroDigits } from '../../utils/roundNumber';
+import TokenImage from '../../components/uikit-sdk/TokenImage';
+import { Button, ListTag, Skeleton, Svg, Text, TooltipBubble } from '../../components/uikit-sdk';
+import { UserBillTooltipText } from '../../enum/tooltips';
+import { getPendingVesting } from '../../hooks/usePendingVesting';
+import { formatNumberSI } from '../../utils/formatNumber';
+import { StyledHeadingText, TraitsContentContainer } from './styles';
+import '../../scss/YourBondsModal.scss';
+import { useChainId, useSwitchChain, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
+import BOND_ABI from '../../config/abi/bond.json';
+var YourBondsModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var isOpen = _a.isOpen, onClose = _a.onClose, userBill = _a.userBill;
+    if (!isOpen)
+        return null;
+    var chainId = useChainId();
+    var _r = useSwitchChain(), chains = _r.chains, switchChain = _r.switchChain;
+    var _s = useWriteContract(), hash = _s.data, isPending = _s.isPending, writeContract = _s.writeContract, writeContractAsync = _s.writeContractAsync;
+    var _t = useWaitForTransactionReceipt({
+        confirmations: 4,
+        chainId: userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId,
+        hash: hash,
+    }), isConfirming = _t.isLoading, isConfirmed = _t.isSuccess;
+    var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
+    var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
+    var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
+        var address, tx, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    address = billAddress;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, writeContractAsync({
+                            address: address,
+                            abi: BOND_ABI,
+                            functionName: 'redeem',
+                            args: [billId],
+                        })];
+                case 2:
+                    tx = _a.sent();
+                    if (tx) {
+                        setClaimTx(tx);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Approval failed:', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Confirmation message
+    useEffect(function () {
+        if (isConfirmed) {
+            setToastMessage("Transaction Complete.");
+            setTimeout(function () { return setToastMessage(null); }, 10000);
+        }
+    }, [claimTx, isConfirmed]);
+    // Functions to calculate display values for modal
+    var totalPending = function (userBill) {
+        var _a, _b, _c, _d;
+        return getBalanceNumber(new BigNumber((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = userBill.bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18);
+    };
+    var claimable = function (userBill) {
+        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 earnTokenPrice = function (bond) {
+        var _a;
+        return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
+    };
+    var BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
+    var _w = useState(false), isOpenTraits = _w[0], setIsOpenTraits = _w[1];
+    var attributes = (_c = (_b = userBill.nftData) === null || _b === void 0 ? void 0 : _b.data.attributes) === null || _c === void 0 ? void 0 : _c.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
+    var _x = useState(false), isImageLoaded = _x[0], setIsImageLoaded = _x[1];
+    var _y = useState(null), imageSrc = _y[0], setImageSrc = _y[1];
+    useEffect(function () {
+        var loadImage = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var image_1, error_2;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        image_1 = new Image();
+                        image_1.src = (_a = userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.image;
+                        return [4 /*yield*/, new Promise(function (resolve, reject) {
+                                image_1.onload = resolve;
+                                image_1.onerror = reject;
+                            })];
+                    case 1:
+                        _b.sent();
+                        setImageSrc(image_1.src);
+                        setIsImageLoaded(true);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_2 = _b.sent();
+                        console.error('Error loading image:', error_2);
+                        setIsImageLoaded(false);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadImage();
+    }, [userBill]);
+    return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal-backdrop", onClick: onClose, children: !isImageLoaded ? (_jsxs(Flex, { className: "yourbondsmodal-spinner", children: [" ", _jsx(Spinner, { size: 100 }), " "] }))
+                    : (_jsxs(Flex, { className: "yourbondsmodal-content", onClick: function (event) { return event.stopPropagation(); }, children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "yourbondsmodal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "yourbondsmodal table-container", children: [_jsx(Flex, { className: "yourbondsmodal bondimage", children: _jsx("img", { src: imageSrc, style: { display: isImageLoaded ? "block" : "none" } }) }), _jsxs(Flex, { className: "yourbondsmodal yourbondinfo", children: [_jsxs(Flex, { className: "yourbondinfo title-container", children: [_jsx(Flex, { className: "title-container bondicon", children: _jsxs("div", { className: "icon-container", children: [_jsx(Svg, { width: 18, height: 18, icon: (_d = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _d !== void 0 ? _d : 'question' }), _jsx(TokenImage, { symbol: (_e = userBill.bond.showcaseTokenName) !== null && _e !== void 0 ? _e : userBill.bond.earnToken.symbol, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_f = userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_g = userBill.bond.tags) === null || _g === void 0 ? void 0 : _g.slice(0, 1).map(function (tag) {
+                                                            return (_jsx(Flex, { sx: { marginRight: '10px' }, children: _jsx(ListTag, { variant: tag === 'Cex Fund' ? 'cex_fund' : 'liquidity', text: tag === null || tag === void 0 ? void 0 : tag.toUpperCase() }) }, tag));
+                                                        }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsxs(Flex, { className: "attributes-container", children: [_jsxs(Flex, { className: "attributes-header", sx: { borderRadius: "".concat(isOpenTraits ? '6px 6px 0px 0px' : 'normal'),
+                                                                    display: ['none', 'none', 'none', 'flex'] }, onClick: function () { return setIsOpenTraits(!isOpenTraits); }, children: [_jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [_jsx(Svg, { icon: "tag", direction: "down" }), _jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), _jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), _jsx(AnimatePresence, { children: isOpenTraits && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: { overflow: 'hidden', width: '100%' }, children: _jsx(Flex, { sx: { flexDirection: 'column', gap: '1px' }, children: attributes
+                                                                            ? attributes.map(function (a) { return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), _jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)); })
+                                                                            : BILL_ATTRIBUTES.map(function (attrib) {
+                                                                                return (_jsxs(TraitsContentContainer, { children: [_jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), _jsx(Skeleton, { width: "150px" })] }, attrib));
+                                                                            }) }) })) })] }), _jsxs(Flex, { className: "yourbondinfo-block row-vested", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon" }), _jsx(Flex, { className: "block-info text", children: _jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: getPendingVesting((_h = userBill.lastBlockTimestamp) !== null && _h !== void 0 ? _h : '', (_j = userBill.vesting) !== null && _j !== void 0 ? _j : '') }) })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-pending", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Pending" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_k = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _k !== void 0 ? _k : 'question' }), _jsx(TokenImage, { symbol: (_l = userBill.bond.showcaseTokenName) !== null && _l !== void 0 ? _l : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(totalPending(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((totalPending(userBill) * ((_m = parseFloat(earnTokenPrice(userBill.bond))) !== null && _m !== void 0 ? _m : 0)).toFixed(2), ")") })] })] })] }), _jsxs(Flex, { className: "yourbondinfo-block row-claimable", children: [_jsxs(Flex, { className: "yourbondinfo-block header", children: [_jsx(Flex, { className: "yourbondinfo-block header-title", children: "Claimable" }), _jsx(Flex, { className: "yourbondinfo-block header-tooltip", children: _jsx(TooltipBubble, { className: "tooltip-bubble", body: _jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), _jsxs(Flex, { className: "yourbondinfo-block info", children: [_jsx(Flex, { className: "block-info icon", children: _jsxs("div", { className: "icon-container-small", children: [_jsx(Svg, { width: 10, height: 10, icon: (_o = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _o !== void 0 ? _o : 'question' }), _jsx(TokenImage, { symbol: (_p = userBill.bond.showcaseTokenName) !== null && _p !== void 0 ? _p : userBill.bond.earnToken.symbol, size: 25 })] }) }), _jsxs(Flex, { className: "block-info text", children: [_jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(parseFloat(claimable(userBill).toFixed(4)), 4) }), _jsx(Text, { sx: { fontSize: ['10px', '10px', '10px', '12px'], fontWeight: [500, 500, 500, 400], paddingLeft: '10px' }, children: "($".concat((claimable(userBill) * ((_q = parseFloat(earnTokenPrice(userBill.bond))) !== null && _q !== void 0 ? _q : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: chainId !== (userBill === null || userBill === void 0 ? void 0 : userBill.bond.chainId) ?
+                                                            _jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
+                                                                    event.stopPropagation();
+                                                                    switchChain({ chainId: userBill.bond.chainId });
+                                                                }, children: ["Switch to ", NETWORK_LABEL[userBill.bond.chainId]] })
+                                                            :
+                                                                _jsx(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || isPending, onClick: function (event) {
+                                                                        event.stopPropagation();
+                                                                        handleClaim(userBill.id, userBill.address);
+                                                                    }, children: "Claim" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { className: "transfer-button", variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] })) }) }, userBill.address) }));
+};
+export default YourBondsModal;

package/dist/{components/Modals → views}/YourBondsModal/styles.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from "@emotion/styled";
-import { Flex, Text } from "../../uikit-sdk";
+import { Flex, Text } from "../../components/uikit-sdk";
 export var StyledHeadingText = styled(Text)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 12px;\n  align-self: center;\n  @media screen and (min-width: 1180px) {\n    font-size: 22px;\n  }\n"], ["\n  font-size: 12px;\n  align-self: center;\n  @media screen and (min-width: 1180px) {\n    font-size: 22px;\n  }\n"])));
 export var TraitsContentContainer = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  justify-content: space-between;\n  background: ", ";\n  padding: 0px 15px;\n  &:last-child {\n    border-radius: 0px 0px 6px 6px;\n  }\n  @media screen and (max-width: 667px) {\n    :first-of-type {\n      border-radius: 6px 6px 0px 0px;\n    }\n  }\n"], ["\n  justify-content: space-between;\n  background: ", ";\n  padding: 0px 15px;\n  &:last-child {\n    border-radius: 0px 0px 6px 6px;\n  }\n  @media screen and (max-width: 667px) {\n    :first-of-type {\n      border-radius: 6px 6px 0px 0px;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;

package/package.json

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