@ape.swap/bonds-sdk 1.0.453 → 1.0.455

package/dist/components/{Bonds/BondRows → BondRows}/BondRow.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { BondsDataResponse } from "../../../types/bonds";
-import '../../../scss/BondRow.scss';
+import { BondsDataResponse } from "../../types/bonds";
+import '../../scss/BondRow.scss';
 interface BondRowProps {
     key: string;
     bond: BondsDataResponse;

package/dist/components/{Bonds/BondRows → BondRows}/BondRow.js

@@ -11,18 +11,18 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import BigNumber from "bignumber.js";
-import { ChainId } from "../../../enum/apeswaplists";
-import ProgressBar from "../../ProgressBar/ProgressBar";
-import ProgressBarWrapper from "../../ProgressBar/ProgressBarWrapper";
-import TokenInfoAndName from "../../TokenInfoAndName";
-import Tooltip from "../../Tooltip/Tooltip";
-import { Flex, Svg, TooltipBubble } from "../../uikit-sdk";
-import { formatDollar, formatValue } from "../../../utils/formatNumbers";
-import getTimePeriods from "../../../utils/getTimePeriods";
-import { BLOCK_EXPLORER } from "../../../config/constants/chains";
+import { ChainId } from "../../enum/apeswaplists";
+import ProgressBar from "../ProgressBar/ProgressBar";
+import ProgressBarWrapper from "../ProgressBar/ProgressBarWrapper";
+import TokenInfoAndName from "../TokenInfoAndName";
+import Tooltip from "../Tooltip/Tooltip";
+import { Flex, Svg, TooltipBubble } from "../uikit-sdk";
+import { formatDollar, formatValue } from "../../utils/formatNumbers";
+import getTimePeriods from "../../utils/getTimePeriods";
+import { BLOCK_EXPLORER } from "../../config/constants/chains";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import '../../../scss/BondRow.scss';
+import '../../scss/BondRow.scss';
 var BondRow = function (_a) {
     var _b, _c, _d;
     var bond = _a.bond, hotBonds = _a.hotBonds;

package/dist/components/{Bonds/BondRows → BondRows}/BondRowHeader.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
-import '../../../scss/BondRowHeader.scss';
+import '../../scss/BondRowHeader.scss';
 interface BondRowHeaderProps {
     inputValue: string;
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/components/{Bonds/BondRows → BondRows}/BondRowHeader.js

@@ -11,10 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import { Flex } from 'theme-ui';
-import { Input } from '../../uikit-sdk/Input';
-import { Svg, TooltipBubble } from '../../uikit-sdk';
-import { TooltipText } from '../../../enum/tooltips';
-import '../../../scss/BondRowHeader.scss';
+import { Input } from '../uikit-sdk/Input';
+import { Svg, TooltipBubble } from '../uikit-sdk';
+import { TooltipText } from '../../enum/tooltips';
+import '../../scss/BondRowHeader.scss';
 var BondRowHeader = function (_a) {
     var inputValue = _a.inputValue, onInputChange = _a.onInputChange, onSort = _a.onSort;
     return (_jsxs(Flex, __assign({ className: "container header-container" }, { children: [_jsxs(Flex, __assign({ className: "column column-tokens" }, { children: [_jsx(Flex, __assign({ className: "column column-search", sx: { width: '100%', maxWidth: ['200px', '200px', '200px', '340px'] } }, { children: _jsx(Input, { value: inputValue, onChange: onInputChange, variant: "search", sx: { fontWeight: 400, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) })), _jsx(Flex, { className: "column column-tokenicons" })] })), _jsxs(Flex, __assign({ className: "column column-bondinfo" }, { children: [_jsxs(Flex, __assign({ className: "column column-discount" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Discount }), width: "230px", placement: "bottomLeft", transformTip: "translate(18%, -4%)" }, { children: ["DISCOUNT", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('discount'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-arr" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.ARR }), width: "230px", placement: "bottomLeft", transformTip: "translate(8%, -5%)" }, { children: ["ARR", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('arr'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-terms" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.Terms }), width: "230px", placement: "bottomRight", transformTip: "translate(11%, -5%)" }, { children: ["TERMS", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('terms'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsxs(Flex, __assign({ className: "column column-tokensremaining" }, { children: [_jsx(Flex, __assign({ className: "column tooltip" }, { children: _jsxs(TooltipBubble, __assign({ body: _jsx(Flex, { children: TooltipText.TokensRemaining }), width: "230px", placement: "bottomRight", transformTip: "translate(12%, -4%)" }, { children: ["TOKENS REMAINING", _jsx(Flex, __assign({ className: "column header-icon" }, { children: _jsx(Svg, { icon: "questionCircle", width: "12px" }) }))] })) })), _jsx(Flex, __assign({ className: "column header-icon", onClick: function () { return onSort('tokensRemaining'); } }, { children: _jsx(Svg, { icon: "sort", width: "12px" }) }))] })), _jsx(Flex, { className: "column column-hotbond" })] }))] })));

package/dist/components/{Bonds/BondRows → BondRows}/BondRowsByChain.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BondsDataResponse } from '../../../types/bonds';
+import { BondsDataResponse } from '../../types/bonds';
 declare const BondRowsByChain: ({ bonds, hotBonds, rowClick }: {
     bonds: BondsDataResponse[];
     hotBonds?: string[] | undefined;

package/dist/components/{Bonds/BondRows → BondRows}/BondRowsByChain.js

@@ -10,9 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { Flex } from '../../uikit-sdk';
-import { ChainId, MAINNET_CHAINS } from '../../../config/constants/chains';
 import BondRowsWithTitle from './BondRowsWithTitle';
+import { ChainId } from '../../enum/apeswaplists';
+import { Flex } from '../uikit-sdk';
+import { MAINNET_CHAINS } from '../../config/constants/chains';
 var BondRowsByChain = function (_a) {
     var bonds = _a.bonds, hotBonds = _a.hotBonds, rowClick = _a.rowClick;
     return (_jsxs(Flex, __assign({ sx: { width: '100%', flexDirection: 'column', mt: '5px' } }, { children: [[ChainId.MAINNET].map(function (chain, index) {

package/dist/components/{Bonds/BondRows → BondRows}/BondRowsWithTitle.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BondsDataResponse } from "../../../types/bonds";
+import { BondsDataResponse } from "../../types/bonds";
 declare const BondRowsWithTitle: ({ chain, bonds, hotBonds, rowClick, }: {
     chain: number;
     bonds: BondsDataResponse[];

package/dist/components/{Bonds/BondRows → BondRows}/BondRowsWithTitle.js

@@ -10,11 +10,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { Flex } from "../../uikit-sdk";
 import { AnimatePresence, motion } from "framer-motion";
 import ChainTitle from "./ChainTitle";
 import BondRow from "./BondRow";
 import { useState } from "react";
+import { Flex } from "../uikit-sdk";
 var BondRowsWithTitle = function (_a) {
     var chain = _a.chain, bonds = _a.bonds, hotBonds = _a.hotBonds, rowClick = _a.rowClick;
     var billsFilteredByChain = bonds.filter(function (bill) { return bill.chainId === chain; });

package/dist/components/{Bonds/BondRows → BondRows}/ChainTitle.js

@@ -10,8 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import { NETWORK_LABEL } from '../../../config/constants/chains';
-import { Flex, Svg } from '../../uikit-sdk';
+import { Flex, Svg } from '../uikit-sdk';
+import { NETWORK_LABEL } from '../../config/constants/chains';
 var ChainTitle = function (_a) {
     var chain = _a.chain, pt = _a.pt, isOpen = _a.isOpen;
     return (_jsxs(Flex, __assign({ sx: {

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

@@ -1,6 +1,6 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
-import '../../scss/BondModal.scss';
+import '../../../scss/BondModal.scss';
 declare const BondModal: ({ isOpen, onClose, bondAddress }: {
     isOpen: boolean;
     onClose: () => void;

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

@@ -50,23 +50,23 @@ import { jsxs as _jsxs, jsx as _jsx } from "theme-ui/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { Flex, Input, ThemeUIProvider } from 'theme-ui';
 import { useWeb3React } from '@web3-react/core';
-import { defaultTheme } from '../../theme';
-import getTimePeriods from '../../utils/getTimePeriods';
+import { defaultTheme } from '../../../theme';
+import getTimePeriods from '../../../utils/getTimePeriods';
 import axios from 'axios';
 import { BigNumber } from 'bignumber.js';
-import { getFirstNonZeroDigits } from '../../utils/roundNumber';
+import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
 import { useNavigate } from 'react-router-dom';
-import { isNumber } from '../../utils/numbers';
-import { TooltipBubble, Button, Svg, ListTag } from '../uikit-sdk';
-import { TooltipText } from '../../enum/tooltips';
+import { isNumber } from '../../../utils/numbers';
+import { TooltipBubble, Button, Svg, ListTag } from '../../uikit-sdk';
+import { TooltipText } from '../../../enum/tooltips';
 import { ethers } from 'ethers';
-import { adjustDecimals } from "../../utils/convertToTokenValue";
-import TokenImage from '../uikit-sdk/TokenImage';
-import '../../scss/BondModal.scss';
-import BOND_ABI from '../../config/abi/bond.json';
-import ERC_20_ABI from '../../config/abi/bond.json';
-import { NETWORK_ICONS } from '../../config/constants/chains';
+import { adjustDecimals } from "../../../utils/convertToTokenValue";
+import TokenImage from '../../uikit-sdk/TokenImage';
+import BOND_ABI from '../../../config/abi/bond.json';
+import ERC_20_ABI from '../../../config/abi/bond.json';
+import { NETWORK_ICONS } from '../../../config/constants/chains';
 import { formatUSDNumber, getPremiumColor, premium, youGet, youGetUSD, youSpend, youSpendUSD } from './helper';
+import '../../../scss/BondModal.scss';
 var BondModal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
     if (!isOpen)

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

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

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

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

package/dist/components/Modals/YourBondsModal/YourBondsModal.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import '../../../scss/YourBondsModal.scss';
+declare const YourBondsModal: ({ isOpen, onClose, bondAddress }: {
+    isOpen: boolean;
+    onClose: () => void;
+    bondAddress: string | null;
+}) => React.JSX.Element | null;
+export default YourBondsModal;

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

@@ -0,0 +1,150 @@
+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, ThemeUIProvider } from 'theme-ui';
+import { useWeb3React } from '@web3-react/core';
+import axios from 'axios';
+import { BigNumber } from 'bignumber.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MAINNET_CHAINS, NETWORK_ICONS } from '../../../config/constants/chains';
+import { fetchUserOwnedBillsDataAsync } from '../../../pages/YourBonds/fetchBillsUser';
+import { getBalanceNumber } from '../../../utils/getBalanceNumber';
+import { getFirstNonZeroDigits } from '../../../utils/roundNumber';
+import { defaultTheme } from '../../../theme';
+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';
+var YourBondsModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
+    if (!isOpen)
+        return null;
+    var _b = useWeb3React(), account = _b.account, chainId = _b.chainId, isActive = _b.isActive;
+    // Fetch data for user owned bill
+    var _c = useState([]), bondData = _c[0], setBondData = _c[1];
+    var _d = useState([]), userOwnedBillsData = _d[0], setUserOwnedBillsData = _d[1];
+    useEffect(function () {
+        axios.get('https://realtime-api.ape.bond/bonds').then(function (response) {
+            var bond = response.data.bonds.filter(function (x) {
+                return x.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase());
+            });
+            setBondData(bond);
+        });
+    }, [bondAddress]);
+    useEffect(function () {
+        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var results, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!account) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, Promise.all(MAINNET_CHAINS.map(function (chain) { return fetchUserOwnedBillsDataAsync(chain, account, bondData); }))];
+                    case 2:
+                        results = _a.sent();
+                        setUserOwnedBillsData(results);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        console.error('Error fetching user owned bills data:', error_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchData();
+    }, [account]);
+    // 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 _e = useState(false), isOpenTraits = _e[0], setIsOpenTraits = _e[1];
+    var _f = useState(false), billRendered = _f[0], setBillRendered = _f[1];
+    useEffect(function () {
+        if (userOwnedBillsData.length > 0) {
+            setBillRendered(true);
+        }
+    }, [userOwnedBillsData]);
+    return (_jsx(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: billRendered && (_jsx(_Fragment, { children: userOwnedBillsData.flat().map(function (data) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                var userBill = data.userOwnedBills.find(function (bill) { return bill.bond.billAddress.toLowerCase() === (bondAddress === null || bondAddress === void 0 ? void 0 : bondAddress.toLowerCase()); });
+                var attributes = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _a === void 0 ? void 0 : _a.data.attributes) === null || _b === void 0 ? void 0 : _b.filter(function (attrib) { return BILL_ATTRIBUTES.includes(attrib.trait_type); });
+                return userBill ? (_jsx(React.Fragment, { children: _jsx(Flex, __assign({ className: "yourbondsmodal backdrop" }, { children: _jsxs(Flex, __assign({ className: "yourbondsmodal content" }, { children: [_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: (_c = userBill.nftData) === null || _c === void 0 ? void 0 : _c.data.image }) })), _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.payoutTokenName, 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: [_jsx(Flex, __assign({ className: "yourbondinfo-block attributes" }, { children: _jsxs(Flex, __assign({ sx: { flexDirection: 'column', width: '100%' } }, { children: [_jsxs(Flex, __assign({ sx: {
+                                                                            justifyContent: 'space-between',
+                                                                            height: '24px',
+                                                                            background: 'white3',
+                                                                            px: '15px',
+                                                                            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({ 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(userBill.lastBlockTimestamp, userBill.vesting) })) }))] }))] })), _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({ 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: (_h = NETWORK_ICONS === null || NETWORK_ICONS === void 0 ? void 0 : NETWORK_ICONS[userBill.bond.chainId]) !== null && _h !== void 0 ? _h : 'question' }), _jsx(TokenImage, { symbol: (_j = userBill.bond.showcaseTokenName) !== null && _j !== void 0 ? _j : userBill.bond.payoutTokenName, 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) * ((_k = parseFloat(earnTokenPrice(userBill.bond))) !== null && _k !== void 0 ? _k : 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({ 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: (_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, __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) * ((_o = parseFloat(earnTokenPrice(userBill.bond))) !== null && _o !== void 0 ? _o : 0)).toFixed(2), ")") }))] }))] }))] }))] })), _jsxs(Flex, __assign({ className: "yourbondinfo button-container" }, { children: [_jsx(Flex, __assign({ className: "button-container claim" }, { children: _jsx(Button, { children: "CLAIM" }) })), _jsx(Flex, __assign({ className: "button-container transfer" }, { children: _jsx(Button, __assign({ variant: "secondary" }, { children: "TRANSFER" })) }))] }))] }))] }))] })) })) }, userBill.bond.billAddress)) : null;
+            }) })) })));
+};
+export default YourBondsModal;

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

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

package/dist/components/YourBondsModal/YourBondsModal.js

@@ -62,9 +62,9 @@ import { getBalanceNumber } from '../../utils/getBalanceNumber';
 import { MAINNET_CHAINS, NETWORK_ICONS } from '../../config/constants/chains';
 import { getPendingVesting } from '../../hooks/usePendingVesting';
 import { formatNumberSI } from '../../utils/formatNumber';
-import { fetchUserOwnedBillsDataAsync } from '../YourBonds/fetchBillsUser';
-import { StyledHeadingText, TraitsContentContainer } from './styles';
+import { StyledHeadingText, TraitsContentContainer } from '../Modals/YourBondsModal/styles';
 import { AnimatePresence, motion } from 'framer-motion';
+import { fetchUserOwnedBillsDataAsync } from '../../pages/YourBonds/fetchBillsUser';
 var YourBondsModal = function (_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, bondAddress = _a.bondAddress;
     if (!isOpen)

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import Bonds from './components/Bonds/Bonds';
-import BondSingle from './components/BondSingle/BondSingle';
-import BondModal from './components/BondModal/BondModal';
-import YourBonds from './components/YourBonds/YourBonds';
-import YourBondsModal from './components/YourBondsModal/YourBondsModal';
+import Bonds from './pages/Bonds/Bonds';
+import BondSingle from './pages/BondSingle/BondSingle';
+import YourBonds from './pages/YourBonds/YourBonds';
+import BondModal from './components/Modals/BondModal/BondModal';
+import YourBondsModal from './components/Modals/YourBondsModal/YourBondsModal';
 export { Bonds, BondSingle, BondModal, YourBonds, YourBondsModal };

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/index.ts
-import Bonds from './components/Bonds/Bonds';
-import BondSingle from './components/BondSingle/BondSingle';
-import BondModal from './components/BondModal/BondModal';
-import YourBonds from './components/YourBonds/YourBonds';
-import YourBondsModal from './components/YourBondsModal/YourBondsModal';
+import Bonds from './pages/Bonds/Bonds';
+import BondSingle from './pages/BondSingle/BondSingle';
+import YourBonds from './pages/YourBonds/YourBonds';
+import BondModal from './components/Modals/BondModal/BondModal';
+import YourBondsModal from './components/Modals/YourBondsModal/YourBondsModal';
 export { Bonds, BondSingle, BondModal, YourBonds, YourBondsModal };

package/dist/{components → pages}/BondSingle/BondSingle.js

@@ -22,10 +22,10 @@ import { BigNumber } from 'bignumber.js';
 import { getFirstNonZeroDigits } from '../../utils/roundNumber';
 import { useParams } from 'react-router-dom';
 import { isNumber } from '../../utils/numbers';
-import { Button, ListTag, Svg, TooltipBubble } from '../uikit-sdk';
+import { Button, ListTag, Svg, TooltipBubble } from '../../components/uikit-sdk';
 import { TooltipText } from '../../enum/tooltips';
 import { formatNumberSI } from '../../utils/formatNumber';
-import TokenImage from '../uikit-sdk/TokenImage';
+import TokenImage from '../../components/uikit-sdk/TokenImage';
 var BondSingle = function (_a) {
     var billAddress = useParams().billAddress;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;

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

@@ -68,9 +68,9 @@ import { BigNumber } from 'bignumber.js';
 import { ChainId } from '../../enum/apeswaplists';
 import { formatValue } from '../../utils/formatNumbers';
 import { BLOCK_EXPLORER } from '../../config/constants/chains';
-import BondRowsByChain from './BondRows/BondRowsByChain';
 import '../../scss/Bonds.scss';
-import BondRowsHeader from './BondRows/BondRowHeader';
+import BondRowHeader from '../../components/BondRows/BondRowHeader';
+import BondRowsByChain from '../../components/BondRows/BondRowsByChain';
 var Bonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;
@@ -267,6 +267,6 @@ var Bonds = function (_a) {
             setBondsRendered(true);
         }
     }, [filteredBonds]);
-    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowsHeader, { inputValue: inputValue, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds: filteredBonds, hotBonds: hotBonds, rowClick: rowClick })] })))] })));
+    return (_jsxs(ThemeUIProvider, __assign({ theme: defaultTheme }, { children: [isActive && account && _jsx("p", { children: account }), isActive && account && _jsx("button", __assign({ onClick: handleApprove }, { children: "Approve USDT" })), bondsRendered && (_jsxs(Flex, __assign({ className: "container table-container" }, { children: [_jsx(BondRowHeader, { inputValue: inputValue, onInputChange: handleInputChange, onSort: handleSort }), _jsx(BondRowsByChain, { bonds: filteredBonds, hotBonds: hotBonds, rowClick: rowClick })] })))] })));
 };
 export default Bonds;

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

@@ -65,9 +65,9 @@ import getTimePeriods from '../../utils/getTimePeriods';
 import { defaultTheme } from '../../theme';
 import '../../scss/YourBonds.scss';
 import { BigNumber } from 'bignumber.js';
-import { Text, Button, Svg } from '../uikit-sdk';
+import { Text, Button, Svg } from '../../components/uikit-sdk';
 import { MAINNET_CHAINS } from '../../config/constants/chains';
-import TokenInfoAndName from '../TokenInfoAndName';
+import TokenInfoAndName from '../../components/TokenInfoAndName';
 import { getBalanceNumber } from '../../utils/getBalanceNumber';
 import { getFirstNonZeroDigits } from '../../utils/roundNumber';
 import { formatNumberSI } from '../../utils/formatNumber';
@@ -75,7 +75,7 @@ import useCurrentTime from '../../hooks/useTimer';
 import { getPendingVesting } from '../../hooks/usePendingVesting';
 import axios from 'axios';
 import { fetchUserOwnedBillsDataAsync } from './fetchBillsUser';
-import { Input } from '../uikit-sdk/Input';
+import { Input } from '../../components/uikit-sdk/Input';
 var YourBonds = function (_a) {
     var connectionString = _a.connectionString;
     var _b = useWeb3React(), account = _b.account, isActive = _b.isActive;

package/dist/scss/BondRowHeader.scss

@@ -8,7 +8,7 @@
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 5px; 
-    font-size: 12px;
+    font-size: 11px;
     color: #73728E;
 }
 

package/package.json

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