@ape.swap/bonds-sdk 1.0.637 → 1.0.638

package/dist/components/BondRows/BondRowsWithTitle.js

@@ -9,7 +9,7 @@ var BondRowsWithTitle = function (_a) {
     var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });
     var key = chain;
     var _b = useState(true), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx(Flex, { className: "container bondRowsWithTitle", sx: { width: '100%', flexDirection: 'column' }, children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: hideTitles, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
+    return (_jsx(Flex, { className: "container bondRowsWithTitle", sx: { width: '100%', flexDirection: 'column' }, children: _jsxs(AnimatePresence, { initial: false, children: [_jsx(Flex, { onClick: function () { return setIsOpen(!isOpen); }, children: _jsx(ChainTitle, { chain: chain, pt: '5px', hideTitles: billsFilteredByChain.length > 0 ? false : true, isOpen: isOpen }) }), billsFilteredByChain.length > 0 && isOpen && (_jsx(motion.div, { initial: { height: 0, overflow: 'hidden' }, animate: { height: 'fit-content', overflow: 'hidden', transitionEnd: { overflow: 'visible' } }, exit: { height: 0, overflow: 'hidden' }, sx: {
                         position: 'relative',
                         overflow: 'hidden',
                         width: '100%',

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

@@ -54,21 +54,28 @@ import ERC_20_ABI from '../../../config/abi/erc20.json';
 import { NETWORK_ICONS } from '../../../config/constants/chains';
 import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
 import '../../../scss/BondModal.scss';
-import { useWriteContract } from "wagmi";
+import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
 import { PUBLIC_RPC_URLS } from "../../../config/constants/networks";
 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;
-    // const { isLoading: isConfirming, isSuccess: isConfirmed } = 
-    //     useWaitForTransactionReceipt({ 
-    //             confirmations: 4,
-    //             chainId: accountChainId,
-    //             hash: hash,
-    //             pollingInterval: 1_000
-    //     });
-    var _c = useState([]), bondData = _c[0], setBondData = _c[1];
+    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 !== null && accountChainId !== void 0 ? accountChainId : bondData[0].chainId,
+        hash: hash,
+    }), 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?
@@ -113,7 +120,6 @@ var BondModal = function (_a) {
             }
         });
     }); };
-    var _d = useState(null), buyTx = _d[0], setBuyTx = _d[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;
@@ -126,29 +132,16 @@ var BondModal = function (_a) {
                 case 1:
                     _a.trys.push([1, 3, , 4]);
                     amount = convertToTokenValue(inputValue, decimals);
-                    console.log('Amount:', amount);
                     return [4 /*yield*/, writeContractAsync({
                             address: tokenAddress,
                             abi: ERC_20_ABI,
                             functionName: 'approve',
-                            args: [account, amount]
+                            args: [bondData[0].billAddress, amount]
                         })];
                 case 2:
                     tx = _a.sent();
-                    // const receipt = useWaitForTransactionReceipt({
-                    //     confirmations: 4,
-                    //     chainId: accountChainId,
-                    //     hash: tx,
-                    //     pollingInterval: 1_000
-                    // });
-                    // console.log('Receipt',receipt);
-                    // if(receipt.isSuccess) {
-                    //     setReceiptTx(receipt.data.transactionHash);
-                    //     console.log('Receipt:', receipt);
-                    // }
                     if (tx) {
                         setApproveTx(tx);
-                        console.log('setApproveTx:', tx);
                     }
                     return [3 /*break*/, 4];
                 case 3:
@@ -160,10 +153,13 @@ var BondModal = function (_a) {
             }
         });
     }); };
-    var _e = useState(null), receiptTx = _e[0], setReceiptTx = _e[1];
-    var _f = useState(null), approveTx = _f[0], setApproveTx = _f[1];
-    var _g = useState(null), tokenBalance = _g[0], setTokenBalance = _g[1];
-    var _h = useState(null), tokenDecimals = _h[0], setTokenDecimals = _h[1];
+    // Confirmation message
+    useEffect(function () {
+        if (isConfirmed) {
+            setToastMessage("Transaction Complete.");
+            setTimeout(function () { return setToastMessage(null); }, 10000);
+        }
+    }, [approveTx, buyTx, isConfirmed]);
     useEffect(function () {
         if (isActive && account && bondData.length > 0) {
             getTokenBalance(bondData[0].chainId, bondData[0].principalToken, account).then(function (_a) {
@@ -194,7 +190,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();
@@ -236,13 +231,9 @@ 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 _j = useState(''), inputValue = _j[0], setInputValue = _j[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: [_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) {
+            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) {
                                                                 if (v.currentTarget.value.includes(',')) {
                                                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                                                 }
@@ -256,10 +247,10 @@ 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, { 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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), 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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null ?
-                                                    _jsxs(Button, { disabled: isPending, onClick: handleBuy, children: ["Buy ", bond === null || bond === void 0 ? void 0 : bond.showcaseTokenName] })
+                                                            } }) }), _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.principalTokenName) !== null && _o !== void 0 ? _o : bond.payoutTokenName, size: 30 })] }) }), _jsx(Flex, { className: "title-container tokenname-small", children: bond === null || bond === void 0 ? void 0 : bond.principalTokenName })] })] }), 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, { onClick: function () { setInputValue(tokenBalance !== null && tokenBalance !== void 0 ? tokenBalance : '0'); }, children: "Max" }) })] }))] }), _jsxs(Flex, { className: "modal-container button-container", children: [_jsx(Flex, { className: "button-container get", children: _jsxs(Button, { onClick: function () { window.open('https://ape.bond/swap', '_blank'); }, children: ["Get ", bond === null || bond === void 0 ? void 0 : bond.principalTokenName] }) }), _jsx(Flex, { className: "button-container buy", children: approveTx != null && isConfirmed ?
+                                                    _jsx(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, { disabled: isPending, onClick: handleApprove, children: "Approve" }) })] })] })] }) }) }, bond.billAddress));
+                                                        _jsx(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/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,48 +50,58 @@ import { getPendingVesting } from '../../../hooks/usePendingVesting';
 import { formatNumberSI } from '../../../utils/formatNumber';
 import { StyledHeadingText, TraitsContentContainer } from './styles';
 import '../../../scss/YourBondsModal.scss';
-import { 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;
+    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 = _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;
+        var address, tx, error_1;
         return __generator(this, function (_a) {
-            address = billAddress;
-            try {
-                // @ts-ignore
-                writeContract({
-                    address: address,
-                    abi: BOND_ABI,
-                    functionName: 'redeem',
-                    args: [billId],
-                });
-                if (hash) {
-                    setClaimTx(hash);
-                }
-            }
-            catch (error) {
-                console.error('Approval failed:', error);
+            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*/];
             }
-            return [2 /*return*/];
         });
     }); };
-    var _u = useState(null), claimTx = _u[0], setClaimTx = _u[1];
-    var _v = useState(null), toastMessage = _v[0], setToastMessage = _v[1];
+    // Confirmation message
     useEffect(function () {
-        if (claimTx) {
-            setToastMessage("Transaction complete: ".concat(claimTx));
-            setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
+        if (isConfirmed) {
+            setToastMessage("Transaction Complete.");
+            setTimeout(function () { return setToastMessage(null); }, 10000);
         }
-    }, [claimTx]);
-    // Fetch data for user owned bill
-    var _w = useState([]), bondData = _w[0], setBondData = _w[1];
-    var _x = useState([]), userOwnedBillsData = _x[0], setUserOwnedBillsData = _x[1];
+    }, [claimTx, isConfirmed]);
     // Functions to calculate display values for modal
     var totalPending = function (userBill) {
         var _a, _b, _c, _d;
@@ -107,10 +116,10 @@ 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 _y = useState(false), isOpenTraits = _y[0], setIsOpenTraits = _y[1];
-    var _z = useState(false), billRendered = _z[0], setBillRendered = _z[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: [_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(_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));
                                                     }) }), _jsxs(Text, { sx: { color: 'text', opacity: '0.6', fontSize: ['12px', '12px', '12px', '16px'] }, children: ["#", userBill.id] })] }), _jsxs(Flex, { className: "yourbondinfo blocks-container", children: [_jsx(Flex, { className: "yourbondinfo-block attributes", children: _jsxs(Flex, { sx: { flexDirection: 'column', width: '100%' }, children: [_jsxs(Flex, { sx: {
                                                                     justifyContent: 'space-between',
@@ -123,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);
@@ -121,7 +43,7 @@ var Bonds = function (_a) {
     }, []);
     useEffect(function () {
         axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
-            var bonds = response.data.bonds.filter(function (bond) { return !isSoldOut(bond); });
+            var bonds = response.data.bonds;
             setBondData(bonds);
         });
     }, []);
@@ -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) {
@@ -234,6 +156,12 @@ var Bonds = function (_a) {
         if (!(chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes('All Chains'))) {
             billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bill) { return chainFilterOption === null || chainFilterOption === void 0 ? void 0 : chainFilterOption.includes(bill.chainId.toString()); });
         }
+        if (filterOption !== 'SOLD OUT') {
+            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bond) { return !isSoldOut(bond); });
+        }
+        else {
+            billsToReturn = billsToReturn === null || billsToReturn === void 0 ? void 0 : billsToReturn.filter(function (bond) { return bond.soldOut; });
+        }
         // if (filterOption === 'FAVORITES') {
         //     billsToReturn = billsToReturn?.filter((bill) => favTokens.includes(bill.payoutTokenName.toLowerCase()))
         // }
@@ -247,7 +175,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,43 +64,55 @@ import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
 import { Input } from '../../components/uikit-sdk/Input';
 import { YourBondsModal } from "../../index";
 import BOND_ABI from '../../config/abi/bond.json';
-import { useWriteContract } from 'wagmi';
+import { useChainId, useWaitForTransactionReceipt, useWriteContract } from 'wagmi';
 var YourBonds = function (_a) {
-    var account = _a.account;
-    var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract;
+    var account = _a.account, accountChainId = _a.accountChainId;
+    var _b = useWriteContract(), hash = _b.data, isPending = _b.isPending, writeContract = _b.writeContract, writeContractAsync = _b.writeContractAsync;
+    var _c = useWaitForTransactionReceipt({
+        confirmations: 4,
+        chainId: accountChainId,
+        hash: hash,
+    }), isConfirming = _c.isLoading, isConfirmed = _c.isSuccess;
     var handleClaim = function (billId, billAddress) { return __awaiter(void 0, void 0, void 0, function () {
-        var address;
+        var address, tx, error_1;
         return __generator(this, function (_a) {
-            address = billAddress;
-            try {
-                // @ts-ignore
-                writeContract({
-                    address: address,
-                    abi: BOND_ABI,
-                    functionName: 'redeem',
-                    args: [billId],
-                });
-                if (hash) {
-                    setClaimTx(hash);
-                }
-            }
-            catch (error) {
-                console.error('Approval failed:', error);
+            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*/];
             }
-            return [2 /*return*/];
         });
     }); };
-    var _c = useState(null), claimTx = _c[0], setClaimTx = _c[1];
-    var _d = useState(null), toastMessage = _d[0], setToastMessage = _d[1];
+    var _d = useState(null), claimTx = _d[0], setClaimTx = _d[1];
+    var _e = useState(null), toastMessage = _e[0], setToastMessage = _e[1];
     useEffect(function () {
-        if (claimTx) {
-            setToastMessage("Transaction complete: ".concat(claimTx));
-            setTimeout(function () { return setToastMessage(null); }, 5000); // Hide toast after 5 seconds
+        if (isConfirmed) {
+            setToastMessage("Transaction Complete.");
+            setTimeout(function () { return setToastMessage(null); }, 10000);
         }
-    }, [claimTx]);
+    }, [claimTx, isConfirmed]);
     // Fetch data
-    var _e = useState([]), bondData = _e[0], setBondData = _e[1];
-    var _f = useState([]), mappedUserBills = _f[0], setMappedUserBills = _f[1];
+    var _f = useState([]), bondData = _f[0], setBondData = _f[1];
+    var _g = useState([]), mappedUserBills = _g[0], setMappedUserBills = _g[1];
     useEffect(function () {
         axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
             var bonds = response.data.bonds;
@@ -110,7 +121,7 @@ var YourBonds = function (_a) {
     }, []);
     useEffect(function () {
         var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var results, mappedBills, error_1;
+            var results, mappedBills, error_2;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -126,8 +137,8 @@ var YourBonds = function (_a) {
                         console.log('User owned bills data:', mappedBills);
                         return [3 /*break*/, 4];
                     case 3:
-                        error_1 = _a.sent();
-                        console.error('Error fetching user owned bills data:', error_1);
+                        error_2 = _a.sent();
+                        console.error('Error fetching user owned bills data:', error_2);
                         return [3 /*break*/, 4];
                     case 4: return [2 /*return*/];
                 }
@@ -135,8 +146,8 @@ var YourBonds = function (_a) {
         }); };
         fetchData();
     }, [account, bondData, claimTx]);
-    var _g = useState(null), sortConfig = _g[0], setSortConfig = _g[1];
-    var _h = useState(mappedUserBills), sortedBonds = _h[0], setSortedBonds = _h[1];
+    var _h = useState(null), sortConfig = _h[0], setSortConfig = _h[1];
+    var _j = useState(mappedUserBills), sortedBonds = _j[0], setSortedBonds = _j[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,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);
@@ -212,16 +223,16 @@ var YourBonds = function (_a) {
         return getFirstNonZeroDigits(parseFloat((_a = bond === null || bond === void 0 ? void 0 : bond.payoutTokenPrice) !== null && _a !== void 0 ? _a : '0'));
     };
     // Modal
-    var _j = useState(false), isModalOpen = _j[0], setIsModalOpen = _j[1];
-    var _k = useState(undefined), selectedBill = _k[0], setSelectedBill = _k[1];
+    var _k = useState(false), isModalOpen = _k[0], setIsModalOpen = _k[1];
+    var _l = useState(undefined), selectedBill = _l[0], setSelectedBill = _l[1];
     var rowClick = function (bill) {
         console.log(bill);
         setSelectedBill(bill);
         setIsModalOpen(true);
     };
     // Search logic
-    var _l = useState(''), inputValue = _l[0], setInputValue = _l[1];
-    var _m = useState(sortedBonds), filteredBonds = _m[0], setFilteredBonds = _m[1];
+    var _m = useState(''), inputValue = _m[0], setInputValue = _m[1];
+    var _o = useState(sortedBonds), filteredBonds = _o[0], setFilteredBonds = _o[1];
     useEffect(function () {
         if (inputValue === '') {
             setFilteredBonds(sortedBonds);
@@ -236,7 +247,7 @@ var YourBonds = function (_a) {
         setInputValue(event.target.value);
     };
     // Page render logic
-    var _o = useState(false), bondsRendered = _o[0], setBondsRendered = _o[1];
+    var _p = useState(false), bondsRendered = _p[0], setBondsRendered = _p[1];
     useEffect(function () {
         if (filteredBonds.length > 0) {
             setBondsRendered(true);
@@ -248,7 +259,7 @@ var YourBonds = function (_a) {
     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: "container table-container", children: [_jsxs(Flex, { className: "container header-container", children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] }, children: _jsx(Input, { value: inputValue, onChange: handleInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column header-claimable", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "CLAIMABLE" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('claimable'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-pending", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "PENDING" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('pending'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsxs(Flex, { className: "column header-terms", children: [_jsx(Text, { sx: { fontSize: '11px', color: 'textDisabledButton' }, children: "TERMS" }), _jsx(Flex, { className: "column header-icon", onClick: function () { return handleSort('terms'); }, children: _jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), _jsx(Flex, { className: "column header-claimall" })] })] }), filteredBonds.map(function (bill) {
                         var _a, _b;
-                        return (_jsxs(Flex, { className: "container bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column column-claimable", children: [formatNumberSI(parseFloat(claimable(bill).toFixed(3)), 0), _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: "column 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: "column column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "column column-claimall", children: _jsx(Button, { disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
+                        return (_jsxs(Flex, { className: "container bondrow-container", onClick: function () { return rowClick(bill); }, children: [_jsx(Flex, { className: "column column-tokens", children: _jsx(Flex, { className: "column column-tokeninfoname", children: _jsx(TokenInfoAndName, { bill: bill.bond, vestEnds: "Ends in ".concat(getPendingVesting(bill.lastBlockTimestamp, bill.vesting)) }) }) }), _jsxs(Flex, { className: "column column-bondinfo", children: [_jsxs(Flex, { className: "column 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: "column 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: "column column-terms", children: "".concat(vestingTimeRemaining(bill).days, "d, ").concat(vestingTimeRemaining(bill).hours, "h, ").concat(vestingTimeRemaining(bill).minutes, "m") }), _jsx(Flex, { className: "column column-claimall", children: _jsx(Button, { disabled: claimable(bill) === 0 || isPending, onClick: function (event) {
                                                     event.stopPropagation();
                                                     // Add your claim logic here
                                                     handleClaim(bill.id, bill.address);

package/dist/scss/BondModal.scss

@@ -405,4 +405,29 @@
     Button {
         width: 375px;
     }
+}
+
+.toast {
+    position: fixed;
+    bottom: 50px;
+    right: 20px;
+    background-color: var(--theme-ui-colors-white2);
+    color: white;
+    font-size: 24px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+    animation: fadein 0.5s, fadeout 0.5s 4.5s;
+    cursor: pointer;
+}
+
+@keyframes fadein {
+    from { bottom: 0; opacity: 0; }
+    to { bottom: 50px; opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { bottom: 50px; opacity: 1; }
+    to { bottom: 0; opacity: 0; }
 }

package/dist/scss/YourBonds.scss

@@ -132,23 +132,25 @@
 
 .toast {
     position: fixed;
-    bottom: 20px;
+    bottom: 50px;
     right: 20px;
-    background-color: #333;
-    color: #fff;
+    background-color: var(--theme-ui-colors-white2);
+    color: white;
+    font-size: 24px;
     padding: 10px 20px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
+    z-index: 9999;
     animation: fadein 0.5s, fadeout 0.5s 4.5s;
+    cursor: pointer;
 }
 
 @keyframes fadein {
     from { bottom: 0; opacity: 0; }
-    to { bottom: 20px; opacity: 1; }
+    to { bottom: 50px; opacity: 1; }
 }
 
 @keyframes fadeout {
-    from { bottom: 20px; opacity: 1; }
+    from { bottom: 50px; opacity: 1; }
     to { bottom: 0; opacity: 0; }
 }

package/dist/scss/YourBondsModal.scss

@@ -263,4 +263,29 @@
     Button {
         width: 125px;
     }
+}
+
+.toast {
+    position: fixed;
+    bottom: 50px;
+    right: 20px;
+    background-color: var(--theme-ui-colors-white2);
+    color: white;
+    font-size: 24px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 9999;
+    animation: fadein 0.5s, fadeout 0.5s 4.5s;
+    cursor: pointer;
+}
+
+@keyframes fadein {
+    from { bottom: 0; opacity: 0; }
+    to { bottom: 50px; opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { bottom: 50px; opacity: 1; }
+    to { bottom: 0; opacity: 0; }
 }

package/package.json

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