@ape.swap/bonds-sdk 6.1.13 → 6.1.15-test.0

package/dist/components/BondFilters/BondFilters.js

@@ -5,6 +5,7 @@ import MenuSelect from '../MenuSelect/MenuSelect.js';
 import NetworkFilter from '../NetworkFilter/index.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
+import Close from '../uikit-sdk/Svg/Icons/Close.js';
 
 const BondFilters = ({ setChainFilterOption, chainFilterOption, filterOptions, filterOption, setFilterOption, onHandleQueryChange, }) => {
     const mappedFilters = filterOptions.map((filter) => {
@@ -22,7 +23,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, { icon: Close, color: "textDisabledButton", variant: "transparent" }) })] })] }));
 };
 
 export { BondFilters as default };

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

@@ -1 +1 @@
-{"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\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;;;;"}
+{"version":3,"file":"BondFilters.js","sources":["../../../src/components/BondFilters/BondFilters.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport RecommendationSelector from '../MenuSelect/RecommendationSelector'\nimport MenuSelect from '../MenuSelect/MenuSelect'\nimport NetworkFilter from '../NetworkFilter'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\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":";;;;;;;;;AAiBA,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,EAAE,KAAK,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,GACvE,CAAA,EAAA,CACF,CAAA,EAAA,CACH;AAEV;;;;"}

package/dist/components/ChainOptionList/ChainOptionsButtons.js

@@ -3,19 +3,20 @@ import { styles } from './styles.js';
 import { formatChainList } from './constants.js';
 import { NETWORK_ICONS } from '../../config/constants/chains.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 Question from '../uikit-sdk/Svg/Icons/Question.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 = NETWORK_ICONS[chainInfo.chain] ?? Question;
                 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

@@ -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 { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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;;;;"}
+{"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 { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\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 = NETWORK_ICONS[chainInfo.chain] ?? Question\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":";;;;;;;;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;gBACjB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;AAC5D,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

@@ -5,8 +5,9 @@ import { formatChainList } from './constants.js';
 import { NETWORK_ICONS } from '../../config/constants/chains.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Input from '../uikit-sdk/Input/Input.js';
-import Svg from '../uikit-sdk/Svg/index.js';
 import Text from '../uikit-sdk/Text/index.js';
+import Search from '../uikit-sdk/Svg/Icons/Search.js';
+import Question from '../uikit-sdk/Svg/Icons/Question.js';
 
 const ChainOptionsList = ({ setSelectedChain, setViewAllChains, chainList, }) => {
     const [searchQuery, setSearchQuery] = useState('');
@@ -18,10 +19,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 = NETWORK_ICONS[chainInfo.chain] ?? Question;
+                        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

@@ -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 { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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;;;;"}
+{"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 { formatChainList } from './constants'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\nimport Text from '../uikit-sdk/Text'\nimport Search from '../uikit-sdk/Svg/Icons/Search'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\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 = NETWORK_ICONS[chainInfo.chain] ?? Question\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":";;;;;;;;;;;AAYA,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,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ;AAC5D,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/ConnectoToVmBanners/ConnectToAptosBanner.js

@@ -4,7 +4,7 @@ import { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Text from '../uikit-sdk/Text/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import APTOS from '../uikit-sdk/Svg/tokens/APTOS.js';
 
 // Banner rendered in Your Bonds when the user has not connected an Aptos
 // wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the
@@ -23,7 +23,7 @@ function ConnectToAptosBanner() {
             alignItems: 'center',
             border: 'none',
             cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(Svg, { icon: "aptos", width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Aptos", jsx(Text, { sx: {
+        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(APTOS, { width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Aptos", jsx(Text, { sx: {
                                             fontSize: '10px',
                                             fontWeight: '600',
                                             lineHeight: '8px',

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport Svg from '../uikit-sdk/Svg'\n\n// Banner rendered in Your Bonds when the user has not connected an Aptos\n// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the\n// sibling file) but hosts the Ant Design `WalletSelector` modal internally\n// — Aptos does not expose a global `useWalletModal` hook like Solana does,\n// so each entry point controls its own modal visibility.\nexport default function ConnectToAptosBanner() {\n  const [isModalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <Svg icon=\"aptos\" width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Aptos\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Aptos Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* WalletSelector renders its own \"Connect Wallet\" trigger alongside\n          the modal. We only want the modal (which is a portal into\n          document.body), so we hide the wrapper with display: none. */}\n      <div style={{ display: 'none' }}>\n        <WalletSelector isModalOpen={isModalOpen} setModalOpen={setModalOpen} />\n      </div>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { WalletSelector } from '@aptos-labs/wallet-adapter-ant-design'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport APTOS from '../uikit-sdk/Svg/tokens/APTOS'\n\n// Banner rendered in Your Bonds when the user has not connected an Aptos\n// wallet. Uses the same visual language as `ConnectToSolanaBanner` (see the\n// sibling file) but hosts the Ant Design `WalletSelector` modal internally\n// — Aptos does not expose a global `useWalletModal` hook like Solana does,\n// so each entry point controls its own modal visibility.\nexport default function ConnectToAptosBanner() {\n  const [isModalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <APTOS width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Aptos\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Aptos Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* WalletSelector renders its own \"Connect Wallet\" trigger alongside\n          the modal. We only want the modal (which is a portal into\n          document.body), so we hide the wrapper with display: none. */}\n      <div style={{ display: 'none' }}>\n        <WalletSelector isModalOpen={isModalOpen} setModalOpen={setModalOpen} />\n      </div>\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js

@@ -4,7 +4,7 @@ import { ConnectModal } from '@mysten/dapp-kit';
 import Flex from '../uikit-sdk/Flex/index.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Text from '../uikit-sdk/Text/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
+import SUI from '../uikit-sdk/Svg/tokens/SUI.js';
 
 function ConnectToSuiBanner() {
     const [modalOpen, setModalOpen] = useState(false);
@@ -18,7 +18,7 @@ function ConnectToSuiBanner() {
             alignItems: 'center',
             border: 'none',
             cursor: 'pointer',
-        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(Svg, { icon: "sui", width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Sui", jsx(Text, { sx: {
+        }, children: [jsxs(Flex, { sx: { width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }, children: [jsx(Flex, { sx: { minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }, children: jsx(SUI, { width: "30" }) }), jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsxs(Text, { sx: { fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }, children: ["Sui", jsx(Text, { sx: {
                                             fontSize: '10px',
                                             fontWeight: '600',
                                             lineHeight: '8px',

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { ConnectModal } from '@mysten/dapp-kit'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport Svg from '../uikit-sdk/Svg'\n\nexport default function ConnectToSuiBanner() {\n  const [modalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <Svg icon=\"sui\" width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Sui\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Sui Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* @ts-ignore */}\n      <ConnectModal open={modalOpen} onOpenChange={setModalOpen} />\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { ConnectModal } from '@mysten/dapp-kit'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\nimport SUI from '../uikit-sdk/Svg/tokens/SUI'\n\nexport default function ConnectToSuiBanner() {\n  const [modalOpen, setModalOpen] = useState(false)\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        height: '75px',\n        background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)',\n        p: '10px',\n        borderRadius: '10px',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        border: 'none',\n        cursor: 'pointer',\n      }}\n    >\n      <Flex sx={{ width: '100%', maxWidth: '300px', gap: '10px', alignItems: 'center' }}>\n        <Flex sx={{ minWidth: '30px', minHeight: '30px', borderRadius: '50%', overflow: 'hidden' }}>\n          <SUI width=\"30\" />\n        </Flex>\n        <Flex sx={{ flexDirection: 'column' }}>\n          <Text\n            sx={{ fontSize: '18px', fontWeight: '700', lineHeight: '18.5px', display: 'flex', alignItems: 'center' }}\n          >\n            Sui\n            <Text\n              sx={{\n                fontSize: '10px',\n                fontWeight: '600',\n                lineHeight: '8px',\n                color: '#FAFAFA',\n                padding: '4px 6px',\n                background: 'rgba(250, 250, 250, 0.3)',\n                borderRadius: '4px',\n                marginLeft: '6px',\n                marginRight: '6px',\n              }}\n            >\n              NEW\n            </Text>\n          </Text>\n          <Text sx={{ fontSize: '11px', fontWeight: '400', lineHeight: '16px', color: 'white' }}>\n            Connect your wallet to view your Sui Bonds!\n          </Text>\n        </Flex>\n      </Flex>\n      <Flex sx={{ minWidth: '100px' }}>\n        <Button\n          onClick={() => setModalOpen(true)}\n          sx={{\n            background: 'text',\n            color: 'primaryButton',\n            border: 'none',\n            height: '31px',\n            width: ['210px', '210px', '210px', '210px', '210px', '100px'],\n            fontSize: '14px',\n            fontWeight: '700',\n            '&:hover': { color: 'text' },\n          }}\n        >\n          Connect\n        </Button>\n      </Flex>\n      {/* @ts-ignore */}\n      <ConnectModal open={modalOpen} onOpenChange={setModalOpen} />\n    </Flex>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/FavIcons/AddFavToken.js

@@ -2,8 +2,10 @@ import { jsx } from 'theme-ui/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import useFavoriteTokens from '../../state/favoriteTokens/useFavoriteTokens.js';
-import Svg from '../uikit-sdk/Svg/index.js';
 import Flex from '../uikit-sdk/Flex/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();
@@ -15,7 +17,7 @@ const AddFavToken = ({ tokenSymbol, hotBond }) => {
             event.stopPropagation();
             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

@@ -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 Svg from '../uikit-sdk/Svg'\nimport Flex from '../uikit-sdk/Flex'\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        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;YACvB,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;;;;"}
+{"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        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;YACvB,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

@@ -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 StarFilled from '../uikit-sdk/Svg/Icons/StarFilled.js';
+import Star from '../uikit-sdk/Svg/Icons/Star.js';
 
 const FavIcon = ({ filterOption, setFilterOption, }) => {
     const handleFilterOption = (newOption) => {
@@ -9,7 +10,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

@@ -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\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":";;;;;AAKA,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;;;;"}
+{"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 StarFilled from '../uikit-sdk/Svg/Icons/StarFilled'\nimport Star from '../uikit-sdk/Svg/Icons/Star'\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":";;;;;;AAMA,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

@@ -4,8 +4,10 @@ import { TESTNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, MAINNET_CHAINS } from '..
 import Checkbox from '../uikit-sdk/Checkbox/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.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 Caret from '../uikit-sdk/Svg/Icons/Caret.js';
+import AllChains from '../uikit-sdk/Svg/Icons/AllChains.js';
+import Question from '../uikit-sdk/Svg/Icons/Question.js';
 
 const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
     // Hooks
@@ -66,7 +68,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',
@@ -84,7 +86,10 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
                                 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()), onChange: () => handleCheckbox(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()), onChange: () => handleCheckbox(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: (() => {
+                                                    const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
+                                                    return jsx(ChainIcon, { width: "22px" });
+                                                })() }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                     }), testnetChains.length > 0 &&
                         ['All Testnet', ...testnetChains].map((chainId) => {
                             return (jsx(Flex, { sx: {
@@ -94,7 +99,10 @@ 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()), onChange: () => handleCheckbox(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()), onChange: () => handleCheckbox(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: (() => {
+                                                        const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
+                                                        return jsx(ChainIcon, { width: "22px" });
+                                                    })() }), jsx(Text, { sx: { lineHeight: '22px', fontWeight: 400 }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
                         })] }))] }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\nimport Text from '../uikit-sdk/Text'\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: '235px',\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\n                    checked={chainFilterOption.includes(chainId.toString())}\n                    onChange={() => handleCheckbox(chainId.toString())}\n                  />\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\n                      checked={chainFilterOption.includes(chainId.toString())}\n                      onChange={() => handleCheckbox(chainId.toString())}\n                    />\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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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport AllChains from '../uikit-sdk/Svg/Icons/AllChains'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\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: '235px',\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\n                    checked={chainFilterOption.includes(chainId.toString())}\n                    onChange={() => handleCheckbox(chainId.toString())}\n                  />\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                        {(() => {\n                          const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                          return <ChainIcon width=\"22px\" />\n                        })()}\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\n                      checked={chainFilterOption.includes(chainId.toString())}\n                      onChange={() => handleCheckbox(chainId.toString())}\n                    />\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                          {(() => {\n                            const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n                            return <ChainIcon width=\"22px\" />\n                          })()}\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

@@ -1,7 +1,7 @@
 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 Text from '../uikit-sdk/Text/index.js';
+import PlaceholderMonkey$1 from '../uikit-sdk/Svg/Icons/PlaceholderMonkey.js';
 
 const PlaceholderMonkey = ({ text }) => {
     return (jsxs(Flex, { sx: {
@@ -9,7 +9,7 @@ const PlaceholderMonkey = ({ text }) => {
             flexDirection: 'column',
             alignItems: 'center',
             borderRadius: 'normal',
-        }, children: [jsx(Svg, { icon: "placeholderMonkey" }), jsx(Text, { sx: { fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }, children: text })] }));
+        }, children: [jsx(PlaceholderMonkey$1, {}), jsx(Text, { sx: { fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }, children: text })] }));
 };
 
 export { PlaceholderMonkey as default };

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

@@ -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'\n\nconst PlaceholderMonkey = ({ text }: { text?: string }) => {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        flexDirection: 'column',\n        alignItems: 'center',\n        borderRadius: 'normal',\n      }}\n    >\n      <Svg icon=\"placeholderMonkey\" />\n      <Text sx={{ fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }}>{text}</Text>\n    </Flex>\n  )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAqB,KAAI;AACxD,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,YAAY,EAAE,QAAQ;AACvB,SAAA,EAAA,QAAA,EAAA,CAEDC,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,CAAA,EAAA,CACnF;AAEX;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PlaceholderMonkey/index.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport PlaceholderMonkeyIcon from '../uikit-sdk/Svg/Icons/PlaceholderMonkey'\n\nconst PlaceholderMonkey = ({ text }: { text?: string }) => {\n  return (\n    <Flex\n      sx={{\n        width: '100%',\n        flexDirection: 'column',\n        alignItems: 'center',\n        borderRadius: 'normal',\n      }}\n    >\n      <PlaceholderMonkeyIcon />\n      <Text sx={{ fontWeight: 600, fontSize: '16px', mt: '15px', opacity: 0.6 }}>{text}</Text>\n    </Flex>\n  )\n}\n\nexport default PlaceholderMonkey\n"],"names":["_jsxs","_jsx","PlaceholderMonkeyIcon"],"mappings":";;;;;AAKA,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAqB,KAAI;AACxD,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAE;AACF,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,YAAY,EAAE,QAAQ;AACvB,SAAA,EAAA,QAAA,EAAA,CAEDC,GAAA,CAACC,mBAAqB,EAAA,EAAA,CAAG,EACzBD,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,CAAA,EAAA,CACnF;AAEX;;;;"}

package/dist/components/StepBubble/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'theme-ui/jsx-runtime';
 import { Spinner } from 'theme-ui';
 import { AnimatePresence, motion } from 'framer-motion';
 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';
 
 const StepBubble = ({ number, title, currentStep, hideBar, loading, }) => {
     const stepCompleted = currentStep > number;
@@ -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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Spinner } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Svg from '../uikit-sdk/Svg'\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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StepBubble/index.tsx"],"sourcesContent":["import React from 'react'\nimport { Spinner } from 'theme-ui'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport Tick from '../uikit-sdk/Svg/Icons/Tick'\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

@@ -5,14 +5,18 @@ import { Link } from 'theme-ui';
 import styles from './styles.js';
 import { usePopups } from '../../state/popups/usePopups.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import Svg from '../uikit-sdk/Svg/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
 import Text from '../uikit-sdk/Text/index.js';
+import Close from '../uikit-sdk/Svg/Icons/Close.js';
+import External from '../uikit-sdk/Svg/Icons/External.js';
+import Success from '../uikit-sdk/Svg/Icons/Success.js';
+import Error from '../uikit-sdk/Svg/Icons/Error.js';
 
 const Toast = ({ popIndex, popup }) => {
     const { variant, title, description, url } = popup;
     const { removePopup } = usePopups();
     const [show, setShow] = useState(true);
+    const VariantIcon = variant === 'success' ? Success : Error;
     useEffect(() => {
         setTimeout(() => {
             setShow(false);
@@ -35,7 +39,7 @@ const Toast = ({ popIndex, popup }) => {
             : isInsufficientFundsError
                 ? 'Insufficient funds.'
                 : 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',
@@ -46,7 +50,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, { icon: Close, color: "text", variant: "transparent" }) })] })) }));
 };
 
 export { Toast as default };