@ape.swap/bonds-sdk 3.3.0-test.5 → 3.3.0-test.7

package/dist/views/YourBonds/components/ClaimAll/ClaimAllModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClaimAllModal.js","sources":["../../../../../src/views/YourBonds/components/ClaimAll/ClaimAllModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useAccount, useSwitchChain, useWriteContract } from 'wagmi'\nimport useUserBonds from '../../../../state/bonds/useUserBonds'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport ChainOptionsList from '../../../../components/ChainOptionList/ChainOptionsList'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport ChainOptionsButtons from '../../../../components/ChainOptionList/ChainOptionsButtons'\nimport { UserBill } from '../../../../types/yourbonds'\nimport BOND_ABI from '../../../../config/abi/BOND_2_0_0.json'\nimport track from '../../../../utils/track'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { reportError } from '../../../../utils/reportError'\n\nconst ClaimAllModal = () => {\n  const { chainId, address: account } = useAccount()\n  const { switchChain } = useSwitchChain()\n  const SDKConfig = useSDKConfig()\n  const chains = SDKConfig?.chains as number[]\n\n  const [selectedChain, setSelectedChain] = useState(chainId ?? 56)\n  const [viewAllChains, setViewAllChains] = useState<boolean>(false)\n  const { data: userOwnedBills } = useUserBonds()\n  const ownedBills = userOwnedBills?.filter((bill) => parseFloat(bill?.payout) > 0)\n\n  const groupedBills = ownedBills?.reduce((acc: { bond: BillsConfig; userOwnedBills: UserBill[] }[], bill) => {\n    const bondIndex = bill?.bond?.index\n\n    // Check if this bond index already exists in the accumulator\n    const existingGroup = acc.find((group) => group.bond.index === bondIndex)\n\n    if (existingGroup) {\n      // If the group already exists, add this bill to the userOwnedBills array\n      existingGroup.userOwnedBills.push(bill)\n    } else {\n      // If it doesn't exist, create a new group\n      acc.push({\n        bond: bill.bond as any,\n        userOwnedBills: [bill],\n      })\n    }\n\n    return acc\n  }, [])\n\n  const bondsOfSelectedChain = groupedBills?.filter((group) => group.bond.chainId === selectedChain)\n  const ownedBillsAmount = bondsOfSelectedChain?.reduce(\n    (total, ownerBills) => total + (ownerBills.userOwnedBills?.length || 0),\n    0,\n  )\n  const { addToastError } = usePopups()\n\n  const { writeContractAsync } = useWriteContract()\n\n  const handleClaim = async () => {\n    try {\n      bondsOfSelectedChain?.map(async (purchasedBond) => {\n        const address: `0x${string}` = purchasedBond.bond.contractAddress[purchasedBond.bond.chainId] as `0x${string}`\n        track({\n          event: 'bond',\n          chain: purchasedBond.bond.chainId,\n          data: {\n            cat: 'claimAll',\n            address,\n            earnToken: purchasedBond?.bond.earnToken.symbol,\n          },\n        })\n        return writeContractAsync({\n          address,\n          abi: BOND_ABI,\n          functionName: 'batchRedeem',\n          args: [purchasedBond.userOwnedBills.map((b) => b.id)],\n          chain: chainId as any,\n          account,\n        })\n      })\n    } catch (error: any) {\n      console.error('Claim All failed:', error)\n      addToastError(error.message)\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        extraInfo: { type: 'claimAll', bondsOfSelectedChain, error },\n        chainId,\n        account,\n      })\n    }\n  }\n\n  const purchasedBillsChains = groupedBills\n    ?.reduce((acc: number[], bill) => {\n      if (acc.includes(bill.bond.chainId)) {\n        return acc\n      } else return [...acc, bill.bond.chainId]\n    }, [])\n    ?.sort((a, b) => a - b)\n\n  return (\n    <Modal title=\"Claim All\" sx={{ width: '420px' }}>\n      {viewAllChains ? (\n        <>\n          <Flex sx={{ justifyContent: 'space-between', mb: '20px' }}>\n            <Flex\n              onClick={() => setViewAllChains(false)}\n              sx={{\n                ':hover': {\n                  cursor: 'pointer',\n                },\n              }}\n            >\n              <Svg width=\"10px\" icon=\"arrow\" direction=\"left\" />\n            </Flex>\n            <Text sx={{ fontSize: '16px', fontWeight: '300' }}>All Chain Options</Text>\n          </Flex>\n          <ChainOptionsList\n            setSelectedChain={setSelectedChain}\n            setViewAllChains={setViewAllChains}\n            chainList={chains}\n          />\n        </>\n      ) : (\n        <Flex sx={{ flexDirection: 'column', width: '100%' }}>\n          <Text sx={{ fontSize: '14px', fontWeight: 400, my: '10px' }}>\n            Select the chain from which you want to claim your Bonds.\n          </Text>\n          <ChainOptionsButtons\n            setSelectedChain={setSelectedChain}\n            selectedChain={selectedChain}\n            setViewAllChains={setViewAllChains}\n            chainList={purchasedBillsChains ?? []}\n          />\n          <Flex\n            sx={{\n              width: '100%',\n              mt: '10px',\n              background: 'white3',\n              borderRadius: 'normal',\n              p: '10px',\n              flexDirection: 'column',\n              height: '30vh',\n              overflowY: 'auto',\n            }}\n          >\n            {bondsOfSelectedChain && bondsOfSelectedChain?.length > 0 ? (\n              bondsOfSelectedChain\n                ?.filter((userBill) => userBill.bond.chainId === selectedChain)\n                .map((ownedBill, index) => {\n                  return (\n                    <Flex\n                      key={`${ownedBill.bond.earnToken.symbol}-${index}`}\n                      sx={{ width: '100%', alignItems: 'center', p: '5px' }}\n                    >\n                      <TokenImage symbol={ownedBill.bond.earnToken.symbol} size={30} />\n                      <Text sx={{ ml: '10px' }}>\n                        {ownedBill.bond.earnToken.symbol}\n                        <Text sx={{ fontSize: '14px', fontWeight: 400, color: 'textDisabledButton', ml: '10px' }}>\n                          ({ownedBill?.userOwnedBills?.length} Bond\n                          {ownedBill?.userOwnedBills && ownedBill?.userOwnedBills?.length > 1 ? 's' : ''})\n                        </Text>\n                      </Text>\n                    </Flex>\n                  )\n                })\n            ) : (\n              <Flex\n                sx={{\n                  fontSize: '14px',\n                  fontWeight: 400,\n                  color: 'textDisabledButton',\n                  justifyContent: 'center',\n                  mt: '10px',\n                }}\n              >\n                No bonds to claim for this chain\n              </Flex>\n            )}\n          </Flex>\n          <Text sx={{ fontSize: '14px', fontWeight: 400, mt: '15px' }}>\n            {`You'll claim`} {ownedBillsAmount} Bonds in {bondsOfSelectedChain?.length} transaction\n            {(bondsOfSelectedChain?.length ?? 0) > 1 ? 's' : ''}.\n          </Text>\n          {chainId === selectedChain ? (\n            <Button sx={{ mt: '15px', width: '100%' }} onClick={handleClaim}>\n              Claim\n            </Button>\n          ) : (\n            <Button sx={{ mt: '15px', width: '100%' }} onClick={() => switchChain({ chainId: selectedChain })}>\n              Switch to {NETWORK_LABEL[selectedChain ?? 0]}\n            </Button>\n          )}\n        </Flex>\n      )}\n    </Modal>\n  )\n}\n\nexport default ClaimAllModal\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"ClaimAllModal.js","sources":["../../../../../src/views/YourBonds/components/ClaimAll/ClaimAllModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useAccount, useSwitchChain, useWriteContract } from 'wagmi'\nimport useUserBonds from '../../../../state/bonds/useUserBonds'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Modal from '../../../../components/uikit-sdk/Modal'\nimport Arrow from '../../../../components/uikit-sdk/Svg/Icons/Arrow'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport ChainOptionsList from '../../../../components/ChainOptionList/ChainOptionsList'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport ChainOptionsButtons from '../../../../components/ChainOptionList/ChainOptionsButtons'\nimport { UserBill } from '../../../../types/yourbonds'\nimport BOND_ABI from '../../../../config/abi/BOND_2_0_0.json'\nimport track from '../../../../utils/track'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { BillsConfig } from '@ape.swap/apeswap-lists'\nimport { reportError } from '../../../../utils/reportError'\n\nconst ClaimAllModal = () => {\n  const { chainId, address: account } = useAccount()\n  const { switchChain } = useSwitchChain()\n  const SDKConfig = useSDKConfig()\n  const chains = SDKConfig?.chains as number[]\n\n  const [selectedChain, setSelectedChain] = useState(chainId ?? 56)\n  const [viewAllChains, setViewAllChains] = useState<boolean>(false)\n  const { data: userOwnedBills } = useUserBonds()\n  const ownedBills = userOwnedBills?.filter((bill) => parseFloat(bill?.payout) > 0)\n\n  const groupedBills = ownedBills?.reduce((acc: { bond: BillsConfig; userOwnedBills: UserBill[] }[], bill) => {\n    const bondIndex = bill?.bond?.index\n\n    // Check if this bond index already exists in the accumulator\n    const existingGroup = acc.find((group) => group.bond.index === bondIndex)\n\n    if (existingGroup) {\n      // If the group already exists, add this bill to the userOwnedBills array\n      existingGroup.userOwnedBills.push(bill)\n    } else {\n      // If it doesn't exist, create a new group\n      acc.push({\n        bond: bill.bond as any,\n        userOwnedBills: [bill],\n      })\n    }\n\n    return acc\n  }, [])\n\n  const bondsOfSelectedChain = groupedBills?.filter((group) => group.bond.chainId === selectedChain)\n  const ownedBillsAmount = bondsOfSelectedChain?.reduce(\n    (total, ownerBills) => total + (ownerBills.userOwnedBills?.length || 0),\n    0,\n  )\n  const { addToastError } = usePopups()\n\n  const { writeContractAsync } = useWriteContract()\n\n  const handleClaim = async () => {\n    try {\n      bondsOfSelectedChain?.map(async (purchasedBond) => {\n        const address: `0x${string}` = purchasedBond.bond.contractAddress[purchasedBond.bond.chainId] as `0x${string}`\n        track({\n          event: 'bond',\n          chain: purchasedBond.bond.chainId,\n          data: {\n            cat: 'claimAll',\n            address,\n            earnToken: purchasedBond?.bond.earnToken.symbol,\n          },\n        })\n        return writeContractAsync({\n          address,\n          abi: BOND_ABI,\n          functionName: 'batchRedeem',\n          args: [purchasedBond.userOwnedBills.map((b) => b.id)],\n          chain: chainId as any,\n          account,\n        })\n      })\n    } catch (error: any) {\n      console.error('Claim All failed:', error)\n      addToastError(error.message)\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        extraInfo: { type: 'claimAll', bondsOfSelectedChain, error },\n        chainId,\n        account,\n      })\n    }\n  }\n\n  const purchasedBillsChains = groupedBills\n    ?.reduce((acc: number[], bill) => {\n      if (acc.includes(bill.bond.chainId)) {\n        return acc\n      } else return [...acc, bill.bond.chainId]\n    }, [])\n    ?.sort((a, b) => a - b)\n\n  return (\n    <Modal title=\"Claim All\" sx={{ width: '420px' }}>\n      {viewAllChains ? (\n        <>\n          <Flex sx={{ justifyContent: 'space-between', mb: '20px' }}>\n            <Flex\n              onClick={() => setViewAllChains(false)}\n              sx={{\n                ':hover': {\n                  cursor: 'pointer',\n                },\n              }}\n            >\n              <Arrow width=\"10px\" direction=\"left\" />\n            </Flex>\n            <Text sx={{ fontSize: '16px', fontWeight: '300' }}>All Chain Options</Text>\n          </Flex>\n          <ChainOptionsList\n            setSelectedChain={setSelectedChain}\n            setViewAllChains={setViewAllChains}\n            chainList={chains}\n          />\n        </>\n      ) : (\n        <Flex sx={{ flexDirection: 'column', width: '100%' }}>\n          <Text sx={{ fontSize: '14px', fontWeight: 400, my: '10px' }}>\n            Select the chain from which you want to claim your Bonds.\n          </Text>\n          <ChainOptionsButtons\n            setSelectedChain={setSelectedChain}\n            selectedChain={selectedChain}\n            setViewAllChains={setViewAllChains}\n            chainList={purchasedBillsChains ?? []}\n          />\n          <Flex\n            sx={{\n              width: '100%',\n              mt: '10px',\n              background: 'white3',\n              borderRadius: 'normal',\n              p: '10px',\n              flexDirection: 'column',\n              height: '30vh',\n              overflowY: 'auto',\n            }}\n          >\n            {bondsOfSelectedChain && bondsOfSelectedChain?.length > 0 ? (\n              bondsOfSelectedChain\n                ?.filter((userBill) => userBill.bond.chainId === selectedChain)\n                .map((ownedBill, index) => {\n                  return (\n                    <Flex\n                      key={`${ownedBill.bond.earnToken.symbol}-${index}`}\n                      sx={{ width: '100%', alignItems: 'center', p: '5px' }}\n                    >\n                      <TokenImage symbol={ownedBill.bond.earnToken.symbol} size={30} />\n                      <Text sx={{ ml: '10px' }}>\n                        {ownedBill.bond.earnToken.symbol}\n                        <Text sx={{ fontSize: '14px', fontWeight: 400, color: 'textDisabledButton', ml: '10px' }}>\n                          ({ownedBill?.userOwnedBills?.length} Bond\n                          {ownedBill?.userOwnedBills && ownedBill?.userOwnedBills?.length > 1 ? 's' : ''})\n                        </Text>\n                      </Text>\n                    </Flex>\n                  )\n                })\n            ) : (\n              <Flex\n                sx={{\n                  fontSize: '14px',\n                  fontWeight: 400,\n                  color: 'textDisabledButton',\n                  justifyContent: 'center',\n                  mt: '10px',\n                }}\n              >\n                No bonds to claim for this chain\n              </Flex>\n            )}\n          </Flex>\n          <Text sx={{ fontSize: '14px', fontWeight: 400, mt: '15px' }}>\n            {`You'll claim`} {ownedBillsAmount} Bonds in {bondsOfSelectedChain?.length} transaction\n            {(bondsOfSelectedChain?.length ?? 0) > 1 ? 's' : ''}.\n          </Text>\n          {chainId === selectedChain ? (\n            <Button sx={{ mt: '15px', width: '100%' }} onClick={handleClaim}>\n              Claim\n            </Button>\n          ) : (\n            <Button sx={{ mt: '15px', width: '100%' }} onClick={() => switchChain({ chainId: selectedChain })}>\n              Switch to {NETWORK_LABEL[selectedChain ?? 0]}\n            </Button>\n          )}\n        </Flex>\n      )}\n    </Modal>\n  )\n}\n\nexport default ClaimAllModal\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/views/YourBonds/components/UserBondRow/index.js

@@ -4,7 +4,7 @@ import { Flex } from 'theme-ui';
 import TokenInfoAndName from '../../../../components/TokenInfoAndName/index.js';
 import { formatNumberSI } from '../../../../utils/formatNumber.js';
 import Button from '../../../../components/uikit-sdk/Button/Button.js';
-import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import More from '../../../../components/uikit-sdk/Svg/Icons/More.js';
 import TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble/index.js';
 import { getTimeLeftForFullyVested, getPendingVestingString, claimable, pending, getPercentageVested } from '../../../../utils/displayHelpers.js';
 import { useChainId, useAccount, useSwitchChain, useWriteContract } from 'wagmi';
@@ -96,7 +96,7 @@ const UserBondRow = ({ bill }) => {
     }, [isConfirmed]);
     return (jsxs("div", { className: "your-bonds", onClick: onOpenPurchasedBond, children: [jsxs("div", { className: "token-info-container", children: [jsx(TokenInfoAndName, { tokenSymbol: bill?.bond?.earnToken?.symbol, chain: bill?.bond?.chainId, tag: bill?.bond?.tags?.[0], vestEnds: getTimeLeftForFullyVested(bill) > 0 ? `Ends in ${getPendingVestingString(bill)}` : `Fully Vested`, isHotBond: true }), jsx("div", { className: "tooltip-column", children: jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(BondInfoTooltip, { earnTokenContract: bill?.bond?.earnToken.address[bill?.bond.chainId] || '', earnTokenSymbol: bill?.bond?.earnToken.symbol || '', bondContract: bill?.address ?? '', projectLink: bill?.bond?.projectLink, twitter: bill?.bond?.twitter, chain: bill?.bond?.chainId }), width: "205px", placement: "bottomRight", transformTip: "translate(5%, 0%)", children: jsx(Flex, { sx: {
                                     opacity: 0.8,
-                                }, children: jsx(Svg, { icon: "more", width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsxs("div", { className: "your-bonds-content", children: [jsx("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 3), jsx("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 3), jsx("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx("div", { className: "your-bonds-content hide-mobile", children: jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(bill) }), style: {
+                                }, children: jsx(More, { width: "25px" }) }) }) })] }), jsxs("div", { className: "your-bonds-columns-container", children: [jsxs("div", { className: "your-bonds-content", children: [jsx("div", { className: "your-bonds-content-title", children: "Claimable" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(claimable(bill), 3), jsx("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(claimable(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsxs("div", { className: "your-bonds-content", children: [jsx("div", { className: "your-bonds-content-title", children: "Pending" }), jsxs("div", { className: "your-bonds-content-tokens-amount", children: [formatNumberSI(pending(bill), 3), jsx("div", { className: "your-bonds-content-tokens-usd-amount", children: `($${(pending(bill) * earnTokenPrice).toFixed(2)})` })] })] }), jsx("div", { className: "your-bonds-content hide-mobile", children: jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(bill) }), style: {
                                 width: '127px',
                                 height: '25px',
                                 flexDirection: 'column',

package/dist/views/YourBonds/components/UserBondRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/YourBonds/components/UserBondRow/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Flex } from 'theme-ui'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport { UserBill } from '../../../../types/yourbonds'\nimport {\n  claimable,\n  getPendingVestingString,\n  getPercentageVested,\n  getTimeLeftForFullyVested,\n  pending,\n} from '../../../../utils/displayHelpers'\nimport { useAccount, useChainId, useSwitchChain, useWriteContract } from 'wagmi'\nimport BOND_ABI from '../../../../config/abi/BOND_2_4_0.json'\nimport useModal from '../../../../hooks/useModal'\nimport YourBondsModal from '../../../YourBondsModal/YourBondsModal'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { useMonitorTx } from '../../../../hooks/useMonitorTx'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport track from '../../../../utils/track'\nimport { remove0xPrefix } from '../../../../utils/remove0xPrefix'\nimport getTimePeriods from '../../../../utils/getTimePeriods'\nimport { reportError } from '../../../../utils/reportError'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport useUserBonds from '../../../../state/bonds/useUserBonds'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\n\nconst UserBondRow = ({ bill }: { bill: UserBill }) => {\n  // Hooks\n  const userChainId = useChainId()\n  const SDKConfig = useSDKConfig()\n  const { address: account } = useAccount()\n  const { switchChain } = useSwitchChain()\n  const { writeContractAsync } = useWriteContract()\n  const { addToastError } = usePopups()\n  const { refetch: refetchUserBonds } = useUserBonds()\n  const [onOpenPurchasedBond] = useModal(<YourBondsModal userBill={bill} />)\n\n  // State\n  const [claimTxHash, setClaimTxHash] = useState<string | null>(null)\n  const { isLoading: isConfirming, isSuccess: isConfirmed } = useMonitorTx(claimTxHash, bill?.bond?.chainId)\n  const [loadingTx, setLoadingTx] = useState(false)\n  const load = loadingTx || (isConfirming && !isConfirmed)\n\n  const handleClaim = async (billId: string, billAddress: string) => {\n    if (userChainId !== bill?.bond?.chainId) {\n      await switchChain({ chainId: bill?.bond?.chainId! })\n    }\n    const address: `0x${string}` = billAddress as `0x${string}`\n    try {\n      setLoadingTx(true)\n      const tx = await writeContractAsync({\n        address: address,\n        abi: BOND_ABI,\n        functionName: 'redeem',\n        args: [billId],\n        chain: userChainId as any,\n        account,\n      })\n      setLoadingTx(false)\n\n      if (tx) {\n        setClaimTxHash(tx)\n        track({\n          event: 'bond',\n          chain: bill?.bond?.chainId,\n          data: {\n            cat: 'claim',\n            bondType: bill?.bond?.billType,\n            address: remove0xPrefix(bill?.bond?.contractAddress?.[bill?.bond?.chainId]),\n            earnToken: bill?.bond?.earnToken.symbol,\n          },\n        })\n      }\n    } catch (error: any) {\n      setLoadingTx(false)\n      console.error('Claim failed:', error)\n      addToastError(error.message)\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        extraInfo: { type: 'claim', bill, error },\n        chainId: bill?.bond?.chainId,\n        account,\n      })\n    }\n  }\n\n  // Display Info\n  const earnTokenPrice = parseFloat(bill?.bond?.payoutTokenPrice ?? '0')\n  const vestingCliff = bill?.bond?.vestingCliff\n  const currentTime = Math.round(new Date().getTime() / 1000)\n  const purchaseTimestamp = parseInt(bill?.vestingStartTimestamp ?? '0')\n  const isPendingCliff = vestingCliff ? currentTime - purchaseTimestamp < vestingCliff : false\n  const cliffCountdown = getTimePeriods(purchaseTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n  useEffect(() => {\n    if (isConfirmed) {\n      refetchUserBonds()\n    }\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [isConfirmed])\n\n  return (\n    <div className=\"your-bonds\" onClick={onOpenPurchasedBond}>\n      <div className=\"token-info-container\">\n        <TokenInfoAndName\n          tokenSymbol={bill?.bond?.earnToken?.symbol}\n          chain={bill?.bond?.chainId}\n          tag={bill?.bond?.tags?.[0]}\n          vestEnds={getTimeLeftForFullyVested(bill) > 0 ? `Ends in ${getPendingVestingString(bill)}` : `Fully Vested`}\n          isHotBond\n        />\n        <div className=\"tooltip-column\">\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Tooltip\n                earnTokenContract={bill?.bond?.earnToken.address[bill?.bond.chainId] || ''}\n                earnTokenSymbol={bill?.bond?.earnToken.symbol || ''}\n                bondContract={bill?.address ?? ''}\n                projectLink={bill?.bond?.projectLink}\n                twitter={bill?.bond?.twitter}\n                chain={bill?.bond?.chainId!}\n                // cgId={bill?.bond?.cgId}\n                // dexscreener={bill?.bond?.dexscreener}\n              />\n            }\n            width=\"205px\"\n            placement=\"bottomRight\"\n            transformTip=\"translate(5%, 0%)\"\n          >\n            <Flex\n              sx={{\n                opacity: 0.8,\n              }}\n            >\n              <Svg icon=\"more\" width=\"25px\" />\n            </Flex>\n          </TooltipBubble>\n        </div>\n      </div>\n      <div className=\"your-bonds-columns-container\">\n        {/*<Flex sx={{ width: '125px' }}>*/}\n        {/*  <ProfitCard userBond={bill} />*/}\n        {/*</Flex>*/}\n        <div className=\"your-bonds-content\">\n          <div className=\"your-bonds-content-title\">Claimable</div>\n          <div className=\"your-bonds-content-tokens-amount\">\n            {formatNumberSI(claimable(bill), 3)}\n            <div className=\"your-bonds-content-tokens-usd-amount\">\n              {`($${(claimable(bill) * earnTokenPrice).toFixed(2)})`}\n            </div>\n          </div>\n        </div>\n        <div className=\"your-bonds-content\">\n          <div className=\"your-bonds-content-title\">Pending</div>\n          <div className=\"your-bonds-content-tokens-amount\">\n            {formatNumberSI(pending(bill), 3)}\n            <div className=\"your-bonds-content-tokens-usd-amount\">\n              {`($${(pending(bill) * earnTokenPrice).toFixed(2)})`}\n            </div>\n          </div>\n        </div>\n        <div className=\"your-bonds-content hide-mobile\">\n          <ProgressBarWrapper\n            title={''}\n            value={<ProgressBar value={getPercentageVested(bill)} />}\n            style={{\n              width: '127px',\n              height: '25px',\n              flexDirection: 'column',\n              justifyContent: 'center',\n              display: ['none', 'none', 'none', 'flex'],\n            }}\n            showTooltip={true}\n            toolTip={\n              getTimeLeftForFullyVested(bill) > 0\n                ? `Fully vested in ${getPendingVestingString(bill)}.`\n                : `Fully Vested.`\n            }\n          />\n        </div>\n        <div className=\"your-bonds-column-button\">\n          <Button\n            className=\"button\"\n            disabled={claimable(bill) === 0 || load || isPendingCliff || bill.paused}\n            load={load}\n            onClick={(event) => {\n              event.stopPropagation()\n              handleClaim(bill.id, bill.address)\n            }}\n            fullWidth\n          >\n            {bill.paused\n              ? 'claims disabled'\n              : isPendingCliff\n                ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`\n                : 'Claim'}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default UserBondRow\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/YourBonds/components/UserBondRow/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Flex } from 'theme-ui'\nimport TokenInfoAndName from '../../../../components/TokenInfoAndName'\nimport { formatNumberSI } from '../../../../utils/formatNumber'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport More from '../../../../components/uikit-sdk/Svg/Icons/More'\nimport TooltipBubble from '../../../../components/uikit-sdk/TooltipBubble'\nimport { UserBill } from '../../../../types/yourbonds'\nimport {\n  claimable,\n  getPendingVestingString,\n  getPercentageVested,\n  getTimeLeftForFullyVested,\n  pending,\n} from '../../../../utils/displayHelpers'\nimport { useAccount, useChainId, useSwitchChain, useWriteContract } from 'wagmi'\nimport BOND_ABI from '../../../../config/abi/BOND_2_4_0.json'\nimport useModal from '../../../../hooks/useModal'\nimport YourBondsModal from '../../../YourBondsModal/YourBondsModal'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { useMonitorTx } from '../../../../hooks/useMonitorTx'\nimport Tooltip from '../../../../components/Tooltip/Tooltip'\nimport track from '../../../../utils/track'\nimport { remove0xPrefix } from '../../../../utils/remove0xPrefix'\nimport getTimePeriods from '../../../../utils/getTimePeriods'\nimport { reportError } from '../../../../utils/reportError'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport useUserBonds from '../../../../state/bonds/useUserBonds'\nimport ProgressBarWrapper from '../../../../components/ProgressBar/ProgressBarWrapper'\nimport ProgressBar from '../../../../components/ProgressBar/ProgressBar'\n\nconst UserBondRow = ({ bill }: { bill: UserBill }) => {\n  // Hooks\n  const userChainId = useChainId()\n  const SDKConfig = useSDKConfig()\n  const { address: account } = useAccount()\n  const { switchChain } = useSwitchChain()\n  const { writeContractAsync } = useWriteContract()\n  const { addToastError } = usePopups()\n  const { refetch: refetchUserBonds } = useUserBonds()\n  const [onOpenPurchasedBond] = useModal(<YourBondsModal userBill={bill} />)\n\n  // State\n  const [claimTxHash, setClaimTxHash] = useState<string | null>(null)\n  const { isLoading: isConfirming, isSuccess: isConfirmed } = useMonitorTx(claimTxHash, bill?.bond?.chainId)\n  const [loadingTx, setLoadingTx] = useState(false)\n  const load = loadingTx || (isConfirming && !isConfirmed)\n\n  const handleClaim = async (billId: string, billAddress: string) => {\n    if (userChainId !== bill?.bond?.chainId) {\n      await switchChain({ chainId: bill?.bond?.chainId! })\n    }\n    const address: `0x${string}` = billAddress as `0x${string}`\n    try {\n      setLoadingTx(true)\n      const tx = await writeContractAsync({\n        address: address,\n        abi: BOND_ABI,\n        functionName: 'redeem',\n        args: [billId],\n        chain: userChainId as any,\n        account,\n      })\n      setLoadingTx(false)\n\n      if (tx) {\n        setClaimTxHash(tx)\n        track({\n          event: 'bond',\n          chain: bill?.bond?.chainId,\n          data: {\n            cat: 'claim',\n            bondType: bill?.bond?.billType,\n            address: remove0xPrefix(bill?.bond?.contractAddress?.[bill?.bond?.chainId]),\n            earnToken: bill?.bond?.earnToken.symbol,\n          },\n        })\n      }\n    } catch (error: any) {\n      setLoadingTx(false)\n      console.error('Claim failed:', error)\n      addToastError(error.message)\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        extraInfo: { type: 'claim', bill, error },\n        chainId: bill?.bond?.chainId,\n        account,\n      })\n    }\n  }\n\n  // Display Info\n  const earnTokenPrice = parseFloat(bill?.bond?.payoutTokenPrice ?? '0')\n  const vestingCliff = bill?.bond?.vestingCliff\n  const currentTime = Math.round(new Date().getTime() / 1000)\n  const purchaseTimestamp = parseInt(bill?.vestingStartTimestamp ?? '0')\n  const isPendingCliff = vestingCliff ? currentTime - purchaseTimestamp < vestingCliff : false\n  const cliffCountdown = getTimePeriods(purchaseTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n  useEffect(() => {\n    if (isConfirmed) {\n      refetchUserBonds()\n    }\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [isConfirmed])\n\n  return (\n    <div className=\"your-bonds\" onClick={onOpenPurchasedBond}>\n      <div className=\"token-info-container\">\n        <TokenInfoAndName\n          tokenSymbol={bill?.bond?.earnToken?.symbol}\n          chain={bill?.bond?.chainId}\n          tag={bill?.bond?.tags?.[0]}\n          vestEnds={getTimeLeftForFullyVested(bill) > 0 ? `Ends in ${getPendingVestingString(bill)}` : `Fully Vested`}\n          isHotBond\n        />\n        <div className=\"tooltip-column\">\n          <TooltipBubble\n            className=\"tooltip-bubble\"\n            body={\n              <Tooltip\n                earnTokenContract={bill?.bond?.earnToken.address[bill?.bond.chainId] || ''}\n                earnTokenSymbol={bill?.bond?.earnToken.symbol || ''}\n                bondContract={bill?.address ?? ''}\n                projectLink={bill?.bond?.projectLink}\n                twitter={bill?.bond?.twitter}\n                chain={bill?.bond?.chainId!}\n                // cgId={bill?.bond?.cgId}\n                // dexscreener={bill?.bond?.dexscreener}\n              />\n            }\n            width=\"205px\"\n            placement=\"bottomRight\"\n            transformTip=\"translate(5%, 0%)\"\n          >\n            <Flex\n              sx={{\n                opacity: 0.8,\n              }}\n            >\n              <More width=\"25px\" />\n            </Flex>\n          </TooltipBubble>\n        </div>\n      </div>\n      <div className=\"your-bonds-columns-container\">\n        {/*<Flex sx={{ width: '125px' }}>*/}\n        {/*  <ProfitCard userBond={bill} />*/}\n        {/*</Flex>*/}\n        <div className=\"your-bonds-content\">\n          <div className=\"your-bonds-content-title\">Claimable</div>\n          <div className=\"your-bonds-content-tokens-amount\">\n            {formatNumberSI(claimable(bill), 3)}\n            <div className=\"your-bonds-content-tokens-usd-amount\">\n              {`($${(claimable(bill) * earnTokenPrice).toFixed(2)})`}\n            </div>\n          </div>\n        </div>\n        <div className=\"your-bonds-content\">\n          <div className=\"your-bonds-content-title\">Pending</div>\n          <div className=\"your-bonds-content-tokens-amount\">\n            {formatNumberSI(pending(bill), 3)}\n            <div className=\"your-bonds-content-tokens-usd-amount\">\n              {`($${(pending(bill) * earnTokenPrice).toFixed(2)})`}\n            </div>\n          </div>\n        </div>\n        <div className=\"your-bonds-content hide-mobile\">\n          <ProgressBarWrapper\n            title={''}\n            value={<ProgressBar value={getPercentageVested(bill)} />}\n            style={{\n              width: '127px',\n              height: '25px',\n              flexDirection: 'column',\n              justifyContent: 'center',\n              display: ['none', 'none', 'none', 'flex'],\n            }}\n            showTooltip={true}\n            toolTip={\n              getTimeLeftForFullyVested(bill) > 0\n                ? `Fully vested in ${getPendingVestingString(bill)}.`\n                : `Fully Vested.`\n            }\n          />\n        </div>\n        <div className=\"your-bonds-column-button\">\n          <Button\n            className=\"button\"\n            disabled={claimable(bill) === 0 || load || isPendingCliff || bill.paused}\n            load={load}\n            onClick={(event) => {\n              event.stopPropagation()\n              handleClaim(bill.id, bill.address)\n            }}\n            fullWidth\n          >\n            {bill.paused\n              ? 'claims disabled'\n              : isPendingCliff\n                ? `Claimable in ${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`\n                : 'Claim'}\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default UserBondRow\n"],"names":["_jsx","_jsxs","Tooltip"],"mappings":"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"}

package/dist/views/YourBonds/components/YourBondsMenu/YourBondsMenu.js

@@ -2,13 +2,13 @@ import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { Flex } from 'theme-ui';
 import BondFilters from '../../../../components/BondFilters/BondFilters.js';
 import Input from '../../../../components/uikit-sdk/Input/Input.js';
-import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import Sort from '../../../../components/uikit-sdk/Svg/Icons/Sort.js';
 import ClaimAll from '../ClaimAll/index.js';
 import { useSDKConfig } from '../../../../state/useSDKConfig.js';
 
 const YourBondsMenu = ({ chainFilterOption, setChainFilterOption, filterOptions, filterOption, setFilterOption, setInputValue, inputValue, handleSort, }) => {
     const SDKConfig = useSDKConfig();
-    return (jsxs("div", { className: "bonds-menu", children: [jsx(BondFilters, { chainFilterOption: chainFilterOption ?? ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx("div", { className: "search-container", children: jsx(Flex, { sx: { width: '100%', maxWidth: '300px' }, children: jsx(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: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Svg, { icon: "sort", width: "12px", color: "textDisabledButton" }) })] }), jsx(Flex, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx(ClaimAll, {}) })] })] })] }));
+    return (jsxs("div", { className: "bonds-menu", children: [jsx(BondFilters, { chainFilterOption: chainFilterOption ?? ['All Chains'], setChainFilterOption: setChainFilterOption, filterOptions: filterOptions, filterOption: filterOption, setFilterOption: setFilterOption, onHandleQueryChange: () => setInputValue('') }), jsxs("div", { className: "table-header-container", children: [jsx("div", { className: "search-container", children: jsx(Flex, { sx: { width: '100%', maxWidth: '300px' }, children: jsx(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: [jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('claimable'), children: ["CLAIMABLE", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('pending'), children: ["PENDING", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsxs("div", { className: "your-bonds-table-headers", onClick: () => handleSort('terms'), children: ["TERMS", jsx(Flex, { sx: { ml: '5px' }, children: jsx(Sort, { width: "12px", color: "textDisabledButton" }) })] }), jsx(Flex, { className: "claim-all-button-container", children: SDKConfig.referenceId === 'apebond' && jsx(ClaimAll, {}) })] })] })] }));
 };
 
 export { YourBondsMenu as default };

package/dist/views/YourBonds/components/YourBondsMenu/YourBondsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"YourBondsMenu.js","sources":["../../../../../src/views/YourBonds/components/YourBondsMenu/YourBondsMenu.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex } from 'theme-ui'\nimport BondFilters from '../../../../components/BondFilters/BondFilters'\nimport { Input } from '../../../../components/uikit-sdk/Input'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport { SortableKeys } from '../../YourBonds'\nimport ClaimAll from '../ClaimAll'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\nconst YourBondsMenu = ({\n  chainFilterOption,\n  setChainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  setInputValue,\n  inputValue,\n  handleSort,\n}: {\n  chainFilterOption: string[]\n  setChainFilterOption: (newValue: string[]) => void\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newValue: string) => void\n  setInputValue: (newValue: string) => void\n  inputValue: string\n  handleSort: (key: SortableKeys) => void\n}) => {\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"bonds-menu\">\n      <BondFilters\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        setChainFilterOption={setChainFilterOption}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={setFilterOption}\n        onHandleQueryChange={() => setInputValue('')}\n      />\n      <div className=\"table-header-container\">\n        <div className=\"search-container\">\n          <Flex sx={{ width: '100%', maxWidth: '300px' }}>\n            <Input\n              className=\"search-input\"\n              value={inputValue}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value)}\n              variant=\"search\"\n              sx={{ fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }}\n              width={'100%'}\n              placeholder={'Search...'}\n            />\n          </Flex>\n        </div>\n        <div className=\"headers-container\" sx={{ pr: ['0', '0', '0', '20px'] }}>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('claimable')}>\n            CLAIMABLE\n            <Flex sx={{ ml: '5px' }}>\n              <Svg icon=\"sort\" width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('pending')}>\n            PENDING\n            <Flex sx={{ ml: '5px' }}>\n              <Svg icon=\"sort\" width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('terms')}>\n            TERMS\n            <Flex sx={{ ml: '5px' }}>\n              <Svg icon=\"sort\" width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <Flex className=\"claim-all-button-container\">{SDKConfig.referenceId === 'apebond' && <ClaimAll />}</Flex>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default YourBondsMenu\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"YourBondsMenu.js","sources":["../../../../../src/views/YourBonds/components/YourBondsMenu/YourBondsMenu.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex } from 'theme-ui'\nimport BondFilters from '../../../../components/BondFilters/BondFilters'\nimport { Input } from '../../../../components/uikit-sdk/Input'\nimport Sort from '../../../../components/uikit-sdk/Svg/Icons/Sort'\nimport { SortableKeys } from '../../YourBonds'\nimport ClaimAll from '../ClaimAll'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\nconst YourBondsMenu = ({\n  chainFilterOption,\n  setChainFilterOption,\n  filterOptions,\n  filterOption,\n  setFilterOption,\n  setInputValue,\n  inputValue,\n  handleSort,\n}: {\n  chainFilterOption: string[]\n  setChainFilterOption: (newValue: string[]) => void\n  filterOptions: string[]\n  filterOption: string\n  setFilterOption: (newValue: string) => void\n  setInputValue: (newValue: string) => void\n  inputValue: string\n  handleSort: (key: SortableKeys) => void\n}) => {\n  const SDKConfig = useSDKConfig()\n\n  return (\n    <div className=\"bonds-menu\">\n      <BondFilters\n        chainFilterOption={chainFilterOption ?? ['All Chains']}\n        setChainFilterOption={setChainFilterOption}\n        filterOptions={filterOptions}\n        filterOption={filterOption}\n        setFilterOption={setFilterOption}\n        onHandleQueryChange={() => setInputValue('')}\n      />\n      <div className=\"table-header-container\">\n        <div className=\"search-container\">\n          <Flex sx={{ width: '100%', maxWidth: '300px' }}>\n            <Input\n              className=\"search-input\"\n              value={inputValue}\n              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value)}\n              variant=\"search\"\n              sx={{ fontWeight: 600, background: 'white2', height: '30px', fontSize: '14px', color: 'white' }}\n              width={'100%'}\n              placeholder={'Search...'}\n            />\n          </Flex>\n        </div>\n        <div className=\"headers-container\" sx={{ pr: ['0', '0', '0', '20px'] }}>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('claimable')}>\n            CLAIMABLE\n            <Flex sx={{ ml: '5px' }}>\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('pending')}>\n            PENDING\n            <Flex sx={{ ml: '5px' }}>\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <div className=\"your-bonds-table-headers\" onClick={() => handleSort('terms')}>\n            TERMS\n            <Flex sx={{ ml: '5px' }}>\n              <Sort width=\"12px\" color=\"textDisabledButton\" />\n            </Flex>\n          </div>\n          <Flex className=\"claim-all-button-container\">{SDKConfig.referenceId === 'apebond' && <ClaimAll />}</Flex>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default YourBondsMenu\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/views/YourBondsModal/YourBondsModal.js

@@ -14,7 +14,8 @@ import Actions from './components/Actions/Actions.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import Modal from '../../components/uikit-sdk/Modal/index.js';
 import Flex from '../../components/uikit-sdk/Flex/index.js';
-import Svg from '../../components/uikit-sdk/Svg/index.js';
+import Arrow from '../../components/uikit-sdk/Svg/Icons/Arrow.js';
+import QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle.js';
 import Button from '../../components/uikit-sdk/Button/Button.js';
 import TooltipBubble from '../../components/uikit-sdk/TooltipBubble/index.js';
 import Text from '../../components/uikit-sdk/Text/index.js';
@@ -55,7 +56,7 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
                                                 width: '50%',
                                                 alignItems: 'center',
                                                 fontSize: '14px',
-                                            }, children: [jsx(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(depositUSD)] })] }), jsx(Flex, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }, children: jsx(Svg, { icon: "arrow", direction: "right", width: '5px' }) }), jsxs(Flex, { sx: {
+                                            }, children: [jsx(Flex, { children: "Deposit" }), jsxs(Flex, { children: ["$", formatNumberSI(depositUSD)] })] }), jsx(Flex, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }, children: jsx(Arrow, { direction: "right", width: '5px' }) }), jsxs(Flex, { sx: {
                                                 background: 'white3',
                                                 borderRadius: 'normal',
                                                 justifyContent: 'space-between',
@@ -80,7 +81,7 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
                                                 p: '4px 10px',
                                                 background: 'white3',
                                                 borderRadius: '10px 10px 0px 0px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Vesting Progress" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsx(Flex, { sx: { alignItems: 'center' }, children: isPendingCliff ? (jsxs(Fragment, { children: ["Claiming starts in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`] })) : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(userBill) }), style: {
+                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Vesting Progress" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.FullyVested }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsx(Flex, { sx: { alignItems: 'center' }, children: isPendingCliff ? (jsxs(Fragment, { children: ["Claiming starts in", ' ', `${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`] })) : (jsx(ProgressBarWrapper, { title: '', value: jsx(ProgressBar, { value: getPercentageVested(userBill) }), style: {
                                                             width: '100px',
                                                             flexDirection: 'column',
                                                             alignItems: 'center',
@@ -93,7 +94,7 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
                                                 p: '4px 10px',
                                                 background: 'white4',
                                                 height: '26px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Pending" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(pending(userBill), 4) }), jsxs(Text, { sx: {
+                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Pending" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Pending }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(pending(userBill), 4) }), jsxs(Text, { sx: {
                                                                 fontSize: ['10px', '10px', '10px', '12px'],
                                                                 fontWeight: 400,
                                                                 ml: '10px',
@@ -105,7 +106,7 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
                                                 p: '4px 10px',
                                                 background: 'white3',
                                                 height: '26px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimable" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimable(userBill), 4) }), jsxs(Text, { sx: {
+                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimable" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimable }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimable(userBill), 4) }), jsxs(Text, { sx: {
                                                                 fontSize: ['10px', '10px', '10px', '12px'],
                                                                 fontWeight: 400,
                                                                 ml: '10px',
@@ -118,7 +119,7 @@ const YourBondsModal = ({ userBill, lostProfit, onDismiss, }) => {
                                                 background: 'white4',
                                                 height: '26px',
                                                 borderRadius: '0px 0px 10px 10px',
-                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimed" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimed }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(Svg, { icon: "questionCircle", width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimed(userBill), 4) }), jsxs(Text, { sx: {
+                                            }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '5px' }, children: [jsx(Flex, { sx: { opacity: 0.6 }, children: "Claimed" }), jsx(TooltipBubble, { className: "tooltip-bubble", body: jsx(Flex, { children: UserBillTooltipText.Claimed }), width: "230px", placement: "bottomLeft", transformTip: "translate(-5%, 0%)", children: jsx(Flex, { className: "block-header icon", children: jsx(QuestionCircle, { width: "12px" }) }) })] }), jsxs(Flex, { sx: { alignItems: 'center' }, children: [jsx(TokenImage, { symbol: payoutTokenSymbol, size: 18 }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 700, ml: '10px' }, children: formatNumberSI(claimed(userBill), 4) }), jsxs(Text, { sx: {
                                                                 fontSize: ['10px', '10px', '10px', '12px'],
                                                                 fontWeight: 400,
                                                                 ml: '10px',

package/dist/views/YourBondsModal/YourBondsModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"YourBondsModal.js","sources":["../../../src/views/YourBondsModal/YourBondsModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { UserBill } from '../../types/yourbonds'\nimport TokenImage from '../../components/uikit-sdk/TokenImage'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport { UserBillTooltipText } from '../../config/constants/tooltips'\nimport {\n  claimable,\n  claimableUSD,\n  claimed,\n  claimedUSD,\n  getPendingVestingString,\n  getPercentageVested,\n  getTimeLeftForFullyVested,\n  pending,\n  pendingUSD,\n} from '../../utils/displayHelpers'\nimport getTimePeriods from '../../utils/getTimePeriods'\nimport SafeHTMLComponent from '../../components/SafeHTMLComponent'\nimport ProgressBar from '../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../components/ProgressBar/ProgressBarWrapper'\nimport NFTImage from './components/NFTImage/NFTImage'\nimport YourBondModalHeader from './components/YourBondModalHeader/YourBondModalHeader'\nimport Actions from './components/Actions/Actions'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Svg from '../../components/uikit-sdk/Svg'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst YourBondsModal = ({\n  userBill,\n  lostProfit,\n  onDismiss,\n}: {\n  userBill?: UserBill\n  lostProfit?: string\n  onDismiss?: () => void\n}) => {\n  // State\n  const [showNFTImg, setShowNFTImg] = useState(false)\n\n  // Static Data\n  const depositUSD = userBill?.nftData?.data?.dollarValue\n  const payout = userBill?.nftData?.data?.payout\n  const payoutTokenPrice = parseFloat(userBill?.bond?.payoutTokenPrice ?? '0')\n  const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0\n  const payoutSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol\n  const payoutTokenSymbol = payoutSymbol === 'AIX' && userBill?.bond?.chainId === ChainId.SOL ? 'SOLAIX' : payoutSymbol\n\n  // Cliff display info:\n  const vestingCliff = userBill?.bond?.vestingCliff\n  const currentTime = Math.round(new Date().getTime() / 1000)\n  const vestingStartTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0')\n  const isPendingCliff = vestingCliff ? currentTime - vestingStartTimestamp < vestingCliff : false\n  const cliffCountdown = getTimePeriods(vestingStartTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n  return (\n    <Modal\n      sx={{\n        width: '480px',\n        overflowY: 'unset !important',\n        background: showNFTImg ? 'transparent !important' : 'white2',\n        p: '0px',\n        top: '56%',\n      }}\n    >\n      <Flex\n        sx={{\n          flexDirection: 'column',\n          borderRadius: 'normal',\n          position: 'relative',\n          background: showNFTImg ? 'transparent !important' : 'white2',\n          p: '20px',\n        }}\n      >\n        <NFTImage userBill={userBill} showNFTImg={showNFTImg} setShowNFTImg={setShowNFTImg} />\n\n        {/* Modal Content */}\n\n        {!showNFTImg && (\n          <Flex sx={{ flexDirection: 'column' }}>\n            <YourBondModalHeader userBill={userBill} onDismiss={onDismiss} />\n            <Flex sx={{ mt: '10px', flexDirection: 'column', gap: '10px' }}>\n              <Flex sx={{ width: '100%', gap: '15px', position: 'relative' }}>\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    justifyContent: 'space-between',\n                    p: '10px',\n                    width: '50%',\n                    alignItems: 'center',\n                    fontSize: '14px',\n                  }}\n                >\n                  <Flex>Deposit</Flex>\n                  <Flex>${formatNumberSI(depositUSD)}</Flex>\n                </Flex>\n                <Flex\n                  sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }}\n                >\n                  <Svg icon=\"arrow\" direction=\"right\" width={'5px'} />\n                </Flex>\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    justifyContent: 'space-between',\n                    p: '10px',\n                    width: '50%',\n                    alignItems: 'center',\n                    fontSize: '14px',\n                  }}\n                >\n                  <Flex>Bond Value</Flex>\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={22} />\n                    <Flex sx={{ flexDirection: 'column', fontSize: '14px', lineHeight: '16px' }}>\n                      <Flex sx={{ justifyContent: 'center' }}>{formatNumberSI(payout ?? '0')}</Flex>\n                      <Flex sx={{ fontSize: '10px', fontWeight: 400, opacity: 0.6, justifyContent: 'center' }}>\n                        (${formatNumberSI(payoutUSD)})\n                      </Flex>\n                    </Flex>\n                  </Flex>\n                </Flex>\n              </Flex>\n              {lostProfit && (\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    width: '100%',\n                    p: '10px',\n                    justifyContent: 'space-between',\n                  }}\n                >\n                  <Flex sx={{ width: '20%' }}>\n                    <img\n                      src={`https://ape.bond/images/launch/mythical.png`}\n                      alt=\"mythical\"\n                      style={{ width: '90px', height: '90px' }}\n                    />\n                  </Flex>\n                  <Flex sx={{ width: '75%', flexDirection: 'column', gap: '3px' }}>\n                    <Flex>\n                      You missed a <Flex sx={{ color: 'success', px: '3px' }}>${lostProfit}</Flex> bonus\n                    </Flex>\n                    <Flex sx={{ fontSize: '12px', lineHeight: '16px', fontWeight: 400 }}>\n                      Holding an Ape Tier would’ve gotten you an extra 5% bonus on this purchase and all future ones.\n                    </Flex>\n                    <Button\n                      variant=\"secondary\"\n                      sx={{ width: '100%', fontSize: '14px', height: '30px', fontWeight: 600 }}\n                      onClick={() => window.open('https://ape.bond/true-yield', '_blank')}\n                    >\n                      Upgrade Your Tier\n                    </Button>\n                  </Flex>\n                </Flex>\n              )}\n              <Flex\n                sx={{\n                  flexDirection: 'column',\n                  fontSize: '12px',\n                  fontWeight: 400,\n                }}\n              >\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white3',\n                    borderRadius: '10px 10px 0px 0px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Vesting Progress</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.FullyVested}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <Svg icon=\"questionCircle\" width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    {isPendingCliff ? (\n                      <>\n                        Claiming starts in{' '}\n                        {`${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`}\n                      </>\n                    ) : (\n                      <ProgressBarWrapper\n                        title={''}\n                        value={<ProgressBar value={getPercentageVested(userBill)} />}\n                        style={{\n                          width: '100px',\n                          flexDirection: 'column',\n                          alignItems: 'center',\n                        }}\n                        showTooltip={true}\n                        toolTip={\n                          getTimeLeftForFullyVested(userBill) > 0\n                            ? `Fully vested in ${getPendingVestingString(userBill)}.`\n                            : `Fully Vested.`\n                        }\n                      />\n                    )}\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white4',\n                    height: '26px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Pending</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Pending}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <Svg icon=\"questionCircle\" width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(pending(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(pendingUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white3',\n                    height: '26px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Claimable</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Claimable}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <Svg icon=\"questionCircle\" width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(claimable(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(claimableUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white4',\n                    height: '26px',\n                    borderRadius: '0px 0px 10px 10px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Claimed</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Claimed}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <Svg icon=\"questionCircle\" width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(claimed(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(claimedUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n              </Flex>\n              {userBill?.bond?.warningCard && (\n                <Flex\n                  sx={{\n                    width: '100%',\n                    background: '#DE62F366',\n                    justifyContent: 'center',\n                    borderRadius: 'normal',\n                  }}\n                >\n                  <Text sx={{ fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }}>\n                    <SafeHTMLComponent html={userBill?.bond?.warningCard} />\n                  </Text>\n                </Flex>\n              )}\n              <Flex\n                sx={{\n                  width: '100%',\n                  justifyContent: 'space-between',\n                  gap: ['10px', '10px', '10px', '15px'],\n                  height: '40px',\n                }}\n              >\n                <Actions userBill={userBill} />\n              </Flex>\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default YourBondsModal\n"],"names":["_jsx","_jsxs","NFTImage","_Fragment"],"mappings":"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"}
+{"version":3,"file":"YourBondsModal.js","sources":["../../../src/views/YourBondsModal/YourBondsModal.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { UserBill } from '../../types/yourbonds'\nimport TokenImage from '../../components/uikit-sdk/TokenImage'\nimport { formatNumberSI } from '../../utils/formatNumber'\nimport { UserBillTooltipText } from '../../config/constants/tooltips'\nimport {\n  claimable,\n  claimableUSD,\n  claimed,\n  claimedUSD,\n  getPendingVestingString,\n  getPercentageVested,\n  getTimeLeftForFullyVested,\n  pending,\n  pendingUSD,\n} from '../../utils/displayHelpers'\nimport getTimePeriods from '../../utils/getTimePeriods'\nimport SafeHTMLComponent from '../../components/SafeHTMLComponent'\nimport ProgressBar from '../../components/ProgressBar/ProgressBar'\nimport ProgressBarWrapper from '../../components/ProgressBar/ProgressBarWrapper'\nimport NFTImage from './components/NFTImage/NFTImage'\nimport YourBondModalHeader from './components/YourBondModalHeader/YourBondModalHeader'\nimport Actions from './components/Actions/Actions'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Modal from '../../components/uikit-sdk/Modal'\nimport Flex from '../../components/uikit-sdk/Flex'\nimport Arrow from '../../components/uikit-sdk/Svg/Icons/Arrow'\nimport QuestionCircle from '../../components/uikit-sdk/Svg/Icons/QuestionCircle'\nimport Button from '../../components/uikit-sdk/Button/Button'\nimport TooltipBubble from '../../components/uikit-sdk/TooltipBubble'\nimport Text from '../../components/uikit-sdk/Text'\n\nconst YourBondsModal = ({\n  userBill,\n  lostProfit,\n  onDismiss,\n}: {\n  userBill?: UserBill\n  lostProfit?: string\n  onDismiss?: () => void\n}) => {\n  // State\n  const [showNFTImg, setShowNFTImg] = useState(false)\n\n  // Static Data\n  const depositUSD = userBill?.nftData?.data?.dollarValue\n  const payout = userBill?.nftData?.data?.payout\n  const payoutTokenPrice = parseFloat(userBill?.bond?.payoutTokenPrice ?? '0')\n  const payoutUSD = payout && payoutTokenPrice ? payout * payoutTokenPrice : 0\n  const payoutSymbol = userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken.symbol\n  const payoutTokenSymbol = payoutSymbol === 'AIX' && userBill?.bond?.chainId === ChainId.SOL ? 'SOLAIX' : payoutSymbol\n\n  // Cliff display info:\n  const vestingCliff = userBill?.bond?.vestingCliff\n  const currentTime = Math.round(new Date().getTime() / 1000)\n  const vestingStartTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0')\n  const isPendingCliff = vestingCliff ? currentTime - vestingStartTimestamp < vestingCliff : false\n  const cliffCountdown = getTimePeriods(vestingStartTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n  return (\n    <Modal\n      sx={{\n        width: '480px',\n        overflowY: 'unset !important',\n        background: showNFTImg ? 'transparent !important' : 'white2',\n        p: '0px',\n        top: '56%',\n      }}\n    >\n      <Flex\n        sx={{\n          flexDirection: 'column',\n          borderRadius: 'normal',\n          position: 'relative',\n          background: showNFTImg ? 'transparent !important' : 'white2',\n          p: '20px',\n        }}\n      >\n        <NFTImage userBill={userBill} showNFTImg={showNFTImg} setShowNFTImg={setShowNFTImg} />\n\n        {/* Modal Content */}\n\n        {!showNFTImg && (\n          <Flex sx={{ flexDirection: 'column' }}>\n            <YourBondModalHeader userBill={userBill} onDismiss={onDismiss} />\n            <Flex sx={{ mt: '10px', flexDirection: 'column', gap: '10px' }}>\n              <Flex sx={{ width: '100%', gap: '15px', position: 'relative' }}>\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    justifyContent: 'space-between',\n                    p: '10px',\n                    width: '50%',\n                    alignItems: 'center',\n                    fontSize: '14px',\n                  }}\n                >\n                  <Flex>Deposit</Flex>\n                  <Flex>${formatNumberSI(depositUSD)}</Flex>\n                </Flex>\n                <Flex\n                  sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translateY(-50%) translateX(-50%)' }}\n                >\n                  <Arrow direction=\"right\" width={'5px'} />\n                </Flex>\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    justifyContent: 'space-between',\n                    p: '10px',\n                    width: '50%',\n                    alignItems: 'center',\n                    fontSize: '14px',\n                  }}\n                >\n                  <Flex>Bond Value</Flex>\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={22} />\n                    <Flex sx={{ flexDirection: 'column', fontSize: '14px', lineHeight: '16px' }}>\n                      <Flex sx={{ justifyContent: 'center' }}>{formatNumberSI(payout ?? '0')}</Flex>\n                      <Flex sx={{ fontSize: '10px', fontWeight: 400, opacity: 0.6, justifyContent: 'center' }}>\n                        (${formatNumberSI(payoutUSD)})\n                      </Flex>\n                    </Flex>\n                  </Flex>\n                </Flex>\n              </Flex>\n              {lostProfit && (\n                <Flex\n                  sx={{\n                    background: 'white3',\n                    borderRadius: 'normal',\n                    width: '100%',\n                    p: '10px',\n                    justifyContent: 'space-between',\n                  }}\n                >\n                  <Flex sx={{ width: '20%' }}>\n                    <img\n                      src={`https://ape.bond/images/launch/mythical.png`}\n                      alt=\"mythical\"\n                      style={{ width: '90px', height: '90px' }}\n                    />\n                  </Flex>\n                  <Flex sx={{ width: '75%', flexDirection: 'column', gap: '3px' }}>\n                    <Flex>\n                      You missed a <Flex sx={{ color: 'success', px: '3px' }}>${lostProfit}</Flex> bonus\n                    </Flex>\n                    <Flex sx={{ fontSize: '12px', lineHeight: '16px', fontWeight: 400 }}>\n                      Holding an Ape Tier would’ve gotten you an extra 5% bonus on this purchase and all future ones.\n                    </Flex>\n                    <Button\n                      variant=\"secondary\"\n                      sx={{ width: '100%', fontSize: '14px', height: '30px', fontWeight: 600 }}\n                      onClick={() => window.open('https://ape.bond/true-yield', '_blank')}\n                    >\n                      Upgrade Your Tier\n                    </Button>\n                  </Flex>\n                </Flex>\n              )}\n              <Flex\n                sx={{\n                  flexDirection: 'column',\n                  fontSize: '12px',\n                  fontWeight: 400,\n                }}\n              >\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white3',\n                    borderRadius: '10px 10px 0px 0px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Vesting Progress</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.FullyVested}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <QuestionCircle width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    {isPendingCliff ? (\n                      <>\n                        Claiming starts in{' '}\n                        {`${cliffCountdown.days !== 0 ? `${cliffCountdown.days} days` : cliffCountdown.hours !== 0 ? `${cliffCountdown.hours} hours` : `${cliffCountdown.minutes} mins`}`}\n                      </>\n                    ) : (\n                      <ProgressBarWrapper\n                        title={''}\n                        value={<ProgressBar value={getPercentageVested(userBill)} />}\n                        style={{\n                          width: '100px',\n                          flexDirection: 'column',\n                          alignItems: 'center',\n                        }}\n                        showTooltip={true}\n                        toolTip={\n                          getTimeLeftForFullyVested(userBill) > 0\n                            ? `Fully vested in ${getPendingVestingString(userBill)}.`\n                            : `Fully Vested.`\n                        }\n                      />\n                    )}\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white4',\n                    height: '26px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Pending</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Pending}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <QuestionCircle width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(pending(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(pendingUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white3',\n                    height: '26px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Claimable</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Claimable}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <QuestionCircle width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(claimable(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(claimableUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n                <Flex\n                  sx={{\n                    width: '100%',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    p: '4px 10px',\n                    background: 'white4',\n                    height: '26px',\n                    borderRadius: '0px 0px 10px 10px',\n                  }}\n                >\n                  <Flex sx={{ alignItems: 'center', gap: '5px' }}>\n                    <Flex sx={{ opacity: 0.6 }}>Claimed</Flex>\n                    <TooltipBubble\n                      className=\"tooltip-bubble\"\n                      body={<Flex>{UserBillTooltipText.Claimed}</Flex>}\n                      width=\"230px\"\n                      placement=\"bottomLeft\"\n                      transformTip=\"translate(-5%, 0%)\"\n                    >\n                      <Flex className=\"block-header icon\">\n                        <QuestionCircle width=\"12px\" />\n                      </Flex>\n                    </TooltipBubble>\n                  </Flex>\n                  <Flex sx={{ alignItems: 'center' }}>\n                    <TokenImage symbol={payoutTokenSymbol} size={18} />\n                    <Text sx={{ fontSize: '12px', fontWeight: 700, ml: '10px' }}>\n                      {formatNumberSI(claimed(userBill), 4)}\n                    </Text>\n                    <Text\n                      sx={{\n                        fontSize: ['10px', '10px', '10px', '12px'],\n                        fontWeight: 400,\n                        ml: '10px',\n                        opacity: 0.6,\n                      }}\n                    >\n                      (${formatNumberSI(claimedUSD(userBill))})\n                    </Text>\n                  </Flex>\n                </Flex>\n              </Flex>\n              {userBill?.bond?.warningCard && (\n                <Flex\n                  sx={{\n                    width: '100%',\n                    background: '#DE62F366',\n                    justifyContent: 'center',\n                    borderRadius: 'normal',\n                  }}\n                >\n                  <Text sx={{ fontSize: '12px', fontWeight: 400, p: '4px 10px', lineHeight: '16px' }}>\n                    <SafeHTMLComponent html={userBill?.bond?.warningCard} />\n                  </Text>\n                </Flex>\n              )}\n              <Flex\n                sx={{\n                  width: '100%',\n                  justifyContent: 'space-between',\n                  gap: ['10px', '10px', '10px', '15px'],\n                  height: '40px',\n                }}\n              >\n                <Actions userBill={userBill} />\n              </Flex>\n            </Flex>\n          </Flex>\n        )}\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default YourBondsModal\n"],"names":["_jsx","_jsxs","NFTImage","_Fragment"],"mappings":"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"}

package/dist/views/YourBondsModal/components/NFTImage/NFTImage.js

@@ -4,7 +4,9 @@ import { useAnimation, AnimatePresence, motion } from 'framer-motion';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import ProgressiveImage from '../../../../components/ProgressiveImage/index.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
-import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import Close from '../../../../components/uikit-sdk/Svg/Icons/Close.js';
+import Tag from '../../../../components/uikit-sdk/Svg/Icons/Tag.js';
+import Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret.js';
 import Text from '../../../../components/uikit-sdk/Text/index.js';
 import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.js';
 
@@ -92,7 +94,7 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
                                 borderRadius: '50%',
                                 alignItems: 'center',
                                 justifyContent: 'center',
-                            }, children: jsx(Flex, { sx: { width: '6px' }, children: jsx(Svg, { icon: "close" }) }) })), jsx(ProgressiveImage, { src: `${bondNFTData?.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx(Flex, { sx: {
+                            }, children: jsx(Flex, { sx: { width: '6px' }, children: jsx(Close, {}) }) })), jsx(ProgressiveImage, { src: `${bondNFTData?.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx(Flex, { sx: {
                                 position: 'absolute',
                                 bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],
                                 width: '100%',
@@ -119,7 +121,7 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
                                         }, onClick: (event) => {
                                             event.stopPropagation();
                                             setIsOpenTraits(!isOpenTraits);
-                                        }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx(Svg, { icon: "tag", direction: "down" }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx(AnimatePresence, { children: isOpenTraits && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
+                                        }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx(Tag, { direction: "down" }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx(Caret, { direction: isOpenTraits ? 'up' : 'down' })] }), jsx(AnimatePresence, { children: isOpenTraits && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
                                                 overflow: 'hidden',
                                                 width: '100%',
                                                 position: 'absolute',

package/dist/views/YourBondsModal/components/NFTImage/NFTImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { AnimatePresence, motion, useAnimation } from 'framer-motion'\n// import LinkShare from '../LinkShare/LinkShare'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport ProgressiveImage from '../../../../components/ProgressiveImage'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Svg from '../../../../components/uikit-sdk/Svg'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\n\nconst NftImage = ({\n  userBill,\n  showNFTImg,\n  setShowNFTImg,\n}: {\n  userBill?: UserBill\n  showNFTImg: boolean\n  setShowNFTImg: (value: boolean) => void\n}) => {\n  // Hooks\n  const controls = useAnimation()\n  const isMobile = useIsMobile()\n\n  // State\n  const [isOpenTraits, setIsOpenTraits] = useState<boolean>(false)\n\n  //Static Data\n  const bondNFTData = userBill?.nftData\n  const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation']\n  const attributes = bondNFTData?.attributes?.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type))\n\n  const openAnimation = () => {\n    controls.start({\n      scale: isMobile ? [1, 2] : [1, 3],\n      zIndex: 1000,\n      transition: { duration: 0.2 },\n    })\n  }\n\n  const closeAnimation = () => {\n    controls.start({\n      scale: isMobile ? [2, 1] : [2, 1],\n      zIndex: -1,\n      transition: { duration: 0.3 },\n    })\n    setShowNFTImg(false)\n    setIsOpenTraits(false)\n  }\n  return (\n    <>\n      <AnimatePresence>\n        {showNFTImg && (\n          <motion.div\n            animate={{ opacity: 1 }}\n            transition={{ duration: 1, delay: 0.3 }}\n            sx={{\n              position: 'absolute',\n              display: ['flex'],\n              top: ['-180px', '-180px', '-240px'],\n              right: ['50%', '50%', '50%', '-13%'],\n              transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],\n              opacity: 0,\n              zIndex: 5000,\n            }}\n          >\n            {/*<LinkShare userBill={userBill} />*/}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      <AnimatePresence>\n        {bondNFTData?.image && (\n          <motion.div\n            animate={controls}\n            onClick={() => {\n              if (showNFTImg) {\n                closeAnimation()\n              } else {\n                openAnimation()\n              }\n            }}\n            onAnimationStart={() => {\n              setShowNFTImg(true)\n            }}\n            sx={{\n              display: 'flex',\n              zIndex: -1,\n              position: showNFTImg ? 'fixed' : 'absolute',\n              bottom: 'calc(100% - 10px)',\n              left: '25%',\n              width: '50%',\n              aspectRatio: '1 / 0.56',\n              cursor: 'pointer',\n              borderRadius: 'normal',\n              flexDirection: 'column',\n              '&: hover': {\n                zIndex: [1000, 1000, 1000, '1000 !important'],\n              },\n            }}\n          >\n            <Flex\n              sx={{\n                display: showNFTImg ? 'none' : 'flex',\n                position: 'absolute',\n                zIndex: 121,\n                width: '100%',\n                height: '100%',\n                opacity: 0,\n                alignItems: 'center',\n                justifyContent: 'center',\n                fontWeight: 700,\n                borderRadius: 'normal',\n                '&: hover': {\n                  zIndex: 1000,\n                  opacity: 0.8,\n                  background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',\n                  backdropFilter: ' blur(2px)',\n                },\n              }}\n            >\n              View NFT {'>'}\n            </Flex>\n            {showNFTImg && (\n              <Flex\n                sx={{\n                  position: 'absolute',\n                  top: '5px',\n                  right: '5px',\n                  background: 'grey',\n                  opacity: 0.9,\n                  p: '2px',\n                  borderRadius: '50%',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Flex sx={{ width: '6px' }}>\n                  <Svg icon=\"close\" />\n                </Flex>\n              </Flex>\n            )}\n            <ProgressiveImage src={`${bondNFTData?.image}`} blurSrc={`https://ape.bond/images/bills/bluredNFT.png`} />\n            {showNFTImg && (\n              <Flex\n                sx={{\n                  position: 'absolute',\n                  bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],\n                  width: '100%',\n                  justifyContent: 'center',\n                }}\n              >\n                <Flex\n                  sx={{\n                    flexDirection: 'column',\n                    width: '100%',\n                    minWidth: '250px',\n                    pb: '10px',\n                    alignItems: 'center',\n                    transform: [\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.4) translateY(-75%)',\n                    ],\n                  }}\n                >\n                  <Flex\n                    sx={{\n                      justifyContent: 'space-between',\n                      height: '24px',\n                      backgroundColor: 'white3',\n                      px: '15px',\n                      width: '100%',\n                      borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,\n                    }}\n                    onClick={(event: React.MouseEvent) => {\n                      event.stopPropagation()\n                      setIsOpenTraits(!isOpenTraits)\n                    }}\n                  >\n                    <Flex sx={{ gap: '10px', alignItems: 'center' }}>\n                      <Svg icon=\"tag\" direction=\"down\" />\n                      <Text sx={{ fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }}>Traits</Text>\n                    </Flex>\n                    <Svg icon=\"caret\" direction={isOpenTraits ? 'up' : 'down'} />\n                  </Flex>\n                  <AnimatePresence>\n                    {isOpenTraits && (\n                      <motion.div\n                        initial={{ height: 0 }}\n                        animate={{ height: 'fit-content' }}\n                        transition={{ opacity: { duration: 0.2 } }}\n                        exit={{ height: 0 }}\n                        sx={{\n                          overflow: 'hidden',\n                          width: '100%',\n                          position: 'absolute',\n                          top: '24px',\n                          borderRadius: '0 0 10px 10px',\n                        }}\n                        onClick={(event: React.MouseEvent) => {\n                          event.stopPropagation()\n                          setIsOpenTraits(!isOpenTraits)\n                        }}\n                      >\n                        <Flex sx={{ flexDirection: 'column' }}>\n                          {attributes\n                            ? attributes.map((a, index) => (\n                                <Flex\n                                  key={`${a.value}-${index}`}\n                                  sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n                                >\n                                  <Text sx={{ fontSize: '10px', fontWeight: 500, mr: '3px' }}>{a?.trait_type} -</Text>\n                                  <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{a?.value}</Text>\n                                </Flex>\n                              ))\n                            : BILL_ATTRIBUTES.map((attrib, index) => {\n                                return (\n                                  <Flex\n                                    key={`${attrib}-${index}`}\n                                    sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n                                  >\n                                    <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{attrib}</Text>\n                                    <Skeleton width=\"150px\" />\n                                  </Flex>\n                                )\n                              })}\n                        </Flex>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </Flex>\n              </Flex>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </>\n  )\n}\n\nexport default NftImage\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
+{"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { AnimatePresence, motion, useAnimation } from 'framer-motion'\n// import LinkShare from '../LinkShare/LinkShare'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport ProgressiveImage from '../../../../components/ProgressiveImage'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Close from '../../../../components/uikit-sdk/Svg/Icons/Close'\nimport Tag from '../../../../components/uikit-sdk/Svg/Icons/Tag'\nimport Caret from '../../../../components/uikit-sdk/Svg/Icons/Caret'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\n\nconst NftImage = ({\n  userBill,\n  showNFTImg,\n  setShowNFTImg,\n}: {\n  userBill?: UserBill\n  showNFTImg: boolean\n  setShowNFTImg: (value: boolean) => void\n}) => {\n  // Hooks\n  const controls = useAnimation()\n  const isMobile = useIsMobile()\n\n  // State\n  const [isOpenTraits, setIsOpenTraits] = useState<boolean>(false)\n\n  //Static Data\n  const bondNFTData = userBill?.nftData\n  const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation']\n  const attributes = bondNFTData?.attributes?.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type))\n\n  const openAnimation = () => {\n    controls.start({\n      scale: isMobile ? [1, 2] : [1, 3],\n      zIndex: 1000,\n      transition: { duration: 0.2 },\n    })\n  }\n\n  const closeAnimation = () => {\n    controls.start({\n      scale: isMobile ? [2, 1] : [2, 1],\n      zIndex: -1,\n      transition: { duration: 0.3 },\n    })\n    setShowNFTImg(false)\n    setIsOpenTraits(false)\n  }\n  return (\n    <>\n      <AnimatePresence>\n        {showNFTImg && (\n          <motion.div\n            animate={{ opacity: 1 }}\n            transition={{ duration: 1, delay: 0.3 }}\n            sx={{\n              position: 'absolute',\n              display: ['flex'],\n              top: ['-180px', '-180px', '-240px'],\n              right: ['50%', '50%', '50%', '-13%'],\n              transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],\n              opacity: 0,\n              zIndex: 5000,\n            }}\n          >\n            {/*<LinkShare userBill={userBill} />*/}\n          </motion.div>\n        )}\n      </AnimatePresence>\n      <AnimatePresence>\n        {bondNFTData?.image && (\n          <motion.div\n            animate={controls}\n            onClick={() => {\n              if (showNFTImg) {\n                closeAnimation()\n              } else {\n                openAnimation()\n              }\n            }}\n            onAnimationStart={() => {\n              setShowNFTImg(true)\n            }}\n            sx={{\n              display: 'flex',\n              zIndex: -1,\n              position: showNFTImg ? 'fixed' : 'absolute',\n              bottom: 'calc(100% - 10px)',\n              left: '25%',\n              width: '50%',\n              aspectRatio: '1 / 0.56',\n              cursor: 'pointer',\n              borderRadius: 'normal',\n              flexDirection: 'column',\n              '&: hover': {\n                zIndex: [1000, 1000, 1000, '1000 !important'],\n              },\n            }}\n          >\n            <Flex\n              sx={{\n                display: showNFTImg ? 'none' : 'flex',\n                position: 'absolute',\n                zIndex: 121,\n                width: '100%',\n                height: '100%',\n                opacity: 0,\n                alignItems: 'center',\n                justifyContent: 'center',\n                fontWeight: 700,\n                borderRadius: 'normal',\n                '&: hover': {\n                  zIndex: 1000,\n                  opacity: 0.8,\n                  background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',\n                  backdropFilter: ' blur(2px)',\n                },\n              }}\n            >\n              View NFT {'>'}\n            </Flex>\n            {showNFTImg && (\n              <Flex\n                sx={{\n                  position: 'absolute',\n                  top: '5px',\n                  right: '5px',\n                  background: 'grey',\n                  opacity: 0.9,\n                  p: '2px',\n                  borderRadius: '50%',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Flex sx={{ width: '6px' }}>\n                  <Close />\n                </Flex>\n              </Flex>\n            )}\n            <ProgressiveImage src={`${bondNFTData?.image}`} blurSrc={`https://ape.bond/images/bills/bluredNFT.png`} />\n            {showNFTImg && (\n              <Flex\n                sx={{\n                  position: 'absolute',\n                  bottom: ['calc(-35% + 1px)', 'calc(-35% + 1px)', 'calc(-26% + 1px)'],\n                  width: '100%',\n                  justifyContent: 'center',\n                }}\n              >\n                <Flex\n                  sx={{\n                    flexDirection: 'column',\n                    width: '100%',\n                    minWidth: '250px',\n                    pb: '10px',\n                    alignItems: 'center',\n                    transform: [\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.5) translateY(-50%)',\n                      'scale(0.4) translateY(-75%)',\n                    ],\n                  }}\n                >\n                  <Flex\n                    sx={{\n                      justifyContent: 'space-between',\n                      height: '24px',\n                      backgroundColor: 'white3',\n                      px: '15px',\n                      width: '100%',\n                      borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,\n                    }}\n                    onClick={(event: React.MouseEvent) => {\n                      event.stopPropagation()\n                      setIsOpenTraits(!isOpenTraits)\n                    }}\n                  >\n                    <Flex sx={{ gap: '10px', alignItems: 'center' }}>\n                      <Tag direction=\"down\" />\n                      <Text sx={{ fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }}>Traits</Text>\n                    </Flex>\n                    <Caret direction={isOpenTraits ? 'up' : 'down'} />\n                  </Flex>\n                  <AnimatePresence>\n                    {isOpenTraits && (\n                      <motion.div\n                        initial={{ height: 0 }}\n                        animate={{ height: 'fit-content' }}\n                        transition={{ opacity: { duration: 0.2 } }}\n                        exit={{ height: 0 }}\n                        sx={{\n                          overflow: 'hidden',\n                          width: '100%',\n                          position: 'absolute',\n                          top: '24px',\n                          borderRadius: '0 0 10px 10px',\n                        }}\n                        onClick={(event: React.MouseEvent) => {\n                          event.stopPropagation()\n                          setIsOpenTraits(!isOpenTraits)\n                        }}\n                      >\n                        <Flex sx={{ flexDirection: 'column' }}>\n                          {attributes\n                            ? attributes.map((a, index) => (\n                                <Flex\n                                  key={`${a.value}-${index}`}\n                                  sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n                                >\n                                  <Text sx={{ fontSize: '10px', fontWeight: 500, mr: '3px' }}>{a?.trait_type} -</Text>\n                                  <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{a?.value}</Text>\n                                </Flex>\n                              ))\n                            : BILL_ATTRIBUTES.map((attrib, index) => {\n                                return (\n                                  <Flex\n                                    key={`${attrib}-${index}`}\n                                    sx={{ background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }}\n                                  >\n                                    <Text sx={{ fontSize: '10px', fontWeight: 500 }}>{attrib}</Text>\n                                    <Skeleton width=\"150px\" />\n                                  </Flex>\n                                )\n                              })}\n                        </Flex>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </Flex>\n              </Flex>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </>\n  )\n}\n\nexport default NftImage\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}