@ape.swap/bonds-sdk 3.1.8 → 3.1.9-test.3

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import useSwiper from '../../../../hooks/useSwiper.js';
+import { getDotPos } from '../../../../utils/getDotPos.js';
+import CardRecommendation from './CardRecommendation.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import '../../../../components/uikit-sdk/Text/types.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import 'framer-motion';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import SwiperDots from '../../../../components/uikit-sdk/SwiperDots/index.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import { styles } from '../../../Bonds/components/HotBondCards/styles.js';
+
+const CardRecommendationsMobile = ({ recommendations }) => {
+    const [activeSlide, setActiveSlide] = useState(0);
+    const { swiper, setSwiper } = useSwiper();
+    const handleSlide = (event) => {
+        const slideNumber = getDotPos(event.activeIndex, recommendations?.length);
+        setActiveSlide(slideNumber);
+    };
+    const slideTo = (index) => {
+        setActiveSlide(index);
+        swiper?.slideTo(index);
+    };
+    return (jsxs(Flex, { sx: {
+            flexDirection: 'column',
+            width: '100%',
+            alignItems: 'center',
+            mb: '15px',
+            overflow: 'hidden',
+            display: 'flex',
+            '@media screen and (min-width: 1000px)': {
+                display: 'none',
+            },
+        }, children: [jsx(Swiper, { id: "hotbondsSweper", onSwiper: setSwiper, slidesPerView: "auto", centeredSlides: true, onSlideChange: handleSlide, style: { width: '100%', paddingBottom: '15px', overflow: 'visible' }, children: recommendations?.map((bond, index) => {
+                    return (jsx(SwiperSlide, { style: {
+                            width: '100%',
+                            padding: '1px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                        }, children: jsx(CardRecommendation, { cardIndex: index, bond: bond, handleBuyBondClick: () => window.open(`https://ape.bond/bonds?bondAddress=${bond.billAddress}&bondChain=${bond.chainId}`, '_blank', 'noreferrer') }, `${bond.billAddress}-${index}`) }, index));
+                }) }), jsx(Flex, { sx: styles.bubbleContainer, children: [...Array(recommendations?.length)].map((_, i) => {
+                    return jsx(SwiperDots, { isActive: i === activeSlide, onClick: () => slideTo(i) }, i);
+                }) })] }));
+};
+
+export { CardRecommendationsMobile as default };
+//# sourceMappingURL=CardRecommendationsMobile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardRecommendationsMobile.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/CardRecommendationsMobile.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport useSwiper from '../../../../hooks/useSwiper'\nimport SwiperCore from 'swiper'\nimport { getDotPos } from '../../../../utils/getDotPos'\nimport { BondRecommendation } from '../../../../state/bonds/useGetBondRecommendations'\nimport CardRecommendation from './CardRecommendation'\nimport { Flex, SwiperDots } from '../../../../components/uikit-sdk'\nimport { styles } from '../../../Bonds/components/HotBondCards/styles'\n\nconst CardRecommendationsMobile = ({ recommendations }: { recommendations: BondRecommendation[] }) => {\n  const [activeSlide, setActiveSlide] = useState(0)\n  const { swiper, setSwiper } = useSwiper()\n  const handleSlide = (event: SwiperCore) => {\n    const slideNumber = getDotPos(event.activeIndex, recommendations?.length)\n    setActiveSlide(slideNumber)\n  }\n  const slideTo = (index: number) => {\n    setActiveSlide(index)\n    swiper?.slideTo(index)\n  }\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: 'column',\n        width: '100%',\n        alignItems: 'center',\n        mb: '15px',\n        overflow: 'hidden',\n        display: 'flex',\n        '@media screen and (min-width: 1000px)': {\n          display: 'none',\n        },\n      }}\n    >\n      <Swiper\n        id=\"hotbondsSweper\"\n        onSwiper={setSwiper}\n        slidesPerView=\"auto\"\n        centeredSlides\n        onSlideChange={handleSlide}\n        style={{ width: '100%', paddingBottom: '15px', overflow: 'visible' }}\n      >\n        {recommendations?.map((bond, index) => {\n          return (\n            <SwiperSlide\n              style={{\n                width: '100%',\n                padding: '1px',\n                display: 'flex',\n                justifyContent: 'center',\n              }}\n              key={index}\n            >\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                }\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <Flex sx={styles.bubbleContainer}>\n        {[...Array(recommendations?.length)].map((_, i) => {\n          return <SwiperDots isActive={i === activeSlide} onClick={() => slideTo(i)} key={i} />\n        })}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default CardRecommendationsMobile\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,yBAAyB,GAAG,CAAC,EAAE,eAAe,EAA6C,KAAI;IACnG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE;AACzC,IAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACxC,QAAA,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,eAAe,EAAE,MAAM,CAAC;QACzE,cAAc,CAAC,WAAW,CAAC;AAC7B,IAAA,CAAC;AACD,IAAA,MAAM,OAAO,GAAG,CAAC,KAAa,KAAI;QAChC,cAAc,CAAC,KAAK,CAAC;AACrB,QAAA,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,uCAAuC,EAAE;AACvC,gBAAA,OAAO,EAAE,MAAM;AAChB,aAAA;SACF,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,MAAM,EAAA,EACL,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAC,MAAM,EACpB,cAAc,QACd,aAAa,EAAE,WAAW,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAA,QAAA,EAEnE,eAAe,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACpC,oBAAA,QACEA,GAAA,CAAC,WAAW,EAAA,EACV,KAAK,EAAE;AACL,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,OAAO,EAAE,KAAK;AACd,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,cAAc,EAAE,QAAQ;yBACzB,EAAA,QAAA,EAGDA,GAAA,CAAC,kBAAkB,EAAA,EAEjB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,MAClB,MAAM,CAAC,IAAI,CACT,CAAA,mCAAA,EAAsC,IAAI,CAAC,WAAW,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAE,EAClF,QAAQ,EACR,YAAY,CACb,EAAA,EARE,CAAA,EAAG,IAAI,CAAC,WAAW,IAAI,KAAK,CAAA,CAAE,CAUnC,EAAA,EAbG,KAAK,CAcE;AAElB,gBAAA,CAAC,CAAC,EAAA,CACK,EACTA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,eAAe,EAAA,QAAA,EAC7B,CAAC,GAAG,KAAK,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;oBAChD,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,CAAC,KAAK,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAA,EAAO,CAAC,CAAI;AACvF,gBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACF;AAEX;;;;"}

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

@@ -0,0 +1,52 @@
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import useGetBondRecommendations from '../../../../state/bonds/useGetBondRecommendations.js';
+import { useAccount } from 'wagmi';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import Text from '../../../../components/uikit-sdk/Text/index.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import 'react';
+import 'framer-motion';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import SwiperProvider from '../../../../contexts/SwiperProvider.js';
+import CardRecommendation from './CardRecommendation.js';
+import CardRecommendationsMobile from './CardRecommendationsMobile.js';
+import track from '../../../../utils/track.js';
+
+const Recommendations = ({ onDismiss, billAddress }) => {
+    const { address } = useAccount();
+    const { data: recommendations } = useGetBondRecommendations(address, billAddress, '3');
+    return (jsx("div", { children: billAddress && recommendations && recommendations?.length > 0 && (jsxs(Fragment, { children: [jsxs(Flex, { sx: {
+                        mt: ['0px', '0px', '0px', '20px'],
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        '@media screen and (min-width: 1000px)': {
+                            flexDirection: 'row',
+                        },
+                    }, children: [jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: ['14px', '14px', '14px', '22px'], fontWeight: 600 }, children: ["You might also be interested in:", ' '] }), jsx(Text, { sx: { fontSize: ['12px', '12px', '12px', '16px'], fontWeight: 400, color: '#BEBEBE' }, children: "Based on yours and others users purchases." })] }), jsx(SwiperProvider, { children: jsx(CardRecommendationsMobile, { recommendations: recommendations }) }), jsx(Flex, { sx: { alignItems: 'center', marginBottom: '0px', cursor: 'pointer' }, onClick: () => {
+                                window.open(`https://ape.bond/apebond-ai`, '_blank', 'noreferrer');
+                                onDismiss?.();
+                            }, children: jsx("img", { width: 256, height: 27, alt: "poweredBy", src: "https://ape.bond/images/bills/powered.png" }) })] }), jsx(Flex, { sx: { mt: '20px', width: '100%', gap: '20px', display: ['none', 'none', 'none', 'flex'] }, children: recommendations &&
+                        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',
+                                    chain: bond?.chainId,
+                                    data: {
+                                        bond: bond.payoutTokenName,
+                                        position: index,
+                                    },
+                                });
+                            } }, `${bond.billAddress}-${index}`))) })] })) }));
+};
+
+export { Recommendations as default };
+//# sourceMappingURL=Recommendations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendations.js","sources":["../../../../../src/views/YourBondsModal/components/Recommendations/Recommendations.tsx"],"sourcesContent":["import React from 'react'\nimport useGetBondRecommendations from '../../../../state/bonds/useGetBondRecommendations'\nimport { useAccount } from 'wagmi'\nimport { Flex, Text } from '../../../../components/uikit-sdk'\nimport SwiperProvider from '../../../../contexts/SwiperProvider'\nimport CardRecommendation from './CardRecommendation'\nimport CardRecommendationsMobile from './CardRecommendationsMobile'\nimport track from '../../../../utils/track'\n\nconst Recommendations = ({ onDismiss, billAddress }: { onDismiss?: () => void; billAddress?: string }) => {\n  const { address } = useAccount()\n  const { data: recommendations } = useGetBondRecommendations(address, billAddress, '3')\n\n  return (\n    <div>\n      {billAddress && recommendations && recommendations?.length > 0 && (\n        <>\n          <Flex\n            sx={{\n              mt: ['0px', '0px', '0px', '20px'],\n              justifyContent: 'space-between',\n              alignItems: 'center',\n              flexDirection: 'column',\n              '@media screen and (min-width: 1000px)': {\n                flexDirection: 'row',\n              },\n            }}\n          >\n            <Flex sx={{ flexDirection: 'column' }}>\n              <Text sx={{ fontSize: ['14px', '14px', '14px', '22px'], fontWeight: 600 }}>\n                You might also be interested in:{' '}\n              </Text>\n              <Text sx={{ fontSize: ['12px', '12px', '12px', '16px'], fontWeight: 400, color: '#BEBEBE' }}>\n                Based on yours and others users purchases.\n              </Text>\n            </Flex>\n            <SwiperProvider>\n              <CardRecommendationsMobile recommendations={recommendations} />\n            </SwiperProvider>\n            <Flex\n              sx={{ alignItems: 'center', marginBottom: '0px', cursor: 'pointer' }}\n              onClick={() => {\n                window.open(`https://ape.bond/apebond-ai`, '_blank', 'noreferrer')\n                onDismiss?.()\n              }}\n            >\n              <img width={256} height={27} alt=\"poweredBy\" src=\"https://ape.bond/images/bills/powered.png\" />\n            </Flex>\n          </Flex>\n          <Flex sx={{ mt: '20px', width: '100%', gap: '20px', display: ['none', 'none', 'none', 'flex'] }}>\n            {recommendations &&\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          </Flex>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default Recommendations\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+import { jsx, Fragment, jsxs } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import { useChainId, useAccount, useSwitchChain, useWriteContract } from 'wagmi';
+import BOND_NFT_ABI from '../../../../config/abi/bondNft.json.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import '../../../../components/uikit-sdk/Text/types.js';
+import '../../../../components/uikit-sdk/Checkbox/types.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import 'framer-motion';
+import Button from '../../../../components/uikit-sdk/Button/Button.js';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../contexts/ModalContext.js';
+import '../../../FullBondsView/FullBondsView.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import { NETWORK_LABEL } from '../../../../config/constants/chains.js';
+import { useMonitorTxHash } from '../../../../hooks/useMonitorTxHash.js';
+import { usePopups } from '../../../../state/popups/usePopups.js';
+import track from '../../../../utils/track.js';
+import { reportError } from '../../../../utils/reportError.js';
+import { useSDKConfig } from '../../../../state/useSDKConfig.js';
+
+const TransferAction = ({ userBill, toAddress, disabled, }) => {
+    // Hooks
+    const SDKConfig = useSDKConfig();
+    const userChainId = useChainId();
+    const { address: account } = useAccount();
+    const { switchChain } = useSwitchChain();
+    // State
+    const [transferTxHash, setTransferTxHash] = useState(null);
+    const [loadingTx, setLoadingTx] = useState(false);
+    const { writeContractAsync } = useWriteContract();
+    const { isLoading, isSuccess: isConfirmed } = useMonitorTxHash(transferTxHash, userBill?.bond?.chainId);
+    const { addToastError } = usePopups();
+    const load = loadingTx || (isLoading && !isConfirmed);
+    const handleTransfer = async () => {
+        const address = userBill?.billNftAddress;
+        try {
+            setLoadingTx(true);
+            const tx = await writeContractAsync({
+                address: address,
+                abi: BOND_NFT_ABI,
+                functionName: 'safeTransferFrom',
+                args: [account, toAddress, userBill?.id],
+                chain: userChainId,
+                account: account,
+            });
+            if (tx) {
+                setTransferTxHash(tx);
+                track({
+                    event: 'bond',
+                    chain: userChainId,
+                    data: {
+                        cat: 'transfer',
+                        type: userBill?.bond?.billType ?? '',
+                        id: userBill?.id,
+                        from: account,
+                        to: toAddress,
+                        earnToken: userBill?.bond?.earnToken.symbol,
+                    },
+                });
+            }
+            setLoadingTx(false);
+        }
+        catch (error) {
+            console.error('Transfer failed:', error);
+            setLoadingTx(false);
+            addToastError(error.shortMessage);
+            reportError({
+                apiUrl: SDKConfig?.urls?.apiV2,
+                error,
+                extraInfo: { type: 'transfer', userBill, error },
+                chainId: userChainId,
+                account,
+            });
+        }
+    };
+    return (jsx(Fragment, { children: userChainId !== userBill?.bond?.chainId ? (jsxs(Button, { onClick: () => switchChain({ chainId: userBill?.bond?.chainId }), children: ["Switch to ", NETWORK_LABEL[userBill?.bond?.chainId]] })) : (jsx(Button, { onClick: handleTransfer, load: load, disabled: load || disabled, fullWidth: true, children: "transfer" })) }));
+};
+
+export { TransferAction as default };
+//# sourceMappingURL=TransferAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransferAction.js","sources":["../../../../../src/views/YourBondsModal/components/TransferBondModal/TransferAction.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useAccount, useChainId, useSwitchChain, useWriteContract } from 'wagmi'\nimport BOND_NFT_ABI from '../../../../config/abi/bondNft.json'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { Button } from '../../../../components/uikit-sdk'\nimport { NETWORK_LABEL } from '../../../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { useMonitorTxHash } from '../../../../hooks/useMonitorTxHash'\nimport { usePopups } from '../../../../state/popups/usePopups'\nimport track from '../../../../utils/track'\nimport { reportError } from '../../../../utils/reportError'\nimport { useSDKConfig } from '../../../../state/useSDKConfig'\n\nconst TransferAction = ({\n  userBill,\n  toAddress,\n  disabled,\n}: {\n  userBill?: UserBill\n  toAddress?: string\n  disabled?: boolean\n}) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const userChainId = useChainId()\n  const { address: account } = useAccount()\n  const { switchChain } = useSwitchChain()\n\n  // State\n  const [transferTxHash, setTransferTxHash] = useState<string | null>(null)\n  const [loadingTx, setLoadingTx] = useState(false)\n  const { writeContractAsync } = useWriteContract()\n  const { isLoading, isSuccess: isConfirmed } = useMonitorTxHash(transferTxHash, userBill?.bond?.chainId)\n  const { addToastError } = usePopups()\n\n  const load = loadingTx || (isLoading && !isConfirmed)\n  const handleTransfer = async () => {\n    const address: `0x${string}` = userBill?.billNftAddress as `0x${string}`\n    try {\n      setLoadingTx(true)\n      const tx = await writeContractAsync({\n        address: address,\n        abi: BOND_NFT_ABI,\n        functionName: 'safeTransferFrom',\n        args: [account, toAddress, userBill?.id],\n        chain: userChainId as any,\n        account: account,\n      })\n      if (tx) {\n        setTransferTxHash(tx)\n        track({\n          event: 'bond',\n          chain: userChainId,\n          data: {\n            cat: 'transfer',\n            type: userBill?.bond?.billType ?? '',\n            id: userBill?.id,\n            from: account,\n            to: toAddress,\n            earnToken: userBill?.bond?.earnToken.symbol,\n          },\n        })\n      }\n      setLoadingTx(false)\n    } catch (error: any) {\n      console.error('Transfer failed:', error)\n      setLoadingTx(false)\n      addToastError(error.shortMessage)\n      reportError({\n        apiUrl: SDKConfig?.urls?.apiV2,\n        error,\n        extraInfo: { type: 'transfer', userBill, error },\n        chainId: userChainId,\n        account,\n      })\n    }\n  }\n  return (\n    <>\n      {userChainId !== userBill?.bond?.chainId ? (\n        <Button onClick={() => switchChain({ chainId: userBill?.bond?.chainId as ChainId })}>\n          Switch to {NETWORK_LABEL[userBill?.bond?.chainId as ChainId]}\n        </Button>\n      ) : (\n        <Button onClick={handleTransfer} load={load} disabled={load || disabled} fullWidth>\n          transfer\n        </Button>\n      )}\n    </>\n  )\n}\n\nexport default TransferAction\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import React, { useState } from 'react';
+import BigNumber from 'bignumber.js';
+import '../../../../components/uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import Flex from '../../../../components/uikit-sdk/Flex/index.js';
+import Text from '../../../../components/uikit-sdk/Text/index.js';
+import Checkbox from '../../../../components/uikit-sdk/Checkbox/index.js';
+import '../../../../components/uikit-sdk/Skeleton/types.js';
+import '../../../../components/uikit-sdk/Skeleton/styles.js';
+import '../../../../components/uikit-sdk/TooltipBubble/index.js';
+import Modal from '../../../../components/uikit-sdk/Modal/index.js';
+import 'framer-motion';
+import '../../../FullBondsView/FullBondsView.js';
+import Input from '../../../../components/uikit-sdk/Input/Input.js';
+import '../../../../components/uikit-sdk/Button/types.js';
+import '../../../../components/uikit-sdk/Select/types.js';
+import { getBalanceNumber } from '../../../../utils/getBalanceNumber.js';
+import TokenImage from '../../../../components/uikit-sdk/TokenImage/index.js';
+import 'numbro';
+import TransferAction from './TransferAction.js';
+import { getPendingVestingString } from '../../../../utils/displayHelpers.js';
+
+const TransferModal = ({ onDismiss, userBill }) => {
+    // State
+    const [confirmSend, setConfirmSend] = useState(false);
+    const [toAddress, setToAddress] = useState('');
+    // Data
+    const bond = userBill?.bond;
+    const chainId = bond?.chainId;
+    const { lpToken, earnToken } = userBill?.bond ?? {};
+    const pending = chainId &&
+        getBalanceNumber(new BigNumber(userBill?.payout ?? 0), earnToken?.decimals?.[chainId] ?? 18)?.toFixed(4);
+    return (jsxs(Modal, { onDismiss: onDismiss, title: "Transfer Bond", zIndex: 130, children: [jsx(Flex, { sx: { mt: '20px' }, children: jsx(Text, { sx: { fontWeight: 700 }, children: " Transferring: " }) }), jsxs(Flex, { sx: { flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }, children: [jsxs(Text, { sx: { fontWeight: 700, fontSize: '25px' }, children: [lpToken?.symbol, " #", userBill?.id] }), jsxs(Flex, { sx: { mt: '5px' }, children: [jsxs(Flex, { sx: { flexDirection: 'column', mr: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Vesting time" }), getPendingVestingString(userBill)] }), jsxs(Flex, { sx: { flexDirection: 'column', ml: '20px' }, children: [jsx(Text, { sx: { textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }, children: "Pending" }), jsxs(Flex, { children: [jsx(TokenImage, { symbol: userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol, size: 20, chain: userBill?.bond?.chainId }), jsx(Text, { sx: { fontWeight: 700, ml: '5px' }, children: pending })] })] })] })] }), jsxs(Flex, { sx: { flexDirection: 'column', mt: '30px' }, children: [jsx(Text, { sx: { fontWeight: 700 }, children: "Receiving Address:" }), jsx(Input, { mt: "10px", size: "lg", placeholder: 'Paste the address here', value: toAddress, onChange: (e) => setToAddress(e.target.value), style: { width: '345px', border: 'none' } })] }), jsx(Flex, { sx: { mt: '15px' }, children: jsxs(Text, { sx: { lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }, children: [jsx(Text, { sx: { display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }, children: "WARNING" }), "When transfering the NFT all pending rewards will also be transfered to the receiver address."] }) }), jsxs(Flex, { onClick: () => setConfirmSend((prev) => !prev), sx: { mt: '20px', cursor: 'pointer', alignItems: 'center' }, children: [jsx(Checkbox, { checked: confirmSend }), jsx(Text, { sx: { ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }, children: "I understand the new wallet gains ownership of all unclaimed assets." })] }), jsx(Flex, { sx: { justifyContent: 'center', mt: '15px' }, children: jsx(TransferAction, { userBill: userBill, toAddress: toAddress, disabled: !confirmSend || !toAddress }) })] }));
+};
+var TransferBondModal = React.memo(TransferModal);
+
+export { TransferBondModal as default };
+//# sourceMappingURL=index.js.map

package/dist/views/YourBondsModal/components/TransferBondModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/views/YourBondsModal/components/TransferBondModal/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport BigNumber from 'bignumber.js'\nimport { CheckBox, Flex, Modal, Text } from '../../../../components/uikit-sdk'\nimport { UserBill } from '../../../../types/yourbonds'\nimport { getBalanceNumber } from '../../../../utils/getBalanceNumber'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport TokenImage from '../../../../components/uikit-sdk/TokenImage'\nimport { Input } from '../../../../components/uikit-sdk/Input'\nimport TransferAction from './TransferAction'\nimport { getPendingVestingString } from '../../../../utils/displayHelpers'\n\ninterface TransferBillModalProps {\n  onDismiss?: () => void\n  userBill?: UserBill\n}\n\nconst TransferModal: React.FC<TransferBillModalProps> = ({ onDismiss, userBill }) => {\n  // State\n  const [confirmSend, setConfirmSend] = useState(false)\n  const [toAddress, setToAddress] = useState('')\n\n  // Data\n  const bond = userBill?.bond\n  const chainId = bond?.chainId\n  const { lpToken, earnToken } = userBill?.bond ?? {}\n  const pending =\n    chainId &&\n    getBalanceNumber(new BigNumber(userBill?.payout ?? 0), earnToken?.decimals?.[chainId as ChainId] ?? 18)?.toFixed(4)\n  return (\n    <Modal onDismiss={onDismiss} title=\"Transfer Bond\" zIndex={130}>\n      <Flex sx={{ mt: '20px' }}>\n        <Text sx={{ fontWeight: 700 }}> Transferring: </Text>\n      </Flex>\n      <Flex sx={{ flexDirection: 'column', alignItems: 'center', mt: '30px', mr: '10px' }}>\n        <Text sx={{ fontWeight: 700, fontSize: '25px' }}>\n          {lpToken?.symbol} #{userBill?.id}\n        </Text>\n        <Flex sx={{ mt: '5px' }}>\n          <Flex sx={{ flexDirection: 'column', mr: '20px' }}>\n            <Text sx={{ textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }}>Vesting time</Text>\n            {getPendingVestingString(userBill)}\n          </Flex>\n          <Flex sx={{ flexDirection: 'column', ml: '20px' }}>\n            <Text sx={{ textAlign: 'center', width: '100%', fontSize: '12px', opacity: 0.6 }}>Pending</Text>\n            <Flex>\n              <TokenImage\n                symbol={userBill?.bond?.showcaseTokenName ?? userBill?.bond?.earnToken?.symbol}\n                size={20}\n                chain={userBill?.bond?.chainId}\n              />\n              <Text sx={{ fontWeight: 700, ml: '5px' }}>{pending}</Text>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n      <Flex sx={{ flexDirection: 'column', mt: '30px' }}>\n        <Text sx={{ fontWeight: 700 }}>Receiving Address:</Text>\n        <Input\n          mt=\"10px\"\n          size=\"lg\"\n          placeholder={'Paste the address here'}\n          value={toAddress}\n          onChange={(e: any) => setToAddress(e.target.value)}\n          style={{ width: '345px', border: 'none' }}\n        />\n      </Flex>\n      <Flex sx={{ mt: '15px' }}>\n        <Text sx={{ lineHeight: '18px', fontSize: '12px', color: 'rgba(223, 65, 65, 1)' }}>\n          <Text\n            sx={{ display: 'block', width: '100%', fontWeight: 700, fontSize: '13px', color: 'rgba(223, 65, 65, 1)' }}\n          >\n            WARNING\n          </Text>\n          When transfering the NFT all pending rewards will also be transfered to the receiver address.\n        </Text>\n      </Flex>\n      <Flex\n        onClick={() => setConfirmSend((prev) => !prev)}\n        sx={{ mt: '20px', cursor: 'pointer', alignItems: 'center' }}\n      >\n        <CheckBox checked={confirmSend} />\n        <Text sx={{ ml: '10px', fontSize: '12px', fontWeight: 500, lineHeight: '18px' }}>\n          I understand the new wallet gains ownership of all unclaimed assets.\n        </Text>\n      </Flex>\n      <Flex sx={{ justifyContent: 'center', mt: '15px' }}>\n        <TransferAction userBill={userBill} toAddress={toAddress} disabled={!confirmSend || !toAddress} />\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default React.memo(TransferModal)\n"],"names":["_jsxs","_jsx","CheckBox"],"mappings":"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"}

package/dist/views/ZapModal/index.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { useState, useCallback } from 'react';
+import Svg from '../../components/uikit-sdk/Svg/index.js';
+import Flex from '../../components/uikit-sdk/Flex/index.js';
+import Text from '../../components/uikit-sdk/Text/index.js';
+import '../../components/uikit-sdk/Checkbox/types.js';
+import { Box, Link } from 'theme-ui';
+import '../../components/uikit-sdk/Skeleton/types.js';
+import '../../components/uikit-sdk/Skeleton/styles.js';
+import '../../components/uikit-sdk/TooltipBubble/index.js';
+import Modal from '../../components/uikit-sdk/Modal/index.js';
+import 'framer-motion';
+import '../FullBondsView/FullBondsView.js';
+import Button from '../../components/uikit-sdk/Button/Button.js';
+import '../../components/uikit-sdk/Svg/types.js';
+import '../../components/uikit-sdk/Button/types.js';
+import '../../components/uikit-sdk/Select/types.js';
+import BigNumber from 'bignumber.js';
+import { SoulZapTokenManager } from '../../config/constants/addresses.js';
+import ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader.js';
+import { NETWORK_LABEL } from '../../config/constants/chains.js';
+import TokenSelectorPanel from '../../components/TokenSelectorPanel/index.js';
+import { useChainId, useSwitchChain, useSendTransaction } from 'wagmi';
+import useSoulZapTokenQuote from '../../state/zap/useSoulZapTokenQuote.js';
+import useCurrencyBalance from '../../state/balance/useCurrencyBalance.js';
+import useCurrencyPrice from '../../state/price/useCurrencyPrice.js';
+import { useApproval, ApprovalState } from '../../state/allowance/useAllowance.js';
+import { parseEther } from 'viem';
+import useTokenFromZapList from '../../hooks/useTokenFromZapList.js';
+import useModal from '../../hooks/useModal.js';
+import SlippageModal from '../../components/SlippageModal/index.js';
+import { useMonitorTxHash } from '../../hooks/useMonitorTxHash.js';
+import { usePopups } from '../../state/popups/usePopups.js';
+import ConnectButton from '../../components/ConnectButton/index.js';
+import { WNATIVE } from '../../config/constants/tokens.js';
+import track from '../../utils/track.js';
+import { getSymbol } from '../../utils/getNativeTicker.js';
+import { reportError } from '../../utils/reportError.js';
+import { useSDKConfig } from '../../state/useSDKConfig.js';
+
+const ZapModal = ({ onDismiss, outputToken, account, chainId }) => {
+    // State
+    const [pendingTx, setPendingTx] = useState(false);
+    const [typedValue, setTypedValue] = useState('');
+    const [inputTokenString, setInputTokenString] = useState('NATIVE');
+    // Hooks
+    const SDKConfig = useSDKConfig();
+    const userChainId = useChainId();
+    const { switchChain } = useSwitchChain();
+    const inputToken = useTokenFromZapList(inputTokenString, chainId);
+    const { data: hash, sendTransactionAsync } = useSendTransaction();
+    const { isLoading: isConfirming } = useMonitorTxHash(hash, chainId);
+    const { addToastError } = usePopups();
+    // Modals
+    const [onOpenSlippageModal] = useModal(jsx(SlippageModal, {}));
+    // Prices & Balances
+    const { data: outputTokenBalance } = useCurrencyBalance(outputToken ?? null, account ?? null, chainId);
+    const outputTokenPrice = useCurrencyPrice(outputToken ?? null, chainId);
+    const { data: inputTokenBalance } = useCurrencyBalance(inputToken ?? null, account ?? null, chainId);
+    const inputTokenPrice = useCurrencyPrice(inputToken ?? null, chainId);
+    const hasEnoughBalance = new BigNumber(typedValue).lte(new BigNumber(inputTokenBalance ?? '0'));
+    const isWrap = inputTokenString === 'NATIVE' &&
+        outputToken?.address?.[chainId]?.toLowerCase() === WNATIVE[chainId]?.address?.[chainId]?.toLowerCase();
+    const outputTokenBalanceString = outputTokenBalance ? new BigNumber(outputTokenBalance).toPrecision(5) : 'loading';
+    // Zap Quote
+    const [fetchingQuote, zapData, outputValue, zapError] = useSoulZapTokenQuote(typedValue, inputToken, outputToken, chainId, account);
+    // Functions
+    const handleCurrencySelect = useCallback((newInputToken) => {
+        setTypedValue('');
+        setInputTokenString(newInputToken);
+    }, []);
+    const handleMaxInput = useCallback(() => {
+        setTypedValue(inputTokenBalance ?? '');
+    }, [inputTokenBalance]);
+    const soulZapCallback = useCallback(async () => {
+        if (zapData && zapData?.txData?.to && zapData?.txData?.data) {
+            try {
+                console.log(zapData);
+                console.log('Attempting zap tx');
+                const validated18DecimalAmount = new BigNumber(typedValue ?? '0').toFixed(18, 5);
+                const parsedValue = parseEther(validated18DecimalAmount);
+                setPendingTx(true);
+                await sendTransactionAsync({
+                    to: zapData.txData.to,
+                    data: zapData.txData.data,
+                    value: inputToken === 'NATIVE' ? parsedValue : undefined,
+                })
+                    .then(() => {
+                    track({
+                        event: 'zap',
+                        chain: chainId,
+                        data: {
+                            cat: 'LP',
+                            token1: getSymbol(inputToken),
+                            token2: getSymbol(outputToken),
+                            amount: typedValue,
+                            usdAmount: parseFloat(typedValue) * (inputTokenPrice?.price ?? 0),
+                        },
+                    });
+                })
+                    .finally(() => setPendingTx(false));
+            }
+            catch (e) {
+                console.error(e);
+                setPendingTx(false);
+                addToastError(e?.shortMessage);
+                reportError({
+                    apiUrl: SDKConfig?.urls?.apiV2,
+                    error: e,
+                    extraInfo: { type: 'zap-lp', zapData, e },
+                    chainId,
+                    account,
+                });
+            }
+        }
+    }, [
+        zapData,
+        typedValue,
+        sendTransactionAsync,
+        inputToken,
+        chainId,
+        outputToken,
+        inputTokenPrice?.price,
+        addToastError,
+        SDKConfig?.urls?.apiV2,
+        account,
+    ]);
+    // Approve hook
+    const [approvalState, approveCallback] = useApproval(typedValue, inputToken ?? null, SoulZapTokenManager[chainId] ?? null, account ?? null, chainId);
+    const handleApprove = () => {
+        approveCallback().then(() => {
+            track({
+                event: 'approveTokenClick',
+                chain: userChainId,
+                data: {
+                    bond: null,
+                    earnToken: outputToken.symbol,
+                },
+            });
+        });
+    };
+    return (jsxs(Modal, { children: [jsx(ModalHeader, { onDismiss: onDismiss, children: jsxs(Flex, { sx: { width: '100%', justifyContent: 'space-between' }, children: [jsxs(Text, { sx: { fontSize: '22px', fontWeight: 700, lineHeight: '30px' }, children: ["Zap ", jsx(Svg, { icon: "ZapIcon" })] }), jsx(Flex, { onClick: onOpenSlippageModal, sx: { mr: '15px' }, children: jsx(Svg, { icon: "cog", width: "16px" }) })] }) }), jsxs(Flex, { sx: { flexDirection: 'column', pt: '10px', gap: '10px' }, children: [jsx(Flex, { sx: { position: 'relative' }, children: jsx(Text, { children: "From:" }) }), jsx(Flex, { sx: { width: '100%', height: 'auto', justifyContent: 'space-between' }, children: jsx(TokenSelectorPanel, { typedValue: typedValue, setTypedValue: setTypedValue, selectedToken: inputToken, handleValueBtn: handleMaxInput, handleCurrencySelect: handleCurrencySelect, chainId: chainId, enableZap: true, tokenBalance: inputTokenBalance ?? undefined, selectedTokenPrice: inputTokenPrice?.price }) }), jsxs(Flex, { sx: { position: 'relative', mt: '10px' }, children: [jsx(Text, { children: "To:" }), jsx(Box, { sx: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: jsx(Svg, { icon: "ZapArrow" }) })] }), jsx(TokenSelectorPanel, { typedValue: isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18), setTypedValue: () => null, selectedToken: outputToken, handleCurrencySelect: () => null, chainId: chainId, enableZap: false, tokenBalance: outputTokenBalanceString, selectedTokenPrice: outputTokenPrice?.price }), jsx(Flex, { className: "button-container zap", children: !account ? (jsx(ConnectButton, {})) : userChainId !== chainId ? (jsxs(Button, { className: "switch-button zap", onClick: (event) => {
+                                event.stopPropagation();
+                                switchChain({ chainId: chainId });
+                            }, children: ["Switch to ", NETWORK_LABEL[chainId]] })) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (jsx(Button, { onClick: handleApprove, fullWidth: true, load: approvalState === ApprovalState.PENDING, disable: approvalState === ApprovalState.PENDING, children: pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE' })) : (jsx(Button, { onClick: soulZapCallback, fullWidth: true, load: pendingTx || fetchingQuote || isConfirming, disabled: pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError, children: zapError
+                                ? 'something went wrong'
+                                : fetchingQuote
+                                    ? 'Loading'
+                                    : !hasEnoughBalance && zapData
+                                        ? 'Not enough balance'
+                                        : 'BUY' })) }), jsx(Flex, { sx: { marginTop: '10px', justifyContent: 'center' }, children: jsx(Link, { href: "https://docs.ape.bond/apebond/products-and-features/zap", target: "_blank", rel: "noopener noreferrer", sx: { textDecoration: 'none' }, children: jsxs(Text, { style: { fontSize: '12px', lineHeight: '18px', fontWeight: 400, borderBottom: '1px solid' }, children: ["Learn more", '>'] }) }) })] })] }));
+};
+
+export { ZapModal as default };
+//# sourceMappingURL=index.js.map

package/dist/views/ZapModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/views/ZapModal/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { Button, Flex, Modal, Svg, Text } from '../../components/uikit-sdk'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport BigNumber from 'bignumber.js'\nimport { SoulZapTokenManager } from '../../config/constants/addresses'\nimport ModalHeader from '../../components/uikit-sdk/Modal/ModalHeader'\nimport { Box, Link } from 'theme-ui'\nimport { NETWORK_LABEL } from '../../config/constants/chains'\nimport TokenSelectorPanel from '../../components/TokenSelectorPanel'\nimport { useChainId, useSendTransaction, useSwitchChain } from 'wagmi'\nimport useSoulZapTokenQuote from '../../state/zap/useSoulZapTokenQuote'\nimport useCurrencyBalance from '../../state/balance/useCurrencyBalance'\nimport useCurrencyPrice from '../../state/price/useCurrencyPrice'\nimport { ApprovalState, useApproval } from '../../state/allowance/useAllowance'\nimport { parseEther } from 'viem'\nimport useTokenFromZapList from '../../hooks/useTokenFromZapList'\nimport useModal from '../../hooks/useModal'\nimport SlippageModal from '../../components/SlippageModal'\nimport { useMonitorTxHash } from '../../hooks/useMonitorTxHash'\nimport { usePopups } from '../../state/popups/usePopups'\nimport ConnectButton from '../../components/ConnectButton'\nimport { WNATIVE } from '../../config/constants/tokens'\nimport track from '../../utils/track'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { reportError } from '../../utils/reportError'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\n/**\n * @param chainId this is the chainId of the outputToken\n */\n\ninterface ZapModalProps {\n  onDismiss?: () => void\n  outputToken: Token\n  chainId: ChainId\n  account?: string\n}\n\nconst ZapModal = ({ onDismiss, outputToken, account, chainId }: ZapModalProps) => {\n  // State\n  const [pendingTx, setPendingTx] = useState(false)\n  const [typedValue, setTypedValue] = useState('')\n  const [inputTokenString, setInputTokenString] = useState('NATIVE')\n\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const userChainId = useChainId()\n  const { switchChain } = useSwitchChain()\n  const inputToken = useTokenFromZapList(inputTokenString, chainId)\n  const { data: hash, sendTransactionAsync } = useSendTransaction()\n\n  const { isLoading: isConfirming } = useMonitorTxHash(hash, chainId)\n  const { addToastError } = usePopups()\n\n  // Modals\n  const [onOpenSlippageModal] = useModal(<SlippageModal />)\n\n  // Prices & Balances\n  const { data: outputTokenBalance } = useCurrencyBalance(outputToken ?? null, account ?? null, chainId)\n  const outputTokenPrice = useCurrencyPrice(outputToken ?? null, chainId)\n\n  const { data: inputTokenBalance } = useCurrencyBalance(inputToken ?? null, account ?? null, chainId)\n  const inputTokenPrice = useCurrencyPrice(inputToken ?? null, chainId)\n\n  const hasEnoughBalance = new BigNumber(typedValue).lte(new BigNumber(inputTokenBalance ?? '0'))\n  const isWrap =\n    inputTokenString === 'NATIVE' &&\n    outputToken?.address?.[chainId]?.toLowerCase() === WNATIVE[chainId]?.address?.[chainId]?.toLowerCase()\n  const outputTokenBalanceString = outputTokenBalance ? new BigNumber(outputTokenBalance).toPrecision(5) : 'loading'\n\n  // Zap Quote\n  const [fetchingQuote, zapData, outputValue, zapError] = useSoulZapTokenQuote(\n    typedValue,\n    inputToken,\n    outputToken,\n    chainId,\n    account,\n  )\n\n  // Functions\n  const handleCurrencySelect = useCallback((newInputToken: string) => {\n    setTypedValue('')\n    setInputTokenString(newInputToken)\n  }, [])\n\n  const handleMaxInput = useCallback(() => {\n    setTypedValue(inputTokenBalance ?? '')\n  }, [inputTokenBalance])\n\n  const soulZapCallback = useCallback(async () => {\n    if (zapData && zapData?.txData?.to && zapData?.txData?.data) {\n      try {\n        console.log(zapData)\n        console.log('Attempting zap tx')\n        const validated18DecimalAmount = new BigNumber(typedValue ?? '0').toFixed(18, 5)\n        const parsedValue = parseEther(validated18DecimalAmount)\n        setPendingTx(true)\n        await sendTransactionAsync({\n          to: zapData.txData.to,\n          data: zapData.txData.data,\n          value: inputToken === 'NATIVE' ? parsedValue : undefined,\n        })\n          .then(() => {\n            track({\n              event: 'zap',\n              chain: chainId,\n              data: {\n                cat: 'LP',\n                token1: getSymbol(inputToken),\n                token2: getSymbol(outputToken),\n                amount: typedValue,\n                usdAmount: parseFloat(typedValue) * (inputTokenPrice?.price ?? 0),\n              },\n            })\n          })\n          .finally(() => setPendingTx(false))\n      } catch (e: any) {\n        console.error(e)\n        setPendingTx(false)\n        addToastError(e?.shortMessage)\n        reportError({\n          apiUrl: SDKConfig?.urls?.apiV2,\n          error: e,\n          extraInfo: { type: 'zap-lp', zapData, e },\n          chainId,\n          account,\n        })\n      }\n    }\n  }, [\n    zapData,\n    typedValue,\n    sendTransactionAsync,\n    inputToken,\n    chainId,\n    outputToken,\n    inputTokenPrice?.price,\n    addToastError,\n    SDKConfig?.urls?.apiV2,\n    account,\n  ])\n\n  // Approve hook\n  const [approvalState, approveCallback] = useApproval(\n    typedValue,\n    inputToken ?? null,\n    SoulZapTokenManager[chainId] ?? null,\n    account ?? null,\n    chainId,\n  )\n  const handleApprove = () => {\n    approveCallback().then(() => {\n      track({\n        event: 'approveTokenClick',\n        chain: userChainId,\n        data: {\n          bond: null,\n          earnToken: outputToken.symbol,\n        },\n      })\n    })\n  }\n\n  return (\n    <Modal>\n      <ModalHeader onDismiss={onDismiss}>\n        <Flex sx={{ width: '100%', justifyContent: 'space-between' }}>\n          <Text sx={{ fontSize: '22px', fontWeight: 700, lineHeight: '30px' }}>\n            Zap <Svg icon=\"ZapIcon\" />\n          </Text>\n          <Flex onClick={onOpenSlippageModal} sx={{ mr: '15px' }}>\n            <Svg icon=\"cog\" width=\"16px\" />\n          </Flex>\n        </Flex>\n      </ModalHeader>\n      <Flex sx={{ flexDirection: 'column', pt: '10px', gap: '10px' }}>\n        <Flex sx={{ position: 'relative' }}>\n          <Text>From:</Text>\n        </Flex>\n        <Flex sx={{ width: '100%', height: 'auto', justifyContent: 'space-between' }}>\n          <TokenSelectorPanel\n            typedValue={typedValue}\n            setTypedValue={setTypedValue}\n            selectedToken={inputToken}\n            handleValueBtn={handleMaxInput}\n            handleCurrencySelect={handleCurrencySelect}\n            chainId={chainId}\n            enableZap={true}\n            tokenBalance={inputTokenBalance ?? undefined}\n            selectedTokenPrice={inputTokenPrice?.price}\n          />\n        </Flex>\n        <Flex sx={{ position: 'relative', mt: '10px' }}>\n          <Text>To:</Text>\n          <Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>\n            <Svg icon=\"ZapArrow\" />\n          </Box>\n        </Flex>\n        <TokenSelectorPanel\n          typedValue={isWrap ? typedValue : outputValue === 0 ? '' : outputValue.toFixed(18)}\n          setTypedValue={() => null}\n          selectedToken={outputToken}\n          handleCurrencySelect={() => null}\n          chainId={chainId}\n          enableZap={false}\n          tokenBalance={outputTokenBalanceString}\n          selectedTokenPrice={outputTokenPrice?.price}\n        />\n        <Flex className=\"button-container zap\">\n          {!account ? (\n            <ConnectButton />\n          ) : userChainId !== chainId ? (\n            <Button\n              className=\"switch-button zap\"\n              onClick={(event) => {\n                event.stopPropagation()\n                switchChain({ chainId: chainId })\n              }}\n            >\n              Switch to {NETWORK_LABEL[chainId]}\n            </Button>\n          ) : approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING ? (\n            <Button\n              onClick={handleApprove}\n              fullWidth\n              load={approvalState === ApprovalState.PENDING}\n              disable={approvalState === ApprovalState.PENDING}\n            >\n              {pendingTx || approvalState === ApprovalState.PENDING ? 'ENABLING' : 'ENABLE'}\n            </Button>\n          ) : (\n            <Button\n              onClick={soulZapCallback}\n              fullWidth\n              load={pendingTx || fetchingQuote || isConfirming}\n              disabled={pendingTx || fetchingQuote || !zapData || !hasEnoughBalance || isConfirming || zapError}\n            >\n              {zapError\n                ? 'something went wrong'\n                : fetchingQuote\n                  ? 'Loading'\n                  : !hasEnoughBalance && zapData\n                    ? 'Not enough balance'\n                    : 'BUY'}\n            </Button>\n          )}\n        </Flex>\n        <Flex sx={{ marginTop: '10px', justifyContent: 'center' }}>\n          <Link\n            href=\"https://docs.ape.bond/apebond/products-and-features/zap\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            sx={{ textDecoration: 'none' }}\n          >\n            <Text style={{ fontSize: '12px', lineHeight: '18px', fontWeight: 400, borderBottom: '1px solid' }}>\n              Learn more{'>'}\n            </Text>\n          </Link>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default ZapModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ape Bond SDK",
   "author": "Ape Bond",
   "license": "MIT",
-  "version": "3.1.8",
+  "version": "3.1.9-test.3",
   "module": "dist/main.js",
   "type": "module",
   "types": "dist/main.d.ts",
@@ -33,8 +33,8 @@
     "@rainbow-me/rainbowkit": "^2.2.8",
     "@tanstack/react-query": "5.x",
     "axios": ">=1.7.2",
-    "react": ">=17 <19",
-    "react-dom": ">=17 <19",
+    "react": ">=17",
+    "react-dom": ">=17",
     "wagmi": ">=2.14.16"
   },
   "devDependencies": {
@@ -49,8 +49,6 @@
     "@types/dom-to-image": "^2.6.7",
     "@types/lodash": "^4.17.6",
     "@types/node": "^24.0.13",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "1.8.2",
     "eslint": "^9.28.0",
@@ -67,7 +65,11 @@
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.34.0",
     "vite": "5.4.21",
-    "yalc": "^1.0.0-pre.53"
+    "yalc": "^1.0.0-pre.53",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3"
   },
   "dependencies": {
     "@ape.swap/apeswap-lists": "4.4.0",
@@ -79,9 +81,9 @@
     "lightweight-charts": "4.1.5",
     "lodash": "^4.17.21",
     "numbro": "^2.5.0",
-    "primereact": "10.6.2",
-    "react-chartjs-2": "5.2.0",
-    "swiper": "8.4.7",
+    "primereact": "10.9.7",
+    "react-chartjs-2": "5.3.1",
+    "swiper": "12.1.3",
     "theme-ui": "0.16.2"
   },
   "browserslist": {