@ape.swap/bonds-sdk 5.1.0 → 5.1.1-test.0

package/dist/views/YourBondsModal/components/Actions/ActionsSolana.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsSolana.js","sources":["../../../../../src/views/YourBondsModal/components/Actions/ActionsSolana.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Button } from '../../../../components/uikit-sdk'\nimport { claimable } from '../../../../utils/displayHelpers'\nimport { UserBill } from '../../../../types/yourbonds'\nimport useSOLAccount from '../../../../hooks/accounts/useSOLAccount'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport { Connection, PublicKey, Transaction, TransactionInstruction } from '@solana/web3.js'\nimport { ASSOCIATED_TOKEN_PROGRAM_ID } from '@solana/spl-token'\nimport {\n  CLAIM_DISCRIMINATOR,\n  COMMON_CONST_SEED,\n  COMMON_PDA_PROGRAM,\n  PROGRAM_ID,\n} from '../../../../constants/solanaConstants'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { getRPC } from '../../../../config/constants/networks'\nimport useUserBonds from '../../../../state/bonds/useUserBonds'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { derivePda } from '../../../../utils/derivePda'\nimport { reportError } from '../../../../utils/reportError'\nimport { getAtaWithCreateInstruction, getTokenProgramForMint } from '../../../../utils/solanaAtaHelper'\n\nconst ActionsSolana = ({ userBill }: { userBill?: UserBill }) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const { publicKey: accountSolana, signTransaction } = useSOLAccount()\n  const { refetch } = useUserBonds()\n  const { addToastError, addToastSuccess } = usePopups()\n  const { data: liveBonds } = useBondsData()\n\n  // State\n  const [loadingTx, setLoadingTx] = useState(false)\n\n  // Static Data\n  const similarLiveBond = liveBonds?.find(\n    (bond) =>\n      !bond?.soldOut &&\n      !bond?.hide &&\n      bond?.earnToken?.symbol?.toLowerCase() === userBill?.bond?.earnToken?.symbol?.toLowerCase(),\n  )\n  const canPurchaseAgain = !!similarLiveBond\n  const connection = new Connection(getRPC(ChainId.SOL), 'confirmed')\n  const vestingCliff = userBill?.bond?.vestingCliff\n  const currentTime = Math.round(new Date().getTime() / 1000)\n  const purchaseTimestamp = parseInt(userBill?.vestingStartTimestamp ?? '0')\n  const isPendingCliff = vestingCliff ? currentTime - purchaseTimestamp < vestingCliff : false\n  const cliffCountdown = getTimePeriods(purchaseTimestamp + (vestingCliff ?? 0) - currentTime, true)\n\n  const handleClaim = async () => {\n    // Early return guard - prevent double execution\n    if (loadingTx || !accountSolana || !userBill) return\n\n    try {\n      setLoadingTx(true)\n      const earnTokenAddress = userBill?.bond?.earnToken?.address?.[userBill?.bond?.chainId]\n      const contractAddress = userBill?.bond?.contractAddress?.[userBill?.bond?.chainId]\n\n      if (!earnTokenAddress || !userBill.asset || !contractAddress) return\n\n      const payoutMint = new PublicKey(earnTokenAddress)\n      const bondIssuancePda = new PublicKey(contractAddress)\n      const bondPricingPda = derivePda('bond_pricing', bondIssuancePda, PROGRAM_ID)\n      const nftMint = new PublicKey(userBill.asset)\n\n      // Detect token program for payout mint (supports Token-2022)\n      const payoutTokenProgram = await getTokenProgramForMint(connection, payoutMint)\n\n      const [bondTermPda] = PublicKey.findProgramAddressSync(\n        [new TextEncoder().encode('bond_term'), bondIssuancePda.toBuffer()],\n        PROGRAM_ID,\n      )\n\n      const [bondPda] = PublicKey.findProgramAddressSync(\n        [new TextEncoder().encode('bond'), bondIssuancePda.toBuffer(), nftMint.toBuffer()],\n        PROGRAM_ID,\n      )\n\n      // Get user payout ATA and creation instruction if needed\n      const { address: userPayoutAta, createInstruction: createAtaIx } = await getAtaWithCreateInstruction(\n        connection,\n        payoutMint,\n        accountSolana,\n      )\n\n      // treasury_ata = PDA\n      const [treasuryAta] = PublicKey.findProgramAddressSync(\n        [bondIssuancePda.toBuffer(), COMMON_CONST_SEED, payoutMint.toBuffer()],\n        COMMON_PDA_PROGRAM,\n      )\n\n      // Build keys list\n      const keys = [\n        { pubkey: bondPda as PublicKey, isSigner: false, isWritable: true },\n        { pubkey: bondTermPda as PublicKey, isSigner: false, isWritable: false },\n        { pubkey: bondIssuancePda as PublicKey, isSigner: false, isWritable: false },\n        { pubkey: bondPricingPda as PublicKey, isSigner: false, isWritable: true },\n        { pubkey: accountSolana as PublicKey, isSigner: true, isWritable: true }, // user\n        { pubkey: nftMint as PublicKey, isSigner: false, isWritable: true },\n        { pubkey: userPayoutAta as PublicKey, isSigner: false, isWritable: true },\n        { pubkey: treasuryAta, isSigner: false, isWritable: true },\n        { pubkey: payoutMint, isSigner: false, isWritable: false }, // payout_mint\n        { pubkey: payoutTokenProgram, isSigner: false, isWritable: false }, // token_program (dynamic)\n        { pubkey: ASSOCIATED_TOKEN_PROGRAM_ID, isSigner: false, isWritable: false },\n        { pubkey: new PublicKey('CoREENxT6tW1HoK8ypY1SxRMZTcVPm7R94rH4PZNhX7d'), isSigner: false, isWritable: false }, // mplCoreProgram\n        { pubkey: PROGRAM_ID, isSigner: false, isWritable: false }, // passing programId is the same as passing null\n      ]\n\n      // Build Claim Instruction (no args → just discriminator)\n      const claimInstruction = new TransactionInstruction({\n        keys,\n        programId: PROGRAM_ID,\n        data: CLAIM_DISCRIMINATOR,\n      })\n\n      // Build Transaction - include ATA creation if needed\n      const transaction = new Transaction()\n      if (createAtaIx) transaction.add(createAtaIx)\n      transaction.add(claimInstruction)\n      transaction.feePayer = accountSolana\n\n      // Get fresh blockhash right before signing\n      const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('finalized')\n      transaction.recentBlockhash = blockhash\n\n      if (!signTransaction) return\n      const signedTx = await signTransaction(transaction)\n\n      // Send with better error handling\n      const txHash = await connection.sendRawTransaction(signedTx.serialize(), {\n        skipPreflight: false,\n        preflightCommitment: 'finalized',\n        maxRetries: 0, // Don't auto-retry to avoid duplicates\n      })\n\n      await connection.confirmTransaction(\n        {\n          signature: txHash,\n          blockhash,\n          lastValidBlockHeight,\n        },\n        'confirmed',\n      )\n\n      const txStatus = await connection.getSignatureStatus(txHash, { searchTransactionHistory: true })\n      if (txStatus?.value?.confirmationStatus === 'confirmed' || txStatus?.value?.confirmationStatus === 'finalized') {\n        console.log('Tx confirmed on-chain, refetching bonds')\n        refetch()\n        addToastSuccess(txHash, ChainId.SOL)\n      }\n    } catch (error: any) {\n      console.error('Claim failed:', error)\n\n      // Better error messaging for duplicate transactions\n      if (error?.message?.includes('already been processed')) {\n        addToastError('Transaction already processed. Please wait and try again.')\n      } else {\n        addToastError(error?.message ?? 'Unknown error')\n      }\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        account: accountSolana?.toBase58(),\n        chainId: ChainId.SOL,\n        extraInfo: { type: 'claim', userBill, error },\n      })\n    } finally {\n      setLoadingTx(false)\n    }\n  }\n\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        disabled={claimable(userBill) === 0 || loadingTx || !userBill || isPendingCliff}\n        load={loadingTx}\n        onClick={(event) => {\n          event.stopPropagation()\n          if (!loadingTx) handleClaim()\n        }}\n        sx={{ fontSize: '14px', width: '100%' }}\n      >\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      <Button\n        sx={{ fontSize: '14px', width: '100%' }}\n        onClick={() =>\n          canPurchaseAgain\n            ? (window.location.href = `https://ape.bond/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`)\n            : null\n        }\n        disabled={!canPurchaseAgain}\n      >\n        {canPurchaseAgain ? 'Buy again' : 'sold out'}\n      </Button>\n    </>\n  )\n}\n\nexport default ActionsSolana\n"],"names":["ChainId","_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import '../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../components/uikit-sdk/Text/types.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import '../../../../components/uikit-sdk/Button/styles.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import '../../../../utils/campaignStyles.js';
+import { useURLByEnvironment } from '../../../../state/useSDKConfig.js';
+import { generateImageFromTemplate } from './utils.js';
+import track from '../../../../utils/track.js';
+import '../../../../node_modules/@ape.swap/apeswap-lists/lib/main.js';
+import { __exports as main } from '../../../../_virtual/main.js';
+import { jsxs, jsx } from '../../../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js';
+import { Spinner } from '../../../../node_modules/@theme-ui/components/dist/theme-ui-components.esm.js';
+
+const LinkShare = ({ userBill }) => {
+    var _a, _b, _c, _d, _e, _f;
+    // State
+    const [isLoading, setIsLoading] = useState([false, false]);
+    // Static data
+    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
+    const chainId = (_a = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _a === void 0 ? void 0 : _a.chainId;
+    // Hooks
+    const mainUrl = useURLByEnvironment('mainUrl');
+    const apiUrl = (_b = useURLByEnvironment('apiV2')) !== null && _b !== void 0 ? _b : '';
+    const bondAddress = ((_c = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _c === void 0 ? void 0 : _c.chainId) === main.ChainId.SOL ? bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.contractAddress : (_d = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _d === void 0 ? void 0 : _d.billNftAddress;
+    const shareUrl = `${mainUrl}/bond-nft?bondAddress=${bondAddress}%26bondChain=${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}%26tokenId=${userBill === null || userBill === void 0 ? void 0 : userBill.id}%26af=${(_e = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _e === void 0 ? void 0 : _e.createdAddressOwner}`;
+    const text = `I've filled my bags with $${(_f = userBill === null || userBill === void 0 ? void 0 : userBill.bond) === null || _f === void 0 ? void 0 : _f.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `;
+    const handleShare = async (url, social) => {
+        var _a;
+        if (isLoading[0] || isLoading[1]) {
+            console.log('something is off');
+            return;
+        }
+        track({
+            event: 'referral',
+            chain: chainId,
+            data: {
+                cat: `${social.toUpperCase()} Share Bond`,
+                bond: (_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.symbol,
+            },
+        });
+        setIsLoading([true, false] );
+        await generateImageFromTemplate(bondNFTData, url, apiUrl);
+        setIsLoading([false, false]);
+    };
+    return (jsxs(Flex, { sx: {
+            background: ['white3', 'white3', 'white3', 'white4'],
+            borderRadius: 'normal',
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: '2px 10px 2px 5px',
+            fontWeight: 600,
+            fontSize: '12px',
+            height: '22px',
+            cursor: 'pointer',
+            '&:hover': {
+                background: 'white5',
+            },
+        }, onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx(Flex, { children: isLoading[0] ? jsx(Spinner, { size: 16 }) : jsx(Svg, { icon: "twitter", width: 20 }) }), jsx(Flex, { children: "SHARE" })] }));
+};
+
+export { LinkShare as default };
+//# sourceMappingURL=LinkShare.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/LinkShare.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { Spinner } from 'theme-ui'\nimport { Flex, Svg } from '../../../../components/uikit-sdk'\nimport { useURLByEnvironment } from '../../../../state/useSDKConfig'\nimport { UserBill, UserBillNftData } from '../../../../types/yourbonds'\nimport { generateImageFromTemplate } from './utils'\nimport track from '../../../../utils/track'\nimport { ChainId } from '@ape.swap/apeswap-lists'\n\nconst LinkShare = ({ userBill }: { userBill: UserBill | undefined }) => {\n  // State\n  const [isLoading, setIsLoading] = useState<boolean[]>([false, false])\n\n  // Static data\n  const bondNFTData: UserBillNftData | undefined = userBill?.nftData\n  const chainId = userBill?.bond?.chainId\n  // Hooks\n  const mainUrl = useURLByEnvironment('mainUrl')\n  const apiUrl = useURLByEnvironment('apiV2') ?? ''\n  const bondAddress =\n    userBill?.bond?.chainId === ChainId.SOL ? bondNFTData?.contractAddress : bondNFTData?.data?.billNftAddress\n  const shareUrl = `${mainUrl}/bond-nft?bondAddress=${bondAddress}%26bondChain=${bondNFTData?.chainId}%26tokenId=${userBill?.id}%26af=${bondNFTData?.data?.createdAddressOwner}`\n  const text = `I've filled my bags with $${userBill?.bond?.earnToken.symbol} at a discount, thanks to Bonds-only on @apebond! Check it out: `\n  const handleShare = async (url: string, social: string) => {\n    if (isLoading[0] || isLoading[1]) {\n      console.log('something is off')\n      return\n    }\n    track({\n      event: 'referral',\n      chain: chainId,\n      data: {\n        cat: `${social.toUpperCase()} Share Bond`,\n        bond: bondNFTData?.data?.payoutTokenData.symbol,\n      },\n    })\n    setIsLoading(social === 'x' ? [true, false] : [false, true])\n    await generateImageFromTemplate(bondNFTData, url, apiUrl)\n    setIsLoading([false, false])\n  }\n\n  return (\n    <Flex\n      sx={{\n        background: ['white3', 'white3', 'white3', 'white4'],\n        borderRadius: 'normal',\n        justifyContent: 'center',\n        alignItems: 'center',\n        p: '2px 10px 2px 5px',\n        fontWeight: 600,\n        fontSize: '12px',\n        height: '22px',\n        cursor: 'pointer',\n        '&:hover': {\n          background: 'white5',\n        },\n      }}\n      onClick={() => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x')}\n    >\n      <Flex>{isLoading[0] ? <Spinner size={16} /> : <Svg icon=\"twitter\" width={20} />}</Flex>\n      <Flex>SHARE</Flex>\n    </Flex>\n  )\n}\n\nexport default LinkShare\n"],"names":["ChainId","_jsxs","_jsx"],"mappings":"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"}

package/dist/views/YourBondsModal/components/LinkShare/templateImageShare.js

@@ -0,0 +1,94 @@
+import { APEBOND } from '../../../../config/constants/variables.js';
+import { formatNumberSI, localeFormat } from '../../../../utils/formatNumber.js';
+
+function getTemplateHTML(data) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    //@ts-ignore
+    const isProfit = +((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payout) * +((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.payoutTokenPrice) - ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.dollarValue) > 0;
+    const getTokenImage = (symbol) => {
+        return `${APEBOND}/assets/${symbol.toUpperCase()}.png`;
+    };
+    const getPrincipalToken = () => {
+        var _a, _b, _c, _d;
+        if (((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.payoutTokenData.address.toLowerCase()) !== ((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.token0.address.toLowerCase()))
+            return (_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.token0.symbol;
+        return (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.token1.symbol;
+    };
+    const getCalculateOff = () => {
+        if (!data || !data.data)
+            return 0;
+        return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100;
+    };
+    const getCalculatePriceDiscount = () => {
+        if (!data || !data.data)
+            return 0;
+        return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100;
+    };
+    return `
+  <div id="template-card" class="sharebondimage-card">
+    <img src="/images/bills/title.png" alt="title" style="width: 169px; height: 52px;" />
+    <div class="sharebondimage-nft">
+      <div style="position: relative">
+        <div class="sharebondimage-nft-id">
+          <span>#${data.tokenId}</span>
+        </div>
+        <img src="${data.image}" alt="bill-nft" />
+      </div>
+    </div>
+    <div class="sharebondimage-container-info">
+      <div class="sharebondimage-container-discount">
+        <img src="${getTokenImage((_e = (_d = data === null || data === void 0 ? void 0 : data.data) === null || _d === void 0 ? void 0 : _d.payoutTokenData) === null || _e === void 0 ? void 0 : _e.symbol)}" alt="payout-token-symbol" style="width: 59px; height: 59px;" />
+        <div class="sharebondimage-container-discount-price">
+          <div class="sharebondimage-container-discount-token">
+            <span>${(_f = data.data) === null || _f === void 0 ? void 0 : _f.payoutTokenData.symbol}</span>
+            <span style="text-decoration: line-through">
+              $${formatNumberSI(+((_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.payoutTokenPrice))}
+            </span>
+          </div>
+          <span class="sharebondimage-container-discount-price-discount">
+            $${formatNumberSI(getCalculatePriceDiscount())}
+          </span>
+        </div>
+        <div class="sharebondimage-container-off">
+          <span>
+            ${localeFormat(getCalculateOff())}% OFF
+          </span>
+        </div>
+      </div>
+      <div class="sharebondimage-container-tokens">
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage((_h = getPrincipalToken()) !== null && _h !== void 0 ? _h : '')}" alt="principal-symbol" />
+          <div class="sharebondimage-amount-deposit">
+            ${formatNumberSI((_j = data === null || data === void 0 ? void 0 : data.data) === null || _j === void 0 ? void 0 : _j.deposit)}
+          </div>
+          <div class="sharebondimage-dollarvalue">
+            $${localeFormat((_k = data === null || data === void 0 ? void 0 : data.data) === null || _k === void 0 ? void 0 : _k.dollarValue)}
+          </div>
+        </div>
+        <div class="sharebondimage-container-token">
+          <img src="${getTokenImage((_m = (_l = data === null || data === void 0 ? void 0 : data.data) === null || _l === void 0 ? void 0 : _l.payoutTokenData) === null || _m === void 0 ? void 0 : _m.symbol)}" alt="payout-token2-symbol" />
+          <div class="sharebondimage-container-earntoken">
+            <div class="sharebondimage-amount-earntoken">
+              <div class="sharebondimage-amount-payout">
+                ${localeFormat((_o = data === null || data === void 0 ? void 0 : data.data) === null || _o === void 0 ? void 0 : _o.payout)}
+              </div>
+              <div class="sharebondimage-amount-dollarvalue">
+                $${localeFormat(((_p = data === null || data === void 0 ? void 0 : data.data) === null || _p === void 0 ? void 0 : _p.payout) * +((_q = data === null || data === void 0 ? void 0 : data.data) === null || _q === void 0 ? void 0 : _q.payoutTokenPrice))}
+              </div>
+            </div>
+            <div class="sharebondimage-profit" style="${!isProfit ? 'display: none' : ''}">
+              <span>
+                +${localeFormat(((_r = data === null || data === void 0 ? void 0 : data.data) === null || _r === void 0 ? void 0 : _r.payout) * +((_s = data === null || data === void 0 ? void 0 : data.data) === null || _s === void 0 ? void 0 : _s.payoutTokenPrice) - ((_t = data === null || data === void 0 ? void 0 : data.data) === null || _t === void 0 ? void 0 : _t.dollarValue))}
+                profit!
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+}
+
+export { getTemplateHTML };
+//# sourceMappingURL=templateImageShare.js.map

package/dist/views/YourBondsModal/components/LinkShare/templateImageShare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateImageShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/templateImageShare.ts"],"sourcesContent":["import { APEBOND } from '../../../../config/constants/variables'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport function getTemplateHTML(data: UserBillNftData) {\n  //@ts-ignore\n  const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\n  const getTokenImage = (symbol: string) => {\n    return `${APEBOND}/assets/${symbol.toUpperCase()}.png`\n  }\n  const getPrincipalToken = () => {\n    if (data?.data?.payoutTokenData.address.toLowerCase() !== data?.data?.token0.address.toLowerCase())\n      return data?.data?.token0.symbol\n    return data?.data?.token1.symbol\n  }\n  const getCalculateOff = () => {\n    if (!data || !data.data) return 0\n    return 100 - (data.data.dollarValue / (data.data.payout * +data.data.payoutTokenPrice)) * 100\n  }\n  const getCalculatePriceDiscount = () => {\n    if (!data || !data.data) return 0\n    return +data.data.payoutTokenPrice - (+data.data.payoutTokenPrice * getCalculateOff()) / 100\n  }\n  return `\n  <div id=\"template-card\" class=\"sharebondimage-card\">\n    <img src=\"/images/bills/title.png\" alt=\"title\" style=\"width: 169px; height: 52px;\" />\n    <div class=\"sharebondimage-nft\">\n      <div style=\"position: relative\">\n        <div class=\"sharebondimage-nft-id\">\n          <span>#${data.tokenId}</span>\n        </div>\n        <img src=\"${data.image}\" alt=\"bill-nft\" />\n      </div>\n    </div>\n    <div class=\"sharebondimage-container-info\">\n      <div class=\"sharebondimage-container-discount\">\n        <img src=\"${getTokenImage(data?.data?.payoutTokenData?.symbol!)}\" alt=\"payout-token-symbol\" style=\"width: 59px; height: 59px;\" />\n        <div class=\"sharebondimage-container-discount-price\">\n          <div class=\"sharebondimage-container-discount-token\">\n            <span>${data.data?.payoutTokenData.symbol}</span>\n            <span style=\"text-decoration: line-through\">\n              $${formatNumberSI(+data?.data?.payoutTokenPrice!)}\n            </span>\n          </div>\n          <span class=\"sharebondimage-container-discount-price-discount\">\n            $${formatNumberSI(getCalculatePriceDiscount())}\n          </span>\n        </div>\n        <div class=\"sharebondimage-container-off\">\n          <span>\n            ${localeFormat(getCalculateOff())}% OFF\n          </span>\n        </div>\n      </div>\n      <div class=\"sharebondimage-container-tokens\">\n        <div class=\"sharebondimage-container-token\">\n          <img src=\"${getTokenImage(getPrincipalToken() ?? '')}\" alt=\"principal-symbol\" />\n          <div class=\"sharebondimage-amount-deposit\">\n            ${formatNumberSI(data?.data?.deposit)}\n          </div>\n          <div class=\"sharebondimage-dollarvalue\">\n            $${localeFormat(data?.data?.dollarValue!)}\n          </div>\n        </div>\n        <div class=\"sharebondimage-container-token\">\n          <img src=\"${getTokenImage(data?.data?.payoutTokenData?.symbol!)}\" alt=\"payout-token2-symbol\" />\n          <div class=\"sharebondimage-container-earntoken\">\n            <div class=\"sharebondimage-amount-earntoken\">\n              <div class=\"sharebondimage-amount-payout\">\n                ${localeFormat(data?.data?.payout!)}\n              </div>\n              <div class=\"sharebondimage-amount-dollarvalue\">\n                $${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice!)}\n              </div>\n            </div>\n            <div class=\"sharebondimage-profit\" style=\"${!isProfit ? 'display: none' : ''}\">\n              <span>\n                +${localeFormat(data?.data?.payout! * +data?.data?.payoutTokenPrice! - data?.data?.dollarValue!)}\n                profit!\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  `\n}\n"],"names":[],"mappings":"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"}

package/dist/views/YourBondsModal/components/LinkShare/utils.js

@@ -0,0 +1,57 @@
+import domtoimage from '../../../../node_modules/dom-to-image/src/dom-to-image.js';
+import axios from 'axios';
+import { getTemplateHTML } from './templateImageShare.js';
+
+async function generateImageFromTemplate(bondNFTData, link, apiUrl) {
+    var _a;
+    if (bondNFTData && bondNFTData.data) {
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.top = '-9999px';
+        container.innerHTML = getTemplateHTML(bondNFTData);
+        document.body.appendChild(container);
+        const templateElement = container.querySelector('#template-card');
+        if (!templateElement)
+            return;
+        const fileName = `bond_share_${(_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.data.billNftAddress) === null || _a === void 0 ? void 0 : _a.toLowerCase()}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.chainId}_${bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.tokenId}`;
+        const existingImage = await checkImageExists(fileName);
+        if (existingImage) {
+            share(link);
+        }
+        else {
+            try {
+                const dataImage = await domtoimage.toJpeg(templateElement, { quality: 0.85 });
+                const response = await fetch(dataImage);
+                const blob = await response.blob();
+                const formData = new FormData();
+                formData.append('file', blob, fileName);
+                await axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {
+                    headers: { 'Content-Type': 'multipart/form-data' },
+                });
+            }
+            catch (error) {
+                console.error('Error upload file to cloudinary', error);
+            }
+            share(link);
+        }
+    }
+}
+function share(link) {
+    const linkElement = document.createElement('a');
+    linkElement.href = link;
+    linkElement.target = '_blank';
+    linkElement.click();
+}
+async function checkImageExists(fileName) {
+    let existImg = true;
+    try {
+        await axios.get(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`);
+    }
+    catch (_a) {
+        existImg = false;
+    }
+    return existImg;
+}
+
+export { generateImageFromTemplate };
+//# sourceMappingURL=utils.js.map

package/dist/views/YourBondsModal/components/LinkShare/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/utils.ts"],"sourcesContent":["import domtoimage from 'dom-to-image'\nimport axios from 'axios'\nimport { UserBillNftData } from '../../../../types/yourbonds'\nimport { getTemplateHTML } from './templateImageShare'\n\nexport async function generateImageFromTemplate(\n  bondNFTData: UserBillNftData | undefined,\n  link: string,\n  apiUrl: string,\n) {\n  if (bondNFTData && bondNFTData.data) {\n    const container = document.createElement('div')\n    container.style.position = 'absolute'\n    container.style.top = '-9999px'\n    container.innerHTML = getTemplateHTML(bondNFTData)\n\n    document.body.appendChild(container)\n\n    const templateElement = container.querySelector('#template-card')\n\n    if (!templateElement) return\n    const fileName = `bond_share_${bondNFTData?.data.billNftAddress?.toLowerCase()}_${bondNFTData?.chainId}_${bondNFTData?.tokenId}`\n    const existingImage = await checkImageExists(fileName)\n    if (existingImage) {\n      share(link)\n    } else {\n      try {\n        const dataImage = await domtoimage.toJpeg(templateElement, { quality: 0.85 })\n        const response = await fetch(dataImage)\n        const blob = await response.blob()\n        const formData = new FormData()\n        formData.append('file', blob, fileName)\n        await axios.post(`${apiUrl}/cloudinary/uploadFile`, formData, {\n          headers: { 'Content-Type': 'multipart/form-data' },\n        })\n      } catch (error) {\n        console.error('Error upload file to cloudinary', error)\n      }\n      share(link)\n    }\n  }\n}\n\nfunction share(link: string) {\n  const linkElement = document.createElement('a')\n  linkElement.href = link\n  linkElement.target = '_blank'\n  linkElement.click()\n}\n\nasync function checkImageExists(fileName: string) {\n  let existImg = true\n  try {\n    await axios.get(`https://res.cloudinary.com/dswmrqgwy/image/upload/v1/bond_share/${fileName}.jpg`)\n  } catch {\n    existImg = false\n  }\n\n  return existImg\n}\n"],"names":[],"mappings":";;;;AAKO,eAAe,yBAAyB,CAC7C,WAAwC,EACxC,IAAY,EACZ,MAAc,EAAA;;AAEd,IAAA,IAAI,WAAW,IAAI,WAAW,CAAC,IAAI,EAAE;QACnC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,QAAA,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;AACrC,QAAA,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,SAAS;AAC/B,QAAA,SAAS,CAAC,SAAS,GAAG,eAAe,CAAC,WAAW,CAAC;AAElD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;QAEpC,MAAM,eAAe,GAAG,SAAS,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAEjE,QAAA,IAAI,CAAC,eAAe;YAAE;AACtB,QAAA,MAAM,QAAQ,GAAG,CAAA,WAAA,EAAc,CAAA,EAAA,GAAA,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,IAAI,CAAC,cAAc,0CAAE,WAAW,EAAE,CAAA,CAAA,EAAI,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,OAAO,CAAA,CAAA,EAAI,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,OAAO,EAAE;AAChI,QAAA,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC,QAAQ,CAAC;QACtD,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CAAC;QACb;aAAO;AACL,YAAA,IAAI;AACF,gBAAA,MAAM,SAAS,GAAG,MAAM,UAAU,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7E,gBAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC;AACvC,gBAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAClC,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE;gBAC/B,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC;gBACvC,MAAM,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA,sBAAA,CAAwB,EAAE,QAAQ,EAAE;AAC5D,oBAAA,OAAO,EAAE,EAAE,cAAc,EAAE,qBAAqB,EAAE;AACnD,iBAAA,CAAC;YACJ;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,iCAAiC,EAAE,KAAK,CAAC;YACzD;YACA,KAAK,CAAC,IAAI,CAAC;QACb;IACF;AACF;AAEA,SAAS,KAAK,CAAC,IAAY,EAAA;IACzB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC;AAC/C,IAAA,WAAW,CAAC,IAAI,GAAG,IAAI;AACvB,IAAA,WAAW,CAAC,MAAM,GAAG,QAAQ;IAC7B,WAAW,CAAC,KAAK,EAAE;AACrB;AAEA,eAAe,gBAAgB,CAAC,QAAgB,EAAA;IAC9C,IAAI,QAAQ,GAAG,IAAI;AACnB,IAAA,IAAI;QACF,MAAM,KAAK,CAAC,GAAG,CAAC,mEAAmE,QAAQ,CAAA,IAAA,CAAM,CAAC;IACpG;AAAE,IAAA,OAAA,EAAA,EAAM;QACN,QAAQ,GAAG,KAAK;IAClB;AAEA,IAAA,OAAO,QAAQ;AACjB;;;;"}

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

@@ -0,0 +1,153 @@
+import { useState, Fragment } from 'react';
+import Svg from '../../../../components/uikit-sdk/Svg/index.js';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import Text from '../../../../components/uikit-sdk/Text/index.js';
+import '../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import '../../../../components/uikit-sdk/Button/styles.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import '../../../../utils/campaignStyles.js';
+import LinkShare from '../LinkShare/LinkShare.js';
+import { useIsMobile } from '../../../../hooks/useIsMobile.js';
+import ProgressiveImage from '../../../../components/ProgressiveImage/index.js';
+import { useAnimation } from '../../../../node_modules/framer-motion/dist/es/animation/hooks/use-animation.js';
+import { jsxs, jsx } from '../../../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js';
+import { motion } from '../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { AnimatePresence } from '../../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
+    var _a;
+    // Hooks
+    const controls = useAnimation();
+    const isMobile = useIsMobile();
+    // State
+    const [isOpenTraits, setIsOpenTraits] = useState(false);
+    //Static Data
+    const bondNFTData = userBill === null || userBill === void 0 ? void 0 : userBill.nftData;
+    const BILL_ATTRIBUTES = ['The Legend', 'The Location', 'The Moment', 'The Trend', 'The Innovation'];
+    const attributes = (_a = bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.attributes) === null || _a === void 0 ? void 0 : _a.filter((attrib) => BILL_ATTRIBUTES.includes(attrib.trait_type));
+    const openAnimation = () => {
+        controls.start({
+            scale: isMobile ? [1, 2] : [1, 3],
+            zIndex: 1000,
+            transition: { duration: 0.2 },
+        });
+    };
+    const closeAnimation = () => {
+        controls.start({
+            scale: isMobile ? [2, 1] : [2, 1],
+            zIndex: -1,
+            transition: { duration: 0.3 },
+        });
+        setShowNFTImg(false);
+        setIsOpenTraits(false);
+    };
+    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: showNFTImg && (jsx(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, sx: {
+                        position: 'absolute',
+                        display: ['flex'],
+                        top: ['-180px', '-180px', '-240px'],
+                        right: ['50%', '50%', '50%', '-13%'],
+                        transform: ['translateX(50%)', 'translateX(50%)', 'translateX(50%)', 'unset'],
+                        opacity: 0,
+                        zIndex: 5000,
+                    }, children: jsx(LinkShare, { userBill: userBill }) })) }), jsx(AnimatePresence, { children: (bondNFTData === null || bondNFTData === void 0 ? void 0 : bondNFTData.image) && (jsxs(motion.div, { animate: controls, onClick: () => {
+                        if (showNFTImg) {
+                            closeAnimation();
+                        }
+                        else {
+                            openAnimation();
+                        }
+                    }, onAnimationStart: () => {
+                        setShowNFTImg(true);
+                    }, sx: {
+                        display: 'flex',
+                        zIndex: -1,
+                        position: showNFTImg ? 'fixed' : 'absolute',
+                        bottom: 'calc(100% - 10px)',
+                        left: '25%',
+                        width: '50%',
+                        aspectRatio: '1 / 0.56',
+                        cursor: 'pointer',
+                        borderRadius: 'normal',
+                        flexDirection: 'column',
+                        '&: hover': {
+                            zIndex: [1000, 1000, 1000, '1000 !important'],
+                        },
+                    }, children: [jsxs(Flex, { sx: {
+                                display: showNFTImg ? 'none' : 'flex',
+                                position: 'absolute',
+                                zIndex: 121,
+                                width: '100%',
+                                height: '100%',
+                                opacity: 0,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontWeight: 700,
+                                borderRadius: 'normal',
+                                '&: hover': {
+                                    zIndex: 1000,
+                                    opacity: 0.8,
+                                    background: 'linear-gradient(90deg, rgba(49, 46, 122, 0.70) 0%, rgba(92, 79, 174, 0.70) 100%)',
+                                    backdropFilter: ' blur(2px)',
+                                },
+                            }, children: ["View NFT ", '>'] }), showNFTImg && (jsx(Flex, { sx: {
+                                position: 'absolute',
+                                top: '5px',
+                                right: '5px',
+                                background: 'grey',
+                                opacity: 0.9,
+                                p: '2px',
+                                borderRadius: '50%',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: jsx(Flex, { sx: { width: '6px' }, children: jsx(Svg, { icon: "close" }) }) })), jsx(ProgressiveImage, { src: `${bondNFTData === null || bondNFTData === void 0 ? void 0 : 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%',
+                                justifyContent: 'center',
+                            }, children: jsxs(Flex, { sx: {
+                                    flexDirection: 'column',
+                                    width: '100%',
+                                    minWidth: '250px',
+                                    pb: '10px',
+                                    alignItems: 'center',
+                                    transform: [
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.5) translateY(-50%)',
+                                        'scale(0.4) translateY(-75%)',
+                                    ],
+                                }, children: [jsxs(Flex, { sx: {
+                                            justifyContent: 'space-between',
+                                            height: '24px',
+                                            backgroundColor: 'white3',
+                                            px: '15px',
+                                            width: '100%',
+                                            borderRadius: `${isOpenTraits ? '6px 6px 0px 0px' : 'normal'}`,
+                                        }, onClick: (event) => {
+                                            event.stopPropagation();
+                                            setIsOpenTraits(!isOpenTraits);
+                                        }, children: [jsxs(Flex, { sx: { gap: '10px', alignItems: 'center' }, children: [jsx(Svg, { icon: "tag", direction: "down" }), jsx(Text, { sx: { fontSize: '12px', fontWeight: 400, color: 'text', opacity: '0.6' }, children: "Traits" })] }), jsx(Svg, { icon: "caret", direction: isOpenTraits ? 'up' : 'down' })] }), jsx(AnimatePresence, { children: isOpenTraits && (jsx(motion.div, { initial: { height: 0 }, animate: { height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { height: 0 }, sx: {
+                                                overflow: 'hidden',
+                                                width: '100%',
+                                                position: 'absolute',
+                                                top: '24px',
+                                                borderRadius: '0 0 10px 10px',
+                                            }, onClick: (event) => {
+                                                event.stopPropagation();
+                                                setIsOpenTraits(!isOpenTraits);
+                                            }, children: jsx(Flex, { sx: { flexDirection: 'column' }, children: attributes
+                                                    ? attributes.map((a, index) => (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsxs(Text, { sx: { fontSize: '10px', fontWeight: 500, mr: '3px' }, children: [a === null || a === void 0 ? void 0 : a.trait_type, " -"] }), jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a === null || a === void 0 ? void 0 : a.value })] }, `${a.value}-${index}`)))
+                                                    : BILL_ATTRIBUTES.map((attrib, index) => {
+                                                        return (jsxs(Flex, { sx: { background: 'white4', width: '100%', padding: '2px 8px', height: '22px' }, children: [jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: attrib }), jsx(Skeleton, { width: "150px" })] }, `${attrib}-${index}`));
+                                                    }) }) })) })] }) }))] })) })] }));
+};
+
+export { NftImage as default };
+//# sourceMappingURL=NFTImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Flex, Skeleton, Svg, Text } from '../../../../components/uikit-sdk'\nimport { AnimatePresence, motion, useAnimation } from 'framer-motion'\nimport LinkShare from '../LinkShare/LinkShare'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport ProgressiveImage from '../../../../components/ProgressiveImage'\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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"}

package/dist/views/YourBondsModal/components/Recommendations/CardRecommendation.js

@@ -0,0 +1,39 @@
+import '../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import Text from '../../../../components/uikit-sdk/Text/index.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import 'react';
+import Button from '../../../../components/uikit-sdk/Button/Button.js';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../components/uikit-sdk/Button/styles.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import '../../../../utils/campaignStyles.js';
+import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
+import { getVestingTermsString } from '../../../../utils/displayHelpers.js';
+import { jsxs, jsx } from '../../../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js';
+
+const CardRecommendation = ({ cardIndex, bond, handleBuyBondClick, }) => {
+    return (jsxs(Flex, { sx: {
+            flexDirection: 'column',
+            width: ['100%', '100%', '100%', '50%'],
+            gap: '10px',
+            background: 'white3',
+            p: '10px',
+            borderRadius: '10px',
+        }, children: [jsx(Flex, { sx: {
+                    flexDirection: 'column',
+                    width: '100%',
+                    borderRadius: '10px',
+                    justifyContent: 'space-between',
+                    gap: '14px',
+                }, children: jsxs(Flex, { sx: { alignItems: 'center', justifyContent: 'space-between', gap: '10px' }, children: [jsxs(Flex, { sx: { gap: '5px', justifyContent: 'center', alignItems: 'center' }, children: [jsx(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx(Text, { sx: { fontSize: '14px' }, children: bond.payoutTokenName }), jsx(Text, { sx: { fontSize: '14px', fontWeight: 400, opacity: 0.6 }, children: getVestingTermsString(bond) })] }), jsx(Flex, { sx: { flexDirection: 'column', gap: '1px', alignItems: 'end' }, children: jsxs(Text, { sx: { color: 'success', fontSize: '12px', fontWeight: 700 }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), sx: { width: '100%', lineHeight: '20px', height: '30px', fontSize: '14px' }, children: "Buy" })] }));
+};
+
+export { CardRecommendation as default };
+//# sourceMappingURL=CardRecommendation.js.map

package/dist/views/YourBondsModal/components/Recommendations/CardRecommendation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardRecommendation.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendation.tsx"],"sourcesContent":["import { Button, Flex, Text } from '../../../../components/uikit-sdk'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondRecommendation } from '../../../../state/recommendations/useGetBondRecommendations'\nimport { getVestingTermsString } from '../../../../utils/displayHelpers'\n\nconst CardRecommendation = ({\n  cardIndex,\n  bond,\n  handleBuyBondClick,\n}: {\n  cardIndex: number\n  bond: BondRecommendation\n  handleBuyBondClick: (chain: number, bondAddress: string, cardIndex: number) => void\n}) => {\n  return (\n    <Flex\n      sx={{\n        flexDirection: 'column',\n        width: ['100%', '100%', '100%', '50%'],\n        gap: '10px',\n        background: 'white3',\n        p: '10px',\n        borderRadius: '10px',\n      }}\n    >\n      <Flex\n        sx={{\n          flexDirection: 'column',\n          width: '100%',\n          borderRadius: '10px',\n          justifyContent: 'space-between',\n          gap: '14px',\n        }}\n      >\n        <Flex sx={{ alignItems: 'center', justifyContent: 'space-between', gap: '10px' }}>\n          <Flex sx={{ gap: '5px', justifyContent: 'center', alignItems: 'center' }}>\n            <TokenImage symbol={bond.payoutTokenName} chain={bond.chainId} size={25} />\n            <Text sx={{ fontSize: '14px' }}>{bond.payoutTokenName}</Text>\n            <Text sx={{ fontSize: '14px', fontWeight: 400, opacity: 0.6 }}>{getVestingTermsString(bond as any)}</Text>\n          </Flex>\n          <Flex sx={{ flexDirection: 'column', gap: '1px', alignItems: 'end' }}>\n            <Text sx={{ color: 'success', fontSize: '12px', fontWeight: 700 }}>{bond.bonus.toFixed(2)}%</Text>\n          </Flex>\n        </Flex>\n      </Flex>\n      <Button\n        onClick={() => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex)}\n        sx={{ width: '100%', lineHeight: '20px', height: '30px', fontSize: '14px' }}\n      >\n        Buy\n      </Button>\n    </Flex>\n  )\n}\n\nexport default CardRecommendation\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,kBAAkB,GAKnB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,aAAa,EAAE,QAAQ;YACvB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC;AACtC,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,CAAC,EAAE,MAAM;AACT,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,aAAa,EAAE,QAAQ;AACvB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,YAAY,EAAE,MAAM;AACpB,oBAAA,cAAc,EAAE,eAAe;AAC/B,oBAAA,GAAG,EAAE,MAAM;iBACZ,EAAA,QAAA,EAEDD,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAC9EA,KAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACtEC,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,GAAI,EAC3EA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAG,IAAI,CAAC,eAAe,GAAQ,EAC7DA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,qBAAqB,CAAC,IAAW,CAAC,GAAQ,CAAA,EAAA,CACrG,EACPA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,YAClED,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,CAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAA,CAC7F,CAAA,EAAA,CACF,GACF,EACPC,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,MAAM,kBAAkB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC5E,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGpE,CAAA,EAAA,CACJ;AAEX;;;;"}

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.js

@@ -0,0 +1,32 @@
+import '../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import '../../../../components/uikit-sdk/Text/types.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import 'react';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../components/uikit-sdk/Button/styles.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import '../../../../utils/campaignStyles.js';
+import { jsxs, jsx } from '../../../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js';
+
+const RecSkeleton = () => {
+    return (jsxs(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'], height: '84px' }, children: [jsx(Skeleton, { animation: "waves", sx: {
+                    width: '100%',
+                    height: '70px',
+                    borderRadius: 'normal',
+                    mb: '5px',
+                } }), jsx(Skeleton, { animation: "waves", sx: {
+                    width: '100%',
+                    height: '70px',
+                    borderRadius: 'normal',
+                    mb: '5px',
+                } })] }));
+};
+
+export { RecSkeleton as default };
+//# sourceMappingURL=RecSkeleton.js.map

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecSkeleton.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/RecSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex, Skeleton } from '../../../../components/uikit-sdk'\n\nconst RecSkeleton = () => {\n  return (\n    <Flex sx={{ width: '100%', gap: ['10px', '10px', '10px', '15px'], height: '84px' }}>\n      <Skeleton\n        animation=\"waves\"\n        sx={{\n          width: '100%',\n          height: '70px',\n          borderRadius: 'normal',\n          mb: '5px',\n        }}\n      />\n      <Skeleton\n        animation=\"waves\"\n        sx={{\n          width: '100%',\n          height: '70px',\n          borderRadius: 'normal',\n          mb: '5px',\n        }}\n      />\n    </Flex>\n  )\n}\n\nexport default RecSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAGA,MAAM,WAAW,GAAG,MAAK;AACvB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAChFC,GAAA,CAAC,QAAQ,IACP,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,EAAE,EAAE,KAAK;iBACV,EAAA,CACD,EACFA,IAAC,QAAQ,EAAA,EACP,SAAS,EAAC,OAAO,EACjB,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,YAAY,EAAE,QAAQ;AACtB,oBAAA,EAAE,EAAE,KAAK;iBACV,EAAA,CACD,CAAA,EAAA,CACG;AAEX;;;;"}