{"version":3,"file":"index.cjs","sources":["../../../../../src/components/erc20-token-picker/search/index.tsx"],"sourcesContent":["import React, { type ChangeEventHandler, type Ref, useCallback } from \"react\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\nimport { FixedSizeList } from \"react-window\";\nimport X from \"../../../icons/x\";\nimport { mergedCva } from \"../../../utils/components\";\nimport { tokenInfoWithBalanceEquals } from \"../../../utils/erc20\";\nimport { Typography, type TypographyProps } from \"../../typography\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { TextInput, type TextInputProps } from \"../../text-input\";\nimport { Divider, type DividerProps } from \"../divider\";\nimport type { TokenInfoWithBalance, TokenListWithBalance } from \"../types\";\nimport { Row, type RowProps } from \"./row\";\n\nconst rootStyles = mergedCva([\n    \"cui-flex\",\n    \"cui-flex-col\",\n    \"cui-bg-white\",\n    \"dark:cui-bg-black\",\n    \"cui-rounded-xl\",\n    \"cui-m-4\",\n    \"cui-h-[60vh]\",\n    \"cui-w-full\",\n    \"md:cui-min-w-[460px]\",\n    \"md:cui-w-1/3\",\n    \"lg:cui-w-1/4\",\n]);\n\nconst headerStyles = mergedCva([\n    \"cui-p-4\",\n    \"cui-flex\",\n    \"cui-justify-between\",\n    \"cui-items-center\",\n]);\n\nconst inputContainerStyles = mergedCva([\"cui-p-3\"]);\n\nconst iconStyles = mergedCva([\"cui-cursor-pointer\"]);\n\nconst listWrapperStyles = mergedCva(\n    [\"cui-w-full\", \"cui-grow\", \"cui-overflow-hidden\"],\n    {\n        variants: {\n            empty: {\n                true: [\"cui-flex\", \"cui-justify-center\", \"cui-items-center\"],\n            },\n        },\n    },\n);\n\nconst listStyles = mergedCva([\"cui-scrollbar\"]);\n\nexport interface SearchProps {\n    tokens: TokenInfoWithBalance[];\n    searchQuery: string;\n    onSearchQueryChange: ChangeEventHandler<HTMLInputElement>;\n    loadingBalances?: boolean;\n    fixedListRef?: Ref<FixedSizeList>;\n    onDismiss?: () => void;\n    loading?: boolean;\n    onSelectedTokenChange?: (token: TokenInfoWithBalance) => void;\n    selectedToken?: TokenInfoWithBalance | null;\n    lists?: TokenListWithBalance[];\n    ipfsGatewayURL?: string;\n    onManageLists: () => void;\n    className?: {\n        root?: string;\n        header?: string;\n        title?: TypographyProps[\"className\"];\n        closeIcon?: string;\n        divider?: DividerProps[\"className\"];\n        inputWrapper?: string;\n        input?: TextInputProps[\"className\"];\n        listWrapper?: string;\n        list?: string;\n        listItem?: RowProps[\"className\"];\n        emptyListText?: string;\n        manageListsButtonWrapper?: string;\n        manageListsButton?: ButtonProps[\"className\"];\n    };\n    messages: {\n        title: string;\n        inputPlaceholder: string;\n        noTokens: string;\n        manageLists: string;\n    };\n    dataTestIds?: {\n        textInput?: string;\n        option?: string;\n        manageListButton?: string;\n    };\n}\n\nexport const Search = ({\n    onDismiss,\n    tokens,\n    searchQuery,\n    fixedListRef,\n    loadingBalances,\n    onSearchQueryChange,\n    loading,\n    onSelectedTokenChange,\n    selectedToken,\n    lists,\n    ipfsGatewayURL,\n    onManageLists,\n    className,\n    messages,\n    dataTestIds,\n}: SearchProps) => {\n    const handleSelect = useCallback(\n        (index: number) => {\n            const selectedToken = tokens[index];\n            if (onSelectedTokenChange) onSelectedTokenChange(selectedToken);\n            if (onDismiss) onDismiss();\n        },\n        [onDismiss, onSelectedTokenChange, tokens],\n    );\n\n    return (\n        <div\n            className={rootStyles({\n                className: className?.root,\n            })}\n        >\n            <div\n                className={headerStyles({\n                    className: className?.header,\n                })}\n            >\n                <Typography variant=\"h4\" className={className?.title}>\n                    {messages.title}\n                </Typography>\n                <X\n                    className={iconStyles({ className: className?.closeIcon })}\n                    onClick={onDismiss}\n                />\n            </div>\n            <Divider className={className?.divider} />\n            <div\n                className={inputContainerStyles({\n                    className: className?.inputWrapper,\n                })}\n            >\n                <TextInput\n                    data-testid={dataTestIds?.textInput}\n                    id=\"token-search\"\n                    disabled={loading}\n                    placeholder={messages.inputPlaceholder}\n                    value={searchQuery}\n                    onChange={onSearchQueryChange}\n                    className={{\n                        ...className?.input,\n                        input: `cui-w-full ${className?.input?.input}`,\n                        inputWrapper: `cui-w-full ${className?.input?.inputWrapper}`,\n                    }}\n                />\n            </div>\n            <Divider className={className?.divider} />\n            <div\n                className={listWrapperStyles({\n                    empty: !loading && tokens.length === 0,\n                    className: className?.listWrapper,\n                })}\n            >\n                {loading || tokens.length > 0 ? (\n                    <AutoSizer>\n                        {({ height, width }) => {\n                            return (\n                                <FixedSizeList\n                                    ref={fixedListRef}\n                                    height={height || 0}\n                                    width={width || 0}\n                                    itemCount={loading ? 10 : tokens.length}\n                                    itemData={\n                                        loading\n                                            ? new Array(10).fill(null)\n                                            : tokens\n                                    }\n                                    itemSize={72}\n                                    className={listStyles({\n                                        className: className?.list,\n                                    })}\n                                >\n                                    {({ index, style }) => {\n                                        const token: TokenInfoWithBalance =\n                                            tokens[index];\n                                        return (\n                                            <Row\n                                                data-testid={\n                                                    dataTestIds?.option &&\n                                                    `${dataTestIds.option}-${token.symbol}`\n                                                }\n                                                index={index}\n                                                style={style}\n                                                selected={tokenInfoWithBalanceEquals(\n                                                    selectedToken,\n                                                    token,\n                                                )}\n                                                loading={loading}\n                                                loadingBalances={\n                                                    loadingBalances\n                                                }\n                                                onSelect={handleSelect}\n                                                ipfsGatewayURL={ipfsGatewayURL}\n                                                className={className?.listItem}\n                                                {...token}\n                                            />\n                                        );\n                                    }}\n                                </FixedSizeList>\n                            );\n                        }}\n                    </AutoSizer>\n                ) : (\n                    <Typography>{messages.noTokens}</Typography>\n                )}\n            </div>\n            {!!lists && lists.length > 0 && (\n                <>\n                    <Divider className={className?.divider} />\n                    <div className=\"cui-p-3\">\n                        <Button\n                            data-testid={dataTestIds?.manageListButton}\n                            loading={loading}\n                            className={{\n                                ...className?.manageListsButton,\n                                root: `cui-w-full ${className?.manageListsButton?.root}`,\n                            }}\n                            onClick={onManageLists}\n                        >\n                            {messages.manageLists}\n                        </Button>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["mergedCva","useCallback","selectedToken","Typography","X","Divider","TextInput","AutoSizer","FixedSizeList","Row","tokenInfoWithBalanceEquals","Button"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,aAAaA,oBAAU,CAAA;AAAA,EACzB,UAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,YAAA;AAAA,EACA,sBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACJ,CAAC,CAAA,CAAA;AAED,MAAM,eAAeA,oBAAU,CAAA;AAAA,EAC3B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,qBAAA;AAAA,EACA,kBAAA;AACJ,CAAC,CAAA,CAAA;AAED,MAAM,oBAAuB,GAAAA,oBAAA,CAAU,CAAC,SAAS,CAAC,CAAA,CAAA;AAElD,MAAM,UAAa,GAAAA,oBAAA,CAAU,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAEnD,MAAM,iBAAoB,GAAAA,oBAAA;AAAA,EACtB,CAAC,YAAc,EAAA,UAAA,EAAY,qBAAqB,CAAA;AAAA,EAChD;AAAA,IACI,QAAU,EAAA;AAAA,MACN,KAAO,EAAA;AAAA,QACH,IAAM,EAAA,CAAC,UAAY,EAAA,oBAAA,EAAsB,kBAAkB,CAAA;AAAA,OAC/D;AAAA,KACJ;AAAA,GACJ;AACJ,CAAA,CAAA;AAEA,MAAM,UAAa,GAAAA,oBAAA,CAAU,CAAC,eAAe,CAAC,CAAA,CAAA;AA2CvC,MAAM,SAAS,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AACJ,CAAmB,KAAA;AACf,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACjB,CAAC,KAAkB,KAAA;AACf,MAAMC,MAAAA,cAAAA,GAAgB,OAAO,KAAK,CAAA,CAAA;AAClC,MAAI,IAAA,qBAAA;AAAuB,QAAA,qBAAA,CAAsBA,cAAa,CAAA,CAAA;AAC9D,MAAI,IAAA,SAAA;AAAW,QAAU,SAAA,EAAA,CAAA;AAAA,KAC7B;AAAA,IACA,CAAC,SAAW,EAAA,qBAAA,EAAuB,MAAM,CAAA;AAAA,GAC7C,CAAA;AAEA,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,WAAW,UAAW,CAAA;AAAA,QAClB,WAAW,SAAW,EAAA,IAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,oBAED,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,WAAW,YAAa,CAAA;AAAA,UACpB,WAAW,SAAW,EAAA,MAAA;AAAA,SACzB,CAAA;AAAA,OAAA;AAAA,sBAED,KAAA,CAAA,aAAA,CAACC,yBAAW,OAAQ,EAAA,IAAA,EAAK,WAAW,SAAW,EAAA,KAAA,EAAA,EAC1C,SAAS,KACd,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAACC,CAAA;AAAA,QAAA;AAAA,UACG,WAAW,UAAW,CAAA,EAAE,SAAW,EAAA,SAAA,EAAW,WAAW,CAAA;AAAA,UACzD,OAAS,EAAA,SAAA;AAAA,SAAA;AAAA,OACb;AAAA,KACJ;AAAA,oBACC,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA,EAAQ,SAAW,EAAA,SAAA,EAAW,OAAS,EAAA,CAAA;AAAA,oBACxC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,WAAW,oBAAqB,CAAA;AAAA,UAC5B,WAAW,SAAW,EAAA,YAAA;AAAA,SACzB,CAAA;AAAA,OAAA;AAAA,sBAED,KAAA,CAAA,aAAA;AAAA,QAACC,mBAAA;AAAA,QAAA;AAAA,UACG,eAAa,WAAa,EAAA,SAAA;AAAA,UAC1B,EAAG,EAAA,cAAA;AAAA,UACH,QAAU,EAAA,OAAA;AAAA,UACV,aAAa,QAAS,CAAA,gBAAA;AAAA,UACtB,KAAO,EAAA,WAAA;AAAA,UACP,QAAU,EAAA,mBAAA;AAAA,UACV,SAAW,EAAA;AAAA,YACP,GAAG,SAAW,EAAA,KAAA;AAAA,YACd,KAAO,EAAA,CAAA,WAAA,EAAc,SAAW,EAAA,KAAA,EAAO,KAAK,CAAA,CAAA;AAAA,YAC5C,YAAc,EAAA,CAAA,WAAA,EAAc,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA,CAAA;AAAA,WAC9D;AAAA,SAAA;AAAA,OACJ;AAAA,KACJ;AAAA,oBACC,KAAA,CAAA,aAAA,CAAAD,aAAA,EAAA,EAAQ,SAAW,EAAA,SAAA,EAAW,OAAS,EAAA,CAAA;AAAA,oBACxC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,WAAW,iBAAkB,CAAA;AAAA,UACzB,KAAO,EAAA,CAAC,OAAW,IAAA,MAAA,CAAO,MAAW,KAAA,CAAA;AAAA,UACrC,WAAW,SAAW,EAAA,WAAA;AAAA,SACzB,CAAA;AAAA,OAAA;AAAA,MAEA,OAAA,IAAW,MAAO,CAAA,MAAA,GAAS,CACxB,mBAAA,KAAA,CAAA,aAAA,CAACE,qCACI,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACpB,QACI,uBAAA,KAAA,CAAA,aAAA;AAAA,UAACC,uBAAA;AAAA,UAAA;AAAA,YACG,GAAK,EAAA,YAAA;AAAA,YACL,QAAQ,MAAU,IAAA,CAAA;AAAA,YAClB,OAAO,KAAS,IAAA,CAAA;AAAA,YAChB,SAAA,EAAW,OAAU,GAAA,EAAA,GAAK,MAAO,CAAA,MAAA;AAAA,YACjC,QAAA,EACI,UACM,IAAI,KAAA,CAAM,EAAE,CAAE,CAAA,IAAA,CAAK,IAAI,CACvB,GAAA,MAAA;AAAA,YAEV,QAAU,EAAA,EAAA;AAAA,YACV,WAAW,UAAW,CAAA;AAAA,cAClB,WAAW,SAAW,EAAA,IAAA;AAAA,aACzB,CAAA;AAAA,WAAA;AAAA,UAEA,CAAC,EAAE,KAAO,EAAA,KAAA,EAAY,KAAA;AACnB,YAAM,MAAA,KAAA,GACF,OAAO,KAAK,CAAA,CAAA;AAChB,YACI,uBAAA,KAAA,CAAA,aAAA;AAAA,cAACC,WAAA;AAAA,cAAA;AAAA,gBACG,aAAA,EACI,aAAa,MACb,IAAA,CAAA,EAAG,YAAY,MAAM,CAAA,CAAA,EAAI,MAAM,MAAM,CAAA,CAAA;AAAA,gBAEzC,KAAA;AAAA,gBACA,KAAA;AAAA,gBACA,QAAU,EAAAC,gCAAA;AAAA,kBACN,aAAA;AAAA,kBACA,KAAA;AAAA,iBACJ;AAAA,gBACA,OAAA;AAAA,gBACA,eAAA;AAAA,gBAGA,QAAU,EAAA,YAAA;AAAA,gBACV,cAAA;AAAA,gBACA,WAAW,SAAW,EAAA,QAAA;AAAA,gBACrB,GAAG,KAAA;AAAA,eAAA;AAAA,aACR,CAAA;AAAA,WAER;AAAA,SACJ,CAAA;AAAA,OAGZ,CAAA,mBAEC,KAAA,CAAA,aAAA,CAAAP,qBAAA,EAAA,IAAA,EAAY,SAAS,QAAS,CAAA;AAAA,KAEvC;AAAA,IACC,CAAC,CAAC,KAAA,IAAS,KAAM,CAAA,MAAA,GAAS,qBAEnB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACE,aAAQ,EAAA,EAAA,SAAA,EAAW,WAAW,OAAS,EAAA,CAAA,kBACvC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAU,SACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACM,aAAA;AAAA,MAAA;AAAA,QACG,eAAa,WAAa,EAAA,gBAAA;AAAA,QAC1B,OAAA;AAAA,QACA,SAAW,EAAA;AAAA,UACP,GAAG,SAAW,EAAA,iBAAA;AAAA,UACd,IAAM,EAAA,CAAA,WAAA,EAAc,SAAW,EAAA,iBAAA,EAAmB,IAAI,CAAA,CAAA;AAAA,SAC1D;AAAA,QACA,OAAS,EAAA,aAAA;AAAA,OAAA;AAAA,MAER,QAAS,CAAA,WAAA;AAAA,KAElB,CACJ,CAAA;AAAA,GAER,CAAA;AAER;;;;"}