@ape.swap/bonds-sdk 6.2.11 → 6.2.13

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

@@ -1 +1 @@
-{"version":3,"file":"ActionsSui.js","sources":["../../../../../src/views/YourBondsModal/components/Actions/ActionsSui.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { Transaction } from '@mysten/sui/transactions'\n\nimport { claimable } from '../../../../utils/displayHelpers'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { reportError } from '../../../../utils/reportError'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\nimport { useQueryClient } from '@tanstack/react-query'\nimport useSUIAccount from '../../../../hooks/accounts/useSUIAccount'\nimport { SUI_CLAIM_FUNCTION } from '../../../../constants/suiConstants'\nimport { getSuiClient, verifySuiTxSuccess } from '../../../../utils/suiHelpers'\nimport { QUERY_KEYS } from '../../../../config/constants/queryKeys'\n\n// YourBondsModal action buttons for Sui bonds. Mirrors the shape of\n// `ActionsAptos`: one Claim button and one \"Buy again\" button that\n// jumps to an active bond of the same showcase token.\nconst ActionsSui = ({ userBill }: { userBill?: UserBill }) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const queryClient = useQueryClient()\n  const { address: suiAccount, signAndExecuteTransaction } = useSUIAccount()\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 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    if (loadingTx || !suiAccount || !userBill || !signAndExecuteTransaction) return\n\n    try {\n      setLoadingTx(true)\n\n      const market = userBill?.bond?.contractAddress?.[userBill?.bond?.chainId]\n      if (!market) throw new Error('Missing bond market address')\n\n      // The user's BondNFT object ID is stored in `bill.address`\n      const nftObjectId = userBill?.address\n      if (!nftObjectId) throw new Error('Missing bond NFT object ID')\n\n      const payoutCoinType = userBill?.bond?.earnToken?.address?.[userBill?.bond?.chainId ?? 0]\n      const principalCoinType = userBill?.bond?.lpToken?.address?.[userBill?.bond?.chainId ?? 0]\n      if (!payoutCoinType || !principalCoinType) throw new Error('Missing token type info')\n\n      const tx = new Transaction()\n      const [claimedCoin] = tx.moveCall({\n        target: SUI_CLAIM_FUNCTION,\n        typeArguments: [payoutCoinType, principalCoinType],\n        arguments: [\n          tx.object(market),\n          tx.object(nftObjectId),\n          tx.object('0x6'), // clock\n        ],\n      })\n      tx.transferObjects([claimedCoin], tx.pure.address(suiAccount))\n\n      // Pre-build so the wallet receives fully-resolved bytes\n      tx.setSender(suiAccount)\n      tx.setGasBudget(50_000_000)\n      const suiClient = getSuiClient()\n      const builtBytes = await tx.build({ client: suiClient })\n      const prebuiltTx = Transaction.from(builtBytes)\n\n      const response = await signAndExecuteTransaction({\n        transaction: prebuiltTx,\n      })\n\n      const digest = response?.digest\n      if (!digest) throw new Error('No tx digest returned by wallet')\n\n      await suiClient.waitForTransaction({ digest })\n      await verifySuiTxSuccess(digest)\n\n      await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.USER_BONDS] })\n      addToastSuccess(digest, ChainId.SUI)\n    } catch (error: any) {\n      console.error('Sui claim failed:', error)\n      addToastError(error?.message ?? 'Unknown error')\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        account: suiAccount ?? '',\n        chainId: ChainId.SUI,\n        extraInfo: { type: 'suiClaim', 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          if (!canPurchaseAgain) return\n          const params = `/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`\n          window.location.href = `${params}`\n        }}\n        disabled={!canPurchaseAgain}\n      >\n        {canPurchaseAgain ? 'Buy again' : 'sold out'}\n      </Button>\n    </>\n  )\n}\n\nexport default ActionsSui\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAmBA;AACA;AACA;AACA,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAA2B,KAAI;;AAE3D,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,WAAW,GAAG,cAAc,EAAE;IACpC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,yBAAyB,EAAE,GAAG,aAAa,EAAE;IAC1E,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE;IACtD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE;;IAG1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;AAGjD,IAAA,MAAM,eAAe,GAAG,SAAS,EAAE,IAAI,CACrC,CAAC,IAAI,KACH,CAAC,IAAI,EAAE,OAAO;QACd,CAAC,IAAI,EAAE,IAAI;AACX,QAAA,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,CAC9F;AACD,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,eAAe;AAC1C,IAAA,MAAM,YAAY,GAAG,QAAQ,EAAE,IAAI,EAAE,YAAY;AACjD,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC;IAC3D,MAAM,iBAAiB,GAAG,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,IAAI,GAAG,CAAC;AAC1E,IAAA,MAAM,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,iBAAiB,GAAG,YAAY,GAAG,KAAK;AAC5F,IAAA,MAAM,cAAc,GAAG,cAAc,CAAC,iBAAiB,IAAI,YAAY,IAAI,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC;AAElG,IAAA,MAAM,WAAW,GAAG,YAAW;QAC7B,IAAI,SAAS,IAAI,CAAC,UAAU,IAAI,CAAC,QAAQ,IAAI,CAAC,yBAAyB;YAAE;AAEzE,QAAA,IAAI;YACF,YAAY,CAAC,IAAI,CAAC;AAElB,YAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,IAAI,EAAE,eAAe,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,CAAC;AACzE,YAAA,IAAI,CAAC,MAAM;AAAE,gBAAA,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC;;AAG3D,YAAA,MAAM,WAAW,GAAG,QAAQ,EAAE,OAAO;AACrC,YAAA,IAAI,CAAC,WAAW;AAAE,gBAAA,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC;AAE/D,YAAA,MAAM,cAAc,GAAG,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;AACzF,YAAA,MAAM,iBAAiB,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;AAC1F,YAAA,IAAI,CAAC,cAAc,IAAI,CAAC,iBAAiB;AAAE,gBAAA,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC;AAErF,YAAA,MAAM,EAAE,GAAG,IAAI,WAAW,EAAE;AAC5B,YAAA,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC;AAChC,gBAAA,MAAM,EAAE,kBAAkB;AAC1B,gBAAA,aAAa,EAAE,CAAC,cAAc,EAAE,iBAAiB,CAAC;AAClD,gBAAA,SAAS,EAAE;AACT,oBAAA,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;AACjB,oBAAA,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC;AACtB,oBAAA,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;AACjB,iBAAA;AACF,aAAA,CAAC;AACF,YAAA,EAAE,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;;AAG9D,YAAA,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC;AACxB,YAAA,EAAE,CAAC,YAAY,CAAC,QAAU,CAAC;AAC3B,YAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,YAAA,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACxD,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AAE/C,YAAA,MAAM,QAAQ,GAAG,MAAM,yBAAyB,CAAC;AAC/C,gBAAA,WAAW,EAAE,UAAU;AACxB,aAAA,CAAC;AAEF,YAAA,MAAM,MAAM,GAAG,QAAQ,EAAE,MAAM;AAC/B,YAAA,IAAI,CAAC,MAAM;AAAE,gBAAA,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC;YAE/D,MAAM,SAAS,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;AAC9C,YAAA,MAAM,kBAAkB,CAAC,MAAM,CAAC;AAEhC,YAAA,MAAM,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;AAC1E,YAAA,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC;QACtC;QAAE,OAAO,KAAU,EAAE;AACnB,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC;AACzC,YAAA,aAAa,CAAC,KAAK,EAAE,OAAO,IAAI,eAAe,CAAC;AAChD,YAAA,WAAW,CAAC;AACV,gBAAA,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK;gBAC9B,KAAK;gBACL,OAAO,EAAE,UAAU,IAAI,EAAE;gBACzB,OAAO,EAAE,OAAO,CAAC,GAAG;gBACpB,SAAS,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;AACjD,aAAA,CAAC;QACJ;gBAAU;YACR,YAAY,CAAC,KAAK,CAAC;QACrB;AACF,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,SAAS,IAAI,CAAC,QAAQ,IAAI,cAAc,EAC/E,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,KAAK,KAAI;oBACjB,KAAK,CAAC,eAAe,EAAE;AACvB,oBAAA,IAAI,CAAC,SAAS;AAAE,wBAAA,WAAW,EAAE;AAC/B,gBAAA,CAAC,EACD,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAEtC;AACC,sBAAE,CAAA,aAAA,EAAgB,cAAc,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,cAAc,CAAC,IAAI,CAAA,KAAA,CAAO,GAAG,cAAc,CAAC,KAAK,KAAK,CAAC,GAAG,CAAA,EAAG,cAAc,CAAC,KAAK,CAAA,MAAA,CAAQ,GAAG,CAAA,EAAG,cAAc,CAAC,OAAO,OAAO,CAAA;sBAC3K,OAAO,EAAA,CACJ,EACTA,IAAC,MAAM,EAAA,EACL,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EACvC,OAAO,EAAE,MAAK;AACZ,oBAAA,IAAI,CAAC,gBAAgB;wBAAE;AACvB,oBAAA,MAAM,MAAM,GAAG,CAAA,mBAAA,EAAsB,eAAe,CAAC,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,eAAe,CAAC,OAAO,EAAE;oBACpI,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAA,EAAG,MAAM,EAAE;AACpC,gBAAA,CAAC,EACD,QAAQ,EAAE,CAAC,gBAAgB,EAAA,QAAA,EAE1B,gBAAgB,GAAG,WAAW,GAAG,UAAU,EAAA,CACrC,CAAA,EAAA,CACR;AAEP;;;;"}
+{"version":3,"file":"ActionsSui.js","sources":["../../../../../src/views/YourBondsModal/components/Actions/ActionsSui.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { Transaction } from '@mysten/sui/transactions'\n\nimport { claimable } from '../../../../utils/displayHelpers'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { getTimePeriods } from '../../../../utils/getTimePeriods'\nimport useBondsData from '../../../../state/bonds/useBondsData'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\nimport { reportError } from '../../../../utils/reportError'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\n\nimport { useQueryClient } from '@tanstack/react-query'\nimport useSUIAccount from '../../../../hooks/accounts/useSUIAccount'\nimport { SUI_CLAIM_FUNCTION } from '../../../../constants/suiConstants'\nimport { getSuiClient, verifySuiTxSuccess } from '../../../../utils/suiHelpers'\nimport { QUERY_KEYS } from '../../../../config/constants/queryKeys'\n\n// YourBondsModal action buttons for Sui bonds. Mirrors the shape of\n// `ActionsAptos`: one Claim button and one \"Buy again\" button that\n// jumps to an active bond of the same showcase token.\nconst ActionsSui = ({ userBill }: { userBill?: UserBill }) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const queryClient = useQueryClient()\n  const { address: suiAccount, signAndExecuteTransaction } = useSUIAccount()\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 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    if (loadingTx || !suiAccount || !userBill || !signAndExecuteTransaction) return\n\n    try {\n      setLoadingTx(true)\n\n      const market = userBill?.bond?.contractAddress?.[userBill?.bond?.chainId]\n      if (!market) throw new Error('Missing bond market address')\n\n      // The user's BondNFT object ID is stored in `bill.address`\n      const nftObjectId = userBill?.address\n      if (!nftObjectId) throw new Error('Missing bond NFT object ID')\n\n      const payoutCoinType = userBill?.bond?.earnToken?.address?.[userBill?.bond?.chainId ?? 0]\n      const principalCoinType = userBill?.bond?.lpToken?.address?.[userBill?.bond?.chainId ?? 0]\n      if (!payoutCoinType || !principalCoinType) throw new Error('Missing token type info')\n\n      const tx = new Transaction()\n      const [claimedCoin] = tx.moveCall({\n        target: SUI_CLAIM_FUNCTION,\n        typeArguments: [payoutCoinType, principalCoinType],\n        arguments: [\n          tx.object(market),\n          tx.object(nftObjectId),\n          tx.object('0x6'), // clock\n        ],\n      })\n      tx.transferObjects([claimedCoin], tx.pure.address(suiAccount))\n\n      // Pre-build so the wallet receives fully-resolved bytes\n      tx.setSender(suiAccount)\n      tx.setGasBudget(50_000_000)\n      const suiClient = getSuiClient()\n      const builtBytes = await tx.build({ client: suiClient })\n      const prebuiltTx = Transaction.from(builtBytes)\n\n      const response = await signAndExecuteTransaction({\n        transaction: prebuiltTx,\n      })\n\n      const digest = response?.digest\n      if (!digest) throw new Error('No tx digest returned by wallet')\n\n      await suiClient.waitForTransaction({ digest })\n      await verifySuiTxSuccess(digest)\n\n      await queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.USER_BONDS] })\n      addToastSuccess(digest, ChainId.SUI)\n    } catch (error: any) {\n      console.error('Sui claim failed:', error)\n      addToastError(error?.message ?? 'Unknown error')\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        account: suiAccount ?? '',\n        chainId: ChainId.SUI,\n        extraInfo: { type: 'suiClaim', 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        className=\"ape:text-[14px]! ape:w-full\"\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        className=\"ape:text-[14px]! ape:w-full\"\n        onClick={() => {\n          if (!canPurchaseAgain) return\n          const params = `/bonds?bondAddress=${similarLiveBond.contractAddress[similarLiveBond.chainId]}&bondChain=${similarLiveBond.chainId}`\n          window.location.href = `${params}`\n        }}\n        disabled={!canPurchaseAgain}\n      >\n        {canPurchaseAgain ? 'Buy again' : 'sold out'}\n      </Button>\n    </>\n  )\n}\n\nexport default ActionsSui\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { UserBill } from '../../../../types/yourbonds';
 declare const LinkShare: ({ userBill }: {
     userBill: UserBill | undefined;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default LinkShare;

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Spinner } from 'theme-ui';
+import Spinner from '../../../../components/uikit-sdk/Spinner/index.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import { useURLByEnvironment } from '../../../../state/useSDKConfig.js';
 import { generateImageFromTemplate } from './utils.js';
@@ -37,20 +37,7 @@ const LinkShare = ({ userBill }) => {
         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(Twitter, { width: 20 }) }), jsx(Flex, { children: "SHARE" })] }));
+    return (jsxs(Flex, { className: "ape:bg-white3 ape:lg:bg-white4 ape:rounded-normal ape:justify-center ape:items-center ape:p-[2px_10px_2px_5px] ape:font-semibold ape:text-[12px] ape:h-[22px] ape:cursor-pointer ape:hover:bg-white5", onClick: () => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x'), children: [jsx(Flex, { children: isLoading[0] ? jsx(Spinner, { size: 16 }) : jsx(Twitter, { width: 20 }) }), jsx(Flex, { children: "SHARE" })] }));
 };
 
 export { LinkShare as default };

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

@@ -1 +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 from '../../../../components/uikit-sdk/Flex'\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'\nimport Twitter from '../../../../components/uikit-sdk/Svg/Icons/Twitter'\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} /> : <Twitter width={20} />}</Flex>\n      <Flex>SHARE</Flex>\n    </Flex>\n  )\n}\n\nexport default LinkShare\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsC,KAAI;;AAErE,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;AAGrE,IAAA,MAAM,WAAW,GAAgC,QAAQ,EAAE,OAAO;AAClE,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO;;AAEvC,IAAA,MAAM,OAAO,GAAG,mBAAmB,CAAC,SAAS,CAAC;IAC9C,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,IAAI,EAAE;IACjD,MAAM,WAAW,GACf,QAAQ,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,EAAE,eAAe,GAAG,WAAW,EAAE,IAAI,EAAE,cAAc;IAC5G,MAAM,QAAQ,GAAG,CAAA,EAAG,OAAO,yBAAyB,WAAW,CAAA,aAAA,EAAgB,WAAW,EAAE,OAAO,cAAc,QAAQ,EAAE,EAAE,CAAA,MAAA,EAAS,WAAW,EAAE,IAAI,EAAE,mBAAmB,CAAA,CAAE;IAC9K,MAAM,IAAI,GAAG,CAAA,0BAAA,EAA6B,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAA,gEAAA,CAAkE;IAC5I,MAAM,WAAW,GAAG,OAAO,GAAW,EAAE,MAAc,KAAI;QACxD,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;AAChC,YAAA,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B;QACF;AACA,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,EAAE,CAAA,WAAA,CAAa;AACzC,gBAAA,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM;AAChD,aAAA;AACF,SAAA,CAAC;QACF,YAAY,CAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAgB,CAAC;QAC5D,MAAM,yBAAyB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC;AACzD,QAAA,YAAY,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC9B,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;YACF,UAAU,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACpD,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,CAAC,EAAE,kBAAkB;AACrB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,QAAQ;AACrB,aAAA;SACF,EACD,OAAO,EAAE,MAAM,WAAW,CAAC,CAAA,sCAAA,EAAyC,IAAI,CAAA,KAAA,EAAQ,QAAQ,EAAE,EAAE,GAAG,CAAC,EAAA,QAAA,EAAA,CAEhGC,GAAA,CAAC,IAAI,cAAE,SAAS,CAAC,CAAC,CAAC,GAAGA,GAAA,CAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,OAAO,IAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAAQ,EAC5EA,IAAC,IAAI,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CACb;AAEX;;;;"}
+{"version":3,"file":"LinkShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/LinkShare.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Spinner from '../../../../components/uikit-sdk/Spinner'\nimport Flex from '../../../../components/uikit-sdk/Flex'\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'\nimport Twitter from '../../../../components/uikit-sdk/Svg/Icons/Twitter'\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      className=\"ape:bg-white3 ape:lg:bg-white4 ape:rounded-normal ape:justify-center ape:items-center ape:p-[2px_10px_2px_5px] ape:font-semibold ape:text-[12px] ape:h-[22px] ape:cursor-pointer ape:hover:bg-white5\"\n      onClick={() => handleShare(`https://twitter.com/intent/tweet?text=${text}&url=${shareUrl}`, 'x')}\n    >\n      <Flex>{isLoading[0] ? <Spinner size={16} /> : <Twitter width={20} />}</Flex>\n      <Flex>SHARE</Flex>\n    </Flex>\n  )\n}\n\nexport default LinkShare\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsC,KAAI;;AAErE,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;AAGrE,IAAA,MAAM,WAAW,GAAgC,QAAQ,EAAE,OAAO;AAClE,IAAA,MAAM,OAAO,GAAG,QAAQ,EAAE,IAAI,EAAE,OAAO;;AAEvC,IAAA,MAAM,OAAO,GAAG,mBAAmB,CAAC,SAAS,CAAC;IAC9C,MAAM,MAAM,GAAG,mBAAmB,CAAC,OAAO,CAAC,IAAI,EAAE;IACjD,MAAM,WAAW,GACf,QAAQ,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,GAAG,WAAW,EAAE,eAAe,GAAG,WAAW,EAAE,IAAI,EAAE,cAAc;IAC5G,MAAM,QAAQ,GAAG,CAAA,EAAG,OAAO,yBAAyB,WAAW,CAAA,aAAA,EAAgB,WAAW,EAAE,OAAO,cAAc,QAAQ,EAAE,EAAE,CAAA,MAAA,EAAS,WAAW,EAAE,IAAI,EAAE,mBAAmB,CAAA,CAAE;IAC9K,MAAM,IAAI,GAAG,CAAA,0BAAA,EAA6B,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAA,gEAAA,CAAkE;IAC5I,MAAM,WAAW,GAAG,OAAO,GAAW,EAAE,MAAc,KAAI;QACxD,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;AAChC,YAAA,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B;QACF;AACA,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,CAAA,EAAG,MAAM,CAAC,WAAW,EAAE,CAAA,WAAA,CAAa;AACzC,gBAAA,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM;AAChD,aAAA;AACF,SAAA,CAAC;QACF,YAAY,CAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAgB,CAAC;QAC5D,MAAM,yBAAyB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC;AACzD,QAAA,YAAY,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC9B,IAAA,CAAC;IAED,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,sMAAsM,EAChN,OAAO,EAAE,MAAM,WAAW,CAAC,CAAA,sCAAA,EAAyC,IAAI,CAAA,KAAA,EAAQ,QAAQ,CAAA,CAAE,EAAE,GAAG,CAAC,EAAA,QAAA,EAAA,CAEhGC,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAE,SAAS,CAAC,CAAC,CAAC,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAAQ,EAC5EA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CACb;AAEX;;;;"}

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

@@ -1,7 +1,6 @@
 import { formatNumberSI, localeFormat } from '../../../../utils/formatNumber.js';
 
-// Mirrors src/scss/ShareBondImage.scss - duplicated here (rather than imported) so this
-// stays a plain, self-contained string with no build-tooling dependency, since it's
+// Plain, self-contained CSS string with no build-tooling dependency, since it's
 // embedded directly into the rendered image rather than applied via the page's stylesheet.
 function getTemplateCss(backgroundImage) {
     return `

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

@@ -1 +1 @@
-{"version":3,"file":"templateImageShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/templateImageShare.ts"],"sourcesContent":["import { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport interface TemplateImages {\n  title: string\n  background: string\n  nft: string\n  payoutToken: string\n  principalToken: string\n}\n\n// Mirrors src/scss/ShareBondImage.scss - duplicated here (rather than imported) so this\n// stays a plain, self-contained string with no build-tooling dependency, since it's\n// embedded directly into the rendered image rather than applied via the page's stylesheet.\nfunction getTemplateCss(backgroundImage: string) {\n  return `\n    .sharebondimage-card {\n      flex-direction: column;\n      width: 768px;\n      height: 768px;\n      align-items: center;\n      background-image: url(${backgroundImage});\n      background-size: cover;\n      background-position: bottom center;\n      background-repeat: no-repeat;\n      justify-content: center;\n      display: flex;\n    }\n    .sharebondimage-nft {\n      margin-top: 10px;\n      flex-direction: column;\n      align-items: center;\n    }\n    .sharebondimage-nft-id {\n      display: flex;\n      position: absolute;\n      top: 15px;\n      right: -61px;\n      min-width: 60px;\n      height: 28px;\n      border-radius: 0px 6px 6px 0px;\n      justify-content: center;\n      align-items: center;\n      background-color: rgba(255, 255, 255, 0.1);\n      backdrop-filter: blur(34px);\n    }\n    .sharebondimage-nft-id span {\n      font-size: 14px;\n      color: text;\n      line-height: 8px\n    }\n    .sharebondimage-nft img {\n      width: 319px;\n      height: 180px;\n      border-radius: 10px 10px 0px 0px;\n    }\n    .sharebondimage-container-info {\n      display: flex;\n      width: 381px;\n      height: 147px;\n      background-color: rgba(255, 255, 255, 0.1);\n      backdrop-filter: blur(34px);\n      border-radius: 10px;\n      justify-content: flex-start;\n      align-items: flex-start;\n      flex-direction: column;\n      padding: 10px 8px 10px 8px;\n      margin-top: -3px\n    }\n    .sharebondimage-container-discount {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      width: 100%;\n      background-color: rgba(255, 255, 255, 0.05);\n      border-radius: 7px;\n      padding: 10px;\n    }\n    .sharebondimage-container-off {\n      display: flex;\n      margin-left: 30px;\n      width: 125px;\n      height: 27px;\n      border-radius: 5px;\n      border: 1px solid #38A61133;\n      justify-content: center;\n      align-items: center;\n      background-color: #38A6110D;\n    }\n    .sharebondimage-container-off span {\n      color: #38A611;\n      font-size: 16px;\n      font-weight: 700;\n    }\n    .sharebondimage-container-discount-price {\n      flex-direction: column;\n      margin-left: 13px\n    }\n    .sharebondimage-container-discount-token {\n      display: flex;\n      gap: 4px;\n      color: rgba(255, 255, 255, 0.5)\n    }\n    .sharebondimage-container-discount-token span {\n      font-size: 14px;\n      font-weight: 400;\n    }\n    .sharebondimage-container-discount-price-discount {\n      color: #49B423;\n      font-size: 22px;\n      font-weight: 700;\n    }\n    .sharebondimage-container-tokens {\n      display: flex;\n      width: 100%;\n      padding-top: 6px;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n    }\n    .sharebondimage-container-token {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      background-color: rgba(255, 255, 255, 0.05);\n      border-radius: 7px;\n      padding: 10px;\n    }\n    .sharebondimage-container-token img {\n      width: 26px;\n      height: 26px;\n    }\n    .sharebondimage-amount-deposit {\n      color: #FAFAFA;\n      font-size: 14px;\n      font-weight: 700;\n    }\n    .sharebondimage-dollarvalue {\n      color: rgba(255, 255, 255, 0.5);\n      font-size: 12px;\n      font-weight: 400;\n    }\n    .sharebondimage-container-earntoken {\n      display: flex;\n      flex-direction: column;\n    }\n    .sharebondimage-amount-earntoken {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n    }\n    .sharebondimage-profit {\n      justify-content: center;\n      align-items: center\n    }\n    .sharebondimage-profit span {\n      color: #38A611;\n      font-size: 10px;\n      font-weight: 400;\n      line-height: 4px\n    }\n    .sharebondimage-amount-payout {\n      color: #38A611;\n      font-size: 14px;\n      font-weight: 700\n    }\n    .sharebondimage-amount-dollarvalue {\n      color: #38A611;\n      font-size: 12px;\n      font-weight: 400\n    }\n  `\n}\n\nexport function getTemplateHTML(data: UserBillNftData, images: TemplateImages) {\n  //@ts-ignore\n  const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\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  <style>${getTemplateCss(images.background)}</style>\n  <div id=\"template-card\" class=\"sharebondimage-card\">\n    <img src=\"${images.title}\" 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=\"${images.nft}\" alt=\"bill-nft\" />\n      </div>\n    </div>\n    <div class=\"sharebondimage-container-info\">\n      <div class=\"sharebondimage-container-discount\">\n        <img src=\"${images.payoutToken}\" 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=\"${images.principalToken}\" 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=\"${images.payoutToken}\" 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":";;AAWA;AACA;AACA;AACA,SAAS,cAAc,CAAC,eAAuB,EAAA;IAC7C,OAAO;;;;;;8BAMqB,eAAe,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyJ1C;AACH;AAEM,SAAU,eAAe,CAAC,IAAqB,EAAE,MAAsB,EAAA;;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC;IAClG,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG;AAC/F,IAAA,CAAC;IACD,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,EAAE,IAAI,GAAG;AAC9F,IAAA,CAAC;IACD,OAAO;AACE,SAAA,EAAA,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;AAE5B,cAAA,EAAA,MAAM,CAAC,KAAK,CAAA;;;;AAIT,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAEX,kBAAA,EAAA,MAAM,CAAC,GAAG,CAAA;;;;;AAKV,kBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;AAGlB,kBAAA,EAAA,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAA;;AAEpC,eAAA,EAAA,cAAc,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;;eAIhD,cAAc,CAAC,yBAAyB,EAAE,CAAC;;;;;cAK5C,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;;;;;;AAMvB,oBAAA,EAAA,MAAM,CAAC,cAAc,CAAA;;AAE7B,YAAA,EAAA,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;;;AAGlC,aAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;AAI/B,oBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;;AAItB,gBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,CAAC;;;AAGhC,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;wDAG7B,CAAC,QAAQ,GAAG,eAAe,GAAG,EAAE,CAAA;;AAErE,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;;;;;;GAS7G;AACH;;;;"}
+{"version":3,"file":"templateImageShare.js","sources":["../../../../../src/views/YourBondsModal/components/LinkShare/templateImageShare.ts"],"sourcesContent":["import { UserBillNftData } from '../../../../types/yourbonds'\nimport { formatNumberSI, localeFormat } from '../../../../utils/formatNumber'\n\nexport interface TemplateImages {\n  title: string\n  background: string\n  nft: string\n  payoutToken: string\n  principalToken: string\n}\n\n// Plain, self-contained CSS string with no build-tooling dependency, since it's\n// embedded directly into the rendered image rather than applied via the page's stylesheet.\nfunction getTemplateCss(backgroundImage: string) {\n  return `\n    .sharebondimage-card {\n      flex-direction: column;\n      width: 768px;\n      height: 768px;\n      align-items: center;\n      background-image: url(${backgroundImage});\n      background-size: cover;\n      background-position: bottom center;\n      background-repeat: no-repeat;\n      justify-content: center;\n      display: flex;\n    }\n    .sharebondimage-nft {\n      margin-top: 10px;\n      flex-direction: column;\n      align-items: center;\n    }\n    .sharebondimage-nft-id {\n      display: flex;\n      position: absolute;\n      top: 15px;\n      right: -61px;\n      min-width: 60px;\n      height: 28px;\n      border-radius: 0px 6px 6px 0px;\n      justify-content: center;\n      align-items: center;\n      background-color: rgba(255, 255, 255, 0.1);\n      backdrop-filter: blur(34px);\n    }\n    .sharebondimage-nft-id span {\n      font-size: 14px;\n      color: text;\n      line-height: 8px\n    }\n    .sharebondimage-nft img {\n      width: 319px;\n      height: 180px;\n      border-radius: 10px 10px 0px 0px;\n    }\n    .sharebondimage-container-info {\n      display: flex;\n      width: 381px;\n      height: 147px;\n      background-color: rgba(255, 255, 255, 0.1);\n      backdrop-filter: blur(34px);\n      border-radius: 10px;\n      justify-content: flex-start;\n      align-items: flex-start;\n      flex-direction: column;\n      padding: 10px 8px 10px 8px;\n      margin-top: -3px\n    }\n    .sharebondimage-container-discount {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n      width: 100%;\n      background-color: rgba(255, 255, 255, 0.05);\n      border-radius: 7px;\n      padding: 10px;\n    }\n    .sharebondimage-container-off {\n      display: flex;\n      margin-left: 30px;\n      width: 125px;\n      height: 27px;\n      border-radius: 5px;\n      border: 1px solid #38A61133;\n      justify-content: center;\n      align-items: center;\n      background-color: #38A6110D;\n    }\n    .sharebondimage-container-off span {\n      color: #38A611;\n      font-size: 16px;\n      font-weight: 700;\n    }\n    .sharebondimage-container-discount-price {\n      flex-direction: column;\n      margin-left: 13px\n    }\n    .sharebondimage-container-discount-token {\n      display: flex;\n      gap: 4px;\n      color: rgba(255, 255, 255, 0.5)\n    }\n    .sharebondimage-container-discount-token span {\n      font-size: 14px;\n      font-weight: 400;\n    }\n    .sharebondimage-container-discount-price-discount {\n      color: #49B423;\n      font-size: 22px;\n      font-weight: 700;\n    }\n    .sharebondimage-container-tokens {\n      display: flex;\n      width: 100%;\n      padding-top: 6px;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n    }\n    .sharebondimage-container-token {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n      background-color: rgba(255, 255, 255, 0.05);\n      border-radius: 7px;\n      padding: 10px;\n    }\n    .sharebondimage-container-token img {\n      width: 26px;\n      height: 26px;\n    }\n    .sharebondimage-amount-deposit {\n      color: #FAFAFA;\n      font-size: 14px;\n      font-weight: 700;\n    }\n    .sharebondimage-dollarvalue {\n      color: rgba(255, 255, 255, 0.5);\n      font-size: 12px;\n      font-weight: 400;\n    }\n    .sharebondimage-container-earntoken {\n      display: flex;\n      flex-direction: column;\n    }\n    .sharebondimage-amount-earntoken {\n      display: flex;\n      gap: 5px;\n      justify-content: center;\n      align-items: center;\n    }\n    .sharebondimage-profit {\n      justify-content: center;\n      align-items: center\n    }\n    .sharebondimage-profit span {\n      color: #38A611;\n      font-size: 10px;\n      font-weight: 400;\n      line-height: 4px\n    }\n    .sharebondimage-amount-payout {\n      color: #38A611;\n      font-size: 14px;\n      font-weight: 700\n    }\n    .sharebondimage-amount-dollarvalue {\n      color: #38A611;\n      font-size: 12px;\n      font-weight: 400\n    }\n  `\n}\n\nexport function getTemplateHTML(data: UserBillNftData, images: TemplateImages) {\n  //@ts-ignore\n  const isProfit = +data?.data?.payout * +data?.data?.payoutTokenPrice - data?.data?.dollarValue > 0\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  <style>${getTemplateCss(images.background)}</style>\n  <div id=\"template-card\" class=\"sharebondimage-card\">\n    <img src=\"${images.title}\" 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=\"${images.nft}\" alt=\"bill-nft\" />\n      </div>\n    </div>\n    <div class=\"sharebondimage-container-info\">\n      <div class=\"sharebondimage-container-discount\">\n        <img src=\"${images.payoutToken}\" 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=\"${images.principalToken}\" 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=\"${images.payoutToken}\" 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":";;AAWA;AACA;AACA,SAAS,cAAc,CAAC,eAAuB,EAAA;IAC7C,OAAO;;;;;;8BAMqB,eAAe,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyJ1C;AACH;AAEM,SAAU,eAAe,CAAC,IAAqB,EAAE,MAAsB,EAAA;;IAE3E,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAW,GAAG,CAAC;IAClG,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG;AAC/F,IAAA,CAAC;IACD,MAAM,yBAAyB,GAAG,MAAK;AACrC,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,eAAe,EAAE,IAAI,GAAG;AAC9F,IAAA,CAAC;IACD,OAAO;AACE,SAAA,EAAA,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;AAE5B,cAAA,EAAA,MAAM,CAAC,KAAK,CAAA;;;;AAIT,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA;;AAEX,kBAAA,EAAA,MAAM,CAAC,GAAG,CAAA;;;;;AAKV,kBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;AAGlB,kBAAA,EAAA,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAA;;AAEpC,eAAA,EAAA,cAAc,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;;eAIhD,cAAc,CAAC,yBAAyB,EAAE,CAAC;;;;;cAK5C,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;;;;;;AAMvB,oBAAA,EAAA,MAAM,CAAC,cAAc,CAAA;;AAE7B,YAAA,EAAA,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;;;AAGlC,aAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;AAI/B,oBAAA,EAAA,MAAM,CAAC,WAAW,CAAA;;;;AAItB,gBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,CAAC;;;AAGhC,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,CAAC;;;wDAG7B,CAAC,QAAQ,GAAG,eAAe,GAAG,EAAE,CAAA;;AAErE,iBAAA,EAAA,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,MAAO,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,gBAAiB,GAAG,IAAI,EAAE,IAAI,EAAE,WAAY,CAAC;;;;;;;;;GAS7G;AACH;;;;"}

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { UserBill } from '../../../../types/yourbonds';
 declare const NftImage: ({ userBill, showNFTImg, setShowNFTImg, }: {
     userBill?: UserBill;
     showNFTImg: boolean;
     setShowNFTImg: (value: boolean) => void;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NftImage;

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

@@ -1,5 +1,6 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
+import clsx from 'clsx';
 import { useAnimation, AnimatePresence, motion } from 'framer-motion';
 import LinkShare from '../LinkShare/LinkShare.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
@@ -37,15 +38,7 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
         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?.image && (jsxs(motion.div, { animate: controls, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(AnimatePresence, { children: showNFTImg && (jsx(motion.div, { animate: { opacity: 1 }, transition: { duration: 1, delay: 0.3 }, className: "ape:absolute ape:flex ape:top-[-180px] ape:sm:top-[-240px] ape:right-[50%] ape:md:right-[-13%] ape:translate-x-[50%] ape:md:translate-x-0 ape:opacity-0 ape:z-[5000]", children: jsx(LinkShare, { userBill: userBill }) })) }), jsx(AnimatePresence, { children: bondNFTData?.image && (jsxs(motion.div, { animate: controls, onClick: () => {
                         if (showNFTImg) {
                             closeAnimation();
                         }
@@ -54,87 +47,16 @@ const NftImage = ({ userBill, showNFTImg, setShowNFTImg, }) => {
                         }
                     }, 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(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%',
-                                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) => {
+                    }, className: clsx('ape:flex ape:-z-[1] ape:bottom-[calc(100%-10px)] ape:left-[25%] ape:w-1/2 ape:aspect-[1/0.56] ape:cursor-pointer ape:rounded-normal ape:flex-col ape:hover:z-[1000] ape:md:hover:z-[1000]!', showNFTImg ? 'ape:fixed' : 'ape:absolute'), children: [jsxs(Flex, { className: clsx(showNFTImg ? 'ape:hidden' : 'ape:flex', 'ape:absolute ape:z-[121] ape:w-full ape:h-full ape:opacity-0 ape:items-center ape:justify-center ape:font-bold ape:rounded-normal ape:hover:z-[1000] ape:hover:opacity-80 ape:hover:[background:linear-gradient(90deg,rgba(49,46,122,0.70)_0%,rgba(92,79,174,0.70)_100%)] ape:hover:[backdrop-filter:blur(2px)]'), children: ["View NFT ", '>'] }), showNFTImg && (jsx(Flex, { className: "ape:absolute ape:top-[5px] ape:right-[5px] ape:bg-[grey] ape:opacity-90 ape:p-[2px] ape:rounded-[50%] ape:items-center ape:justify-center", children: jsx(Flex, { className: "ape:w-[6px]", children: jsx(Close, {}) }) })), jsx(ProgressiveImage, { src: `${bondNFTData?.image}`, blurSrc: `https://ape.bond/images/bills/bluredNFT.png` }), showNFTImg && (jsx(Flex, { className: "ape:absolute ape:bottom-[calc(-35%+1px)] ape:md:bottom-[calc(-26%+1px)] ape:w-full ape:justify-center", children: jsxs(Flex, { className: "ape:flex-col ape:w-full ape:min-w-[250px] ape:pb-[10px] ape:items-center ape:scale-[0.5] ape:-translate-y-1/2 ape:md:scale-[0.4] ape:md:-translate-y-3/4", children: [jsxs(Flex, { className: clsx('ape:justify-between ape:h-[24px] ape:bg-white3 ape:px-[15px] ape:w-full', isOpenTraits ? 'ape:rounded-[6px_6px_0px_0px]' : 'ape:rounded-normal'), onClick: (event) => {
                                             event.stopPropagation();
                                             setIsOpenTraits(!isOpenTraits);
-                                        }, 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',
-                                                top: '24px',
-                                                borderRadius: '0 0 10px 10px',
-                                            }, onClick: (event) => {
+                                        }, children: [jsxs(Flex, { className: "ape:gap-[10px] ape:items-center", children: [jsx(Tag, { direction: "down" }), jsx(Text, { size: "12px", weight: 400, className: "ape:opacity-60", 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 }, className: "ape:overflow-hidden ape:w-full ape:absolute ape:top-[24px] ape:rounded-[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?.trait_type, " -"] }), jsx(Text, { sx: { fontSize: '10px', fontWeight: 500 }, children: a?.value })] }, `${a.value}-${index}`)))
+                                            }, children: jsx(Flex, { className: "ape:flex-col", children: attributes
+                                                    ? attributes.map((a, index) => (jsxs(Flex, { className: "ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]", children: [jsxs(Text, { size: "10px", weight: 500, className: "ape:mr-[3px]", children: [a?.trait_type, " -"] }), jsx(Text, { size: "10px", weight: 500, children: 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}`));
+                                                        return (jsxs(Flex, { className: "ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]", children: [jsx(Text, { size: "10px", weight: 500, children: attrib }), jsx(Skeleton, { width: "150px" })] }, `${attrib}-${index}`));
                                                     }) }) })) })] }) }))] })) })] }));
 };
 

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'\nimport 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 Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\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'\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":";;;;;;;;;;;;;AAaA,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,EACR,UAAU,EACV,aAAa,GAKd,KAAI;;AAEH,IAAA,MAAM,QAAQ,GAAG,YAAY,EAAE;AAC/B,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;;IAG9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;;AAGhE,IAAA,MAAM,WAAW,GAAG,QAAQ,EAAE,OAAO;AACrC,IAAA,MAAM,eAAe,GAAG,CAAC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,CAAC;IACnG,MAAM,UAAU,GAAG,WAAW,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,MAAM,KAAK,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAE3G,MAAM,aAAa,GAAG,MAAK;QACzB,QAAQ,CAAC,KAAK,CAAC;AACb,YAAA,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACjC,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC9B,SAAA,CAAC;AACJ,IAAA,CAAC;IAED,MAAM,cAAc,GAAG,MAAK;QAC1B,QAAQ,CAAC,KAAK,CAAC;AACb,YAAA,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;YACjC,MAAM,EAAE,EAAE;AACV,YAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;AAC9B,SAAA,CAAC;QACF,aAAa,CAAC,KAAK,CAAC;QACpB,eAAe,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC;AACD,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,eAAe,cACb,UAAU,KACTA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACvB,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACvC,EAAE,EAAE;AACF,wBAAA,QAAQ,EAAE,UAAU;wBACpB,OAAO,EAAE,CAAC,MAAM,CAAC;AACjB,wBAAA,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;wBACnC,KAAK,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;wBACpC,SAAS,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,CAAC;AAC7E,wBAAA,OAAO,EAAE,CAAC;AACV,wBAAA,MAAM,EAAE,IAAI;AACb,qBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,QAAQ,EAAA,CAAI,EAAA,CACtB,CACd,EAAA,CACe,EAClBA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,WAAW,EAAE,KAAK,KACjBF,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,MAAK;wBACZ,IAAI,UAAU,EAAE;AACd,4BAAA,cAAc,EAAE;wBAClB;6BAAO;AACL,4BAAA,aAAa,EAAE;wBACjB;AACF,oBAAA,CAAC,EACD,gBAAgB,EAAE,MAAK;wBACrB,aAAa,CAAC,IAAI,CAAC;oBACrB,CAAC,EACD,EAAE,EAAE;AACF,wBAAA,OAAO,EAAE,MAAM;wBACf,MAAM,EAAE,EAAE;wBACV,QAAQ,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU;AAC3C,wBAAA,MAAM,EAAE,mBAAmB;AAC3B,wBAAA,IAAI,EAAE,KAAK;AACX,wBAAA,KAAK,EAAE,KAAK;AACZ,wBAAA,WAAW,EAAE,UAAU;AACvB,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,YAAY,EAAE,QAAQ;AACtB,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,UAAU,EAAE;4BACV,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,CAAC;AAC9C,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;gCACF,OAAO,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM;AACrC,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,KAAK,EAAE,MAAM;AACb,gCAAA,MAAM,EAAE,MAAM;AACd,gCAAA,OAAO,EAAE,CAAC;AACV,gCAAA,UAAU,EAAE,QAAQ;AACpB,gCAAA,cAAc,EAAE,QAAQ;AACxB,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,YAAY,EAAE,QAAQ;AACtB,gCAAA,UAAU,EAAE;AACV,oCAAA,MAAM,EAAE,IAAI;AACZ,oCAAA,OAAO,EAAE,GAAG;AACZ,oCAAA,UAAU,EAAE,kFAAkF;AAC9F,oCAAA,cAAc,EAAE,YAAY;AAC7B,iCAAA;6BACF,EAAA,QAAA,EAAA,CAAA,WAAA,EAES,GAAG,CAAA,EAAA,CACR,EACN,UAAU,KACTE,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,GAAG,EAAE,KAAK;AACV,gCAAA,KAAK,EAAE,KAAK;AACZ,gCAAA,UAAU,EAAE,MAAM;AAClB,gCAAA,OAAO,EAAE,GAAG;AACZ,gCAAA,CAAC,EAAE,KAAK;AACR,gCAAA,YAAY,EAAE,KAAK;AACnB,gCAAA,UAAU,EAAE,QAAQ;AACpB,gCAAA,cAAc,EAAE,QAAQ;AACzB,6BAAA,EAAA,QAAA,EAEDA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAA,QAAA,EACxBA,IAAC,KAAK,EAAA,EAAA,CAAG,GACJ,EAAA,CACF,CACR,EACDA,GAAA,CAAC,gBAAgB,EAAA,EAAC,GAAG,EAAE,CAAA,EAAG,WAAW,EAAE,KAAK,CAAA,CAAE,EAAE,OAAO,EAAE,6CAA6C,EAAA,CAAI,EACzG,UAAU,KACTA,IAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,UAAU;AACpB,gCAAA,MAAM,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC;AACpE,gCAAA,KAAK,EAAE,MAAM;AACb,gCAAA,cAAc,EAAE,QAAQ;AACzB,6BAAA,EAAA,QAAA,EAEDF,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oCAAA,aAAa,EAAE,QAAQ;AACvB,oCAAA,KAAK,EAAE,MAAM;AACb,oCAAA,QAAQ,EAAE,OAAO;AACjB,oCAAA,EAAE,EAAE,MAAM;AACV,oCAAA,UAAU,EAAE,QAAQ;AACpB,oCAAA,SAAS,EAAE;wCACT,6BAA6B;wCAC7B,6BAA6B;wCAC7B,6BAA6B;wCAC7B,6BAA6B;AAC9B,qCAAA;AACF,iCAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4CAAA,cAAc,EAAE,eAAe;AAC/B,4CAAA,MAAM,EAAE,MAAM;AACd,4CAAA,eAAe,EAAE,QAAQ;AACzB,4CAAA,EAAE,EAAE,MAAM;AACV,4CAAA,KAAK,EAAE,MAAM;4CACb,YAAY,EAAE,CAAA,EAAG,YAAY,GAAG,iBAAiB,GAAG,QAAQ,CAAA,CAAE;AAC/D,yCAAA,EACD,OAAO,EAAE,CAAC,KAAuB,KAAI;4CACnC,KAAK,CAAC,eAAe,EAAE;AACvB,4CAAA,eAAe,CAAC,CAAC,YAAY,CAAC;wCAChC,CAAC,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAC7CE,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,CAAG,EACxBA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,QAAA,EAAA,CAAe,CAAA,EAAA,CACxF,EACPA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,YAAY,GAAG,IAAI,GAAG,MAAM,EAAA,CAAI,IAC7C,EACPA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,YAAY,KACXA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EAClC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAC1C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE;AACF,gDAAA,QAAQ,EAAE,QAAQ;AAClB,gDAAA,KAAK,EAAE,MAAM;AACb,gDAAA,QAAQ,EAAE,UAAU;AACpB,gDAAA,GAAG,EAAE,MAAM;AACX,gDAAA,YAAY,EAAE,eAAe;AAC9B,6CAAA,EACD,OAAO,EAAE,CAAC,KAAuB,KAAI;gDACnC,KAAK,CAAC,eAAe,EAAE;AACvB,gDAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAChC,4CAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAClC;AACC,sDAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MACtBF,IAAA,CAAC,IAAI,IAEH,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,aAE/EA,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CAAG,CAAC,EAAE,UAAU,UAAU,EACpFE,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,CAAC,EAAE,KAAK,EAAA,CAAQ,KAJ7D,CAAA,EAAG,CAAC,CAAC,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAKrB,CACR;sDACD,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,KAAI;wDACpC,QACEF,IAAA,CAAC,IAAI,EAAA,EAEH,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAE/EE,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,MAAM,EAAA,CAAQ,EAChEA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,OAAO,EAAA,CAAG,CAAA,EAAA,EAJrB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAKpB;AAEX,oDAAA,CAAC,CAAC,EAAA,CACD,EAAA,CACI,CACd,EAAA,CACe,CAAA,EAAA,CACb,EAAA,CACF,CACR,CAAA,EAAA,CACU,CACd,EAAA,CACe,CAAA,EAAA,CACjB;AAEP;;;;"}
+{"version":3,"file":"NFTImage.js","sources":["../../../../../src/views/YourBondsModal/components/NFTImage/NFTImage.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\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'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\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'\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            className=\"ape:absolute ape:flex ape:top-[-180px] ape:sm:top-[-240px] ape:right-[50%] ape:md:right-[-13%] ape:translate-x-[50%] ape:md:translate-x-0 ape:opacity-0 ape:z-[5000]\"\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            className={clsx(\n              'ape:flex ape:-z-[1] ape:bottom-[calc(100%-10px)] ape:left-[25%] ape:w-1/2 ape:aspect-[1/0.56] ape:cursor-pointer ape:rounded-normal ape:flex-col ape:hover:z-[1000] ape:md:hover:z-[1000]!',\n              showNFTImg ? 'ape:fixed' : 'ape:absolute',\n            )}\n          >\n            <Flex\n              className={clsx(\n                showNFTImg ? 'ape:hidden' : 'ape:flex',\n                'ape:absolute ape:z-[121] ape:w-full ape:h-full ape:opacity-0 ape:items-center ape:justify-center ape:font-bold ape:rounded-normal ape:hover:z-[1000] ape:hover:opacity-80 ape:hover:[background:linear-gradient(90deg,rgba(49,46,122,0.70)_0%,rgba(92,79,174,0.70)_100%)] ape:hover:[backdrop-filter:blur(2px)]',\n              )}\n            >\n              View NFT {'>'}\n            </Flex>\n            {showNFTImg && (\n              <Flex\n                className=\"ape:absolute ape:top-[5px] ape:right-[5px] ape:bg-[grey] ape:opacity-90 ape:p-[2px] ape:rounded-[50%] ape:items-center ape:justify-center\"\n              >\n                <Flex className=\"ape:w-[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 className=\"ape:absolute ape:bottom-[calc(-35%+1px)] ape:md:bottom-[calc(-26%+1px)] ape:w-full ape:justify-center\">\n                <Flex className=\"ape:flex-col ape:w-full ape:min-w-[250px] ape:pb-[10px] ape:items-center ape:scale-[0.5] ape:-translate-y-1/2 ape:md:scale-[0.4] ape:md:-translate-y-3/4\">\n                  <Flex\n                    className={clsx(\n                      'ape:justify-between ape:h-[24px] ape:bg-white3 ape:px-[15px] ape:w-full',\n                      isOpenTraits ? 'ape:rounded-[6px_6px_0px_0px]' : 'ape:rounded-normal',\n                    )}\n                    onClick={(event: React.MouseEvent) => {\n                      event.stopPropagation()\n                      setIsOpenTraits(!isOpenTraits)\n                    }}\n                  >\n                    <Flex className=\"ape:gap-[10px] ape:items-center\">\n                      <Tag direction=\"down\" />\n                      <Text size=\"12px\" weight={400} className=\"ape:opacity-60\">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                        className=\"ape:overflow-hidden ape:w-full ape:absolute ape:top-[24px] ape:rounded-[0_0_10px_10px]\"\n                        onClick={(event: React.MouseEvent) => {\n                          event.stopPropagation()\n                          setIsOpenTraits(!isOpenTraits)\n                        }}\n                      >\n                        <Flex className=\"ape:flex-col\">\n                          {attributes\n                            ? attributes.map((a, index) => (\n                                <Flex\n                                  key={`${a.value}-${index}`}\n                                  className=\"ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]\"\n                                >\n                                  <Text size=\"10px\" weight={500} className=\"ape:mr-[3px]\">{a?.trait_type} -</Text>\n                                  <Text size=\"10px\" weight={500}>{a?.value}</Text>\n                                </Flex>\n                              ))\n                            : BILL_ATTRIBUTES.map((attrib, index) => {\n                                return (\n                                  <Flex\n                                    key={`${attrib}-${index}`}\n                                    className=\"ape:bg-white4 ape:w-full ape:p-[2px_8px] ape:h-[22px]\"\n                                  >\n                                    <Text size=\"10px\" weight={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.d.ts

@@ -3,5 +3,5 @@ declare const CardRecommendation: ({ cardIndex, bond, handleBuyBondClick, }: {
     cardIndex: number;
     bond: BondRecommendation;
     handleBuyBondClick: (chain: number, bondAddress: string, cardIndex: number) => void;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default CardRecommendation;

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
 import { getVestingTermsString } from '../../../../utils/displayHelpers.js';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
@@ -6,20 +6,7 @@ import Button from '../../../../components/uikit-sdk/Button/Button.js';
 import Text from '../../../../components/uikit-sdk/Text/index.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" })] }));
+    return (jsxs(Flex, { className: "ape:flex-col ape:w-full ape:lg:w-1/2 ape:gap-[10px] ape:bg-white3 ape:p-[10px] ape:rounded-[10px]", children: [jsx(Flex, { className: "ape:flex-col ape:w-full ape:rounded-[10px] ape:justify-between ape:gap-[14px]", children: jsxs(Flex, { className: "ape:items-center ape:justify-between ape:gap-[10px]", children: [jsxs(Flex, { className: "ape:gap-[5px] ape:justify-center ape:items-center", children: [jsx(TokenImage, { symbol: bond.payoutTokenName, chain: bond.chainId, size: 25 }), jsx(Text, { size: "14px", children: bond.payoutTokenName }), jsx(Text, { size: "14px", weight: 400, className: "ape:opacity-60", children: getVestingTermsString(bond) })] }), jsx(Flex, { className: "ape:flex-col ape:gap-[1px] ape:items-end", children: jsxs(Text, { size: "12px", weight: 700, style: { color: 'var(--ape-color-success)' }, children: [bond.bonus.toFixed(2), "%"] }) })] }) }), jsx(Button, { onClick: () => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex), className: "ape:w-full ape:h-[30px] ape:text-[14px]!", style: { lineHeight: '20px' }, children: "Buy" })] }));
 };
 
 export { CardRecommendation as default };

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

@@ -1 +1 @@
-{"version":3,"file":"CardRecommendation.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendation.tsx"],"sourcesContent":["import TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondRecommendation } from '../../../../state/recommendations/useGetBondRecommendations'\nimport { getVestingTermsString } from '../../../../utils/displayHelpers'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Text from '../../../../components/uikit-sdk/Text'\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":";;;;;;;AAOA,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;;;;"}
+{"version":3,"file":"CardRecommendation.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendation.tsx"],"sourcesContent":["import TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { BondRecommendation } from '../../../../state/recommendations/useGetBondRecommendations'\nimport { getVestingTermsString } from '../../../../utils/displayHelpers'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Button from '../../../../components/uikit-sdk/Button/Button'\nimport Text from '../../../../components/uikit-sdk/Text'\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 className=\"ape:flex-col ape:w-full ape:lg:w-1/2 ape:gap-[10px] ape:bg-white3 ape:p-[10px] ape:rounded-[10px]\">\n      <Flex className=\"ape:flex-col ape:w-full ape:rounded-[10px] ape:justify-between ape:gap-[14px]\">\n        <Flex className=\"ape:items-center ape:justify-between ape:gap-[10px]\">\n          <Flex className=\"ape:gap-[5px] ape:justify-center ape:items-center\">\n            <TokenImage symbol={bond.payoutTokenName} chain={bond.chainId} size={25} />\n            <Text size=\"14px\">{bond.payoutTokenName}</Text>\n            <Text size=\"14px\" weight={400} className=\"ape:opacity-60\">\n              {getVestingTermsString(bond as any)}\n            </Text>\n          </Flex>\n          <Flex className=\"ape:flex-col ape:gap-[1px] ape:items-end\">\n            <Text size=\"12px\" weight={700} style={{ color: 'var(--ape-color-success)' }}>\n              {bond.bonus.toFixed(2)}%\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n      <Button\n        onClick={() => handleBuyBondClick(bond.chainId, bond.billAddress, cardIndex)}\n        className=\"ape:w-full ape:h-[30px] ape:text-[14px]!\"\n        style={{ lineHeight: '20px' }}\n      >\n        Buy\n      </Button>\n    </Flex>\n  )\n}\n\nexport default CardRecommendation\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAOA,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,IAAI,EACJ,kBAAkB,GAKnB,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mGAAmG,EAAA,QAAA,EAAA,CACjHC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,+EAA+E,EAAA,QAAA,EAC7FD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,CACnEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,CACjEC,GAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,EAC3EA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,YAAE,IAAI,CAAC,eAAe,EAAA,CAAQ,EAC/CA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAC,gBAAgB,YACtD,qBAAqB,CAAC,IAAW,CAAC,GAC9B,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EACxDD,KAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAA,QAAA,EAAA,CACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,EAAA,CACjB,EAAA,CACF,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,SAAS,EAAC,0CAA0C,EACpD,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGtB,CAAA,EAAA,CACJ;AAEX;;;;"}

package/dist/views/YourBondsModal/components/Recommendations/RecSkeleton.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const RecSkeleton: () => React.JSX.Element;
+declare const RecSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export default RecSkeleton;

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

@@ -1,19 +1,9 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../../../../components/uikit-sdk/Flex/index.js';
 import Skeleton from '../../../../components/uikit-sdk/Skeleton/index.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',
-                } })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:gap-[10px] ape:lg:gap-[15px] ape:h-[84px]", children: [jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } }), jsx(Skeleton, { animation: "waves", style: { width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' } })] }));
 };
 
 export { RecSkeleton as default };

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

@@ -1 +1 @@
-{"version":3,"file":"RecSkeleton.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/RecSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\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":";;;;AAIA,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;;;;"}
+{"version":3,"file":"RecSkeleton.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/RecSkeleton.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Skeleton from '../../../../components/uikit-sdk/Skeleton'\n\nconst RecSkeleton = () => {\n  return (\n    <Flex className=\"ape:w-full ape:gap-[10px] ape:lg:gap-[15px] ape:h-[84px]\">\n      <Skeleton animation=\"waves\" style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }} />\n      <Skeleton animation=\"waves\" style={{ width: '100%', height: '70px', borderRadius: 'var(--ape-radius-normal)', marginBottom: '5px' }} />\n    </Flex>\n  )\n}\n\nexport default RecSkeleton\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAIA,MAAM,WAAW,GAAG,MAAK;AACvB,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0DAA0D,EAAA,QAAA,EAAA,CACxEC,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,CAAI,EACvIA,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,0BAA0B,EAAE,YAAY,EAAE,KAAK,EAAE,EAAA,CAAI,CAAA,EAAA,CAClI;AAEX;;;;"}

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

@@ -1,5 +1,4 @@
-import React from 'react';
 declare const Recommendations: ({ billAddress }: {
     billAddress?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Recommendations;

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

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import CardRecommendation from './CardRecommendation.js';
 import track from '../../../../utils/track.js';
 import useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations.js';
@@ -13,11 +13,7 @@ const Recommendations = ({ billAddress }) => {
     const isMobile = useIsMobile();
     const { data = [] } = useGetBondRecommendations(address, billAddress, '2');
     const recommendations = isMobile ? data?.slice(0, 1) : data;
-    return (jsxs(Fragment, { children: [jsx(Flex, { sx: {
-                    justifyContent: 'space-between',
-                    flexDirection: ['column', 'column', 'column', 'row'],
-                    alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],
-                }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Text, { sx: { fontSize: '13px', fontWeight: 600 }, children: "You might also be interested in: " }), jsx(Text, { sx: { fontSize: '11px', fontWeight: 400, color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx(Flex, { sx: { width: '100%', gap: ['10px', '10px', '10px', '15px'] }, children: recommendations?.length > 0 ? (recommendations.map((bond, index) => (jsx(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
+    return (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:justify-between ape:flex-col ape:lg:flex-row ape:items-start ape:lg:items-center", children: jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "13px", weight: 600, children: ["You might also be interested in:", ' '] }), jsx(Text, { size: "11px", weight: 400, style: { color: '#BEBEBE', lineHeight: '18px' }, children: "Based on yours and others users purchases." })] }) }), jsx(Flex, { className: "ape:w-full ape:gap-[10px] ape:lg:gap-[15px]", children: recommendations?.length > 0 ? (recommendations.map((bond, index) => (jsx(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => {
                         window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer');
                         track({
                             event: 'recClick',

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

@@ -1 +1 @@
-{"version":3,"file":"Recommendations.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/Recommendations.tsx"],"sourcesContent":["import React from 'react'\nimport CardRecommendation from './CardRecommendation'\nimport track from '../../../../utils/track'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport RecSkeleton from './RecSkeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst Recommendations = ({ billAddress }: { billAddress?: string }) => {\n  const { address } = useEVMAccount()\n  const isMobile = useIsMobile()\n  const { data = [] } = useGetBondRecommendations(address, billAddress, '2')\n  const recommendations = isMobile ? data?.slice(0, 1) : data\n\n  return (\n    <>\n      <Flex\n        sx={{\n          justifyContent: 'space-between',\n          flexDirection: ['column', 'column', 'column', 'row'],\n          alignItems: ['flex-start', 'flex-start', 'flex-start', 'center'],\n        }}\n      >\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text sx={{ fontSize: '13px', fontWeight: 600 }}>You might also be interested in: </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: 400, color: '#BEBEBE', lineHeight: '18px' }}>\n            Based on yours and others users purchases.\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ width: '100%', gap: ['10px', '10px', '10px', '15px'] }}>\n        {recommendations?.length > 0 ? (\n          recommendations.map((bond, index) => (\n            <CardRecommendation\n              key={`${bond.billAddress}-${index}`}\n              cardIndex={index}\n              bond={bond}\n              handleBuyBondClick={() => {\n                window.open(\n                  `https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`,\n                  '_blank',\n                  'noreferrer',\n                )\n                track({\n                  event: 'recClick',\n                  chain: bond?.chainId,\n                  data: {\n                    bond: bond.payoutTokenName,\n                    position: index,\n                  },\n                })\n              }}\n            />\n          ))\n        ) : (\n          <RecSkeleton />\n        )}\n      </Flex>\n    </>\n  )\n}\n\nexport default Recommendations\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAA4B,KAAI;AACpE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AACnC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,CAAC;AAC1E,IAAA,MAAM,eAAe,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI;AAE3D,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,cAAc,EAAE,eAAe;oBAC/B,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC;oBACpD,UAAU,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,CAAC;iBACjE,EAAA,QAAA,EAEDF,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACnCE,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,mCAAA,EAAA,CAA0C,EACzFA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,4CAAA,EAAA,CAE9E,CAAA,EAAA,CACF,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAA,QAAA,EAC/D,eAAe,EAAE,MAAM,GAAG,CAAC,IAC1B,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC9BA,GAAA,CAAC,kBAAkB,EAAA,EAEjB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,MAAK;AACvB,wBAAA,MAAM,CAAC,IAAI,CACT,CAAA,mCAAA,EAAsC,IAAI,CAAC,WAAW,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,EAClF,QAAQ,EACR,YAAY,CACb;AACD,wBAAA,KAAK,CAAC;AACJ,4BAAA,KAAK,EAAE,UAAU;4BACjB,KAAK,EAAE,IAAI,EAAE,OAAO;AACpB,4BAAA,IAAI,EAAE;gCACJ,IAAI,EAAE,IAAI,CAAC,eAAe;AAC1B,gCAAA,QAAQ,EAAE,KAAK;AAChB,6BAAA;AACF,yBAAA,CAAC;oBACJ,CAAC,EAAA,EAjBI,GAAG,IAAI,CAAC,WAAW,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAkBnC,CACH,CAAC,KAEFA,GAAA,CAAC,WAAW,KAAG,CAChB,EAAA,CACI,CAAA,EAAA,CACN;AAEP;;;;"}
+{"version":3,"file":"Recommendations.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/Recommendations.tsx"],"sourcesContent":["import React from 'react'\nimport CardRecommendation from './CardRecommendation'\nimport track from '../../../../utils/track'\nimport useGetBondRecommendations from '../../../../state/recommendations/useGetBondRecommendations'\nimport useEVMAccount from '../../../../hooks/accounts/useEVMAccount'\nimport { useIsMobile } from '../../../../hooks/useIsMobile'\nimport RecSkeleton from './RecSkeleton'\nimport Flex from '../../../../components/uikit-sdk/Flex'\nimport Text from '../../../../components/uikit-sdk/Text'\n\nconst Recommendations = ({ billAddress }: { billAddress?: string }) => {\n  const { address } = useEVMAccount()\n  const isMobile = useIsMobile()\n  const { data = [] } = useGetBondRecommendations(address, billAddress, '2')\n  const recommendations = isMobile ? data?.slice(0, 1) : data\n\n  return (\n    <>\n      <Flex className=\"ape:justify-between ape:flex-col ape:lg:flex-row ape:items-start ape:lg:items-center\">\n        <Flex className=\"ape:flex-col\">\n          <Text size=\"13px\" weight={600}>\n            You might also be interested in:{' '}\n          </Text>\n          <Text size=\"11px\" weight={400} style={{ color: '#BEBEBE', lineHeight: '18px' }}>\n            Based on yours and others users purchases.\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex className=\"ape:w-full ape:gap-[10px] ape:lg:gap-[15px]\">\n        {recommendations?.length > 0 ? (\n          recommendations.map((bond, index) => (\n            <CardRecommendation\n              key={`${bond.billAddress}-${index}`}\n              cardIndex={index}\n              bond={bond}\n              handleBuyBondClick={() => {\n                window.open(\n                  `https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`,\n                  '_blank',\n                  'noreferrer',\n                )\n                track({\n                  event: 'recClick',\n                  chain: bond?.chainId,\n                  data: {\n                    bond: bond.payoutTokenName,\n                    position: index,\n                  },\n                })\n              }}\n            />\n          ))\n        ) : (\n          <RecSkeleton />\n        )}\n      </Flex>\n    </>\n  )\n}\n\nexport default Recommendations\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAUA,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAA4B,KAAI;AACpE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AACnC,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;AAC9B,IAAA,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,CAAC;AAC1E,IAAA,MAAM,eAAe,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI;IAE3D,QACEA,4BACEC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,sFAAsF,EAAA,QAAA,EACpGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,KAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,iDACM,GAAG,CAAA,EAAA,CAC/B,EACPC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,2DAEvE,CAAA,EAAA,CACF,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1D,eAAe,EAAE,MAAM,GAAG,CAAC,IAC1B,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC9BA,GAAA,CAAC,kBAAkB,EAAA,EAEjB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,MAAK;AACvB,wBAAA,MAAM,CAAC,IAAI,CACT,CAAA,mCAAA,EAAsC,IAAI,CAAC,WAAW,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,EAClF,QAAQ,EACR,YAAY,CACb;AACD,wBAAA,KAAK,CAAC;AACJ,4BAAA,KAAK,EAAE,UAAU;4BACjB,KAAK,EAAE,IAAI,EAAE,OAAO;AACpB,4BAAA,IAAI,EAAE;gCACJ,IAAI,EAAE,IAAI,CAAC,eAAe;AAC1B,gCAAA,QAAQ,EAAE,KAAK;AAChB,6BAAA;AACF,yBAAA,CAAC;oBACJ,CAAC,EAAA,EAjBI,GAAG,IAAI,CAAC,WAAW,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE,CAkBnC,CACH,CAAC,KAEFA,GAAA,CAAC,WAAW,KAAG,CAChB,EAAA,CACI,CAAA,EAAA,CACN;AAEP;;;;"}

package/dist/views/YourBondsModal/components/TransferBondModal/TransferAction.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import { UserBill } from '../../../../types/yourbonds';
 declare const TransferAction: ({ userBill, toAddress, disabled, }: {
     userBill?: UserBill;
     toAddress?: string;
     disabled?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TransferAction;

package/dist/views/YourBondsModal/components/TransferBondModal/TransferAction.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useChainId, useSwitchChain, useWriteContract } from 'wagmi';
 import BOND_NFT_ABI from '../../../../config/abi/bondNft.json.js';