@mojito-inc/secondary-market/esm/component/TokenCard.js

Mojito secondary market is the platform to purchase NFT.

import{jsxs as i,jsx as o}from"react/jsx-runtime";import{useCallback as t}from"react";import l from"@mui/material/Stack";import e from"@mui/material/CardContent";import n from"@mui/material/IconButton";import r from"@mui/material/Card";import a from"@mui/material/Button";import d from"@mui/material/Typography";import u from"@mui/material/Box";import{useTheme as m}from"@mui/material/styles";import p from"@mui/icons-material/MoreVert";import v from"@mui/material/CardActions";import{ListingType as s}from"../constant/index.js";import{formatNumberWithCommas as c}from"../utils/formatNumberWithCommas.js";import{formatUsdAndEuroCurrency as x}from"../utils/usdAndEuroCurrencyFormat.js";import h from"./VideoWithImageCard.js";const f=({listingType:f,cardDetail:g,showMenu:b,placeholderImage:y,walletMediaConfig:C,currency:k="USD",isShowSecondaryButton:I=!1,secondaryButtonLabel:L,onClickSecondaryButton:A,handleMenuOpen:S,onClickButton:B,onClickCard:j})=>{var N,T,W,w,z,M,F,$,O,D,E,R,_,U,X,P,V,Y,q;const G=m(),H=t((()=>{(null==g?void 0:g.buttonName)&&void 0!==j&&j()}),[null==g?void 0:g.buttonName,j]);return i(r,{sx:{boxShadow:"none",position:"relative",borderRadius:"12px"},children:[b&&o(n,{"aria-label":"options","aria-controls":"media-menu","aria-haspopup":"true",onClick:S,sx:{zIndex:1,position:"absolute",right:"16px",top:"16px",borderRadius:"50%",background:null===(N=null==G?void 0:G.palette)||void 0===N?void 0:N.iconColor,"&:hover":{background:null===(T=null==G?void 0:G.palette)||void 0===T?void 0:T.iconColor}},children:o(p,{sx:{color:null===(w=null===(W=null==G?void 0:G.palette)||void 0===W?void 0:W.text)||void 0===w?void 0:w.primary}})}),i(e,{onClick:H,sx:{padding:"0px !important",backgroundColor:G.palette.primary.dark,cursor:void 0!==j&&(null==g?void 0:g.buttonName)?"pointer":"default"},children:[o(h,{videoAttributes:Object.assign(Object.assign({},null==C?void 0:C.videoAttributes),{thumbnailFrame:null===(z=null==C?void 0:C.videoAttributes)||void 0===z?void 0:z.thumbnailFrame,customThumbnail:(null===(M=null==C?void 0:C.videoAttributes)||void 0===M?void 0:M.customThumbnail)||(null==g?void 0:g.thumbnailImage)||(null==g?void 0:g.placeholderImage)}),url:"thumbnail-only"!==(null===(F=null==C?void 0:C.videoAttributes)||void 0===F?void 0:F.thumbnailFrame)&&"custom"!==(null===($=null==C?void 0:C.videoAttributes)||void 0===$?void 0:$.thumbnailFrame)?(null==g?void 0:g.tokenImage)||(null==g?void 0:g.animationURL):(null==g?void 0:g.animationURL)||(null==g?void 0:g.tokenImage),placeholderImage:y,height:"300px"}),!(null==C?void 0:C.mediaOnly)&&i(u,{sx:{paddingY:"12px",paddingX:"8px"},children:[o(u,{height:"auto",children:o(d,{variant:"h3",sx:{fontSize:"24px",marginTop:"8px",marginBottom:"8px",overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:2},children:(null==g?void 0:g.tokenName)?null==g?void 0:g.tokenName:`# ${null==g?void 0:g.tokenId}`})}),i(l,{sx:f===(null==s?void 0:s.CLAIMABLE)?{height:"auto",justifyContent:"flex-end"}:{height:"auto",justifyContent:g.priceLabel?"space-between":"flex-end"},direction:"row",children:[g.priceLabel&&f!==(null==s?void 0:s.CLAIMABLE)&&i(u,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start"},children:[o(d,{sx:{fontSize:"10px",fontWeight:700,color:G.palette.grey[400],letterSpacing:"1.1px"},children:g.priceLabel}),o(d,{variant:"subtitle1",sx:{fontWeight:600,fontSize:"24px"},children:`${c(g.cryptoPrice)} ${g.cryptoLabel}`}),o(d,{sx:{fontWeight:500,fontSize:"12px",color:G.palette.grey[400]},children:`${x(g.usdPrice,k)} ${k}`})]}),o(u,{sx:{display:"flex",justifyContent:"flex-end",alignItems:"flex-end"},children:o(u,{sx:{height:"27px",backgroundColor:G.palette.grey[800],color:G.palette.grey[400],borderRadius:20,display:"flex",justifyContent:"center",alignItems:"center",paddingX:"10px"},children:o(d,{variant:"h6",sx:{fontWeight:700,fontSize:"12px"},children:g.collectionType})})})]})]})]}),(null==g?void 0:g.buttonName)&&i(v,{sx:{backgroundColor:G.palette.primary.dark,paddingY:f===(null==s?void 0:s.CLAIMABLE)?"0px":"12px",paddingX:"8px",paddingTop:0,display:"flex",flexDirection:"column"},children:[(null==g?void 0:g.buttonName)?o(a,{fullWidth:!0,"data-testid":"NFT_Card_btn",sx:{textTransform:"capitalize",color:null===(E=null===(D=null===(O=null==G?void 0:G.palette)||void 0===O?void 0:O.appDefaultColor)||void 0===D?void 0:D.secondary)||void 0===E?void 0:E.dark,border:`1px solid ${null===(_=null===(R=null==G?void 0:G.palette)||void 0===R?void 0:R.grey)||void 0===_?void 0:_[700]}`,background:null===(X=null===(U=null==G?void 0:G.palette)||void 0===U?void 0:U.primary)||void 0===X?void 0:X.main,fontSize:"14px",fontWeight:500},onClick:B,children:null==g?void 0:g.buttonName}):o(u,{height:f===(null==s?void 0:s.CLAIMABLE)?"auto":I&&L?"96px":"40px"}),(null==g?void 0:g.buttonName)&&I&&L&&A&&o(a,{fullWidth:!0,"data-testid":"NFT_Shipping_btn",variant:"outlined",sx:{textTransform:"uppercase",color:null===(V=null===(P=null==G?void 0:G.palette)||void 0===P?void 0:P.primary)||void 0===V?void 0:V.main,border:`1px solid ${null===(q=null===(Y=null==G?void 0:G.palette)||void 0===Y?void 0:Y.primary)||void 0===q?void 0:q.main}`,backgroundColor:"transparent",fontSize:"16px",fontWeight:500,marginLeft:"0px !important",marginTop:"16px"},onClick:A,children:L})]})]})};export{f as default};