npm - @ape.swap/bonds-sdk - Versions diffs - 3.3.0-test.4 → 3.3.0-test.6 - Mend

@ape.swap/bonds-sdk 3.3.0-test.4 → 3.3.0-test.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/dist/components/BondFilters/BondFilters.js CHANGED Viewed

@@ -22,7 +22,7 @@ const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, f
                     setChainFilterOption(['All Chains']);
                     setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL');
                     onHandleQueryChange('');
-                }, sx: { borderRadius: 'normal' }, children: ["Clear All", jsx(Flex, { sx: { ml: '7px' }, children: jsx(IconButton, { icon: "close", color: "textDisabledButton", variant: "transparent" }) })] })] }));
+                }, sx: { borderRadius: 'normal' }, children: ["Clear All", jsx(Flex, { sx: { ml: '7px' }, children: jsx(IconButton, { color: "textDisabledButton", variant: "transparent" }) })] })] }));
 };
 export { BondFilters as default };

package/dist/components/BondFilters/BondFilters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\n\ninterface BondMenuProps {\n setChainFilterOption: (newValue: string[]) => void\n chainFilterOption: string[]\n filterOptions: string[]\n filterOption: string\n setFilterOption: (newOption: string) => void\n onHandleQueryChange: (value: string) => void\n}\n\nconst BondFilters: React.FC<BondMenuProps> = ({\n setChainFilterOption,\n chainFilterOption,\n filterOptions,\n filterOption,\n setFilterOption,\n onHandleQueryChange,\n}) => {\n const mappedFilters = filterOptions.map((filter) => {\n return {\n label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),\n value: filter,\n }\n })\n\n const asPath = typeof window !== 'undefined' ? window.location.pathname + window.location.search : ''\n\n const handleFilterSelection = useCallback(\n (newOption: string) => {\n setChainFilterOption(['All Chains'])\n setFilterOption(newOption)\n },\n [setChainFilterOption, setFilterOption],\n )\n\n return (\n <div className=\"bonds-filters\">\n <div className=\"desktop-rec-container\">\n {/* DESKTOP FILTER BUTTONS /}\n <RecommendationSelector\n options={filterOptions}\n activeOption={filterOption}\n setActiveOption={handleFilterSelection}\n />\n </div>\n <div className=\"mobile-rec-container\">\n {/ MOBILE FILTER DROPDOWN */}\n <MenuSelect selectedOption={filterOption} setOption={setFilterOption} options={mappedFilters} />\n </div>\n <div className=\"network-filter\">\n <NetworkFilter chainFilterOption={chainFilterOption} setChainFilterOption={setChainFilterOption} />\n </div>\n <Flex\n className=\"clear-all-button\"\n onClick={() => {\n setChainFilterOption(['All Chains'])\n setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL')\n onHandleQueryChange('')\n }}\n sx={{ borderRadius: 'normal' }}\n >\n Clear All\n <Flex sx={{ ml: '7px' }}>\n <IconButton ~~icon=\"close\"~~ color=\"textDisabledButton\" variant=\"transparent\" />\n </Flex>\n </Flex>\n </div>\n )\n}\n\nexport default BondFilters\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA,MAAM,WAAW,GAA4B,CAAC,EAC5C,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,mBAAmB,GACpB,KAAI;IACH,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACjD,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACrE,YAAA,KAAK,EAAE,MAAM;SACd;AACH,IAAA,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE;AAErG,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,SAAiB,KAAI;AACpB,QAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;QACpC,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,oBAAoB,EAAE,eAAe,CAAC,CACxC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,aAC5BC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,YAEpCA,GAAA,CAAC,sBAAsB,EAAA,EACrB,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,qBAAqB,GACtC,EAAA,CACE,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAEnCA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CAC5F,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAA,CAAI,GAC/F,EACND,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,MAAK;AACZ,oBAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;AACpC,oBAAA,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,KAAK,CAAC;oBACnE,mBAAmB,CAAC,EAAE,CAAC;AACzB,gBAAA,CAAC,EACD,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,WAAA,EAG9BC,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,~~EAAA~~,~~QAAA,EACrBA,~~GAAA,CAAC,UAAU,EAAA,EAAC,~~IAAI,EAAC,OAAO,EAAC,~~KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,~~GACvE~~,CAAA,EAAA,CACF,CAAA,EAAA,CACH;AAEV;;;;"}
1	+ {"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\n\ninterface BondMenuProps {\n setChainFilterOption: (newValue: string[]) => void\n chainFilterOption: string[]\n filterOptions: string[]\n filterOption: string\n setFilterOption: (newOption: string) => void\n onHandleQueryChange: (value: string) => void\n}\n\nconst BondFilters: React.FC<BondMenuProps> = ({\n setChainFilterOption,\n chainFilterOption,\n filterOptions,\n filterOption,\n setFilterOption,\n onHandleQueryChange,\n}) => {\n const mappedFilters = filterOptions.map((filter) => {\n return {\n label: filter.charAt(0).toUpperCase() + filter.slice(1).toLowerCase(),\n value: filter,\n }\n })\n\n const asPath = typeof window !== 'undefined' ? window.location.pathname + window.location.search : ''\n\n const handleFilterSelection = useCallback(\n (newOption: string) => {\n setChainFilterOption(['All Chains'])\n setFilterOption(newOption)\n },\n [setChainFilterOption, setFilterOption],\n )\n\n return (\n <div className=\"bonds-filters\">\n <div className=\"desktop-rec-container\">\n {/* DESKTOP FILTER BUTTONS /}\n <RecommendationSelector\n options={filterOptions}\n activeOption={filterOption}\n setActiveOption={handleFilterSelection}\n />\n </div>\n <div className=\"mobile-rec-container\">\n {/ MOBILE FILTER DROPDOWN */}\n <MenuSelect selectedOption={filterOption} setOption={setFilterOption} options={mappedFilters} />\n </div>\n <div className=\"network-filter\">\n <NetworkFilter chainFilterOption={chainFilterOption} setChainFilterOption={setChainFilterOption} />\n </div>\n <Flex\n className=\"clear-all-button\"\n onClick={() => {\n setChainFilterOption(['All Chains'])\n setFilterOption(asPath.includes('yourBonds') ? 'CLAIMABLE' : 'ALL')\n onHandleQueryChange('')\n }}\n sx={{ borderRadius: 'normal' }}\n >\n Clear All\n <Flex sx={{ ml: '7px' }}>\n <IconButton color=\"textDisabledButton\" variant=\"transparent\" />\n </Flex>\n </Flex>\n </div>\n )\n}\n\nexport default BondFilters\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBA,MAAM,WAAW,GAA4B,CAAC,EAC5C,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,mBAAmB,GACpB,KAAI;IACH,MAAM,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACjD,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACrE,YAAA,KAAK,EAAE,MAAM;SACd;AACH,IAAA,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,GAAG,EAAE;AAErG,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,SAAiB,KAAI;AACpB,QAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;QACpC,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC,EACD,CAAC,oBAAoB,EAAE,eAAe,CAAC,CACxC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,aAC5BC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,YAEpCA,GAAA,CAAC,sBAAsB,EAAA,EACrB,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,qBAAqB,GACtC,EAAA,CACE,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAEnCA,IAAC,UAAU,EAAA,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,aAAa,EAAA,CAAI,EAAA,CAC5F,EACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAC7BA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,oBAAoB,EAAA,CAAI,GAC/F,EACND,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,MAAK;AACZ,oBAAA,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC;AACpC,oBAAA,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,KAAK,CAAC;oBACnE,mBAAmB,CAAC,EAAE,CAAC;AACzB,gBAAA,CAAC,EACD,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,WAAA,EAG9BC,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,YACrBA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,EAAA,CAC1D,CAAA,EAAA,CACF,CAAA,EAAA,CACH;AAEV;;;;"}

package/dist/components/ChainOptionList/ChainOptionsButtons.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { styles } from './styles.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
 import Text from '../uikit-sdk/Text/index.js';
 import { formatChainList } from './constants.js';
-import { NETWORK_ICONS } from '../../config/constants/chains.js';
+import { getChainIcon } from '../../config/constants/chains.js';
 const ChainOptionsButtons = ({ selectedChain, setSelectedChain, setViewAllChains, chainList, }) => {
     return (jsxs(Flex, { sx: { position: 'relative', mb: '10px' }, children: [formatChainList(chainList)
                 .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))
                 .slice(0, 7)
                 .map((chainInfo) => {
+                const ChainIcon = getChainIcon(chainInfo.chain);
                 return (jsx(Flex, { sx: {
                         ...styles.chainOptionButton,
                         border: selectedChain === chainInfo.chain && 'primaryButton',
                         mr: '10px',
-                    }, onClick: () => setSelectedChain(chainInfo.chain), children: jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(Svg, { width: "25px", icon: NETWORK_ICONS[chainInfo.chain] ? NETWORK_ICONS[chainInfo.chain] : 'question' }) }) }, chainInfo.name));
+                    }, onClick: () => setSelectedChain(chainInfo.chain), children: jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(ChainIcon, { width: "25px" }) }) }, chainInfo.name));
             }), chainList.length > 7 && (jsx(Flex, { sx: styles.chainOptionButton, onClick: () => setViewAllChains(true), children: jsxs(Text, { children: [chainList.length - 7, "+"] }) }))] }));
 };

package/dist/components/ChainOptionList/ChainOptionsButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainOptionsButtons.js","sources":["../../../src/components/ChainOptionList/ChainOptionsButtons.tsx"],"sourcesContent":["// Components\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { styles } from './styles'\nimport Flex from '../uikit-sdk/Flex'\nimport ~~Svg from '../uikit-sdk/Svg'\nimport~~ Text from '../uikit-sdk/Text'\nimport { formatChainList } from './constants'\nimport { ~~NETWORK_ICONS~~ } from '../../config/constants/chains'\n\nconst ChainOptionsButtons = ({\n selectedChain,\n setSelectedChain,\n setViewAllChains,\n chainList,\n}: {\n selectedChain?: number\n setSelectedChain: (chain: ChainId) => void\n setViewAllChains: (viewAllChains: boolean) => void\n chainList: ChainId[]\n}) => {\n return (\n <Flex sx={{ position: 'relative', mb: '10px' }}>\n {formatChainList(chainList)\n .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))\n .slice(0, 7)\n .map((chainInfo) => {\n return (\n <Flex\n sx={{\n ...styles.chainOptionButton,\n border: selectedChain === chainInfo.chain && 'primaryButton',\n mr: '10px',\n }}\n onClick={() => setSelectedChain(chainInfo.chain)}\n key={chainInfo.name}\n >\n <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n <~~Svg~~ width=\"25px\" ~~icon={NETWORK_ICONS[chainInfo.chain] ? NETWORK_ICONS[chainInfo.chain] : 'question'}~~ />\n </Flex>\n </Flex>\n )\n })}\n {chainList.length > 7 && (\n <Flex sx={styles.chainOptionButton} onClick={() => setViewAllChains(true)}>\n <Text>{chainList.length - 7}+</Text>\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default ChainOptionsButtons\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;AASA~~,MAAM,mBAAmB,GAAG,CAAC,EAC3B,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAMV,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,aAC3C,eAAe,CAAC,SAAS;iBACvB,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,KAAK,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;AAChE,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC;AACV,iBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;~~AACjB~~,gBAAA,QACEC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;wBACF,GAAG,MAAM,CAAC,iBAAiB;AAC3B,wBAAA,MAAM,EAAE,aAAa,KAAK,SAAS,CAAC,KAAK,IAAI,eAAe;AAC5D,wBAAA,EAAE,EAAE,MAAM;AACX,qBAAA,EACD,OAAO,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,~~EAAA~~,~~QAAA,EAGhDA,~~GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC,~~EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,GAAA,CAAC,~~GAAG~~,EAAA,EAAC,KAAK,EAAC,MAAM,~~EAAC,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,UAAU,~~EAAA,~~CAAI~~,~~EAAA~~,~~CACnG,~~EAAA,EAJF,SAAS,CAAC,IAAI,CAKd;AAEX,YAAA,CAAC,CAAC,EACH,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EAAA,QAAA,EACvED,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAE,SAAS,CAAC,MAAM,GAAG,CAAC,EAAA,GAAA,CAAA,EAAA,CAAS,GAC/B,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"ChainOptionsButtons.js","sources":["../../../src/components/ChainOptionList/ChainOptionsButtons.tsx"],"sourcesContent":["// Components\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { styles } from './styles'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport { formatChainList } from './constants'\nimport { getChainIcon } from '../../config/constants/chains'\n\nconst ChainOptionsButtons = ({\n selectedChain,\n setSelectedChain,\n setViewAllChains,\n chainList,\n}: {\n selectedChain?: number\n setSelectedChain: (chain: ChainId) => void\n setViewAllChains: (viewAllChains: boolean) => void\n chainList: ChainId[]\n}) => {\n return (\n <Flex sx={{ position: 'relative', mb: '10px' }}>\n {formatChainList(chainList)\n .sort((chainInfo) => (chainInfo.chain === selectedChain ? -1 : 1))\n .slice(0, 7)\n .map((chainInfo) => {\n const ChainIcon = getChainIcon(chainInfo.chain)\n return (\n <Flex\n sx={{\n ...styles.chainOptionButton,\n border: selectedChain === chainInfo.chain && 'primaryButton',\n mr: '10px',\n }}\n onClick={() => setSelectedChain(chainInfo.chain)}\n key={chainInfo.name}\n >\n <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n <ChainIcon width=\"25px\" />\n </Flex>\n </Flex>\n )\n })}\n {chainList.length > 7 && (\n <Flex sx={styles.chainOptionButton} onClick={() => setViewAllChains(true)}>\n <Text>{chainList.length - 7}+</Text>\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default ChainOptionsButtons\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAQA,MAAM,mBAAmB,GAAG,CAAC,EAC3B,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAMV,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,aAC3C,eAAe,CAAC,SAAS;iBACvB,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC,KAAK,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,CAAC;AAChE,iBAAA,KAAK,CAAC,CAAC,EAAE,CAAC;AACV,iBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;gBACjB,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC;AAC/C,gBAAA,QACEC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;wBACF,GAAG,MAAM,CAAC,iBAAiB;AAC3B,wBAAA,MAAM,EAAE,aAAa,KAAK,SAAS,CAAC,KAAK,IAAI,eAAe;AAC5D,wBAAA,EAAE,EAAE,MAAM;AACX,qBAAA,EACD,OAAO,EAAE,MAAM,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,YAGhDA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,GACrB,EAAA,EAJF,SAAS,CAAC,IAAI,CAKd;AAEX,YAAA,CAAC,CAAC,EACH,SAAS,CAAC,MAAM,GAAG,CAAC,KACnBA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,EAAA,QAAA,EACvED,KAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CAAE,SAAS,CAAC,MAAM,GAAG,CAAC,EAAA,GAAA,CAAA,EAAA,CAAS,GAC/B,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

package/dist/components/ChainOptionList/ChainOptionsList.js CHANGED Viewed

@@ -2,12 +2,11 @@ import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { styles } from './styles.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Search from '../uikit-sdk/Svg/Icons/Search.js';
 import Text from '../uikit-sdk/Text/index.js';
-import 'numbro';
 import Input from '../uikit-sdk/Input/Input.js';
 import { formatChainList } from './constants.js';
-import { NETWORK_ICONS } from '../../config/constants/chains.js';
+import { getChainIcon } from '../../config/constants/chains.js';
 const ChainOptionsList = ({ setSelectedChain, setViewAllChains, chainList, }) => {
     const [searchQuery, setSearchQuery] = useState('');
@@ -19,10 +18,11 @@ const ChainOptionsList = ({ setSelectedChain, setViewAllChains, chainList, }) =>
         const input = event.target.value;
         setSearchQuery(input);
     }, []);
-    return (jsx(Flex, { sx: styles.searchAndListContainer, children: jsxs(Flex, { sx: { position: 'relative', flexDirection: 'column', height: '100%' }, children: [jsxs(Flex, { children: [jsx(Input, { onChange: handleInput, sx: styles.searchInput, placeholder: "Search by chain name" }), jsx(Flex, { sx: { position: 'absolute', right: '10px', top: '12px' }, children: jsx(Svg, { icon: "search" }) })] }), jsx(Flex, { sx: styles.chainListContainer, children: formatChainList(chainList)
+    return (jsx(Flex, { sx: styles.searchAndListContainer, children: jsxs(Flex, { sx: { position: 'relative', flexDirection: 'column', height: '100%' }, children: [jsxs(Flex, { children: [jsx(Input, { onChange: handleInput, sx: styles.searchInput, placeholder: "Search by chain name" }), jsx(Flex, { sx: { position: 'absolute', right: '10px', top: '12px' }, children: jsx(Search, {}) })] }), jsx(Flex, { sx: styles.chainListContainer, children: formatChainList(chainList)
                         .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))
                         .map((chainInfo) => {
-                        return (jsxs(Flex, { sx: styles.chainOptionList, onClick: () => handleChainSelect(chainInfo.chain), children: [jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(Svg, { width: "25px", icon: NETWORK_ICONS[chainInfo.chain] ? NETWORK_ICONS[chainInfo.chain] : 'question' }) }), jsx(Text, { sx: { fontWeight: '500', fontSize: '16px' }, children: chainInfo.name })] }, chainInfo.name));
+                        const ChainIcon = getChainIcon(chainInfo.chain);
+                        return (jsxs(Flex, { sx: styles.chainOptionList, onClick: () => handleChainSelect(chainInfo.chain), children: [jsx(Flex, { sx: { overflow: 'hidden', borderRadius: '50px' }, children: jsx(ChainIcon, { width: "25px" }) }), jsx(Text, { sx: { fontWeight: '500', fontSize: '16px' }, children: chainInfo.name })] }, chainInfo.name));
                     }) })] }) }));
 };

package/dist/components/ChainOptionList/ChainOptionsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChainOptionsList.js","sources":["../../../src/components/ChainOptionList/ChainOptionsList.tsx"],"sourcesContent":["// Components\nimport { ChangeEvent, useCallback, useState } from 'react'\nimport { styles } from './styles'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Flex from '../uikit-sdk/Flex'\nimport ~~Svg~~ from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\nimport { Input } from '../uikit-sdk/Input'\nimport { formatChainList } from './constants'\nimport { ~~NETWORK_ICONS~~ } from '../../config/constants/chains'\n\nconst ChainOptionsList = ({\n setSelectedChain,\n setViewAllChains,\n chainList,\n}: {\n setSelectedChain: (chain: ChainId) => void\n setViewAllChains: (viewAllChains: boolean) => void\n chainList: ChainId[]\n}) => {\n const [searchQuery, setSearchQuery] = useState<string>('')\n\n const handleChainSelect = (chain: ChainId) => {\n setSelectedChain(chain)\n setViewAllChains(false)\n }\n\n const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n const input = event.target.value\n setSearchQuery(input)\n }, [])\n\n return (\n <Flex sx={styles.searchAndListContainer}>\n <Flex sx={{ position: 'relative', flexDirection: 'column', height: '100%' }}>\n <Flex>\n <Input onChange={handleInput} sx={styles.searchInput} placeholder=\"Search by chain name\" />\n <Flex sx={{ position: 'absolute', right: '10px', top: '12px' }}>\n <~~Svg~~ ~~icon=\"search\"~~ />\n </Flex>\n </Flex>\n <Flex sx={styles.chainListContainer}>\n {formatChainList(chainList)\n .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))\n .map((chainInfo) => {\n return (\n <Flex\n sx={styles.chainOptionList}\n onClick={() => handleChainSelect(chainInfo.chain)}\n key={chainInfo.name}\n >\n <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n <~~Svg\n~~ width=\"25px\"~~\n icon={NETWORK_ICONS[chainInfo.chain]~~ ~~? NETWORK_ICONS[chainInfo.chain] : 'question'}\n~~ />\n </Flex>\n <Text sx={{ fontWeight: '500', fontSize: '16px' }}>{chainInfo.name}</Text>\n </Flex>\n )\n })}\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default ChainOptionsList\n"],"names":["_jsx","_jsxs"],"mappings":"~~;;;;;;;;;;;~~AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAKV,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;AAE1D,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAI;QAC3C,gBAAgB,CAAC,KAAK,CAAC;QACvB,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAoC,KAAI;AACvE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,sBAAsB,~~YACrCC~~,IAAA,CAAC,IAAI,~~IAAC~~,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA,EAAA,CACzEA,~~IAAA,CAAC,IAAI,~~EAAA~~,~~EAAA,QAAA,EAAA,CACHD,~~GAAA,CAAC,KAAK,~~EAAA~~,~~EAAC,~~QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,EAAC,sBAAsB,GAAG,EAC3FA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA~~,~~EAC5DA~~,~~IAAC~~,~~GAAG~~,EAAA,~~EAAC~~,~~IAAI,EAAC,QAAQ,GAAG,EAAA,CAChB,~~CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,kBAAkB,YAChC,eAAe,CAAC,SAAS;yBACvB,MAAM,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;AACtF,yBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;wBACjB,QACEC,~~KAAC~~,IAAI,EAAA,EACH,EAAE,EAAE,MAAM,CAAC,eAAe,EAC1B,OAAO,EAAE,MAAM,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA,QAAA,EAAA,CAGjDD,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,~~IAAC~~,~~GAAG~~,EAAA,~~EACF~~,KAAK,EAAC,MAAM,~~EACZ,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,UAAU,~~EAAA,~~CAClF~~,EAAA,~~CACG~~,EACPA,~~GAAA~~,~~CAAC,~~IAAI,~~IAAC~~,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,SAAS,CAAC,IAAI,EAAA,CAAQ,~~CAAA~~,~~EAAA,EARrE,~~SAAS,CAAC,IAAI,~~CASd~~;AAEX,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"ChainOptionsList.js","sources":["../../../src/components/ChainOptionList/ChainOptionsList.tsx"],"sourcesContent":["// Components\nimport { ChangeEvent, useCallback, useState } from 'react'\nimport { styles } from './styles'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport Flex from '../uikit-sdk/Flex'\nimport Search from '../uikit-sdk/Svg/Icons/Search'\nimport Text from '../uikit-sdk/Text'\nimport { Input } from '../uikit-sdk/Input'\nimport { formatChainList } from './constants'\nimport { getChainIcon } from '../../config/constants/chains'\n\nconst ChainOptionsList = ({\n setSelectedChain,\n setViewAllChains,\n chainList,\n}: {\n setSelectedChain: (chain: ChainId) => void\n setViewAllChains: (viewAllChains: boolean) => void\n chainList: ChainId[]\n}) => {\n const [searchQuery, setSearchQuery] = useState<string>('')\n\n const handleChainSelect = (chain: ChainId) => {\n setSelectedChain(chain)\n setViewAllChains(false)\n }\n\n const handleInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n const input = event.target.value\n setSearchQuery(input)\n }, [])\n\n return (\n <Flex sx={styles.searchAndListContainer}>\n <Flex sx={{ position: 'relative', flexDirection: 'column', height: '100%' }}>\n <Flex>\n <Input onChange={handleInput} sx={styles.searchInput} placeholder=\"Search by chain name\" />\n <Flex sx={{ position: 'absolute', right: '10px', top: '12px' }}>\n <Search />\n </Flex>\n </Flex>\n <Flex sx={styles.chainListContainer}>\n {formatChainList(chainList)\n .filter((chainInfo) => chainInfo.name.toLowerCase().includes(searchQuery.toLowerCase()))\n .map((chainInfo) => {\n const ChainIcon = getChainIcon(chainInfo.chain)\n return (\n <Flex\n sx={styles.chainOptionList}\n onClick={() => handleChainSelect(chainInfo.chain)}\n key={chainInfo.name}\n >\n <Flex sx={{ overflow: 'hidden', borderRadius: '50px' }}>\n <ChainIcon width=\"25px\" />\n </Flex>\n <Text sx={{ fontWeight: '500', fontSize: '16px' }}>{chainInfo.name}</Text>\n </Flex>\n )\n })}\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default ChainOptionsList\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GAKV,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;AAE1D,IAAA,MAAM,iBAAiB,GAAG,CAAC,KAAc,KAAI;QAC3C,gBAAgB,CAAC,KAAK,CAAC;QACvB,gBAAgB,CAAC,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,KAAoC,KAAI;AACvE,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,sBAAsB,EAAA,QAAA,EACrCC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,aACzEA,IAAA,CAAC,IAAI,eACHD,GAAA,CAAC,KAAK,IAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,EAAC,sBAAsB,GAAG,EAC3FA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,YAC5DA,GAAA,CAAC,MAAM,KAAG,EAAA,CACL,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,IAAC,EAAE,EAAE,MAAM,CAAC,kBAAkB,YAChC,eAAe,CAAC,SAAS;yBACvB,MAAM,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;AACtF,yBAAA,GAAG,CAAC,CAAC,SAAS,KAAI;wBACjB,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC;AAC/C,wBAAA,QACEC,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,MAAM,CAAC,eAAe,EAC1B,OAAO,EAAE,MAAM,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC,EAAA,QAAA,EAAA,CAGjDD,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,QAAA,EACpDA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CACrB,EACPA,IAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,SAAS,CAAC,IAAI,EAAA,CAAQ,KALrE,SAAS,CAAC,IAAI,CAMd;AAEX,oBAAA,CAAC,CAAC,EAAA,CACC,CAAA,EAAA,CACF,EAAA,CACF;AAEX;;;;"}

package/dist/components/FavIcons/AddFavToken.js CHANGED Viewed

@@ -3,7 +3,9 @@ import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import StarFilled from '../uikit-sdk/Svg/Icons/StarFilled.js';
+import Star from '../uikit-sdk/Svg/Icons/Star.js';
+import FirePink from '../uikit-sdk/Svg/Icons/FirePink.js';
 const AddFavToken = ({ tokenSymbol, hotBond }) => {
     const { favTokens, addFavToken } = useFavoriteTokens();
@@ -16,7 +18,7 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
             console.log('clicked');
             setIsFavToken(true);
             addFavToken(tokenSymbol ?? '');
-        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex' }, children: isFavToken ? (jsx(Svg, { icon: "StarFilled", width: 22, height: 22, color: '#DE62F3' })) : (jsx(Svg, { icon: hotBond ? 'FirePink' : 'Star', width: hotBond ? 25 : 20, height: hotBond ? 25 : 20, color: '#73728E' })) }, isFavToken ? 'StarFilled' : 'Star') }) }));
+        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex' }, children: isFavToken ? (jsx(StarFilled, { width: 22, height: 22, color: '#DE62F3' })) : hotBond ? (jsx(FirePink, { width: 25, height: 25, color: '#73728E' })) : (jsx(Star, { width: 20, height: 20, color: '#73728E' })) }, isFavToken ? 'StarFilled' : 'Star') }) }));
 };
 export { AddFavToken as default };

package/dist/components/FavIcons/AddFavToken.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AddFavToken.js","sources":["../../../src/components/FavIcons/AddFavToken.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\n\nconst AddFavToken = ({ tokenSymbol, hotBond }: { tokenSymbol?: string; hotBond?: boolean }) => {\n const { favTokens, addFavToken } = useFavoriteTokens()\n const [isFavToken, setIsFavToken] = useState(false)\n useEffect(() => {\n setIsFavToken(favTokens.includes(tokenSymbol?.toLowerCase() ?? ''))\n }, [favTokens, tokenSymbol])\n\n return (\n <Flex\n sx={{ justifyContent: 'center', alignItems: 'center', width: '100%', p: '0 5px' }}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n console.log('clicked')\n setIsFavToken(true)\n addFavToken(tokenSymbol ?? '')\n }}\n >\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={isFavToken ? 'StarFilled' : 'Star'}\n initial={false}\n animate={{ opacity: 1, scale: 1.0 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n style={{ display: 'flex' }}\n >\n {isFavToken ? (\n <~~Svg icon=\"~~StarFilled\" width={22} height={22} color={'#DE62F3'} />\n ) : (\n <~~Svg\n icon~~={~~hotBond~~ ? '~~FirePink~~' : ~~'Star'}~~\n width={~~hotBond ? 25 :~~ 20}\n height={~~hotBond ? 25 :~~ 20}\n color={'#73728E'}\n />\n )}\n </motion.div>\n </AnimatePresence>\n </Flex>\n )\n}\n\nexport default AddFavToken\n"],"names":["_jsx"],"mappings":"~~;;;;;;;AAMA~~,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAA+C,KAAI;IAC5F,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE5B,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,EACjF,OAAO,EAAE,CAAC,KAAuB,KAAI;YACnC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YACtB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,WAAW,CAAC,WAAW,IAAI,EAAE,CAAC;AAChC,QAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,~~EAAA~~,~~EAET,~~OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA,EAEzB,~~UAAU,IACTA,GAAA,CAAC,~~GAAG~~,~~IAAC~~,~~IAAI,~~EAAC,~~YAAY,EAAC,~~KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,~~KAElEA~~,GAAA,CAAC,~~GAAG~~,EAAA,~~EACF~~,~~IAAI~~,EAAE,~~OAAO~~,~~GAAG~~,~~UAAU~~,~~GAAG~~,~~MAAM~~,~~EACnC~~,KAAK,EAAE,~~OAAO~~,~~GAAG~~,~~EAAE~~,~~GAAG~~,~~EAAE~~,~~EACxB~~,~~MAAM~~,EAAE,~~OAAO~~,~~GAAG~~,EAAE,~~GAAG~~,EAAE,~~EACzB,~~KAAK,EAAE,SAAS,EAAA,~~CAChB~~,~~CACH~~,EAAA,~~EAhBI~~,UAAU,GAAG,YAAY,GAAG,MAAM,~~CAiB5B~~,EAAA,CACG,EAAA,CACb;AAEX;;;;"}
1	+ {"version":3,"file":"AddFavToken.js","sources":["../../../src/components/FavIcons/AddFavToken.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens'\nimport Flex from '../uikit-sdk/Flex'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\nimport FirePink from '../uikit-sdk/Svg/Icons/FirePink'\n\nconst AddFavToken = ({ tokenSymbol, hotBond }: { tokenSymbol?: string; hotBond?: boolean }) => {\n const { favTokens, addFavToken } = useFavoriteTokens()\n const [isFavToken, setIsFavToken] = useState(false)\n useEffect(() => {\n setIsFavToken(favTokens.includes(tokenSymbol?.toLowerCase() ?? ''))\n }, [favTokens, tokenSymbol])\n\n return (\n <Flex\n sx={{ justifyContent: 'center', alignItems: 'center', width: '100%', p: '0 5px' }}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation()\n console.log('clicked')\n setIsFavToken(true)\n addFavToken(tokenSymbol ?? '')\n }}\n >\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={isFavToken ? 'StarFilled' : 'Star'}\n initial={false}\n animate={{ opacity: 1, scale: 1.0 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n style={{ display: 'flex' }}\n >\n {isFavToken ? (\n <StarFilled width={22} height={22} color={'#DE62F3'} />\n ) : hotBond ? (\n <FirePink width={25} height={25} color={'#73728E'} />\n ) : (\n <Star width={20} height={20} color={'#73728E'} />\n )}\n </motion.div>\n </AnimatePresence>\n </Flex>\n )\n}\n\nexport default AddFavToken\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAQA,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAA+C,KAAI;IAC5F,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACnD,SAAS,CAAC,MAAK;AACb,QAAA,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE5B,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,EACjF,OAAO,EAAE,CAAC,KAAuB,KAAI;YACnC,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC;YACtB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,WAAW,CAAC,WAAW,IAAI,EAAE,CAAC;AAChC,QAAA,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAEzB,UAAU,IACTA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,IACrD,OAAO,IACTA,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,KAErDA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,CAAI,CAClD,EAAA,EAbI,UAAU,GAAG,YAAY,GAAG,MAAM,CAc5B,EAAA,CACG,EAAA,CACb;AAEX;;;;"}

package/dist/components/FavIcons/FavFilter.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { jsx } from 'theme-ui/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Star from '../uikit-sdk/Svg/Icons/Star.js';
+import StarFilled from '../uikit-sdk/Svg/Icons/StarFilled.js';
 // import track from 'utils/track'
 const FavIcon = ({ filterOption, setFilterOption, }) => {
@@ -10,7 +11,7 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
     };
     return (jsx(Flex, { sx: { justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }, className: "search-fav-icon", onClick: () => {
             handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL');
-        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx(Svg, { icon: "StarFilled", width: 22, height: 22 })) : (jsx(Svg, { icon: "Star", width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
+        }, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: false, animate: { opacity: 1, scale: 1.0 }, exit: { opacity: 0, scale: 0.8 }, transition: { duration: 0.2 }, style: { display: 'flex', alignItems: 'center' }, children: filterOption === 'FAVORITES' ? (jsx(StarFilled, { width: 22, height: 22 })) : (jsx(Star, { width: 20, height: 20 })) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
 };
 export { FavIcon as default };

package/dist/components/FavIcons/FavFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\n// import track from 'utils/track'\n\nconst FavIcon = ({\n filterOption,\n setFilterOption,\n}: {\n filterOption: string\n setFilterOption: (newOption: string) => void\n}) => {\n const handleFilterOption = (newOption: string) => {\n setFilterOption(newOption)\n }\n\n return (\n <Flex\n sx={{ justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }}\n className=\"search-fav-icon\"\n onClick={() => {\n handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL')\n }}\n >\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={filterOption === 'FAVORITES' ? 'StarFilled' : 'Star'}\n initial={false}\n animate={{ opacity: 1, scale: 1.0 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n {filterOption === 'FAVORITES' ? (\n <~~Svg icon=\"~~StarFilled\" width={22} height={22} />\n ) : (\n <~~Svg icon=\"~~Star\" width={20} height={20} />\n )}\n </motion.div>\n </AnimatePresence>\n </Flex>\n )\n}\n\nexport default FavIcon\n"],"names":["_jsx"],"mappings":"~~;;;;;AAIA~~;AAEA,MAAM,OAAO,GAAG,CAAC,EACf,YAAY,EACZ,eAAe,GAIhB,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,CAAC,SAAiB,KAAI;QAC/C,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EACvG,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,MAAK;AACZ,YAAA,kBAAkB,CAAC,YAAY,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;QACxE,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,~~EAAA~~,~~EAET,~~OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,~~YAE~~/C,YAAY,KAAK,WAAW,IAC3BA,GAAA,CAAC,~~GAAG~~,~~EAAA~~,~~EAAC,IAAI,EAAC,YAAY,EAAC,~~KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,~~KAEhDA~~,GAAA,CAAC,~~GAAG~~,EAAA,EAAC,~~IAAI,EAAC,MAAM,EAAC,~~KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,~~CAC3C~~,EAAA,EAXI,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAY9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}
1	+ {"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\nimport StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\n// import track from 'utils/track'\n\nconst FavIcon = ({\n filterOption,\n setFilterOption,\n}: {\n filterOption: string\n setFilterOption: (newOption: string) => void\n}) => {\n const handleFilterOption = (newOption: string) => {\n setFilterOption(newOption)\n }\n\n return (\n <Flex\n sx={{ justifyContent: 'center', alignItems: 'center', minWidth: '25px', cursor: 'pointer', ml: '15px' }}\n className=\"search-fav-icon\"\n onClick={() => {\n handleFilterOption(filterOption !== 'FAVORITES' ? 'FAVORITES' : 'ALL')\n }}\n >\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={filterOption === 'FAVORITES' ? 'StarFilled' : 'Star'}\n initial={false}\n animate={{ opacity: 1, scale: 1.0 }}\n exit={{ opacity: 0, scale: 0.8 }}\n transition={{ duration: 0.2 }}\n style={{ display: 'flex', alignItems: 'center' }}\n >\n {filterOption === 'FAVORITES' ? (\n <StarFilled width={22} height={22} />\n ) : (\n <Star width={20} height={20} />\n )}\n </motion.div>\n </AnimatePresence>\n </Flex>\n )\n}\n\nexport default FavIcon\n"],"names":["_jsx"],"mappings":";;;;;;AAKA;AAEA,MAAM,OAAO,GAAG,CAAC,EACf,YAAY,EACZ,eAAe,GAIhB,KAAI;AACH,IAAA,MAAM,kBAAkB,GAAG,CAAC,SAAiB,KAAI;QAC/C,eAAe,CAAC,SAAS,CAAC;AAC5B,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,EAAE,EACvG,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,MAAK;AACZ,YAAA,kBAAkB,CAAC,YAAY,KAAK,WAAW,GAAG,WAAW,GAAG,KAAK,CAAC;QACxE,CAAC,EAAA,QAAA,EAEDA,GAAA,CAAC,eAAe,EAAA,EAAC,IAAI,EAAC,MAAM,EAAA,QAAA,EAC1BA,GAAA,CAAC,MAAM,CAAC,GAAG,IAET,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAE/C,YAAY,KAAK,WAAW,IAC3BA,GAAA,CAAC,UAAU,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,KAErCA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,CAChC,EAAA,EAXI,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAY9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}

package/dist/components/NetworkFilter/index.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from 'theme-ui/jsx-runtime';
 import { useState } from 'react';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
+import AllChains from '../uikit-sdk/Svg/Icons/AllChains.js';
 import Text from '../uikit-sdk/Text/index.js';
 import { TESTNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, MAINNET_CHAINS } from '../../config/constants/chains.js';
 import Checkbox from '../uikit-sdk/Checkbox/index.js';
@@ -66,7 +67,7 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                     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: {
+                }, 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(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsxs(Flex, { sx: {
                     flexDirection: ['column', 'column', 'column'],
                     position: 'absolute',
                     top: '45px',
@@ -78,15 +79,17 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                     background: 'white2',
                     zIndex: 1001,
                 }, children: [['All Chains', ...mainnetChains].map((chainId) => {
+                        const ChainIcon = NETWORK_ICONS[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));
+                            }, 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(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: ChainIcon && jsx(ChainIcon, { width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                     }), testnetChains.length > 0 &&
                         ['All Testnet', ...testnetChains].map((chainId) => {
+                            const ChainIcon = NETWORK_ICONS[chainId];
                             return (jsx(Flex, { sx: {
                                     borderRadius: 'normal',
                                     p: '5px 15px',
@@ -94,7 +97,7 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                                     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));
+                                }, 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(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: ChainIcon && jsx(ChainIcon, { width: "22px" }) }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                         })] }))] }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport AllChains from '../uikit-sdk/Svg/Icons/AllChains'\nimport Text from '../uikit-sdk/Text'\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 <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 const ChainIcon = NETWORK_ICONS[chainId as 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 <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 {ChainIcon && <ChainIcon 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 const ChainIcon = NETWORK_ICONS[chainId as 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 <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 {ChainIcon && <ChainIcon 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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'theme-ui/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import PlaceholderMonkey$1 from '../uikit-sdk/Svg/Icons/PlaceholderMonkey.js';
 import Text from '../uikit-sdk/Text/index.js';
 import ConnectButton from '../ConnectButton/index.js';
 import { Spinner } from 'theme-ui';
@@ -13,7 +13,7 @@ const PlaceholderMonkey = ({ text, loading }) => {
             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, {}) }))] })) }) }));
+        }, children: jsx(Flex, { sx: { height: '200px', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }, children: loading ? (jsx(Spinner, { size: 100 })) : (jsxs(Fragment, { children: [jsx(PlaceholderMonkey$1, {}), jsx(Text, { sx: { fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }, children: text }), text === 'You are not connected.' && (jsx(Flex, { sx: { width: '200px', mt: '10px' }, children: jsx(ConnectButton, {}) }))] })) }) }));
 };
 export { PlaceholderMonkey as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport ~~Svg~~ from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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":";;;;;;;AAOA,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;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport PlaceholderMonkeyIcon from '../uikit-sdk/Svg/Icons/PlaceholderMonkey'\nimport Text from '../uikit-sdk/Text'\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 <PlaceholderMonkeyIcon />\n <Text sx={{ fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }}>{text}</Text>\n {text === 'You are not connected.' && (\n <Flex sx={{ width: '200px', mt: '10px' }}>\n <ConnectButton />\n </Flex>\n )}\n </>\n )}\n </Flex>\n </Flex>\n )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsx","_jsxs","PlaceholderMonkeyIcon"],"mappings":";;;;;;;AAOA,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,GAAA,CAAC,OAAO,IAAC,IAAI,EAAE,GAAG,EAAA,CAAI,KAEtBC,4BACED,GAAA,CAACE,mBAAqB,KAAG,EACzBF,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,GAAQ,EACvF,IAAI,KAAK,wBAAwB,KAChCA,IAAC,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/SlippageModal/index.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { jsx, jsxs } from 'theme-ui/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Modal from '../uikit-sdk/Modal/index.js';
 import Text from '../uikit-sdk/Text/index.js';
-import 'numbro';
 import Input from '../uikit-sdk/Input/Input.js';
 import { useSlippage } from '../../state/slippage/useSlippage.js';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/SlippageModal/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Modal from '../uikit-sdk/Modal'\nimport Text from '../uikit-sdk/Text'\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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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/SlippageModal/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Modal from '../uikit-sdk/Modal'\nimport Text from '../uikit-sdk/Text'\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 CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Tick from '../uikit-sdk/Svg/Icons/Tick.js';
 import { Spinner } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -25,7 +25,7 @@ const StepBubble = ({ number, title, currentStep, hideBar, loading, }) => {
                                     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: {
+                            }, children: jsx(Tick, { width: '15px' }) }) })) : (number), jsx(Flex, { sx: {
                             width: '100px',
                             textAlign: 'center',
                             justifyContent: 'center',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport ~~Svg~~ from '../uikit-sdk/Svg'\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":";;;;;;AAMA,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;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Tick from '../uikit-sdk/Svg/Icons/Tick'\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 <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":";;;;;;AAMA,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,IAAI,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,CAAI,GACZ,EAAA,CACG,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 CHANGED Viewed

@@ -3,16 +3,20 @@ import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import Flex from '../uikit-sdk/Flex/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import Success from '../uikit-sdk/Svg/Icons/Success.js';
+import Error from '../uikit-sdk/Svg/Icons/Error.js';
+import External from '../uikit-sdk/Svg/Icons/External.js';
 import Text from '../uikit-sdk/Text/index.js';
 import { Link } from 'theme-ui';
 import styles from './styles.js';
 import { usePopups } from '../../state/popups/usePopups.js';
+const VARIANT_ICON = { success: Success, error: Error };
 const Toast = ({ popIndex, popup }) => {
     const { variant, title, description, url } = popup;
     const { removePopup } = usePopups();
     const [show, setShow] = useState(true);
+    const VariantIcon = VARIANT_ICON[variant];
     useEffect(() => {
         setTimeout(() => {
             setShow(false);
@@ -29,7 +33,7 @@ const Toast = ({ popIndex, popup }) => {
     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: {
+    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(VariantIcon, { 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',
@@ -40,7 +44,7 @@ const Toast = ({ popIndex, popup }) => {
                                 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" }) })] })) }));
+                            }, children: parsedErrorString })), url && (jsxs(Link, { href: url, sx: styles.link, color: "text", target: "_blank", children: [jsx(Text, { mr: "5px", children: "View on Explorer" }), jsx(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(External, {})] }))] }), jsx(Flex, { sx: { alignItems: 'flex-start', pt: '3px' }, onClick: () => removePopup(popup), children: jsx(IconButton, { color: "text", variant: "transparent" }) })] })) }));
 };
 export { Toast as default };

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

	@@ -1 +1 @@
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 from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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":"~~;;;;;;;;;;;AAUA~~,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA2C,KAAI;IAC7E,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK;AAClD,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACnC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;~~IAEtC~~,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,MAAK;YACd,OAAO,CAAC,KAAK,CAAC;YACd,UAAU,CAAC,MAAK;gBACd,WAAW,CAAC,KAAK,CAAC;YACpB,CAAC,EAAE,GAAG,CAAC;QACT,CAAC,EAAE,KAAK,CAAC;;IAEX,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,2BAA2B,CAAC;IACjH,MAAM,eAAe,GACnB,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC;AAC5C,QAAA,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,UAAU,CAAC;AACxC,QAAA,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,6BAA6B,CAAC;IAE7D,MAAM,iBAAiB,GAAG;AACxB,UAAE;AACF,UAAE,KAAK,EAAE,WAAW;IAEtB,QACEA,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,IAAI,KACHC,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC5B,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC1B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EACzB,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAA,QAAA,EAAA,CAEzDD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHA,GAAA,CAAC,~~GAAG~~,EAAA,EAAC,~~IAAI,EAAE,OAAO,EAAE,~~KAAK,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,~~CAC9C~~,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CACtBD,~~GAAA~~,~~CAAC,~~IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,EAC9E,WAAW,KACVA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gCAAA,QAAQ,EAAE,MAAM;AAChB,gCAAA,UAAU,EAAE,GAAG;AACf,gCAAA,UAAU,EAAE,MAAM;AAClB,gCAAA,SAAS,EAAE,MAAM;AACjB,gCAAA,SAAS,EAAE,MAAM;AACjB,gCAAA,QAAQ,EAAE,QAAQ;AAClB,gCAAA,YAAY,EAAE,UAAU;AACxB,gCAAA,OAAO,EAAE,aAAa;AACtB,gCAAA,eAAe,EAAE,UAAU;gCAC3B,eAAe,EAAE,CAAC;~~AACnB~~,~~6BAAA,~~EAAA,QAAA,EAEA,iBAAiB,EAAA,CACb,CACR,EACA,GAAG,KACFC,IAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAA,QAAA,EAAA,CAC5DD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAwB,EACtCA,GAAA,CAAC,~~GAAG~~,EAAA,~~EAAC,IAAI,EAAC,UAAU,~~EAAA,CAAG,CAAA,EAAA,~~CAClB~~,CACR,EACA,eAAe,KACdC,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,qEAAqE,EAC3E,EAAE,EAAE,MAAM,CAAC,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,QAAQ,EAAA,QAAA,EAAA,CAEfD,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,KAAK,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAkC,EAChDA,GAAA,CAAC,~~GAAG~~,EAAA,~~EAAC,IAAI,EAAC,UAAU,~~EAAA,CAAG,CAAA,EAAA,~~CAClB~~,CACR,CAAA,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC,KAAK,CAAC,EAAA,QAAA,EAClFA,GAAA,CAAC,UAAU,EAAA,EAAC,~~IAAI,EAAC,OAAO,EAAC,~~KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,EAAA,~~CACzD~~,CAAA,EAAA,CACI,CACd,EAAA,CACe;AAEtB;;;;"}
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 from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Success from '../uikit-sdk/Svg/Icons/Success'\nimport Error from '../uikit-sdk/Svg/Icons/Error'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport Text from '../uikit-sdk/Text'\nimport { Link } from 'theme-ui'\nimport styles from './styles'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\n\nconst VARIANT_ICON = { success: Success, error: Error } as const\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 const VariantIcon = VARIANT_ICON[variant]\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 <VariantIcon 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 <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 <External />\n </Link>\n )}\n </Flex>\n <Flex sx={{ alignItems: 'flex-start', pt: '3px' }} onClick={() => removePopup(popup)}>\n <IconButton 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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"}