@ape.swap/bonds-sdk 1.0.77 → 1.0.78-2.test.11

package/dist/views/YourBonds/fetchBillsUser.js

@@ -0,0 +1,235 @@
+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 = 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 billAbi from '../../config/abi/bond.json';
+import BigNumber from 'bignumber.js';
+import { getBillNftBatchData } from './getBillNftData';
+import multicall from '../../utils/multicall';
+import { BillVersion } from '../../enum/apeswaplists';
+import { ACF_TO_ABOND } from '../../config/constants/addresses';
+/**
+ * Fetches user-owned bill NFT data for a given set of owned bills data, chain ID, and bills.
+ * @param ownedBillsData An array of objects containing the ID, bill NFT address, and contract address of the owned bills.
+ * @param chainId The ID of the blockchain network.
+ * @param bills An array of objects containing the contract address and user-owned bill NFT data.
+ * @returns An array of objects containing the ID and data of the user-owned bill NFTs.
+ */
+export var fetchUserOwnedBillNftData = function (ownedBillsData, chainId, bills) { return __awaiter(void 0, void 0, void 0, function () {
+    var billsToFetch, billsFetched, groupedBillsToFetch, groupedBillsToFetchArray, billNftData, billNftDataFlat, result;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                billsToFetch = [];
+                billsFetched = [];
+                // Loop through each owned bill and check if it exists in the bills array
+                ownedBillsData === null || ownedBillsData === void 0 ? void 0 : ownedBillsData.forEach(function (_a) {
+                    var id = _a.id, billNftAddress = _a.billNftAddress, contractAddress = _a.contractAddress;
+                    var bill = bills
+                        .find(function (b) { return b.billAddress[chainId] === contractAddress; });
+                    // ?.userOwnedBillsNftData?.find((u) => +u.tokenId === +id)
+                    // If the bill exists in the bills array, add it to the billsFetched array
+                    if (bill) {
+                        billsFetched.push({ id: id, data: bill });
+                    }
+                    // If the bill doesn't exist in the bills array, add it to the billsToFetch array
+                    billsToFetch.push({ id: id, billNftAddress: billNftAddress, chainId: chainId });
+                });
+                groupedBillsToFetch = billsToFetch === null || billsToFetch === void 0 ? void 0 : billsToFetch.reduce(function (acc, bill) {
+                    var key = "".concat(bill === null || bill === void 0 ? void 0 : bill.billNftAddress, "-").concat(bill === null || bill === void 0 ? void 0 : bill.chainId);
+                    if (!acc[key]) {
+                        acc[key] = {
+                            billNftAddress: bill === null || bill === void 0 ? void 0 : bill.billNftAddress,
+                            chainId: bill === null || bill === void 0 ? void 0 : bill.chainId,
+                            ids: [],
+                        };
+                    }
+                    acc[key].ids.push(bill === null || bill === void 0 ? void 0 : bill.id);
+                    return acc;
+                }, {});
+                groupedBillsToFetchArray = Object.values(groupedBillsToFetch);
+                return [4 /*yield*/, Promise.all(groupedBillsToFetchArray.map(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+                        var billNftAddress = _b.billNftAddress, chainId = _b.chainId, ids = _b.ids;
+                        return __generator(this, function (_c) {
+                            return [2 /*return*/, getBillNftBatchData(ids, billNftAddress, chainId)];
+                        });
+                    }); }))
+                    // Flatten the resulting array of arrays into a single array
+                ];
+            case 1:
+                billNftData = _a.sent();
+                billNftDataFlat = billNftData.flat();
+                result = billsFetched.concat(billNftDataFlat.map(function (data) { return ({ id: data.tokenId, data: data }); }));
+                return [2 /*return*/, result];
+        }
+    });
+}); };
+/* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
+export var fetchUserOwnedBillsDataAsync = function (chainId, account, bondData) { return __awaiter(void 0, void 0, void 0, function () {
+    var bonds, userOwnedBills_1, mapUserOwnedBills_1, userOwnedBillsData, ownedBillsData, userBillNftData_1, combinedData, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 3, , 4]);
+                bonds = bondData.filter(function (bond) {
+                    return bond.billVersion !== BillVersion.FixedPrice &&
+                        (bond === null || bond === void 0 ? void 0 : bond.chainId) === chainId &&
+                        bond.type !== 'migration' &&
+                        bond.billAddress.toLowerCase() !== ACF_TO_ABOND.toLowerCase();
+                });
+                return [4 /*yield*/, fetchUserOwnedBills(chainId, account, bonds)];
+            case 1:
+                userOwnedBills_1 = _a.sent();
+                mapUserOwnedBills_1 = bonds.map(function (bill) {
+                    return userOwnedBills_1.filter(function (b) { return b.address.toLowerCase() === bill.billAddress.toLowerCase(); });
+                });
+                userOwnedBillsData = bonds.map(function (bill, i) { return ({
+                    index: bill.index,
+                    userOwnedBills: mapUserOwnedBills_1[i],
+                }); });
+                ownedBillsData = mapUserOwnedBills_1.flatMap(function (bs) {
+                    return bs.map(function (b) {
+                        return { id: b.id, billNftAddress: b.billNftAddress, contractAddress: b.address };
+                    });
+                });
+                return [4 /*yield*/, fetchUserOwnedBillNftData(ownedBillsData, chainId, bonds)
+                    // Merge userBillNftData into userOwnedBillsData
+                ];
+            case 2:
+                userBillNftData_1 = _a.sent();
+                combinedData = userOwnedBillsData.map(function (data) {
+                    var enrichedUserBills = data.userOwnedBills.map(function (bill) {
+                        var nftData = userBillNftData_1.find(function (nft) { return nft.id === parseInt(bill.id); });
+                        return __assign(__assign({}, bill), { nftData: nftData ? nftData : undefined });
+                    });
+                    return __assign(__assign({}, data), { userOwnedBills: enrichedUserBills });
+                });
+                return [2 /*return*/, Promise.resolve(combinedData)];
+            case 3:
+                error_1 = _a.sent();
+                console.error('Error fetching user owned bills data:', error_1);
+                return [2 /*return*/, Promise.reject(error_1)];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+/* MODIFIED FUNCTION FROM FRONTEND SPECIFICALLY FOR THE SDK */
+export var fetchUserOwnedBills = function (chainId, account, bonds) { return __awaiter(void 0, void 0, void 0, function () {
+    var billIdCalls, billIds, billsPendingRewardCall, billDataCalls, billVersions, billData, pendingRewardsCall, result, i, billDataPos, data;
+    var _a, _b, _c, _d, _e;
+    return __generator(this, function (_f) {
+        switch (_f.label) {
+            case 0:
+                billIdCalls = bonds.map(function (b) { return ({
+                    address: b.billAddress,
+                    name: 'getBillIds',
+                    params: [account],
+                }); });
+                return [4 /*yield*/, multicall(chainId, billAbi, billIdCalls, true, 15)];
+            case 1:
+                billIds = _f.sent();
+                billsPendingRewardCall = [];
+                billDataCalls = [];
+                billVersions = [];
+                billIds.forEach(function (idArray, index) {
+                    return idArray[0].forEach(function (id) {
+                        return id.gt(0) &&
+                            (billDataCalls.push({
+                                address: bonds[index].billAddress,
+                                name: bonds[index].billVersion !== BillVersion.V1 ? 'getBillInfo' : 'billInfo',
+                                params: [id],
+                                bond: bonds[index]
+                            }),
+                                billDataCalls.push({ address: bonds[index].billAddress, name: 'billNft' }),
+                                billsPendingRewardCall.push({
+                                    address: bonds[index].billAddress,
+                                    name: bonds[index].billVersion !== BillVersion.V1 ? 'claimablePayout' : 'pendingPayoutFor',
+                                    params: [id],
+                                    bond: bonds[index]
+                                }),
+                                billVersions.push(bonds[index].billVersion));
+                    });
+                });
+                return [4 /*yield*/, multicall(chainId, billAbi, billDataCalls, true, 150)];
+            case 2:
+                billData = _f.sent();
+                return [4 /*yield*/, multicall(chainId, billAbi, billsPendingRewardCall)];
+            case 3:
+                pendingRewardsCall = _f.sent();
+                result = [];
+                for (i = 0; i < billsPendingRewardCall.length; i++) {
+                    billDataPos = i === 0 ? 0 : i * 2;
+                    data = billVersions[i] !== BillVersion.V1
+                        ? {
+                            address: billsPendingRewardCall[i].address,
+                            id: billsPendingRewardCall[i].params[0].toString(),
+                            payout: new BigNumber((_a = billData[billDataPos][0]) === null || _a === void 0 ? void 0 : _a.payout.toString())
+                                .minus((_b = billData[billDataPos][0]) === null || _b === void 0 ? void 0 : _b.payoutClaimed.toString())
+                                .toString(),
+                            billNftAddress: billData[billDataPos + 1][0].toString(),
+                            vesting: (_c = billData[billDataPos][0]) === null || _c === void 0 ? void 0 : _c.vesting.toString(),
+                            lastBlockTimestamp: (_d = billData[billDataPos][0]) === null || _d === void 0 ? void 0 : _d.lastClaimTimestamp.toString(),
+                            truePricePaid: (_e = billData[billDataPos][0]) === null || _e === void 0 ? void 0 : _e.truePricePaid.toString(),
+                            pendingRewards: pendingRewardsCall[i][0].toString(),
+                            bond: billsPendingRewardCall[i].bond
+                        }
+                        : {
+                            address: billsPendingRewardCall[i].address,
+                            id: billsPendingRewardCall[i].params[0].toString(),
+                            payout: billData[billDataPos][0].toString(),
+                            billNftAddress: billData[billDataPos + 1][0].toString(),
+                            vesting: billData[billDataPos][1].toString(),
+                            lastBlockTimestamp: billData[billDataPos][2].toString(),
+                            truePricePaid: billData[billDataPos][3].toString(),
+                            pendingRewards: pendingRewardsCall[i][0].toString(),
+                            bond: billsPendingRewardCall[i].bond
+                        };
+                    result.push(data);
+                }
+                return [2 /*return*/, result];
+        }
+    });
+}); };

package/dist/views/YourBonds/getBillNftData.d.ts

@@ -0,0 +1,9 @@
+export declare const getBillNftData: (billNftId: string, billNftAddress: string, chainId: number) => Promise<any>;
+/**
+ * Retrieves batch data for a list of bill NFT IDs from the API.
+ * @param billNftIds - An array of bill NFT IDs to retrieve data for.
+ * @param billNftAddress - The address of the bill NFT contract.
+ * @param chainId - The ID of the blockchain network to retrieve data from.
+ * @returns A Promise that resolves to the batch data for the specified bill NFT IDs, or null if an error occurs.
+ */
+export declare const getBillNftBatchData: (billNftIds: string[], billNftAddress: string, chainId: number) => Promise<any>;

package/dist/views/YourBonds/getBillNftData.js

@@ -0,0 +1,109 @@
+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 axiosRetry from 'axios-retry';
+import axios from 'axios';
+import { apiV2BaseUrl } from '../../config/constants/api';
+export var getBillNftData = function (billNftId, billNftAddress, chainId) { return __awaiter(void 0, void 0, void 0, function () {
+    var response, billNftDataResp, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 3, , 4]);
+                axiosRetry(axios, {
+                    retries: 5,
+                    retryCondition: function () { return true; },
+                });
+                return [4 /*yield*/, axios.get("".concat(apiV2BaseUrl, "/bills/single/").concat(chainId, "/").concat(billNftAddress, "/").concat(billNftId))];
+            case 1:
+                response = _a.sent();
+                return [4 /*yield*/, response.data];
+            case 2:
+                billNftDataResp = _a.sent();
+                if (billNftDataResp.statusCode === 500) {
+                    return [2 /*return*/, null];
+                }
+                return [2 /*return*/, billNftDataResp];
+            case 3:
+                error_1 = _a.sent();
+                return [2 /*return*/, null];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+/**
+ * Retrieves batch data for a list of bill NFT IDs from the API.
+ * @param billNftIds - An array of bill NFT IDs to retrieve data for.
+ * @param billNftAddress - The address of the bill NFT contract.
+ * @param chainId - The ID of the blockchain network to retrieve data from.
+ * @returns A Promise that resolves to the batch data for the specified bill NFT IDs, or null if an error occurs.
+ */
+export var getBillNftBatchData = function (billNftIds, billNftAddress, chainId) { return __awaiter(void 0, void 0, void 0, function () {
+    var response, billNftDataResp, error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 3, , 4]);
+                // Retry the request up to 5 times if it fails
+                axiosRetry(axios, {
+                    retries: 5,
+                    retryCondition: function () { return true; },
+                });
+                // If no bill NFT IDs are provided, return null
+                if (!billNftIds || billNftIds.length === 0) {
+                    return [2 /*return*/, null];
+                }
+                return [4 /*yield*/, axios.get("".concat(apiV2BaseUrl, "/bills/batch/").concat(chainId, "/").concat(billNftAddress, "/?billIds[]=").concat(billNftIds.join('&billIds[]=')))
+                    // If the response status code is 500, return null
+                ];
+            case 1:
+                response = _a.sent();
+                return [4 /*yield*/, response.data];
+            case 2:
+                billNftDataResp = _a.sent();
+                if (billNftDataResp.statusCode === 500) {
+                    return [2 /*return*/, null];
+                }
+                // Return the batch data for the specified bill NFT IDs
+                return [2 /*return*/, billNftDataResp];
+            case 3:
+                error_2 = _a.sent();
+                // If an error occurs, return null
+                return [2 /*return*/, null];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };

package/dist/views/YourBondsModal/YourBondsModal.d.ts

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

package/dist/views/YourBondsModal/YourBondsModal.js

@@ -0,0 +1,173 @@
+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.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledHeadingText: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const TraitsContentContainer: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/views/YourBondsModal/styles.js

@@ -0,0 +1,12 @@
+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;