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

package/dist/components/NetworkFilter/index.js

@@ -0,0 +1,112 @@
+import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
+import { useState } from 'react';
+import Svg from '../uikit-sdk/Svg/index.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Text from '../uikit-sdk/Text/index.js';
+import Checkbox from '../uikit-sdk/Checkbox/index.js';
+import 'theme-ui';
+import '../uikit-sdk/Skeleton/types.js';
+import '../uikit-sdk/Skeleton/styles.js';
+import '../uikit-sdk/TooltipBubble/index.js';
+import 'framer-motion';
+import '../uikit-sdk/Button/types.js';
+import '../uikit-sdk/Svg/types.js';
+import '../../contexts/ModalContext.js';
+import '../../views/FullBondsView/FullBondsView.js';
+import '../uikit-sdk/Select/types.js';
+import { TESTNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, MAINNET_CHAINS } from '../../config/constants/chains.js';
+import { useSDKConfig } from '../../state/useSDKConfig.js';
+
+const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
+    // Hooks
+    const SDKConfig = useSDKConfig();
+    const chains = SDKConfig?.chains;
+    const mainnetChains = chains.filter((item) => !TESTNET_CHAINS.includes(item));
+    const testnetChains = chains.filter((item) => TESTNET_CHAINS.includes(item));
+    // State
+    const [isOpen, setIsOpen] = useState(false);
+    // Handlers
+    const handleCheckbox = (newChain) => {
+        const prevChainFilterOptions = chainFilterOption.map(String);
+        let newChainFilterOption;
+        if (newChain === 'All Chains') {
+            newChainFilterOption = ['All Chains'];
+        }
+        else if (newChain === 'All Testnet') {
+            if (prevChainFilterOptions.includes('All Testnet')) {
+                newChainFilterOption = prevChainFilterOptions.filter((option) => ![...testnetChains.map((t) => t.toString()), 'All Testnet'].includes(option));
+            }
+            else {
+                newChainFilterOption = [
+                    ...prevChainFilterOptions.filter((option) => option !== 'All Chains'),
+                    ...testnetChains.map((t) => t.toString()),
+                    'All Testnet',
+                ];
+            }
+            newChainFilterOption = newChainFilterOption.length === 0 ? ['All Chains'] : newChainFilterOption;
+        }
+        else {
+            if (prevChainFilterOptions.includes(newChain)) {
+                const filteredChains = prevChainFilterOptions.filter((option) => option !== newChain);
+                newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains;
+            }
+            else {
+                const newArray = [...prevChainFilterOptions.filter((option) => option !== 'All Chains'), newChain];
+                const allMainnetsSelected = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()));
+                newChainFilterOption = allMainnetsSelected ? ['All Chains'] : newArray;
+            }
+        }
+        setChainFilterOption(newChainFilterOption);
+    };
+    return (jsxs(Flex, { sx: { width: '100%', position: 'relative' }, children: [isOpen && (
+            // Backdrop that closes the dropdown if a user clicks outside of it
+            jsx(Flex, { sx: {
+                    background: 'transparent',
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    width: '100vw',
+                    height: '100vh',
+                    zIndex: 1000,
+                }, onClick: () => setIsOpen(false) })), jsxs(Flex, { sx: {
+                    background: 'white2',
+                    p: '6px',
+                    borderRadius: 'normal',
+                    cursor: 'pointer',
+                    alignItems: 'center',
+                    width: '100%',
+                    justifyContent: 'space-between',
+                }, onClick: () => setIsOpen(!isOpen), className: "dropdown", children: [jsx(Text, { sx: { lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx(Flex, { sx: { ml: '5px' }, children: jsx(Svg, { icon: "caret", direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsxs(Flex, { sx: {
+                    flexDirection: ['column', 'column', 'column'],
+                    position: 'absolute',
+                    top: '45px',
+                    right: '0px',
+                    width: '220px',
+                    maxHeight: ['300px', '300px', '350px'],
+                    overflowY: 'scroll',
+                    borderRadius: 'normal',
+                    background: 'white2',
+                    zIndex: 1001,
+                }, children: [['All Chains', ...mainnetChains].map((chainId) => {
+                        return (jsx(Flex, { sx: {
+                                borderRadius: 'normal',
+                                p: '5px 15px',
+                                minHeight: '40px',
+                                cursor: 'pointer',
+                                '&:hover': { bg: 'white3' },
+                            }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px' }, children: jsx(Svg, { icon: "AllChains", width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Chains" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                    }), testnetChains.length > 0 &&
+                        ['All Testnet', ...testnetChains].map((chainId) => {
+                            return (jsx(Flex, { sx: {
+                                    borderRadius: 'normal',
+                                    p: '5px 15px',
+                                    minHeight: '40px',
+                                    cursor: 'pointer',
+                                    '&:hover': { bg: 'white3' },
+                                    pl: chainId !== 'All Testnet' ? '35px' : '15px',
+                                }, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { sx: { width: '100%', alignItems: 'center', fontSize: '14px' }, children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px' }, children: jsx(Svg, { icon: "AllChains", width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: "All Testnet" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { sx: { mx: '8px', borderRadius: '50px', overflow: 'hidden' }, children: jsx(Svg, { icon: NETWORK_ICONS[chainId], width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                        })] }))] }));
+};
+
+export { NetworkFilter as default };
+//# sourceMappingURL=index.js.map

package/dist/components/NetworkFilter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { Flex, Svg, Text } from '../../components/uikit-sdk'\nimport { MAINNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, TESTNET_CHAINS } from '../../config/constants/chains'\nimport Checkbox from '../../components/uikit-sdk/Checkbox'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\nconst NetworkFilter = ({\n  chainFilterOption,\n  setChainFilterOption,\n}: {\n  chainFilterOption: string[]\n  setChainFilterOption: (newValue: string[]) => void\n}) => {\n  // Hooks\n  const SDKConfig = useSDKConfig()\n  const chains = SDKConfig?.chains as number[]\n  const mainnetChains = chains.filter((item) => !TESTNET_CHAINS.includes(item))\n  const testnetChains = chains.filter((item) => TESTNET_CHAINS.includes(item))\n\n  // State\n  const [isOpen, setIsOpen] = useState(false)\n\n  // Handlers\n  const handleCheckbox = (newChain: string) => {\n    const prevChainFilterOptions = chainFilterOption.map(String)\n    let newChainFilterOption: string[]\n\n    if (newChain === 'All Chains') {\n      newChainFilterOption = ['All Chains']\n    } else if (newChain === 'All Testnet') {\n      if (prevChainFilterOptions.includes('All Testnet')) {\n        newChainFilterOption = prevChainFilterOptions.filter(\n          (option) => ![...testnetChains.map((t) => t.toString()), 'All Testnet'].includes(option),\n        )\n      } else {\n        newChainFilterOption = [\n          ...prevChainFilterOptions.filter((option) => option !== 'All Chains'),\n          ...testnetChains.map((t) => t.toString()),\n          'All Testnet',\n        ]\n      }\n      newChainFilterOption = newChainFilterOption.length === 0 ? ['All Chains'] : newChainFilterOption\n    } else {\n      if (prevChainFilterOptions.includes(newChain)) {\n        const filteredChains = prevChainFilterOptions.filter((option) => option !== newChain)\n        newChainFilterOption = filteredChains.length === 0 ? ['All Chains'] : filteredChains\n      } else {\n        const newArray = [...prevChainFilterOptions.filter((option) => option !== 'All Chains'), newChain]\n\n        const allMainnetsSelected = MAINNET_CHAINS.every((chain) => newArray.includes(chain.toString()))\n        newChainFilterOption = allMainnetsSelected ? ['All Chains'] : newArray\n      }\n    }\n\n    setChainFilterOption(newChainFilterOption)\n  }\n\n  return (\n    <Flex sx={{ width: '100%', position: 'relative' }}>\n      {isOpen && (\n        // Backdrop that closes the dropdown if a user clicks outside of it\n        <Flex\n          sx={{\n            background: 'transparent',\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100vw',\n            height: '100vh',\n            zIndex: 1000,\n          }}\n          onClick={() => setIsOpen(false)}\n        />\n      )}\n      <Flex\n        sx={{\n          background: 'white2',\n          p: '6px',\n          borderRadius: 'normal',\n          cursor: 'pointer',\n          alignItems: 'center',\n          width: '100%',\n          justifyContent: 'space-between',\n        }}\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"dropdown\"\n      >\n        <Text sx={{ lineHeight: '22px', fontSize: '14px', fontWeight: 400, px: '10px' }}>\n          {chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})`}\n        </Text>\n        <Flex sx={{ ml: '5px' }}>\n          <Svg icon=\"caret\" direction={isOpen ? 'up' : 'down'} />\n        </Flex>\n      </Flex>\n      {isOpen && (\n        <Flex\n          sx={{\n            flexDirection: ['column', 'column', 'column'],\n            position: 'absolute',\n            top: '45px',\n            right: '0px',\n            width: '220px',\n            maxHeight: ['300px', '300px', '350px'],\n            overflowY: 'scroll',\n            borderRadius: 'normal',\n            background: 'white2',\n            zIndex: 1001,\n          }}\n        >\n          {['All Chains', ...mainnetChains].map((chainId) => {\n            return (\n              <Flex\n                key={chainId}\n                sx={{\n                  borderRadius: 'normal',\n                  p: '5px 15px',\n                  minHeight: '40px',\n                  cursor: 'pointer',\n                  '&:hover': { bg: 'white3' },\n                }}\n                onClick={() => handleCheckbox(chainId.toString())}\n              >\n                <Flex sx={{ width: '100%', alignItems: 'center', fontSize: '14px' }}>\n                  <Checkbox checked={chainFilterOption.includes(chainId.toString())} />\n                  {chainId === 'All Chains' ? (\n                    <>\n                      <Flex sx={{ mx: '8px' }}>\n                        <Svg icon=\"AllChains\" width=\"22px\" />\n                      </Flex>\n                      <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>All Chains</Text>\n                    </>\n                  ) : (\n                    <>\n                      <Flex sx={{ mx: '8px', borderRadius: '50px', overflow: 'hidden' }}>\n                        <Svg icon={NETWORK_ICONS[chainId as ChainId]} width=\"22px\" />\n                      </Flex>\n                      <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>{NETWORK_LABEL[chainId as ChainId]}</Text>\n                    </>\n                  )}\n                </Flex>\n              </Flex>\n            )\n          })}\n          {testnetChains.length > 0 &&\n            ['All Testnet', ...testnetChains].map((chainId) => {\n              return (\n                <Flex\n                  key={chainId}\n                  sx={{\n                    borderRadius: 'normal',\n                    p: '5px 15px',\n                    minHeight: '40px',\n                    cursor: 'pointer',\n                    '&:hover': { bg: 'white3' },\n                    pl: chainId !== 'All Testnet' ? '35px' : '15px',\n                  }}\n                  onClick={() => handleCheckbox(chainId.toString())}\n                >\n                  <Flex sx={{ width: '100%', alignItems: 'center', fontSize: '14px' }}>\n                    <Checkbox checked={chainFilterOption.includes(chainId.toString())} />\n                    {chainId === 'All Testnet' ? (\n                      <>\n                        <Flex sx={{ mx: '8px' }}>\n                          <Svg icon=\"AllChains\" width=\"22px\" />\n                        </Flex>\n                        <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>All Testnet</Text>\n                      </>\n                    ) : (\n                      <>\n                        <Flex sx={{ mx: '8px', borderRadius: '50px', overflow: 'hidden' }}>\n                          <Svg icon={NETWORK_ICONS[chainId as ChainId]} width=\"22px\" />\n                        </Flex>\n                        <Text sx={{ lineHeight: '22px', fontWeight: 400 }}>{NETWORK_LABEL[chainId as ChainId]}</Text>\n                      </>\n                    )}\n                  </Flex>\n                </Flex>\n              )\n            })}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default NetworkFilter\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/components/PlaceholderMonkey/index.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
+import Svg from '../uikit-sdk/Svg/index.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Text from '../uikit-sdk/Text/index.js';
+import '../uikit-sdk/Checkbox/types.js';
+import { Spinner } from 'theme-ui';
+import '../uikit-sdk/Skeleton/types.js';
+import '../uikit-sdk/Skeleton/styles.js';
+import '../uikit-sdk/TooltipBubble/index.js';
+import 'react';
+import 'framer-motion';
+import '../uikit-sdk/Button/types.js';
+import '../uikit-sdk/Svg/types.js';
+import '../../contexts/ModalContext.js';
+import '../../views/FullBondsView/FullBondsView.js';
+import '../uikit-sdk/Select/types.js';
+import ConnectButton from '../ConnectButton/index.js';
+
+const PlaceholderMonkey = ({ text, loading }) => {
+    return (jsx(Flex, { sx: {
+            width: '100%',
+            flexDirection: 'column',
+            py: '100px',
+            background: 'white2',
+            borderRadius: 'normal',
+            mt: '15px',
+        }, children: jsx(Flex, { sx: { height: '200px', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: loading ? (jsx(Spinner, { size: 100 })) : (jsxs(Fragment, { children: [jsx(Svg, { icon: "placeholderMonkey" }), jsx(Text, { sx: { fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }, children: text }), text === 'You are not connected.' && (jsx(Flex, { sx: { width: '150px', mt: '10px' }, children: jsx(ConnectButton, {}) }))] })) }) }));
+};
+
+export { PlaceholderMonkey as default };
+//# sourceMappingURL=index.js.map

package/dist/components/PlaceholderMonkey/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex, Svg, Text } from '../uikit-sdk'\nimport ConnectButton from '../ConnectButton'\nimport { Spinner } from 'theme-ui'\n\nconst PlaceholderMonkey = ({ text, loading }: { text?: string; loading?: boolean }) => {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        flexDirection: 'column',\n        py: '100px',\n        background: 'white2',\n        borderRadius: 'normal',\n        mt: '15px',\n      }}\n    >\n      <Flex sx={{ height: '200px', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>\n        {loading ? (\n          <Spinner size={100} />\n        ) : (\n          <>\n            <Svg icon=\"placeholderMonkey\" />\n            <Text sx={{ fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }}>{text}</Text>\n            {text === 'You are not connected.' && (\n              <Flex sx={{ width: '150px', mt: '10px' }}>\n                <ConnectButton />\n              </Flex>\n            )}\n          </>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAwC,KAAI;AACpF,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,EAAE,EAAE,OAAO;AACX,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,YAAY,EAAE,QAAQ;AACtB,YAAA,EAAE,EAAE,MAAM;SACX,EAAA,QAAA,EAEDA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EACnG,OAAO,IACNA,IAAC,OAAO,EAAA,EAAC,IAAI,EAAE,GAAG,EAAA,CAAI,KAEtBC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAC,mBAAmB,EAAA,CAAG,EAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,IAAI,EAAA,CAAQ,EACvF,IAAI,KAAK,wBAAwB,KAChCA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAA,QAAA,EACtCA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,EAAA,CACZ,CACR,IACA,CACJ,EAAA,CACI,EAAA,CACF;AAEX;;;;"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,11 @@
+import { jsx } from 'theme-ui/jsx-runtime';
+import { Flex, Box } from 'theme-ui';
+
+const ProgressBar = ({ value }) => {
+    return (jsx(Flex, { sx: { width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }, children: jsx(Box, { className: "progressbar-background", children: jsx(Box, { className: "progressbar-completed", style: {
+                    width: `${value <= 3 ? 3 : value}%`,
+                } }) }) }));
+};
+
+export { ProgressBar as default };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport { Box, Flex } from 'theme-ui'\n\ninterface ProgressBarProps {\n  value: number\n  color?: string\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {\n  return (\n    <Flex sx={{ width: ['100px', '100px', '100px', '100%'], alignItems: 'center', flexDirection: 'row', mt: '5px' }}>\n      <Box className=\"progressbar-background\">\n        <Box\n          className=\"progressbar-completed\"\n          style={{\n            width: `${value <= 3 ? 3 : value}%`,\n          }}\n        />\n      </Box>\n    </Flex>\n  )\n}\n\nexport default ProgressBar\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,KAAI;IAC5D,QACEA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAA,QAAA,EAC7GA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACrCA,IAAC,GAAG,EAAA,EACF,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE;AACL,oBAAA,KAAK,EAAE,CAAA,EAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA,CAAA,CAAG;iBACpC,EAAA,CACD,EAAA,CACE,EAAA,CACD;AAEX;;;;"}

package/dist/components/ProgressBar/ProgressBarWrapper.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import React from 'react';
+import { styles } from './styles.js';
+import '../uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Text from '../uikit-sdk/Text/index.js';
+import '../uikit-sdk/Checkbox/types.js';
+import Skeleton from '../uikit-sdk/Skeleton/index.js';
+import TooltipBubble from '../uikit-sdk/TooltipBubble/index.js';
+import 'framer-motion';
+import '../uikit-sdk/Button/types.js';
+import '../../contexts/ModalContext.js';
+import '../../views/FullBondsView/FullBondsView.js';
+import '../uikit-sdk/Select/types.js';
+
+const ProgressBarWrapper = ({ title, value, style, showTooltip, toolTipPlacement, toolTipTransform, toolTip, }) => {
+    return (jsxs(Flex, { sx: style, children: [jsx(Flex, { sx: { alignItems: 'center' }, children: jsx(Text, { sx: styles.titleText, children: `${title}` }) }), showTooltip ? (jsx(Flex, { sx: { alignItems: 'center', width: '100%' }, children: jsx(TooltipBubble, { placement: toolTipPlacement, transformTip: toolTipTransform, body: jsx(Flex, { sx: { justifyContent: 'center' }, children: toolTip }), width: "250px", children: jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', width: '127px' }, children: value ? value : jsx(Skeleton, { sx: styles.skeleton }) }) }) })) : (jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center' }, children: value ? value : jsx(Skeleton, { sx: styles.skeleton }) }))] }));
+};
+var ProgressBarWrapper$1 = React.memo(ProgressBarWrapper);
+
+export { ProgressBarWrapper$1 as default };
+//# sourceMappingURL=ProgressBarWrapper.js.map

package/dist/components/ProgressBar/ProgressBarWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarWrapper.js","sources":["../../../src/components/ProgressBar/ProgressBarWrapper.tsx"],"sourcesContent":["import React from 'react'\nimport { styles } from './styles'\nimport { ThemeUIStyleObject } from 'theme-ui'\nimport { Flex, Text, TooltipBubble, Skeleton } from '../uikit-sdk'\n\nexport interface ProgressBarWrapperProps {\n  title?: string\n  value?: React.ReactNode\n  value2Direction?: 'column' | 'row'\n  toolTip?: string\n  toolTipPlacement?: 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'\n  toolTipTransform?: string\n  style?: ThemeUIStyleObject\n  showTooltip?: boolean\n}\n\nconst ProgressBarWrapper: React.FC<ProgressBarWrapperProps> = ({\n  title,\n  value,\n  style,\n  showTooltip,\n  toolTipPlacement,\n  toolTipTransform,\n  toolTip,\n}) => {\n  return (\n    <Flex sx={style}>\n      <Flex sx={{ alignItems: 'center' }}>\n        <Text sx={styles.titleText}>{`${title}`}</Text>\n      </Flex>\n      {showTooltip ? (\n        <Flex sx={{ alignItems: 'center', width: '100%' }}>\n          <TooltipBubble\n            placement={toolTipPlacement}\n            transformTip={toolTipTransform}\n            body={<Flex sx={{ justifyContent: 'center' }}>{toolTip}</Flex>}\n            width=\"250px\"\n          >\n            <Flex sx={{ justifyContent: 'center', alignItems: 'center', width: '127px' }}>\n              {value ? value : <Skeleton sx={styles.skeleton} />}\n            </Flex>\n          </TooltipBubble>\n        </Flex>\n      ) : (\n        <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>\n          {value ? value : <Skeleton sx={styles.skeleton} />}\n        </Flex>\n      )}\n    </Flex>\n  )\n}\n\nexport default React.memo(ProgressBarWrapper)\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,GACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,KAAK,EAAA,QAAA,EAAA,CACbC,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAChCA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,SAAS,EAAA,QAAA,EAAG,CAAA,EAAG,KAAK,CAAA,CAAE,GAAQ,EAAA,CAC1C,EACN,WAAW,IACVA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAC/CA,GAAA,CAAC,aAAa,EAAA,EACZ,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EAAE,gBAAgB,EAC9B,IAAI,EAAEA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAG,OAAO,GAAQ,EAC9D,KAAK,EAAC,OAAO,YAEbA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EACzE,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,EAAA,CACO,EAAA,CACX,KAEPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EACzD,KAAK,GAAG,KAAK,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAA,CAAI,GAC7C,CACR,CAAA,EAAA,CACI;AAEX,CAAC;AAED,2BAAe,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;;;;"}

package/dist/components/ProgressBar/styles.js

@@ -0,0 +1,15 @@
+const styles = {
+    titleText: {
+        opacity: 0.6,
+        fontSize: '12px',
+        lineHeight: ['16px', '16px', '16px', '24px'],
+        fontWeight: 400,
+    },
+    skeleton: {
+        width: ['45px', '45px', '60px'],
+        maxHeight: '18px',
+        minHeight: '18px',
+    }};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/components/ProgressBar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/ProgressBar/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nexport const styles: Record<\n  | 'listCardContainer'\n  | 'listViewContainer'\n  | 'titleContainer'\n  | 'infoContentMobile'\n  | 'tokensContainer'\n  | 'titleText'\n  | 'skeleton'\n  | 'valueText'\n  | 'secondaryText'\n  | 'cardContentContainer'\n  | 'animationDiv'\n  | 'expandedWrapper',\n  ThemeUIStyleObject\n> = {\n  listCardContainer: {\n    borderRadius: 0,\n    flexDirection: ['column', 'column', 'column', 'row'],\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    background: 'white2',\n    borderBottom: '1px solid rgba(226, 226, 226, .2)',\n    padding: ['10px 20px 10px 20px', '10px 20px 10px 20px', '10px 20px 10px 20px', '0 30px 0 30px'],\n    margin: '0 10px 0 10px',\n    maxWidth: ['500px', '500px', '500px', '100%'],\n    minWidth: '300px',\n    width: '100%',\n    height: ['unset', 'unset', 'unset', '86px'],\n  },\n  listViewContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n  },\n  titleContainer: {\n    width: '100%',\n    justifyContent: 'space-between',\n    my: '5px',\n  },\n  infoContentMobile: {\n    display: ['flex', 'flex', 'flex', 'none'],\n    alignItems: 'center',\n  },\n  tokensContainer: {\n    alignItems: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  titleText: {\n    opacity: 0.6,\n    fontSize: '12px',\n    lineHeight: ['16px', '16px', '16px', '24px'],\n    fontWeight: 400,\n  },\n  skeleton: {\n    width: ['45px', '45px', '60px'],\n    maxHeight: '18px',\n    minHeight: '18px',\n  },\n  valueText: {\n    fontSize: ['12px', '12px', '12px', '14px'],\n    color: 'primaryBright',\n    lineHeight: '16px',\n    fontWeight: 700,\n    mr: '5px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n  secondaryText: {\n    fontSize: '12px',\n    color: 'gray',\n    lineHeight: '16px',\n    fontWeight: 400,\n  },\n  cardContentContainer: {\n    width: '100%',\n    height: '100%',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n  animationDiv: {\n    position: 'relative',\n    width: '100%',\n    maxWidth: ['500px', '500px', '500px', '100%'],\n    minWidth: '300px',\n  },\n  expandedWrapper: {\n    background: 'white3',\n    flexDirection: 'column',\n    justifyContent: 'space-between',\n    padding: '15px 10px',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n  },\n}\n"],"names":[],"mappings":"AAEO,MAAM,MAAM,GAcf;AACF,IAkCA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,GAAG;AACZ,QAAA,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC5C,QAAA,UAAU,EAAE,GAAG;AAChB,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;AAC/B,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,SAAS,EAAE,MAAM;AAClB;;;;"}

package/dist/components/SafeHTMLComponent/index.js

@@ -0,0 +1,30 @@
+import { jsx } from 'theme-ui/jsx-runtime';
+
+// Custom HTML sanitizer
+function sanitizeHTML(html) {
+    const tagWhitelist = ['a', 'br', 'span']; // Allowed tags
+    const attrWhitelist = ['target', 'rel', 'style', 'href']; // Allowed attributes
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    const elements = doc.body.querySelectorAll('*');
+    for (const el of elements) {
+        // Remove elements that are not in the whitelist
+        if (!tagWhitelist.includes(el.tagName.toLowerCase())) {
+            el?.parentNode?.removeChild(el);
+            continue;
+        }
+        // Loop through the element's attributes and remove those that are not in the whitelist
+        Array.from(el.attributes).forEach((attr) => {
+            if (!attrWhitelist.includes(attr.name.toLowerCase())) {
+                el.removeAttribute(attr.name);
+            }
+        });
+    }
+    return doc.body.innerHTML;
+}
+const SafeHTMLComponent = ({ html }) => {
+    const sanitizedHTML = sanitizeHTML(html);
+    return jsx("div", { dangerouslySetInnerHTML: { __html: sanitizedHTML } });
+};
+
+export { SafeHTMLComponent as default };
+//# sourceMappingURL=index.js.map

package/dist/components/SafeHTMLComponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/SafeHTMLComponent/index.tsx"],"sourcesContent":["import * as React from 'react'\n\n// Custom HTML sanitizer\nfunction sanitizeHTML(html: string) {\n  const tagWhitelist = ['a', 'br', 'span'] // Allowed tags\n  const attrWhitelist = ['target', 'rel', 'style', 'href'] // Allowed attributes\n\n  const doc = new DOMParser().parseFromString(html, 'text/html')\n  const elements = doc.body.querySelectorAll('*')\n\n  for (const el of elements) {\n    // Remove elements that are not in the whitelist\n    if (!tagWhitelist.includes(el.tagName.toLowerCase())) {\n      el?.parentNode?.removeChild(el)\n      continue\n    }\n\n    // Loop through the element's attributes and remove those that are not in the whitelist\n    Array.from(el.attributes).forEach((attr) => {\n      if (!attrWhitelist.includes(attr.name.toLowerCase())) {\n        el.removeAttribute(attr.name)\n      }\n    })\n  }\n\n  return doc.body.innerHTML\n}\n\nconst SafeHTMLComponent = ({ html }: { html: string }) => {\n  const sanitizedHTML = sanitizeHTML(html)\n\n  return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />\n}\n\nexport default SafeHTMLComponent\n"],"names":["_jsx"],"mappings":";;AAEA;AACA,SAAS,YAAY,CAAC,IAAY,EAAA;IAChC,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;AACxC,IAAA,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAExD,IAAA,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC;IAC9D,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;AAE/C,IAAA,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE;;AAEzB,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE;AACpD,YAAA,EAAE,EAAE,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;YAC/B;QACF;;AAGA,QAAA,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;AACzC,YAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE;AACpD,gBAAA,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YAC/B;AACF,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS;AAC3B;AAEA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAoB,KAAI;AACvD,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC;IAExC,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EAAA,CAAI;AACpE;;;;"}

package/dist/components/SlippageModal/index.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import '../uikit-sdk/Svg/types.js';
+import 'theme-ui';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Text from '../uikit-sdk/Text/index.js';
+import '../uikit-sdk/Checkbox/types.js';
+import '../uikit-sdk/Skeleton/types.js';
+import '../uikit-sdk/Skeleton/styles.js';
+import '../uikit-sdk/TooltipBubble/index.js';
+import Modal from '../uikit-sdk/Modal/index.js';
+import 'framer-motion';
+import '../../views/FullBondsView/FullBondsView.js';
+import Input from '../uikit-sdk/Input/Input.js';
+import 'react';
+import '../uikit-sdk/Button/types.js';
+import '../uikit-sdk/Select/types.js';
+import 'numbro';
+import { useSlippage } from '../../state/slippage/useSlippage.js';
+
+const SlippageModal = () => {
+    const [slippage, setSlippage] = useSlippage();
+    return (jsx(Modal, { title: "Zap Slippage", children: jsx(Flex, { sx: { maxWidth: '100%', width: '380px', flexDirection: 'column' }, children: jsx(Flex, { sx: { width: '100%', flexDirection: 'column' }, children: jsxs(Flex, { sx: { flexDirection: 'column', mb: '10px' }, children: [jsx(Text, { size: "18px", margin: "10px 0px", children: "Slippage Tolerance" }), jsxs(Flex, { sx: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx(Flex, { sx: {
+                                        height: '35px',
+                                        width: '55px',
+                                        borderRadius: 'normal',
+                                        background: slippage === 0.1 ? 'primaryButton' : 'white3',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }, onClick: () => {
+                                        setSlippage(0.1);
+                                    }, children: jsx(Text, { children: " 0.1% " }) }), jsx(Flex, { sx: {
+                                        height: '35px',
+                                        width: '55px',
+                                        borderRadius: 'normal',
+                                        background: slippage === 0.5 ? 'primaryButton' : 'white3',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }, onClick: () => {
+                                        setSlippage(0.5);
+                                    }, children: jsx(Text, { children: " 0.5% " }) }), jsx(Flex, { sx: {
+                                        height: '35px',
+                                        width: '55px',
+                                        borderRadius: 'normal',
+                                        background: slippage === 1 ? 'primaryButton' : 'white3',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        cursor: 'pointer',
+                                    }, onClick: () => {
+                                        setSlippage(1);
+                                    }, children: jsx(Text, { children: " 1.0% " }) }), jsxs(Flex, { sx: { width: '45%', position: 'relative' }, children: [jsx(Input, { sx: {
+                                                fontWeight: 700,
+                                                width: '100%',
+                                                height: '35px',
+                                                background: 'white3',
+                                                border: '0px',
+                                                borderRadius: 'normal',
+                                                ':focus': { outline: 'none' },
+                                            }, value: slippage, onChange: (e) => setSlippage(parseFloat(e.target.value)) }), jsx(Flex, { sx: {
+                                                position: 'absolute',
+                                                right: 5,
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                height: '100%',
+                                            }, children: jsx(Text, { weight: 700, children: "%" }) })] })] })] }) }) }) }));
+};
+
+export { SlippageModal as default };
+//# sourceMappingURL=index.js.map

package/dist/components/SlippageModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/SlippageModal/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex, Modal, Text } from '../uikit-sdk'\nimport { Input } from '../uikit-sdk/Input'\nimport { useSlippage } from '../../state/slippage/useSlippage'\n\nconst SlippageModal = () => {\n  const [slippage, setSlippage] = useSlippage()\n\n  return (\n    <Modal title=\"Zap Slippage\">\n      <Flex sx={{ maxWidth: '100%', width: '380px', flexDirection: 'column' }}>\n        <Flex sx={{ width: '100%', flexDirection: 'column' }}>\n          <Flex sx={{ flexDirection: 'column', mb: '10px' }}>\n            <Text size=\"18px\" margin=\"10px 0px\">\n              Slippage Tolerance\n            </Text>\n            <Flex sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 0.1 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(0.1)\n                }}\n              >\n                <Text> 0.1% </Text>\n              </Flex>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 0.5 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(0.5)\n                }}\n              >\n                <Text> 0.5% </Text>\n              </Flex>\n              <Flex\n                sx={{\n                  height: '35px',\n                  width: '55px',\n                  borderRadius: 'normal',\n                  background: slippage === 1 ? 'primaryButton' : 'white3',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: 'pointer',\n                }}\n                onClick={() => {\n                  setSlippage(1)\n                }}\n              >\n                <Text> 1.0% </Text>\n              </Flex>\n              <Flex sx={{ width: '45%', position: 'relative' }}>\n                <Input\n                  sx={{\n                    fontWeight: 700,\n                    width: '100%',\n                    height: '35px',\n                    background: 'white3',\n                    border: '0px',\n                    borderRadius: 'normal',\n                    ':focus': { outline: 'none' },\n                  }}\n                  value={slippage}\n                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSlippage(parseFloat(e.target.value))}\n                />\n                <Flex\n                  sx={{\n                    position: 'absolute',\n                    right: 5,\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    height: '100%',\n                  }}\n                >\n                  <Text weight={700}>%</Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Modal>\n  )\n}\n\nexport default SlippageModal\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/StepBubble/index.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import Svg from '../uikit-sdk/Svg/index.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import { Spinner } from 'theme-ui';
+import '../uikit-sdk/Text/types.js';
+import '../uikit-sdk/Checkbox/types.js';
+import '../uikit-sdk/Skeleton/types.js';
+import '../uikit-sdk/Skeleton/styles.js';
+import '../uikit-sdk/TooltipBubble/index.js';
+import 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import '../uikit-sdk/Button/types.js';
+import '../uikit-sdk/Svg/types.js';
+import '../../contexts/ModalContext.js';
+import '../../views/FullBondsView/FullBondsView.js';
+import '../uikit-sdk/Select/types.js';
+
+const StepBubble = ({ number, title, currentStep, hideBar, loading, }) => {
+    const stepCompleted = currentStep > number;
+    const isNextStep = number > currentStep;
+    return (jsxs(Flex, { sx: { width: !hideBar && '100%', minWidth: hideBar && '40px', alignItems: 'center' }, children: [jsxs(Flex, { sx: {
+                    minWidth: '40px',
+                    height: '40px',
+                    backgroundColor: isNextStep ? 'white2' : 'primaryButton',
+                    border: isNextStep ? '1px solid var(--theme-ui-colors-white4)' : '1px solid primaryButton',
+                    borderRadius: '40px',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    fontWeight: 500,
+                    zIndex: 1,
+                    position: 'relative',
+                }, children: [loading ? (jsx(Spinner, { size: 15 })) : stepCompleted ? (jsx(AnimatePresence, { children: jsx(motion.div, { initial: { rotate: 0 }, animate: {
+                                rotate: 360,
+                                scale: [1, 2, 1],
+                                transition: {
+                                    rotate: { duration: 0.5, ease: 'linear' },
+                                    scale: { duration: 1, ease: 'easeInOut', delay: 0.5 },
+                                },
+                            }, children: jsx(Svg, { icon: "TICK", width: '15px' }) }) })) : (number), jsx(Flex, { sx: {
+                            width: '100px',
+                            textAlign: 'center',
+                            justifyContent: 'center',
+                            fontSize: '12px',
+                            fontWeight: 500,
+                            position: 'absolute',
+                            top: '45px',
+                            left: '50%',
+                            transform: 'translate(-50%, 0)',
+                            color: 'textDisabledButton',
+                        }, children: title })] }), !hideBar && (jsx(Flex, { sx: {
+                    width: `100%`,
+                    height: '2px',
+                    top: '50%',
+                    left: `40px`,
+                    backgroundColor: stepCompleted ? 'primaryButton' : 'white4',
+                    zIndex: 0,
+                } }))] }));
+};
+
+export { StepBubble as default };
+//# sourceMappingURL=index.js.map

package/dist/components/StepBubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Flex, Svg } from '../uikit-sdk'\nimport { Spinner } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\n\nconst StepBubble = ({\n  number,\n  title,\n  currentStep,\n  hideBar,\n  loading,\n}: {\n  number: number\n  title: string\n  currentStep: number\n  hideBar?: boolean\n  loading?: boolean\n}) => {\n  const stepCompleted = currentStep > number\n  const isNextStep = number > currentStep\n  return (\n    <Flex sx={{ width: !hideBar && '100%', minWidth: hideBar && '40px', alignItems: 'center' }}>\n      <Flex\n        sx={{\n          minWidth: '40px',\n          height: '40px',\n          backgroundColor: isNextStep ? 'white2' : 'primaryButton',\n          border: isNextStep ? '1px solid var(--theme-ui-colors-white4)' : '1px solid primaryButton',\n          borderRadius: '40px',\n          justifyContent: 'center',\n          alignItems: 'center',\n          fontWeight: 500,\n          zIndex: 1,\n          position: 'relative',\n        }}\n      >\n        {loading ? (\n          <Spinner size={15} />\n        ) : stepCompleted ? (\n          <AnimatePresence>\n            <motion.div\n              initial={{ rotate: 0 }}\n              animate={{\n                rotate: 360,\n                scale: [1, 2, 1],\n                transition: {\n                  rotate: { duration: 0.5, ease: 'linear' },\n                  scale: { duration: 1, ease: 'easeInOut', delay: 0.5 },\n                },\n              }}\n            >\n              <Svg icon=\"TICK\" width={'15px'} />\n            </motion.div>\n          </AnimatePresence>\n        ) : (\n          number\n        )}\n        <Flex\n          sx={{\n            width: '100px',\n            textAlign: 'center',\n            justifyContent: 'center',\n            fontSize: '12px',\n            fontWeight: 500,\n            position: 'absolute',\n            top: '45px',\n            left: '50%',\n            transform: 'translate(-50%, 0)',\n            color: 'textDisabledButton',\n          }}\n        >\n          {title}\n        </Flex>\n      </Flex>\n      {!hideBar && (\n        <Flex\n          sx={{\n            width: `100%`,\n            height: '2px',\n            top: '50%',\n            left: `40px`,\n            backgroundColor: stepCompleted ? 'primaryButton' : 'white4',\n            zIndex: 0,\n          }}\n        />\n      )}\n    </Flex>\n  )\n}\n\nexport default StepBubble\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAKA,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,GAOR,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,WAAW,GAAG,MAAM;AAC1C,IAAA,MAAM,UAAU,GAAG,MAAM,GAAG,WAAW;AACvC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,IAAI,MAAM,EAAE,QAAQ,EAAE,OAAO,IAAI,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CACxFA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,MAAM,EAAE,MAAM;oBACd,eAAe,EAAE,UAAU,GAAG,QAAQ,GAAG,eAAe;oBACxD,MAAM,EAAE,UAAU,GAAG,yCAAyC,GAAG,yBAAyB;AAC1F,oBAAA,YAAY,EAAE,MAAM;AACpB,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,UAAU,EAAE,GAAG;AACf,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,QAAQ,EAAE,UAAU;AACrB,iBAAA,EAAA,QAAA,EAAA,CAEA,OAAO,IACNC,IAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAA,CAAI,IACnB,aAAa,IACfA,IAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACtB,OAAO,EAAE;AACP,gCAAA,MAAM,EAAE,GAAG;AACX,gCAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAChB,gCAAA,UAAU,EAAE;oCACV,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE;AACzC,oCAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,EAAE;AACtD,iCAAA;6BACF,EAAA,QAAA,EAEDA,GAAA,CAAC,GAAG,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAA,CAAI,EAAA,CACvB,GACG,KAElB,MAAM,CACP,EACDA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,4BAAA,KAAK,EAAE,OAAO;AACd,4BAAA,SAAS,EAAE,QAAQ;AACnB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,UAAU,EAAE,GAAG;AACf,4BAAA,QAAQ,EAAE,UAAU;AACpB,4BAAA,GAAG,EAAE,MAAM;AACX,4BAAA,IAAI,EAAE,KAAK;AACX,4BAAA,SAAS,EAAE,oBAAoB;AAC/B,4BAAA,KAAK,EAAE,oBAAoB;AAC5B,yBAAA,EAAA,QAAA,EAEA,KAAK,EAAA,CACD,CAAA,EAAA,CACF,EACN,CAAC,OAAO,KACPA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,oBAAA,KAAK,EAAE,CAAA,IAAA,CAAM;AACb,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,IAAI,EAAE,CAAA,IAAA,CAAM;oBACZ,eAAe,EAAE,aAAa,GAAG,eAAe,GAAG,QAAQ;AAC3D,oBAAA,MAAM,EAAE,CAAC;iBACV,EAAA,CACD,CACH,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/Toast/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import Svg from '../uikit-sdk/Svg/index.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Text from '../uikit-sdk/Text/index.js';
+import '../uikit-sdk/Checkbox/types.js';
+import { Link } from 'theme-ui';
+import '../uikit-sdk/Skeleton/types.js';
+import '../uikit-sdk/Skeleton/styles.js';
+import '../uikit-sdk/TooltipBubble/index.js';
+import '../uikit-sdk/Button/types.js';
+import IconButton from '../uikit-sdk/Button/IconButton.js';
+import '../../contexts/ModalContext.js';
+import '../../views/FullBondsView/FullBondsView.js';
+import '../uikit-sdk/Select/types.js';
+import styles from './styles.js';
+import { usePopups } from '../../state/popups/usePopups.js';
+
+const Toast = ({ popIndex, popup }) => {
+    const { variant, title, description, url } = popup;
+    const { removePopup } = usePopups();
+    const [show, setShow] = useState(true);
+    useEffect(() => {
+        setTimeout(() => {
+            setShow(false);
+            setTimeout(() => {
+                removePopup(popup);
+            }, 500);
+        }, 10000);
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, []);
+    const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request');
+    const isSlippageError = popup?.description?.includes('INSUFFICIENT') ||
+        popup?.description?.includes('Slippage') ||
+        popup?.description?.includes('Return amount is not enough');
+    const parsedErrorString = isSlippageError
+        ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'
+        : popup?.description;
+    return (jsx(AnimatePresence, { children: show && (jsxs(motion.div, { initial: { right: '-300px' }, animate: { right: '10px' }, transition: { duration: 0.5 }, exit: { right: '-300px' }, sx: { ...styles.alert, top: 108 * popIndex, zIndex: 103 }, children: [jsx(Flex, { children: jsx(Svg, { icon: variant, color: variant, width: "30px" }) }), jsxs(Flex, { sx: styles.content, children: [jsx(Text, { sx: { color: variant, fontSize: '14px', fontWeight: 500 }, children: title }), description && (jsx(Text, { sx: {
+                                fontSize: '12px',
+                                fontWeight: 400,
+                                lineHeight: '16px',
+                                maxHeight: '48px',
+                                minHeight: '16px',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                display: '-webkit-box',
+                                WebkitBoxOrient: 'vertical',
+                                WebkitLineClamp: 3, // Limit text to 3 lines
+                            }, children: parsedErrorString })), url && (jsxs(Link, { href: url, sx: styles.link, color: "text", target: "_blank", children: [jsx(Text, { mr: "5px", children: "View on Explorer" }), jsx(Svg, { icon: "external" })] })), showSupportLink && (jsxs(Link, { href: 'https://discord.com/channels/821817977917538375/1110438345701593088', sx: styles.link, color: "text", target: "_blank", children: [jsx(Text, { mr: "5px", children: "Having issues? Get support" }), jsx(Svg, { icon: "external" })] }))] }), jsx(Flex, { sx: { alignItems: 'flex-start', pt: '3px' }, onClick: () => removePopup(popup), children: jsx(IconButton, { icon: "close", color: "text", variant: "transparent" }) })] })) }));
+};
+
+export { Toast as default };
+//# sourceMappingURL=index.js.map

package/dist/components/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { Flex, IconButton, Svg, Text } from '../uikit-sdk'\nimport { Link } from 'theme-ui'\nimport styles from './styles'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\n\nconst Toast = ({ popIndex, popup }: { popIndex: number; popup: PopupProps }) => {\n  const { variant, title, description, url } = popup\n  const { removePopup } = usePopups()\n  const [show, setShow] = useState(true)\n\n  useEffect(() => {\n    setTimeout(() => {\n      setShow(false)\n      setTimeout(() => {\n        removePopup(popup)\n      }, 500)\n    }, 10000)\n    /* eslint-disable react-hooks/exhaustive-deps */\n  }, [])\n\n  const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request')\n  const isSlippageError =\n    popup?.description?.includes('INSUFFICIENT') ||\n    popup?.description?.includes('Slippage') ||\n    popup?.description?.includes('Return amount is not enough')\n\n  const parsedErrorString = isSlippageError\n    ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'\n    : popup?.description\n\n  return (\n    <AnimatePresence>\n      {show && (\n        <motion.div\n          initial={{ right: '-300px' }}\n          animate={{ right: '10px' }}\n          transition={{ duration: 0.5 }}\n          exit={{ right: '-300px' }}\n          sx={{ ...styles.alert, top: 108 * popIndex, zIndex: 103 }}\n        >\n          <Flex>\n            <Svg icon={variant} color={variant} width=\"30px\" />\n          </Flex>\n          <Flex sx={styles.content}>\n            <Text sx={{ color: variant, fontSize: '14px', fontWeight: 500 }}>{title}</Text>\n            {description && (\n              <Text\n                sx={{\n                  fontSize: '12px',\n                  fontWeight: 400,\n                  lineHeight: '16px',\n                  maxHeight: '48px',\n                  minHeight: '16px',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  display: '-webkit-box',\n                  WebkitBoxOrient: 'vertical',\n                  WebkitLineClamp: 3, // Limit text to 3 lines\n                }}\n              >\n                {parsedErrorString}\n              </Text>\n            )}\n            {url && (\n              <Link href={url} sx={styles.link} color=\"text\" target=\"_blank\">\n                <Text mr=\"5px\">View on Explorer</Text>\n                <Svg icon=\"external\" />\n              </Link>\n            )}\n            {showSupportLink && (\n              <Link\n                href={'https://discord.com/channels/821817977917538375/1110438345701593088'}\n                sx={styles.link}\n                color=\"text\"\n                target=\"_blank\"\n              >\n                <Text mr=\"5px\">Having issues? Get support</Text>\n                <Svg icon=\"external\" />\n              </Link>\n            )}\n          </Flex>\n          <Flex sx={{ alignItems: 'flex-start', pt: '3px' }} onClick={() => removePopup(popup)}>\n            <IconButton icon=\"close\" color=\"text\" variant=\"transparent\" />\n          </Flex>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\nexport default Toast\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Toast/styles.js

@@ -0,0 +1,30 @@
+const styles = {
+    alert: {
+        position: 'fixed',
+        display: 'flex',
+        width: '300px',
+        background: 'white2',
+        borderRadius: '10px',
+        pl: 9,
+        py: 6,
+        pr: 6,
+        minHeight: '90px',
+        columnGap: '11px',
+        right: 10,
+    },
+    content: {
+        flexDirection: 'column',
+        flex: 1,
+        color: 'text',
+        ml: '10px',
+    },
+    link: {
+        fontSize: 0,
+        textDecoration: 'underline',
+        color: 'primaryBright',
+        fontWeight: 'bold',
+    },
+};
+
+export { styles as default };
+//# sourceMappingURL=styles.js.map

package/dist/components/Toast/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Toast/styles.ts"],"sourcesContent":["import { ThemeUIStyleObject } from 'theme-ui'\n\nconst styles: Record<'alert' | 'content' | 'link', ThemeUIStyleObject> = {\n  alert: {\n    position: 'fixed',\n    display: 'flex',\n    width: '300px',\n    background: 'white2',\n    borderRadius: '10px',\n    pl: 9,\n    py: 6,\n    pr: 6,\n    minHeight: '90px',\n    columnGap: '11px',\n    right: 10,\n  },\n  content: {\n    flexDirection: 'column',\n    flex: 1,\n    color: 'text',\n    ml: '10px',\n  },\n  link: {\n    fontSize: 0,\n    textDecoration: 'underline',\n    color: 'primaryBright',\n    fontWeight: 'bold',\n  },\n}\n\nexport default styles\n"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAA6D;AACvE,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,YAAY,EAAE,MAAM;AACpB,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,EAAE,EAAE,CAAC;AACL,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,SAAS,EAAE,MAAM;AACjB,QAAA,KAAK,EAAE,EAAE;AACV,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,cAAc,EAAE,WAAW;AAC3B,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;;;;;"}