npm - @ape.swap/bonds-sdk - Versions diffs - 6.2.13-test.1 → 6.2.13-test.2 - Mend

@ape.swap/bonds-sdk 6.2.13-test.1 → 6.2.13-test.2

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

Files changed (116) hide show

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

@@ -5,7 +5,7 @@ import { useSDKConfig } from '../../state/useSDKConfig.js';
 const ConnectButton = () => {
     const config = useSDKConfig();
-    return (jsx(Button, { fullWidth: true, onClick: openEvmWalletConnector, disabled: !config?.openWalletConnectors?.evm, children: "Connect wallet" }));
+    return (jsx(Button, { fullWidth: true, onClick: openEvmWalletConnector, disabled: !config?.openWalletConnectors?.evm, children: "Connect" }));
 };
 export { ConnectButton as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/ConnectButton/index.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../uikit-sdk/Button/Button'\nimport { openEvmWalletConnector } from '../../config/constants/walletConnectors'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\nconst ConnectButton = () => {\n const config = useSDKConfig()\n\n return (\n <Button fullWidth onClick={openEvmWalletConnector} disabled={!config?.openWalletConnectors?.evm}>\n Connect ~~wallet~~\n </Button>\n )\n}\n\nexport default ConnectButton\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACzB,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;IAE7B,QACEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAA,IAAA,EAAC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,GAAG,EAAA,QAAA,EAAA,~~gBAAA~~,EAAA,CAEtF;AAEb;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/ConnectButton/index.tsx"],"sourcesContent":["import React from 'react'\nimport Button from '../uikit-sdk/Button/Button'\nimport { openEvmWalletConnector } from '../../config/constants/walletConnectors'\nimport { useSDKConfig } from '../../state/useSDKConfig'\n\nconst ConnectButton = () => {\n const config = useSDKConfig()\n\n return (\n <Button fullWidth onClick={openEvmWalletConnector} disabled={!config?.openWalletConnectors?.evm}>\n Connect\n </Button>\n )\n}\n\nexport default ConnectButton\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACzB,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;IAE7B,QACEA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAA,IAAA,EAAC,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,GAAG,EAAA,QAAA,EAAA,SAAA,EAAA,CAEtF;AAEb;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToAptosBanner.js CHANGED Viewed

@@ -14,7 +14,7 @@ import APTOS from '../uikit-sdk/Svg/tokens/APTOS.js';
 function ConnectToAptosBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined;
-    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(APTOS, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Aptos", jsx(Text, { size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Aptos Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!", style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(APTOS, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Aptos", jsx(Text, { as: "span", size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Aptos Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold  ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button", children: "Connect" }) })] }));
 }
 export { ConnectToAptosBanner as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\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 config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n <APTOS width=\"30\" />\n </Flex>\n <Flex className=\"ape:flex-col\">\n <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n Aptos\n <Text\n size=\"10px\"\n className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n >\n NEW\n </Text>\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Aptos Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text~~!\"\n style={{~~ ~~backgroundColor~~: ~~'var(--ape~~-~~color~~-~~text)',~~ ~~color~~: ~~'var(--ape~~-~~color-~~primary-button~~)' }}~~\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACc,SAAU,oBAAoB,GAAA;AAC1C,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAChG,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,~~EAAA~~,~~QAAA,EAAA,CAC5EC,~~GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,~~YACtFA~~,GAAA,CAAC,KAAK,~~EAAA~~,~~EAAC,~~KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EACPD,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAC,~~SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,~~IAAC~~,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,~~EAAA~~,~~QAAA,EAAA,CAAA,OAAA,EAEnGC,~~GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA,EAAA,+~~CAAA,EAAA,~~CAEpF~~,~~IACF,~~CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,~~IAAC~~,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,~~IAAC~~,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,~~yHAAyH~~,~~EACnI,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,~~EAAA,QAAA,EAAA,SAAA,EAAA,~~CAGtF~~,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"ConnectToAptosBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToAptosBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openAptosWalletConnector } from '../../config/constants/walletConnectors'\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 config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.aptos ? openAptosWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n <APTOS width=\"30\" />\n </Flex>\n <Flex className=\"ape:flex-col\">\n <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n Aptos\n <Text\n as=\"span\"\n size=\"10px\"\n className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n >\n NEW\n </Text>\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Aptos Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button\"\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACc,SAAU,oBAAoB,GAAA;AAC1C,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,KAAK,GAAG,wBAAwB,GAAG,SAAS;AAChG,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,aAC5EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,EAAA,QAAA,EACtFA,GAAA,CAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACf,EACPD,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,sBAEnGC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,8DAEpF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,iNAAiN,EAAA,QAAA,EAAA,SAAA,EAAA,CAGpN,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js CHANGED Viewed

@@ -11,14 +11,7 @@ function ConnectToSolanaCard() {
     return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:bg-cover ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: {
             background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,
             backgroundSize: 'cover',
-        }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/solana-icon.png", alt: "solana icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center ape:gap-[5px]", style: { lineHeight: '18.5px' }, children: ["Solana", jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!",
-                    // Base background/text color overrides Button's own default variant —
-                    // inline style always wins over the component's internal Tailwind
-                    // classes, whereas a conflicting utility class here would depend on
-                    // Tailwind's internal generation order (fragile, effectively
-                    // alphabetical). The hover color needs `!` since it must in turn beat
-                    // this inline style.
-                    style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
+        }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx("img", { src: "https://ape.bond/images/connect-to-vm/solana-icon.png", alt: "solana icon", width: 30, height: 30, style: { borderRadius: '50px' } }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center ape:gap-[5px]", style: { lineHeight: '18.5px' }, children: ["Solana", jsx("img", { src: "https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png", alt: "solana compatible wallets", width: 43, height: 17 })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Solana Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold  ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button", children: "Connect" }) })] }));
 }
 export { ConnectToSolanaCard as default };

package/dist/components/ConnectoToVmBanners/ConnectToSolanaBanner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n const config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:bg-cover ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{\n background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n backgroundSize: 'cover',\n }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <img\n src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n alt=\"solana icon\"\n width={30}\n height={30}\n style={{ borderRadius: '50px' }}\n />\n <Flex className=\"ape:flex-col\">\n <Text\n size=\"18px\"\n className=\"ape:font-bold ape:flex ape:items-center ape:gap-[5px]\"\n style={{ lineHeight: '18.5px' }}\n >\n Solana\n <img\n src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n alt=\"solana compatible wallets\"\n width={43}\n height={17}\n />\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Solana Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text~~!\"\n //~~ Base background/text color overrides Button's own default variant —\n // inline style always wins over the component's internal Tailwind\n // classes, whereas a conflicting utility class here would depend on\n // Tailwind's internal generation order (fragile, effectively\n // alphabetical). The hover ~~color needs `!` since it must in turn beat\n // this inline style.\n style={{ backgroundColor~~: ~~'var(--ape~~-~~color~~-~~text)',~~ ~~color~~: ~~'var(--ape~~-~~color-~~primary-button~~)' }}~~\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMc,SAAU,mBAAmB,GAAA;AACzC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;IAC5F,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,8IAA8I,EACxJ,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,CAAA,+FAAA,CAAiG;AAC7G,YAAA,cAAc,EAAE,OAAO;~~SACxB~~,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,uDAAuD,EACjE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,QAAA,EAG/BC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAEpF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,~~yHAAyH;;;;;;;AAOnI~~,~~oBAAA,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,~~EAAA,QAAA,EAAA,SAAA,EAAA,~~CAGtF~~,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"ConnectToSolanaBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSolanaBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSolWalletConnector } from '../../config/constants/walletConnectors'\nimport Flex from '../uikit-sdk/Flex'\nimport Button from '../uikit-sdk/Button/Button'\nimport Text from '../uikit-sdk/Text'\n\nexport default function ConnectToSolanaCard() {\n const config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.sol ? openSolWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:bg-cover ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{\n background: `url('https://ape.bond/images/connect-to-vm/solana-card-background.png') no-repeat center center`,\n backgroundSize: 'cover',\n }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <img\n src=\"https://ape.bond/images/connect-to-vm/solana-icon.png\"\n alt=\"solana icon\"\n width={30}\n height={30}\n style={{ borderRadius: '50px' }}\n />\n <Flex className=\"ape:flex-col\">\n <Text\n size=\"18px\"\n className=\"ape:font-bold ape:flex ape:items-center ape:gap-[5px]\"\n style={{ lineHeight: '18.5px' }}\n >\n Solana\n <img\n src=\"https://ape.bond/images/connect-to-vm/svm-compatible-wallets.png\"\n alt=\"solana compatible wallets\"\n width={43}\n height={17}\n />\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Solana Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button\"\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAMc,SAAU,mBAAmB,GAAA;AACzC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;IAC5F,QACEA,KAAC,IAAI,EAAA,EACH,SAAS,EAAC,8IAA8I,EACxJ,KAAK,EAAE;AACL,YAAA,UAAU,EAAE,CAAA,+FAAA,CAAiG;AAC7G,YAAA,cAAc,EAAE,OAAO;AACxB,SAAA,EAAA,QAAA,EAAA,CAEDA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,EAAA,QAAA,EAAA,CAC5EC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAA,CAC/B,EACFD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,uDAAuD,EACjE,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAA,QAAA,EAAA,CAAA,QAAA,EAG/BC,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAC,kEAAkE,EACtE,GAAG,EAAC,2BAA2B,EAC/B,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EAAA,CACV,CAAA,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,gDAAA,EAAA,CAEpF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,iNAAiN,EAAA,QAAA,EAAA,SAAA,EAAA,CAGpN,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

package/dist/components/ConnectoToVmBanners/ConnectToSuiBanner.js CHANGED Viewed

@@ -9,7 +9,7 @@ import SUI from '../uikit-sdk/Svg/tokens/SUI.js';
 function ConnectToSuiBanner() {
     const config = useSDKConfig();
     const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined;
-    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(SUI, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Sui", jsx(Text, { size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Sui Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text!", style: { backgroundColor: 'var(--ape-color-text)', color: 'var(--ape-color-primary-button)' }, children: "Connect" }) })] }));
+    return (jsxs(Flex, { className: "ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer", style: { background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }, children: [jsxs(Flex, { className: "ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center", children: [jsx(Flex, { className: "ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden", children: jsx(SUI, { width: "30" }) }), jsxs(Flex, { className: "ape:flex-col", children: [jsxs(Text, { size: "18px", className: "ape:font-bold ape:flex ape:items-center", style: { lineHeight: '18.5px' }, children: ["Sui", jsx(Text, { as: "span", size: "10px", className: "ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]", style: { color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }, children: "NEW" })] }), jsx(Text, { size: "11px", className: "ape:font-normal", style: { color: 'white', lineHeight: '1rem' }, children: "Connect your wallet to view your Sui Bonds!" })] })] }), jsx(Flex, { className: "ape:min-w-[100px]", children: jsx(Button, { onClick: handleConnect, className: "ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold  ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button", children: "Connect" }) })] }));
 }
 export { ConnectToSuiBanner as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSuiWalletConnector } from '../../config/constants/walletConnectors'\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 config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n <SUI width=\"30\" />\n </Flex>\n <Flex className=\"ape:flex-col\">\n <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n Sui\n <Text\n size=\"10px\"\n className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n >\n NEW\n </Text>\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Sui Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:enabled:hover:text-text~~!\"\n style={{~~ ~~backgroundColor~~: ~~'var(--ape~~-~~color~~-~~text)',~~ ~~color~~: ~~'var(--ape~~-~~color-~~primary-button~~)' }}~~\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOc,SAAU,kBAAkB,GAAA;AACxC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAC5F,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,~~EAAA~~,~~QAAA,EAAA,CAC5EC,~~GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,~~YACtFA~~,GAAA,CAAC,GAAG,~~EAAA~~,~~EAAC,~~KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACb,EACPD,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAC,~~SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,~~IAAC~~,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,~~EAAA~~,~~QAAA,EAAA,CAAA,KAAA,EAEnGC,~~GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,~~EAAA~~,~~QAAA~~,EAAA,~~6CAAA~~,~~EAAA,CAEpF,IACF,~~CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,~~IAAC~~,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,~~IAAC~~,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,~~yHAAyH~~,~~EACnI,KAAK,EAAE,EAAE,eAAe,EAAE,uBAAuB,EAAE,KAAK,EAAE,iCAAiC,EAAE,~~EAAA,QAAA,EAAA,SAAA,EAAA,~~CAGtF~~,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"ConnectToSuiBanner.js","sources":["../../../src/components/ConnectoToVmBanners/ConnectToSuiBanner.tsx"],"sourcesContent":["import { useSDKConfig } from '../../state/useSDKConfig'\nimport { openSuiWalletConnector } from '../../config/constants/walletConnectors'\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 config = useSDKConfig()\n const handleConnect = config?.openWalletConnectors?.sui ? openSuiWalletConnector : undefined\n return (\n <Flex\n className=\"ape:w-full ape:h-[75px] ape:p-[10px] ape:rounded-[10px] ape:justify-between ape:items-center ape:border-none ape:cursor-pointer\"\n style={{ background: 'linear-gradient(135deg, #2B2B2B 0%, #1A1A2E 100%)' }}\n >\n <Flex className=\"ape:w-full ape:max-w-[300px] ape:gap-[10px] ape:items-center\">\n <Flex className=\"ape:min-w-[30px] ape:min-h-[30px] ape:rounded-full ape:overflow-hidden\">\n <SUI width=\"30\" />\n </Flex>\n <Flex className=\"ape:flex-col\">\n <Text size=\"18px\" className=\"ape:font-bold ape:flex ape:items-center\" style={{ lineHeight: '18.5px' }}>\n Sui\n <Text\n as=\"span\"\n size=\"10px\"\n className=\"ape:font-semibold ape:p-[4px_6px] ape:rounded-[4px] ape:ml-[6px] ape:mr-[6px]\"\n style={{ color: '#FAFAFA', background: 'rgba(250, 250, 250, 0.3)', lineHeight: '8px' }}\n >\n NEW\n </Text>\n </Text>\n <Text size=\"11px\" className=\"ape:font-normal\" style={{ color: 'white', lineHeight: '1rem' }}>\n Connect your wallet to view your Sui Bonds!\n </Text>\n </Flex>\n </Flex>\n <Flex className=\"ape:min-w-[100px]\">\n <Button\n onClick={handleConnect}\n className=\"ape:border-none ape:h-[31px] ape:w-[210px] ape:xl:w-[100px] ape:text-[14px]! ape:font-bold ape:bg-text ape:border-text ape:enabled:hover:text-text ape:enabled:hover:bg-primary-button ape:text-primary-button\"\n >\n Connect\n </Button>\n </Flex>\n </Flex>\n )\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAOc,SAAU,kBAAkB,GAAA;AACxC,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,MAAM,EAAE,oBAAoB,EAAE,GAAG,GAAG,sBAAsB,GAAG,SAAS;AAC5F,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,iIAAiI,EAC3I,KAAK,EAAE,EAAE,UAAU,EAAE,mDAAmD,EAAE,EAAA,QAAA,EAAA,CAE1EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8DAA8D,aAC5EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wEAAwE,EAAA,QAAA,EACtFA,GAAA,CAAC,GAAG,IAAC,KAAK,EAAC,IAAI,EAAA,CAAG,EAAA,CACb,EACPD,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BA,IAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,yCAAyC,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,oBAEnGC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,0BAA0B,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,KAAA,EAAA,CAGjF,IACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,4DAEpF,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mBAAmB,EAAA,QAAA,EACjCA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,iNAAiN,EAAA,QAAA,EAAA,SAAA,EAAA,CAGpN,EAAA,CACJ,CAAA,EAAA,CACF;AAEX;;;;"}

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

@@ -8,7 +8,7 @@ const FavIcon = ({ filterOption, setFilterOption, }) => {
     const handleFilterOption = (newOption) => {
         setFilterOption(newOption);
     };
-    return (jsx(Flex, { className: "search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-[15px]", onClick: () => {
+    return (jsx(Flex, { className: "search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-3.75", 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(StarFilled, { width: 22, height: 22 }) : jsx(Star, { width: 20, height: 20 }) }, filterOption === 'FAVORITES' ? 'StarFilled' : 'Star') }) }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport 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 className=\"search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-~~[15px]~~\"\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' ? <StarFilled width={22} height={22} /> : <Star width={20} height={20} />}\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;IAED,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,~~uGAAuG~~,~~EACjH~~,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,GAAGA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,EAAA,EAPlG,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAQ9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}
1	+ {"version":3,"file":"FavFilter.js","sources":["../../../src/components/FavIcons/FavFilter.tsx"],"sourcesContent":["import React from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport Flex from '../uikit-sdk/Flex'\nimport 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 className=\"search-fav-icon ape:justify-center ape:items-center ape:min-w-[25px] ape:cursor-pointer ape:ml-3.75\"\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' ? <StarFilled width={22} height={22} /> : <Star width={20} height={20} />}\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;IAED,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,qGAAqG,EAC/G,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,GAAGA,GAAA,CAAC,UAAU,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,GAAGA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI,EAAA,EAPlG,YAAY,KAAK,WAAW,GAAG,YAAY,GAAG,MAAM,CAQ9C,EAAA,CACG,EAAA,CACb;AAEX;;;;"}

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

@@ -9,11 +9,7 @@ const MenuSelect = ({ selectedOption, setOption, options, ...props }) => {
         // to beat its own base classes (`ape:h-fit` etc.) — a `w-full` class here
         // would silently lose to that inline style, same reasoning as the `h-fit`
         // vs `h-[36px]` conflict below.
-        width: "100%", ...props,
-        // `!` is required: Select's own base classes include `ape:h-fit`, and
-        // Tailwind's internal class ordering — not this string's order — decides
-        // which of two same-specificity utilities wins.
-        className: "dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2", children: options?.map((option) => {
+        width: "100%", ...props, className: `dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2!`, children: options?.map((option) => {
             return (jsx(SelectItem, { size: "xsm", value: option.value, children: jsx(Text, { className: "menu-selector ape:font-normal ape:pl-[10px]", children: option.label }) }, option.label));
         }) }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuSelect.js","sources":["../../../src/components/MenuSelect/MenuSelect.tsx"],"sourcesContent":["import React from 'react'\nimport Select from '../uikit-sdk/Select/Select'\nimport SelectItem from '../uikit-sdk/Select/SelectItem'\nimport Text from '../uikit-sdk/Text'\n\ntype Option = {\n label: string\n value: string\n}\n\nconst MenuSelect = ({\n selectedOption,\n setOption,\n options,\n ...props\n}:\n \| {\n selectedOption: string\n setOption: (option: string) => void\n options: Option[] \| undefined\n }\n \| any) => {\n return (\n <Select\n size=\"xsm\"\n onChange={(e) => setOption(e.target.value)}\n active={selectedOption}\n // Select applies `width` as inline style, which is the only reliable way\n // to beat its own base classes (`ape:h-fit` etc.) — a `w-full` class here\n // would silently lose to that inline style, same reasoning as the `h-fit`\n // vs `h-[36px]` conflict below.\n width=\"100%\"\n ~~{...props}\n~~ // `!` is required: Select's own base classes include `ape:h-fit`, and\n // Tailwind's internal class ordering — not this string's order — decides\n // which of two same-specificity utilities wins.\n className~~=\"~~dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2\"\n >\n {options?.map((option: Option) => {\n return (\n <SelectItem size=\"xsm\" value={option.value} key={option.label}>\n <Text className=\"menu-selector ape:font-normal ape:pl-[10px]\">{option.label}</Text>\n </SelectItem>\n )\n })}\n </Select>\n )\n}\n\nexport default MenuSelect\n"],"names":["_jsx"],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EAOH,KAAI;IACT,QACEA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,MAAM,EAAE,cAAc;;;;;~~QAKtB~~,KAAK,EAAC,MAAM,EAAA,~~GACR~~,KAAK~~;;;;QAIT~~,SAAS,~~EAAC~~,~~4DAA4D~~,EAAA,QAAA,~~EAErE~~,OAAO,EAAE,GAAG,CAAC,CAAC,MAAc,KAAI;AAC/B,YAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACxCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,EAAA,CAAQ,EAAA,EADpC,MAAM,CAAC,KAAK,CAEhD;QAEjB,CAAC,CAAC,EAAA,CACK;AAEb;;;;"}
1	+ {"version":3,"file":"MenuSelect.js","sources":["../../../src/components/MenuSelect/MenuSelect.tsx"],"sourcesContent":["import React from 'react'\nimport Select from '../uikit-sdk/Select/Select'\nimport SelectItem from '../uikit-sdk/Select/SelectItem'\nimport Text from '../uikit-sdk/Text'\n\ntype Option = {\n label: string\n value: string\n}\n\nconst MenuSelect = ({\n selectedOption,\n setOption,\n options,\n ...props\n}:\n \| {\n selectedOption: string\n setOption: (option: string) => void\n options: Option[] \| undefined\n }\n \| any) => {\n return (\n <Select\n size=\"xsm\"\n onChange={(e) => setOption(e.target.value)}\n active={selectedOption}\n // Select applies `width` as inline style, which is the only reliable way\n // to beat its own base classes (`ape:h-fit` etc.) — a `w-full` class here\n // would silently lose to that inline style, same reasoning as the `h-fit`\n // vs `h-[36px]` conflict below.\n width=\"100%\"\n // `!` is required: Select's own base classes include `ape:h-fit`, and\n // Tailwind's internal class ordering — not this string's order — decides\n // which of two same-specificity utilities wins.\n {...props}\n className={`dropdown ape:h-[36px]! ape:flex ape:pr-[4px] ape:bg-white2!`}\n >\n {options?.map((option: Option) => {\n return (\n <SelectItem size=\"xsm\" value={option.value} key={option.label}>\n <Text className=\"menu-selector ape:font-normal ape:pl-[10px]\">{option.label}</Text>\n </SelectItem>\n )\n })}\n </Select>\n )\n}\n\nexport default MenuSelect\n"],"names":["_jsx"],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EAOH,KAAI;IACT,QACEA,GAAA,CAAC,MAAM,EAAA,EACL,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1C,MAAM,EAAE,cAAc;;;;;AAKtB,QAAA,KAAK,EAAC,MAAM,EAAA,GAIR,KAAK,EACT,SAAS,EAAE,CAAA,2DAAA,CAA6D,EAAA,QAAA,EAEvE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAc,KAAI;AAC/B,YAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAA,QAAA,EACxCA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAE,MAAM,CAAC,KAAK,EAAA,CAAQ,EAAA,EADpC,MAAM,CAAC,KAAK,CAEhD;QAEjB,CAAC,CAAC,EAAA,CACK;AAEb;;;;"}

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
 import clsx from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
 import { TESTNET_CHAINS, NETWORK_ICONS, NETWORK_LABEL, MAINNET_CHAINS } from '../../config/constants/chains.js';
 import Checkbox from '../uikit-sdk/Checkbox/index.js';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
@@ -54,18 +55,18 @@ const NetworkFilter = ({ chainFilterOption, setChainFilterOption, }) => {
     };
     return (jsxs(Flex, { className: "ape:w-full ape:relative", children: [isOpen && (
             // Backdrop that closes the dropdown if a user clicks outside of it
-            jsx(Flex, { className: "ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]", onClick: () => setIsOpen(false) })), jsxs(Flex, { className: "dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between", onClick: () => setIsOpen(!isOpen), children: [jsx(Text, { size: "14px", className: "ape:font-normal ape:px-[10px]", style: { lineHeight: '22px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx(Flex, { className: "ape:ml-[5px]", children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), isOpen && (jsxs(Flex, { className: "ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001]", children: [['All Chains', ...mainnetChains].map((chainId) => {
-                        return (jsx(Flex, { className: rowClasses, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Chains" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
-                                                    const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
-                                                    return jsx(ChainIcon, { width: "22px" });
-                                                })() }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
-                    }), testnetChains.length > 0 &&
-                        ['All Testnet', ...testnetChains].map((chainId) => {
-                            return (jsx(Flex, { className: clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]'), onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Testnet" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
+            jsx(Flex, { className: "ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]", onClick: () => setIsOpen(false) })), jsxs(Flex, { className: "dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between", onClick: () => setIsOpen(!isOpen), children: [jsx(Text, { size: "14px", className: "ape:font-normal ape:px-[10px]", style: { lineHeight: '22px' }, children: chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})` }), jsx(Flex, { className: "ape:ml-[5px]", children: jsx(Caret, { direction: isOpen ? 'up' : 'down' }) })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: 'fit-content' }, transition: { opacity: { duration: 0.2 } }, exit: { opacity: 0, height: 0 }, className: "ape:flex ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001] ape:shadow-[0px_1px_4px_rgb(0_0_0/0.16)]", children: [['All Chains', ...mainnetChains].map((chainId) => {
+                            return (jsx(Flex, { className: rowClasses, onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Chains' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Chains" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
                                                         const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
                                                         return jsx(ChainIcon, { width: "22px" });
                                                     })() }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
-                        })] }))] }));
+                        }), testnetChains.length > 0 &&
+                            ['All Testnet', ...testnetChains].map((chainId) => {
+                                return (jsx(Flex, { className: clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]'), onClick: () => handleCheckbox(chainId.toString()), children: jsxs(Flex, { className: "ape:w-full ape:items-center ape:text-[14px]", children: [jsx(Checkbox, { checked: chainFilterOption.includes(chainId.toString()), onChange: () => handleCheckbox(chainId.toString()) }), chainId === 'All Testnet' ? (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px]", children: jsx(AllChains, { width: "22px" }) }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: "All Testnet" })] })) : (jsxs(Fragment, { children: [jsx(Flex, { className: "ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden", children: (() => {
+                                                            const ChainIcon = NETWORK_ICONS[chainId] ?? Question;
+                                                            return jsx(ChainIcon, { width: "22px" });
+                                                        })() }), jsx(Text, { size: "14px", className: "ape:font-normal", style: { lineHeight: '22px' }, children: NETWORK_LABEL[chainId] })] }))] }) }, chainId));
+                            })] })) })] }));
 };
 export { NetworkFilter as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\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 rowClasses = 'ape:rounded-normal ape:p-[5px_15px] ape:min-h-[40px] ape:cursor-pointer ape:hover:bg-white3'\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 className=\"ape:w-full ape:relative\">\n {isOpen && (\n // Backdrop that closes the dropdown if a user clicks outside of it\n <Flex\n className=\"ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]\"\n onClick={() => setIsOpen(false)}\n />\n )}\n <Flex\n className=\"dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <Text size=\"14px\" className=\"ape:font-normal ape:px-[10px]\" style={{ lineHeight: '22px' }}>\n {chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})`}\n </Text>\n <Flex className=\"ape:ml-[5px]\">\n <Caret direction={isOpen ? 'up' : 'down'} />\n </Flex>\n </Flex>\n {isOpen && (\n <Flex className=\"ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001]\">\n {['All Chains', ...mainnetChains].map((chainId) => {\n return (\n <Flex key={chainId} className={rowClasses} onClick={() => handleCheckbox(chainId.toString())}>\n <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n <Checkbox\n checked={chainFilterOption.includes(chainId.toString())}\n onChange={() => handleCheckbox(chainId.toString())}\n />\n {chainId === 'All Chains' ? (\n <>\n <Flex className=\"ape:mx-[8px]\">\n <AllChains width=\"22px\" />\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n All Chains\n </Text>\n </>\n ) : (\n <>\n <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n {(() => {\n const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n return <ChainIcon width=\"22px\" />\n })()}\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n {NETWORK_LABEL[chainId as ChainId]}\n </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 className={clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]')}\n onClick={() => handleCheckbox(chainId.toString())}\n >\n <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n <Checkbox\n checked={chainFilterOption.includes(chainId.toString())}\n onChange={() => handleCheckbox(chainId.toString())}\n />\n {chainId === 'All Testnet' ? (\n <>\n <Flex className=\"ape:mx-[8px]\">\n <AllChains width=\"22px\" />\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n All Testnet\n </Text>\n </>\n ) : (\n <>\n <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n {(() => {\n const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n return <ChainIcon width=\"22px\" />\n })()}\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n {NETWORK_LABEL[chainId as ChainId]}\n </Text>\n </>\n )}\n </Flex>\n </Flex>\n )\n })}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default NetworkFilter\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/NetworkFilter/index.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport clsx from 'clsx'\nimport { AnimatePresence, motion } from 'framer-motion'\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 rowClasses = 'ape:rounded-normal ape:p-[5px_15px] ape:min-h-[40px] ape:cursor-pointer ape:hover:bg-white3'\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 className=\"ape:w-full ape:relative\">\n {isOpen && (\n // Backdrop that closes the dropdown if a user clicks outside of it\n <Flex\n className=\"ape:bg-transparent ape:fixed ape:top-0 ape:left-0 ape:w-screen ape:h-screen ape:z-[1000]\"\n onClick={() => setIsOpen(false)}\n />\n )}\n <Flex\n className=\"dropdown ape:bg-white2 ape:p-[6px] ape:rounded-normal ape:cursor-pointer ape:items-center ape:w-full ape:justify-between\"\n onClick={() => setIsOpen(!isOpen)}\n >\n <Text size=\"14px\" className=\"ape:font-normal ape:px-[10px]\" style={{ lineHeight: '22px' }}>\n {chainFilterOption.includes('All Chains') ? 'All Chains' : `Chains (${chainFilterOption.length})`}\n </Text>\n <Flex className=\"ape:ml-[5px]\">\n <Caret direction={isOpen ? 'up' : 'down'} />\n </Flex>\n </Flex>\n <AnimatePresence>\n {isOpen && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: 'fit-content' }}\n transition={{ opacity: { duration: 0.2 } }}\n exit={{ opacity: 0, height: 0 }}\n className=\"ape:flex ape:flex-col ape:absolute ape:top-[45px] ape:right-0 ape:w-[235px] ape:max-h-[300px] ape:md:max-h-[350px] ape:overflow-y-scroll ape:rounded-normal ape:bg-white2 ape:z-[1001] ape:shadow-[0px_1px_4px_rgb(0_0_0/0.16)]\"\n >\n {['All Chains', ...mainnetChains].map((chainId) => {\n return (\n <Flex key={chainId} className={rowClasses} onClick={() => handleCheckbox(chainId.toString())}>\n <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n <Checkbox\n checked={chainFilterOption.includes(chainId.toString())}\n onChange={() => handleCheckbox(chainId.toString())}\n />\n {chainId === 'All Chains' ? (\n <>\n <Flex className=\"ape:mx-[8px]\">\n <AllChains width=\"22px\" />\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n All Chains\n </Text>\n </>\n ) : (\n <>\n <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n {(() => {\n const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n return <ChainIcon width=\"22px\" />\n })()}\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n {NETWORK_LABEL[chainId as ChainId]}\n </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 className={clsx(rowClasses, chainId !== 'All Testnet' ? 'ape:pl-[35px]' : 'ape:pl-[15px]')}\n onClick={() => handleCheckbox(chainId.toString())}\n >\n <Flex className=\"ape:w-full ape:items-center ape:text-[14px]\">\n <Checkbox\n checked={chainFilterOption.includes(chainId.toString())}\n onChange={() => handleCheckbox(chainId.toString())}\n />\n {chainId === 'All Testnet' ? (\n <>\n <Flex className=\"ape:mx-[8px]\">\n <AllChains width=\"22px\" />\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n All Testnet\n </Text>\n </>\n ) : (\n <>\n <Flex className=\"ape:mx-[8px] ape:rounded-[50px] ape:overflow-hidden\">\n {(() => {\n const ChainIcon = NETWORK_ICONS[chainId as ChainId] ?? Question\n return <ChainIcon width=\"22px\" />\n })()}\n </Flex>\n <Text size=\"14px\" className=\"ape:font-normal\" style={{ lineHeight: '22px' }}>\n {NETWORK_LABEL[chainId as ChainId]}\n </Text>\n </>\n )}\n </Flex>\n </Flex>\n )\n })}\n </motion.div>\n )}\n </AnimatePresence>\n </Flex>\n )\n}\n\nexport default NetworkFilter\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 const ProgressBar = ({ value }) => {
-    return (jsx(Flex, { className: "ape:w-[100px] ape:lg:w-full ape:items-center ape:flex-row", children: jsx("div", { className: "progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden", children: jsx("div", { className: "progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text", style: { width: `${value <= 3 ? 3 : value}%` } }) }) }));
+    return (jsx(Flex, { className: "ape:w-[100px] ape:md:w-full ape:items-center ape:flex-row", children: jsx("div", { className: "progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden", children: jsx("div", { className: "progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text", style: { width: `${value <= 3 ? 3 : value}%` } }) }) }));
 };
 export { ProgressBar as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\ninterface ProgressBarProps {\n value: number\n color?: string\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {\n return (\n <Flex className=\"ape:w-[100px] ape:lg:w-full ape:items-center ape:flex-row\">\n <div className=\"progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden\">\n <div\n className=\"progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text\"\n style={{ width: `${value <= 3 ? 3 : value}%` }}\n />\n </div>\n </Flex>\n )\n}\n\nexport default ProgressBar\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,KAAI;AAC5D,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EACzEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oGAAoG,EAAA,QAAA,EACjHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA,CAAA,CAAG,EAAE,GAC9C,EAAA,CACE,EAAA,CACD;AAEX;;;;"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\ninterface ProgressBarProps {\n value: number\n color?: string\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {\n return (\n <Flex className=\"ape:w-[100px] ape:md:w-full ape:items-center ape:flex-row\">\n <div className=\"progressbar-background ape:w-full ape:h-[5px] ape:bg-white4 ape:rounded-[10px] ape:overflow-hidden\">\n <div\n className=\"progressbar-completed ape:rounded-[10px] ape:h-full ape:bg-text\"\n style={{ width: `${value <= 3 ? 3 : value}%` }}\n />\n </div>\n </Flex>\n )\n}\n\nexport default ProgressBar\n"],"names":["_jsx"],"mappings":";;;AAQA,MAAM,WAAW,GAA+B,CAAC,EAAE,KAAK,EAAE,KAAI;AAC5D,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EACzEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oGAAoG,EAAA,QAAA,EACjHA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iEAAiE,EAC3E,KAAK,EAAE,EAAE,KAAK,EAAE,CAAA,EAAG,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA,CAAA,CAAG,EAAE,GAC9C,EAAA,CACE,EAAA,CACD;AAEX;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import colors from '../../theme/colors.js';
+import { resolveColor } from '../../utils/resolveColor.js';
 import { usePopups } from '../../state/popups/usePopups.js';
 import Flex from '../uikit-sdk/Flex/index.js';
 import IconButton from '../uikit-sdk/Button/IconButton.js';
@@ -39,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' }, className: "ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]", style: { top: 108 * popIndex, columnGap: '11px' }, children: [jsx(Flex, { children: jsx(VariantIcon, { color: variant, width: "30px" }) }), jsxs(Flex, { className: "ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]", children: [jsx(Text, { size: "14px", className: "ape:font-medium", style: { color: colors[variant] }, children: title }), description && (jsx(Text, { size: "12px", className: "ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3", style: { lineHeight: '1rem' }, children: parsedErrorString })), url && (jsxs("a", { href: url, className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx(Text, { className: "ape:mr-[5px]", children: "View on Explorer" }), jsx(External, {})] })), showSupportLink && (jsxs("a", { href: 'https://discord.com/channels/821817977917538375/1110438345701593088', className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx(Text, { className: "ape:mr-[5px]", children: "Having issues? Get support" }), jsx(External, {})] }))] }), jsx(Flex, { className: "ape:items-start ape:pt-[3px]", onClick: () => removePopup(popup), children: jsx(IconButton, { icon: Close, color: "text", variant: "transparent" }) })] })) }));
+    return (jsx(AnimatePresence, { children: show && (jsxs(motion.div, { initial: { right: '-300px' }, animate: { right: '10px' }, transition: { duration: 0.5 }, exit: { right: '-300px' }, className: "ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]", style: { top: 108 * popIndex, columnGap: '11px' }, children: [jsx(Flex, { children: jsx(VariantIcon, { color: variant, width: "30px" }) }), jsxs(Flex, { className: "ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]", children: [jsx(Text, { size: "14px", className: "ape:font-medium", style: { color: resolveColor(variant) }, children: title }), description && (jsx(Text, { size: "12px", className: "ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3", style: { lineHeight: '1rem' }, children: parsedErrorString })), url && (jsxs("a", { href: url, className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx(Text, { className: "ape:mr-[5px]", children: "View on Explorer" }), jsx(External, {})] })), showSupportLink && (jsxs("a", { href: 'https://discord.com/channels/821817977917538375/1110438345701593088', className: linkClasses, target: "_blank", rel: "noreferrer", children: [jsx(Text, { className: "ape:mr-[5px]", children: "Having issues? Get support" }), jsx(External, {})] }))] }), jsx(Flex, { className: "ape:items-start ape:pt-[3px]", onClick: () => removePopup(popup), children: jsx(IconButton, { icon: Close, color: "text", variant: "transparent" }) })] })) }));
 };
 export { Toast as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport ~~colors~~ from '../../~~theme~~/~~colors~~'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Text from '../uikit-sdk/Text'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport Success from '../uikit-sdk/Svg/Icons/Success'\nimport ErrorIcon from '../uikit-sdk/Svg/Icons/Error'\n\nconst linkClasses = 'ape:text-[12px] ape:underline ape:text-primary-bright ape:font-bold ape:flex ape:items-center'\n\nconst Toast = ({ popIndex, popup }: { popIndex: number; popup: PopupProps }) => {\n const { variant, title, description, url } = popup\n const { removePopup } = usePopups()\n const [show, setShow] = useState(true)\n const VariantIcon = variant === 'success' ? Success : ErrorIcon\n\n useEffect(() => {\n setTimeout(() => {\n setShow(false)\n setTimeout(() => {\n removePopup(popup)\n }, 500)\n }, 10000)\n /* eslint-disable react-hooks/exhaustive-deps /\n }, [])\n\n const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request')\n const isSlippageError =\n popup?.description?.includes('INSUFFICIENT') \|\|\n popup?.description?.includes('Slippage') \|\|\n popup?.description?.includes('Return amount is not enough')\n\n const isTimeoutError = popup?.description?.includes('Blockhash not found')\n\n const isInsufficientFundsError = popup?.description?.includes('insufficient funds')\n\n const parsedErrorString = isSlippageError\n ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'\n : isTimeoutError\n ? 'Tx timeout. Please try again.'\n : isInsufficientFundsError\n ? 'Insufficient funds.'\n : popup?.description\n\n return (\n <AnimatePresence>\n {show && (\n <motion.div\n initial={{ right: '-300px' }}\n animate={{ right: '10px' }}\n transition={{ duration: 0.5 }}\n exit={{ right: '-300px' }}\n className=\"ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]\"\n style={{ top: 108 popIndex, columnGap: '11px' }}\n >\n <Flex>\n <VariantIcon color={variant} width=\"30px\" />\n </Flex>\n <Flex className=\"ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]\">\n <Text\n size=\"14px\"\n className=\"ape:font-medium\"\n style={{ color: ~~colors[~~variant ~~as keyof typeof colors]~~ }}\n >\n {title}\n </Text>\n {description && (\n <Text\n size=\"12px\"\n className=\"ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3\"\n style={{ lineHeight: '1rem' }}\n >\n {parsedErrorString}\n </Text>\n )}\n {url && (\n <a href={url} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n <Text className=\"ape:mr-[5px]\">View on Explorer</Text>\n <External />\n </a>\n )}\n {showSupportLink && (\n <a\n href={'https://discord.com/channels/821817977917538375/1110438345701593088'}\n className={linkClasses}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Text className=\"ape:mr-[5px]\">Having issues? Get support</Text>\n <External />\n </a>\n )}\n </Flex>\n <Flex className=\"ape:items-start ape:pt-[3px]\" onClick={() => removePopup(popup)}>\n <IconButton icon={Close} color=\"text\" variant=\"transparent\" />\n </Flex>\n </motion.div>\n )}\n </AnimatePresence>\n )\n}\n\nexport default Toast\n"],"names":["ErrorIcon","_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,WAAW,GAAG,+FAA+F;AAEnH,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA2C,KAAI;IAC7E,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK;AAClD,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE;IACnC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,SAAS,GAAG,OAAO,GAAGA,KAAS;IAE/D,SAAS,CAAC,MAAK;QACb,UAAU,CAAC,MAAK;YACd,OAAO,CAAC,KAAK,CAAC;YACd,UAAU,CAAC,MAAK;gBACd,WAAW,CAAC,KAAK,CAAC;YACpB,CAAC,EAAE,GAAG,CAAC;QACT,CAAC,EAAE,KAAK,CAAC;;IAEX,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,2BAA2B,CAAC;IACjH,MAAM,eAAe,GACnB,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC;AAC5C,QAAA,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,UAAU,CAAC;AACxC,QAAA,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,6BAA6B,CAAC;IAE7D,MAAM,cAAc,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,qBAAqB,CAAC;IAE1E,MAAM,wBAAwB,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IAEnF,MAAM,iBAAiB,GAAG;AACxB,UAAE;AACF,UAAE;AACA,cAAE;AACF,cAAE;AACA,kBAAE;AACF,kBAAE,KAAK,EAAE,WAAW;IAE1B,QACEC,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACb,IAAI,KACHC,IAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACT,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAC5B,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC1B,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EACzB,SAAS,EAAC,0IAA0I,EACpJ,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAA,QAAA,EAAA,CAEjDD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CACvC,EACPC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,CACnED,GAAA,CAAC,IAAI,EAAA,~~EACH~~,IAAI,EAAC,MAAM,~~EACX~~,SAAS,EAAC,iBAAiB,~~EAC3B~~,KAAK,EAAE,EAAE,KAAK,EAAE,~~MAAM~~,CAAC,~~OAA8B~~,CAAC,EAAE,EAAA,QAAA,~~EAEvD~~,KAAK,EAAA,CACD,EACN,WAAW,KACVA,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,+DAA+D,EACzE,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAAA,QAAA,EAE5B,iBAAiB,EAAA,CACb,CACR,EACA,GAAG,KACFC,IAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY,EAAA,QAAA,EAAA,CACpED,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAwB,EACtDA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,CAAA,EAAA,CACV,CACL,EACA,eAAe,KACdC,IAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,qEAAqE,EAC3E,SAAS,EAAE,WAAW,EACtB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAAA,QAAA,EAAA,CAEhBD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAkC,EAChEA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,CAAA,EAAA,CACV,CACL,CAAA,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8BAA8B,EAAC,OAAO,EAAE,MAAM,WAAW,CAAC,KAAK,CAAC,EAAA,QAAA,EAC9EA,GAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,aAAa,EAAA,CAAG,EAAA,CACzD,CAAA,EAAA,CACI,CACd,EAAA,CACe;AAEtB;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/Toast/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { resolveColor } from '../../utils/resolveColor'\nimport { PopupProps, usePopups } from '../../state/popups/usePopups'\nimport Flex from '../uikit-sdk/Flex'\nimport IconButton from '../uikit-sdk/Button/IconButton'\nimport Text from '../uikit-sdk/Text'\nimport Close from '../uikit-sdk/Svg/Icons/Close'\nimport External from '../uikit-sdk/Svg/Icons/External'\nimport Success from '../uikit-sdk/Svg/Icons/Success'\nimport ErrorIcon from '../uikit-sdk/Svg/Icons/Error'\n\nconst linkClasses = 'ape:text-[12px] ape:underline ape:text-primary-bright ape:font-bold ape:flex ape:items-center'\n\nconst Toast = ({ popIndex, popup }: { popIndex: number; popup: PopupProps }) => {\n const { variant, title, description, url } = popup\n const { removePopup } = usePopups()\n const [show, setShow] = useState(true)\n const VariantIcon = variant === 'success' ? Success : ErrorIcon\n\n useEffect(() => {\n setTimeout(() => {\n setShow(false)\n setTimeout(() => {\n removePopup(popup)\n }, 500)\n }, 10000)\n /* eslint-disable react-hooks/exhaustive-deps /\n }, [])\n\n const showSupportLink = variant === 'error' && !url && !popup?.description?.includes('User rejected the request')\n const isSlippageError =\n popup?.description?.includes('INSUFFICIENT') \|\|\n popup?.description?.includes('Slippage') \|\|\n popup?.description?.includes('Return amount is not enough')\n\n const isTimeoutError = popup?.description?.includes('Blockhash not found')\n\n const isInsufficientFundsError = popup?.description?.includes('insufficient funds')\n\n const parsedErrorString = isSlippageError\n ? 'Slippage error. Try increasing Slippage in the cog icon ⚙️.'\n : isTimeoutError\n ? 'Tx timeout. Please try again.'\n : isInsufficientFundsError\n ? 'Insufficient funds.'\n : popup?.description\n\n return (\n <AnimatePresence>\n {show && (\n <motion.div\n initial={{ right: '-300px' }}\n animate={{ right: '10px' }}\n transition={{ duration: 0.5 }}\n exit={{ right: '-300px' }}\n className=\"ape:fixed ape:flex ape:w-[300px] ape:bg-white2 ape:rounded-[10px] ape:pl-[20px] ape:py-[14px] ape:pr-[14px] ape:min-h-[90px] ape:z-[103]\"\n style={{ top: 108 popIndex, columnGap: '11px' }}\n >\n <Flex>\n <VariantIcon color={variant} width=\"30px\" />\n </Flex>\n <Flex className=\"ape:flex-col ape:flex-1 ape:text-text ape:ml-[10px]\">\n <Text size=\"14px\" className=\"ape:font-medium\" style={{ color: resolveColor(variant) }}>\n {title}\n </Text>\n {description && (\n <Text\n size=\"12px\"\n className=\"ape:font-normal ape:max-h-[48px] ape:min-h-4 ape:line-clamp-3\"\n style={{ lineHeight: '1rem' }}\n >\n {parsedErrorString}\n </Text>\n )}\n {url && (\n <a href={url} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n <Text className=\"ape:mr-[5px]\">View on Explorer</Text>\n <External />\n </a>\n )}\n {showSupportLink && (\n <a\n href={'https://discord.com/channels/821817977917538375/1110438345701593088'}\n className={linkClasses}\n target=\"_blank\"\n rel=\"noreferrer\"\n >\n <Text className=\"ape:mr-[5px]\">Having issues? Get support</Text>\n <External />\n </a>\n )}\n </Flex>\n <Flex className=\"ape:items-start ape:pt-[3px]\" onClick={() => removePopup(popup)}>\n <IconButton icon={Close} color=\"text\" variant=\"transparent\" />\n </Flex>\n </motion.div>\n )}\n </AnimatePresence>\n )\n}\n\nexport default Toast\n"],"names":["ErrorIcon","_jsx","_jsxs"],"mappings":"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"}

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

@@ -39,13 +39,11 @@ const TokenInfoAndName = ({ tokenSymbol, chain, tag, vestEnds, isHotBond, market
     const ChainIcon = (chain && NETWORK_ICONS[chain]) || Question;
     return (jsxs(Flex, { className: clsx('tokeninfoname container ape:w-full ape:relative ape:h-full ape:rounded-[10px]', cardsView
             ? 'ape:flex-col ape:items-start ape:gap-[10px] ape:pl-0 ape:pt-[5px] ape:justify-start'
-            : 'ape:justify-start ape:items-center ape:pl-[20px]'), children: [jsx(Flex, { className: "ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal", style: {
+            : 'ape:justify-start ape:items-center'), children: [jsx(Flex, { className: "ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal", style: {
                     background: isHotBond
                         ? 'transparent'
                         : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,
-                } }), jsx(Flex, { className: clsx('tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]', cardsView && 'ape:hidden'), children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsxs(Flex, { className: clsx('tokeninfoname tokencontainer ape:pl-[6px] ape:w-full ape:items-center', cardsView
-                    ? 'ape:max-w-full ape:pl-0'
-                    : 'ape:max-w-[175px] ape:md:max-w-[140px] ape:lg:max-w-[190px]', !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0')), children: [jsxs(Flex, { className: "ape:relative ape:min-w-[33px]", children: [jsx(Flex, { style: MCTokenIconStyles[marketingCampaign] }), jsx(TokenImage, { symbol: tokenSymbol === 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext ape:ml-[10px] ape:font-bold ape:w-full ape:flex-col", children: [jsx(Flex, { className: "ape:justify-between ape:w-full ape:items-center", children: jsx(Text, { className: "ape:text-[12px]! ape:md:text-[14px]! ape:lg:text-[16px]!", children: tokenSymbol }) }), vestEnds && jsx(Flex, { className: "ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]", children: vestEnds })] }), jsx(Flex, { className: "tokeninfofav ape:min-w-[25px] ape:p-[5px]", children: jsx(AddFavToken, { tokenSymbol: tokenSymbol, hotBond: !vestEnds && isHotBond }) })] }), jsx(Flex, { className: clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start'), children: jsx(Flex, { className: isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex', children: (tag || marketingCampaign) && (jsx(ListTag, { text: MCTagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
+                } }), jsx(Flex, { className: clsx('tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]', cardsView && 'ape:hidden'), children: jsx(ChainIcon, { width: 20, height: 20 }) }), jsxs(Flex, { className: clsx('tokeninfoname tokencontainer ape:w-full ape:items-center', cardsView ? 'ape:max-w-full ape:pl-0' : 'ape:sm:max-w-[190px]', !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0')), children: [jsxs(Flex, { className: "ape:relative ape:min-w-[33px] ape:ml-3.5 ape:sm:ml-5", children: [jsx(Flex, { style: MCTokenIconStyles[marketingCampaign] }), jsx(TokenImage, { symbol: tokenSymbol, size: 33 })] }), jsxs(Flex, { className: "tokeninfoname tokentext ape:ml-1 ape:sm:ml-2 ape:font-bold ape:w-full ape:flex-col", children: [jsx(Flex, { className: "ape:justify-between ape:w-full ape:items-center", children: jsx(Text, { className: "ape:text-[12px]! ape:sm:text-[16px]!", children: tokenSymbol }) }), vestEnds && (jsx(Flex, { className: "ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]", children: vestEnds }))] }), jsx(Flex, { className: "tokeninfofav ape:min-w-[25px] ape:p-[5px]", children: jsx(AddFavToken, { tokenSymbol: tokenSymbol, hotBond: !vestEnds && isHotBond }) })] }), jsx(Flex, { className: clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start'), children: jsx(Flex, { className: isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex', children: (tag || marketingCampaign) && (jsx(ListTag, { text: MCTagNameMapping[marketingCampaign] || tag, marketingCampaign: marketingCampaign })) }) })] }));
 };
 export { TokenInfoAndName as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst NETWORK_COLORS: Partial<Record<number, string>> = {\n [ChainId.BSC]: '#F3BA2F4d',\n [ChainId.MAINNET]: '#627eea4d',\n [ChainId.MATIC]: '#8247e54d',\n [ChainId.LIGHTLINK]: '#6087ff4d',\n [ChainId.BASE]: '#0052ff4d',\n [ChainId.ARBITRUM]: '#289fef4d',\n [ChainId.LINEA]: '#ffffff4d',\n [ChainId.IOTA]: '#ffffff4d',\n [ChainId.GRAPHLINQ]: '#ded2ff4d',\n [ChainId.AVAX]: '#e743444d',\n [ChainId.BLAST]: '#fcfc034d',\n [ChainId.CROSSFI]: '#7c80844d',\n [ChainId.MONAD_TESTNET]: '#836EF94d',\n [ChainId.MONAD]: '#836EF94d',\n [ChainId.SOL]: '#836EF94d',\n [ChainId.SONIC]: '#fb9a4c4d',\n [ChainId.BERACHAIN]: '#783e244d',\n [ChainId.KATANA]: '#068be34d',\n [ChainId.UNICHAIN]: '#f50db44d',\n [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n [ChainId.HYPEREVM]: '#ffffff4d',\n [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',\n [ChainId.SUI]: '#6fbcf04d',\n}\n\nconst TokenInfoAndName = ({\n tokenSymbol,\n chain,\n tag,\n vestEnds,\n isHotBond,\n marketingCampaign,\n cardsView,\n}: {\n tokenSymbol?: string\n chain?: number\n tag?: string\n vestEnds?: string\n isHotBond?: boolean\n marketingCampaign?: MarketingCampaign\n cardsView?: boolean\n}) => {\n const ChainIcon = (chain && NETWORK_ICONS[chain]) \|\| Question\n return (\n <Flex\n className={clsx(\n 'tokeninfoname container ape:w-full ape:relative ape:h-full ape:rounded-[10px]',\n cardsView\n ? 'ape:flex-col ape:items-start ape:gap-[10px] ape:pl-0 ape:pt-[5px] ape:justify-start'\n : 'ape:justify-start ape:items-center ~~ape:pl-[20px]~~',\n )}\n >\n <Flex\n className=\"ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal\"\n style={{\n background: isHotBond\n ? 'transparent'\n : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n }}\n />\n <Flex\n className={clsx(\n 'tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]',\n cardsView && 'ape:hidden',\n )}\n >\n <ChainIcon width={20} height={20} />\n </Flex>\n <Flex\n className={clsx(\n 'tokeninfoname tokencontainer ape:~~pl-[6px] ape:~~w-full ape:items-center',\n cardsView\n ? 'ape:max-w-full ape:pl-0'\n : 'ape:~~max-w-[175px] ape~~:~~md:~~max-w-[~~140px] ape:lg:max-w-[~~190px]',\n !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0'),\n )}\n >\n <Flex className=\"ape:relative ape:min-w-[33px]\">\n <Flex style={MCTokenIconStyles[marketingCampaign!]} />\n <TokenImage symbol={tokenSymbol ~~=== 'AIX' && chain === ChainId.SOL ? 'SOLAIX' : tokenSymbol~~} size={33} />\n </Flex>\n <Flex className=\"tokeninfoname tokentext ape:ml-~~[10px]~~ ape:font-bold ape:w-full ape:flex-col\">\n <Flex className=\"ape:justify-between ape:w-full ape:items-center\">\n <Text className=\"ape:text-[12px]! ape:md:text-[~~14px]! ape:lg:text-[~~16px]!\">{tokenSymbol}</Text>\n </Flex>\n {vestEnds && <Flex className=\"ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]\">{vestEnds}</Flex>}\n </Flex>\n <Flex className=\"tokeninfofav ape:min-w-[25px] ape:p-[5px]\">\n <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n </Flex>\n </Flex>\n <Flex className={clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start')}>\n <Flex className={isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex'}>\n {(tag \|\| marketingCampaign) && (\n <ListTag text={MCTagNameMapping[marketingCampaign!] \|\| tag} marketingCampaign={marketingCampaign} />\n )}\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AAYA,MAAM,cAAc,GAAoC;AACtD,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW;AAC3B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,OAAO,GAAG,WAAW;AAC9B,IAAA,CAAC,OAAO,CAAC,aAAa,GAAG,WAAW;AACpC,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;AAC1B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW;AAC5B,IAAA,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW;AAChC,IAAA,CAAC,OAAO,CAAC,MAAM,GAAG,WAAW;AAC7B,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,eAAe,GAAG,WAAW;AACtC,IAAA,CAAC,OAAO,CAAC,QAAQ,GAAG,WAAW;AAC/B,IAAA,CAAC,OAAO,CAAC,KAAK,GAAG,wBAAwB;AACzC,IAAA,CAAC,OAAO,CAAC,GAAG,GAAG,WAAW;CAC3B;AAED,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,KAAK,EACL,GAAG,EACH,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,SAAS,GASV,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,CAAC,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,KAAK,QAAQ;IAC7D,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,+EAA+E,EAC/E;AACE,cAAE;AACF,cAAE,~~kDAAkD~~,~~CACvD~~,EAAA,QAAA,EAAA,CAEDC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,+EAA+E,EACzF,KAAK,EAAE;AACL,oBAAA,UAAU,EAAE;AACV,0BAAE;AACF,0BAAE,CAAA,uBAAA,EAA0B,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,WAAW,CAAA,uBAAA,CAAyB;~~AACnG~~,~~iBAAA,~~EAAA,CACD,EACFA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,IAAI,CACb,gIAAgI,EAChI,SAAS,IAAI,YAAY,CAC1B,EAAA,QAAA,EAEDA,~~IAAC~~,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,~~GAAI,~~EAAA,~~CAC~~/B,EACPD,IAAA,CAAC,IAAI,~~IACH~~,SAAS,EAAE,IAAI,CACb,~~uEAAuE~~,~~EACvE;AACE~~,~~sBAAE;sBACA~~,~~6DAA6D~~,~~EACjE~~,CAAC,SAAS,KAAK,QAAQ,GAAG,2BAA2B,GAAG,UAAU,CAAC,CACpE,EAAA,QAAA,EAAA,CAEDA,~~KAAC~~,IAAI,EAAA,EAAC,SAAS,EAAC~~,+BAA+B~~,~~aAC7CC~~,GAAA,CAAC,IAAI,~~IAAC~~,KAAK,EAAE,iBAAiB,CAAC,iBAAkB,CAAC,EAAA,CAAI,EACtDA,~~IAAC~~,UAAU,EAAA,EAAC,MAAM,EAAE,WAAW,~~KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,GAAG,GAAG,QAAQ,GAAG,WAAW,~~EAAE,IAAI,EAAE,EAAE,EAAA,CAAI,~~IACpG~~,EACPD,IAAA,CAAC,IAAI,~~EAAA~~,~~EAAC,~~SAAS,EAAC,~~6EAA6E~~,EAAA,QAAA,EAAA,~~CAC3FC~~,~~IAAC~~,IAAI,~~EAAA~~,~~EAAC,~~SAAS,EAAC,iDAAiD,~~YAC~~/DA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,~~0DAA0D~~,EAAA,QAAA,EAAE,WAAW,~~GAAQ,~~EAAA,~~CAC1F~~,EACN,QAAQ,~~IAAIA~~,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mEAAmE,EAAA,QAAA,EAAE,QAAQ,~~GAAQ~~,CAAA,EAAA,~~CAC7G~~,EACPA,~~IAAC~~,IAAI,EAAA,EAAC,SAAS,EAAC,2CAA2C,~~YACzDA~~,GAAA,CAAC,WAAW,~~IAAC~~,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,EAAA,CAAI,~~GACrE~~,CAAA,EAAA,CACF,EACPA,~~IAAC~~,IAAI,EAAA,EAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,oBAAoB,GAAG,mBAAmB,CAAC,~~YAC~~/FA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,wBAAwB,~~YAC~~/D,CAAC,GAAG,IAAI,iBAAiB,MACxBA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,gBAAgB,CAAC,iBAAkB,CAAC,IAAI,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAA,CAAI,CACrG,EAAA,CACI,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/TokenInfoAndName/index.tsx"],"sourcesContent":["import React from 'react'\nimport clsx from 'clsx'\nimport { NETWORK_ICONS } from '../../config/constants/chains'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport AddFavToken from '../FavIcons/AddFavToken'\nimport { ChainId, MarketingCampaign } from '@ape.swap/apeswap-lists'\nimport { MCTagNameMapping, MCTokenIconStyles } from '../../utils/campaignStyles'\nimport Flex from '../uikit-sdk/Flex'\nimport Text from '../uikit-sdk/Text'\nimport ListTag from '../uikit-sdk/Tag/ListTag'\nimport Question from '../uikit-sdk/Svg/Icons/Question'\n\nconst NETWORK_COLORS: Partial<Record<number, string>> = {\n [ChainId.BSC]: '#F3BA2F4d',\n [ChainId.MAINNET]: '#627eea4d',\n [ChainId.MATIC]: '#8247e54d',\n [ChainId.LIGHTLINK]: '#6087ff4d',\n [ChainId.BASE]: '#0052ff4d',\n [ChainId.ARBITRUM]: '#289fef4d',\n [ChainId.LINEA]: '#ffffff4d',\n [ChainId.IOTA]: '#ffffff4d',\n [ChainId.GRAPHLINQ]: '#ded2ff4d',\n [ChainId.AVAX]: '#e743444d',\n [ChainId.BLAST]: '#fcfc034d',\n [ChainId.CROSSFI]: '#7c80844d',\n [ChainId.MONAD_TESTNET]: '#836EF94d',\n [ChainId.MONAD]: '#836EF94d',\n [ChainId.SOL]: '#836EF94d',\n [ChainId.SONIC]: '#fb9a4c4d',\n [ChainId.BERACHAIN]: '#783e244d',\n [ChainId.KATANA]: '#068be34d',\n [ChainId.UNICHAIN]: '#f50db44d',\n [ChainId.MEGAETH_TESTNET]: '#DFD9D94d',\n [ChainId.HYPEREVM]: '#ffffff4d',\n [ChainId.APTOS]: 'rgb(240 111 126 / 0.3)',\n [ChainId.SUI]: '#6fbcf04d',\n}\n\nconst TokenInfoAndName = ({\n tokenSymbol,\n chain,\n tag,\n vestEnds,\n isHotBond,\n marketingCampaign,\n cardsView,\n}: {\n tokenSymbol?: string\n chain?: number\n tag?: string\n vestEnds?: string\n isHotBond?: boolean\n marketingCampaign?: MarketingCampaign\n cardsView?: boolean\n}) => {\n const ChainIcon = (chain && NETWORK_ICONS[chain]) \|\| Question\n return (\n <Flex\n className={clsx(\n 'tokeninfoname container ape:w-full ape:relative ape:h-full ape:rounded-[10px]',\n cardsView\n ? 'ape:flex-col ape:items-start ape:gap-[10px] ape:pl-0 ape:pt-[5px] ape:justify-start'\n : 'ape:justify-start ape:items-center',\n )}\n >\n <Flex\n className=\"ape:absolute ape:left-0 ape:top-0 ape:w-[125px] ape:h-full ape:rounded-normal\"\n style={{\n background: isHotBond\n ? 'transparent'\n : `linear-gradient(90deg, ${chain ? NETWORK_COLORS[chain] : '#FFFFFF33'} 0%, rgba(0,0,0,0) 75%)`,\n }}\n />\n <Flex\n className={clsx(\n 'tokeninfoname chain ape:absolute ape:left-0 ape:top-0 ape:overflow-hidden ape:rounded-tl-[10px] ape:rounded-br-[8px] ape:z-[5]',\n cardsView && 'ape:hidden',\n )}\n >\n <ChainIcon width={20} height={20} />\n </Flex>\n <Flex\n className={clsx(\n 'tokeninfoname tokencontainer ape:w-full ape:items-center',\n cardsView ? 'ape:max-w-full ape:pl-0' : 'ape:sm:max-w-[190px]',\n !cardsView && (vestEnds ? 'ape:mt-[10px] ape:lg:mt-0' : 'ape:mt-0'),\n )}\n >\n <Flex className=\"ape:relative ape:min-w-[33px] ape:ml-3.5 ape:sm:ml-5\">\n <Flex style={MCTokenIconStyles[marketingCampaign!]} />\n <TokenImage symbol={tokenSymbol} size={33} />\n </Flex>\n <Flex className=\"tokeninfoname tokentext ape:ml-1 ape:sm:ml-2 ape:font-bold ape:w-full ape:flex-col\">\n <Flex className=\"ape:justify-between ape:w-full ape:items-center\">\n <Text className=\"ape:text-[12px]! ape:sm:text-[16px]!\">{tokenSymbol}</Text>\n </Flex>\n {vestEnds && (\n <Flex className=\"ape:text-[12px] ape:font-normal ape:opacity-60 ape:leading-[14px]\">{vestEnds}</Flex>\n )}\n </Flex>\n <Flex className=\"tokeninfofav ape:min-w-[25px] ape:p-[5px]\">\n <AddFavToken tokenSymbol={tokenSymbol} hotBond={!vestEnds && isHotBond} />\n </Flex>\n </Flex>\n <Flex className={clsx('ape:items-center', isHotBond ? 'ape:justify-center' : 'ape:justify-start')}>\n <Flex className={isHotBond ? 'ape:flex' : 'ape:hidden ape:xl:flex'}>\n {(tag \|\| marketingCampaign) && (\n <ListTag text={MCTagNameMapping[marketingCampaign!] \|\| tag} marketingCampaign={marketingCampaign} />\n )}\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default TokenInfoAndName\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -28,7 +28,7 @@ const TokenSelectorModal = ({ bondPrincipalToken, handleCurrencySelect, chainId,
         const input = event.target.value;
         setSearchQuery(input);
     }, [setSearchQuery]);
-    return (jsx(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx(Flex, { className: "ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:relative ape:m-[10px_0px_15px_0px]", children: jsx(Input, { id: "token-search-input", placeholder: "Name or Address", autoComplete: "off", value: searchQuery, onChange: handleInput, autoFocus: true }) }), jsx(Flex, { className: "ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto", children: parsedList.map((token) => {
+    return (jsx(Modal, { onDismiss: onDismiss, title: "Tokens", className: "token-selector-modal", children: jsx(Flex, { className: "ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto", children: jsxs(Flex, { className: "ape:flex-col", children: [jsx(Flex, { className: "ape:relative ape:m-[10px_0px_15px_0px]", children: jsx(Input, { id: "token-search-input", placeholder: "Search tokens...", autoComplete: "off", value: searchQuery, onChange: handleInput, autoFocus: true, className: "ape:bg-white3 ape:p-2" }) }), jsx(Flex, { className: "ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto", children: parsedList.map((token) => {
                             return (jsx(TokenRow, { token: token.token, chainId: chainId, handleTokenSelect: handleTokenSelect, tokenBalance: token.balance, isConnected: isConnected }, token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]));
                         }) })] }) }) }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorModal/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ChainId, Token, WNATIVE } from '@ape.swap/apeswap-lists'\nimport TokenRow from './TokenRow'\nimport useSortedZapList from '../../hooks/useSortedZapList'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\ninterface TokenSelectorModalProps {\n bondPrincipalToken?: Token // should be ADDED to the inputList\n handleCurrencySelect: (currency: string) => void\n chainId: ChainId\n onDismiss?: () => void\n isConnected: boolean\n}\n\nconst TokenSelectorModal: React.FC<TokenSelectorModalProps> = ({\n bondPrincipalToken,\n handleCurrencySelect,\n chainId,\n onDismiss,\n isConnected,\n}) => {\n const [searchQuery, setSearchQuery] = useState<string>('')\n const { sortedZapList } = useSortedZapList(chainId, bondPrincipalToken)\n\n const parsedList =\n sortedZapList?.filter((token) => {\n // Search filter\n return !searchQuery\n ? true\n : token.token === 'NATIVE'\n ? WNATIVE[chainId as ChainId]?.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n : token.token.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n }) ?? []\n\n const handleTokenSelect = useCallback(\n (currency: string) => {\n handleCurrencySelect(currency)\n setSearchQuery('')\n if (onDismiss) onDismiss()\n },\n [onDismiss, handleCurrencySelect, setSearchQuery],\n )\n\n const handleInput = useCallback(\n (event: any) => {\n const input = event.target.value\n setSearchQuery(input)\n },\n [setSearchQuery],\n )\n\n return (\n <Modal onDismiss={onDismiss} title=\"Tokens\" className=\"token-selector-modal\">\n <Flex className=\"ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto\">\n <Flex className=\"ape:flex-col\">\n <Flex className=\"ape:relative ape:m-[10px_0px_15px_0px]\">\n <Input\n id=\"token-search-input\"\n placeholder=\"~~Name~~ ~~or Address\~~"\n autoComplete=\"off\"\n value={searchQuery}\n onChange={handleInput}\n autoFocus\n />\n </Flex>\n <Flex className=\"ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto\">\n {parsedList.map((token) => {\n return (\n <TokenRow\n key={token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]}\n token={token.token}\n chainId={chainId}\n handleTokenSelect={handleTokenSelect}\n tokenBalance={token.balance}\n isConnected={isConnected}\n />\n )\n })}\n </Flex>\n </Flex>\n </Flex>\n </Modal>\n )\n}\n\nexport default TokenSelectorModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAgBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;IAC1D,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC;IAEvE,MAAM,UAAU,GACd,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,KAAI;;AAE9B,QAAA,OAAO,CAAC;AACN,cAAE;AACF,cAAE,KAAK,CAAC,KAAK,KAAK;AAChB,kBAAE,OAAO,CAAC,OAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE;AACtF,kBAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IAC5E,CAAC,CAAC,IAAI,EAAE;AAEV,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,KAAI;QACnB,oBAAoB,CAAC,QAAQ,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,SAAS;AAAE,YAAA,SAAS,EAAE;IAC5B,CAAC,EACD,CAAC,SAAS,EAAE,oBAAoB,EAAE,cAAc,CAAC,CAClD;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;AACb,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;AACvB,IAAA,CAAC,EACD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,sBAAsB,~~YAC1EA~~,~~GAAA~~,~~CAAC~~,IAAI,EAAA,EAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EACrFC,IAAA,CAAC,IAAI,~~IAAC~~,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,~~IAAC~~,IAAI,~~EAAA~~,~~EAAC,~~SAAS,EAAC,wCAAwC,~~YACtDA~~,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,oBAAoB,EACvB,WAAW,EAAC,~~iBAAiB~~,~~EAC7B~~,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,WAAW,EACrB,SAAS,~~SACT~~,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iFAAiF,EAAA,QAAA,EAC9F,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;4BACxB,QACEA,IAAC,QAAQ,EAAA,EAEP,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,WAAW,EAAE,WAAW,EAAA,EALnB,KAAK,CAAC,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAMvE;AAEN,wBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorModal/index.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react'\nimport { ChainId, Token, WNATIVE } from '@ape.swap/apeswap-lists'\nimport TokenRow from './TokenRow'\nimport useSortedZapList from '../../hooks/useSortedZapList'\nimport Modal from '../uikit-sdk/Modal'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\ninterface TokenSelectorModalProps {\n bondPrincipalToken?: Token // should be ADDED to the inputList\n handleCurrencySelect: (currency: string) => void\n chainId: ChainId\n onDismiss?: () => void\n isConnected: boolean\n}\n\nconst TokenSelectorModal: React.FC<TokenSelectorModalProps> = ({\n bondPrincipalToken,\n handleCurrencySelect,\n chainId,\n onDismiss,\n isConnected,\n}) => {\n const [searchQuery, setSearchQuery] = useState<string>('')\n const { sortedZapList } = useSortedZapList(chainId, bondPrincipalToken)\n\n const parsedList =\n sortedZapList?.filter((token) => {\n // Search filter\n return !searchQuery\n ? true\n : token.token === 'NATIVE'\n ? WNATIVE[chainId as ChainId]?.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n : token.token.symbol.toLowerCase().includes(searchQuery.toLowerCase())\n }) ?? []\n\n const handleTokenSelect = useCallback(\n (currency: string) => {\n handleCurrencySelect(currency)\n setSearchQuery('')\n if (onDismiss) onDismiss()\n },\n [onDismiss, handleCurrencySelect, setSearchQuery],\n )\n\n const handleInput = useCallback(\n (event: any) => {\n const input = event.target.value\n setSearchQuery(input)\n },\n [setSearchQuery],\n )\n\n return (\n <Modal onDismiss={onDismiss} title=\"Tokens\" className=\"token-selector-modal\">\n <Flex className=\"ape:flex-col ape:max-h-none ape:h-auto ape:w-auto ape:overflow-y-auto\">\n <Flex className=\"ape:flex-col\">\n <Flex className=\"ape:relative ape:m-[10px_0px_15px_0px]\">\n <Input\n id=\"token-search-input\"\n placeholder=\"Search tokens...\"\n autoComplete=\"off\"\n value={searchQuery}\n onChange={handleInput}\n autoFocus\n className=\"ape:bg-white3 ape:p-2\"\n />\n </Flex>\n <Flex className=\"ape:rounded-normal ape:bg-white3 ape:flex-col ape:h-[300px] ape:overflow-y-auto\">\n {parsedList.map((token) => {\n return (\n <TokenRow\n key={token.token === 'NATIVE' ? 'NATIVE' : token.token.address[chainId]}\n token={token.token}\n chainId={chainId}\n handleTokenSelect={handleTokenSelect}\n tokenBalance={token.balance}\n isConnected={isConnected}\n />\n )\n })}\n </Flex>\n </Flex>\n </Flex>\n </Modal>\n )\n}\n\nexport default TokenSelectorModal\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAgBA,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,kBAAkB,EAClB,oBAAoB,EACpB,OAAO,EACP,SAAS,EACT,WAAW,GACZ,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC;IAC1D,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC;IAEvE,MAAM,UAAU,GACd,aAAa,EAAE,MAAM,CAAC,CAAC,KAAK,KAAI;;AAE9B,QAAA,OAAO,CAAC;AACN,cAAE;AACF,cAAE,KAAK,CAAC,KAAK,KAAK;AAChB,kBAAE,OAAO,CAAC,OAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE;AACtF,kBAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IAC5E,CAAC,CAAC,IAAI,EAAE;AAEV,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,KAAI;QACnB,oBAAoB,CAAC,QAAQ,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,SAAS;AAAE,YAAA,SAAS,EAAE;IAC5B,CAAC,EACD,CAAC,SAAS,EAAE,oBAAoB,EAAE,cAAc,CAAC,CAClD;AAED,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAU,KAAI;AACb,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;QAChC,cAAc,CAAC,KAAK,CAAC;AACvB,IAAA,CAAC,EACD,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,QACEA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAC1EA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uEAAuE,EAAA,QAAA,EACrFC,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,CAC5BD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACtDA,GAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAC,oBAAoB,EACvB,WAAW,EAAC,kBAAkB,EAC9B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAA,IAAA,EACT,SAAS,EAAC,uBAAuB,EAAA,CACjC,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iFAAiF,EAAA,QAAA,EAC9F,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;4BACxB,QACEA,IAAC,QAAQ,EAAA,EAEP,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,WAAW,EAAE,WAAW,EAAA,EALnB,KAAK,CAAC,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAMvE;AAEN,wBAAA,CAAC,CAAC,EAAA,CACG,CAAA,EAAA,CACF,EAAA,CACF,EAAA,CACD;AAEZ;;;;"}

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

@@ -36,7 +36,7 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
         setTypedValue(event.target.value);
     };
     const [onTokenSelectorModal] = useModal(jsx(TokenSelectorModal, { bondPrincipalToken: bondPrincipalToken, handleCurrencySelect: handleCurrencySelect, chainId: bondChainId, isConnected: isConnected }), true, false, `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`);
-    return (jsxs(Flex, { className: "token-selector-panel ape:flex-col ape:bg-white3 ape:p-[10px] ape:min-h-[92px] ape:rounded-normal", style: { background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow ape:flex-row", children: [jsx(Flex, { className: "input-container input ape:bg-transparent ape:rounded-[10px] ape:border-[medium] ape:pr-[10px] ape:w-full ape:text-[22px]", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", onChange: handleInputChange, onInput: (v) => {
+    return (jsxs(Flex, { className: "token-selector-panel ape:flex-col ape:bg-white3 ape:p-2.5 ape:min-h-23 ape:rounded-normal ape:justify-between", style: { background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow ape:flex-row", children: [jsx(Flex, { className: "input-container ape:w-full ape:text-[22px]", children: jsx(Input, { placeholder: "0.0", value: typedValue, pattern: "^[0-9]*[.,]?[0-9]*$", inputMode: "decimal", onChange: handleInputChange, className: "ape:bg-white3 ape:pl-0! ape:font-bold", onInput: (v) => {
                                 if (v.currentTarget.value.includes(',')) {
                                     v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.');
                                 }
@@ -50,9 +50,9 @@ const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChai
                                     !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0
                                         ? v.currentTarget.value
                                         : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1);
-                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal", onClick: () => (enableZap ? onTokenSelectorModal() : null), style: { cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign] }, children: [jsxs(Flex, { className: "ape:items-center ape:gap-[10px]", children: [jsx(Flex, { className: "input-container bondicon ape:ml-[5px]", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { className: "ape:mr-[8px]", children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow ape:flex-row ape:items-center ape:justify-between ape:pl-[6px]", children: [jsx(Flex, { className: "ape:opacity-60", children: selectedTokenPrice && typedValue
+                            }, disabled: inputDisabled }) }), jsxs(Flex, { className: "input-container token ape:flex ape:items-center ape:text-[12px] ape:font-bold ape:bg-white4 ape:relative ape:w-[190px] ape:h-[36px] ape:justify-between ape:rounded-normal", onClick: () => (enableZap ? onTokenSelectorModal() : null), style: { cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign] }, children: [jsxs(Flex, { className: "ape:items-center ape:gap-[10px]", children: [jsx(Flex, { className: "input-container bondicon ape:ml-[5px]", children: isArray(splited) ? (jsx(TokenImage, { symbol: splited[0], symbol2: splited[1], size: 28, chain: bondChainId })) : (jsx(TokenImage, { symbol: getSymbol(selectedToken, bondChainId), size: 28, chain: bondChainId })) }), jsx(Flex, { className: "title-container tokenname", children: getSymbol(selectedToken, bondChainId) })] }), enableZap && (jsx(Flex, { className: "ape:mr-[8px]", children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow ape:flex-row ape:items-center ape:justify-between", children: [jsx(Flex, { className: "ape:opacity-60", children: selectedTokenPrice && typedValue
                             ? `$${formatUSDNumber((selectedTokenPrice * parseFloat(typedValue)).toFixed(2))}`
-                            : '' }), jsxs(Flex, { children: [showBalance && (jsxs(Flex, { className: "balancerow text ape:opacity-60 ape:items-center ape:text-[12px]", children: ["Balance: ", tokenBalanceString] })), jsx(Flex, { className: "balancerow max ape:items-center ape:cursor-pointer", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button ape:bg-primary-button ape:h-[22px] ape:px-[8px] ape:cursor-pointer ape:text-[12px]! ape:font-semibold ape:rounded-small ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" })) })] })] })] }));
+                            : '' }), jsxs(Flex, { children: [showBalance && (jsxs(Flex, { className: "balancerow text ape:opacity-60 ape:items-center ape:text-[12px]", children: ["Balance: ", tokenBalanceString] })), showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button ape:h-[22px] ape:p-[0px_8px]! ape:text-[12px]!  ape:ml-[10px] ape:transition-all ape:duration-300 ape:ease-linear ape:flex ape:items-center ape:justify-center ape:active:scale-90", onClick: () => handleValueBtn(tokenBalance ?? '0'), children: "Max" }))] })] })] }));
 };
 export { TokenSelectorPanel as default };