npm - @ape.swap/bonds-sdk - Versions diffs - 6.3.0-test.69 → 7.0.0-test.0 - Mend

@ape.swap/bonds-sdk 6.3.0-test.69 → 7.0.0-test.0

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 (995) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TokenRow.js","sources":["../../../src/components/TokenSelectorModal/TokenRow.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport { ~~Spinner } from 'theme-ui'\nimport {~~ getSymbol } from '../../utils/getNativeTicker'\nimport isArray from 'lodash-es/isArray.js'\n\nconst TokenRow = ({\n token,\n chainId,\n handleTokenSelect,\n tokenBalance,\n isConnected,\n}: {\n token: 'NATIVE' \| Token\n chainId: ChainId\n handleTokenSelect: (currency: string) => void\n tokenBalance?: string\n isConnected: boolean\n}) => {\n const symbol = getSymbol(token, chainId)\n const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId]\n\n const splited = typeof token !== 'string' ? token?.symbol?.split('-') : undefined\n\n return (\n <Flex\n ~~sx={{~~ p~~: '~~8px', ~~justifyContent~~: ~~'space~~-between', cursor~~: '~~pointer', ~~'&:~~hover': ~~{ background: '~~white4~~' } }}~~\n onClick={() => handleTokenSelect(tokenAddress ?? '')}\n >\n <Flex>\n {isArray(splited) ? (\n <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n ) : (\n <TokenImage symbol={getSymbol(token, chainId)} size={28} chain={chainId} />\n )}\n <Flex ~~sx={{~~ mx~~: '~~8px', ~~lineHeight~~: '28px', ~~fontSize~~: '14px~~' }}~~>{symbol}</Flex>\n </Flex>\n {isConnected && (\n <Flex ~~sx={{ fontSize~~: '14px~~' }}~~>\n {tokenBalance === '0' ? (\n '0'\n ) : !tokenBalance ? (\n <Spinner size={15} />\n ) : (\n <>{toSignificantDigitsString(tokenBalance ?? '0', 5)}</>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default TokenRow\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;AASA,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAOZ,KAAI;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC;AACxC,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;IAE3E,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS;AAEjF,IAAA,QACEA,IAAA,CAAC,IAAI,~~IACH~~,~~EAAE~~,~~EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,EAAE,~~SAAS,~~EAAE~~,~~SAAS~~,~~EAAE~~,~~EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EACzG,~~OAAO,EAAE,MAAM,iBAAiB,CAAC,YAAY,IAAI,EAAE,CAAC,~~aAEpDA~~,IAAA,CAAC,IAAI,~~eACF~~,OAAO,CAAC,OAAO,CAAC,IACfC,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAA,CAAI,KAEjFA,~~GAAA~~,~~CAAC,~~UAAU,~~IAAC~~,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,GAAI,CAC5E,EACDA,~~IAAC~~,IAAI,~~EAAA~~,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,EAAE,~~EAAE,KAAK,EAAE,UAAU,EAAE,~~MAAM,~~EAAE~~,~~QAAQ~~,~~EAAE~~,~~MAAM,EAAE,YAAG,MAAM,~~EAAA,~~CAAQ~~,~~IACzE,~~EACN,WAAW,KACVA,GAAA,CAAC,IAAI,~~EAAA~~,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,~~EAAE,MAAM,EAAE,YAC3B,~~YAAY,KAAK,GAAG,IACnB,GAAG,IACD,CAAC,YAAY,IACfA,GAAA,CAAC,OAAO,~~IAAC~~,IAAI,EAAE,EAAE,~~EAAA~~,~~CAAI,~~KAErBA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,yBAAyB,CAAC,YAAY,IAAI,GAAG,EAAE,CAAC,CAAC,~~EAAA~~,~~CAAI,~~CACzD,~~GACI~~,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"TokenRow.js","sources":["../../../src/components/TokenSelectorModal/TokenRow.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../uikit-sdk/Spinner'\nimport Flex from '../uikit-sdk/Flex'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, Token } from '@ape.swap/apeswap-lists'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport isArray from 'lodash-es/isArray.js'\n\nconst TokenRow = ({\n token,\n chainId,\n handleTokenSelect,\n tokenBalance,\n isConnected,\n}: {\n token: 'NATIVE' \| Token\n chainId: ChainId\n handleTokenSelect: (currency: string) => void\n tokenBalance?: string\n isConnected: boolean\n}) => {\n const symbol = getSymbol(token, chainId)\n const tokenAddress = token === 'NATIVE' ? 'NATIVE' : token.address[chainId]\n\n const splited = typeof token !== 'string' ? token?.symbol?.split('-') : undefined\n\n return (\n <Flex\n className=\"ape:p-[8px] ape:justify-between ape:cursor-pointer ape:hover:bg-white4\"\n onClick={() => handleTokenSelect(tokenAddress ?? '')}\n >\n <Flex>\n {isArray(splited) ? (\n <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={chainId} />\n ) : (\n <TokenImage symbol={getSymbol(token, chainId)} size={28} chain={chainId} />\n )}\n <Flex className=\"ape:mx-[8px] ape:leading-[28px] ape:text-[14px]\">{symbol}</Flex>\n </Flex>\n {isConnected && (\n <Flex className=\"ape:text-[14px]\">\n {tokenBalance === '0' ? (\n '0'\n ) : !tokenBalance ? (\n <Spinner size={15} />\n ) : (\n <>{toSignificantDigitsString(tokenBalance ?? '0', 5)}</>\n )}\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default TokenRow\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;AASA,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,OAAO,EACP,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAOZ,KAAI;IACH,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC;AACxC,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;IAE3E,MAAM,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS;AAEjF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,MAAM,iBAAiB,CAAC,YAAY,IAAI,EAAE,CAAC,EAAA,QAAA,EAAA,CAEpDA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACF,OAAO,CAAC,OAAO,CAAC,IACfC,GAAA,CAAC,UAAU,IAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAA,CAAI,KAEjFA,IAAC,UAAU,EAAA,EAAC,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,GAAI,CAC5E,EACDA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,CAAA,EAAA,CAC5E,EACN,WAAW,KACVA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAC9B,YAAY,KAAK,GAAG,IACnB,GAAG,IACD,CAAC,YAAY,IACfA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,GAAI,KAErBA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,yBAAyB,CAAC,YAAY,IAAI,GAAG,EAAE,CAAC,CAAC,GAAI,CACzD,EAAA,CACI,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { WNATIVE } from '@ape.swap/apeswap-lists';
 import TokenRow from './TokenRow.js';
@@ -28,19 +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, { sx: {
-                flexDirection: 'column',
-                maxHeight: 'none',
-                height: 'auto',
-                width: 'auto',
-                overflowY: 'auto',
-            }, children: jsxs(Flex, { sx: { flexDirection: 'column' }, children: [jsx(Flex, { sx: { position: 'relative', margin: '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, { sx: {
-                            borderRadius: 'normal',
-                            background: 'white3',
-                            flexDirection: 'column',
-                            height: '300px',
-                            overflowY: '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~~\n sx={{\n flexDirection~~: ~~'column',\n maxHeight~~: ~~'none',\n height~~: 'auto~~',\n width:~~ ~~'auto',\n overflowY~~: 'auto~~',\n }}~~\n >\n <Flex ~~sx={{ flexDirection~~: ~~'column' }}~~>\n <Flex ~~sx={{ position~~: 'relative', ~~margin~~: ~~'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~~\n sx={{\n borderRadius~~: ~~'normal',\n background~~: ~~'white3',\n flexDirection~~: ~~'column',\n height~~: ~~'300px',\n overflowY~~: 'auto~~',\n }}~~\n >\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;~~IAED~~,QACEA,~~IAAC~~,KAAK,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAC1EA,IAAC,IAAI,EAAA,~~EACH~~,~~EAAE,EAAE;AACF,gBAAA,aAAa,EAAE,QAAQ;AACvB,gBAAA,~~SAAS,~~EAAE~~,~~MAAM;AACjB~~,~~gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,KAAK,EAAE,MAAM;AACb,gBAAA,SAAS,EAAE,MAAM;aAClB,~~EAAA,QAAA,~~EAEDC~~,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa,EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,~~CACnCD~~,GAAA,CAAC,IAAI,IAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,~~EAAA,QAAA,~~EAC7DA~~,GAAA,CAAC,KAAK,~~IACJ~~,EAAE,EAAC,oBAAoB,EACvB,WAAW,EAAC,~~iBAAiB~~,~~EAC7B~~,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAA,IAAA,EAAA,~~CACT~~,EAAA,CACG,EACPA,GAAA,CAAC,IAAI,~~EAAA~~,~~EACH,EAAE,EAAE;AACF,4BAAA,YAAY,EAAE,QAAQ;AACtB,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,aAAa,EAAE,QAAQ;AACvB,4BAAA,MAAM,EAAE,OAAO;AACf,4BAAA,~~SAAS,~~EAAE~~,~~MAAM;AAClB~~,~~yBAAA,~~EAAA,QAAA,~~EAEA~~,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.d.ts CHANGED Viewed

@@ -14,5 +14,5 @@ declare const TokenSelectorPanel: ({ typedValue, setTypedValue, selectedToken, b
     inputDisabled?: boolean;
     marketingCampaign?: MarketingCampaign;
     isConnected: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default TokenSelectorPanel;

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

@@ -1,41 +1,32 @@
-import { jsx, jsxs } from 'theme-ui/jsx-runtime';
-import { Flex, Input } from 'theme-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isNumber } from '../../utils/numbers.js';
 import TokenImage from '../uikit-sdk/TokenImage/index.js';
-import { ChainId } from '@ape.swap/apeswap-lists';
 import useModal from '../../hooks/useModal.js';
 import TokenSelectorModal from '../TokenSelectorModal/index.js';
 import { toSignificantDigitsString } from '../../utils/fixedPoint.js';
 import isArray from 'lodash-es/isArray.js';
 import { getSymbol } from '../../utils/getNativeTicker.js';
 import { formatUSDNumber } from '../../utils/displayHelpers.js';
-import useEVMAccount from '../../hooks/accounts/useEVMAccount.js';
-import useSOLAccount from '../../hooks/accounts/useSOLAccount.js';
-import useAPTAccount from '../../hooks/accounts/useAPTAccount.js';
-import useSUIAccount from '../../hooks/accounts/useSUIAccount.js';
+import useChainAccount from '../../state/chainAccount/useChainAccount.js';
+import { getAdapterForChain } from '../../adapters/registry.js';
 import { MCColorMapping } from '../../utils/campaignStyles.js';
 import Button from '../uikit-sdk/Button/Button.js';
 import Caret from '../uikit-sdk/Svg/Icons/Caret.js';
+import Flex from '../uikit-sdk/Flex/index.js';
+import Input from '../uikit-sdk/Input/Input.js';
 const TokenSelectorPanel = ({ typedValue, setTypedValue, selectedToken, bondChainId, handleValueBtn, handleCurrencySelect, enableZap, tokenBalance, selectedTokenPrice, bondPrincipalToken, inputDisabled = false, marketingCampaign, isConnected, }) => {
-    const { address: account } = useEVMAccount();
-    const { publicKey: solanaAccount } = useSOLAccount();
-    const { address: aptosAccount } = useAPTAccount();
-    const { address: suiAccount } = useSUIAccount();
-    const showBalance = bondChainId === ChainId.SOL
-        ? !!solanaAccount
-        : bondChainId === ChainId.APTOS
-            ? !!aptosAccount
-            : bondChainId === ChainId.SUI
-                ? !!suiAccount
-                : !!account;
+    const { address: account } = useChainAccount('evm');
+    const adapter = getAdapterForChain(bondChainId);
+    const { address: adapterAccount } = useChainAccount(adapter?.ecosystem ?? 'evm');
+    const showBalance = adapter ? !!adapterAccount : !!account;
     const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading';
     const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined;
     const handleInputChange = (event) => {
         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", sx: { borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign] }, children: [jsxs(Flex, { className: "input-container inputrow", children: [jsx(Flex, { className: "input-container input", 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, '.');
                                 }
@@ -49,13 +40,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", onClick: () => (enableZap ? onTokenSelectorModal() : null), sx: {
-                            cursor: enableZap ? 'pointer' : 'default',
-                            borderRadius: 'normal',
-                            background: MCColorMapping.white4[marketingCampaign],
-                        }, children: [jsxs(Flex, { sx: { alignItems: 'center', gap: '10px' }, children: [jsx(Flex, { className: "input-container bondicon", 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, { sx: { mr: '8px' }, children: jsx(Caret, {}) }))] })] }), jsxs(Flex, { className: "input-container balancerow", children: [jsx(Flex, { sx: { opacity: 0.6 }, 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", children: ["Balance: ", tokenBalanceString] }), jsx(Flex, { className: "balancerow max", children: showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (jsx(Button, { className: "max-button", 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 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { Flex, Input } from 'theme-ui'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useEVMAccount from '../../hooks/accounts/useEVMAccount'\nimport useSOLAccount from '../../hooks/accounts/useSOLAccount'\nimport useAPTAccount from '../../hooks/accounts/useAPTAccount'\nimport useSUIAccount from '../../hooks/accounts/useSUIAccount'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\n\nconst TokenSelectorPanel = ({\n typedValue,\n setTypedValue,\n selectedToken,\n bondChainId,\n handleValueBtn,\n handleCurrencySelect,\n enableZap,\n tokenBalance,\n selectedTokenPrice,\n bondPrincipalToken,\n inputDisabled = false,\n marketingCampaign,\n isConnected,\n}: {\n typedValue: string\n setTypedValue: (value: React.SetStateAction<string>) => void\n selectedToken?: 'NATIVE' \| Token\n bondChainId: ChainId\n handleValueBtn?: (value: string) => void\n handleCurrencySelect: (value: string) => void\n enableZap?: boolean\n tokenBalance?: string\n selectedTokenPrice?: number\n bondPrincipalToken?: Token // Used to ADD this token to the inputList\n inputDisabled?: boolean\n marketingCampaign?: MarketingCampaign\n isConnected: boolean\n}) => {\n const { address: account } = useEVMAccount()\n const { publicKey: solanaAccount } = useSOLAccount()\n const { address: aptosAccount } = useAPTAccount()\n const { address: suiAccount } = useSUIAccount()\n\n const showBalance =\n bondChainId === ChainId.SOL\n ? !!solanaAccount\n : bondChainId === ChainId.APTOS\n ? !!aptosAccount\n : bondChainId === ChainId.SUI\n ? !!suiAccount\n : !!account\n const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n setTypedValue(event.target.value)\n }\n\n const [onTokenSelectorModal] = useModal(\n <TokenSelectorModal\n bondPrincipalToken={bondPrincipalToken}\n handleCurrencySelect={handleCurrencySelect}\n chainId={bondChainId}\n isConnected={isConnected}\n />,\n true,\n false,\n `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n )\n\n return (\n <Flex\n className=\"token-selector-panel\"\n sx={{ borderRadius: 'normal', background: MCColorMapping.white3[marketingCampaign!] }}\n >\n <Flex className=\"input-container inputrow\">\n <Flex className=\"input-container input\">\n <Input\n placeholder=\"0.0\"\n value={typedValue}\n pattern=\"^[0-9][.,]?[0-9]$\"\n onChange={handleInputChange}\n onInput={(v: FormEvent<HTMLInputElement>) => {\n if (v.currentTarget.value.includes(',')) {\n v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n }\n if (v.currentTarget.value.includes('%')) {\n v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n }\n if (v.currentTarget.value === '.') {\n v.currentTarget.value = '0.'\n }\n v.currentTarget.value =\n !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n ? v.currentTarget.value\n : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n }}\n disabled={inputDisabled}\n />\n </Flex>\n\n {/* TOKEN SELECTOR PANEL /}\n\n <Flex\n className=\"input-container token\"\n onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n sx={{\n cursor: enableZap ? 'pointer' : 'default',\n borderRadius: 'normal',\n background: MCColorMapping.white4[marketingCampaign!],\n }}\n >\n <Flex sx={{ alignItems: 'center', gap: '10px' }}>\n <Flex className=\"input-container bondicon\">\n {isArray(splited) ? (\n <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n ) : (\n <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n )}\n </Flex>\n <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n </Flex>\n {enableZap && (\n <Flex sx={{ mr: '8px' }}>\n <Caret />\n </Flex>\n )}\n </Flex>\n </Flex>\n <Flex className=\"input-container balancerow\">\n <Flex sx={{ opacity: 0.6 }}>\n {selectedTokenPrice && typedValue\n ? `$${formatUSDNumber((selectedTokenPrice parseFloat(typedValue)).toFixed(2))}`\n : ''}\n </Flex>\n <Flex>\n {showBalance && <Flex className=\"balancerow text\">Balance: {tokenBalanceString}</Flex>}\n <Flex className=\"balancerow max\">\n {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n <Button\n className=\"max-button\"\n onClick={() => handleValueBtn(tokenBalance ?? '0')}\n >\n Max\n </Button>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/components/TokenSelectorPanel/index.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport { isNumber } from '../../utils/numbers'\nimport TokenImage from '../uikit-sdk/TokenImage'\nimport { ChainId, MarketingCampaign, Token } from '@ape.swap/apeswap-lists'\nimport useModal from '../../hooks/useModal'\nimport TokenSelectorModal from '../TokenSelectorModal'\nimport { toSignificantDigitsString } from '../../utils/fixedPoint'\nimport isArray from 'lodash-es/isArray.js'\nimport { getSymbol } from '../../utils/getNativeTicker'\nimport { formatUSDNumber } from '../../utils/displayHelpers'\nimport useChainAccount from '../../state/chainAccount/useChainAccount'\nimport { getAdapterForChain } from '../../adapters/registry'\nimport { MCColorMapping } from '../../utils/campaignStyles'\nimport Button from '../uikit-sdk/Button/Button'\nimport Caret from '../uikit-sdk/Svg/Icons/Caret'\nimport Flex from '../uikit-sdk/Flex'\nimport Input from '../uikit-sdk/Input/Input'\n\nconst TokenSelectorPanel = ({\n typedValue,\n setTypedValue,\n selectedToken,\n bondChainId,\n handleValueBtn,\n handleCurrencySelect,\n enableZap,\n tokenBalance,\n selectedTokenPrice,\n bondPrincipalToken,\n inputDisabled = false,\n marketingCampaign,\n isConnected,\n}: {\n typedValue: string\n setTypedValue: (value: React.SetStateAction<string>) => void\n selectedToken?: 'NATIVE' \| Token\n bondChainId: ChainId\n handleValueBtn?: (value: string) => void\n handleCurrencySelect: (value: string) => void\n enableZap?: boolean\n tokenBalance?: string\n selectedTokenPrice?: number\n bondPrincipalToken?: Token // Used to ADD this token to the inputList\n inputDisabled?: boolean\n marketingCampaign?: MarketingCampaign\n isConnected: boolean\n}) => {\n const { address: account } = useChainAccount('evm')\n const adapter = getAdapterForChain(bondChainId)\n const { address: adapterAccount } = useChainAccount(adapter?.ecosystem ?? 'evm')\n\n const showBalance = adapter ? !!adapterAccount : !!account\n const tokenBalanceString = tokenBalance ? toSignificantDigitsString(tokenBalance, 5) : 'loading'\n\n const splited = typeof selectedToken !== 'string' ? selectedToken?.symbol?.split('-') : undefined\n const handleInputChange = (event: { target: { value: React.SetStateAction<string> } }) => {\n setTypedValue(event.target.value)\n }\n\n const [onTokenSelectorModal] = useModal(\n <TokenSelectorModal\n bondPrincipalToken={bondPrincipalToken}\n handleCurrencySelect={handleCurrencySelect}\n chainId={bondChainId}\n isConnected={isConnected}\n />,\n true,\n false,\n `tokenSelectorOnLiquidityModal${bondPrincipalToken?.address?.[bondChainId]}-${bondPrincipalToken?.symbol}`,\n )\n\n return (\n <Flex\n className=\"token-selector-panel ape:flex-col ape:bg-white3 ape:p-2.5 ape:min-h-23 ape:rounded-normal ape:justify-between\"\n style={{ background: MCColorMapping.white3[marketingCampaign!] }}\n >\n <Flex className=\"input-container inputrow ape:flex-row\">\n <Flex className=\"input-container ape:w-full ape:text-[22px]\">\n <Input\n placeholder=\"0.0\"\n value={typedValue}\n pattern=\"^[0-9][.,]?[0-9]$\"\n inputMode=\"decimal\"\n onChange={handleInputChange}\n className=\"ape:bg-white3 ape:pl-0! ape:font-bold\"\n onInput={(v: FormEvent<HTMLInputElement>) => {\n if (v.currentTarget.value.includes(',')) {\n v.currentTarget.value = v.currentTarget.value.replace(/,/g, '.')\n }\n if (v.currentTarget.value.includes('%')) {\n v.currentTarget.value = v.currentTarget.value.replace(/[^0-9]/g, '')\n }\n if (v.currentTarget.value === '.') {\n v.currentTarget.value = '0.'\n }\n v.currentTarget.value =\n !!v.currentTarget.value && isNumber(v.currentTarget.value) && parseFloat(v.currentTarget.value) >= 0\n ? v.currentTarget.value\n : v.currentTarget.value.slice(0, v.currentTarget.value.length - 1)\n }}\n disabled={inputDisabled}\n />\n </Flex>\n\n {/* TOKEN SELECTOR PANEL /}\n\n <Flex\n 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\"\n onClick={() => (enableZap ? onTokenSelectorModal() : null)}\n style={{ cursor: enableZap ? 'pointer' : 'default', background: MCColorMapping.white4[marketingCampaign!] }}\n >\n <Flex className=\"ape:items-center ape:gap-[10px]\">\n <Flex className=\"input-container bondicon ape:ml-[5px]\">\n {isArray(splited) ? (\n <TokenImage symbol={splited[0]} symbol2={splited[1]} size={28} chain={bondChainId} />\n ) : (\n <TokenImage symbol={getSymbol(selectedToken, bondChainId)} size={28} chain={bondChainId} />\n )}\n </Flex>\n <Flex className=\"title-container tokenname\">{getSymbol(selectedToken, bondChainId)}</Flex>\n </Flex>\n {enableZap && (\n <Flex className=\"ape:mr-[8px]\">\n <Caret />\n </Flex>\n )}\n </Flex>\n </Flex>\n <Flex className=\"input-container balancerow ape:flex-row ape:items-center ape:justify-between\">\n <Flex className=\"ape:opacity-60\">\n {selectedTokenPrice && typedValue\n ? `$${formatUSDNumber((selectedTokenPrice parseFloat(typedValue)).toFixed(2))}`\n : ''}\n </Flex>\n <Flex>\n {showBalance && (\n <Flex className=\"balancerow text ape:opacity-60 ape:items-center ape:text-[12px]\">\n Balance: {tokenBalanceString}\n </Flex>\n )}\n {showBalance && tokenBalance && tokenBalance !== '0' && handleValueBtn && (\n <Button\n 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\"\n onClick={() => handleValueBtn(tokenBalance ?? '0')}\n >\n Max\n </Button>\n )}\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default TokenSelectorPanel\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/Tooltip/ButtonsRow.js CHANGED Viewed

@@ -1,16 +1,15 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
-import { Link } from 'theme-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 import URL from '../uikit-sdk/Svg/Icons/URL.js';
 import Twitter from '../uikit-sdk/Svg/Icons/Twitter.js';
 import DexScreener from '../uikit-sdk/Svg/Icons/DexScreener.js';
 import CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko.js';
+const iconButtonClasses = 'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer';
 const ButtonsRow = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {
     const dexscreenerURL = dexscreener || (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined);
     const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined;
-    return (jsxs(Flex, { sx: { justifyContent: 'center' }, children: [jsx(Flex, { sx: styles.iconButton, as: Link, href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { sx: styles.iconButton, as: Link, href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { sx: styles.iconButton, as: Link, href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
+    return (jsxs(Flex, { className: "ape:justify-center", children: [jsx(Flex, { className: iconButtonClasses, as: "a", href: projectLink, target: "_blank", children: jsx(URL, { width: 18 }) }), jsx(Flex, { className: iconButtonClasses, as: "a", href: twitter, target: "_blank", children: jsx(Twitter, { width: 18, color: "text" }) }), dexscreenerURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: dexscreenerURL, target: "_blank", children: jsx(DexScreener, { width: 18, color: "text" }) })), coingeckoURL && (jsx(Flex, { className: iconButtonClasses, as: "a", href: coingeckoURL, target: "_blank", children: jsx(CoinGecko, { width: 18, color: "text" }) }))] }));
 };
 export { ButtonsRow as default };

package/dist/components/Tooltip/ButtonsRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport ~~{ styles } from './styles'\nimport { Link } from 'theme-ui'\nimport~~ Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst ButtonsRow: React.FC<{\n projectLink?: string\n twitter?: string\n earnTokenContract?: string\n cgId?: string\n dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n const dexscreenerURL =\n dexscreener \|\| (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n return (\n <Flex ~~sx={{ justifyContent~~: 'center~~' }}~~>\n <Flex sx={~~styles.iconButton~~} as~~={Link}~~ href={projectLink} target=\"_blank\">\n <URLIcon width={18} />\n </Flex>\n <Flex sx={~~styles.iconButton~~} as~~={Link}~~ href={twitter} target=\"_blank\">\n <Twitter width={18} color=\"text\" />\n </Flex>\n {dexscreenerURL && (\n <Flex sx={~~styles.iconButton~~} as~~={Link}~~ href={dexscreenerURL} target=\"_blank\">\n <DexScreener width={18} color=\"text\" />\n </Flex>\n )}\n {coingeckoURL && (\n <Flex sx={~~styles.iconButton~~} as~~={Link}~~ href={coingeckoURL} target=\"_blank\">\n <CoinGecko width={18} color=\"text\" />\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":"~~;;;;;;;;;AASA~~,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~cAAc,EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,~~CACpCC~~,GAAA,CAAC,IAAI,~~IAAC~~,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,UAAU,~~EAAE,EAAE,~~EAAE~~,~~IAAI~~,~~EAAE~~,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,~~EACvEA~~,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,UAAU,~~EAAE,EAAE,~~EAAE~~,~~IAAI~~,~~EAAE~~,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,~~EACnEA~~,~~IAAC~~,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,~~GAAG~~,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,UAAU,~~EAAE,EAAE,~~EAAE~~,~~IAAI~~,~~EAAE~~,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,~~EAC1EA~~,GAAA,CAAC,WAAW,~~IAAC~~,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,~~IAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,UAAU,~~EAAE,EAAE,~~EAAE~~,~~IAAI~~,~~EAAE~~,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,~~YACxEA~~,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}
1	+ {"version":3,"file":"ButtonsRow.js","sources":["../../../src/components/Tooltip/ButtonsRow.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\nimport URLIcon from '../uikit-sdk/Svg/Icons/URL'\nimport Twitter from '../uikit-sdk/Svg/Icons/Twitter'\nimport DexScreener from '../uikit-sdk/Svg/Icons/DexScreener'\nimport CoinGecko from '../uikit-sdk/Svg/Icons/CoinGecko'\n\nconst iconButtonClasses =\n 'ape:bg-white3 ape:no-underline ape:items-center ape:justify-center ape:w-fit ape:h-[30px] ape:p-[2px_5px] ape:rounded-[8px] ape:m-[0_5px_5px_0] ape:hover:cursor-pointer'\n\nconst ButtonsRow: React.FC<{\n projectLink?: string\n twitter?: string\n earnTokenContract?: string\n cgId?: string\n dexscreener?: string\n}> = ({ projectLink, twitter, earnTokenContract, cgId, dexscreener }) => {\n const dexscreenerURL =\n dexscreener \|\| (earnTokenContract ? `https://dexscreener.com/search?q=${earnTokenContract}` : undefined)\n const coingeckoURL = cgId ? `https://www.coingecko.com/en/coins/${cgId}` : undefined\n\n return (\n <Flex className=\"ape:justify-center\">\n <Flex className={iconButtonClasses} as=\"a\" href={projectLink} target=\"_blank\">\n <URLIcon width={18} />\n </Flex>\n <Flex className={iconButtonClasses} as=\"a\" href={twitter} target=\"_blank\">\n <Twitter width={18} color=\"text\" />\n </Flex>\n {dexscreenerURL && (\n <Flex className={iconButtonClasses} as=\"a\" href={dexscreenerURL} target=\"_blank\">\n <DexScreener width={18} color=\"text\" />\n </Flex>\n )}\n {coingeckoURL && (\n <Flex className={iconButtonClasses} as=\"a\" href={coingeckoURL} target=\"_blank\">\n <CoinGecko width={18} color=\"text\" />\n </Flex>\n )}\n </Flex>\n )\n}\n\nexport default ButtonsRow\n"],"names":["_jsxs","_jsx","URLIcon"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB,GACrB,0KAA0K;AAE5K,MAAM,UAAU,GAMX,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAI;AACtE,IAAA,MAAM,cAAc,GAClB,WAAW,KAAK,iBAAiB,GAAG,CAAA,iCAAA,EAAoC,iBAAiB,CAAA,CAAE,GAAG,SAAS,CAAC;AAC1G,IAAA,MAAM,YAAY,GAAG,IAAI,GAAG,CAAA,mCAAA,EAAsC,IAAI,CAAA,CAAE,GAAG,SAAS;AAEpF,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC3EA,GAAA,CAACC,GAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CACjB,EACPD,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EACvEA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAC9B,EACN,cAAc,KACbA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,cAAc,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC9EA,GAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAClC,CACR,EACA,YAAY,KACXA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,iBAAiB,EAAE,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAC,QAAQ,EAAA,QAAA,EAC5EA,GAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,EAAA,CAAG,EAAA,CAChC,CACR,CAAA,EAAA,CACI;AAEX;;;;"}

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

@@ -1,16 +1,16 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
-import { styles } from './styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import ButtonsRow from './ButtonsRow.js';
 import { BLOCK_EXPLORER } from '../../config/constants/chains.js';
 import { ChainId } from '@ape.swap/apeswap-lists';
 import { IS_APTOS_MAINNET } from '../../constants/aptosConstants.js';
 import Flex from '../uikit-sdk/Flex/index.js';
-import { Link } from 'theme-ui';
 import { useSDKConfig } from '../../state/useSDKConfig.js';
 import ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton.js';
 import track from '../../utils/track.js';
 import External from '../uikit-sdk/Svg/Icons/External.js';
+const linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]';
+const linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline';
 const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, projectLink, twitter, chain, isSoldOut = false, billType, cgId, dexscreener, }) => {
     const config = useSDKConfig();
     const explorerLink = BLOCK_EXPLORER[chain];
@@ -37,7 +37,7 @@ const BondInfoTooltip = ({ earnTokenContract, earnTokenSymbol, bondContract, pro
             },
         });
     };
-    return (jsxs(Flex, { sx: { flexDirection: 'column', flexWrap: 'wrap' }, children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { sx: { width: '100%', my: '5px', justifyContent: 'center', position: 'relative', height: '25px' }, children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { sx: { justifyContent: 'center' }, children: jsxs(Flex, { sx: { width: '144px', flexDirection: 'column' }, children: [jsx(Flex, { sx: styles.linkRow, children: tokenLink && (jsxs(Link, { href: tokenLink, sx: styles.link, target: "_blank", children: ["View Token Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: bondLink && (jsxs(Link, { href: bondLink, sx: styles.link, target: "_blank", children: ["View Bond Contract", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { sx: styles.linkRow, children: billType !== 'fcfs' && (jsxs(Link, { href: bondDashboard, sx: styles.link, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { sx: { ml: '5px' }, children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
+    return (jsxs(Flex, { className: "ape:flex-col ape:flex-wrap", children: [jsx(ButtonsRow, { twitter: twitter, projectLink: projectLink, earnTokenContract: earnTokenContract, cgId: cgId, dexscreener: dexscreener }), config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (jsx(Flex, { className: "ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]", children: jsx(ExpandedViewButton, { handleNavigation: handleProjectViewNavigation, rightPos: '-5px' }) })), jsx(Flex, { className: "ape:justify-center", children: jsxs(Flex, { className: "ape:w-[144px] ape:flex-col", children: [jsx(Flex, { className: linkRowClasses, children: tokenLink && (jsxs("a", { href: tokenLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Token Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: bondLink && (jsxs("a", { href: bondLink, className: linkClasses, target: "_blank", rel: "noreferrer", children: ["View Bond Contract", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) }), jsx(Flex, { className: linkRowClasses, children: billType !== 'fcfs' && (jsxs("a", { href: bondDashboard, className: linkClasses, target: "_blank", rel: "noopener noreferrer", children: ["View Bond Insights", jsx(Flex, { className: "ape:ml-[5px]", children: jsx(External, { color: "text", width: 10 }) })] })) })] }) })] }));
 };
 export { BondInfoTooltip as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport ~~{ styles } from './styles'\nimport~~ ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { ~~Link } from 'theme-ui'\nimport {~~ useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n earnTokenContract: string\n earnTokenSymbol: string\n bondContract: string\n projectLink?: string\n twitter?: string\n chain: number\n isSoldOut?: boolean\n billType?: string\n cgId?: string\n dexscreener?: string\n}\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n earnTokenContract,\n earnTokenSymbol,\n bondContract,\n projectLink,\n twitter,\n chain,\n isSoldOut = false,\n billType,\n cgId,\n dexscreener,\n}) => {\n const config = useSDKConfig()\n const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n const urlPage =\n chain === ChainId.SOL\n ? 'account'\n : chain === ChainId.APTOS\n ? 'object'\n : chain === ChainId.SUI\n ? 'object'\n : 'address'\n const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n const handleProjectViewNavigation = () => {\n window.location.href = `/bonds/${bondContract}/${chain}`\n track({\n event: 'projectInfoClick',\n chain: chain,\n data: {\n cat: 'Table',\n bond: earnTokenSymbol,\n bondChain: chain,\n },\n })\n }\n return (\n <Flex ~~sx={{ flexDirection~~: ~~'column', flexWrap~~: 'wrap~~' }}~~>\n <ButtonsRow\n twitter={twitter}\n projectLink={projectLink}\n earnTokenContract={earnTokenContract}\n cgId={cgId}\n dexscreener={dexscreener}\n />\n {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n <Flex ~~sx={{~~ ~~width~~: ~~'100%',~~ my~~: '~~5px', ~~justifyContent~~: 'center', ~~position~~: 'relative', ~~height~~: '25px~~' }}~~>\n <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n </Flex>\n )}\n <Flex ~~sx={{ justifyContent~~: 'center~~' }}~~>\n <Flex ~~sx={{ width~~: '144px', ~~flexDirection~~: ~~'column' }}~~>\n <Flex sx={~~styles.linkRow~~}>\n {tokenLink && (\n <~~Link~~ href={tokenLink} sx={~~styles.link~~} target=\"_blank\">\n View Token Contract\n <Flex ~~sx={{~~ ml~~: '~~5px~~' }}~~>\n <External color=\"text\" width={10} />\n </Flex>\n </~~Link~~>\n )}\n </Flex>\n <Flex sx={~~styles.linkRow~~}>\n {bondLink && (\n <~~Link~~ href={bondLink} sx={~~styles.link~~} target=\"_blank\">\n View Bond Contract\n <Flex ~~sx={{~~ ml~~: '~~5px~~' }}~~>\n <External color=\"text\" width={10} />\n </Flex>\n </~~Link~~>\n )}\n </Flex>\n <Flex sx={~~styles.linkRow~~}>\n {billType !== 'fcfs' && (\n <~~Link~~ href={bondDashboard} sx={~~styles.link~~} target=\"_blank\" rel=\"noopener noreferrer\">\n View Bond Insights\n <Flex ~~sx={{~~ ml~~: '~~5px~~' }}~~>\n <External color=\"text\" width={10} />\n </Flex>\n </~~Link~~>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"~~;;;;;;;;;;;;;AA0BA~~,MAAM,eAAe,GAA0C,CAAC,EAC9D,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,KAAI;AACH,IAAA,MAAM,MAAM,GAAG,YAAY,EAAE;AAC7B,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,KAAgB,CAAC;AACrD,IAAA,MAAM,OAAO,GACX,KAAK,KAAK,OAAO,CAAC;AAChB,UAAE;AACF,UAAE,KAAK,KAAK,OAAO,CAAC;AAClB,cAAE;AACF,cAAE,KAAK,KAAK,OAAO,CAAC;AAClB,kBAAE;kBACA,SAAS;IACnB,MAAM,iBAAiB,GAAG,KAAK,KAAK,OAAO,CAAC,KAAK,GAAG,CAAA,SAAA,EAAY,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAA,CAAE,GAAG,EAAE;IAC/G,MAAM,SAAS,GAAG,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,iBAAiB,CAAA,EAAG,iBAAiB,CAAA,CAAE;IACvF,MAAM,QAAQ,GAAG,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,YAAY,CAAA,EAAG,iBAAiB,CAAA,CAAE;AACjF,IAAA,MAAM,aAAa,GAAG,CAAA,gCAAA,EAAmC,YAAY,EAAE;IAEvE,MAAM,2BAA2B,GAAG,MAAK;QACvC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,UAAU,YAAY,CAAA,CAAA,EAAI,KAAK,CAAA,CAAE;AACxD,QAAA,KAAK,CAAC;AACJ,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,IAAI,EAAE;AACJ,gBAAA,GAAG,EAAE,OAAO;AACZ,gBAAA,IAAI,EAAE,eAAe;AACrB,gBAAA,SAAS,EAAE,KAAK;AACjB,aAAA;AACF,SAAA,CAAC;AACJ,IAAA,CAAC;~~AACD~~,~~IAAA,~~QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,~~EAAA,QAAA,EAAA,~~CACrDC~~,GAAA,CAAC,UAAU,EAAA,EACT,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EAAA,CACxB,EACD,MAAM,EAAE,WAAW,KAAK,SAAS,IAAI,CAAC,SAAS,IAAI,QAAQ,KAAK,MAAM,KACrEA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,~~EAAA,QAAA,~~EACpGA~~,GAAA,CAAC,kBAAkB,EAAA,EAAC,gBAAgB,EAAE,2BAA2B,EAAE,QAAQ,EAAE,MAAM,EAAA,CAAI,EAAA,CAClF,CACR,EACDA,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~cAAc~~,~~EAAE,QAAQ,EAAE,EAAA,QAAA,EACpCD,~~IAAA,CAAC,IAAI,~~IAAC~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,~~EAAA,QAAA,EAAA,~~CACnDC~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,OAAO,~~EAAA,QAAA,~~EACrB~~,SAAS,KACRD,IAAA,~~CAAC~~,~~IAAI~~,EAAA,~~EAAC~~,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM,~~CAAC~~,~~IAAI~~,~~EAAE~~,~~MAAM~~,EAAC,~~QAAQ~~,EAAA,QAAA,EAAA,CAAA,qBAAA,~~EAErDC~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE,EAAE,KAAK,EAAE,~~EAAA,QAAA,~~EACrBA~~,GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAC/B,~~IACF~~,~~CACR~~,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,~~EAAA~~,~~EAAC~~,EAAE,~~EAAE~~,~~MAAM,CAAC,OAAO,~~EAAA,QAAA,~~EACrB~~,QAAQ,KACPD,IAAA,~~CAAC~~,~~IAAI~~,EAAA,~~EAAC~~,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,~~CAAC~~,~~IAAI~~,~~EAAE~~,~~MAAM~~,EAAC,~~QAAQ~~,EAAA,QAAA,EAAA,CAAA,oBAAA,~~EAEpDC~~,GAAA,CAAC,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE,YACrBA,~~GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAC/B,CAAA,EAAA,~~CACF~~,~~CACR~~,EAAA,CACI,EACPA,GAAA,CAAC,IAAI,~~IAAC~~,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,OAAO,~~EAAA,QAAA,~~EACrB~~,QAAQ,KAAK,MAAM,KAClBD,~~IAAA~~,~~CAAC,~~IAAI,~~IAAC,IAAI,~~EAAE,aAAa,EAAE,~~EAAE~~,EAAE,~~MAAM~~,~~CAAC,IAAI,~~EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAAA,oBAAA,~~EAEnFC~~,~~IAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,~~EAAE,YACrBA,~~GAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,EAAA,CAAI,EAAA,CAC/B,CAAA,EAAA,~~CACF~~,~~CACR~~,EAAA,CACI,CAAA,EAAA,CACF,EAAA,CACF,CAAA,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport ButtonsRow from './ButtonsRow'\nimport { BLOCK_EXPLORER } from '../../config/constants/chains'\nimport { ChainId } from '@ape.swap/apeswap-lists'\nimport { IS_APTOS_MAINNET } from '../../constants/aptosConstants'\nimport Flex from '../uikit-sdk/Flex'\nimport { useSDKConfig } from '../../state/useSDKConfig'\nimport ExpandedViewButton from '../../views/BuyBond/components/ExpandedViewButton'\nimport track from '../../utils/track'\nimport External from '../uikit-sdk/Svg/Icons/External'\n\ninterface TooltipProps {\n earnTokenContract: string\n earnTokenSymbol: string\n bondContract: string\n projectLink?: string\n twitter?: string\n chain: number\n isSoldOut?: boolean\n billType?: string\n cgId?: string\n dexscreener?: string\n}\n\nconst linkRowClasses = 'ape:w-full ape:mt-[5px] ape:justify-end ape:[&_svg]:w-[11px]'\nconst linkClasses = 'ape:text-[12px] ape:leading-[14px] ape:flex ape:no-underline ape:hover:underline'\n\nconst BondInfoTooltip: React.FunctionComponent<TooltipProps> = ({\n earnTokenContract,\n earnTokenSymbol,\n bondContract,\n projectLink,\n twitter,\n chain,\n isSoldOut = false,\n billType,\n cgId,\n dexscreener,\n}) => {\n const config = useSDKConfig()\n const explorerLink = BLOCK_EXPLORER[chain as ChainId]\n const urlPage =\n chain === ChainId.SOL\n ? 'account'\n : chain === ChainId.APTOS\n ? 'object'\n : chain === ChainId.SUI\n ? 'object'\n : 'address'\n const aptosNetworkParam = chain === ChainId.APTOS ? `?network=${IS_APTOS_MAINNET ? 'mainnet' : 'testnet'}` : ''\n const tokenLink = `${explorerLink}/${urlPage}/${earnTokenContract}${aptosNetworkParam}`\n const bondLink = `${explorerLink}/${urlPage}/${bondContract}${aptosNetworkParam}`\n const bondDashboard = `https://dashboard.ape.bond/bond/${bondContract}`\n\n const handleProjectViewNavigation = () => {\n window.location.href = `/bonds/${bondContract}/${chain}`\n track({\n event: 'projectInfoClick',\n chain: chain,\n data: {\n cat: 'Table',\n bond: earnTokenSymbol,\n bondChain: chain,\n },\n })\n }\n return (\n <Flex className=\"ape:flex-col ape:flex-wrap\">\n <ButtonsRow\n twitter={twitter}\n projectLink={projectLink}\n earnTokenContract={earnTokenContract}\n cgId={cgId}\n dexscreener={dexscreener}\n />\n {config?.referenceId === 'apebond' && !isSoldOut && billType !== 'fcfs' && (\n <Flex className=\"ape:w-full ape:my-[5px] ape:justify-center ape:relative ape:h-[25px]\">\n <ExpandedViewButton handleNavigation={handleProjectViewNavigation} rightPos={'-5px'} />\n </Flex>\n )}\n <Flex className=\"ape:justify-center\">\n <Flex className=\"ape:w-[144px] ape:flex-col\">\n <Flex className={linkRowClasses}>\n {tokenLink && (\n <a href={tokenLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n View Token Contract\n <Flex className=\"ape:ml-[5px]\">\n <External color=\"text\" width={10} />\n </Flex>\n </a>\n )}\n </Flex>\n <Flex className={linkRowClasses}>\n {bondLink && (\n <a href={bondLink} className={linkClasses} target=\"_blank\" rel=\"noreferrer\">\n View Bond Contract\n <Flex className=\"ape:ml-[5px]\">\n <External color=\"text\" width={10} />\n </Flex>\n </a>\n )}\n </Flex>\n <Flex className={linkRowClasses}>\n {billType !== 'fcfs' && (\n <a href={bondDashboard} className={linkClasses} target=\"_blank\" rel=\"noopener noreferrer\">\n View Bond Insights\n <Flex className=\"ape:ml-[5px]\">\n <External color=\"text\" width={10} />\n </Flex>\n </a>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n )\n}\n\nexport default BondInfoTooltip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/YouTooltip/YouTooltip.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const YouTooltip: () => React.JSX.Element;
+declare const YouTooltip: () => import("react/jsx-runtime").JSX.Element;
 export default YouTooltip;

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

@@ -1,30 +1,8 @@
-import { jsx } from 'theme-ui/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import Flex from '../uikit-sdk/Flex/index.js';
 const YouTooltip = () => {
-    return (jsx(Flex, { sx: { position: 'relative', ml: '10px' }, children: jsx(Flex, { sx: {
-                background: 'primaryButton',
-                height: '18px',
-                justifyContent: 'center',
-                borderRadius: '4px',
-                px: '5px',
-                fontWeight: 400,
-                fontSize: '12px',
-                position: 'absolute',
-                left: 0,
-                top: '50%', // Start 50% down the parent
-                transform: 'translateY(-50%)', // Adjust by the element's own height
-                '::after': {
-                    content: '""',
-                    position: 'absolute',
-                    top: '50%', // Vertically center
-                    left: '-11px', // Position outside the tooltip box
-                    transform: 'translateY(-50%)', // Center arrow vertically
-                    borderWidth: '6px', // Arrow size
-                    borderStyle: 'solid',
-                    borderColor: 'transparent var(--theme-ui-colors-primaryButton) transparent transparent', // Arrow now points left
-                },
-            }, children: "You" }) }));
+    return (jsx(Flex, { className: "ape:relative ape:ml-[10px]", children: jsx(Flex, { className: "ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2", children: "You" }) }));
 };
 export { YouTooltip as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n return (\n <Flex ~~sx={{ position~~: 'relative', ml~~: '~~10px~~' }}~~>\n <Flex~~\n sx={{\n background:~~ ~~'primaryButton',\n height:~~ ~~'18px',\n justifyContent~~: ~~'center',\n borderRadius~~: ~~'4px',\n px~~: ~~'5px',\n fontWeight~~: ~~400,\n fontSize~~: ~~'12px',\n position~~: ~~'absolute',\n left~~: ~~0,\n top: '50%', // Start 50% down the parent\n transform: 'translateY(~~-~~50%)',~~ ~~// Adjust by the element's own height\n '::after'~~: ~~{\n content~~: ~~'\"\"',\n position: 'absolute',\n top: '50%', // Vertically center\n~~ left~~: '~~-~~11px',~~ ~~// Position outside the tooltip box\n transform~~: ~~'translateY(~~-~~50%)',~~ ~~// Center arrow vertically\n borderWidth: '6px', // Arrow size\n borderStyle: 'solid',\n borderColor: 'transparent var(--theme~~-ui-~~colors-primaryButton) transparent transparent', // Arrow now points left~~\~~n },\n }}\n~~ >\n You\n </Flex>\n </Flex>\n )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;~~IACtB~~,QACEA,~~IAAC~~,IAAI,EAAA,EAAC,~~EAAE~~,~~EAAE~~,~~EAAE~~,~~QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,~~EAAA,QAAA,~~EAC5CA~~,~~IAAC~~,IAAI,EAAA,EACH,EAAE,EAAE;AACF,gBAAA,UAAU,EAAE,eAAe;AAC3B,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,EAAE,EAAE,KAAK;AACT,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,IAAI,EAAE,CAAC~~;gBACP~~,~~GAAG,EAAE,KAAK;gBACV,SAAS,EAAE,kBAAkB;AAC7B,gBAAA,SAAS,EAAE;AACT,oBAAA,OAAO,EAAE,~~IAAI~~;AACb~~,~~oBAAA~~,~~QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,KAAK;oBACV,IAAI,EAAE,OAAO;oBACb,~~SAAS,~~EAAE~~,~~kBAAkB;oBAC7B,WAAW,EAAE,KAAK;AAClB,oBAAA,WAAW,EAAE,OAAO;oBACpB,WAAW,EAAE,0EAA0E;AACxF,iBAAA;aACF,~~EAAA,QAAA,EAAA,KAAA,EAAA,~~CAGI~~,EAAA,CACF;AAEX;;;;"}
1	+ {"version":3,"file":"YouTooltip.js","sources":["../../../src/components/YouTooltip/YouTooltip.tsx"],"sourcesContent":["import React from 'react'\nimport Flex from '../uikit-sdk/Flex'\n\nconst YouTooltip = () => {\n return (\n <Flex className=\"ape:relative ape:ml-[10px]\">\n <Flex className=\"ape-you-tooltip ape:bg-primary-button ape:h-[18px] ape:justify-center ape:rounded-[4px] ape:px-[5px] ape:font-normal ape:text-[12px] ape:absolute ape:left-0 ape:top-1/2 ape:-translate-y-1/2\">\n You\n </Flex>\n </Flex>\n )\n}\n\nexport default YouTooltip\n"],"names":["_jsx"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,MAAK;AACtB,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAC1CA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,+LAA+L,EAAA,QAAA,EAAA,KAAA,EAAA,CAExM,EAAA,CACF;AAEX;;;;"}

package/dist/components/uikit-sdk/Button/Button.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonProps } from './types';
-declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, ...props }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ variant, size, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/uikit-sdk/Button/Button.js CHANGED Viewed

@@ -1,47 +1,41 @@
-import { jsxs, jsx } from 'theme-ui/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { Button as Button$1, Spinner } from 'theme-ui';
-import { variants, buttonPadding, buttonLineHeight, buttonFontSizes, sizes } from './types.js';
+import Spinner from '../Spinner/index.js';
+import clsx from 'clsx';
+import { variants, sizes, buttonLineHeight, buttonFontSizes } from './types.js';
-const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, ...props }) => {
-    let hoverStyle = {
-        '&:hover': {
-            '&:not([disabled])': {
-                borderColor: 'primaryButton',
-                background: variant === 'primary' && 'primaryButton',
-                opacity: 0.7,
-            },
-            '&:disabled': {},
-        },
-    };
-    if (variant === 'secondary') {
-        hoverStyle = {
-            '&:hover': {
-                '&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],
-                '&:disabled': {
-                    color: 'secondaryButtonDisableColor',
-                    borderColor: 'secondaryButtonDisable',
-                    opacity: 0.6,
-                },
-            },
-        };
-    }
-    return (jsxs(Button$1, { variant: variant, disabled: disabled, sx: {
-            variant: `buttons.${variant}`,
-            textTransform: 'uppercase',
+const baseClasses = 'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +
+    'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +
+    'ape:active:enabled:scale-90';
+const variantClasses = {
+    [variants.PRIMARY]: 'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +
+        'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +
+        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',
+    [variants.SECONDARY]: 'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +
+        'ape:enabled:hover:border-primary-button-hovered ' +
+        'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',
+};
+// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)
+const paddingX = {
+    [sizes.SMALL]: '12px',
+    [sizes.MEDIUM]: '16px',
+    [sizes.LARGE]: '22px',
+};
+const paddingY = {
+    [sizes.SMALL]: '6px',
+    [sizes.MEDIUM]: '8px',
+    [sizes.LARGE]: '14px',
+};
+const Button = ({ variant = variants.PRIMARY, size = sizes.MEDIUM, load, children, startIcon, endIcon, fullWidth, disabled, className, style, ...props }) => {
+    return (jsxs("button", { disabled: disabled, className: clsx(baseClasses, variantClasses[variant], fullWidth && 'ape:w-full', className), style: {
             fontSize: buttonFontSizes[size],
             lineHeight: buttonLineHeight[size],
-            px: buttonPadding[size].x,
-            py: buttonPadding[size].y,
-            display: 'flex',
-            justifyContent: 'center',
-            transition: 'all .3s linear',
-            '&:active': {
-                transform: 'scale(0.9)',
-            },
-            ...hoverStyle,
-            width: fullWidth ? '100%' : 'max-content',
-        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, ml: "5px" }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
+            paddingLeft: paddingX[size],
+            paddingRight: paddingX[size],
+            paddingTop: paddingY[size],
+            paddingBottom: paddingY[size],
+            ...style,
+        }, ...props, children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && jsx(Spinner, { size: 16, style: { marginLeft: '5px' } }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] }));
 };
 export { Button as default };

package/dist/components/uikit-sdk/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport { ~~Button~~ ~~as ThemeUIButton,~~ Spinner } from '~~theme-ui~~'\nimport { ButtonProps, variants, buttonFontSizes, ~~buttonPadding,~~ sizes, buttonLineHeight } from './types'\n\nconst ~~Button~~ ~~= ({\~~n ~~variant~~ = ~~variants.PRIMARY,\~~n ~~size~~ = ~~sizes.MEDIUM,\~~n ~~load,\~~n ~~children,\n startIcon,\n endIcon,\n fullWidth,\n disabled,\n ...props~~\n}: ~~ButtonProps)~~ => {\n ~~let~~ ~~hoverStyle~~ = {\n '&:hover': {\n '&:not([disabled~~])'~~: ~~{\n borderColor~~: '~~primaryButton'~~,\n ~~background~~: ~~variant~~ ~~===~~ '~~primary'~~ && '~~primaryButton',\n opacity~~: ~~0.7,\~~n ~~},\n~~ '&:disabled': {},\n },\n }\n if ~~(variant~~ ~~===~~ ~~'secondary'~~) {\~~n hoverStyle~~ = {\n '~~&:hover~~'~~: {\~~n ~~'&:not(~~[~~disabled~~])': ~~hoverStyle[~~'~~&:hover~~'][~~'&:not([disabled~~])'],\n ~~'&:disabled'~~: {\n ~~color~~: '~~secondaryButtonDisableColor~~',\n ~~borderColor~~: '~~secondaryButtonDisable~~',\n ~~opacity~~: ~~0.6~~,\n },\n },\n }\n }\n\n return (\n <~~ThemeUIButton~~\n ~~variant~~={~~variant~~}\n ~~disabled~~={~~disabled~~}\n sx={{\n ~~variant: `buttons.${variant}`,\n textTransform: 'uppercase',\n~~ fontSize: buttonFontSizes[size],\n lineHeight: buttonLineHeight[size],\n px: ~~buttonPadding~~[size].x,\n py: ~~buttonPadding~~[size].y,\n ~~display~~: ~~'flex'~~,\n ~~justifyContent~~: ~~'center'~~,\n ~~transition: 'all .3s linear',\n '&:active': {\n transform: 'scale(0.9)',\n },\n~~ ...~~hoverStyle~~,\n ~~width: fullWidth ? '100%' : 'max-content',\n~~ }}\n {...props}\n >\n {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n {children} {load && <Spinner size={16} ~~ml=\"~~5px\" />}\n {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n </~~ThemeUIButton~~>\n )\n}\n\nexport default Button\n"],"names":["_jsxs","~~ThemeUIButton","~~_jsx"],"mappings":"~~;;;;;AAIA~~,MAAM,~~MAAM~~,~~GAAG~~,~~CAAC~~,~~EACd~~,~~OAAO~~,~~GAAG~~,~~QAAQ~~,~~CAAC~~,~~OAAO~~,~~EAC1B~~,~~IAAI~~,~~GAAG~~,~~KAAK,~~CAAC,~~MAAM~~,~~EACnB~~,~~IAAI~~,~~EACJ~~,~~QAAQ~~,~~EACR~~,~~SAAS~~,~~EACT~~,~~OAAO~~,~~EACP,~~SAAS,~~EACT~~,~~QAAQ~~,~~EACR~~,~~GAAG~~,~~KAAK~~,~~EACI~~,~~KAAI~~;~~AAChB~~,IAAA,~~IAAI~~,~~UAAU~~,~~GAAG;AACf~~,~~QAAA~~,~~SAAS~~,~~EAAE~~;~~AACT~~,~~YAAA~~,~~mBAAmB~~,~~EAAE;AACnB~~,~~gBAAA~~,~~WAAW~~,~~EAAE~~,~~eAAe~~;~~AAC5B~~,~~gBAAA~~,~~UAAU~~,~~EAAE~~,~~OAAO~~,KAAK,~~SAAS~~,~~IAAI~~,~~eAAe~~;~~AACpD~~,~~gBAAA~~,~~OAAO~~,~~EAAE~~,GAAG~~;AACb~~,~~aAAA~~;~~AACD~~,~~YAAA~~,~~YAAY~~,~~EAAE~~,~~EAAE;AACjB~~,~~SAAA~~;~~KACF;AACD~~,IAAA,~~IAAI~~,~~OAAO~~,KAAK,~~WAAW~~,~~EAAE~~;~~AAC3B~~,~~QAAA~~,~~UAAU~~,GAAG~~;AACX~~,~~YAAA~~,~~SAAS~~,~~EAAE;AACT~~,~~gBAAA~~,~~mBAAmB~~,~~EAAE~~,~~UAAU~~,~~CAAC~~,~~SAAS~~,~~CAAC~~,CAAC,~~mBAAmB~~,~~CAAC;AAC/D~~,~~gBAAA~~,~~YAAY~~,~~EAAE;AACZ~~,~~oBAAA~~,~~KAAK~~,~~EAAE~~,~~6BAA6B;AACpC~~,~~oBAAA~~,~~WAAW~~,~~EAAE~~,~~wBAAwB;AACrC~~,~~oBAAA~~,~~OAAO~~,~~EAAE~~,GAAG~~;AACb~~,~~iBAAA;AACF~~,~~aAAA~~;~~SACF;IACH;AAEA~~,~~IAAA,~~QACEA,IAAA,~~CAACC~~,~~QAAa~~,EAAA,~~EACZ~~,~~OAAO~~,EAAE,~~OAAO~~,~~EAChB~~,~~QAAQ~~,EAAE,~~QAAQ~~,~~EAClB~~,~~EAAE~~,EAAE~~;YACF~~,OAAO,EAAE,~~CAAA~~,~~QAAA~~,~~EAAW~~,~~OAAO~~,~~CAAA~~,~~CAAE;AAC7B~~,~~YAAA~~,~~aAAa~~,EAAE~~,WAAW~~;~~AAC1B~~,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,~~EAAE~~,EAAE,~~aAAa~~,CAAC,IAAI,CAAC~~,CAAC,CAAC~~;~~AACzB~~,YAAA,~~EAAE~~,EAAE,~~aAAa~~,CAAC,IAAI,CAAC~~,CAAC,CAAC~~;~~AACzB~~,YAAA,~~OAAO~~,EAAE,~~MAAM;AACf,YAAA,cAAc,EAAE,~~QAAQ~~;AACxB~~,~~YAAA~~,~~UAAU~~,~~EAAE,gBAAgB~~;~~AAC5B~~,YAAA,~~UAAU~~,EAAE~~;AACV~~,~~gBAAA~~,~~SAAS~~,~~EAAE~~,~~YAAY~~;~~AACxB~~,~~aAAA;AACD,~~YAAA,GAAG,~~UAAU;YACb,~~KAAK~~,EAAE,SAAS,GAAG,MAAM,GAAG,aAAa~~;~~SAC1C~~,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,EAAE,~~EAAC~~,KAAK,EAAA,~~CAAG~~,~~EACjD~~,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,~~CAC/C~~;~~AAEpB~~;;;;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../src/components/uikit-sdk/Button/Button.tsx"],"sourcesContent":["import React from 'react'\nimport Spinner from '../Spinner'\nimport clsx from 'clsx'\nimport { ButtonProps, variants, buttonFontSizes, sizes, buttonLineHeight } from './types'\n\nconst baseClasses =\n 'ape:font-body ape:font-bold ape:uppercase ape:cursor-pointer ape:flex ape:items-center ape:justify-center ' +\n 'ape:rounded-normal ape:border-[3px] ape:border-solid ape:transition-all ape:duration-300 ape:ease-linear ' +\n 'ape:active:enabled:scale-90'\n\nconst variantClasses: Record<string, string> = {\n [variants.PRIMARY]:\n 'ape:bg-primary-button ape:border-primary-button ape:text-primary-bright ' +\n 'ape:enabled:hover:bg-primary-button-hovered ape:enabled:hover:border-primary-button-hovered ' +\n 'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-text-disabled-button ape:disabled:border-transparent ape:disabled:opacity-90',\n [variants.SECONDARY]:\n 'ape:bg-transparent ape:border-primary-button ape:text-primary-button ' +\n 'ape:enabled:hover:border-primary-button-hovered ' +\n 'ape:disabled:cursor-not-allowed ape:disabled:bg-white3 ape:disabled:text-primary-button-disable ape:disabled:border-transparent',\n}\n\n// px values ported 1:1 from the old theme-ui space scale indices in buttonPadding (types.ts)\nconst paddingX: Record<string, string> = {\n [sizes.SMALL]: '12px',\n [sizes.MEDIUM]: '16px',\n [sizes.LARGE]: '22px',\n}\nconst paddingY: Record<string, string> = {\n [sizes.SMALL]: '6px',\n [sizes.MEDIUM]: '8px',\n [sizes.LARGE]: '14px',\n}\n\nconst Button = ({\n variant = variants.PRIMARY,\n size = sizes.MEDIUM,\n load,\n children,\n startIcon,\n endIcon,\n fullWidth,\n disabled,\n className,\n style,\n ...props\n}: ButtonProps) => {\n return (\n <button\n disabled={disabled}\n className={clsx(baseClasses, variantClasses[variant], fullWidth && 'ape:w-full', className)}\n style={{\n fontSize: buttonFontSizes[size],\n lineHeight: buttonLineHeight[size],\n paddingLeft: paddingX[size],\n paddingRight: paddingX[size],\n paddingTop: paddingY[size],\n paddingBottom: paddingY[size],\n ...style,\n }}\n {...props}\n >\n {React.isValidElement(startIcon) && React.cloneElement(startIcon)}\n {children} {load && <Spinner size={16} style={{ marginLeft: '5px' }} />}\n {React.isValidElement(endIcon) && React.cloneElement(endIcon)}\n </button>\n )\n}\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,WAAW,GACf,4GAA4G;IAC5G,2GAA2G;AAC3G,IAAA,6BAA6B;AAE/B,MAAM,cAAc,GAA2B;AAC7C,IAAA,CAAC,QAAQ,CAAC,OAAO,GACf,0EAA0E;QAC1E,8FAA8F;QAC9F,uJAAuJ;AACzJ,IAAA,CAAC,QAAQ,CAAC,SAAS,GACjB,uEAAuE;QACvE,kDAAkD;QAClD,iIAAiI;CACpI;AAED;AACA,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;AACrB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;AACtB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AACD,MAAM,QAAQ,GAA2B;AACvC,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK;AACpB,IAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AACrB,IAAA,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;CACtB;AAED,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,QAAQ,CAAC,OAAO,EAC1B,IAAI,GAAG,KAAK,CAAC,MAAM,EACnB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACI,KAAI;IAChB,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,IAAI,YAAY,EAAE,SAAS,CAAC,EAC3F,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC;AAC/B,YAAA,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC;AAClC,YAAA,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC3B,YAAA,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC5B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC1B,YAAA,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC;AAC7B,YAAA,GAAG,KAAK;SACT,EAAA,GACG,KAAK,aAER,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAChE,QAAQ,EAAA,GAAA,EAAG,IAAI,IAAIC,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAAA,CAAI,EACtE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA,EAAA,CACtD;AAEb;;;;"}

package/dist/components/uikit-sdk/Button/IconButton.js CHANGED Viewed

@@ -1,21 +1,22 @@
-import { jsx } from 'theme-ui/jsx-runtime';
-import { Button } from 'theme-ui';
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { resolveColor } from '../../../utils/resolveColor.js';
 import Discord from '../Svg/Icons/Discord.js';
 import { iconButtonVariants } from './types.js';
-import styles from './styles.js';
-const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, ...props }) => {
-    return (jsx(Button, { ...props, variant: variant, sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            variant: `buttons.${variant}`,
-            color: 'primaryBright',
-            background,
-            ...(variant === iconButtonVariants.PRIMARY ? styles.primary : {}),
-            ...(variant === iconButtonVariants.TRANSPARENT ? styles.transparent : {}),
-        }, children: children || (jsx("span", { sx: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
+const baseClasses = 'ape:flex ape:items-center ape:justify-center ape:relative ape:text-primary-bright ape:border-none ape:cursor-pointer ' +
+    'ape:transition-all ape:duration-300 ape:ease-linear ape:hover:brightness-115 ape:active:scale-90';
+const variantClasses = {
+    [iconButtonVariants.PRIMARY]: 'ape:rounded-normal ape:font-bold ape:font-body ape:px-[19px] ape:py-[10px]',
+    [iconButtonVariants.TRANSPARENT]: 'ape:bg-transparent ape:bg-no-repeat ape:p-0 ape:[&_svg]:bg-transparent',
+};
+const IconButton = ({ icon: Icon = Discord, color = 'white1', background = 'yellow', variant = iconButtonVariants.PRIMARY, iconWidth, children, className, style, ...props }) => {
+    return (jsx("button", { ...props, className: clsx(baseClasses, variantClasses[variant], className),
+        // The `transparent` variant must stay transparent regardless of the
+        // `background` prop (it defaults to 'yellow') — inline style always
+        // beats the variant's `ape:bg-transparent` class, so skip it here
+        // rather than let it silently win.
+        style: { ...(variant !== iconButtonVariants.TRANSPARENT ? { background: resolveColor(background) } : {}), ...style }, children: children || (jsx("span", { style: { height: iconWidth, width: iconWidth }, children: jsx(Icon, { color: color, ...props, width: iconWidth }) })) }));
 };
 export { IconButton as default };