@relayprotocol/relay-kit-ui 5.1.1 → 5.1.2

package/_cjs/src/components/common/Modal.js

@@ -8,7 +8,7 @@ const index_js_1 = require("../primitives/index.js");
 const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 const framer_motion_1 = require("framer-motion");
-const Modal = ({ trigger, css, overlayZIndex = 9999, showCloseButton = true, children, ...props }) => {
+const Modal = ({ trigger, css, overlayZIndex = 9999, showCloseButton = true, disableAnimation = false, children, ...props }) => {
     return ((0, jsx_runtime_1.jsxs)(react_dialog_1.Root, { modal: true, ...props, children: [(0, jsx_runtime_1.jsx)(react_dialog_1.DialogTrigger, { asChild: true, children: trigger }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: props.open ? ((0, jsx_runtime_1.jsx)(react_dialog_1.DialogPortal, { forceMount: true, children: (0, jsx_runtime_1.jsx)(Dialog_js_1.Overlay, { forceMount: true, css: {
                             position: 'fixed',
                             top: 0,
@@ -21,7 +21,7 @@ const Modal = ({ trigger, css, overlayZIndex = 9999, showCloseButton = true, chi
                                 border: '1px solid var(--borderColor)',
                                 padding: '4',
                                 ...css
-                            }, onPointerDownOutside: props.onPointerDownOutside, children: [showCloseButton ? ((0, jsx_runtime_1.jsx)(react_dialog_1.DialogClose, { asChild: true, style: {
+                            }, disableAnimation: disableAnimation, onPointerDownOutside: props.onPointerDownOutside, onOpenAutoFocus: props.onOpenAutoFocus, children: [showCloseButton ? ((0, jsx_runtime_1.jsx)(react_dialog_1.DialogClose, { asChild: true, style: {
                                         position: 'absolute',
                                         right: 10,
                                         top: 12,

package/_cjs/src/components/common/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/common/Modal.tsx"],"names":[],"mappings":";;;;AACA,uDAAkE;AAClE,yDAK+B;AAC/B,qDAA+C;AAC/C,sEAAgE;AAChE,uEAAmE;AAEnE,iDAA+C;AAaxC,MAAM,KAAK,GAOd,CAAC,EACH,OAAO,EACP,GAAG,EACH,aAAa,GAAG,IAAI,EACpB,eAAe,GAAG,IAAI,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,wBAAC,mBAAU,IAAC,KAAK,EAAE,IAAI,KAAM,KAAK,aAChC,uBAAC,4BAAa,IAAC,OAAO,kBAAE,OAAO,GAAiB,EAChD,uBAAC,+BAAe,cACb,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,uBAAC,2BAAY,IAAC,UAAU,kBACtB,uBAAC,mBAAO,IACN,UAAU,QACV,GAAG,EAAE;4BACH,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,CAAC;4BACN,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;4BACT,eAAe,EAAE,UAAU;yBAC5B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,YAEhC,wBAAC,2BAAe,IACd,UAAU,QACV,GAAG,EAAE;gCACH,eAAe,EAAE,4BAA4B;gCAC7C,MAAM,EAAE,8BAA8B;gCACtC,OAAO,EAAE,GAAG;gCACZ,GAAG,GAAG;6BACP,EACD,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,aAE/C,eAAe,CAAC,CAAC,CAAC,CACjB,uBAAC,0BAAW,IACV,OAAO,QACP,KAAK,EAAE;wCACL,QAAQ,EAAE,UAAU;wCACpB,KAAK,EAAE,EAAE;wCACT,GAAG,EAAE,EAAE;wCACP,MAAM,EAAE,EAAE;qCACX,YAED,uBAAC,iBAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4CACb,KAAK,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAA;wCACjC,CAAC,YAED,uBAAC,mCAAe,IAAC,IAAI,EAAE,iBAAO,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAClD,GACG,CACf,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACO,GACV,GACG,CAChB,CAAC,CAAC,CAAC,IAAI,GACQ,IACP,CACd,CAAA;AACH,CAAC,CAAA;AAzEY,QAAA,KAAK,SAyEjB"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/common/Modal.tsx"],"names":[],"mappings":";;;;AACA,uDAAkE;AAClE,yDAK+B;AAC/B,qDAA+C;AAC/C,sEAAgE;AAChE,uEAAmE;AAEnE,iDAA+C;AAcxC,MAAM,KAAK,GAOd,CAAC,EACH,OAAO,EACP,GAAG,EACH,aAAa,GAAG,IAAI,EACpB,eAAe,GAAG,IAAI,EACtB,gBAAgB,GAAG,KAAK,EACxB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,wBAAC,mBAAU,IAAC,KAAK,EAAE,IAAI,KAAM,KAAK,aAChC,uBAAC,4BAAa,IAAC,OAAO,kBAAE,OAAO,GAAiB,EAChD,uBAAC,+BAAe,cACb,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,uBAAC,2BAAY,IAAC,UAAU,kBACtB,uBAAC,mBAAO,IACN,UAAU,QACV,GAAG,EAAE;4BACH,QAAQ,EAAE,OAAO;4BACjB,GAAG,EAAE,CAAC;4BACN,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;4BACT,eAAe,EAAE,UAAU;yBAC5B,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,YAEhC,wBAAC,2BAAe,IACd,UAAU,QACV,GAAG,EAAE;gCACH,eAAe,EAAE,4BAA4B;gCAC7C,MAAM,EAAE,8BAA8B;gCACtC,OAAO,EAAE,GAAG;gCACZ,GAAG,GAAG;6BACP,EACD,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,EAChD,eAAe,EAAE,KAAK,CAAC,eAAe,aAErC,eAAe,CAAC,CAAC,CAAC,CACjB,uBAAC,0BAAW,IACV,OAAO,QACP,KAAK,EAAE;wCACL,QAAQ,EAAE,UAAU;wCACpB,KAAK,EAAE,EAAE;wCACT,GAAG,EAAE,EAAE;wCACP,MAAM,EAAE,EAAE;qCACX,YAED,uBAAC,iBAAM,IACL,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4CACb,KAAK,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,CAAA;wCACjC,CAAC,YAED,uBAAC,mCAAe,IAAC,IAAI,EAAE,iBAAO,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,GAClD,GACG,CACf,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACO,GACV,GACG,CAChB,CAAC,CAAC,CAAC,IAAI,GACQ,IACP,CACd,CAAA;AACH,CAAC,CAAA;AA5EY,QAAA,KAAK,SA4EjB"}

package/_cjs/src/components/common/TokenSelector/ChainShortcuts.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainShortcuts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_js_1 = require("../../primitives/index.js");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const tokenSelector_js_1 = require("../../../utils/tokenSelector.js");
+const events_js_1 = require("../../../constants/events.js");
+const ChainShortcuts = ({ options, value, onSelect, onMoreClick, popularChainIds, starredChainIds, onAnalyticEvent, context }) => {
+    const shortcutChains = (0, react_1.useMemo)(() => {
+        const { allChainsOption, starredChains, alphabeticalChains } = (0, tokenSelector_js_1.groupChains)(options, popularChainIds, starredChainIds);
+        const shortcuts = [];
+        if (allChainsOption) {
+            shortcuts.push(allChainsOption);
+        }
+        const remainingSlots = 5 - shortcuts.length;
+        const starredToAdd = starredChains.slice(0, remainingSlots);
+        shortcuts.push(...starredToAdd);
+        const currentSlots = shortcuts.length;
+        if (currentSlots < 5) {
+            const remainingSlots = 5 - currentSlots;
+            const existingIds = new Set(shortcuts.map((c) => c.id));
+            const popularChains = alphabeticalChains.filter((chain) => chain.id &&
+                popularChainIds?.includes(chain.id) &&
+                !existingIds.has(chain.id));
+            const popularToAdd = popularChains.slice(0, remainingSlots);
+            shortcuts.push(...popularToAdd);
+            const finalSlots = shortcuts.length;
+            if (finalSlots < 5) {
+                const finalRemaining = 5 - finalSlots;
+                const finalExistingIds = new Set(shortcuts.map((c) => c.id));
+                const alphabeticalToAdd = alphabeticalChains
+                    .filter((chain) => chain.id && !finalExistingIds.has(chain.id))
+                    .slice(0, finalRemaining);
+                shortcuts.push(...alphabeticalToAdd);
+            }
+        }
+        return shortcuts.slice(0, 5);
+    }, [options, popularChainIds, starredChainIds]);
+    const handleChainSelect = (chain) => {
+        onAnalyticEvent?.(events_js_1.EventNames.CURRENCY_STEP_CHAIN_FILTER, {
+            chain: chain.name,
+            chain_id: chain.id,
+            search_term: '',
+            context,
+            from_starred_list: starredChainIds?.includes(chain.id) ?? false
+        });
+        onSelect(chain);
+    };
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '2', width: '100%', overflowX: 'auto', py: '2' }, children: [shortcutChains.map((chain) => ((0, jsx_runtime_1.jsx)(ChainShortcutButton, { chain: chain, isSelected: value.id === chain.id, onClick: () => handleChainSelect(chain) }, chain.id?.toString() ?? 'all-chains'))), (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "ghost", size: "none", onClick: onMoreClick, css: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '1',
+                    px: '2',
+                    py: '10px',
+                    height: '40px',
+                    borderRadius: '8px',
+                    backgroundColor: 'dropdown-background',
+                    color: 'gray9',
+                    _hover: {
+                        backgroundColor: 'gray3'
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", color: "subtle", children: "More" }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight, width: 16, height: 16 })] })] }));
+};
+exports.ChainShortcuts = ChainShortcuts;
+const ChainShortcutButton = ({ chain, isSelected, onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", onClick: onClick, css: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '1',
+            py: '2',
+            px: '3',
+            borderRadius: '12px',
+            backgroundColor: isSelected ? 'gray6' : 'dropdown-background',
+            _hover: {
+                backgroundColor: isSelected ? 'gray6' : 'gray3'
+            }
+        }, children: chain.id ? ((0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: chain.id, width: 24, height: 24, css: { borderRadius: '4px', overflow: 'hidden' } })) : ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { height: '24px', width: '20px' }, children: "All" })) }));
+};
+//# sourceMappingURL=ChainShortcuts.js.map

package/_cjs/src/components/common/TokenSelector/ChainShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainShortcuts.js","sourceRoot":"","sources":["../../../../../src/components/common/TokenSelector/ChainShortcuts.tsx"],"names":[],"mappings":"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"}

package/_cjs/src/components/common/TokenSelector/MobileChainSelector.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileChainSelector = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_js_1 = require("../../primitives/index.js");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const fuse_js_1 = tslib_1.__importDefault(require("fuse.js"));
+const events_js_1 = require("../../../constants/events.js");
+const AllChainsLogo_js_1 = tslib_1.__importDefault(require("../../../img/AllChainsLogo.js"));
+const TagPill_js_1 = require("./TagPill.js");
+const tokenSelector_js_1 = require("../../../utils/tokenSelector.js");
+const localStorage_js_1 = require("../../../utils/localStorage.js");
+const Tooltip_js_1 = tslib_1.__importDefault(require("../../../components/primitives/Tooltip.js"));
+const fuseSearchOptions = {
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.2,
+    keys: ['id', 'name', 'displayName']
+};
+const MobileChainSelector = ({ options, value, onSelect, onBack, onClose, onAnalyticEvent, popularChainIds, context, onChainStarToggle, starredChainIds }) => {
+    const [chainSearchInput, setChainSearchInput] = (0, react_1.useState)('');
+    const chainFuse = new fuse_js_1.default(options, fuseSearchOptions);
+    const { allChainsOption, starredChains, alphabeticalChains } = (0, react_1.useMemo)(() => (0, tokenSelector_js_1.groupChains)(options, popularChainIds, starredChainIds), [options, popularChainIds, starredChainIds]);
+    const filteredChains = (0, react_1.useMemo)(() => {
+        if (chainSearchInput.trim() === '') {
+            return null;
+        }
+        const results = chainFuse.search(chainSearchInput);
+        const uniqueChains = new Map();
+        results.forEach((result) => {
+            if (!uniqueChains.has(result.item.id)) {
+                uniqueChains.set(result.item.id, result.item);
+            }
+        });
+        return Array.from(uniqueChains.values());
+    }, [chainSearchInput, chainFuse]);
+    const handleChainSelect = (0, react_1.useCallback)((chain) => {
+        onSelect(chain);
+        const fromStarredList = chain.id !== undefined && starredChains.some((c) => c.id === chain.id);
+        onAnalyticEvent?.(events_js_1.EventNames.CURRENCY_STEP_CHAIN_FILTER, {
+            chain: chain.name,
+            chain_id: chain.id,
+            search_term: chainSearchInput,
+            context,
+            from_starred_list: fromStarredList
+        });
+        onBack();
+    }, [
+        onSelect,
+        onAnalyticEvent,
+        chainSearchInput,
+        context,
+        starredChains,
+        onBack
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
+            width: '100%',
+            height: '100%',
+            gap: '3'
+        }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: {
+                    gap: '1',
+                    width: '100%'
+                }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", onClick: onBack, css: {
+                            p: '2',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minWidth: '40px',
+                            height: '40px',
+                            color: 'gray9'
+                        }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faArrowLeft, width: 16, height: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Input, { placeholder: "Search a chain", icon: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
+                            flex: 1,
+                            height: 40
+                        }, css: {
+                            width: '100%',
+                            _placeholder_parent: {
+                                textOverflow: 'ellipsis'
+                            }
+                        }, value: chainSearchInput, onChange: (e) => setChainSearchInput(e.target.value) }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", onClick: onClose, css: {
+                            p: '2',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minWidth: '40px',
+                            height: '40px',
+                            color: 'gray9'
+                        }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmark, width: 16, height: 16 }) })] }), (0, jsx_runtime_1.jsx)(index_js_1.AccessibleList, { onSelect: (selectedValue) => {
+                    if (selectedValue) {
+                        const chain = selectedValue === 'all-chains'
+                            ? { id: undefined, name: 'All Chains' }
+                            : options.find((chain) => chain.id?.toString() === selectedValue);
+                        if (chain) {
+                            handleChainSelect(chain);
+                        }
+                    }
+                }, css: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    flex: 1,
+                    overflowY: 'auto',
+                    scrollbarColor: 'var(--relay-colors-gray5) transparent'
+                }, children: filteredChains ? (filteredChains.map((chain) => {
+                    const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                    return ((0, jsx_runtime_1.jsx)(MobileChainRow, { chain: chain, tag: tag, value: chain.id?.toString() ?? 'all-chains', onChainStarToggle: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }, chain.id?.toString() ?? 'all-chains'));
+                })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [allChainsOption && ((0, jsx_runtime_1.jsx)(MobileChainRow, { chain: allChainsOption, value: "all-chains", onAnalyticEvent: onAnalyticEvent })), starredChains.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { py: '2', gap: '2' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'primary9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 16, height: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", color: "subtle", children: "Starred Chains" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", children: "Long-press to star a chain" }), children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faInfoCircle, width: 14, height: 14 }) }) })] }), starredChains.map((chain) => {
+                                    const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                                    return chain.id ? ((0, jsx_runtime_1.jsx)(MobileChainRow, { chain: chain, tag: tag, value: chain.id.toString(), onChainStarToggle: onChainStarToggle, showStar: false, onAnalyticEvent: onAnalyticEvent }, chain.id.toString())) : null;
+                                })] })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", color: "subtle", css: { py: '2' }, children: "Chains A-Z" }), alphabeticalChains.map((chain) => {
+                            const tag = 'tags' in chain ? chain.tags?.[0] : undefined;
+                            return chain.id ? ((0, jsx_runtime_1.jsx)(MobileChainRow, { chain: chain, tag: tag, value: chain.id.toString(), onChainStarToggle: onChainStarToggle, onAnalyticEvent: onAnalyticEvent }, chain.id.toString())) : null;
+                        })] })) })] }));
+};
+exports.MobileChainSelector = MobileChainSelector;
+const MobileChainRow = ({ chain, tag, value, onChainStarToggle, showStar = true, onAnalyticEvent }) => {
+    const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
+    const [longPressTimer, setLongPressTimer] = (0, react_1.useState)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    const isStarred = chain.id ? (0, localStorage_js_1.isChainStarred)(chain.id) : false;
+    const handleClickOutside = (0, react_1.useCallback)((event) => {
+        if (dropdownRef.current &&
+            !dropdownRef.current.contains(event.target)) {
+            setDropdownOpen(false);
+        }
+    }, []);
+    const handleEscapeKey = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Escape') {
+            setDropdownOpen(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (dropdownOpen) {
+            document.addEventListener('mousedown', handleClickOutside, true);
+            document.addEventListener('touchstart', handleClickOutside, true);
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleEscapeKey);
+            requestAnimationFrame(() => {
+                dropdownRef.current?.scrollIntoView({ block: 'nearest' });
+            });
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside, true);
+                document.removeEventListener('touchstart', handleClickOutside, true);
+                document.removeEventListener('click', handleClickOutside, true);
+                document.removeEventListener('keydown', handleEscapeKey);
+            };
+        }
+    }, [dropdownOpen, handleClickOutside, handleEscapeKey]);
+    const handleToggleStar = (0, react_1.useCallback)(() => {
+        if (chain.id) {
+            const previouslyStarred = isStarred;
+            (0, localStorage_js_1.toggleStarredChain)(chain.id);
+            const eventName = previouslyStarred
+                ? events_js_1.EventNames.CHAIN_UNSTARRED
+                : events_js_1.EventNames.CHAIN_STARRED;
+            onAnalyticEvent?.(eventName, {
+                chain: chain.name,
+                chain_id: chain.id
+            });
+            onChainStarToggle?.();
+            setDropdownOpen(false);
+        }
+    }, [chain.id, chain.name, isStarred, onAnalyticEvent, onChainStarToggle]);
+    const handleTouchStart = (0, react_1.useCallback)((e) => {
+        if (!chain.id)
+            return;
+        const timer = setTimeout(() => {
+            if ('vibrate' in navigator) {
+                navigator.vibrate(50);
+            }
+            setDropdownOpen(true);
+        }, 500);
+        setLongPressTimer(timer);
+    }, [chain.id]);
+    const handleTouchEnd = (0, react_1.useCallback)(() => {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            setLongPressTimer(null);
+        }
+    }, [longPressTimer]);
+    const handleTouchMove = (0, react_1.useCallback)(() => {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            setLongPressTimer(null);
+        }
+    }, [longPressTimer]);
+    if (!chain.id) {
+        return ((0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { value: value, asChild: true, children: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "ghost", size: "none", css: {
+                    py: '3',
+                    px: '2',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '2',
+                    width: '100%',
+                    height: '56px',
+                    borderRadius: '12px',
+                    _hover: {
+                        backgroundColor: 'gray3'
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)(AllChainsLogo_js_1.default, { style: { width: 24, height: 24 } }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", children: chain.name })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { value: value, asChild: true, children: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "ghost", size: "none", onContextMenu: (e) => {
+                        e.preventDefault();
+                        setDropdownOpen(true);
+                    }, onKeyDown: (e) => {
+                        if ((e.shiftKey && e.key === 'F10') || e.key === 'ContextMenu') {
+                            e.preventDefault();
+                            setDropdownOpen(true);
+                        }
+                    }, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchMove: handleTouchMove, css: {
+                        py: '3',
+                        px: '2',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '2',
+                        width: '100%',
+                        height: '56px',
+                        borderRadius: '12px',
+                        userSelect: 'none',
+                        _hover: {
+                            backgroundColor: 'gray3'
+                        }
+                    }, style: {
+                        WebkitUserSelect: 'none'
+                    }, children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { chainId: chain.id, square: true, width: 24, height: 24 }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { flex: 1, textAlign: 'left' }, children: ('displayName' in chain && chain.displayName) || chain.name }), showStar && isStarred && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'primary9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 16, height: 16 }) })), tag && (0, jsx_runtime_1.jsx)(TagPill_js_1.TagPill, { tag: tag })] }) }), dropdownOpen && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    marginTop: '4px',
+                    minWidth: 160,
+                    zIndex: 999999
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    handleToggleStar();
+                }, onMouseDown: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: {
+                        alignItems: 'center',
+                        gap: '8px',
+                        padding: '8px',
+                        borderRadius: 12,
+                        cursor: 'pointer',
+                        backgroundColor: 'gray1',
+                        '--borderColor': 'colors.subtle-border-color',
+                        border: '1px solid var(--borderColor)',
+                        _hover: {
+                            backgroundColor: 'gray2'
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
+                                color: isStarred ? 'gray8' : 'primary9'
+                            }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faStar, width: 16, height: 16 }) }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle1", css: { lineHeight: '20px' }, children: isStarred ? 'Unstar chain' : 'Star chain' })] }) }))] }));
+};
+//# sourceMappingURL=MobileChainSelector.js.map

package/_cjs/src/components/common/TokenSelector/MobileChainSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileChainSelector.js","sourceRoot":"","sources":["../../../../../src/components/common/TokenSelector/MobileChainSelector.tsx"],"names":[],"mappings":"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"}

package/_cjs/src/components/common/TokenSelector/TokenSelector.js

@@ -14,7 +14,6 @@ const relay_kit_hooks_1 = require("@relayprotocol/relay-kit-hooks");
 const events_js_1 = require("../../../constants/events.js");
 const UnverifiedTokenModal_js_1 = require("../UnverifiedTokenModal.js");
 const useEnhancedTokensList_js_1 = require("../../../hooks/useEnhancedTokensList.js");
-const ChainFilter_js_1 = tslib_1.__importDefault(require("./ChainFilter.js"));
 const TokenList_js_1 = require("./TokenList.js");
 const depositAddresses_js_1 = require("../../../constants/depositAddresses.js");
 const localStorage_js_1 = require("../../../utils/localStorage.js");
@@ -24,6 +23,8 @@ const solana_js_1 = require("../../../utils/solana.js");
 const bitcoin_js_1 = require("../../../utils/bitcoin.js");
 const ChainFilterSidebar_js_1 = require("./ChainFilterSidebar.js");
 const SuggestedTokens_js_1 = require("./SuggestedTokens.js");
+const MobileChainSelector_js_1 = require("./MobileChainSelector.js");
+const ChainShortcuts_js_1 = require("./ChainShortcuts.js");
 const tokens_js_1 = require("../../../utils/tokens.js");
 const relay_sdk_1 = require("@relayprotocol/relay-sdk");
 const tokenSelector_js_1 = require("../../../utils/tokenSelector.js");
@@ -35,6 +36,7 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
     const { chains: allRelayChains } = (0, index_js_3.useInternalRelayChains)();
     const isDesktop = (0, usehooks_ts_1.useMediaQuery)('(min-width: 660px)');
     const [open, setOpen] = (0, react_1.useState)(false);
+    const [mobileView, setMobileView] = (0, react_1.useState)('tokens');
     const [unverifiedTokenModalOpen, setUnverifiedTokenModalOpen] = (0, react_1.useState)(false);
     const [unverifiedToken, setUnverifiedToken] = (0, react_1.useState)();
     const [chainFilter, setChainFilter] = (0, react_1.useState)({
@@ -181,6 +183,7 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
         setTokenSearchInput('');
         setChainSearchInputElement(null);
         setTokenSearchInputElement(null);
+        setMobileView('tokens');
     }, []);
     const onOpenChange = (0, react_1.useCallback)((openChange) => {
         let tokenCount = undefined;
@@ -300,11 +303,22 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
             inputElement.focus();
         }
     }, [open, inputElement]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { open: open, onOpenChange: onOpenChange, showCloseButton: true, trigger: trigger, css: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { open: open, onOpenChange: onOpenChange, showCloseButton: isDesktop, disableAnimation: !isDesktop, onOpenAutoFocus: (e) => {
+                        if (!isDesktop) {
+                            e.preventDefault();
+                        }
+                    }, trigger: trigger, css: {
                         p: '4',
                         display: 'flex',
                         flexDirection: 'column',
-                        height: 'min(85vh, 600px)',
+                        height: isDesktop ? 'min(85vh, 600px)' : '100%',
+                        maxHeight: isDesktop ? 'min(85vh, 600px)' : '100%',
+                        borderRadius: isDesktop ? 'modal-border-radius' : '0px',
+                        width: '100%',
+                        maxWidth: '100%',
+                        sm: {
+                            maxWidth: '100%'
+                        },
                         '@media(min-width: 660px)': {
                             minWidth: isDesktop
                                 ? hasMultipleConfiguredChainIds
@@ -313,12 +327,15 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
                                 : 400,
                             maxWidth: isDesktop && hasMultipleConfiguredChainIds ? 660 : 408
                         }
-                    }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
+                    }, children: !isDesktop && mobileView === 'chains' ? ((0, jsx_runtime_1.jsx)(MobileChainSelector_js_1.MobileChainSelector, { options: allChains, value: chainFilter, onSelect: (chain) => {
+                            setChainFilter(chain);
+                            setMobileView('tokens');
+                        }, onBack: () => setMobileView('tokens'), onClose: () => onOpenChange(false), onAnalyticEvent: onAnalyticEvent, popularChainIds: popularChainIds, context: context, onChainStarToggle: handleChainStarToggle, starredChainIds: starredChainIds })) : ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
                             width: '100%',
                             height: '100%',
                             gap: '3',
                             overflowY: 'hidden'
-                        }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "Select Token" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { flex: 1, gap: '3', overflow: 'hidden' }, children: [isDesktop &&
+                        }, children: [isDesktop && (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", children: "Select Token" }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { flex: 1, gap: '3', overflow: 'hidden' }, children: [isDesktop &&
                                         (!configuredChainIds || hasMultipleConfiguredChainIds) ? ((0, jsx_runtime_1.jsx)(ChainFilterSidebar_js_1.ChainFilterSidebar, { options: allChains, value: chainFilter, isOpen: open, onSelect: setChainFilter, onAnalyticEvent: onAnalyticEvent, onInputRef: setChainSearchInputElement, tokenSearchInputRef: tokenSearchInputElement, popularChainIds: popularChainIds, context: context, onChainStarToggle: handleChainStarToggle, starredChainIds: starredChainIds })) : null, (0, jsx_runtime_1.jsxs)(AccessibleList_js_1.AccessibleList, { onSelect: (value) => {
                                             if (value === 'input')
                                                 return;
@@ -344,30 +361,48 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
                                                     width: '100%',
                                                     gap: '2',
                                                     background: 'modal-background'
-                                                }, children: [(0, jsx_runtime_1.jsx)(AccessibleList_js_1.AccessibleListItem, { value: "input", asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Input, { ref: setTokenSearchInputElement, placeholder: "Search for a token or paste address", icon: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
-                                                                width: '100%',
-                                                                height: 40,
-                                                                mb: isDesktop ? '1' : '0'
-                                                            }, css: {
-                                                                width: '100%',
-                                                                _placeholder_parent: {
-                                                                    textOverflow: 'ellipsis'
-                                                                }
-                                                            }, value: tokenSearchInput, onChange: (e) => {
-                                                                const value = e.target.value;
-                                                                setTokenSearchInput(value);
-                                                                if ((0, address_js_1.isValidAddress)(chainFilter.vmType, value)) {
-                                                                    onAnalyticEvent?.(events_js_1.EventNames.TOKEN_SELECTOR_CONTRACT_SEARCH, {
-                                                                        search_term: value,
-                                                                        chain_filter: chainFilter.id
-                                                                    });
-                                                                }
-                                                            } }) }), !isDesktop &&
-                                                        (!configuredChainIds || hasMultipleConfiguredChainIds) ? ((0, jsx_runtime_1.jsx)(ChainFilter_js_1.default, { options: allChains, value: chainFilter, onSelect: setChainFilter, popularChainIds: popularChainIds, onChainStarToggle: handleChainStarToggle, starredChainIds: starredChainIds })) : null] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
+                                                }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: {
+                                                            width: '100%',
+                                                            gap: '2'
+                                                        }, children: [(0, jsx_runtime_1.jsx)(AccessibleList_js_1.AccessibleListItem, { value: "input", asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Input, { ref: setTokenSearchInputElement, placeholder: "Search for a token or paste address", icon: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
+                                                                        width: '100%',
+                                                                        height: 40,
+                                                                        mb: isDesktop ? '1' : '0'
+                                                                    }, css: {
+                                                                        width: '100%',
+                                                                        _placeholder_parent: {
+                                                                            textOverflow: 'ellipsis'
+                                                                        }
+                                                                    }, value: tokenSearchInput, onChange: (e) => {
+                                                                        const value = e.target.value;
+                                                                        setTokenSearchInput(value);
+                                                                        if ((0, address_js_1.isValidAddress)(chainFilter.vmType, value)) {
+                                                                            onAnalyticEvent?.(events_js_1.EventNames.TOKEN_SELECTOR_CONTRACT_SEARCH, {
+                                                                                search_term: value,
+                                                                                chain_filter: chainFilter.id
+                                                                            });
+                                                                        }
+                                                                    } }) }), !isDesktop && ((0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", onClick: () => onOpenChange(false), css: {
+                                                                    p: '2',
+                                                                    borderRadius: '8px',
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'center',
+                                                                    minWidth: '40px',
+                                                                    height: '40px',
+                                                                    color: 'gray9'
+                                                                }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmark, width: 16, height: 16 }) }))] }), !isDesktop &&
+                                                        (!configuredChainIds || hasMultipleConfiguredChainIds) ? ((0, jsx_runtime_1.jsx)(ChainShortcuts_js_1.ChainShortcuts, { options: allChains, value: chainFilter, onSelect: setChainFilter, onMoreClick: () => setMobileView('chains'), popularChainIds: popularChainIds, starredChainIds: starredChainIds, onAnalyticEvent: onAnalyticEvent, context: context })) : null, !isDesktop && chainFilter.id !== undefined ? ((0, jsx_runtime_1.jsx)(index_js_1.Flex, { align: "center", css: {
+                                                            gap: '2',
+                                                            pb: '1',
+                                                            width: '100%'
+                                                        }, children: (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: ["Tokens on", ' ', ('displayName' in chainFilter &&
+                                                                    chainFilter.displayName) ||
+                                                                    chainFilter.name] }) })) : null] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
                                                     flex: 1,
                                                     overflowY: 'auto',
                                                     gap: '3',
-                                                    pt: '2',
+                                                    pt: !isDesktop && chainFilter.id !== undefined ? '0' : '2',
                                                     scrollbarColor: 'var(--relay-colors-gray5) transparent'
                                                 }, children: [chainFilter.id &&
                                                         tokenSearchInput.length === 0 &&
@@ -401,7 +436,7 @@ const TokenSelector = ({ token, trigger, chainIdsFilter, lockedChainIds, context
                                                         tokenList?.length === 0 &&
                                                         externalTokenList?.length === 0 ? ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", align: "center", css: { py: '5', maxWidth: 312, alignSelf: 'center' }, children: [!chainFilter?.id && isSearchTermValidAddress && ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray8', mb: '2' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faFolderOpen, size: "xl", width: 27, height: 24 }) })), (0, jsx_runtime_1.jsx)(index_js_1.Text, { color: "subtle", style: "body2", css: { textAlign: 'center' }, children: !chainFilter?.id && isSearchTermValidAddress
                                                                     ? 'No results. Switch to the desired chain to search by contract.'
-                                                                    : 'No results.' })] })) : null] }, chainFilter.id ?? 'all')] })] })] }) }) }), unverifiedTokenModalOpen && ((0, jsx_runtime_1.jsx)(UnverifiedTokenModal_js_1.UnverifiedTokenModal, { open: unverifiedTokenModalOpen, onOpenChange: setUnverifiedTokenModalOpen, data: unverifiedToken ? { token: unverifiedToken } : undefined, onAcceptToken: (token) => {
+                                                                    : 'No results.' })] })) : null] }, chainFilter.id ?? 'all')] })] })] })) }) }), unverifiedTokenModalOpen && ((0, jsx_runtime_1.jsx)(UnverifiedTokenModal_js_1.UnverifiedTokenModal, { open: unverifiedTokenModalOpen, onOpenChange: setUnverifiedTokenModalOpen, data: unverifiedToken ? { token: unverifiedToken } : undefined, onAcceptToken: (token) => {
                     if (token) {
                         handleTokenSelection(token);
                     }