@ape.swap/bonds-sdk 1.0.779 → 1.1.0-seedify

package/dist/views/YourBondsModal/YourBondsModal.js

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

package/dist/views/YourBondsModal/styles.js

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