@ape.swap/bonds-sdk 1.0.628 → 1.0.630

package/dist/components/Modals/BondModal/BondModal.js

@@ -60,13 +60,22 @@ 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)
         return null;
-    var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
-    var _c = useWaitForTransactionReceipt({
+    var _b = useState([]), bondData = _b[0], setBondData = _b[1];
+    var _c = useWriteContract(), hash = _c.data, isPending = _c.isPending, writeContract = _c.writeContract, writeContractAsync = _c.writeContractAsync;
+    var _d = useWaitForTransactionReceipt({
         confirmations: 4,
-        chainId: accountChainId,
+        chainId: accountChainId !== null && accountChainId !== void 0 ? accountChainId : bondData[0].chainId,
         hash: hash,
-    }), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
-    var _d = useState([]), bondData = _d[0], setBondData = _d[1];
+    }), isConfirming = _d.isLoading, isConfirmed = _d.isSuccess;
+    var _e = useState(null), approveTx = _e[0], setApproveTx = _e[1];
+    var _f = useState(null), toastMessage = _f[0], setToastMessage = _f[1];
+    var _g = useState(null), buyTx = _g[0], setBuyTx = _g[1];
+    var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
+    var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
+    var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
+    var handleInputChange = function (event) {
+        setInputValue(event.target.value);
+    };
     //This is a temp solution, but we will force approval each time, and then once set we will set status here and allow
     //user to buy
     //Check with Fede if this needs to be temp, if we force approval everytime, isn't this fine?
@@ -109,7 +118,6 @@ var BondModal = function (_a) {
             }
         });
     }); };
-    var _e = useState(null), buyTx = _e[0], setBuyTx = _e[1];
     //You approve the token, not the contract (this code will have to be updated for zap)
     var handleApprove = function () { return __awaiter(void 0, void 0, void 0, function () {
         var tokenAddress, decimals, amount, tx, error_2;
@@ -143,16 +151,13 @@ var BondModal = function (_a) {
             }
         });
     }); };
-    var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
-    var _g = useState(null), toastMessage = _g[0], setToastMessage = _g[1];
+    // Confirmation message
     useEffect(function () {
         if (isConfirmed) {
             setToastMessage("Transaction Complete.");
             setTimeout(function () { return setToastMessage(null); }, 10000);
         }
     }, [approveTx, buyTx, isConfirmed]);
-    var _h = useState(null), tokenBalance = _h[0], setTokenBalance = _h[1];
-    var _j = useState(null), tokenDecimals = _j[0], setTokenDecimals = _j[1];
     useEffect(function () {
         if (isActive && account && bondData.length > 0) {
             getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (_a) {
@@ -183,7 +188,6 @@ var BondModal = function (_a) {
                 case 2:
                     balance = _a.sent();
                     balanceInEther = ethers.utils.formatUnits(balance, decimals);
-                    console.log("Token Balance: ".concat(balanceInEther));
                     return [2 /*return*/, { balanceInEther: balanceInEther, decimals: decimals }];
                 case 3:
                     error_3 = _a.sent();
@@ -225,10 +229,6 @@ 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.payoutTokenDecimals) !== null && _d !== void 0 ? _d : 18));
         return !available ? 0 : (singlePurchaseLimit.lt(safeAvailable) ? singlePurchaseLimit : safeAvailable);
     };
-    var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
-    var handleInputChange = function (event) {
-        setInputValue(event.target.value);
-    };
     return (_jsx(ThemeUIProvider, { theme: defaultTheme, 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, { className: "modal modal-backdrop", children: _jsxs(Flex, { className: "modal modal-content", children: [toastMessage && (_jsx(Flex, { className: "toast", children: toastMessage })), _jsx(Flex, { className: "modal modal-header", children: _jsx(Flex, { className: "svg-close", onClick: onClose, children: _jsx(Svg, { icon: "close" }) }) }), _jsxs(Flex, { className: "modal-container table-container", children: [_jsxs(Flex, { className: "modal-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.payoutTokenName, 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: "modal-container description-container", children: bond === null || bond === void 0 ? void 0 : bond.shortDescription }), _jsxs(Flex, { className: "modal-container blocks-container", children: [_jsxs(Flex, { className: "modal-block column-discount ".concat(getDiscountColor(bond === null || bond === void 0 ? void 0 : bond.discount)), children: [_jsxs(Flex, { className: "block-header header", children: ["Discount", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { 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 ? void 0 : _e.toFixed(2), "%")] }), _jsxs(Flex, { className: "modal-block column-arr", children: [_jsxs(Flex, { className: "block-header header", children: ["ARR", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), "".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 column-term", children: [_jsxs(Flex, { className: "block-header header", children: ["Terms", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), 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 column-maxbuy", children: [_jsxs(Flex, { className: "block-header header", children: ["Max Buy", _jsx(TooltipBubble, { body: _jsx(Flex, { children: TooltipText.MaxBuy(bond.payoutTokenName) }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, -5%)", children: _jsx(Flex, { className: "block-header icon", children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), (_k = parseFloat(maxBuy(bond).toFixed(0))) === null || _k === void 0 ? void 0 : _k.toLocaleString('en-US')] })] }), _jsxs(Flex, { className: "modal-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.principalTokenName, " = $ ", formatUSDNumber(youSpendUSD(bond, inputValue))] })] }), _jsxs(Flex, { className: "text-container row", children: [_jsxs(Flex, { className: "row-container premium", children: ["Premium:", _jsx(TooltipBubble, { 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: "modal-container input-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) {

package/dist/components/Modals/YourBondsModal/YourBondsModal.js

@@ -38,7 +38,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "theme-ui/jsx-
 /** @jsxImportSource theme-ui */
 import React, { useEffect, useState } from 'react';
 import { Flex } from 'theme-ui';
-import { useWeb3React } from '@web3-react/core';
 import { BigNumber } from 'bignumber.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import { NETWORK_ICONS } from '../../../config/constants/chains';
@@ -51,20 +50,22 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
 import { formatNumberSI } from '../../../utils/formatNumber';
 import { StyledHeadingText, TraitsContentContainer } from './styles';
 import '../../../scss/YourBondsModal.scss';
-import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
+import { useChainId, 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, _r;
     var isOpen = _a.isOpen, onClose = _a.onClose, userBill = _a.userBill;
     if (!isOpen)
         return null;
-    var _s = useWeb3React(), account = _s.account, chainId = _s.chainId, isActive = _s.isActive;
-    var _t = useWriteContract(), hash = _t.data, isPending = _t.isPending, writeContract = _t.writeContract, writeContractAsync = _t.writeContractAsync;
-    var _u = useWaitForTransactionReceipt({
+    var chainId = useChainId();
+    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 = _u.isLoading, isConfirmed = _u.isSuccess;
+    }), 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) {
@@ -94,8 +95,7 @@ var YourBondsModal = function (_a) {
             }
         });
     }); };
-    var _v = useState(null), claimTx = _v[0], setClaimTx = _v[1];
-    var _w = useState(null), toastMessage = _w[0], setToastMessage = _w[1];
+    // Confirmation message
     useEffect(function () {
         if (isConfirmed) {
             setToastMessage("Transaction Complete.");
@@ -116,8 +116,8 @@ var YourBondsModal = function (_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 _x = useState(false), isOpenTraits = _x[0], setIsOpenTraits = _x[1];
-    var _y = useState(false), billRendered = _y[0], setBillRendered = _y[1];
+    var _w = useState(false), isOpenTraits = _w[0], setIsOpenTraits = _w[1];
+    var _x = useState(false), billRendered = _x[0], setBillRendered = _x[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); });
     return (_jsx(_Fragment, { children: _jsx(React.Fragment, { children: _jsx(Flex, { className: "yourbondsmodal backdrop", children: _jsxs(Flex, { className: "yourbondsmodal content", 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: (_d = userBill.nftData) === null || _d === void 0 ? void 0 : _d.data.image }) }), _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: (_e = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _e !== void 0 ? _e : 'question' }), _jsx(TokenImage, { symbol: (_f = userBill.bond.showcaseTokenName) !== null && _f !== void 0 ? _f : userBill.bond.payoutTokenName, size: 40 })] }) }), _jsx(Flex, { className: "title-container tokenname", children: _jsx(StyledHeadingText, { children: (_g = userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName }) }), _jsx(Flex, { className: "title-container tokentags", children: (_h = userBill.bond.tags) === null || _h === void 0 ? void 0 : _h.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));
@@ -132,6 +132,6 @@ var YourBondsModal = function (_a) {
                                                                             ? 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, { 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((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _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, { 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: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.payoutTokenName, 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) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 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, { 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: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.payoutTokenName, 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) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { disabled: claimable(userBill) === 0 || isPending, onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary", onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] }) }) }, userBill.address) }));
+                                                                            }) }) })) })] }) }), _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, { 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((_j = userBill.lastBlockTimestamp) !== null && _j !== void 0 ? _j : '', (_k = userBill.vesting) !== null && _k !== void 0 ? _k : '') }) })] })] }), _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, { 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: (_l = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _l !== void 0 ? _l : 'question' }), _jsx(TokenImage, { symbol: (_m = userBill.bond.showcaseTokenName) !== null && _m !== void 0 ? _m : userBill.bond.payoutTokenName, 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) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 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, { 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: (_p = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _p !== void 0 ? _p : 'question' }), _jsx(TokenImage, { symbol: (_q = userBill.bond.showcaseTokenName) !== null && _q !== void 0 ? _q : userBill.bond.payoutTokenName, 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) * ((_r = parseFloat(earnTokenPrice(userBill.bond))) !== null && _r !== void 0 ? _r : 0)).toFixed(2), ")") })] })] })] })] }), _jsxs(Flex, { className: "yourbondinfo button-container", children: [_jsx(Flex, { className: "button-container claim", children: _jsx(Button, { disabled: claimable(userBill) === 0 || isPending, onClick: function () { return handleClaim(userBill.id, userBill.address); }, children: "CLAIM" }) }), _jsx(Flex, { className: "button-container transfer", children: _jsx(Button, { variant: "secondary", disabled: true, onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: "TRANSFER" }) })] })] })] })] }) }) }, userBill.address) }));
 };
 export default YourBondsModal;

package/dist/pages/Bonds/Bonds.js

@@ -1,39 +1,3 @@
-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 };
-    }
-};
 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)) {
@@ -48,8 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Flex, ThemeUIProvider } from 'theme-ui';
 import axios from 'axios';
-import { ethers } from 'ethers';
-import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import getTimePeriods from '../../utils/getTimePeriods';
 import { defaultTheme } from '../../theme';
 import { BigNumber } from 'bignumber.js';
@@ -61,51 +24,10 @@ import { useTopTags } from '../../hooks/useTopThreeTags';
 import useChainFilterOption from '../../components/BondMenu/useChainFilterOption';
 var Bonds = function (_a) {
     var account = _a.account, accountChainId = _a.accountChainId, isActive = _a.isActive;
-    //const { account, isActive } = useWeb3React();
-    var _b = useSearchParams(), searchParams = _b[0], setSearchParams = _b[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*/];
-            }
-        });
-    }); };
     // Fetch data
-    var _c = useState([]), bondData = _c[0], setBondData = _c[1];
-    var _d = useState([]), hotBonds = _d[0], setHotBonds = _d[1];
+    var _b = useState([]), bondData = _b[0], setBondData = _b[1];
+    var _c = useState([]), hotBonds = _c[0], setHotBonds = _c[1];
     var isSoldOut = useCallback(function (bond) {
         var _a, _b;
         var thresholdToHide = new BigNumber(100).div((_a = bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : 0);
@@ -132,7 +54,7 @@ var Bonds = function (_a) {
             });
             setHotBonds(hotBondAddresses);
         });
-    }, []);
+    }, [bondData]);
     // Sort functions
     var sortedHotBonds = bondData.sort(function (a, b) {
         var _a, _b;
@@ -148,8 +70,8 @@ var Bonds = function (_a) {
             return b.discount - a.discount;
         }
     });
-    var _e = useState(null), sortConfig = _e[0], setSortConfig = _e[1];
-    var _f = useState(sortedHotBonds), sortedBonds = _f[0], setSortedBonds = _f[1];
+    var _d = useState(null), sortConfig = _d[0], setSortConfig = _d[1];
+    var _e = useState(sortedHotBonds), sortedBonds = _e[0], setSortedBonds = _e[1];
     var handleSort = function (key) {
         var direction = 'asc';
         if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.key) === key && (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.direction) === 'asc') {
@@ -191,8 +113,8 @@ var Bonds = function (_a) {
         setSortedBonds(sorted);
     }, [sortConfig, bondData]);
     // Modal
-    var _g = useState(false), isModalOpen = _g[0], setIsModalOpen = _g[1];
-    var _h = useState(null), selectedBond = _h[0], setSelectedBond = _h[1];
+    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);
@@ -215,11 +137,11 @@ var Bonds = function (_a) {
         return parseFloat((((discount * 365) / vestingDays).toFixed(2)));
     };
     // Search logic
-    var _j = useState(''), inputValue = _j[0], setInputValue = _j[1];
+    var _h = useState(''), inputValue = _h[0], setInputValue = _h[1];
     var topTags = useTopTags(sortedBonds);
     var filterOptions = __spreadArray(__spreadArray(['ALL'], topTags, true), ['SOLD OUT'], false);
-    var _k = useState(filterOptions[0]), filterOption = _k[0], setFilterOption = _k[1];
-    var _l = useChainFilterOption(), chainFilterOption = _l.data, setChainFilterOption = _l.setChainFilterOption;
+    var _j = useState(filterOptions[0]), filterOption = _j[0], setFilterOption = _j[1];
+    var _k = useChainFilterOption(), chainFilterOption = _k.data, setChainFilterOption = _k.setChainFilterOption;
     var billstoRender = useMemo(function () {
         var billsToReturn = sortedBonds !== null && sortedBonds !== void 0 ? sortedBonds : [];
         if (inputValue) {
@@ -247,7 +169,7 @@ var Bonds = function (_a) {
         setInputValue(event.target.value);
     };
     // Page render logic
-    var _m = useState(false), bondsRendered = _m[0], setBondsRendered = _m[1];
+    var _l = useState(false), bondsRendered = _l[0], setBondsRendered = _l[1];
     useEffect(function () {
         if (billstoRender.length > 0) {
             setBondsRendered(true);

package/dist/pages/YourBonds/YourBonds.js

@@ -47,7 +47,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
 import { useEffect, useState } from 'react';
 import { Flex, ThemeUIProvider } from 'theme-ui';
-import { useWeb3React } from '@web3-react/core';
 import getTimePeriods from '../../utils/getTimePeriods';
 import { defaultTheme } from '../../theme';
 import '../../scss/YourBonds.scss';
@@ -65,7 +64,7 @@ import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
 import { Input } from '../../components/uikit-sdk/Input';
 import { YourBondsModal } from "../../index";
 import BOND_ABI from '../../config/abi/bond.json';
-import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
+import { useChainId, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
 var YourBonds = function (_a) {
     var account = _a.account, accountChainId = _a.accountChainId;
     var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
@@ -203,7 +202,7 @@ var YourBonds = function (_a) {
         setSortedBonds(sorted);
     }, [sortConfig, mappedUserBills]);
     // Functions for calculations
-    var chainId = useWeb3React().chainId;
+    var chainId = useChainId();
     var currentTime = useCurrentTime() / 1000;
     var vestingTimeRemaining = function (userBill) {
         return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - currentTime, true);

package/package.json

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