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

Mojito secondary market is the platform to purchase NFT.

import{jsx as e,jsxs as i,Fragment as o}from"react/jsx-runtime";import{useMemo as t}from"react";import r from"@mui/material/Stack";import n from"@mui/material/Tooltip";import l from"@mui/material/Divider";import a from"@mui/material/Grid";import m from"@mui/material/Button";import s from"@mui/material/Typography";import c from"@mui/material/Box";import d from"@mui/material/Modal";import{useTheme as u}from"@mui/material/styles";import p from"@mui/icons-material/InfoOutlined";import g from"@mui/material/Checkbox";import h from"moment";import f from"../component/MediaContentContainer.js";import x from"../component/FeeContainer.js";import v from"../component/InputDropdownContainer.js";import C from"../component/DropDownContainer.js";import y from"../component/TotalOfferPriceContainer.js";import b from"../component/ToastContainer.js";import w from"../component/TermsAndConditionContainer.js";import"@mui/icons-material/ContentCopy";import"@mui/icons-material/KeyboardArrowDown";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{ToastTypeProps as k,Currency as S}from"../interface/index.js";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 T from"../loader/BuyNowLoader.js";import"@mui/material/Skeleton";import"@mui/material/CardActions";import"@mui/material/Card";import"@mui/material/CardContent";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"../component/VideoWithImageCard.js";import"html-react-parser";import"@mui/icons-material/Twitter";import"@mui/icons-material/MoreVert";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 I from"../component/ErrorContainer.js";import"../_virtual/_tslib.js";import"@mui/material/Tab";import"@mui/material/Tabs";import"@mui/material/Menu";import"@mui/material/ListItem";import"@mui/material/List";import"@mui/icons-material/Close";import"@mui/material/MenuItem";import"@mui/material/ListItemText";import"@mui/icons-material/CheckRounded";import"@mui/icons-material/FiberManualRecord";import"@mui/icons-material/Refresh";import"../component/RenderIf.js";import"@mui/icons-material/AccountBalanceWallet";import O from"../component/BreadCrumbsComponent.js";import{numberOfDays as P}from"../utils/getNumberOfDays.utils.js";import R from"../component/OfferPriceContainer.js";const D=({open:D,image:M,breadCrumbs:j,selectedBreadCrumbs:B,error:W,progress:z,tokenDetails:A,currencyData:L,price:N,durationList:Y,duration:E,listPricePercentage:F,totalPrice:U,termsCheck:H,policyCheck:V,offerExpires:$,validateTerms:_,validateMakeOffer:G,symbol:K,currencyList:X,isCancelOffer:Q,isValidMakeOffer:q,walletConnection:J,isLoading:Z,termsURL:ee,conditionOfBusinessURL:ie,maxLength:oe,fiatCurrency:te=S.USD,walletType:re,contractProgressMessage:ne,buyNowPrice:le,mediaCardAttributes:ae,onChangeTermsAndCondition:me,onChangePolicy:se,onChangeDuration:ce,onChangePrice:de,onClickMakeOffer:ue,onClickSwap:pe,onClickSwitchNetwork:ge,onCloseModal:he,onClickConnectWallet:fe})=>{var xe,ve,Ce,ye,be,we,ke,Se,Te,Ie,Oe,Pe,Re,De,Me,je,Be,We,ze,Ae,Le,Ne,Ye,Ee,Fe,Ue,He,Ve,$e,_e,Ge,Ke,Xe,Qe,qe,Je,Ze,ei;const ii=u(),oi=t((()=>"ethereum"===re),[re]),ti=t((()=>"solana"===re),[re]),ri=t((()=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:{xs:"90%",md:"700px"},bgcolor:ii.palette.grey[50],borderRadius:"8px",boxShadow:24,maxHeight:{xs:"calc(100% - 50px)",lg:"calc(100% - 100px)"},overflowY:"auto",padding:"16px 16px 30px 16px"})),[ii]),ni=t((()=>z.loading?"Processing Offer":W?"Retry":z.success?"View Item":Q?"Cancel Offer":"Submit Offer"),[W,z,Q]),li=t((()=>q&&!z.success?{message:Q?"Cannot able to cancel offer for this item!":q,status:k.ERROR}:z.loading?{message:ne||"Follow wallet instruction to approve. Please do not close or reload the page...",status:k.WARNING}:Q&&z.success?{message:"This offer has been cancelled",status:k.WARNING}:z.success?{message:`Offer submitted! Keep ${N} ${L} available until expiry to secure it. The item will be delivered once accepted.`,status:k.SUCCESS}:W?{message:W,status:k.ERROR}:!Q||z.loading||z.success?{message:"",status:k.SUCCESS_WITHOUT_ICON}:{message:"Clicking on ‘Cancel Offer’ will remove your offer for this item.",status:k.WARNING}),[q,z.success,z.loading,Q,W,ne,N,L]),ai=t((()=>{if(oi){if("MATIC"===K||"WMATIC"===K)return M.maticIcon;if("WETH"===K)return M.nonNativeCurrencyIcon}return ti?M.nonNativeCurrencyIcon:M.nativeCurrencyIcon}),[K,M,oi,ti]);return e(d,{open:D,children:e(c,{sx:ri,children:Z?e(T,{}):i(o,{children:[e(c,{sx:{display:"flex",justifyContent:"center",alignItems:"center",marginBottom:"16px"},children:e("img",{src:M.logo,style:{width:"100%",height:"50px",objectFit:"contain"},alt:"logo"})}),e(c,{sx:{marginBottom:"16px",marginX:{xs:"16px",lg:0}},children:e(O,{"data-testid":"onClick_bread_crumbs",list:j||[],selectedValue:B||"",itemHighlightedStyle:{fontSize:"12px",fontWeight:"500",color:ii.palette.background.default},itemStyle:{fontSize:"12px",fontWeight:"500",color:ii.palette.grey[500]}})}),e(c,{sx:{marginBottom:"30px",marginX:{xs:"16px",lg:0}},children:i(a,{container:!0,spacing:2,children:[e(a,{item:!0,xs:12,sm:12,md:12,lg:6,xl:6,children:e(f,{title:A.tokenName,url:"thumbnail-only"!==(null==ae?void 0:ae.thumbnailFrame)&&"custom"!==(null==ae?void 0:ae.thumbnailFrame)&&(null==A?void 0:A.thumbnail)||(null==A?void 0:A.tokenImage),videoAttributes:ae,subTitle:A.tokenArtistName,placeholderImage:M.placeHolderImage,height:"350px"})}),e(a,{item:!0,xs:12,sm:12,md:12,lg:6,xl:6,children:i(o,"Confirmation"===B||Q?{children:[(null!==(xe=null==le?void 0:le.length)&&void 0!==xe?xe:0)>0&&i(o,{children:[i(r,{sx:{marginBottom:"16px"},flexDirection:"row",justifyContent:"space-between",alignItems:"center",children:[e(s,{sx:{fontSize:"14px"},variant:"h2",children:"Listed Price"}),i(r,{justifyContent:"end",alignItems:"end",children:[i(s,{sx:{fontSize:"14px"},variant:"h2",children:[null===(ve=null==le?void 0:le[1])||void 0===ve?void 0:ve.value," ",null===(Ce=null==le?void 0:le[1])||void 0===Ce?void 0:Ce.unit]})," ",i(s,{sx:{fontSize:"12px",color:ii.palette.grey[500]},variant:"body1",children:["≈ ",null===(ye=null==le?void 0:le[0])||void 0===ye?void 0:ye.value," ",null===(be=null==le?void 0:le[0])||void 0===be?void 0:be.unit]})]})]}),e(l,{sx:{marginY:"16px",borderColor:null===(Se=null===(ke=null===(we=ii.palette)||void 0===we?void 0:we.appDefaultColor)||void 0===ke?void 0:ke.secondary)||void 0===Se?void 0:Se.light}})]}),e(x,{title:"Offer Price",usdPrice:`${String(U.usd||0)} ${te}`,cryptoPrice:String(U.crypto),ethIcon:ai,totalPriceFontSize:14,isTotalPrice:!0}),e(l,{sx:{marginY:"16px",borderColor:null===(Oe=null===(Ie=null===(Te=ii.palette)||void 0===Te?void 0:Te.appDefaultColor)||void 0===Ie?void 0:Ie.secondary)||void 0===Oe?void 0:Oe.light}}),i(c,{children:[i(r,{direction:"row",sx:{marginBottom:"5px"},children:[e(s,{sx:{marginRight:"5px",fontSize:"14px",fontWeight:500},children:"Expires on"}),e(n,{placement:"top-start",title:"When this offer ends",arrow:!0,children:e(p,{style:{color:null===(Re=null===(Pe=null==ii?void 0:ii.palette)||void 0===Pe?void 0:Pe.grey)||void 0===Re?void 0:Re[500],fontSize:"18px"}})})]}),i(s,{sx:{fontSize:"12px",fontWeight:500},children:[h($).format("MMMM DD, YYYY - hh:mm A")," your time"]})]}),e(l,{sx:{marginY:"10px",borderColor:null===(je=null===(Me=null===(De=ii.palette)||void 0===De?void 0:De.appDefaultColor)||void 0===Me?void 0:Me.secondary)||void 0===je?void 0:je.light}}),e(c,{sx:{marginBottom:"24px"},children:e(y,{ethIcon:ai,listPrice:F,priceUSD:U.usd||0,wethValue:U.crypto,fiatCurrency:te,toolTipTitle:"How much you will pay"})}),G.networkCheck&&!z.loading&&!z.success&&e(I,{title:"Please switch to",subTitle:"Network in order to complete checkout",message:G.message,onClick:ge}),(z.loading||z.success||W||q&&!z.success||Q&&!z.loading&&!z.success)&&!G.message&&e(b,{message:li.message,status:li.status})]}:{children:[(null!==(Be=null==le?void 0:le.length)&&void 0!==Be?Be:0)>0&&i(r,{sx:{marginBottom:"16px"},flexDirection:"row",justifyContent:"space-between",alignItems:"center",children:[e(s,{sx:{fontSize:"14px"},variant:"h2",children:"Listed Price"}),i(r,{justifyContent:"end",alignItems:"end",children:[i(s,{sx:{fontSize:"14px"},variant:"h2",children:[null===(We=null==le?void 0:le[1])||void 0===We?void 0:We.value," ",null===(ze=null==le?void 0:le[1])||void 0===ze?void 0:ze.unit]})," ",i(s,{sx:{fontSize:"12px",color:ii.palette.grey[500]},variant:"body1",children:["≈ ",null===(Ae=null==le?void 0:le[0])||void 0===Ae?void 0:Ae.value," ",null===(Le=null==le?void 0:le[0])||void 0===Le?void 0:Le.unit]})]})]}),i(c,{sx:{marginBottom:"16px"},children:[e(v,{ethIcon:ai,isDropdown:!1,title:"OFFER PRICE",currencyData:L,price:N,currencyList:X,maxLength:oe,onChangePrice:de,hideBorder:!1}),i(s,{sx:{fontSize:"12px",fontWeight:400,color:null===(Ye=null===(Ne=ii.palette)||void 0===Ne?void 0:Ne.grey)||void 0===Ye?void 0:Ye[600],marginTop:"5px"},children:["≈ ",U.usd||0," ",te]})]}),i(c,{sx:{marginBottom:"10px"},children:[i(c,{sx:{border:`1px solid ${null===(Fe=null===(Ee=ii.palette)||void 0===Ee?void 0:Ee.grey)||void 0===Fe?void 0:Fe[600]}`,borderRadius:"5px",position:"relative"},children:[e(s,{sx:{paddingLeft:"12px",paddingTop:"10px",textTransform:"uppercase",fontSize:"10px"},children:"Duration"}),e(C,{menu:Y,title:"",selectedValue:E,onChangeValue:ce,isMakeOfferModal:!0})]}),i(s,{sx:{fontSize:"12px",fontWeight:400,color:null===(He=null===(Ue=ii.palette)||void 0===Ue?void 0:Ue.grey)||void 0===He?void 0:He[100],marginTop:"5px"},children:["Offer expires ",h(h()).add(P(E),"days").format("MMMM DD, YYYY - hh:mm A")," your time"]})]}),e(R,{totalprice:U.usd||0,currency:te,wethValue:U.crypto}),e(y,{ethIcon:ai,listPrice:F,priceUSD:U.usd||0,wethValue:U.crypto,fiatCurrency:te,toolTipTitle:"How much you will pay"}),e(l,{sx:{marginY:"10px",borderColor:null===(_e=null===($e=null===(Ve=ii.palette)||void 0===Ve?void 0:Ve.appDefaultColor)||void 0===$e?void 0:$e.secondary)||void 0===_e?void 0:_e.light}}),e(w,{checked:H,termURL:ee,conditionOfBusinessURL:ie,error:null==_?void 0:_.terms,handleTermsAndCondition:me}),i(c,{sx:{marginY:"10px"},children:[i(c,{sx:{display:"flex",flexDirection:"row",alignItems:"center",marginLeft:"-4px"},children:[e(g,{sx:{padding:"0px",marginRight:"10px",transform:"scale(0.8)"},checked:V,onChange:se,inputProps:{"aria-label":"controlled"}}),e(s,{sx:{fontSize:"10px",fontWeight:"500"},children:`I acknowledge that I am signing approval for ${N} ${K} to be subtracted from my wallet when my offer is accepted.`})]}),(null==_?void 0:_.conditions)&&e(s,{style:{color:null===(Ke=null===(Ge=null==ii?void 0:ii.palette)||void 0===Ge?void 0:Ge.toastError)||void 0===Ke?void 0:Ke[500],fontSize:"12px",fontWeight:"400"},children:"You must agree to be able to continue"})]}),!G.networkCheck||z.loading||z.success?!G.isSwap||z.loading||z.success?J?e(I,{title:"Please",subTitle:"to complete process",message:"connect your wallet",onClick:fe}):G.balanceCheck&&!z.loading&&!z.success||q&&!z.success?e(b,{message:q||G.message,status:k.ERROR}):e(o,{}):i(s,{sx:{fontSize:"12px",fontWeight:"400",color:null===(Qe=null===(Xe=null==ii?void 0:ii.palette)||void 0===Xe?void 0:Xe.toastError)||void 0===Qe?void 0:Qe[300],display:"inline"},children:["Your connected wallet does not have enough ",G.message," ",K," to complete your transaction."," ",e(s,{onClick:()=>pe(G.message),sx:{fontSize:"12px",fontWeight:"400",color:null===(Je=null===(qe=null==ii?void 0:ii.palette)||void 0===qe?void 0:qe.primary)||void 0===Je?void 0:Je.main,textDecorationLine:"underline",display:"inline",cursor:"pointer"},children:"Click here to swap"})]}):e(I,{title:"Please switch to",subTitle:"Network in order to complete checkout",message:G.message,onClick:ge})]})})]})}),i(r,{direction:"column",sx:{justifyContent:"center",alignItems:"center",marginX:{xs:"16px",lg:0}},children:[e(m,{startIcon:z.loading&&e("img",{src:M.loader,style:{width:"20px",height:"20px",objectFit:"contain",animation:"rotate 2s linear infinite"},alt:"loader"}),disabled:z.loading||G.balanceCheck&&!Q||(null==q?void 0:q.length)>0&&!z.success||Boolean(G.message),onClick:()=>ue(ni),sx:{width:{xs:"100%",lg:"70%"},marginBottom:"25px",height:"50px","&.Mui-disabled":{backgroundColor:ii.palette.primary.main,color:null===(ei=null===(Ze=ii.palette.appDefaultColor)||void 0===Ze?void 0:Ze.secondary)||void 0===ei?void 0:ei.dark,opacity:.7,cursor:"not-allowed",pointerEvents:"all"}},children:ni}),e(s,{onClick:he,sx:{cursor:z.loading?"not-allowed":"pointer",fontWeight:"500",color:ii.palette.primary.main,textTransform:"uppercase"},children:z.success?"Back To Marketplace":"Cancel"})]})]})})})};export{D as default};