@mojito-inc/secondary-market/esm/layout/TokensListLayout.js

Mojito secondary market is the platform to purchase NFT.

import{jsxs as i,jsx as t}from"react/jsx-runtime";import{useMemo as e}from"react";import o from"@mui/material/TextField";import r from"@mui/material/InputAdornment";import l from"@mui/material/Grid";import a from"@mui/material/Box";import m from"@mui/icons-material/Search";import{useTheme as n}from"@mui/material/styles";import u from"@mui/material/Typography";import d from"@mui/icons-material/FilterList";import p from"@mui/material/Skeleton";import"html-react-parser";import"../component/VideoWithImageCard.js";import"@mui/material/Divider";import"@mui/material/Tooltip";import"@mui/icons-material/InfoOutlined";import"@mui/icons-material/KeyboardArrowDown";import"@mui/material/Select";import"@mui/material/MenuItem";import s from"../component/DropDownContainer.js";import"@mui/material/Stack";import"../interface/index.js";import"@mui/icons-material/Warning";import"@mui/icons-material/CheckCircleOutline";import"@mui/icons-material/ErrorOutline";import"@mui/material/Checkbox";import"@mui/material/Button";import"@mui/icons-material/ContentCopy";import"@mui/icons-material/KeyboardArrowUp";import"@mui/icons-material/HelpOutline";import"@mui/material/IconButton";import"@mui/icons-material/FavoriteBorder";import"@mui/icons-material/Favorite";import"@mui/icons-material/FileCopyOutlined";import"moment";import"@mui/material/Pagination";import"@mui/material/PaginationItem";import"@mui/material";import"@mui/material/Table";import"@mui/material/TableCell";import"@mui/material/TableHead";import"@mui/material/TableBody";import"@mui/material/TableRow";import"@mui/material/TableContainer";import"@mui/icons-material/OpenInNew";import c from"../loader/TokenCardLoader.js";import"@mui/material/Card";import"@mui/material/CardContent";import"@mui/material/CardActions";import"@mui/icons-material/RemoveCircleOutline";import"@mui/icons-material/SellOutlined";import"@mui/icons-material/AttachMoneyOutlined";import"@mui/icons-material/Send";import"@mui/icons-material/NewReleases";import"@mui/icons-material/CancelScheduleSend";import"@mui/icons-material/HourglassDisabledOutlined";import"@mui/icons-material/CallMissedOutlined";import"@mui/icons-material/MoveToInboxOutlined";import"@mui/icons-material/CheckCircleOutlineOutlined";import"@mui/icons-material/BorderColorOutlined";import"@mui/icons-material/Twitter";import h from"../component/TokenCard.js";import"../constant/index.js";import"@mui/material/useMediaQuery";import"@mui/material/CircularProgress";import"react-player";import"@mui/icons-material/Pause";import"@mui/icons-material/PlayArrow";import"../_virtual/_tslib.js";import"@mui/material/Tab";import"@mui/material/Tabs";import"@mui/material/Menu";import"@mui/material/Modal";import"@mui/material/ListItem";import"@mui/material/List";import"@mui/icons-material/Close";import"@mui/material/ListItemText";import"@mui/icons-material/CheckRounded";import"@mui/icons-material/FiberManualRecord";import"@mui/icons-material/Refresh";import"../component/RenderIf.js";import v from"../component/NoDataContainer.js";import"@mui/icons-material/AccountBalanceWallet";import"@mui/material/Breadcrumbs";import"@mui/icons-material/ArrowForward";import g from"../component/filters/index.js";import{useFilterData as x}from"../provider/CollectionFilterProvider.js";import C from"../component/CollectionListDropDown.js";const f=({tokensData:f,tokensFilterValue:w,tokensFilterOptions:y,collectionsLoading:b=!1,search:k,showFilter:S=!1,showAttributeFilters:I,traitsData:F,cardLoaderBg:T,cardSkeletonBg:B,placeHolderImage:D,onChangeFilter:O,onChangeSearch:A,onClickTokenButton:j,onClickCard:L,setShowFilter:M,onChangeCollectionFilter:P,searchPlaceholderText:R,videoAttributes:z,showFilterLoader:V})=>{var H,N,W,K,_,E;const{selectedCollection:G,collectionsOptions:Q,currencyType:U,clearTraitsFilter:q}=x(),J=n(),X=e((()=>{var i,t,e;return null!==(t=null===(i=null==Q?void 0:Q.filter((i=>{var t;return(null===(t=i.value)||void 0===t?void 0:t.toLowerCase())===(null==G?void 0:G.toLowerCase())}))[0])||void 0===i?void 0:i.label)&&void 0!==t?t:null===(e=Q[0])||void 0===e?void 0:e.label}),[Q,G]),Y=e((()=>{var i;return I&&(null!==(i=null==F?void 0:F.length)&&void 0!==i?i:0)>0}),[I,F]);return i(a,{sx:{position:"relative"},children:[(b||null===f)&&V?t(p,{variant:"rectangular",animation:"wave",height:40,sx:{borderRadius:"4px",marginBottom:"32px",backgroundColor:null===(N=null===(H=J.palette.appDefaultColor)||void 0===H?void 0:H.secondary)||void 0===N?void 0:N.light}}):i(l,{container:!0,columnSpacing:1,rowSpacing:{xs:2,sm:2},sx:{marginBottom:"32px",position:"relative",zIndex:50},children:[Y&&t(l,{item:!0,xs:2,md:2,children:i(a,{onClick:()=>M(!S),sx:{width:"100%",height:"41px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:null===(K=null===(W=J.palette.appDefaultColor)||void 0===W?void 0:W.secondary)||void 0===K?void 0:K.light,borderRadius:"4px",cursor:"pointer"},children:[t(d,{sx:{fontSize:"20px"}}),t(u,{sx:{display:{xs:"none",md:"block"},fontSize:"16px",marginLeft:"8px"},children:"Filter"})]})}),t(l,{item:!0,xs:Y?8:10,md:Y?(null==Q?void 0:Q.length)>1?6:8:(null==Q?void 0:Q.length)>1?8:10,lg:Y?(null==Q?void 0:Q.length)>1?6:8:(null==Q?void 0:Q.length)>1?8:10,xl:Y?(null==Q?void 0:Q.length)>1?6:8:(null==Q?void 0:Q.length)>1?8:10,sx:{width:"auto !important"},children:t(o,{placeholder:null!=R?R:"Search...",sx:{width:"100%","& .MuiInputBase-input::placeholder":{fontSize:"14px"},"& fieldset":{border:"none"}},"data-testid":"list-search-text-field",value:k,onChange:A,autoComplete:"off",InputProps:{inputProps:{style:{padding:"0px",paddingBottom:"0px",fontSize:"14px",height:"40px",display:"flex",alignItems:"center",justifyContent:"center"}},startAdornment:t(r,{position:"start",children:t(m,{sx:{fontSize:"20px",color:null===(_=null==J?void 0:J.palette)||void 0===_?void 0:_.grey[500]}})})}})}),t(l,{item:!0,xs:2,md:(null==Q?void 0:Q.length)>1?1:2,xl:2,children:t(s,{"data-testid":"list-filter-dropdown",menu:y,onChangeValue:O,selectedValue:w,title:""})}),(null==Q?void 0:Q.length)>1&&t(l,{item:!0,xs:12,sm:12,md:3,lg:3,xl:2,children:t(C,{"data-testid":"collection-list-filter-dropdown",menu:Q,onChangeValue:P,selectedValue:X,title:""})})]}),i(a,{sx:{display:"flex",flexDirection:{xs:"column",sm:"row"},gap:"16px",alignItems:"flex-start",position:"relative"},children:[I&&S&&F&&t(g,{filtersData:F,showFilter:S,onClearFilter:q},G),t(a,{sx:{display:"flex",flexDirection:"column",width:"100%"},children:b||null===f?t(l,{container:!0,columnSpacing:2,rowSpacing:8,children:Array.from(Array(8).keys()).map((i=>t(l,{item:!0,md:S?6:4,sm:S?12:6,xs:12,lg:S?4:3,children:t(c,{cardLoaderBg:T,cardSkeletonBg:B})},i)))}):(null!==(E=null==f?void 0:f.length)&&void 0!==E?E:0)>0?t(l,{container:!0,columnSpacing:2,rowSpacing:8,children:null==f?void 0:f.map(((i,e)=>t(l,{item:!0,md:S?6:4,sm:S?12:6,xs:12,lg:S?4:3,children:t(h,{walletMediaConfig:{videoAttributes:z},cardDetail:i.cardDetail,placeholderImage:D,currency:U,onClickButton:()=>j(i),onClickCard:L?()=>{var t;return null==L?void 0:L({id:null==i?void 0:i.id,tokenId:null!==(t=null==i?void 0:i.tokenId)&&void 0!==t?t:"0",contractAddress:null==i?void 0:i.contractAddress})}:void 0})},null==e?void 0:e.toString())))}):t(v,{})})]})]})};export{f as default};