@ape.swap/bonds-sdk 1.0.778 → 1.0.779

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

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