@ape.swap/bonds-sdk 4.1.1-test.8 → 4.1.1-test.9

package/dist/main.js

@@ -7091,7 +7091,7 @@ const styles$i = {
         overflow: 'hidden',
         transform: 'translate3d(0, 0, 0)',
         borderRadius: '',
-        minHeight: '20px',
+        minHeight: '16px',
         display: 'block',
         backgroundColor: 'white2',
         '&:before': {
@@ -63994,20 +63994,6 @@ const vestingTimeRemaining = (userBill) => {
     const vestingCliff = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.vestingCliff) !== null && _b !== void 0 ? _b : 0;
     return getTimePeriods(parseInt(userBill.lastBlockTimestamp) + parseInt(userBill.vesting) - vestingCliff - currentTime, true);
 };
-const vestingTimeRemainingString = (userBill) => {
-    var _a, _b, _c;
-    const currentTime = Math.round(new Date().getTime() / 1000);
-    const lastBlockTimestamp = parseInt((_a = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _a !== void 0 ? _a : '0');
-    const vesting = parseInt((_b = userBill === null || userBill === void 0 ? void 0 : userBill.vesting) !== null && _b !== void 0 ? _b : '0');
-    const vestingCliff = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.vestingCliff;
-    const vestingTime = getTimePeriods(lastBlockTimestamp + vesting - currentTime, true);
-    if (vestingCliff && currentTime - lastBlockTimestamp < vestingCliff) {
-        const linearVesting = getTimePeriods(vesting - vestingCliff, true);
-        const cliffCountdown = getTimePeriods(lastBlockTimestamp + vestingCliff - currentTime, true);
-        return `${cliffCountdown.days !== 0 ? `${cliffCountdown.days}d` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours}hs` : `${cliffCountdown.minutes}mins`} + ${linearVesting.days}d`;
-    }
-    return `${vestingTime.days}d, ${vestingTime.hours}h, ${vestingTime.minutes}m`;
-};
 const getPercentageVested = (bond) => {
     var _a;
     const vestingTerm = parseInt((_a = bond === null || bond === void 0 ? void 0 : bond.vesting) !== null && _a !== void 0 ? _a : '0');
@@ -66295,9 +66281,22 @@ const APEBOND = `https://ape.bond`;
 
 const TokenImage = ({ symbol, symbol2, size, chain, }) => {
     var _a, _b;
+    const [error, setError] = useState(false);
     const token1 = symbol === 'USDC.e' ? 'USDC' : symbol;
     const token2 = symbol2 === 'USDC.e' ? 'USDC' : symbol2;
-    return token2 ? (jsxs(Flex, { sx: {
+    return error || !token1 ? (jsx$2(Flex, { sx: {
+            width: size - 2,
+            height: size - 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: '55px',
+            position: 'relative',
+        }, children: jsx$2(Skeleton, { animation: "waves", sx: {
+                width: size - 2,
+                height: size - 2,
+                borderRadius: '55px',
+                mb: '5px',
+            } }) })) : token2 ? (jsxs(Flex, { sx: {
             minWidth: size * 1.5 - 2,
             height: size - 2,
             justifyContent: 'center',
@@ -66318,7 +66317,7 @@ const TokenImage = ({ symbol, symbol2, size, chain, }) => {
             alignItems: 'center',
             borderRadius: '55px',
             position: 'relative',
-        }, children: [jsx$2("img", { src: `${APEBOND}/tokenImages/${token1 === null || token1 === void 0 ? void 0 : token1.toUpperCase()}.png`, alt: `tokenImgFor:${token1}`, width: size, height: token1 === 'BNB-ICHI' ? 19 : size }), chain && (jsx$2(Flex, { sx: {
+        }, children: [jsx$2("img", { src: `${APEBOND}/tokenImages/${token1 === null || token1 === void 0 ? void 0 : token1.toUpperCase()}.png`, alt: `tokenImgFor:${token1}`, width: size, height: token1 === 'BNB-ICHI' ? 19 : size, onError: () => setError(true) }), chain && (jsx$2(Flex, { sx: {
                     zIndex: 5,
                     position: 'absolute',
                     top: '-2px',
@@ -67915,7 +67914,7 @@ const ClaimAll = () => {
 
 const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", sx: { pr: ['0', '0', '0', '20px'] }, children: [jsx$2(Flex$1, { sx: { display: ['none', 'none', 'none', 'none', 'none', 'none', 'flex'], width: '125px' } }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["VESTING PROGRESS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
+    return (jsxs("div", { className: "bonds-menu", children: [jsx$2(BondFilters, { chainFilterOption: chainFilterOption !== null && chainFilterOption !== void 0 ? chainFilterOption : ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx$2("div", { className: "search-container", children: jsx$2(Flex$1, { sx: { width: '100%', maxWidth: '300px' }, children: jsx$2(Input, { className: "search-input", value: inputValue, onChange: (event) => setInputValue(event.target.value), variant: "search", sx: { fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }, width: '100%', placeholder: 'Search...' }) }) }), jsxs("div", { className: "headers-container", sx: { pr: ['0', '0', '0', '20px'] }, children: [jsx$2(Flex$1, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["VESTING PROGRESS", jsx$2(Flex$1, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx$2(Flex$1, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx$2(ClaimAll, {}) })] })] })] }));
 };
 
 const colors$1 = {
@@ -68166,1159 +68165,32 @@ const UserBillTooltipText = {
     FullyVested: 'This is the time remaining until all tokens from the bond are available to claim.',
     Pending: 'This is the amount of unvested tokens that cannot be claimed yet.',
     Claimable: 'This is the amount of tokens that have vested and are available to claim.',
-    YouSpent: 'This is the dollar amount you spent on the bond at the time of purchase.',
     Claimed: 'This is the amount of tokens that you have already claimed.',
 };
 
-var BOND_NFT_ABI = [
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "approved",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "Approval",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "operator",
-				type: "address"
-			},
-			{
-				indexed: false,
-				internalType: "bool",
-				name: "approved",
-				type: "bool"
-			}
-		],
-		name: "ApprovalForAll",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: false,
-				internalType: "string",
-				name: "newUri",
-				type: "string"
-			}
-		],
-		name: "BaseTokenUriChanged",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				indexed: true,
-				internalType: "bytes32",
-				name: "previousAdminRole",
-				type: "bytes32"
-			},
-			{
-				indexed: true,
-				internalType: "bytes32",
-				name: "newAdminRole",
-				type: "bytes32"
-			}
-		],
-		name: "RoleAdminChanged",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "account",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "sender",
-				type: "address"
-			}
-		],
-		name: "RoleGranted",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "account",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "sender",
-				type: "address"
-			}
-		],
-		name: "RoleRevoked",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: true,
-				internalType: "address",
-				name: "from",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				indexed: true,
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "Transfer",
-		type: "event"
-	},
-	{
-		anonymous: false,
-		inputs: [
-			{
-				indexed: false,
-				internalType: "bool",
-				name: "locked",
-				type: "bool"
-			}
-		],
-		name: "UriLocked",
-		type: "event"
-	},
-	{
-		inputs: [
-		],
-		name: "DEFAULT_ADMIN_ROLE",
-		outputs: [
-			{
-				internalType: "bytes32",
-				name: "",
-				type: "bytes32"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "FACTORY_ROLE",
-		outputs: [
-			{
-				internalType: "bytes32",
-				name: "",
-				type: "bytes32"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "MINTER_ROLE",
-		outputs: [
-			{
-				internalType: "bytes32",
-				name: "",
-				type: "bytes32"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "URI_SETTER_ROLE",
-		outputs: [
-			{
-				internalType: "bytes32",
-				name: "",
-				type: "bytes32"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "minter",
-				type: "address"
-			}
-		],
-		name: "addMinter",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			}
-		],
-		name: "allTokensDataOfOwner",
-		outputs: [
-			{
-				components: [
-					{
-						internalType: "uint256",
-						name: "tokenId",
-						type: "uint256"
-					},
-					{
-						internalType: "address",
-						name: "billAddress",
-						type: "address"
-					}
-				],
-				internalType: "struct BillNft.TokenData[]",
-				name: "",
-				type: "tuple[]"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "approve",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			}
-		],
-		name: "balanceOf",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		name: "billAddresses",
-		outputs: [
-			{
-				internalType: "address",
-				name: "",
-				type: "address"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "getApproved",
-		outputs: [
-			{
-				internalType: "address",
-				name: "",
-				type: "address"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			}
-		],
-		name: "getRoleAdmin",
-		outputs: [
-			{
-				internalType: "bytes32",
-				name: "",
-				type: "bytes32"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				internalType: "uint256",
-				name: "index",
-				type: "uint256"
-			}
-		],
-		name: "getRoleMember",
-		outputs: [
-			{
-				internalType: "address",
-				name: "",
-				type: "address"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			}
-		],
-		name: "getRoleMemberCount",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "start",
-				type: "uint256"
-			},
-			{
-				internalType: "uint256",
-				name: "end",
-				type: "uint256"
-			}
-		],
-		name: "getTokensOfOwnerByIndexes",
-		outputs: [
-			{
-				components: [
-					{
-						internalType: "uint256",
-						name: "tokenId",
-						type: "uint256"
-					},
-					{
-						internalType: "address",
-						name: "billAddress",
-						type: "address"
-					}
-				],
-				internalType: "struct BillNft.TokenData[]",
-				name: "",
-				type: "tuple[]"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				internalType: "address",
-				name: "account",
-				type: "address"
-			}
-		],
-		name: "grantRole",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				internalType: "address",
-				name: "account",
-				type: "address"
-			}
-		],
-		name: "hasRole",
-		outputs: [
-			{
-				internalType: "bool",
-				name: "",
-				type: "bool"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "string",
-				name: "name",
-				type: "string"
-			},
-			{
-				internalType: "string",
-				name: "symbol",
-				type: "string"
-			},
-			{
-				internalType: "string",
-				name: "baseTokenURI",
-				type: "string"
-			},
-			{
-				internalType: "address",
-				name: "factory",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			}
-		],
-		name: "initialize",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "operator",
-				type: "address"
-			}
-		],
-		name: "isApprovedForAll",
-		outputs: [
-			{
-				internalType: "bool",
-				name: "",
-				type: "bool"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "lockURI",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "billAddress",
-				type: "address"
-			}
-		],
-		name: "mint",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "newTokenId",
-				type: "uint256"
-			}
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "amount",
-				type: "uint256"
-			},
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "billAddress",
-				type: "address"
-			}
-		],
-		name: "mintMany",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "name",
-		outputs: [
-			{
-				internalType: "string",
-				name: "",
-				type: "string"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "ownerOf",
-		outputs: [
-			{
-				internalType: "address",
-				name: "",
-				type: "address"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				internalType: "address",
-				name: "account",
-				type: "address"
-			}
-		],
-		name: "renounceRole",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes32",
-				name: "role",
-				type: "bytes32"
-			},
-			{
-				internalType: "address",
-				name: "account",
-				type: "address"
-			}
-		],
-		name: "revokeRole",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "from",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "safeTransferFrom",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "from",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			},
-			{
-				internalType: "bytes",
-				name: "_data",
-				type: "bytes"
-			}
-		],
-		name: "safeTransferFrom",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "operator",
-				type: "address"
-			},
-			{
-				internalType: "bool",
-				name: "approved",
-				type: "bool"
-			}
-		],
-		name: "setApprovalForAll",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "string",
-				name: "baseTokenURI",
-				type: "string"
-			}
-		],
-		name: "setBaseURI",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "bytes4",
-				name: "interfaceId",
-				type: "bytes4"
-			}
-		],
-		name: "supportsInterface",
-		outputs: [
-			{
-				internalType: "bool",
-				name: "",
-				type: "bool"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "symbol",
-		outputs: [
-			{
-				internalType: "string",
-				name: "",
-				type: "string"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "index",
-				type: "uint256"
-			}
-		],
-		name: "tokenByIndex",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "index",
-				type: "uint256"
-			}
-		],
-		name: "tokenDataOfOwnerByIndex",
-		outputs: [
-			{
-				components: [
-					{
-						internalType: "uint256",
-						name: "tokenId",
-						type: "uint256"
-					},
-					{
-						internalType: "address",
-						name: "billAddress",
-						type: "address"
-					}
-				],
-				internalType: "struct BillNft.TokenData",
-				name: "tokenData",
-				type: "tuple"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "owner",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "index",
-				type: "uint256"
-			}
-		],
-		name: "tokenOfOwnerByIndex",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "tokenURI",
-		outputs: [
-			{
-				internalType: "string",
-				name: "",
-				type: "string"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "totalSupply",
-		outputs: [
-			{
-				internalType: "uint256",
-				name: "",
-				type: "uint256"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	},
-	{
-		inputs: [
-			{
-				internalType: "address",
-				name: "from",
-				type: "address"
-			},
-			{
-				internalType: "address",
-				name: "to",
-				type: "address"
-			},
-			{
-				internalType: "uint256",
-				name: "tokenId",
-				type: "uint256"
-			}
-		],
-		name: "transferFrom",
-		outputs: [
-		],
-		stateMutability: "nonpayable",
-		type: "function"
-	},
-	{
-		inputs: [
-		],
-		name: "uriLocked",
-		outputs: [
-			{
-				internalType: "bool",
-				name: "",
-				type: "bool"
-			}
-		],
-		stateMutability: "view",
-		type: "function"
-	}
-];
-
-const useMonitorTx = (txHash, chainId) => {
-    const { addToastError, addToastSuccess } = usePopups();
-    const transactionReceipt = useWaitForTransactionReceipt({
-        confirmations: 0,
-        chainId: chainId,
-        hash: txHash,
-    });
-    const { isLoading, isSuccess: isConfirmed, error, isError, data } = transactionReceipt !== null && transactionReceipt !== void 0 ? transactionReceipt : {};
-    useEffect(() => {
-        if (txHash && isError) {
-            addToastError(error.message, txHash, chainId);
-        }
-        if (txHash && isConfirmed) {
-            addToastSuccess(txHash, chainId);
-        }
-        /* eslint-disable react-hooks/exhaustive-deps */
-    }, [txHash, isError, isConfirmed, isLoading]);
-    return { isLoading, isSuccess: isConfirmed, data };
+const CardRecommendation = ({ cardIndex, bond, handleBuyBondClick, }) => {
+    return (jsxs(Flex, { sx: {
+            flexDirection: 'column',
+            width: ['100%', '100%', '100%', '50%'],
+            gap: '10px',
+            background: 'white3',
+            p: '10px',
+            borderRadius: '10px',
+        }, children: [jsx$2(Flex, { sx: {
+                    flexDirection: 'column',
+                    width: '100%',
+                    borderRadius: '10px',
+                    justifyContent: 'space-between',
+                    gap: '14px',
+                }, children: jsxs(Flex, { sx: { alignItems: 'center', justifyContent: 'space-between', gap: '10px' }, children: [jsxs(Flex, { sx: { gap: '5px', justifyContent: 'center', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx$2(Text, { sx: { fontSize: '14px' }, children: bond.payoutTokenName }), jsx$2(Text, { sx: { fontSize: '14px', fontWeight: 400, opacity: 0.6 }, children: getVestingTermsString(bond) })] }), jsx$2(Flex, { sx: { flexDirection: 'column', gap: '1px', alignItems: 'end' }, children: jsxs(Text, { sx: { color: 'success', fontSize: '12px', fontWeight: 700 }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx$2(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), sx: { width: '100%', lineHeight: '20px', height: '30px', fontSize: '14px' }, children: "Buy" })] }));
 };
 
-const TransferAction$1 = ({ userBill, toAddress, disabled, }) => {
-    var _a, _b, _c;
-    // Hooks
-    const SDKConfig = useSDKConfig();
-    const userChainId = useChainId();
-    const { address: account } = useEVMAccount();
-    const { switchChain } = useSwitchChain();
-    // State
-    const [transferTxHash, setTransferTxHash] = useState(null);
-    const [loadingTx, setLoadingTx] = useState(false);
-    const { writeContractAsync } = useWriteContract();
-    const { isLoading, isSuccess: isConfirmed } = useMonitorTx(transferTxHash, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
-    const { addToastError } = usePopups();
-    const load = loadingTx || (isLoading && !isConfirmed);
-    const handleTransfer = () => __awaiter$9(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d;
-        const address = userBill === null || userBill === void 0 ? void 0 : userBill.billNftAddress;
-        try {
-            setLoadingTx(true);
-            const tx = yield writeContractAsync({
-                address: address,
-                abi: BOND_NFT_ABI,
-                functionName: 'safeTransferFrom',
-                args: [account, toAddress, userBill === null || userBill === void 0 ? void 0 : userBill.id],
-                chain: userChainId,
-                account: account,
-            });
-            if (tx) {
-                setTransferTxHash(tx);
-                track({
-                    event: 'bond',
-                    chain: userChainId,
-                    data: {
-                        cat: 'transfer',
-                        type: (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.billType) !== null && _b !== void 0 ? _b : '',
-                        id: userBill === null || userBill === void 0 ? void 0 : userBill.id,
-                        from: account,
-                        to: toAddress,
-                        earnToken: (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken.symbol,
-                    },
-                });
-            }
-            setLoadingTx(false);
-        }
-        catch (error) {
-            console.error('Transfer failed:', error);
-            setLoadingTx(false);
-            addToastError(error.shortMessage);
-            reportError$1({
-                apiUrl: (_d = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.urls) === null || _d === void 0 ? void 0 : _d.apiV2,
-                error,
-                extraInfo: { type: 'transfer', userBill, error },
-                chainId: userChainId,
-                account,
-            });
-        }
-    });
-    return (jsx$2(Fragment$1, { children: userChainId !== ((_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId) ? (jsxs(Button, { onClick: () => { var _a; return switchChain({ chainId: (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId }); }, children: ["Switch to ", NETWORK_LABEL[(_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.chainId]] })) : (jsx$2(Button, { onClick: handleTransfer, load: load, disabled: load || disabled, fullWidth: true, children: "transfer" })) }));
-};
-
-const TransferAction = ({ userBill, toAddress, disabled, }) => {
-    var _a;
-    // Hooks
-    const wallet = useSOLAccount();
-    const { setVisible } = useWalletModal();
-    const { refetch } = useUserBonds();
-    // State
-    const [loadingTx, setLoadingTx] = useState(false);
-    const { addToastError, addToastSuccess } = usePopups();
-    const load = loadingTx;
-    const handleTransfer = () => __awaiter$9(void 0, void 0, void 0, function* () {
-        var _a;
-        try {
-            if (!wallet.publicKey || !wallet.signTransaction) {
-                throw new Error('Wallet not connected');
-            }
-            setLoadingTx(true);
-            const connection = new Connection(getRPC(types$1.ChainId.SOL));
-            // MPL Core program ID
-            if (!(userBill === null || userBill === void 0 ? void 0 : userBill.id) || !toAddress || !userBill || !(userBill === null || userBill === void 0 ? void 0 : userBill.asset))
-                return;
-            const asset = new PublicKey(userBill === null || userBill === void 0 ? void 0 : userBill.asset);
-            const newOwner = new PublicKey(toAddress);
-            const collection = new PublicKey(userBill.billNftAddress);
-            // Create instruction data with discriminator (14) + null compression_proof
-            // Since compression_proof is null, we just need discriminator + 1 byte for None option
-            const discriminator = buffer.Buffer.from([14]);
-            const nullOption = buffer.Buffer.from([0]); // 0 = None for Option<CompressionProof>
-            const data = buffer.Buffer.concat([discriminator, nullOption]);
-            // Build the accounts array according to MPL Core transfer instruction
-            const accounts = [
-                { pubkey: asset, isSigner: false, isWritable: true }, // asset
-                { pubkey: collection, isSigner: false, isWritable: false }, // collection
-                { pubkey: wallet.publicKey, isSigner: true, isWritable: true }, // payer
-                { pubkey: wallet.publicKey, isSigner: true, isWritable: false }, // authority
-                { pubkey: newOwner, isSigner: false, isWritable: false }, // new_owner
-                { pubkey: SystemProgram.programId, isSigner: false, isWritable: false }, // system_program
-                { pubkey: new PublicKey('noopb9bkMVfRPU8AsbpTUg8AQkHtKwMYZiFUjNRtMmV'), isSigner: false, isWritable: false }, // log_wrapper (SPL Noop Program)
-            ];
-            const transferInstruction = new TransactionInstruction({
-                keys: accounts,
-                programId: MPL_CORE_PROGRAM_ID,
-                data,
-            });
-            const transaction = new Transaction().add(transferInstruction);
-            // Get recent blockhash
-            const { blockhash, lastValidBlockHeight } = yield connection.getLatestBlockhash();
-            transaction.recentBlockhash = blockhash;
-            transaction.feePayer = wallet.publicKey;
-            // Sign and send transaction
-            const signedTransaction = yield wallet.signTransaction(transaction);
-            const signature = yield connection.sendRawTransaction(signedTransaction.serialize());
-            // Confirm transaction
-            yield connection.confirmTransaction({
-                signature,
-                blockhash,
-                lastValidBlockHeight,
-            }, 'confirmed');
-            refetch();
-            addToastSuccess(signature, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
-        }
-        catch (error) {
-            console.error('Error during NFT transfer:', error);
-            addToastError((error === null || error === void 0 ? void 0 : error.message) || 'Unknown error');
-        }
-        finally {
-            setLoadingTx(false);
-        }
-    });
-    return (jsx$2(Fragment$1, { children: !wallet.publicKey ? (jsxs(Button, { onClick: () => setVisible(true), children: ["Connect to ", NETWORK_LABEL[(_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId]] })) : (jsx$2(Button, { onClick: handleTransfer, load: load, disabled: load || disabled, fullWidth: true, children: "transfer" })) }));
-};
-
-const TransferModal = ({ onDismiss, userBill }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    // State
-    const [confirmSend, setConfirmSend] = useState(false);
-    const [toAddress, setToAddress] = useState('');
-    // Data
-    const bond = userBill === null || userBill === void 0 ? void 0 : userBill.bond;
-    const chainId = bond === null || bond === void 0 ? void 0 : bond.chainId;
-    const pending = chainId &&
-        ((_e = getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18)) === null || _e === void 0 ? void 0 : _e.toFixed(4));
-    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", children: [jsx$2(Flex, { sx: { mt: '20px' }, children: jsx$2(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [(_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol, " Bond - ID # ", userBill === null || userBill === void 0 ? void 0 : userBill.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx$2(TokenImage, { symbol: (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken) === null || _k === void 0 ? void 0 : _k.symbol, size: 20, chain: (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.chainId }), jsx$2(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx$2(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx$2(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx$2(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx$2(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend(!confirmSend), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx$2(Checkbox, { checked: confirmSend, onChange: (event) => {
-                            setConfirmSend(!confirmSend);
-                            event.stopPropagation();
-                        } }), jsx$2(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx$2(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: chainId === types$1.ChainId.SOL ? (jsx$2(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) : (jsx$2(TransferAction$1, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) })] }));
-};
-var TransferBondModal = React__default.memo(TransferModal);
-
-const CardRecommendation = ({ cardIndex, bond, handleBuyBondClick, }) => {
-    return (jsxs(Flex, { sx: {
-            flexDirection: 'column',
-            width: ['100%', '100%', '100%', '50%'],
-            gap: '10px',
-            background: 'white3',
-            p: '10px',
-            borderRadius: '10px',
-        }, children: [jsx$2(Flex, { sx: {
-                    flexDirection: 'column',
-                    width: '100%',
-                    borderRadius: '10px',
-                    justifyContent: 'space-between',
-                    gap: '14px',
-                }, children: jsxs(Flex, { sx: { alignItems: 'center', justifyContent: 'space-between', gap: '10px' }, children: [jsxs(Flex, { sx: { gap: '5px', justifyContent: 'center', alignItems: 'center' }, children: [jsx$2(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx$2(Text, { sx: { fontSize: '14px' }, children: bond.payoutTokenName }), jsx$2(Text, { sx: { fontSize: '14px', fontWeight: 400, opacity: 0.6 }, children: getVestingTermsString(bond) })] }), jsx$2(Flex, { sx: { flexDirection: 'column', gap: '1px', alignItems: 'end' }, children: jsxs(Text, { sx: { color: 'success', fontSize: '12px', fontWeight: 700 }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx$2(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), sx: { width: '100%', lineHeight: '20px', height: '30px', fontSize: '14px' }, children: "Buy" })] }));
-};
-
-const getBondRecommendations = (apiV2URL, user, contract, limit, chains) => __awaiter$9(void 0, void 0, void 0, function* () {
-    const { data } = yield axios.get(`${apiV2URL}/recommendations/bonds?user=${user}&contract=${contract}&limit=${limit}&chains=${chains}`);
-    return data === null || data === void 0 ? void 0 : data.bonds;
-});
-function useGetBondRecommendations(user, contract, limit = '3') {
-    const apiV2URL = useURLByEnvironment('apiV2');
+const getBondRecommendations = (apiV2URL, user, contract, limit, chains) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const { data } = yield axios.get(`${apiV2URL}/recommendations/bonds?user=${user}&contract=${contract}&limit=${limit}&chains=${chains}`);
+    return data === null || data === void 0 ? void 0 : data.bonds;
+});
+function useGetBondRecommendations(user, contract, limit = '3') {
+    const apiV2URL = useURLByEnvironment('apiV2');
     const SDKConfig = useSDKConfig();
     return useQuery({
         queryKey: [`${QUERY_KEYS.BOND_RECOMMENDATIONS}-${contract}-${limit}-${SDKConfig.chains}`],
@@ -69353,12 +68225,12 @@ const RecSkeleton = () => {
                     height: '70px',
                     borderRadius: 'normal',
                     mb: '5px',
-                } }, `rec-skeleton-1`), jsx$2(Skeleton, { animation: "waves", sx: {
+                } }), jsx$2(Skeleton, { animation: "waves", sx: {
                     width: '100%',
                     height: '70px',
                     borderRadius: 'normal',
                     mb: '5px',
-                } }, `rec-skeleton-2`)] }));
+                } })] }));
 };
 
 const Recommendations = ({ billAddress }) => {
@@ -69383,13 +68255,6 @@ const Recommendations = ({ billAddress }) => {
                     } }, `${bond.billAddress}-${index}`)))) : (jsx$2(RecSkeleton, {})) })] }));
 };
 
-const remove0xPrefix = (str) => {
-    if (str && str.startsWith('0x')) {
-        return str.slice(2);
-    }
-    return str;
-};
-
 // Custom HTML sanitizer
 function sanitizeHTML(html) {
     var _a;
@@ -69417,29 +68282,29 @@ const SafeHTMLComponent = ({ html }) => {
     return jsx$2("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
 };
 
-const ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }) => {
-    const [loaded, setLoaded] = useState(false);
-    return (jsxs(Fragment$1, { children: [jsx$2(Flex, { src: blurSrc, alt: alt, sx: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    backgroundSize: 'cover',
-                    zIndex: 0,
-                    objectFit: 'cover',
-                    transition: 'opacity 1.5s ease',
-                    borderRadius: 'normal',
-                    backgroundImage: `url(${blurSrc})`,
-                    filter: 'blur(1px)',
-                    opacity: loaded ? 0 : 1,
-                } }), jsx$2(Image$1, { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), sx: {
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                    transition: 'opacity 0.5s ease',
-                    borderRadius: 'normal',
-                    opacity: loaded ? 1 : 0,
-                } })] }));
+const ProgressBar = ({ value }) => {
+    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
+                    width: `${value <= 3 ? 3 : value}%`,
+                } }) }) }));
+};
+
+const styles$c = {
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    }};
+
+const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
+    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$c.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$c.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$c.skeleton }) }))] }));
 };
+var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
 var domToImage = {exports: {}};
 
@@ -70211,222 +69076,1530 @@ var domToImage = {exports: {}};
 	})(); 
 } (domToImage));
 
-var domToImageExports = domToImage.exports;
-var domtoimage = /*@__PURE__*/getDefaultExportFromCjs(domToImageExports);
+var domToImageExports = domToImage.exports;
+var domtoimage = /*@__PURE__*/getDefaultExportFromCjs(domToImageExports);
+
+function getTemplateHTML(data) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    //@ts-ignore
+    const isProfit = +((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payout) * +((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.payoutTokenPrice) - ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.dollarValue) > 0;
+    const getTokenImage = (symbol) => {
+        return `${APEBOND}/assets/${symbol.toUpperCase()}.png`;
+    };
+    const getPrincipalToken = () => {
+        var _a, _b, _c, _d;
+        if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.address.toLowerCase()) !== ((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.token0.address.toLowerCase()))
+            return (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.token0.symbol;
+        return (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.token1.symbol;
+    };
+    const getCalculateOff = () => {
+        if (!data || !data.data)
+            return 0;
+        return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100;
+    };
+    const getCalculatePriceDiscount = () => {
+        if (!data || !data.data)
+            return 0;
+        return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
+    };
+    return `
+  <div id="template-card" class="sharebondimage-card">
+    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
+    <div class="sharebondimage-nft">
+      <div style="position: relative">
+        <div class="sharebondimage-nft-id">
+          <span>#${data.tokenId}</span>
+        </div>
+        <img src="${data.image}" alt="bill-nft" />
+      </div>
+    </div>
+    <div class="sharebondimage-container-info">
+      <div class="sharebondimage-container-discount">
+        <img src="${getTokenImage((_e = (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.payoutTokenData) === null || _e === void 0 ? void 0 : _e.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
+        <div class="sharebondimage-container-discount-price">
+          <div class="sharebondimage-container-discount-token">
+            <span>${(_f = data.data) === null || _f === void 0 ? void 0 : _f.payoutTokenData.symbol}</span>
+            <span style="text-decoration: line-through">
+              $${formatTransactionAmount(+((_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.payoutTokenPrice))}
+            </span>
+          </div>
+          <span class="sharebondimage-container-discount-price-discount">
+            $${formatTransactionAmount(getCalculatePriceDiscount())}
+          </span>
+        </div>
+        <div class="sharebondimage-container-off">
+          <span>
+            ${localeFormat(getCalculateOff())}% OFF
+          </span>
+        </div>
+      </div>
+      <div class="sharebondimage-container-tokens">
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage((_h = getPrincipalToken()) !== null && _h !== void 0 ? _h : '')}" alt="principal-symbol" />
+          <div class="sharebondimage-amount-deposit">
+            ${formatTransactionAmount((_j = data === null || data === void 0 ? void 0 : data.data) === null || _j === void 0 ? void 0 : _j.deposit)}
+          </div>
+          <div class="sharebondimage-dollarvalue">
+            $${localeFormat((_k = data === null || data === void 0 ? void 0 : data.data) === null || _k === void 0 ? void 0 : _k.dollarValue)}
+          </div>
+        </div>
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage((_m = (_l = data === null || data === void 0 ? void 0 : data.data) === null || _l === void 0 ? void 0 : _l.payoutTokenData) === null || _m === void 0 ? void 0 : _m.symbol)}" alt="payout-token2-symbol" />
+          <div class="sharebondimage-container-earntoken">
+            <div class="sharebondimage-amount-earntoken">
+              <div class="sharebondimage-amount-payout">
+                ${localeFormat((_o = data === null || data === void 0 ? void 0 : data.data) === null || _o === void 0 ? void 0 : _o.payout)}
+              </div>
+              <div class="sharebondimage-amount-dollarvalue">
+                $${localeFormat(((_p = data === null || data === void 0 ? void 0 : data.data) === null || _p === void 0 ? void 0 : _p.payout) * +((_q = data === null || data === void 0 ? void 0 : data.data) === null || _q === void 0 ? void 0 : _q.payoutTokenPrice))}
+              </div>
+            </div>
+            <div class="sharebondimage-profit" style="${!isProfit ? 'display: none' : ''}">
+              <span>
+                +${localeFormat(((_r = data === null || data === void 0 ? void 0 : data.data) === null || _r === void 0 ? void 0 : _r.payout) * +((_s = data === null || data === void 0 ? void 0 : data.data) === null || _s === void 0 ? void 0 : _s.payoutTokenPrice) - ((_t = data === null || data === void 0 ? void 0 : data.data) === null || _t === void 0 ? void 0 : _t.dollarValue))}
+                profit!
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+}
+
+function generateImageFromTemplate(bondNFTData, link, apiUrl) {
+    return __awaiter$9(this, void 0, void 0, function* () {
+        var _a;
+        if (bondNFTData && bondNFTData.data) {
+            const container = document.createElement('div');
+            container.style.position = 'absolute';
+            container.style.top = '-9999px';
+            container.innerHTML = getTemplateHTML(bondNFTData);
+            document.body.appendChild(container);
+            const templateElement = container.querySelector('#template-card');
+            if (!templateElement)
+                return;
+            const fileName = `bond_share_${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.tokenId}`;
+            const existingImage = yield checkImageExists(fileName);
+            if (existingImage) {
+                share(link);
+            }
+            else {
+                try {
+                    const dataImage = yield domtoimage.toJpeg(templateElement, { quality: 0.85 });
+                    const response = yield fetch(dataImage);
+                    const blob = yield response.blob();
+                    const formData = new FormData();
+                    formData.append('file', blob, fileName);
+                    yield axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
+                        headers: { 'Content-Type': 'multipart/form-data' },
+                    });
+                }
+                catch (error) {
+                    console.error('Error upload file to cloudinary', error);
+                }
+                share(link);
+            }
+        }
+    });
+}
+function share(link) {
+    const linkElement = document.createElement('a');
+    linkElement.href = link;
+    linkElement.target = '_blank';
+    linkElement.click();
+}
+function checkImageExists(fileName) {
+    return __awaiter$9(this, void 0, void 0, function* () {
+        let existImg = true;
+        try {
+            yield axios.get(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`);
+        }
+        catch (_a) {
+            existImg = false;
+        }
+        return existImg;
+    });
+}
+
+const LinkShare = ({ userBill }) => {
+    var _a, _b, _c, _d, _e, _f;
+    // State
+    const [isLoading, setIsLoading] = useState([false, false]);
+    // Static data
+    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
+    const chainId = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId;
+    // Hooks
+    const mainUrl = useURLByEnvironment('mainUrl');
+    const apiUrl = (_b = useURLByEnvironment('apiV2')) !== null && _b !== void 0 ? _b : '';
+    const shareUrl = `${mainUrl}/bond-nft?bondAddress=${(_d = (_c = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _c === void 0 ? void 0 : _c.billNftAddress) === null || _d === void 0 ? void 0 : _d.toLowerCase()}%26bondChain=${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}%26tokenId=${userBill === null || userBill === void 0 ? void 0 : userBill.id}%26af=${(_e = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _e === void 0 ? void 0 : _e.createdAddressOwner}`;
+    const text = `I've filled my bags with $${(_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `;
+    const handleShare = (url, social) => __awaiter$9(void 0, void 0, void 0, function* () {
+        var _a;
+        if (isLoading[0] || isLoading[1]) {
+            console.log('something is off');
+            return;
+        }
+        track({
+            event: 'referral',
+            chain: chainId,
+            data: {
+                cat: `${social.toUpperCase()} Share Bond`,
+                bond: (_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.symbol,
+            },
+        });
+        setIsLoading([true, false] );
+        yield generateImageFromTemplate(bondNFTData, url, apiUrl);
+        setIsLoading([false, false]);
+    });
+    return (jsxs(Flex, { sx: {
+            background: ['white3', 'white3', 'white3', 'white4'],
+            borderRadius: 'normal',
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: '2px 10px 2px 5px',
+            fontWeight: 600,
+            fontSize: '12px',
+            height: '22px',
+            cursor: 'pointer',
+            '&:hover': {
+                background: 'white5',
+            },
+        }, onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx$2(Flex, { children: isLoading[0] ? jsx$2(Spinner, { size: 16 }) : jsx$2(Svg, { icon: "twitter", width: 20 }) }), jsx$2(Flex, { children: "SHARE" })] }));
+};
+
+const ProgressiveImage = ({ src, alt = 'bluredImg', blurSrc }) => {
+    const [loaded, setLoaded] = useState(false);
+    return (jsxs(Fragment$1, { children: [jsx$2(Flex, { src: blurSrc, alt: alt, sx: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    backgroundSize: 'cover',
+                    zIndex: 0,
+                    objectFit: 'cover',
+                    transition: 'opacity 1.5s ease',
+                    borderRadius: 'normal',
+                    backgroundImage: `url(${blurSrc})`,
+                    filter: 'blur(1px)',
+                    opacity: loaded ? 0 : 1,
+                } }), jsx$2(Image$1, { src: src, alt: `${alt}-${blurSrc}`, onLoad: () => setLoaded(true), sx: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    transition: 'opacity 0.5s ease',
+                    borderRadius: 'normal',
+                    opacity: loaded ? 1 : 0,
+                } })] }));
+};
+
+const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
+    var _a;
+    // Hooks
+    const controls = useAnimation();
+    const isMobile = useIsMobile();
+    // State
+    const [isOpenTraits, setIsOpenTraits] = useState(false);
+    //Static Data
+    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
+    const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
+    const attributes = (_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _a === void 0 ? void 0 : _a.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
+    const openAnimation = () => {
+        controls.start({
+            scale: isMobile ? [1, 2] : [1, 3],
+            zIndex: 1000,
+            transition: { duration: 0.2 },
+        });
+    };
+    const closeAnimation = () => {
+        controls.start({
+            scale: isMobile ? [2, 1] : [2, 1],
+            zIndex: -1,
+            transition: { duration: 0.3 },
+        });
+        setShowNFTImg(false);
+        setIsOpenTraits(false);
+    };
+    return (jsxs(Fragment$1, { children: [jsx$2(AnimatePresence, { children: showNFTImg && (jsx$2(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, sx: {
+                        position: 'absolute',
+                        display: ['flex'],
+                        top: ['-180px', '-180px', '-240px'],
+                        right: ['50%', '50%', '50%', '-13%'],
+                        transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],
+                        opacity: 0,
+                        zIndex: 5000,
+                    }, children: jsx$2(LinkShare, { userBill: userBill }) })) }), jsx$2(AnimatePresence, { children: (bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) && (jsxs(motion.div, { animate: controls, onClick: () => {
+                        if (showNFTImg) {
+                            closeAnimation();
+                        }
+                        else {
+                            openAnimation();
+                        }
+                    }, onAnimationStart: () => {
+                        setShowNFTImg(true);
+                    }, sx: {
+                        display: 'flex',
+                        zIndex: -1,
+                        position: showNFTImg ? 'fixed' : 'absolute',
+                        bottom: 'calc(100% - 10px)',
+                        left: '25%',
+                        width: '50%',
+                        aspectRatio: '1 / 0.56',
+                        cursor: 'pointer',
+                        borderRadius: 'normal',
+                        flexDirection: 'column',
+                        '&: hover': {
+                            zIndex: [1000, 1000, 1000, '1000 !important'],
+                        },
+                    }, children: [jsxs(Flex, { sx: {
+                                display: showNFTImg ? 'none' : 'flex',
+                                position: 'absolute',
+                                zIndex: 121,
+                                width: '100%',
+                                height: '100%',
+                                opacity: 0,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontWeight: 700,
+                                borderRadius: 'normal',
+                                '&: hover': {
+                                    zIndex: 1000,
+                                    opacity: 0.8,
+                                    background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',
+                                    backdropFilter: ' blur(2px)',
+                                },
+                            }, children: ["View NFT ", '>'] }), showNFTImg && (jsx$2(Flex, { sx: {
+                                position: 'absolute',
+                                top: '5px',
+                                right: '5px',
+                                background: 'grey',
+                                opacity: 0.9,
+                                p: '2px',
+                                borderRadius: '50%',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: jsx$2(Flex, { sx: { width: '6px' }, children: jsx$2(Svg, { icon: "close" }) }) })), jsx$2(ProgressiveImage, { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx$2(Flex, { sx: {
+                                position: 'absolute',
+                                bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],
+                                width: '100%',
+                                justifyContent: 'center',
+                            }, children: jsxs(Flex, { sx: {
+                                    flexDirection: 'column',
+                                    width: '100%',
+                                    minWidth: '250px',
+                                    pb: '10px',
+                                    alignItems: 'center',
+                                    transform: [
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.4) translateY(-75%)',
+                                    ],
+                                }, children: [jsxs(Flex, { sx: {
+                                            justifyContent: 'space-between',
+                                            height: '24px',
+                                            backgroundColor: 'white3',
+                                            px: '15px',
+                                            width: '100%',
+                                            borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
+                                        }, onClick: (event) => {
+                                            event.stopPropagation();
+                                            setIsOpenTraits(!isOpenTraits);
+                                        }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx$2(AnimatePresence, { children: isOpenTraits && (jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
+                                                overflow: 'hidden',
+                                                width: '100%',
+                                                position: 'absolute',
+                                                top: '24px',
+                                                borderRadius: '0 0 10px 10px',
+                                            }, onClick: (event) => {
+                                                event.stopPropagation();
+                                                setIsOpenTraits(!isOpenTraits);
+                                            }, children: jsx$2(Flex, { sx: { flexDirection: 'column' }, children: attributes
+                                                    ? attributes.map((a) => (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
+                                                    : BILL_ATTRIBUTES.map((attrib) => {
+                                                        return (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
+                                                    }) }) })) })] }) }))] })) })] }));
+};
+
+const ProfitCard = ({ userBond }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const totalPayout = getBalanceNumber((_a = userBond === null || userBond === void 0 ? void 0 : userBond.totalPayout) !== null && _a !== void 0 ? _a : '0', (_e = (_c = (_b = userBond === null || userBond === void 0 ? void 0 : userBond.bond) === null || _b === void 0 ? void 0 : _b.earnToken) === null || _c === void 0 ? void 0 : _c.decimals[(_d = userBond.bond) === null || _d === void 0 ? void 0 : _d.chainId]) !== null && _e !== void 0 ? _e : 18);
+    const payoutTokenPrice = (_g = (_f = userBond === null || userBond === void 0 ? void 0 : userBond.bond) === null || _f === void 0 ? void 0 : _f.payoutTokenPrice) !== null && _g !== void 0 ? _g : '0';
+    const totalPayoutUSD = totalPayout * parseFloat(payoutTokenPrice);
+    const depositAmountUSD = (_k = (_j = (_h = userBond === null || userBond === void 0 ? void 0 : userBond.nftData) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.dollarValue) !== null && _k !== void 0 ? _k : 0;
+    const profit = !depositAmountUSD ? 0 : totalPayoutUSD - depositAmountUSD;
+    return (jsx$2(Flex$1, { sx: {
+            display: ['none', 'none', 'none', 'none', 'none', 'none', 'flex'],
+        }, children: profit > 0.01 && (jsxs(Flex$1, { sx: {
+                border: '1px solid rgb(56, 166, 17, 0.20)',
+                p: '2px 6px',
+                color: 'success',
+                borderRadius: '5px',
+                background: '#38A6110D',
+                fontWeight: 700,
+                fontSize: '14px',
+                width: '100%',
+                justifyContent: 'center',
+            }, children: ["+$", formatNumberSI(profit, profit > 100 ? 0 : 2), " Profit!"] })) }));
+};
+
+var BOND_NFT_ABI = [
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "approved",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "Approval",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "operator",
+				type: "address"
+			},
+			{
+				indexed: false,
+				internalType: "bool",
+				name: "approved",
+				type: "bool"
+			}
+		],
+		name: "ApprovalForAll",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: false,
+				internalType: "string",
+				name: "newUri",
+				type: "string"
+			}
+		],
+		name: "BaseTokenUriChanged",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				indexed: true,
+				internalType: "bytes32",
+				name: "previousAdminRole",
+				type: "bytes32"
+			},
+			{
+				indexed: true,
+				internalType: "bytes32",
+				name: "newAdminRole",
+				type: "bytes32"
+			}
+		],
+		name: "RoleAdminChanged",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "account",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "sender",
+				type: "address"
+			}
+		],
+		name: "RoleGranted",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "account",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "sender",
+				type: "address"
+			}
+		],
+		name: "RoleRevoked",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: true,
+				internalType: "address",
+				name: "from",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				indexed: true,
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "Transfer",
+		type: "event"
+	},
+	{
+		anonymous: false,
+		inputs: [
+			{
+				indexed: false,
+				internalType: "bool",
+				name: "locked",
+				type: "bool"
+			}
+		],
+		name: "UriLocked",
+		type: "event"
+	},
+	{
+		inputs: [
+		],
+		name: "DEFAULT_ADMIN_ROLE",
+		outputs: [
+			{
+				internalType: "bytes32",
+				name: "",
+				type: "bytes32"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "FACTORY_ROLE",
+		outputs: [
+			{
+				internalType: "bytes32",
+				name: "",
+				type: "bytes32"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "MINTER_ROLE",
+		outputs: [
+			{
+				internalType: "bytes32",
+				name: "",
+				type: "bytes32"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "URI_SETTER_ROLE",
+		outputs: [
+			{
+				internalType: "bytes32",
+				name: "",
+				type: "bytes32"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "minter",
+				type: "address"
+			}
+		],
+		name: "addMinter",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			}
+		],
+		name: "allTokensDataOfOwner",
+		outputs: [
+			{
+				components: [
+					{
+						internalType: "uint256",
+						name: "tokenId",
+						type: "uint256"
+					},
+					{
+						internalType: "address",
+						name: "billAddress",
+						type: "address"
+					}
+				],
+				internalType: "struct BillNft.TokenData[]",
+				name: "",
+				type: "tuple[]"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "approve",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			}
+		],
+		name: "balanceOf",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		name: "billAddresses",
+		outputs: [
+			{
+				internalType: "address",
+				name: "",
+				type: "address"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "getApproved",
+		outputs: [
+			{
+				internalType: "address",
+				name: "",
+				type: "address"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			}
+		],
+		name: "getRoleAdmin",
+		outputs: [
+			{
+				internalType: "bytes32",
+				name: "",
+				type: "bytes32"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				internalType: "uint256",
+				name: "index",
+				type: "uint256"
+			}
+		],
+		name: "getRoleMember",
+		outputs: [
+			{
+				internalType: "address",
+				name: "",
+				type: "address"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			}
+		],
+		name: "getRoleMemberCount",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "start",
+				type: "uint256"
+			},
+			{
+				internalType: "uint256",
+				name: "end",
+				type: "uint256"
+			}
+		],
+		name: "getTokensOfOwnerByIndexes",
+		outputs: [
+			{
+				components: [
+					{
+						internalType: "uint256",
+						name: "tokenId",
+						type: "uint256"
+					},
+					{
+						internalType: "address",
+						name: "billAddress",
+						type: "address"
+					}
+				],
+				internalType: "struct BillNft.TokenData[]",
+				name: "",
+				type: "tuple[]"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				internalType: "address",
+				name: "account",
+				type: "address"
+			}
+		],
+		name: "grantRole",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				internalType: "address",
+				name: "account",
+				type: "address"
+			}
+		],
+		name: "hasRole",
+		outputs: [
+			{
+				internalType: "bool",
+				name: "",
+				type: "bool"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "string",
+				name: "name",
+				type: "string"
+			},
+			{
+				internalType: "string",
+				name: "symbol",
+				type: "string"
+			},
+			{
+				internalType: "string",
+				name: "baseTokenURI",
+				type: "string"
+			},
+			{
+				internalType: "address",
+				name: "factory",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			}
+		],
+		name: "initialize",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "operator",
+				type: "address"
+			}
+		],
+		name: "isApprovedForAll",
+		outputs: [
+			{
+				internalType: "bool",
+				name: "",
+				type: "bool"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "lockURI",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "billAddress",
+				type: "address"
+			}
+		],
+		name: "mint",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "newTokenId",
+				type: "uint256"
+			}
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "amount",
+				type: "uint256"
+			},
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "billAddress",
+				type: "address"
+			}
+		],
+		name: "mintMany",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "name",
+		outputs: [
+			{
+				internalType: "string",
+				name: "",
+				type: "string"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "ownerOf",
+		outputs: [
+			{
+				internalType: "address",
+				name: "",
+				type: "address"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				internalType: "address",
+				name: "account",
+				type: "address"
+			}
+		],
+		name: "renounceRole",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes32",
+				name: "role",
+				type: "bytes32"
+			},
+			{
+				internalType: "address",
+				name: "account",
+				type: "address"
+			}
+		],
+		name: "revokeRole",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "from",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "safeTransferFrom",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "from",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			},
+			{
+				internalType: "bytes",
+				name: "_data",
+				type: "bytes"
+			}
+		],
+		name: "safeTransferFrom",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "operator",
+				type: "address"
+			},
+			{
+				internalType: "bool",
+				name: "approved",
+				type: "bool"
+			}
+		],
+		name: "setApprovalForAll",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "string",
+				name: "baseTokenURI",
+				type: "string"
+			}
+		],
+		name: "setBaseURI",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "bytes4",
+				name: "interfaceId",
+				type: "bytes4"
+			}
+		],
+		name: "supportsInterface",
+		outputs: [
+			{
+				internalType: "bool",
+				name: "",
+				type: "bool"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "symbol",
+		outputs: [
+			{
+				internalType: "string",
+				name: "",
+				type: "string"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "index",
+				type: "uint256"
+			}
+		],
+		name: "tokenByIndex",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "index",
+				type: "uint256"
+			}
+		],
+		name: "tokenDataOfOwnerByIndex",
+		outputs: [
+			{
+				components: [
+					{
+						internalType: "uint256",
+						name: "tokenId",
+						type: "uint256"
+					},
+					{
+						internalType: "address",
+						name: "billAddress",
+						type: "address"
+					}
+				],
+				internalType: "struct BillNft.TokenData",
+				name: "tokenData",
+				type: "tuple"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "owner",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "index",
+				type: "uint256"
+			}
+		],
+		name: "tokenOfOwnerByIndex",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "tokenURI",
+		outputs: [
+			{
+				internalType: "string",
+				name: "",
+				type: "string"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "totalSupply",
+		outputs: [
+			{
+				internalType: "uint256",
+				name: "",
+				type: "uint256"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	},
+	{
+		inputs: [
+			{
+				internalType: "address",
+				name: "from",
+				type: "address"
+			},
+			{
+				internalType: "address",
+				name: "to",
+				type: "address"
+			},
+			{
+				internalType: "uint256",
+				name: "tokenId",
+				type: "uint256"
+			}
+		],
+		name: "transferFrom",
+		outputs: [
+		],
+		stateMutability: "nonpayable",
+		type: "function"
+	},
+	{
+		inputs: [
+		],
+		name: "uriLocked",
+		outputs: [
+			{
+				internalType: "bool",
+				name: "",
+				type: "bool"
+			}
+		],
+		stateMutability: "view",
+		type: "function"
+	}
+];
+
+const useMonitorTx = (txHash, chainId) => {
+    const { addToastError, addToastSuccess } = usePopups();
+    const transactionReceipt = useWaitForTransactionReceipt({
+        confirmations: 0,
+        chainId: chainId,
+        hash: txHash,
+    });
+    const { isLoading, isSuccess: isConfirmed, error, isError, data } = transactionReceipt !== null && transactionReceipt !== void 0 ? transactionReceipt : {};
+    useEffect(() => {
+        if (txHash && isError) {
+            addToastError(error.message, txHash, chainId);
+        }
+        if (txHash && isConfirmed) {
+            addToastSuccess(txHash, chainId);
+        }
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [txHash, isError, isConfirmed, isLoading]);
+    return { isLoading, isSuccess: isConfirmed, data };
+};
 
-function getTemplateHTML(data) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    //@ts-ignore
-    const isProfit = +((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payout) * +((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.payoutTokenPrice) - ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.dollarValue) > 0;
-    const getTokenImage = (symbol) => {
-        return `${APEBOND}/assets/${symbol.toUpperCase()}.png`;
-    };
-    const getPrincipalToken = () => {
+const TransferAction$1 = ({ userBill, toAddress, disabled, }) => {
+    var _a, _b, _c;
+    // Hooks
+    const SDKConfig = useSDKConfig();
+    const userChainId = useChainId();
+    const { address: account } = useEVMAccount();
+    const { switchChain } = useSwitchChain();
+    // State
+    const [transferTxHash, setTransferTxHash] = useState(null);
+    const [loadingTx, setLoadingTx] = useState(false);
+    const { writeContractAsync } = useWriteContract();
+    const { isLoading, isSuccess: isConfirmed } = useMonitorTx(transferTxHash, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
+    const { addToastError } = usePopups();
+    const load = loadingTx || (isLoading && !isConfirmed);
+    const handleTransfer = () => __awaiter$9(void 0, void 0, void 0, function* () {
         var _a, _b, _c, _d;
-        if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.address.toLowerCase()) !== ((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.token0.address.toLowerCase()))
-            return (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.token0.symbol;
-        return (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.token1.symbol;
-    };
-    const getCalculateOff = () => {
-        if (!data || !data.data)
-            return 0;
-        return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100;
-    };
-    const getCalculatePriceDiscount = () => {
-        if (!data || !data.data)
-            return 0;
-        return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
-    };
-    return `
-  <div id="template-card" class="sharebondimage-card">
-    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
-    <div class="sharebondimage-nft">
-      <div style="position: relative">
-        <div class="sharebondimage-nft-id">
-          <span>#${data.tokenId}</span>
-        </div>
-        <img src="${data.image}" alt="bill-nft" />
-      </div>
-    </div>
-    <div class="sharebondimage-container-info">
-      <div class="sharebondimage-container-discount">
-        <img src="${getTokenImage((_e = (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.payoutTokenData) === null || _e === void 0 ? void 0 : _e.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
-        <div class="sharebondimage-container-discount-price">
-          <div class="sharebondimage-container-discount-token">
-            <span>${(_f = data.data) === null || _f === void 0 ? void 0 : _f.payoutTokenData.symbol}</span>
-            <span style="text-decoration: line-through">
-              $${formatTransactionAmount(+((_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.payoutTokenPrice))}
-            </span>
-          </div>
-          <span class="sharebondimage-container-discount-price-discount">
-            $${formatTransactionAmount(getCalculatePriceDiscount())}
-          </span>
-        </div>
-        <div class="sharebondimage-container-off">
-          <span>
-            ${localeFormat(getCalculateOff())}% OFF
-          </span>
-        </div>
-      </div>
-      <div class="sharebondimage-container-tokens">
-        <div class="sharebondimage-container-token">
-          <img src="${getTokenImage((_h = getPrincipalToken()) !== null && _h !== void 0 ? _h : '')}" alt="principal-symbol" />
-          <div class="sharebondimage-amount-deposit">
-            ${formatTransactionAmount((_j = data === null || data === void 0 ? void 0 : data.data) === null || _j === void 0 ? void 0 : _j.deposit)}
-          </div>
-          <div class="sharebondimage-dollarvalue">
-            $${localeFormat((_k = data === null || data === void 0 ? void 0 : data.data) === null || _k === void 0 ? void 0 : _k.dollarValue)}
-          </div>
-        </div>
-        <div class="sharebondimage-container-token">
-          <img src="${getTokenImage((_m = (_l = data === null || data === void 0 ? void 0 : data.data) === null || _l === void 0 ? void 0 : _l.payoutTokenData) === null || _m === void 0 ? void 0 : _m.symbol)}" alt="payout-token2-symbol" />
-          <div class="sharebondimage-container-earntoken">
-            <div class="sharebondimage-amount-earntoken">
-              <div class="sharebondimage-amount-payout">
-                ${localeFormat((_o = data === null || data === void 0 ? void 0 : data.data) === null || _o === void 0 ? void 0 : _o.payout)}
-              </div>
-              <div class="sharebondimage-amount-dollarvalue">
-                $${localeFormat(((_p = data === null || data === void 0 ? void 0 : data.data) === null || _p === void 0 ? void 0 : _p.payout) * +((_q = data === null || data === void 0 ? void 0 : data.data) === null || _q === void 0 ? void 0 : _q.payoutTokenPrice))}
-              </div>
-            </div>
-            <div class="sharebondimage-profit" style="${!isProfit ? 'display: none' : ''}">
-              <span>
-                +${localeFormat(((_r = data === null || data === void 0 ? void 0 : data.data) === null || _r === void 0 ? void 0 : _r.payout) * +((_s = data === null || data === void 0 ? void 0 : data.data) === null || _s === void 0 ? void 0 : _s.payoutTokenPrice) - ((_t = data === null || data === void 0 ? void 0 : data.data) === null || _t === void 0 ? void 0 : _t.dollarValue))}
-                profit!
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  `;
-}
-
-function generateImageFromTemplate(bondNFTData, link, apiUrl) {
-    return __awaiter$9(this, void 0, void 0, function* () {
-        var _a;
-        if (bondNFTData && bondNFTData.data) {
-            const container = document.createElement('div');
-            container.style.position = 'absolute';
-            container.style.top = '-9999px';
-            container.innerHTML = getTemplateHTML(bondNFTData);
-            document.body.appendChild(container);
-            const templateElement = container.querySelector('#template-card');
-            if (!templateElement)
-                return;
-            const fileName = `bond_share_${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.tokenId}`;
-            const existingImage = yield checkImageExists(fileName);
-            if (existingImage) {
-                share(link);
-            }
-            else {
-                try {
-                    const dataImage = yield domtoimage.toJpeg(templateElement, { quality: 0.85 });
-                    const response = yield fetch(dataImage);
-                    const blob = yield response.blob();
-                    const formData = new FormData();
-                    formData.append('file', blob, fileName);
-                    yield axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
-                        headers: { 'Content-Type': 'multipart/form-data' },
-                    });
-                }
-                catch (error) {
-                    console.error('Error upload file to cloudinary', error);
-                }
-                share(link);
-            }
-        }
-    });
-}
-function share(link) {
-    const linkElement = document.createElement('a');
-    linkElement.href = link;
-    linkElement.target = '_blank';
-    linkElement.click();
-}
-function checkImageExists(fileName) {
-    return __awaiter$9(this, void 0, void 0, function* () {
-        let existImg = true;
+        const address = userBill === null || userBill === void 0 ? void 0 : userBill.billNftAddress;
         try {
-            yield axios.get(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`);
+            setLoadingTx(true);
+            const tx = yield writeContractAsync({
+                address: address,
+                abi: BOND_NFT_ABI,
+                functionName: 'safeTransferFrom',
+                args: [account, toAddress, userBill === null || userBill === void 0 ? void 0 : userBill.id],
+                chain: userChainId,
+                account: account,
+            });
+            if (tx) {
+                setTransferTxHash(tx);
+                track({
+                    event: 'bond',
+                    chain: userChainId,
+                    data: {
+                        cat: 'transfer',
+                        type: (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.billType) !== null && _b !== void 0 ? _b : '',
+                        id: userBill === null || userBill === void 0 ? void 0 : userBill.id,
+                        from: account,
+                        to: toAddress,
+                        earnToken: (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken.symbol,
+                    },
+                });
+            }
+            setLoadingTx(false);
         }
-        catch (_a) {
-            existImg = false;
+        catch (error) {
+            console.error('Transfer failed:', error);
+            setLoadingTx(false);
+            addToastError(error.shortMessage);
+            reportError$1({
+                apiUrl: (_d = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.urls) === null || _d === void 0 ? void 0 : _d.apiV2,
+                error,
+                extraInfo: { type: 'transfer', userBill, error },
+                chainId: userChainId,
+                account,
+            });
         }
-        return existImg;
     });
-}
+    return (jsx$2(Fragment$1, { children: userChainId !== ((_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId) ? (jsxs(Button, { onClick: () => { var _a; return switchChain({ chainId: (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId }); }, children: ["Switch to ", NETWORK_LABEL[(_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.chainId]] })) : (jsx$2(Button, { onClick: handleTransfer, load: load, disabled: load || disabled, fullWidth: true, children: "transfer" })) }));
+};
 
-const LinkShare = ({ userBill }) => {
-    var _a, _b, _c, _d, _e, _f;
-    // State
-    const [isLoading, setIsLoading] = useState([false, false]);
-    // Static data
-    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
-    const chainId = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId;
+const TransferAction = ({ userBill, toAddress, disabled, }) => {
+    var _a;
     // Hooks
-    const mainUrl = useURLByEnvironment('mainUrl');
-    const apiUrl = (_b = useURLByEnvironment('apiV2')) !== null && _b !== void 0 ? _b : '';
-    const shareUrl = `${mainUrl}/bond-nft?bondAddress=${(_d = (_c = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _c === void 0 ? void 0 : _c.billNftAddress) === null || _d === void 0 ? void 0 : _d.toLowerCase()}%26bondChain=${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}%26tokenId=${userBill === null || userBill === void 0 ? void 0 : userBill.id}%26af=${(_e = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _e === void 0 ? void 0 : _e.createdAddressOwner}`;
-    const text = `I've filled my bags with $${(_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `;
-    const handleShare = (url, social) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const wallet = useSOLAccount();
+    const { setVisible } = useWalletModal();
+    const { refetch } = useUserBonds();
+    // State
+    const [loadingTx, setLoadingTx] = useState(false);
+    const { addToastError, addToastSuccess } = usePopups();
+    const load = loadingTx;
+    const handleTransfer = () => __awaiter$9(void 0, void 0, void 0, function* () {
         var _a;
-        if (isLoading[0] || isLoading[1]) {
-            console.log('something is off');
-            return;
+        try {
+            if (!wallet.publicKey || !wallet.signTransaction) {
+                throw new Error('Wallet not connected');
+            }
+            setLoadingTx(true);
+            const connection = new Connection(getRPC(types$1.ChainId.SOL));
+            // MPL Core program ID
+            if (!(userBill === null || userBill === void 0 ? void 0 : userBill.id) || !toAddress || !userBill || !(userBill === null || userBill === void 0 ? void 0 : userBill.asset))
+                return;
+            const asset = new PublicKey(userBill === null || userBill === void 0 ? void 0 : userBill.asset);
+            const newOwner = new PublicKey(toAddress);
+            const collection = new PublicKey(userBill.billNftAddress);
+            // Create instruction data with discriminator (14) + null compression_proof
+            // Since compression_proof is null, we just need discriminator + 1 byte for None option
+            const discriminator = buffer.Buffer.from([14]);
+            const nullOption = buffer.Buffer.from([0]); // 0 = None for Option<CompressionProof>
+            const data = buffer.Buffer.concat([discriminator, nullOption]);
+            // Build the accounts array according to MPL Core transfer instruction
+            const accounts = [
+                { pubkey: asset, isSigner: false, isWritable: true }, // asset
+                { pubkey: collection, isSigner: false, isWritable: false }, // collection
+                { pubkey: wallet.publicKey, isSigner: true, isWritable: true }, // payer
+                { pubkey: wallet.publicKey, isSigner: true, isWritable: false }, // authority
+                { pubkey: newOwner, isSigner: false, isWritable: false }, // new_owner
+                { pubkey: SystemProgram.programId, isSigner: false, isWritable: false }, // system_program
+                { pubkey: new PublicKey('noopb9bkMVfRPU8AsbpTUg8AQkHtKwMYZiFUjNRtMmV'), isSigner: false, isWritable: false }, // log_wrapper (SPL Noop Program)
+            ];
+            const transferInstruction = new TransactionInstruction({
+                keys: accounts,
+                programId: MPL_CORE_PROGRAM_ID,
+                data,
+            });
+            const transaction = new Transaction().add(transferInstruction);
+            // Get recent blockhash
+            const { blockhash, lastValidBlockHeight } = yield connection.getLatestBlockhash();
+            transaction.recentBlockhash = blockhash;
+            transaction.feePayer = wallet.publicKey;
+            // Sign and send transaction
+            const signedTransaction = yield wallet.signTransaction(transaction);
+            const signature = yield connection.sendRawTransaction(signedTransaction.serialize());
+            // Confirm transaction
+            yield connection.confirmTransaction({
+                signature,
+                blockhash,
+                lastValidBlockHeight,
+            }, 'confirmed');
+            refetch();
+            addToastSuccess(signature, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
+        }
+        catch (error) {
+            console.error('Error during NFT transfer:', error);
+            addToastError((error === null || error === void 0 ? void 0 : error.message) || 'Unknown error');
+        }
+        finally {
+            setLoadingTx(false);
         }
-        track({
-            event: 'referral',
-            chain: chainId,
-            data: {
-                cat: `${social.toUpperCase()} Share Bond`,
-                bond: (_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.symbol,
-            },
-        });
-        setIsLoading([true, false] );
-        yield generateImageFromTemplate(bondNFTData, url, apiUrl);
-        setIsLoading([false, false]);
     });
-    return (jsxs(Flex, { sx: {
-            background: ['white3', 'white3', 'white3', 'white4'],
-            borderRadius: 'normal',
-            justifyContent: 'center',
-            alignItems: 'center',
-            p: '2px 10px 2px 5px',
-            fontWeight: 600,
-            fontSize: '12px',
-            height: '22px',
-            cursor: 'pointer',
-            '&:hover': {
-                background: 'white5',
-            },
-        }, onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx$2(Flex, { children: isLoading[0] ? jsx$2(Spinner, { size: 16 }) : jsx$2(Svg, { icon: "twitter", width: 20 }) }), jsx$2(Flex, { children: "SHARE" })] }));
+    return (jsx$2(Fragment$1, { children: !wallet.publicKey ? (jsxs(Button, { onClick: () => setVisible(true), children: ["Connect to ", NETWORK_LABEL[(_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId]] })) : (jsx$2(Button, { onClick: handleTransfer, load: load, disabled: load || disabled, fullWidth: true, children: "transfer" })) }));
 };
 
-const ProgressBar = ({ value }) => {
-    return (jsx$2(Flex$1, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row' }, children: jsx$2(Box$1, { className: "progressbar-background", children: jsx$2(Box$1, { className: "progressbar-completed", style: {
-                    width: `${value <= 3 ? 3 : value}%`,
-                } }) }) }));
+const TransferModal = ({ onDismiss, userBill }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // State
+    const [confirmSend, setConfirmSend] = useState(false);
+    const [toAddress, setToAddress] = useState('');
+    // Data
+    const bond = userBill === null || userBill === void 0 ? void 0 : userBill.bond;
+    const chainId = bond === null || bond === void 0 ? void 0 : bond.chainId;
+    const pending = chainId &&
+        ((_e = getBalanceNumber(new BigNumber$1((_a = userBill === null || userBill === void 0 ? void 0 : userBill.payout) !== null && _a !== void 0 ? _a : 0), (_d = (_c = (_b = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _b === void 0 ? void 0 : _b.decimals) === null || _c === void 0 ? void 0 : _c[chainId]) !== null && _d !== void 0 ? _d : 18)) === null || _e === void 0 ? void 0 : _e.toFixed(4));
+    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", children: [jsx$2(Flex, { sx: { mt: '20px' }, children: jsx$2(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [(_f = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _f === void 0 ? void 0 : _f.symbol, " Bond - ID # ", userBill === null || userBill === void 0 ? void 0 : userBill.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getTimeLeftForFullyVested(userBill) > 0 ? `Ends in ${getPendingVestingString(userBill)}` : `Fully Vested`] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx$2(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx$2(TokenImage, { symbol: (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken) === null || _k === void 0 ? void 0 : _k.symbol, size: 20, chain: (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.chainId }), jsx$2(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx$2(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx$2(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx$2(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx$2(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend(!confirmSend), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx$2(Checkbox, { checked: confirmSend, onChange: (event) => {
+                            setConfirmSend(!confirmSend);
+                            event.stopPropagation();
+                        } }), jsx$2(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx$2(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: chainId === types$1.ChainId.SOL ? (jsx$2(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) : (jsx$2(TransferAction$1, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress })) })] }));
 };
+var TransferBondModal = React__default.memo(TransferModal);
 
-const styles$c = {
-    titleText: {
-        opacity: 0.6,
-        fontSize: '12px',
-        lineHeight: ['16px', '16px', '16px', '24px'],
-        fontWeight: 400,
-    },
-    skeleton: {
-        width: ['45px', '45px', '60px'],
-        maxHeight: '18px',
-        minHeight: '18px',
-    }};
-
-const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
-    return (jsxs(Flex, { sx: style, children: [jsx$2(Flex, { sx: { alignItems: 'center' }, children: jsx$2(Text, { sx: styles$c.titleText, children: `${title}` }) }), showTooltip ? (jsx$2(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx$2(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx$2(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx$2(Skeleton, { sx: styles$c.skeleton }) }) }) })) : (jsx$2(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx$2(Skeleton, { sx: styles$c.skeleton }) }))] }));
+const YourBondModalHeader = ({ userBill, onDismiss }) => {
+    var _a, _b, _c, _d;
+    // Hooks
+    const isMobile = useIsMobile();
+    // Static Data
+    const payoutTokenSymbol = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.showcaseTokenName) !== null && _b !== void 0 ? _b : (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken.symbol;
+    // Modals
+    const [onTransferBondModal] = useModal(jsx$2(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill === null || userBill === void 0 ? void 0 : userBill.id}}`);
+    return (jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '7px' }, children: [payoutTokenSymbol ? (jsxs(Fragment$1, { children: [jsx$2(TokenImage, { symbol: payoutTokenSymbol, size: 30, chain: (_d = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _d === void 0 ? void 0 : _d.chainId }), jsx$2(Box$1, { sx: {
+                                    fontSize: ['16px', '16px', '16px', '18px'],
+                                    fontWeight: 700,
+                                    opacity: 0.7,
+                                    overflow: 'hidden',
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                    maxWidth: '100px',
+                                }, children: payoutTokenSymbol })] })) : (jsxs(Fragment$1, { children: [jsx$2(Skeleton, { animation: "waves", sx: {
+                                    width: '30px',
+                                    height: '30px',
+                                    borderRadius: '55px',
+                                    mr: '10px',
+                                } }), jsx$2(Skeleton, { animation: "waves", sx: {
+                                    width: '100px',
+                                    borderRadius: 'normal',
+                                } })] })), jsx$2(ProfitCard, { userBond: userBill }), jsx$2(Text, { sx: {
+                            color: 'text',
+                            opacity: '0.6',
+                            fontSize: ['11px', '11px', '11px', '14px'],
+                            display: ['none', 'none', 'none', 'flex'],
+                        }, children: (userBill === null || userBill === void 0 ? void 0 : userBill.id) && `#${userBill.id}` })] }), jsxs(Flex, { sx: { gap: '7px' }, children: [jsx$2(Button, { onClick: onTransferBondModal, disabled: !userBill, sx: { height: '22px', fontSize: '12px', fontWeight: 600, p: '2px 6px' }, children: "TRANSFER" }), jsx$2(Flex, { className: "svg-close", onClick: onDismiss, sx: { cursor: 'pointer', p: '2px 5px' }, children: jsx$2(Svg, { icon: "close", width: isMobile ? '12px' : '18px' }) })] })] }));
 };
-var ProgressBarWrapper$1 = React__default.memo(ProgressBarWrapper);
 
 function useBondsListPreTGE() {
     var _a, _b;
@@ -75904,22 +76077,29 @@ const calculateBondsData = (queryClient) => __awaiter$9(void 0, void 0, void 0,
     }
 });
 
-const YourBondsModal = ({ userBill, onDismiss }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+const remove0xPrefix = (str) => {
+    if (str && str.startsWith('0x')) {
+        return str.slice(2);
+    }
+    return str;
+};
+
+const Actions = ({ userBill }) => {
+    var _a, _b, _c;
     // Hooks
+    const { switchChainAsync } = useSwitchChain();
+    const { data: liveBonds } = useBondsData();
     const SDKConfig = useSDKConfig();
     const chainId = useChainId();
-    const { switchChainAsync } = useSwitchChain();
     const { writeContractAsync } = useWriteContract();
     const { address: account } = useEVMAccount();
     const { addToastError } = usePopups();
     const { refetch: refetchUserBonds } = useUserBonds();
-    const { data: liveBonds } = useBondsData();
     // State
-    const [isOpenTraits, setIsOpenTraits] = useState(false);
     const [claimTxHash, setClaimTxHash] = useState(null);
     const [loadingTx, setLoadingTx] = useState(false);
     const { isLoading, isSuccess: isConfirmed } = useMonitorTx(claimTxHash, (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId);
+    // Static Data
     const load = loadingTx || (isLoading && !isConfirmed);
     const similarLiveBond = liveBonds === null || liveBonds === void 0 ? void 0 : liveBonds.find((bond) => {
         var _a, _b, _c, _d, _e;
@@ -75928,18 +76108,9 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
             ((_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.symbol) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_e = (_d = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) === null || _e === void 0 ? void 0 : _e.toLowerCase());
     });
     const canPurchaseAgain = !!similarLiveBond;
-    // Static Data
-    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
-    const depositUSD = (_c = (_b = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.dollarValue;
-    const payout = (_e = (_d = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.payout;
-    const payoutTokenPrice = parseFloat((_h = (_g = (_f = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.payoutTokenPrice) !== null && _h !== void 0 ? _h : '0');
-    const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0;
-    const bonusPercentage = depositUSD && payoutUSD ? (payoutUSD / depositUSD - 1) * 100 : 0;
-    const payoutTokenSymbol = (_k = (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.showcaseTokenName) !== null && _k !== void 0 ? _k : (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.earnToken.symbol;
-    // Cliff display info:
-    const vestingCliff = (_m = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _m === void 0 ? void 0 : _m.vestingCliff;
+    const vestingCliff = (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.vestingCliff;
     const currentTime = Math.round(new Date().getTime() / 1000);
-    const lastBlockTimestamp = parseInt((_o = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _o !== void 0 ? _o : '0');
+    const lastBlockTimestamp = parseInt((_c = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _c !== void 0 ? _c : '0');
     const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
     const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
     const handleClaim = (billId, billAddress) => __awaiter$9(void 0, void 0, void 0, function* () {
@@ -75983,165 +76154,204 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
             });
         }
     });
-    const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
-    const attributes = (_p = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _p === void 0 ? void 0 : _p.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
-    const [onTransferBondModal] = useModal(jsx$2(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill === null || userBill === void 0 ? void 0 : userBill.id}}`);
     useEffect(() => {
         if (isConfirmed) {
             refetchUserBonds();
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [isConfirmed]);
-    const isMobile = useIsMobile();
-    const controls = useAnimation();
-    const [hide, setHide] = useState(false);
-    const openAnimation = () => {
-        controls.start({
-            scale: isMobile ? [1, 2] : [1, 3],
-            zIndex: 1000,
-            transition: { duration: 0.2 },
-        });
-    };
-    const closeAnimation = () => {
-        controls.start({
-            scale: isMobile ? [2, 1] : [2, 1],
-            zIndex: -1,
-            transition: { duration: 0.3 },
-        });
-        setHide(false);
-        setIsOpenTraits(false);
-    };
+    return (jsxs(Fragment$1, { children: [jsx$2(Button, { variant: "secondary", disabled: claimable(userBill) === 0 || load || !userBill || isPendingCliff, load: load, onClick: (event) => {
+                    var _a, _b;
+                    event.stopPropagation();
+                    if (chainId !== ((_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId)) {
+                        switchChainAsync({ chainId: (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId })
+                            .then(() => {
+                            handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
+                        })
+                            .catch();
+                    }
+                    else {
+                        handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
+                    }
+                }, sx: { fontSize: '14px', width: '100%' }, children: isPendingCliff
+                    ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
+                    : 'Claim' }), jsx$2(Button, { sx: { fontSize: '14px', width: '100%' }, onClick: () => canPurchaseAgain
+                    ? (window.location.href = `https://ape.bond/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`)
+                    : null, disabled: !canPurchaseAgain, children: canPurchaseAgain ? 'Buy again' : 'sold out' })] }));
+};
+
+const ActionsSolana = ({ userBill }) => {
+    var _a, _b;
+    // Hooks
+    const SDKConfig = useSDKConfig();
+    const { publicKey: accountSolana, signTransaction } = useSOLAccount();
+    const { refetch } = useUserBonds();
+    const { addToastError, addToastSuccess } = usePopups();
+    const { data: liveBonds } = useBondsData();
+    // State
+    const [loadingTx, setLoadingTx] = useState(false);
+    // Static Data
+    const similarLiveBond = liveBonds === null || liveBonds === void 0 ? void 0 : liveBonds.find((bond) => {
+        var _a, _b, _c, _d, _e;
+        return !(bond === null || bond === void 0 ? void 0 : bond.soldOut) &&
+            !(bond === null || bond === void 0 ? void 0 : bond.hide) &&
+            ((_b = (_a = bond === null || bond === void 0 ? void 0 : bond.earnToken) === null || _a === void 0 ? void 0 : _a.symbol) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === ((_e = (_d = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) === null || _e === void 0 ? void 0 : _e.toLowerCase());
+    });
+    const canPurchaseAgain = !!similarLiveBond;
+    const connection = new Connection(getRPC(types$1.ChainId.SOL), 'confirmed');
+    const vestingCliff = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.vestingCliff;
+    const currentTime = Math.round(new Date().getTime() / 1000);
+    const lastBlockTimestamp = parseInt((_b = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _b !== void 0 ? _b : '0');
+    const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
+    const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
+    // Handlers
+    const ensureUserPayoutAtaExists = (_a) => __awaiter$9(void 0, [_a], void 0, function* ({ connection, payer, payoutMint, user, }) {
+        const userPayoutAta = yield getAssociatedTokenAddress(payoutMint, user);
+        try {
+            yield getAccount(connection, userPayoutAta);
+        }
+        catch (_b) {
+            const ataIx = createAssociatedTokenAccountInstruction(payer, // fee payer
+            userPayoutAta, // ATA to create
+            user, // owner of ATA
+            payoutMint);
+            const tx = new Transaction().add(ataIx);
+            const latestBlockhash = yield connection.getLatestBlockhash('confirmed');
+            tx.recentBlockhash = latestBlockhash.blockhash;
+            tx.feePayer = payer;
+            if (!signTransaction)
+                return;
+            const signed = yield signTransaction(tx);
+            const txid = yield connection.sendRawTransaction(signed.serialize(), {
+                skipPreflight: false,
+                preflightCommitment: 'confirmed',
+            });
+            yield connection.confirmTransaction({
+                signature: txid,
+                blockhash: latestBlockhash.blockhash,
+                lastValidBlockHeight: latestBlockhash.lastValidBlockHeight,
+            }, 'confirmed');
+        }
+        return userPayoutAta;
+    });
+    const handleClaim = () => __awaiter$9(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        try {
+            setLoadingTx(true);
+            const earnTokenAddress = (_c = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.earnToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[(_d = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _d === void 0 ? void 0 : _d.chainId];
+            const contractAddress = (_f = (_e = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _e === void 0 ? void 0 : _e.contractAddress) === null || _f === void 0 ? void 0 : _f[(_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.chainId];
+            if (!earnTokenAddress || !userBill.asset || !contractAddress)
+                return;
+            const payoutMint = new PublicKey(earnTokenAddress);
+            const bondIssuancePda = new PublicKey(contractAddress);
+            const nftMint = new PublicKey(userBill.asset);
+            const [bondTermPda] = PublicKey.findProgramAddressSync([new TextEncoder().encode('bond_term'), bondIssuancePda.toBuffer()], PROGRAM_ID);
+            const [bondPda] = PublicKey.findProgramAddressSync([new TextEncoder().encode('bond'), bondIssuancePda.toBuffer(), nftMint.toBuffer()], PROGRAM_ID);
+            const userPayoutAta = yield ensureUserPayoutAtaExists({
+                connection,
+                payer: accountSolana,
+                payoutMint,
+                user: accountSolana,
+            });
+            // treasury_ata = PDA
+            const [treasuryAta] = PublicKey.findProgramAddressSync([bondIssuancePda.toBuffer(), COMMON_CONST_SEED, payoutMint.toBuffer()], COMMON_PDA_PROGRAM);
+            // Build keys list
+            const keys = [
+                { pubkey: bondPda, isSigner: false, isWritable: true },
+                { pubkey: bondTermPda, isSigner: false, isWritable: false },
+                { pubkey: bondIssuancePda, isSigner: false, isWritable: false },
+                { pubkey: accountSolana, isSigner: true, isWritable: true }, // user
+                { pubkey: nftMint, isSigner: false, isWritable: true },
+                { pubkey: userPayoutAta, isSigner: false, isWritable: true },
+                { pubkey: treasuryAta, isSigner: false, isWritable: true },
+                { pubkey: TOKEN_PROGRAM_ID, isSigner: false, isWritable: false },
+                { pubkey: ASSOCIATED_TOKEN_PROGRAM_ID, isSigner: false, isWritable: false },
+                { pubkey: new PublicKey('CoREENxT6tW1HoK8ypY1SxRMZTcVPm7R94rH4PZNhX7d'), isSigner: false, isWritable: false }, // mplCoreProgram
+                { pubkey: PROGRAM_ID, isSigner: false, isWritable: false }, // passing programId is the same as passing null
+            ];
+            // Build Instruction (no args → just discriminator)
+            const instruction = new TransactionInstruction({
+                keys,
+                programId: PROGRAM_ID,
+                data: CLAIM_DISCRIMINATOR,
+            });
+            // Build Transaction
+            const transaction = new Transaction().add(instruction);
+            transaction.feePayer = accountSolana;
+            const { blockhash, lastValidBlockHeight } = yield connection.getLatestBlockhash('confirmed');
+            transaction.recentBlockhash = blockhash;
+            if (!signTransaction)
+                return;
+            const signedTx = yield signTransaction(transaction);
+            const txHash = yield connection.sendRawTransaction(signedTx.serialize(), {
+                skipPreflight: false,
+                preflightCommitment: 'confirmed',
+            });
+            yield connection.confirmTransaction({
+                signature: txHash,
+                blockhash,
+                lastValidBlockHeight,
+            }, 'confirmed');
+            const txStatus = yield connection.getSignatureStatus(txHash, { searchTransactionHistory: true });
+            if (((_h = txStatus === null || txStatus === void 0 ? void 0 : txStatus.value) === null || _h === void 0 ? void 0 : _h.confirmationStatus) === 'confirmed' || ((_j = txStatus === null || txStatus === void 0 ? void 0 : txStatus.value) === null || _j === void 0 ? void 0 : _j.confirmationStatus) === 'finalized') {
+                console.log('Tx confirmed on-chain, refetching bonds');
+                refetch();
+                addToastSuccess(txHash, types$1.ChainId.SOL);
+            }
+            setLoadingTx(false);
+        }
+        catch (error) {
+            console.error('Claim failed:', error);
+            addToastError((_k = error === null || error === void 0 ? void 0 : error.message) !== null && _k !== void 0 ? _k : 'Unknown error');
+            reportError({
+                apiUrl: (_l = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.urls) === null || _l === void 0 ? void 0 : _l.apiV2,
+                error,
+                extraInfo: { type: 'claim', userBill, error },
+            });
+        }
+        finally {
+            setLoadingTx(false);
+        }
+    });
+    return (jsxs(Fragment$1, { children: [jsx$2(Button, { variant: "secondary", disabled: claimable(userBill) === 0 || loadingTx || !userBill || isPendingCliff, load: loadingTx, onClick: (event) => {
+                    event.stopPropagation();
+                    handleClaim();
+                }, sx: { fontSize: '14px', width: '100%' }, children: isPendingCliff
+                    ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
+                    : 'Claim' }), jsx$2(Button, { sx: { fontSize: '14px', width: '100%' }, onClick: () => canPurchaseAgain
+                    ? (window.location.href = `https://ape.bond/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`)
+                    : null, disabled: !canPurchaseAgain, children: canPurchaseAgain ? 'Buy again' : 'sold out' })] }));
+};
+
+const YourBondsModal = ({ userBill, onDismiss }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    // State
+    const [showNFTImg, setShowNFTImg] = useState(false);
+    // Static Data
+    const depositUSD = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.dollarValue;
+    const payout = (_d = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.nftData) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.payout;
+    const payoutTokenPrice = parseFloat((_f = (_e = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _e === void 0 ? void 0 : _e.payoutTokenPrice) !== null && _f !== void 0 ? _f : '0');
+    const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0;
+    const payoutTokenSymbol = (_h = (_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.showcaseTokenName) !== null && _h !== void 0 ? _h : (_j = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _j === void 0 ? void 0 : _j.earnToken.symbol;
+    // Cliff display info:
+    const vestingCliff = (_k = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _k === void 0 ? void 0 : _k.vestingCliff;
+    const currentTime = Math.round(new Date().getTime() / 1000);
+    const lastBlockTimestamp = parseInt((_l = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _l !== void 0 ? _l : '0');
+    const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
+    const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
     return (jsx$2(Modal, { sx: {
             width: '480px',
             overflowY: 'unset !important',
-            background: hide ? 'transparent !important' : 'white2',
+            background: showNFTImg ? 'transparent !important' : 'white2',
             p: '0px',
             top: '56%',
         }, children: jsxs(Flex, { sx: {
                 flexDirection: 'column',
                 borderRadius: 'normal',
                 position: 'relative',
-                background: hide ? 'transparent !important' : 'white2',
+                background: showNFTImg ? 'transparent !important' : 'white2',
                 p: '20px',
-            }, children: [jsx$2(AnimatePresence, { children: hide && (jsx$2(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, sx: {
-                            position: 'absolute',
-                            display: ['flex'],
-                            top: ['-180px', '-180px', '-240px'],
-                            right: ['50%', '50%', '50%', '-13%'],
-                            transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],
-                            opacity: 0,
-                            zIndex: 5000,
-                        }, children: jsx$2(LinkShare, { userBill: userBill }) })) }), jsx$2(AnimatePresence, { children: (bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) && (jsxs(motion.div, { animate: controls, onClick: () => {
-                            if (hide) {
-                                closeAnimation();
-                            }
-                            else {
-                                openAnimation();
-                            }
-                        }, onAnimationStart: () => {
-                            setHide(true);
-                        }, sx: {
-                            display: 'flex',
-                            zIndex: -1,
-                            position: hide ? 'fixed' : 'absolute',
-                            bottom: 'calc(100% - 10px)',
-                            left: '25%',
-                            width: '50%',
-                            aspectRatio: '1 / 0.56',
-                            cursor: 'pointer',
-                            borderRadius: 'normal',
-                            flexDirection: 'column',
-                            '&: hover': {
-                                zIndex: [1000, 1000, 1000, '1000 !important'],
-                            },
-                        }, children: [jsxs(Flex, { sx: {
-                                    display: hide ? 'none' : 'flex',
-                                    position: 'absolute',
-                                    zIndex: 121,
-                                    width: '100%',
-                                    height: '100%',
-                                    opacity: 0,
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontWeight: 700,
-                                    borderRadius: 'normal',
-                                    '&: hover': {
-                                        zIndex: 1000,
-                                        opacity: 0.8,
-                                        background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',
-                                        backdropFilter: ' blur(2px)',
-                                    },
-                                }, children: ["View NFT ", '>'] }), hide && (jsx$2(Flex, { sx: {
-                                    position: 'absolute',
-                                    top: '5px',
-                                    right: '5px',
-                                    background: 'grey',
-                                    opacity: 0.9,
-                                    p: '2px',
-                                    borderRadius: '50%',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                }, children: jsx$2(Flex, { sx: { width: '6px' }, children: jsx$2(Svg, { icon: "close" }) }) })), jsx$2(ProgressiveImage, { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), hide && (jsx$2(Flex, { sx: {
-                                    position: 'absolute',
-                                    bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],
-                                    width: '100%',
-                                    justifyContent: 'center',
-                                }, children: jsxs(Flex, { sx: {
-                                        flexDirection: 'column',
-                                        width: '100%',
-                                        minWidth: '250px',
-                                        pb: '10px',
-                                        alignItems: 'center',
-                                        transform: [
-                                            'scale(0.5) translateY(-50%)',
-                                            'scale(0.5) translateY(-50%)',
-                                            'scale(0.5) translateY(-50%)',
-                                            'scale(0.4) translateY(-75%)',
-                                        ],
-                                    }, children: [jsxs(Flex, { sx: {
-                                                justifyContent: 'space-between',
-                                                height: '24px',
-                                                backgroundColor: 'white3',
-                                                px: '15px',
-                                                width: '100%',
-                                                borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
-                                            }, onClick: (event) => {
-                                                event.stopPropagation();
-                                                setIsOpenTraits(!isOpenTraits);
-                                            }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx$2(Svg, { icon: "tag", direction: "down" }), jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx$2(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx$2(AnimatePresence, { children: isOpenTraits && (jsx$2(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
-                                                    overflow: 'hidden',
-                                                    width: '100%',
-                                                    position: 'absolute',
-                                                    top: '24px',
-                                                    borderRadius: '0 0 10px 10px',
-                                                }, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    setIsOpenTraits(!isOpenTraits);
-                                                }, children: jsx$2(Flex, { sx: { flexDirection: 'column' }, children: attributes
-                                                        ? attributes.map((a) => (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.trait_type }), jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, a.value)))
-                                                        : BILL_ATTRIBUTES.map((attrib) => {
-                                                            return (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx$2(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx$2(Skeleton, { width: "150px" })] }, attrib));
-                                                        }) }) })) })] }) }))] })) }), !hide && (jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '7px' }, children: [userBill && (jsx$2(TokenImage, { symbol: (_r = (_q = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _q === void 0 ? void 0 : _q.showcaseTokenName) !== null && _r !== void 0 ? _r : (_t = (_s = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _s === void 0 ? void 0 : _s.earnToken) === null || _t === void 0 ? void 0 : _t.symbol, size: 30, chain: (_u = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _u === void 0 ? void 0 : _u.chainId })), jsx$2(Box$1, { sx: {
-                                                fontSize: ['16px', '16px', '16px', '18px'],
-                                                fontWeight: 700,
-                                                opacity: 0.7,
-                                                overflow: 'hidden',
-                                                whiteSpace: 'nowrap',
-                                                textOverflow: 'ellipsis',
-                                                maxWidth: '100px',
-                                            }, children: (_w = (_v = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _v === void 0 ? void 0 : _v.showcaseTokenName) !== null && _w !== void 0 ? _w : (_x = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _x === void 0 ? void 0 : _x.earnToken.symbol }), jsxs(Flex, { sx: {
-                                                p: '2px 6px',
-                                                background: 'rgba(56, 166, 17, 0.05)',
-                                                border: '1px solid rgba(56, 166, 17, 0.20)',
-                                                borderRadius: 'normal',
-                                                color: 'success',
-                                                fontSize: ['14px', '14px', '14px', '16px'],
-                                            }, children: [bonusPercentage.toFixed(), "% Bonus"] }), jsxs(Text, { sx: {
-                                                color: 'text',
-                                                opacity: '0.6',
-                                                fontSize: ['11px', '11px', '11px', '14px'],
-                                                display: ['none', 'none', 'none', 'flex'],
-                                            }, children: ["#", userBill === null || userBill === void 0 ? void 0 : userBill.id] })] }), jsxs(Flex, { sx: { gap: '7px' }, children: [jsx$2(Button, { onClick: onTransferBondModal, disabled: !userBill, sx: { height: '22px', fontSize: '12px', fontWeight: 600, p: '2px 6px' }, children: "TRANSFER" }), jsx$2(Flex, { className: "svg-close", onClick: onDismiss, sx: { cursor: 'pointer', p: '2px 5px' }, children: jsx$2(Svg, { icon: "close", width: isMobile ? '12px' : '18px' }) })] })] }), jsxs(Flex, { sx: { mt: '10px', flexDirection: 'column', gap: '10px' }, children: [jsxs(Flex, { sx: { width: '100%', gap: '15px', position: 'relative' }, children: [jsxs(Flex, { sx: {
+            }, children: [jsx$2(NftImage, { userBill: userBill, showNFTImg: showNFTImg, setShowNFTImg: setShowNFTImg }), !showNFTImg && (jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx$2(YourBondModalHeader, { userBill: userBill, onDismiss: onDismiss }), jsxs(Flex, { sx: { mt: '10px', flexDirection: 'column', gap: '10px' }, children: [jsxs(Flex, { sx: { width: '100%', gap: '15px', position: 'relative' }, children: [jsxs(Flex, { sx: {
                                                 background: 'white3',
                                                 borderRadius: 'normal',
                                                 justifyContent: 'space-between',
@@ -76211,34 +76421,17 @@ const YourBondsModal = ({ userBill, onDismiss }) => {
                                                                 fontWeight: 400,
                                                                 ml: '10px',
                                                                 opacity: 0.6,
-                                                            }, children: ["($", formatNumberSI(claimedUSD(userBill)), ")"] })] })] })] }), ((_y = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _y === void 0 ? void 0 : _y.warningCard) && (jsx$2(Flex, { sx: {
+                                                            }, children: ["($", formatNumberSI(claimedUSD(userBill)), ")"] })] })] })] }), ((_m = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _m === void 0 ? void 0 : _m.warningCard) && (jsx$2(Flex, { sx: {
                                         width: '100%',
                                         background: '#DE62F366',
                                         justifyContent: 'center',
                                         borderRadius: 'normal',
-                                    }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }, children: jsx$2(SafeHTMLComponent, { html: (_z = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _z === void 0 ? void 0 : _z.warningCard }) }) })), jsxs(Flex, { sx: {
+                                    }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }, children: jsx$2(SafeHTMLComponent, { html: (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.warningCard }) }) })), jsx$2(Flex, { sx: {
                                         width: '100%',
                                         justifyContent: 'space-between',
                                         gap: ['10px', '10px', '10px', '15px'],
                                         height: '40px',
-                                    }, children: [jsx$2(Button, { variant: "secondary", disabled: claimable(userBill) === 0 || load || !userBill || isPendingCliff, load: load, onClick: (event) => {
-                                                var _a, _b;
-                                                event.stopPropagation();
-                                                if (chainId !== ((_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId)) {
-                                                    switchChainAsync({ chainId: (_b = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _b === void 0 ? void 0 : _b.chainId })
-                                                        .then(() => {
-                                                        handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
-                                                    })
-                                                        .catch();
-                                                }
-                                                else {
-                                                    handleClaim(userBill === null || userBill === void 0 ? void 0 : userBill.id, userBill === null || userBill === void 0 ? void 0 : userBill.address);
-                                                }
-                                            }, sx: { fontSize: '14px', width: '100%' }, children: isPendingCliff
-                                                ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
-                                                : 'Claim' }), jsx$2(Button, { sx: { width: '100%', fontSize: '14px' }, onClick: () => canPurchaseAgain
-                                                ? (window.location.href = `https://ape.bond/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`)
-                                                : null, disabled: !canPurchaseAgain, children: canPurchaseAgain ? 'Buy again' : 'sold out' })] }), jsx$2(Recommendations, { billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] })] }))] }) }));
+                                    }, children: ((_p = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _p === void 0 ? void 0 : _p.chainId) === types$1.ChainId.SOL ? (jsx$2(ActionsSolana, { userBill: userBill })) : (jsx$2(Actions, { userBill: userBill })) }), jsx$2(Recommendations, { billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] })] }))] }) }));
 };
 
 const styles$b = {
@@ -76324,27 +76517,6 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
     return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx$2(ButtonsRow, { twitter: twitter, projectLink: projectLink, bubble: earnTokenContract, audit: audit, chain: chain }), (config === null || config === void 0 ? void 0 : config.referenceId) === 'apebond' && !isSoldOut && billType !== 'fcfs' && chain !== types$1.ChainId.SOL && (jsx$2(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx$2(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx$2(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx$2(Flex, { sx: styles$b.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles$b.link, target: "_blank", children: ["View Token Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$b.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles$b.link, target: "_blank", children: ["View Bond Contract", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) }), jsx$2(Flex, { sx: styles$b.linkRow, children: billType !== 'fcfs' && chain !== types$1.ChainId.SOL && (jsxs(Link, { href: bondDashboard, sx: styles$b.link, target: "_blank", children: ["View Bond Insights", jsx$2(Flex, { sx: { ml: '5px' }, children: jsx$2(Svg, { icon: "external", color: "text", width: 10 }) })] })) })] }) })] }));
 };
 
-const ProfitCard = ({ userBond }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const totalPayout = getBalanceNumber((_a = userBond === null || userBond === void 0 ? void 0 : userBond.totalPayout) !== null && _a !== void 0 ? _a : '0', (_e = (_c = (_b = userBond === null || userBond === void 0 ? void 0 : userBond.bond) === null || _b === void 0 ? void 0 : _b.earnToken) === null || _c === void 0 ? void 0 : _c.decimals[(_d = userBond.bond) === null || _d === void 0 ? void 0 : _d.chainId]) !== null && _e !== void 0 ? _e : 18);
-    const payoutTokenPrice = (_g = (_f = userBond === null || userBond === void 0 ? void 0 : userBond.bond) === null || _f === void 0 ? void 0 : _f.payoutTokenPrice) !== null && _g !== void 0 ? _g : '0';
-    const totalPayoutUSD = totalPayout * parseFloat(payoutTokenPrice);
-    const depositAmountUSD = (_k = (_j = (_h = userBond === null || userBond === void 0 ? void 0 : userBond.nftData) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.dollarValue) !== null && _k !== void 0 ? _k : 0;
-    const profit = !depositAmountUSD ? 0 : totalPayoutUSD - depositAmountUSD;
-    return (jsx$2(Flex$1, { sx: { display: ['none', 'none', 'none', 'none', 'none', 'none', 'flex'], width: '125px' }, children: profit > 0.01 ? (jsxs(Flex$1, { sx: {
-                border: '1px solid rgb(56, 166, 17, 0.20)',
-                p: '2px 6px',
-                color: 'success',
-                borderRadius: '5px',
-                background: '#38A6110D',
-                fontWeight: 700,
-                fontSize: '14px',
-                width: '100%',
-                justifyContent: 'center',
-                // I want a background with 5% opacity of this color
-            }, children: ["+$", formatNumberSI(profit, profit > 100 ? 0 : 2), " Profit!"] })) : (jsx$2(Flex$1, { sx: { width: '125px' } })) }));
-};
-
 const UserBondRow = ({ bill }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     // Hooks
@@ -76423,7 +76595,7 @@ const UserBondRow = ({ bill }) => {
     // }, [bill?.id])
     return (jsxs("div", { className: "your-bonds", onClick: onOpenPurchasedBond, children: [jsxs("div", { className: "token-info-container", children: [jsx$2(TokenInfoAndName, { tokenSymbol: (_g = (_f = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _f === void 0 ? void 0 : _f.earnToken) === null || _g === void 0 ? void 0 : _g.symbol, chain: (_h = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _h === void 0 ? void 0 : _h.chainId, tag: (_k = (_j = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _j === void 0 ? void 0 : _j.tags) === null || _k === void 0 ? void 0 : _k[0], vestEnds: getTimeLeftForFullyVested(bill) > 0 ? `Ends in ${getPendingVestingString(bill)}` : `Fully Vested`, isHotBond: true }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: ((_l = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _l === void 0 ? void 0 : _l.earnToken.address[bill === null || bill === void 0 ? void 0 : bill.bond.chainId]) || '', earnTokenSymbol: ((_m = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _m === void 0 ? void 0 : _m.earnToken.symbol) || '', bondContract: (_o = bill === null || bill === void 0 ? void 0 : bill.address) !== null && _o !== void 0 ? _o : '', projectLink: (_p = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _p === void 0 ? void 0 : _p.projectLink, twitter: (_q = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _q === void 0 ? void 0 : _q.twitter, audit: (_r = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _r === void 0 ? void 0 : _r.audit, chain: (_s = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _s === void 0 ? void 0 : _s.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Flex$1, { sx: {
                                     opacity: 0.8,
-                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(ProfitCard, { userBond: bill }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 3), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 3), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: getPercentageVested(bill) }), style: {
+                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(Flex$1, { sx: { width: '125px' }, children: jsx$2(ProfitCard, { userBond: bill }) }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 3), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 3), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: getPercentageVested(bill) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -76444,175 +76616,6 @@ const UserBondRow = ({ bill }) => {
                                 : 'Claim' })) })] })] }));
 };
 
-const YourBondsModalSolana = ({ userBill, onDismiss }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-    // Hooks
-    const SDKConfig = useSDKConfig();
-    const { publicKey: accountSolana, signTransaction } = useSOLAccount();
-    const { setVisible } = useWalletModal();
-    const { addToastError, addToastSuccess } = usePopups();
-    const { refetch } = useUserBonds();
-    const connection = new Connection(getRPC(types$1.ChainId.SOL), 'confirmed');
-    // State
-    const [imgLoaded, setImgLoaded] = useState(false);
-    const [loadingTx, setLoadingTx] = useState(false);
-    // Static Data
-    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
-    // Cliff display info:
-    const vestingCliff = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.vestingCliff;
-    const currentTime = Math.round(new Date().getTime() / 1000);
-    const lastBlockTimestamp = parseInt((_b = userBill === null || userBill === void 0 ? void 0 : userBill.lastBlockTimestamp) !== null && _b !== void 0 ? _b : '0');
-    const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
-    const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
-    const ensureUserPayoutAtaExists = (_a) => __awaiter$9(void 0, [_a], void 0, function* ({ connection, payer, payoutMint, user, }) {
-        const userPayoutAta = yield getAssociatedTokenAddress(payoutMint, user);
-        try {
-            yield getAccount(connection, userPayoutAta);
-        }
-        catch (_b) {
-            const ataIx = createAssociatedTokenAccountInstruction(payer, // fee payer
-            userPayoutAta, // ATA to create
-            user, // owner of ATA
-            payoutMint);
-            const tx = new Transaction().add(ataIx);
-            const latestBlockhash = yield connection.getLatestBlockhash('confirmed');
-            tx.recentBlockhash = latestBlockhash.blockhash;
-            tx.feePayer = payer;
-            if (!signTransaction)
-                return;
-            const signed = yield signTransaction(tx);
-            const txid = yield connection.sendRawTransaction(signed.serialize(), {
-                skipPreflight: false,
-                preflightCommitment: 'confirmed',
-            });
-            yield connection.confirmTransaction({
-                signature: txid,
-                blockhash: latestBlockhash.blockhash,
-                lastValidBlockHeight: latestBlockhash.lastValidBlockHeight,
-            }, 'confirmed');
-        }
-        return userPayoutAta;
-    });
-    const handleClaim = () => __awaiter$9(void 0, void 0, void 0, function* () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        try {
-            setLoadingTx(true);
-            const earnTokenAddress = (_c = (_b = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.earnToken) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c[(_d = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _d === void 0 ? void 0 : _d.chainId];
-            const contractAddress = (_f = (_e = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _e === void 0 ? void 0 : _e.contractAddress) === null || _f === void 0 ? void 0 : _f[(_g = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _g === void 0 ? void 0 : _g.chainId];
-            if (!earnTokenAddress || !userBill.asset || !contractAddress)
-                return;
-            const payoutMint = new PublicKey(earnTokenAddress);
-            const bondIssuancePda = new PublicKey(contractAddress);
-            const nftMint = new PublicKey(userBill.asset);
-            const [bondTermPda] = PublicKey.findProgramAddressSync([new TextEncoder().encode('bond_term'), bondIssuancePda.toBuffer()], PROGRAM_ID);
-            const [bondPda] = PublicKey.findProgramAddressSync([new TextEncoder().encode('bond'), bondIssuancePda.toBuffer(), nftMint.toBuffer()], PROGRAM_ID);
-            const userPayoutAta = yield ensureUserPayoutAtaExists({
-                connection,
-                payer: accountSolana,
-                payoutMint,
-                user: accountSolana,
-            });
-            // treasury_ata = PDA
-            const [treasuryAta] = PublicKey.findProgramAddressSync([bondIssuancePda.toBuffer(), COMMON_CONST_SEED, payoutMint.toBuffer()], COMMON_PDA_PROGRAM);
-            // Build keys list
-            const keys = [
-                { pubkey: bondPda, isSigner: false, isWritable: true },
-                { pubkey: bondTermPda, isSigner: false, isWritable: false },
-                { pubkey: bondIssuancePda, isSigner: false, isWritable: false },
-                { pubkey: accountSolana, isSigner: true, isWritable: true }, // user
-                { pubkey: nftMint, isSigner: false, isWritable: true },
-                { pubkey: userPayoutAta, isSigner: false, isWritable: true },
-                { pubkey: treasuryAta, isSigner: false, isWritable: true },
-                { pubkey: TOKEN_PROGRAM_ID, isSigner: false, isWritable: false },
-                { pubkey: ASSOCIATED_TOKEN_PROGRAM_ID, isSigner: false, isWritable: false },
-                { pubkey: new PublicKey('CoREENxT6tW1HoK8ypY1SxRMZTcVPm7R94rH4PZNhX7d'), isSigner: false, isWritable: false }, // mplCoreProgram
-                { pubkey: PROGRAM_ID, isSigner: false, isWritable: false }, // passing programId is the same as passing null
-            ];
-            // Build Instruction (no args → just discriminator)
-            const instruction = new TransactionInstruction({
-                keys,
-                programId: PROGRAM_ID,
-                data: CLAIM_DISCRIMINATOR,
-            });
-            // Build Transaction
-            const transaction = new Transaction().add(instruction);
-            transaction.feePayer = accountSolana;
-            const { blockhash, lastValidBlockHeight } = yield connection.getLatestBlockhash('confirmed');
-            transaction.recentBlockhash = blockhash;
-            if (!signTransaction)
-                return;
-            const signedTx = yield signTransaction(transaction);
-            const txHash = yield connection.sendRawTransaction(signedTx.serialize(), {
-                skipPreflight: false,
-                preflightCommitment: 'confirmed',
-            });
-            yield connection.confirmTransaction({
-                signature: txHash,
-                blockhash,
-                lastValidBlockHeight,
-            }, 'confirmed');
-            const txStatus = yield connection.getSignatureStatus(txHash, { searchTransactionHistory: true });
-            if (((_h = txStatus === null || txStatus === void 0 ? void 0 : txStatus.value) === null || _h === void 0 ? void 0 : _h.confirmationStatus) === 'confirmed' || ((_j = txStatus === null || txStatus === void 0 ? void 0 : txStatus.value) === null || _j === void 0 ? void 0 : _j.confirmationStatus) === 'finalized') {
-                console.log('Tx confirmed on-chain, refetching bonds');
-                refetch();
-                addToastSuccess(txHash, types$1.ChainId.SOL);
-            }
-            setLoadingTx(false);
-        }
-        catch (error) {
-            console.error('Claim failed:', error);
-            addToastError((_k = error === null || error === void 0 ? void 0 : error.message) !== null && _k !== void 0 ? _k : 'Unknown error');
-            reportError({
-                apiUrl: (_l = SDKConfig === null || SDKConfig === void 0 ? void 0 : SDKConfig.urls) === null || _l === void 0 ? void 0 : _l.apiV2,
-                error,
-                extraInfo: { type: 'claim', userBill, error },
-            });
-        }
-        finally {
-            setLoadingTx(false);
-        }
-    });
-    const handleImageLoad = () => {
-        setImgLoaded(true);
-    };
-    const [onTransferBondModal] = useModal(jsx$2(TransferBondModal, { userBill: userBill }), true, true, `transferModal${userBill === null || userBill === void 0 ? void 0 : userBill.id}}`);
-    return (jsx$2(Modal, { className: "modal", children: jsxs(Flex$1, { className: "yourbondsmodal-content", children: [jsx$2(Flex$1, { className: "yourbondsmodal-header", children: jsx$2(Flex$1, { className: "svg-close", onClick: onDismiss, children: jsx$2(Svg, { icon: "close" }) }) }), jsxs(Flex$1, { className: "yourbondsmodal table-container", children: [jsxs(Flex$1, { className: "yourbondsmodal bondimage", children: [(bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) ? (jsx$2("img", { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image}?img-width=720`, onLoad: handleImageLoad, alt: "solana-NFT", style: { zIndex: 2, width: '100%', height: '100%' } })) : (userBill && (jsx$2("img", { src: `https://ape.bond/solBonds/${(_e = (_d = (_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.earnToken) === null || _d === void 0 ? void 0 : _d.symbol) === null || _e === void 0 ? void 0 : _e.toLowerCase()}.png`, alt: "Solana Bonds Banner", onLoad: handleImageLoad, style: { zIndex: 2, width: '100%', height: '100%' } }))), (!imgLoaded || !userBill) && (jsx$2(Flex$1, { sx: {
-                                        position: 'absolute',
-                                        top: 'calc(50% - 24px)',
-                                        right: 'calc(50% - 50px)',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        zIndex: 1,
-                                    }, children: jsx$2(Spinner, { width: 100 }) }))] }), jsxs(Flex$1, { className: "yourbondsmodal yourbondinfo", children: [jsxs(Flex$1, { className: "yourbondinfo title-container", children: [jsx$2(Flex$1, { className: "title-container bondicon", children: userBill && (jsx$2(TokenImage, { symbol: (_g = (_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.showcaseTokenName) !== null && _g !== void 0 ? _g : (_j = (_h = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _h === void 0 ? void 0 : _h.earnToken) === null || _j === void 0 ? void 0 : _j.symbol, size: 40, chain: (_k = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _k === void 0 ? void 0 : _k.chainId })) }), jsx$2(Flex$1, { className: "title-container tokenname", children: (_m = (_l = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _l === void 0 ? void 0 : _l.showcaseTokenName) !== null && _m !== void 0 ? _m : (_o = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _o === void 0 ? void 0 : _o.earnToken.symbol }), jsx$2(Flex$1, { className: "title-container tokentags", children: (_q = (_p = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _p === void 0 ? void 0 : _p.tags) === null || _q === void 0 ? void 0 : _q.slice(0, 1).map((tag) => {
-                                                return (jsx$2(Flex$1, { sx: { marginRight: '10px' }, children: jsx$2(ListTag, { 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: ["ID # ", userBill === null || userBill === void 0 ? void 0 : userBill.id] })] }), jsxs(Flex$1, { className: "yourbondinfo blocks-container", children: [((_r = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _r === void 0 ? void 0 : _r.deposit) && (jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "You Spent" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.YouSpent }), width: "270px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsx$2(Flex$1, { className: "yourbondinfo-block info", children: jsx$2(Flex$1, { className: "block-info text", children: jsxs(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: ["$", (_s = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _s === void 0 ? void 0 : _s.dollarValue.toFixed(2)] }) }) })] })), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Fully Vested" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon" }), jsx$2(Flex$1, { className: "block-info text", children: jsxs(Flex$1, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: [vestingTimeRemainingString(userBill), isPendingCliff && (jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsxs(Flex$1, { children: ["Bond will be claimable in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`, "."] }), width: "180px", placement: "bottomRight", transformTip: "translate(13%, 0%)", children: jsx$2(Flex$1, { sx: { opacity: 0.6, ml: '6px' }, children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }))] }) })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-pending", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Pending" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: userBill && (jsx$2(TokenImage, { symbol: (_u = (_t = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _t === void 0 ? void 0 : _t.showcaseTokenName) !== null && _u !== void 0 ? _u : (_w = (_v = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _v === void 0 ? void 0 : _v.earnToken) === null || _w === void 0 ? void 0 : _w.symbol, size: 25, chain: (_x = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _x === void 0 ? void 0 : _x.chainId })) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(pending(userBill), 4) }), jsx$2(Text, { sx: {
-                                                                        fontSize: ['10px', '10px', '10px', '12px'],
-                                                                        fontWeight: [500, 500, 500, 400],
-                                                                        paddingLeft: '10px',
-                                                                    }, children: `($${pendingUSD(userBill).toFixed(2)})` })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-claimable", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Claimable" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: userBill && (jsx$2(TokenImage, { symbol: (_z = (_y = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _y === void 0 ? void 0 : _y.showcaseTokenName) !== null && _z !== void 0 ? _z : (_1 = (_0 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _0 === void 0 ? void 0 : _0.earnToken) === null || _1 === void 0 ? void 0 : _1.symbol, size: 25, chain: (_2 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _2 === void 0 ? void 0 : _2.chainId })) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(claimable(userBill), 4) }), jsx$2(Text, { sx: {
-                                                                        fontSize: ['10px', '10px', '10px', '12px'],
-                                                                        fontWeight: [500, 500, 500, 400],
-                                                                        paddingLeft: '10px',
-                                                                    }, children: `($${claimableUSD(userBill).toFixed(2)})` })] })] })] }), jsxs(Flex$1, { className: "yourbondinfo-block row-vested", children: [jsxs(Flex$1, { className: "yourbondinfo-block header", children: [jsx$2(Flex$1, { className: "yourbondinfo-block header-title", children: "Claimed" }), jsx$2(Flex$1, { className: "yourbondinfo-block header-tooltip", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(Flex$1, { children: UserBillTooltipText.Claimed }), width: "250px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx$2(Flex$1, { className: "block-header icon", children: jsx$2(Svg, { icon: "questionCircle", width: "12px" }) }) }) })] }), jsxs(Flex$1, { className: "yourbondinfo-block info", children: [jsx$2(Flex$1, { className: "block-info icon", children: userBill && (jsx$2(TokenImage, { symbol: (_4 = (_3 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _3 === void 0 ? void 0 : _3.showcaseTokenName) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _5 === void 0 ? void 0 : _5.earnToken) === null || _6 === void 0 ? void 0 : _6.symbol, size: 25, chain: (_7 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _7 === void 0 ? void 0 : _7.chainId })) }), jsxs(Flex$1, { className: "block-info text", children: [jsx$2(Text, { sx: { fontSize: ['12px', '12px', '12px', '19px'], fontWeight: 700 }, children: formatNumberSI(claimed(userBill), 4) }), jsx$2(Text, { sx: {
-                                                                        fontSize: ['10px', '10px', '10px', '12px'],
-                                                                        fontWeight: [500, 500, 500, 400],
-                                                                        paddingLeft: '10px',
-                                                                    }, children: `($${claimedUSD(userBill).toFixed(2)})` })] })] })] })] }), ((_8 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _8 === void 0 ? void 0 : _8.warningCard) && (jsx$2(Flex$1, { sx: {
-                                        width: '100%',
-                                        background: '#DE62F366',
-                                        justifyContent: 'center',
-                                        borderRadius: 'normal',
-                                    }, children: jsx$2(Text, { sx: { fontSize: '12px', fontWeight: 400, p: '2px 10px' }, children: jsx$2(SafeHTMLComponent, { html: (_9 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _9 === void 0 ? void 0 : _9.warningCard }) }) })), jsxs(Flex$1, { className: "yourbondinfo button-container", children: [jsx$2(Flex$1, { className: "button-container claim", children: userBill && !accountSolana ? (jsxs(Button, { className: "switch-button", disabled: claimable(userBill) === 0 || loadingTx, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    setVisible(true);
-                                                }, children: ["Switch to ", NETWORK_LABEL[(_10 = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _10 === void 0 ? void 0 : _10.chainId]] })) : (jsx$2(Button, { className: "claim-button", disabled: claimable(userBill) === 0 || loadingTx || !userBill || isPendingCliff, load: loadingTx, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    handleClaim();
-                                                }, children: isPendingCliff
-                                                    ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`
-                                                    : 'Claim' })) }), jsx$2(Flex$1, { className: "button-container transfer", children: jsx$2(Button, { className: "transfer-button", variant: "secondary", onClick: onTransferBondModal, disabled: !userBill, children: "TRANSFER" }) })] })] })] }), jsx$2(Recommendations, { onDismiss: onDismiss, billAddress: userBill === null || userBill === void 0 ? void 0 : userBill.address })] }) }));
-};
-
 const UserBondRowSolana = ({ bill }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     // Hooks
@@ -76631,7 +76634,7 @@ const UserBondRowSolana = ({ bill }) => {
     const lastBlockTimestamp = parseInt((_d = bill === null || bill === void 0 ? void 0 : bill.lastBlockTimestamp) !== null && _d !== void 0 ? _d : '0');
     const isPendingCliff = vestingCliff ? currentTime - lastBlockTimestamp < vestingCliff : false;
     const cliffCountdown = getTimePeriods(lastBlockTimestamp + (vestingCliff !== null && vestingCliff !== void 0 ? vestingCliff : 0) - currentTime, true);
-    const [onOpenPurchasedBond] = useModal(jsx$2(YourBondsModalSolana, { userBill: bill }));
+    const [onOpenPurchasedBond] = useModal(jsx$2(YourBondsModal, { userBill: bill }));
     const ensureUserPayoutAtaExists = (_a) => __awaiter$9(void 0, [_a], void 0, function* ({ connection, payer, payoutMint, user, }) {
         const userPayoutAta = yield getAssociatedTokenAddress(payoutMint, user);
         try {
@@ -76742,7 +76745,7 @@ const UserBondRowSolana = ({ bill }) => {
     });
     return (jsxs("div", { className: "your-bonds", onClick: () => onOpenPurchasedBond(), children: [jsxs("div", { className: "token-info-container", children: [jsx$2(TokenInfoAndName, { tokenSymbol: (_e = bill.bond) === null || _e === void 0 ? void 0 : _e.earnToken.symbol, chain: (_f = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _f === void 0 ? void 0 : _f.chainId, vestEnds: getTimeLeftForFullyVested(bill) > 0 ? `Ends in ${getPendingVestingString(bill)}` : `Fully Vested`, isHotBond: true }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: ((_g = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _g === void 0 ? void 0 : _g.earnToken.address[bill === null || bill === void 0 ? void 0 : bill.bond.chainId]) || '', earnTokenSymbol: ((_h = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _h === void 0 ? void 0 : _h.earnToken.symbol) || '', bondContract: (_j = bill === null || bill === void 0 ? void 0 : bill.address) !== null && _j !== void 0 ? _j : '', projectLink: (_k = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _k === void 0 ? void 0 : _k.projectLink, twitter: (_l = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _l === void 0 ? void 0 : _l.twitter, audit: (_m = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _m === void 0 ? void 0 : _m.audit, chain: (_o = bill === null || bill === void 0 ? void 0 : bill.bond) === null || _o === void 0 ? void 0 : _o.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Flex, { sx: {
                                     opacity: 0.8,
-                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(ProfitCard, { userBond: bill }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: getPercentageVested(bill) }), style: {
+                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(Flex, { sx: { width: '125px' }, children: jsx$2(ProfitCard, { userBond: bill }) }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 4), jsx$2("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: jsx$2(ProgressBarWrapper$1, { title: '', value: jsx$2(ProgressBar, { value: getPercentageVested(bill) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',
@@ -77012,7 +77015,7 @@ const UserBondRowPreTGE = ({ userBond }) => {
     const pendingUSD = pendingAmount * ((_x = userBond === null || userBond === void 0 ? void 0 : userBond.earnTokenPrice) !== null && _x !== void 0 ? _x : 0);
     return (jsxs("div", { className: "your-bonds", onClick: () => null, children: [jsxs("div", { className: "token-info-container", children: [jsx$2(TokenInfoAndName, { tokenSymbol: userBond.earnToken.symbol, chain: userBond.chainId, tag: (_y = userBond.tags) === null || _y === void 0 ? void 0 : _y[0], vestEnds: isRedeemable ? 'Claim now!' : !hasRedeemed ? `Claim in ${redeemableIn}` : `Ends in ${vestingString}`, isHotBond: true }), jsx$2("div", { className: "tooltip-column", children: jsx$2(TooltipBubble, { className: "tooltip-bubble", body: jsx$2(BondInfoTooltip, { earnTokenContract: (userBond === null || userBond === void 0 ? void 0 : userBond.earnToken.address[userBond === null || userBond === void 0 ? void 0 : userBond.chainId]) || '', earnTokenSymbol: (userBond === null || userBond === void 0 ? void 0 : userBond.earnToken.symbol) || '', bondContract: ((_z = userBond === null || userBond === void 0 ? void 0 : userBond.contractAddress) === null || _z === void 0 ? void 0 : _z[userBond === null || userBond === void 0 ? void 0 : userBond.chainId]) || '', projectLink: userBond === null || userBond === void 0 ? void 0 : userBond.projectLink, twitter: userBond === null || userBond === void 0 ? void 0 : userBond.twitter, audit: userBond === null || userBond === void 0 ? void 0 : userBond.audit, chain: userBond === null || userBond === void 0 ? void 0 : userBond.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx$2(Flex$1, { sx: {
                                     opacity: 0.8,
-                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(Flex$1, { sx: { display: ['none', 'none', 'none', 'none', 'none', 'none', 'flex'], width: '125px' } }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimableAmount, 3), jsxs("div", { className: "your-bonds-content-tokens-usd-amount", children: ["($", formatUSDNumber$1(claimableUSD), ")"] })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pendingAmount, 3), jsxs("div", { className: "your-bonds-content-tokens-usd-amount", children: ["($", formatUSDNumber$1(pendingUSD), ")"] })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: vestingString }), jsx$2("div", { className: "your-bonds-column-button", children: jsx$2(PreTgeActions, { userBond: userBond }) })] })] }));
+                                }, children: jsx$2(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsx$2(Flex$1, { sx: { display: ['none', 'none', 'none', 'flex'], width: '125px' } }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimableAmount, 3), jsxs("div", { className: "your-bonds-content-tokens-usd-amount", children: ["($", formatUSDNumber$1(claimableUSD), ")"] })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx$2("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pendingAmount, 3), jsxs("div", { className: "your-bonds-content-tokens-usd-amount", children: ["($", formatUSDNumber$1(pendingUSD), ")"] })] })] }), jsx$2("div", { className: "your-bonds-content hide-mobile", children: vestingString }), jsx$2("div", { className: "your-bonds-column-button", children: jsx$2(PreTgeActions, { userBond: userBond }) })] })] }));
 };
 
 const YourBonds = ({ showOnly }) => {
@@ -80975,9 +80978,9 @@ const BuyComponentSolana = ({ onDismiss, bondAddress, bondChain, isProjectView,
                     usdAmount: parseFloat(inputValue) * ((_h = inputTokenPrice === null || inputTokenPrice === void 0 ? void 0 : inputTokenPrice.price) !== null && _h !== void 0 ? _h : 0),
                 },
             });
-            // waits 2 seconds before triggering after-purchase flow
-            yield new Promise((resolve) => setTimeout(resolve, 2000));
-            console.timeEnd('2 seconds elapsed. trigger bonds refetch');
+            // waits 3 seconds before triggering after-purchase flow
+            yield new Promise((resolve) => setTimeout(resolve, 3000));
+            console.timeEnd('3 seconds elapsed. trigger bonds refetch');
             addToastSuccess(txId, bondChain);
             setBillId === null || setBillId === void 0 ? void 0 : setBillId(nftMint.publicKey.toString());
         }
@@ -81128,7 +81131,7 @@ const ModalHandler = ({ onDismiss, bondAddress, bondChain, }) => {
         }
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [billId]);
-    return billId ? (bondChain === types$1.ChainId.SOL ? (jsx$2(YourBondsModalSolana, { userBill: userBill, onDismiss: onDismiss })) : (jsx$2(YourBondsModal, { userBill: userBill, onDismiss: onDismiss }))) : (jsx$2(BuyBondModal, { bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: setBuyTxHash, setBillId: setBillId, onDismiss: () => {
+    return billId ? (jsx$2(YourBondsModal, { userBill: userBill, onDismiss: onDismiss })) : (jsx$2(BuyBondModal, { bondAddress: bondAddress, bondChain: bondChain, handlePurchasedBond: setBuyTxHash, setBillId: setBillId, onDismiss: () => {
             window.history.pushState({}, '', `${locationPath !== '/bonds' ? locationPath : '/bonds'}`);
             onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
         } }));