From 79d0970da2a11af46ca8e709a2f9a613a6126b93 Mon Sep 17 00:00:00 2001 From: louisdevzz <vohuunhan1310@gmail.com> Date: Sun, 24 Mar 2024 05:35:36 +0700 Subject: [PATCH 1/4] Feat: update new ui nft details --- .../widget/Mintbase/App/NFTDetails/Index.jsx | 52 +++ .../Mintbase/App/NFTDetails/NFTMore.jsx | 237 ++++++++++++ .../Mintbase/App/NFTDetails/NFTShow.jsx | 358 ++++++++++++++++++ .../Mintbase/App/NFTDetails/NFTTable.jsx | 271 +++++++++++++ .../src/Mintbase/App/NFTDetails/Index.jsx | 52 +++ .../src/Mintbase/App/NFTDetails/NFTMore.jsx | 237 ++++++++++++ .../src/Mintbase/App/NFTDetails/NFTShow.jsx | 358 ++++++++++++++++++ .../src/Mintbase/App/NFTDetails/NFTTable.jsx | 271 +++++++++++++ 8 files changed, 1836 insertions(+) create mode 100644 apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx create mode 100644 apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx create mode 100644 apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx create mode 100644 apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx create mode 100644 build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx create mode 100644 build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx create mode 100644 build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx create mode 100644 build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx new file mode 100644 index 00000000..e35734d3 --- /dev/null +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx @@ -0,0 +1,52 @@ +const {isDarkModeOn} = props + +const Navbar = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background:${isDarkModeOn?"#282a3a":"#f6f5f4"}; + height:50px; + width:100%; + .container{ + display:flex; + flex-direction:row; + justify-content:end; + flex-wrap:wrap; + margin-right:20px; + gap:10px; + } + .button{ + background:none; + border:1px solid #5b5d6b; + color: ${isDarkModeOn?"#ffffff":"#000000"}; + outline:none; + padding:5px 20px; + border-radius:5px; + min-width:100px; + } + .cus{ + color:red; + } +`; + +return( + <> + <Navbar> + <div className="container"> + <button className="button cus">Burn</button> + <button className="button">Multiply</button> + <button className="button">Transfer</button> + <button className="button">Sell</button> + </div> + </Navbar> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} + props={{isDarkModeOn}} + /> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTTable"} + props={{isDarkModeOn}} + /> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTMore"} + props={{isDarkModeOn}} + /> + </> +) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx new file mode 100644 index 00000000..29aa48e5 --- /dev/null +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx @@ -0,0 +1,237 @@ +const {isDarkModeOn} = props + +const Title = styled.div` + font-size:22px; + font-weight:600; + margin:30px 0; +`; + +const Bottom = styled.div` + display:grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + @media screen and (min-width:768px) and (max-width:1024px){ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media screen and (min-width:1024px) and (max-width:1280px){ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +`; + +const Card = styled.a` + text-decoration:none; + transition-duration: .5s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + background-color: #f6f5f4; + border-radius: .25rem; + cursor: pointer; + display: inline-block; + width: 100%; + height:470px; + :hover{ + scale: 1; + transition: all; + transition-duration: .5s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + } +`; +const Header = styled.div` + display:flex; + justify-content:center; + flex-direction:column; + .header{ + width:100%; + height:350px; + border-radius:.25rem; + padding-top:35px; + overflow: hidden; + position: relative; + } + .layout-image{ + position:absolute; + bottom:0; + left:0; + right:0; + top:0; + } + .img{ + position: relative; + width:100%; + height:100%; + } + .image{ + osition: absolute; + height: 100%; + width: 100%; + inset: 0px; + object-fit: contain; + color: transparent; + object-fit: cover !important; + + } +`; +const Container = styled.div` + display:flex; + flex-direction:column; + gap:10px; + margin-top:-10px; + padding:20px; + .text{ + margin-top:10px; + font-size:17px; + color:#000000; + } + + .sub-text{ + color:#86868a; + } + .desc{ + display:flex; + justify-content:space-between; + align-items:center; + .text-s{ + color:#000000; + } + } +`; + +const Footer = styled.div` + display:flex; + flex-direction:row; + align-items:center; + justify-content:center; + margin:auto; + gap:30px; + margin-top:3rem; + .button{ + padding:5px 20px; + background:none; + border-radius:5px; + outline:none; + width:200px; + border:1px solid gray; + :hover{ + background:#e6e6e7; + } + } +`; + +return( + <div style={{marginBottom:"5rem",marginTop:"3rem"}}> + <Title>More from this contract</Title> + <Bottom> + <Card href="#" className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + </Bottom> + <Footer> + <button className="button">See Contract</button> + <button className="button" style={{border:"none"}}>Explorer + <svg + viewBox="0 0 512 512" + width={20} + height={20} + fill="#000000" + xmlns="http://www.w3.org/2000/svg" + style={{marginLeft:"5px"}} + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </button> + </Footer> + </div> +) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx new file mode 100644 index 00000000..4528e751 --- /dev/null +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx @@ -0,0 +1,358 @@ +const {isDarkModeOn} = props +const Container = styled.div` + display:grid; + margin:30px 0; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap:20px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .layout{ + display:flex; + flex-direction:column; + gap:20px; + } + .view-nft{ + padding:30px; + background:#f6f5f4; + display:flex; + flex-direction:column; + justify-content:center; + align-item:center; + min-width:800px; + border-radius:5px; + } + .layout-image{ + display:flex; + justify-content:center; + align-items:center; + margin-bottom:20px; + } + .nft{ + width:512px; + height:512px; + } + .desc{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + } + .item{ + display:flex; + flex-direction:column; + padding:7px 10px; + gap:3px; + background:#ffffff; + text-decoration:none; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .title{ + margin:20px 0; + font-size:30px; + font-weight:500; + } + .layout-title{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:center; + } + .audit{ + border:none; + background:#ebeae9; + padding:5px 10px; + border-radius:5px; + max-height:40px; + cursor: pointer; + :hover{ + background:#9dc7f3; + } + } + .text-desc{ + color:#164b8e; + } + .minter{ + margin-top:20px; + display:flex; + flex-direction:row; + gap:30px; + } + .footer{ + display:flex; + margin-top:20px; + flex-direction:column; + gap:20px; + } + .btn-nft{ + border:1px solid #000000; + background:none; + padding:3px 6px; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .split{ + background:#f6f5f4; + padding:10px 20px; + max-hight:300px; + width:100%; + min-width:800px; + border-radius:5px 5px 0 0; + cursor:pointer; + transition-duration: .2s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + } + .splits{ + background:#f6f5f4; + padding:30px; + max-hight:300px; + width:100%; + min-width:800px; + border-radius:5px; + overflow: hidden; + transition: height .25s ease-out; + } + .split-title{ + display:flex; + flex-direction:row; + justify-content:space-between; + margin-bottom:20px; + + } + .left{ + margin-top:10px; + font-size:19px; + font-weight:600; + } + .right{ + margin-top:10px; + display:flex; + flex-direction:row; + gap:10px; + } + .split-content{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + } + .right-header{ + padding:10px 20px; + color:gray; + background:${isDarkModeOn?"#282a3a":"#eceae8"}; + width:100%; + display:flex; + text-align:start; + align-items:start; + justify-content:start; + flex-direction:row; + gap:3px; + } + .right-footer{ + display:flex; + justify-content:space-between; + width:100%; + padding:20px 20px; + @media screen and (max-width:768px){ + justify-content:center; + } + } + .right-main{ + color:${isDarkModeOn?"#ffffff":"#000000"}; + padding: 10px 20px; + margin-top:10px; + } + .right-container{ + border:none; + background:${isDarkModeOn ?"#1e2030":"#f6f5f4"}; + display:flex; + flex-direction:column; + min-width:400px; + max-height:200px; + border-radius: 5px; + margin-right:40px; + } + .text{ + color:${isDarkModeOn?"#ffffff":"#000000"}; + } + .btn-cus{ + background:${isDarkModeOn?"#ffffff":"#000000"}; + border:none; + border-radius:5px; + outline:none; + padding:5px 20px; + width:100%; + color:${isDarkModeOn?"#000000":"#ffffff"} + } +`; + +const [dropdowVisible,setDropDownVisible] = useState(true) +const [visible,setVisible] = useState(true) + + +const hanleVisible = ()=>{ + setDropDownVisible(!dropdowVisible) +} + +const hanleVisibleDetails = ()=>{ + setVisible(!visible) +} + +return( + <Container> + <div className="layout"> + <div className="view-nft"> + <div className="layout-image"> + <img className="nft" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/-U5y7YTef_i-E4Umi6xnsfpY-D5LnGvTDF8LTxpfv3E" alt="nft"/> + </div> + <div className="layout-title"> + <div className="title"> + Pixel pals #374 + </div> + <button className="audit"> + Audited + </button> + </div> + <div className="desc"> + <a href="#" className="item"> + <small>Contract</small> + <small className="text-desc">pixelpals.mintbase1.near</small> + </a> + <a href="#" className="item"> + <small>Owner</small> + <small className="text-desc">huunhanz.near</small> + </a> + <a href="#" className="item"> + <small>Total Minted</small> + <small>1</small> + </a> + </div> + <div className="minter"> + <small> + Minter: <a href="#" className="text-desc text-decoration-none"> nearmedianft.near</a> + </small> + <small>Token Id: 384</small> + <small>Type: Image</small> + </div> + <div className="footer"> + <div>Light of rat</div> + <div className="d-flex flex-row gap-3"> + <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> + <div>Share</div> + </a> + <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <img width="18" height="18" src="https://img.icons8.com/pulsar-line/48/share-3.png" alt="share-3"/> + <div>Copy AffiliateDirect Link</div> + </a> + </div> + </div> + </div> + <div> + <div onClick={hanleVisible} className="split border-bottom"> + <div className="split-title"> + <div className="left">Splits</div> + <div className="right"> + <img width="20" height="20" src="https://img.icons8.com/color/48/info--v1.png" alt="info--v1"/> + {dropdowVisible?( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-up.png" alt="chevron-up"/> + ):( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-down.png" alt="chevron-up"/> + )} + </div> + </div> + </div> + {dropdowVisible&&<div className="splits"> + <div className="split-content"> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div class="error" style={{background:"#c74c4c",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Forever Royalties</small> + </div> + <small>0%</small> + </div> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div className="success" style={{background:"#0a7d6c",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Split Revenue</small> + </div> + <small>0%</small> + </div> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div className="disable" style={{background:"#b3b5bd",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Market</small> + </div> + <small>0%</small> + </div> + </div> + </div>} + </div> + <div> + <div onClick={hanleVisibleDetails} className="split border-bottom"> + <div className="split-title"> + <div className="left">Details</div> + <div className="right"> + {visible?( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-up.png" alt="chevron-up"/> + ):( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-down.png" alt="chevron-up"/> + )} + </div> + </div> + </div> + {visible&&( + <div className="splits"> + <div className="d-flex flex-column gap-3"> + <div>Storage Gateway: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>https://arweave.net + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Storage ID: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>_HmVnyi7YzKwmQyIj-xtETnU0mj_PeFwcaa46qn6J3g + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Contract: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Metadata ID: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285 + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + </div> + </div> + )} + </div> + </div> + <div className="d-flex justify-content-end"> + <div className="right-container"> + <div className="right-header"> + <span className="text" style={{fontWeight:500}}>1 </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> + </div> + <div className="right-main"> + <span className="d-flex flex-row justify-content-start">Lowest Price</span> + <div className="text text-left d-flex flex-row justify-content-start align-items-end"> + <div style={{fontSize:"25px",fontWeight:600}}>2.00 + <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> + </div> + </div> + <div className="right-footer"> + <button className="btn-cus">Buy With Crypto</button> + </div> + </div> + </div> + </Container> +) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx new file mode 100644 index 00000000..02cf0bf2 --- /dev/null +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx @@ -0,0 +1,271 @@ +const {isDarkModeOn} = props +const Provenance = styled.div` + background:#f6f5f4; + padding:30px; + border-bottom:1px solid #bdbbb4; + .title{ + font-size:20px; + font-weight:600; + } +`; + +const ContainerTable = styled.div` + background: ${isDarkModeOn ? "#1f2031" : "#f6f5f4"}; + display: flex; + flex-direction: column; + overflow-x: scroll; /* Prevent horizontal overflow */ + width:100%; + @media (max-width: 500px) { + width: 100vw; + font-size: 12px; + } + + .header { + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + align-items: center; + justify-content: space-between; + padding: 1rem 0; + color: ${isDarkModeOn ? "#4B5563" : "black"}; + margin-bottom: 1rem; + font-weight: 500px; + div { + padding-bottom: 1rem; + text-align: center; + border-bottom: 2px solid ${isDarkModeOn ? "#374151" : "#E5E7EB"}; + } + + .item1 { + grid-column-start: 1; + grid-column-end: 1; + } + .item2 { + grid-column-start: 2; + grid-column-end: 3; + } + .item3 { + grid-column-start: 3; + grid-column-end: 4; + } + .item4{ + grid-column-start: 4; + grid-column-end: 6; + } + .item5{ + grid-column-start: 6; + grid-column-end: 8; + } + .item6{ + grid-column-start: 8; + grid-column-end: 9; + } + } + .trx-row { + display: grid; + grid-template-columns: repeat(6, minmax(0, 3fr)); + width: 100%; + justify-content: space-between; + gap: 1rem; + padding: 1rem 0; + font-size:18px; + border-bottom: 1px solid ${color}5a; + &:last-of-type { + border-bottom-color: transparent; + } + } + + a { + text-decoration: none; + } + + .address { + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + height: 40px; + display: flex; + align-items: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + margin-left:-4rem; + :hover { + color: #eee; + } + } + .address_2 { + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + height: 40px; + display: flex; + align-items: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + margin-left:1rem; + :hover { + color: #eee; + } + } + .title { + display: flex; + align-items: center; + text-decoration: none; + gap: 10px; + margin-left:0; + div { + white-space: nowrap; + height: 40px; + display: flex; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + align-items: center; + justify-content: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + :hover { + color: #000000; + } + } + img { + object-fit: cover; + width: 40px; + height: 40px; + border-radius: 50%; + } + } + .kind { + width: fit-content; + height: fit-content; + font-size: 12px; + font-weight: bold; + letter-spacing: 0.9; + padding: 4px; + border-radius: 2px; + text-transform: uppercase; + margin-left:4rem; + display:flex; + margin-top:5px; + align-items:center; + } + + .time { + display: flex; + align-items: center; + gap: 1rem; + margin-left:3rem; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + svg { + box-sizing: content-box; + height: 14px; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + cursor: pointer; + padding: 10px; + border-radius: 2px; + transition: all 200ms ease 0s; + :hover { + background: #97d3f9; + } + } + } + } + .price{ + margin-left:-3rem; + display:flex; + align-items:center; + } + .link{ + border-radius:5px; + padding:10px 15px; + color:#5861a8; + display:flex; + align-items:center; + text-align:center; + :hover{ + background:#c2d9f5; + } + } + + @media (max-width: 500px) { + .header, + .trx-row { + grid-template-columns: repeat(7, 150px); + } + } +`; + +const truncateString = (str, num) => { + if (str.length > num) { + return str.slice(0, num) + "..."; + } else { + return str; + } +} +const kindColor = { + list: "#8c4fe5", + unlist: "#8c4fe5", + sale: "#0a7d6c", + transfer: "#4f58a3", + make_offer: "#4f58a3", + mint: "#000000", +}; + + +return( + <> + <Provenance> + <div className="title">Provenance</div> + </Provenance> + <ContainerTable> + <div className="header"> + <div className="item1">Event</div> + <div className="item2">Token ID</div> + <div className="item3">Price</div> + <div className="item4">From</div> + <div className="item5">To</div> + <div className="item6">Date</div> + </div> + <div> + <div className="trx-row"> + <div + style={{ + background: kindColor.list + "40", + color: isDarkModeOn ? "#fff" : kindColor.list, + }} + className="kind" + > + LIST + </div> + <div className="title"> + 384 + </div> + <div className="price"> + 17 + <svg width="25px" height="25px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <div className="address"> + <a href="#" target="_blank" className="link">huunhanz.near</a> + </div> + <div className="address_2"> + <a href="#" target="_blank" className="link text-truncate">{truncateString("simple.market.mintbase.near",15)}</a> + </div> + <div className="time"> + 2 days ago + <a + href={ + "https://nearblocks.io/txns/" + + hashData.body.receipts[0] + ?.originated_from_transaction_hash + } + target="_blank" + > + <svg + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </a> + </div> + </div> + </div> + </ContainerTable> + </> +) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx new file mode 100644 index 00000000..e35734d3 --- /dev/null +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx @@ -0,0 +1,52 @@ +const {isDarkModeOn} = props + +const Navbar = styled.div` + display:flex; + flex-direction:row; + align-items:center; + background:${isDarkModeOn?"#282a3a":"#f6f5f4"}; + height:50px; + width:100%; + .container{ + display:flex; + flex-direction:row; + justify-content:end; + flex-wrap:wrap; + margin-right:20px; + gap:10px; + } + .button{ + background:none; + border:1px solid #5b5d6b; + color: ${isDarkModeOn?"#ffffff":"#000000"}; + outline:none; + padding:5px 20px; + border-radius:5px; + min-width:100px; + } + .cus{ + color:red; + } +`; + +return( + <> + <Navbar> + <div className="container"> + <button className="button cus">Burn</button> + <button className="button">Multiply</button> + <button className="button">Transfer</button> + <button className="button">Sell</button> + </div> + </Navbar> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} + props={{isDarkModeOn}} + /> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTTable"} + props={{isDarkModeOn}} + /> + <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTMore"} + props={{isDarkModeOn}} + /> + </> +) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx new file mode 100644 index 00000000..29aa48e5 --- /dev/null +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx @@ -0,0 +1,237 @@ +const {isDarkModeOn} = props + +const Title = styled.div` + font-size:22px; + font-weight:600; + margin:30px 0; +`; + +const Bottom = styled.div` + display:grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + @media screen and (min-width:768px) and (max-width:1024px){ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + @media screen and (min-width:1024px) and (max-width:1280px){ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +`; + +const Card = styled.a` + text-decoration:none; + transition-duration: .5s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + background-color: #f6f5f4; + border-radius: .25rem; + cursor: pointer; + display: inline-block; + width: 100%; + height:470px; + :hover{ + scale: 1; + transition: all; + transition-duration: .5s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + } +`; +const Header = styled.div` + display:flex; + justify-content:center; + flex-direction:column; + .header{ + width:100%; + height:350px; + border-radius:.25rem; + padding-top:35px; + overflow: hidden; + position: relative; + } + .layout-image{ + position:absolute; + bottom:0; + left:0; + right:0; + top:0; + } + .img{ + position: relative; + width:100%; + height:100%; + } + .image{ + osition: absolute; + height: 100%; + width: 100%; + inset: 0px; + object-fit: contain; + color: transparent; + object-fit: cover !important; + + } +`; +const Container = styled.div` + display:flex; + flex-direction:column; + gap:10px; + margin-top:-10px; + padding:20px; + .text{ + margin-top:10px; + font-size:17px; + color:#000000; + } + + .sub-text{ + color:#86868a; + } + .desc{ + display:flex; + justify-content:space-between; + align-items:center; + .text-s{ + color:#000000; + } + } +`; + +const Footer = styled.div` + display:flex; + flex-direction:row; + align-items:center; + justify-content:center; + margin:auto; + gap:30px; + margin-top:3rem; + .button{ + padding:5px 20px; + background:none; + border-radius:5px; + outline:none; + width:200px; + border:1px solid gray; + :hover{ + background:#e6e6e7; + } + } +`; + +return( + <div style={{marginBottom:"5rem",marginTop:"3rem"}}> + <Title>More from this contract</Title> + <Bottom> + <Card href="#" className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + <Card className="text-decoration-none"> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + </div> + </div> + </div> + </Header> + <Container> + <div> + <small className="sub-text">pixel.mintbase1.near</small> + <div className="text">Pixel pals #479</div> + </div> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + </div> + <small className="text-s">Not Listed</small> + </div> + </Container> + </Card> + </Bottom> + <Footer> + <button className="button">See Contract</button> + <button className="button" style={{border:"none"}}>Explorer + <svg + viewBox="0 0 512 512" + width={20} + height={20} + fill="#000000" + xmlns="http://www.w3.org/2000/svg" + style={{marginLeft:"5px"}} + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </button> + </Footer> + </div> +) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx new file mode 100644 index 00000000..4528e751 --- /dev/null +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx @@ -0,0 +1,358 @@ +const {isDarkModeOn} = props +const Container = styled.div` + display:grid; + margin:30px 0; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap:20px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .layout{ + display:flex; + flex-direction:column; + gap:20px; + } + .view-nft{ + padding:30px; + background:#f6f5f4; + display:flex; + flex-direction:column; + justify-content:center; + align-item:center; + min-width:800px; + border-radius:5px; + } + .layout-image{ + display:flex; + justify-content:center; + align-items:center; + margin-bottom:20px; + } + .nft{ + width:512px; + height:512px; + } + .desc{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + } + .item{ + display:flex; + flex-direction:column; + padding:7px 10px; + gap:3px; + background:#ffffff; + text-decoration:none; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .title{ + margin:20px 0; + font-size:30px; + font-weight:500; + } + .layout-title{ + display:flex; + flex-direction:row; + justify-content:space-between; + align-items:center; + } + .audit{ + border:none; + background:#ebeae9; + padding:5px 10px; + border-radius:5px; + max-height:40px; + cursor: pointer; + :hover{ + background:#9dc7f3; + } + } + .text-desc{ + color:#164b8e; + } + .minter{ + margin-top:20px; + display:flex; + flex-direction:row; + gap:30px; + } + .footer{ + display:flex; + margin-top:20px; + flex-direction:column; + gap:20px; + } + .btn-nft{ + border:1px solid #000000; + background:none; + padding:3px 6px; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .split{ + background:#f6f5f4; + padding:10px 20px; + max-hight:300px; + width:100%; + min-width:800px; + border-radius:5px 5px 0 0; + cursor:pointer; + transition-duration: .2s; + transition-property: all; + transition-timing-function: cubic-bezier(.4,0,.2,1); + } + .splits{ + background:#f6f5f4; + padding:30px; + max-hight:300px; + width:100%; + min-width:800px; + border-radius:5px; + overflow: hidden; + transition: height .25s ease-out; + } + .split-title{ + display:flex; + flex-direction:row; + justify-content:space-between; + margin-bottom:20px; + + } + .left{ + margin-top:10px; + font-size:19px; + font-weight:600; + } + .right{ + margin-top:10px; + display:flex; + flex-direction:row; + gap:10px; + } + .split-content{ + display:grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap:10px; + @media screen and (max-width:768px){ + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + } + .right-header{ + padding:10px 20px; + color:gray; + background:${isDarkModeOn?"#282a3a":"#eceae8"}; + width:100%; + display:flex; + text-align:start; + align-items:start; + justify-content:start; + flex-direction:row; + gap:3px; + } + .right-footer{ + display:flex; + justify-content:space-between; + width:100%; + padding:20px 20px; + @media screen and (max-width:768px){ + justify-content:center; + } + } + .right-main{ + color:${isDarkModeOn?"#ffffff":"#000000"}; + padding: 10px 20px; + margin-top:10px; + } + .right-container{ + border:none; + background:${isDarkModeOn ?"#1e2030":"#f6f5f4"}; + display:flex; + flex-direction:column; + min-width:400px; + max-height:200px; + border-radius: 5px; + margin-right:40px; + } + .text{ + color:${isDarkModeOn?"#ffffff":"#000000"}; + } + .btn-cus{ + background:${isDarkModeOn?"#ffffff":"#000000"}; + border:none; + border-radius:5px; + outline:none; + padding:5px 20px; + width:100%; + color:${isDarkModeOn?"#000000":"#ffffff"} + } +`; + +const [dropdowVisible,setDropDownVisible] = useState(true) +const [visible,setVisible] = useState(true) + + +const hanleVisible = ()=>{ + setDropDownVisible(!dropdowVisible) +} + +const hanleVisibleDetails = ()=>{ + setVisible(!visible) +} + +return( + <Container> + <div className="layout"> + <div className="view-nft"> + <div className="layout-image"> + <img className="nft" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/-U5y7YTef_i-E4Umi6xnsfpY-D5LnGvTDF8LTxpfv3E" alt="nft"/> + </div> + <div className="layout-title"> + <div className="title"> + Pixel pals #374 + </div> + <button className="audit"> + Audited + </button> + </div> + <div className="desc"> + <a href="#" className="item"> + <small>Contract</small> + <small className="text-desc">pixelpals.mintbase1.near</small> + </a> + <a href="#" className="item"> + <small>Owner</small> + <small className="text-desc">huunhanz.near</small> + </a> + <a href="#" className="item"> + <small>Total Minted</small> + <small>1</small> + </a> + </div> + <div className="minter"> + <small> + Minter: <a href="#" className="text-desc text-decoration-none"> nearmedianft.near</a> + </small> + <small>Token Id: 384</small> + <small>Type: Image</small> + </div> + <div className="footer"> + <div>Light of rat</div> + <div className="d-flex flex-row gap-3"> + <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> + <div>Share</div> + </a> + <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <img width="18" height="18" src="https://img.icons8.com/pulsar-line/48/share-3.png" alt="share-3"/> + <div>Copy AffiliateDirect Link</div> + </a> + </div> + </div> + </div> + <div> + <div onClick={hanleVisible} className="split border-bottom"> + <div className="split-title"> + <div className="left">Splits</div> + <div className="right"> + <img width="20" height="20" src="https://img.icons8.com/color/48/info--v1.png" alt="info--v1"/> + {dropdowVisible?( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-up.png" alt="chevron-up"/> + ):( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-down.png" alt="chevron-up"/> + )} + </div> + </div> + </div> + {dropdowVisible&&<div className="splits"> + <div className="split-content"> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div class="error" style={{background:"#c74c4c",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Forever Royalties</small> + </div> + <small>0%</small> + </div> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div className="success" style={{background:"#0a7d6c",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Split Revenue</small> + </div> + <small>0%</small> + </div> + <div className="item"> + <div className="d-flex flex-row gap-2 align-items-center"> + <div className="disable" style={{background:"#b3b5bd",height:"10px",width:"10px",borderRadius:"50px"}}></div> + <small>Market</small> + </div> + <small>0%</small> + </div> + </div> + </div>} + </div> + <div> + <div onClick={hanleVisibleDetails} className="split border-bottom"> + <div className="split-title"> + <div className="left">Details</div> + <div className="right"> + {visible?( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-up.png" alt="chevron-up"/> + ):( + <img width="20" height="20" src="https://img.icons8.com/ios-glyphs/30/chevron-down.png" alt="chevron-up"/> + )} + </div> + </div> + </div> + {visible&&( + <div className="splits"> + <div className="d-flex flex-column gap-3"> + <div>Storage Gateway: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>https://arweave.net + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Storage ID: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>_HmVnyi7YzKwmQyIj-xtETnU0mj_PeFwcaa46qn6J3g + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Contract: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + <div>Metadata ID: + <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285 + <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + </a> + </div> + </div> + </div> + )} + </div> + </div> + <div className="d-flex justify-content-end"> + <div className="right-container"> + <div className="right-header"> + <span className="text" style={{fontWeight:500}}>1 </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> + </div> + <div className="right-main"> + <span className="d-flex flex-row justify-content-start">Lowest Price</span> + <div className="text text-left d-flex flex-row justify-content-start align-items-end"> + <div style={{fontSize:"25px",fontWeight:600}}>2.00 + <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> + </div> + </div> + <div className="right-footer"> + <button className="btn-cus">Buy With Crypto</button> + </div> + </div> + </div> + </Container> +) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx new file mode 100644 index 00000000..02cf0bf2 --- /dev/null +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx @@ -0,0 +1,271 @@ +const {isDarkModeOn} = props +const Provenance = styled.div` + background:#f6f5f4; + padding:30px; + border-bottom:1px solid #bdbbb4; + .title{ + font-size:20px; + font-weight:600; + } +`; + +const ContainerTable = styled.div` + background: ${isDarkModeOn ? "#1f2031" : "#f6f5f4"}; + display: flex; + flex-direction: column; + overflow-x: scroll; /* Prevent horizontal overflow */ + width:100%; + @media (max-width: 500px) { + width: 100vw; + font-size: 12px; + } + + .header { + display: grid; + grid-template-columns: repeat(8, minmax(0, 1fr)); + align-items: center; + justify-content: space-between; + padding: 1rem 0; + color: ${isDarkModeOn ? "#4B5563" : "black"}; + margin-bottom: 1rem; + font-weight: 500px; + div { + padding-bottom: 1rem; + text-align: center; + border-bottom: 2px solid ${isDarkModeOn ? "#374151" : "#E5E7EB"}; + } + + .item1 { + grid-column-start: 1; + grid-column-end: 1; + } + .item2 { + grid-column-start: 2; + grid-column-end: 3; + } + .item3 { + grid-column-start: 3; + grid-column-end: 4; + } + .item4{ + grid-column-start: 4; + grid-column-end: 6; + } + .item5{ + grid-column-start: 6; + grid-column-end: 8; + } + .item6{ + grid-column-start: 8; + grid-column-end: 9; + } + } + .trx-row { + display: grid; + grid-template-columns: repeat(6, minmax(0, 3fr)); + width: 100%; + justify-content: space-between; + gap: 1rem; + padding: 1rem 0; + font-size:18px; + border-bottom: 1px solid ${color}5a; + &:last-of-type { + border-bottom-color: transparent; + } + } + + a { + text-decoration: none; + } + + .address { + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + height: 40px; + display: flex; + align-items: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + margin-left:-4rem; + :hover { + color: #eee; + } + } + .address_2 { + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + height: 40px; + display: flex; + align-items: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + margin-left:1rem; + :hover { + color: #eee; + } + } + .title { + display: flex; + align-items: center; + text-decoration: none; + gap: 10px; + margin-left:0; + div { + white-space: nowrap; + height: 40px; + display: flex; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + align-items: center; + justify-content: center; + padding: 10px; + border-radius: 2px; + transition: all 200ms; + :hover { + color: #000000; + } + } + img { + object-fit: cover; + width: 40px; + height: 40px; + border-radius: 50%; + } + } + .kind { + width: fit-content; + height: fit-content; + font-size: 12px; + font-weight: bold; + letter-spacing: 0.9; + padding: 4px; + border-radius: 2px; + text-transform: uppercase; + margin-left:4rem; + display:flex; + margin-top:5px; + align-items:center; + } + + .time { + display: flex; + align-items: center; + gap: 1rem; + margin-left:3rem; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + svg { + box-sizing: content-box; + height: 14px; + color: ${isDarkModeOn ? "#c2cdfd" : "#4e58a2"}; + cursor: pointer; + padding: 10px; + border-radius: 2px; + transition: all 200ms ease 0s; + :hover { + background: #97d3f9; + } + } + } + } + .price{ + margin-left:-3rem; + display:flex; + align-items:center; + } + .link{ + border-radius:5px; + padding:10px 15px; + color:#5861a8; + display:flex; + align-items:center; + text-align:center; + :hover{ + background:#c2d9f5; + } + } + + @media (max-width: 500px) { + .header, + .trx-row { + grid-template-columns: repeat(7, 150px); + } + } +`; + +const truncateString = (str, num) => { + if (str.length > num) { + return str.slice(0, num) + "..."; + } else { + return str; + } +} +const kindColor = { + list: "#8c4fe5", + unlist: "#8c4fe5", + sale: "#0a7d6c", + transfer: "#4f58a3", + make_offer: "#4f58a3", + mint: "#000000", +}; + + +return( + <> + <Provenance> + <div className="title">Provenance</div> + </Provenance> + <ContainerTable> + <div className="header"> + <div className="item1">Event</div> + <div className="item2">Token ID</div> + <div className="item3">Price</div> + <div className="item4">From</div> + <div className="item5">To</div> + <div className="item6">Date</div> + </div> + <div> + <div className="trx-row"> + <div + style={{ + background: kindColor.list + "40", + color: isDarkModeOn ? "#fff" : kindColor.list, + }} + className="kind" + > + LIST + </div> + <div className="title"> + 384 + </div> + <div className="price"> + 17 + <svg width="25px" height="25px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <div className="address"> + <a href="#" target="_blank" className="link">huunhanz.near</a> + </div> + <div className="address_2"> + <a href="#" target="_blank" className="link text-truncate">{truncateString("simple.market.mintbase.near",15)}</a> + </div> + <div className="time"> + 2 days ago + <a + href={ + "https://nearblocks.io/txns/" + + hashData.body.receipts[0] + ?.originated_from_transaction_hash + } + target="_blank" + > + <svg + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </a> + </div> + </div> + </div> + </ContainerTable> + </> +) \ No newline at end of file From 9d74f8fba4cbe37ea742242b9f173c834969d284 Mon Sep 17 00:00:00 2001 From: louisdevzz <vohuunhan1310@gmail.com> Date: Sun, 24 Mar 2024 16:21:20 +0700 Subject: [PATCH 2/4] feat: update load data NFT --- .../widget/Mintbase/App/NFTDetails/Index.jsx | 119 ++++++++++++++- .../Mintbase/App/NFTDetails/NFTMore.jsx | 113 +++----------- .../Mintbase/App/NFTDetails/NFTShow.jsx | 42 +++--- .../Mintbase/App/NFTDetails/NFTTable.jsx | 138 ++++++++++++++---- .../src/Mintbase/App/NFTDetails/Index.jsx | 119 ++++++++++++++- .../src/Mintbase/App/NFTDetails/NFTMore.jsx | 113 +++----------- .../src/Mintbase/App/NFTDetails/NFTShow.jsx | 42 +++--- .../src/Mintbase/App/NFTDetails/NFTTable.jsx | 138 ++++++++++++++---- 8 files changed, 548 insertions(+), 276 deletions(-) diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx index e35734d3..56d38052 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx @@ -29,6 +29,109 @@ const Navbar = styled.div` } `; +const fetchStoreFrontData = (nftId) => { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + method: "POST", + headers: { + "mb-api-key": "anon", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: `query MyQuery { + mb_views_nft_metadata( + where: {id: {_eq: "${nftId}"}} + ) { + id + description + base_uri + media + title + listings { + minter + listed_by + market_id + created_at + price + token_id + metadata_id + token { + last_transfer_receipt_id + } + } + listings_aggregate { + aggregate { + count + } + } + nft_contract_id + } + mb_views_nft_activities_rollup( + where: {metadata_id: {_eq: "${nftId}"}} + order_by: {timestamp: desc} + ) { + action_receiver + action_sender + count + description + kind + media + metadata_id + nft_contract_id + receipt_id + reference + timestamp + title + tx_sender + token_ids + price + } + } + `, + }), +}); + //return response2.body.data; + State.update({ + infoNFT: response2.body.data.mb_views_nft_metadata[0], + NftCount: + response2.body.data.mb_views_nft_metadata[0].listings_aggregate.aggregate.count, + dataTransaction:response2.body.data.mb_views_nft_activities_rollup, + }); +}; + +const fetchNFTData = (contractId) => { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + method: "POST", + headers: { + "mb-api-key": "anon", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: `query MyQuery { + mb_views_active_listings( + where: {nft_contract_id: {_eq: "${contractId}"}} + limit: 4 + ) { + media + title + kind + nft_contract_id + listed_by + token { + metadata_id + } + } + } + `, + }), + }); + //return response2.body.data; + State.update({ + dataNFT:response2.body.data.mb_views_active_listings, + }); +}; +fetchNFTData("pixelpals.mintbase1.near") +fetchStoreFrontData("pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285") +//console.log(state.dataNFT) return( <> <Navbar> @@ -40,13 +143,23 @@ return( </div> </Navbar> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + data: state.infoNFT, + NftCount: state.NftCount, + }} /> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTTable"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + dataTransaction: state.dataTransaction, + }} /> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTMore"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + dataNFT:state.dataNFT, + }} /> </> ) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx index 29aa48e5..82b78490 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,dataNFT} = props const Title = styled.div` font-size:22px; @@ -125,102 +125,35 @@ return( <div style={{marginBottom:"5rem",marginTop:"3rem"}}> <Title>More from this contract</Title> <Bottom> - <Card href="#" className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + {dataNFT&&dataNFT.map((dt,index)=>( + <Card href={`https://www.mintbase.xyz/meta/${dt.token.metadata_id}`} target="_blank" className="text-decoration-none" key={index}> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src={dt.media} alt="NFT" /> + </div> </div> </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> + </Header> + <Container> <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + <small className="sub-text">{dt.nft_contract_id}</small> + <div className="text">{dt.title}</div> </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> </div> + <small className="text-s">{dt.listed_by?"1/1":"Not Listed"}</small> </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> - </div> - </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> - </div> - </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> + </Container> + </Card> + ))} </Bottom> <Footer> - <button className="button">See Contract</button> - <button className="button" style={{border:"none"}}>Explorer + <a href={`https://www.mintbase.xyz/contract/${dataNFT[0].nft_contract_id}/nfts/all/0`} target="_blank" style={{color:"black"}} className="button d-flex text-align-center justify-content-center text-decoration-none">See Contract</a> + <a href={`https://nearblocks.io/address/${dataNFT[0].nft_contract_id}`} className="button d-flex text-align-center justify-content-center text-decoration-none" target="_blank" style={{border:"none",color:"black"}}>Explorer <svg viewBox="0 0 512 512" width={20} @@ -231,7 +164,7 @@ return( > <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> </svg> - </button> + </a> </Footer> </div> ) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx index 4528e751..f63f7a53 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,data,NftCount} = props const Container = styled.div` display:grid; margin:30px 0; @@ -92,7 +92,8 @@ const Container = styled.div` background:none; padding:3px 6px; border-radius:5px; - color:${isDarkModeOn?"#ffffff":"#000000"} + color:${isDarkModeOn?"#ffffff":"#000000"}; + cursor:pointer; } .split{ background:#f6f5f4; @@ -195,7 +196,6 @@ const Container = styled.div` const [dropdowVisible,setDropDownVisible] = useState(true) const [visible,setVisible] = useState(true) - const hanleVisible = ()=>{ setDropDownVisible(!dropdowVisible) } @@ -204,16 +204,18 @@ const hanleVisibleDetails = ()=>{ setVisible(!visible) } + +//console.log("data",data.listings[0].token.last_transfer_receipt_id) return( <Container> <div className="layout"> <div className="view-nft"> <div className="layout-image"> - <img className="nft" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/-U5y7YTef_i-E4Umi6xnsfpY-D5LnGvTDF8LTxpfv3E" alt="nft"/> + <img className="nft" src={data.media} alt="nft"/> </div> <div className="layout-title"> <div className="title"> - Pixel pals #374 + {data.title} </div> <button className="audit"> Audited @@ -222,34 +224,34 @@ return( <div className="desc"> <a href="#" className="item"> <small>Contract</small> - <small className="text-desc">pixelpals.mintbase1.near</small> + <small className="text-desc">{data.nft_contract_id}</small> </a> <a href="#" className="item"> <small>Owner</small> - <small className="text-desc">huunhanz.near</small> + <small className="text-desc">{data.listings[0].listed_by}</small> </a> <a href="#" className="item"> <small>Total Minted</small> - <small>1</small> + <small>{NftCount}</small> </a> </div> <div className="minter"> <small> - Minter: <a href="#" className="text-desc text-decoration-none"> nearmedianft.near</a> + Minter: <a href="#" className="text-desc text-decoration-none">{data.listings[0].minter}</a> </small> - <small>Token Id: 384</small> + <small>Token Id: {data.listings[0].token_id}</small> <small>Type: Image</small> </div> <div className="footer"> - <div>Light of rat</div> + <div>{data.description}</div> <div className="d-flex flex-row gap-3"> - <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <a href={`https://mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> <div>Share</div> </a> - <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <a href={`https://www.mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}?affiliateAccount=${data.listings[0].listed_by}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="18" height="18" src="https://img.icons8.com/pulsar-line/48/share-3.png" alt="share-3"/> - <div>Copy AffiliateDirect Link</div> + <div>AffiliateDirect Link</div> </a> </div> </div> @@ -282,14 +284,14 @@ return( <div className="success" style={{background:"#0a7d6c",height:"10px",width:"10px",borderRadius:"50px"}}></div> <small>Split Revenue</small> </div> - <small>0%</small> + <small>97.5%</small> </div> <div className="item"> <div className="d-flex flex-row gap-2 align-items-center"> <div className="disable" style={{background:"#b3b5bd",height:"10px",width:"10px",borderRadius:"50px"}}></div> <small>Market</small> </div> - <small>0%</small> + <small>2.5%</small> </div> </div> </div>} @@ -311,22 +313,22 @@ return( <div className="splits"> <div className="d-flex flex-column gap-3"> <div>Storage Gateway: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>https://arweave.net + <a href={data.base_uri} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.base_uri} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Storage ID: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>_HmVnyi7YzKwmQyIj-xtETnU0mj_PeFwcaa46qn6J3g + <a href={data.media} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.media&&(data.media).replace("https://arweave.net/","")} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Contract: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near + <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.nft_contract_id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Metadata ID: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285 + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx index 02cf0bf2..fdc7ff28 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,dataTransaction} = props const Provenance = styled.div` background:#f6f5f4; padding:30px; @@ -205,9 +205,56 @@ const kindColor = { transfer: "#4f58a3", make_offer: "#4f58a3", mint: "#000000", + approve:"#26a269" }; +const YoctoToNear = (amountYocto) => { + return new Big(amountYocto || 0).div(new Big(10).pow(24)).toString(); +}; + +const getTimePassed = (date) => { + // Get the current timestamp in milliseconds + const timestamp = new Date(date).getTime(); + + // Get the current date in the local time zone + const currentDate = new Date(); + + // Calculate the time zone offset in milliseconds + let localTimeZoneOffsetMinutes = currentDate.getTimezoneOffset(); + localTimeZoneOffsetMinutes = localTimeZoneOffsetMinutes * 60 * 1000; + + const currentTimestamp = new Date().getTime(); + // Calculate the difference in milliseconds + const timePassed = currentTimestamp + localTimeZoneOffsetMinutes - timestamp; + + // Convert milliseconds to seconds, minutes, hours, etc. + const secondsPassed = Math.floor(timePassed / 1000); + const minutesPassed = Math.floor(secondsPassed / 60); + const hoursPassed = Math.floor(minutesPassed / 60); + const daysPassed = Math.floor(hoursPassed / 24); + + let time = 0; + + // Display the time passed conditionally + if (daysPassed > 0) { + time = `${daysPassed} days`; + } else if (hoursPassed > 0) { + time = `${hoursPassed} hours`; + } else if (minutesPassed > 0) { + time = `${minutesPassed} minutes`; + } else { + time = `${secondsPassed} seconds`; + } + return time; +}; + +const _address = (address, _limit) => { + const limit = _limit || 20; + if (address.length > limit) return address.slice(0, 10) + "..."; + else return address; +}; +const hashData = (receipt_id) => fetch("https://api.nearblocks.io/v1/search?keyword=" +receipt_id); return( <> <Provenance> @@ -223,48 +270,89 @@ return( <div className="item6">Date</div> </div> <div> - <div className="trx-row"> + {dataTransaction&&dataTransaction.map((data,index)=>( + <div className="trx-row" key={index}> <div style={{ - background: kindColor.list + "40", - color: isDarkModeOn ? "#fff" : kindColor.list, + background: kindColor[data.kind] + "40", + color: isDarkModeOn ? "#fff" : kindColor[data.kind], }} className="kind" > - LIST + {data.kind&&data.kind.toUpperCase()} </div> <div className="title"> - 384 + {data.token_ids[0]} </div> <div className="price"> - 17 + {" "} + {data.price ? ( + <div> + {YoctoToNear(data.price)} <svg width="25px" height="25px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + + </div> + ) : ( + <div>-</div> + )}{" "} </div> - <div className="address"> - <a href="#" target="_blank" className="link">huunhanz.near</a> - </div> - <div className="address_2"> - <a href="#" target="_blank" className="link text-truncate">{truncateString("simple.market.mintbase.near",15)}</a> - </div> - <div className="time"> - 2 days ago + <Widget + src="near/widget/AccountProfileOverlay" + props={{ + accountId: data.action_sender, + children: ( <a href={ - "https://nearblocks.io/txns/" + - hashData.body.receipts[0] - ?.originated_from_transaction_hash + "https://near.org/near/widget/ProfilePage?accountId=" + + data.action_sender } + className="address" target="_blank" - > - <svg - viewBox="0 0 512 512" - xmlns="http://www.w3.org/2000/svg" - > - <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> - </svg> + > + {_address(data.action_sender)}{" "} </a> + ), + }} + /> + <Widget + src="near/widget/AccountProfileOverlay" + props={{ + accountId: data.action_receiver, + children: ( + <a + href={ + "https://near.org/near/widget/ProfilePage?accountId=" + + data.action_receiver + } + className="address_2" + target="_blank" + > + {_address(data.action_receiver)}{" "} + </a> + ), + }} + /> + <div className="time"> + {" "} + {getTimePassed(data.timestamp)} ago{" "} + {hashData(data.receipt_id).body.receipts[0]?.originated_from_transaction_hash && ( + <a + href={ + "https://nearblocks.io/txns/" +hashData(data.receipt_id).body.receipts[0]?.originated_from_transaction_hash + } + target="_blank" + > + <svg + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </a> + )} </div> </div> + ))} </div> </ContainerTable> </> diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx index e35734d3..56d38052 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx @@ -29,6 +29,109 @@ const Navbar = styled.div` } `; +const fetchStoreFrontData = (nftId) => { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + method: "POST", + headers: { + "mb-api-key": "anon", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: `query MyQuery { + mb_views_nft_metadata( + where: {id: {_eq: "${nftId}"}} + ) { + id + description + base_uri + media + title + listings { + minter + listed_by + market_id + created_at + price + token_id + metadata_id + token { + last_transfer_receipt_id + } + } + listings_aggregate { + aggregate { + count + } + } + nft_contract_id + } + mb_views_nft_activities_rollup( + where: {metadata_id: {_eq: "${nftId}"}} + order_by: {timestamp: desc} + ) { + action_receiver + action_sender + count + description + kind + media + metadata_id + nft_contract_id + receipt_id + reference + timestamp + title + tx_sender + token_ids + price + } + } + `, + }), +}); + //return response2.body.data; + State.update({ + infoNFT: response2.body.data.mb_views_nft_metadata[0], + NftCount: + response2.body.data.mb_views_nft_metadata[0].listings_aggregate.aggregate.count, + dataTransaction:response2.body.data.mb_views_nft_activities_rollup, + }); +}; + +const fetchNFTData = (contractId) => { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + method: "POST", + headers: { + "mb-api-key": "anon", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: `query MyQuery { + mb_views_active_listings( + where: {nft_contract_id: {_eq: "${contractId}"}} + limit: 4 + ) { + media + title + kind + nft_contract_id + listed_by + token { + metadata_id + } + } + } + `, + }), + }); + //return response2.body.data; + State.update({ + dataNFT:response2.body.data.mb_views_active_listings, + }); +}; +fetchNFTData("pixelpals.mintbase1.near") +fetchStoreFrontData("pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285") +//console.log(state.dataNFT) return( <> <Navbar> @@ -40,13 +143,23 @@ return( </div> </Navbar> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + data: state.infoNFT, + NftCount: state.NftCount, + }} /> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTTable"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + dataTransaction: state.dataTransaction, + }} /> <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTMore"} - props={{isDarkModeOn}} + props={{ + isDarkModeOn, + dataNFT:state.dataNFT, + }} /> </> ) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx index 29aa48e5..82b78490 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,dataNFT} = props const Title = styled.div` font-size:22px; @@ -125,102 +125,35 @@ return( <div style={{marginBottom:"5rem",marginTop:"3rem"}}> <Title>More from this contract</Title> <Bottom> - <Card href="#" className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + {dataNFT&&dataNFT.map((dt,index)=>( + <Card href={`https://www.mintbase.xyz/meta/${dt.token.metadata_id}`} target="_blank" className="text-decoration-none" key={index}> + <Header> + <div className="header"> + <div className="layout-image"> + <div className="img"> + <img className="image" src={dt.media} alt="NFT" /> + </div> </div> </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> + </Header> + <Container> <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> + <small className="sub-text">{dt.nft_contract_id}</small> + <div className="text">{dt.title}</div> </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> + <div className="desc"> + <div> + <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> </div> + <small className="text-s">{dt.listed_by?"1/1":"Not Listed"}</small> </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> - </div> - </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> - <Card className="text-decoration-none"> - <Header> - <div className="header"> - <div className="layout-image"> - <div className="img"> - <img className="image" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/thumbnail?url=https://arweave.net/4GlfSeiYPxLGywiZaSrzxfj8DsmXUhLPmIiuUf19lXc" alt="NFT" /> - </div> - </div> - </div> - </Header> - <Container> - <div> - <small className="sub-text">pixel.mintbase1.near</small> - <div className="text">Pixel pals #479</div> - </div> - <div className="desc"> - <div> - <img height={"24px"} src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/small?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fomni-live.appspot.com%2Fo%2Fprofile%252Fnearmedianft.near%253Aprofile%3Falt%3Dmedia%26token%3D696a6c76-1c87-4cb4-93f5-b6f58296a730" alt="logo"/> - </div> - <small className="text-s">Not Listed</small> - </div> - </Container> - </Card> + </Container> + </Card> + ))} </Bottom> <Footer> - <button className="button">See Contract</button> - <button className="button" style={{border:"none"}}>Explorer + <a href={`https://www.mintbase.xyz/contract/${dataNFT[0].nft_contract_id}/nfts/all/0`} target="_blank" style={{color:"black"}} className="button d-flex text-align-center justify-content-center text-decoration-none">See Contract</a> + <a href={`https://nearblocks.io/address/${dataNFT[0].nft_contract_id}`} className="button d-flex text-align-center justify-content-center text-decoration-none" target="_blank" style={{border:"none",color:"black"}}>Explorer <svg viewBox="0 0 512 512" width={20} @@ -231,7 +164,7 @@ return( > <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> </svg> - </button> + </a> </Footer> </div> ) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx index 4528e751..f63f7a53 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,data,NftCount} = props const Container = styled.div` display:grid; margin:30px 0; @@ -92,7 +92,8 @@ const Container = styled.div` background:none; padding:3px 6px; border-radius:5px; - color:${isDarkModeOn?"#ffffff":"#000000"} + color:${isDarkModeOn?"#ffffff":"#000000"}; + cursor:pointer; } .split{ background:#f6f5f4; @@ -195,7 +196,6 @@ const Container = styled.div` const [dropdowVisible,setDropDownVisible] = useState(true) const [visible,setVisible] = useState(true) - const hanleVisible = ()=>{ setDropDownVisible(!dropdowVisible) } @@ -204,16 +204,18 @@ const hanleVisibleDetails = ()=>{ setVisible(!visible) } + +//console.log("data",data.listings[0].token.last_transfer_receipt_id) return( <Container> <div className="layout"> <div className="view-nft"> <div className="layout-image"> - <img className="nft" src="https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/-U5y7YTef_i-E4Umi6xnsfpY-D5LnGvTDF8LTxpfv3E" alt="nft"/> + <img className="nft" src={data.media} alt="nft"/> </div> <div className="layout-title"> <div className="title"> - Pixel pals #374 + {data.title} </div> <button className="audit"> Audited @@ -222,34 +224,34 @@ return( <div className="desc"> <a href="#" className="item"> <small>Contract</small> - <small className="text-desc">pixelpals.mintbase1.near</small> + <small className="text-desc">{data.nft_contract_id}</small> </a> <a href="#" className="item"> <small>Owner</small> - <small className="text-desc">huunhanz.near</small> + <small className="text-desc">{data.listings[0].listed_by}</small> </a> <a href="#" className="item"> <small>Total Minted</small> - <small>1</small> + <small>{NftCount}</small> </a> </div> <div className="minter"> <small> - Minter: <a href="#" className="text-desc text-decoration-none"> nearmedianft.near</a> + Minter: <a href="#" className="text-desc text-decoration-none">{data.listings[0].minter}</a> </small> - <small>Token Id: 384</small> + <small>Token Id: {data.listings[0].token_id}</small> <small>Type: Image</small> </div> <div className="footer"> - <div>Light of rat</div> + <div>{data.description}</div> <div className="d-flex flex-row gap-3"> - <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <a href={`https://mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> <div>Share</div> </a> - <a href="#" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> + <a href={`https://www.mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}?affiliateAccount=${data.listings[0].listed_by}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="18" height="18" src="https://img.icons8.com/pulsar-line/48/share-3.png" alt="share-3"/> - <div>Copy AffiliateDirect Link</div> + <div>AffiliateDirect Link</div> </a> </div> </div> @@ -282,14 +284,14 @@ return( <div className="success" style={{background:"#0a7d6c",height:"10px",width:"10px",borderRadius:"50px"}}></div> <small>Split Revenue</small> </div> - <small>0%</small> + <small>97.5%</small> </div> <div className="item"> <div className="d-flex flex-row gap-2 align-items-center"> <div className="disable" style={{background:"#b3b5bd",height:"10px",width:"10px",borderRadius:"50px"}}></div> <small>Market</small> </div> - <small>0%</small> + <small>2.5%</small> </div> </div> </div>} @@ -311,22 +313,22 @@ return( <div className="splits"> <div className="d-flex flex-column gap-3"> <div>Storage Gateway: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>https://arweave.net + <a href={data.base_uri} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.base_uri} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Storage ID: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>_HmVnyi7YzKwmQyIj-xtETnU0mj_PeFwcaa46qn6J3g + <a href={data.media} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.media&&(data.media).replace("https://arweave.net/","")} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Contract: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near + <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.nft_contract_id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> <div>Metadata ID: - <a href="#" target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285 + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx index 02cf0bf2..fdc7ff28 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx @@ -1,4 +1,4 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,dataTransaction} = props const Provenance = styled.div` background:#f6f5f4; padding:30px; @@ -205,9 +205,56 @@ const kindColor = { transfer: "#4f58a3", make_offer: "#4f58a3", mint: "#000000", + approve:"#26a269" }; +const YoctoToNear = (amountYocto) => { + return new Big(amountYocto || 0).div(new Big(10).pow(24)).toString(); +}; + +const getTimePassed = (date) => { + // Get the current timestamp in milliseconds + const timestamp = new Date(date).getTime(); + + // Get the current date in the local time zone + const currentDate = new Date(); + + // Calculate the time zone offset in milliseconds + let localTimeZoneOffsetMinutes = currentDate.getTimezoneOffset(); + localTimeZoneOffsetMinutes = localTimeZoneOffsetMinutes * 60 * 1000; + + const currentTimestamp = new Date().getTime(); + // Calculate the difference in milliseconds + const timePassed = currentTimestamp + localTimeZoneOffsetMinutes - timestamp; + + // Convert milliseconds to seconds, minutes, hours, etc. + const secondsPassed = Math.floor(timePassed / 1000); + const minutesPassed = Math.floor(secondsPassed / 60); + const hoursPassed = Math.floor(minutesPassed / 60); + const daysPassed = Math.floor(hoursPassed / 24); + + let time = 0; + + // Display the time passed conditionally + if (daysPassed > 0) { + time = `${daysPassed} days`; + } else if (hoursPassed > 0) { + time = `${hoursPassed} hours`; + } else if (minutesPassed > 0) { + time = `${minutesPassed} minutes`; + } else { + time = `${secondsPassed} seconds`; + } + return time; +}; + +const _address = (address, _limit) => { + const limit = _limit || 20; + if (address.length > limit) return address.slice(0, 10) + "..."; + else return address; +}; +const hashData = (receipt_id) => fetch("https://api.nearblocks.io/v1/search?keyword=" +receipt_id); return( <> <Provenance> @@ -223,48 +270,89 @@ return( <div className="item6">Date</div> </div> <div> - <div className="trx-row"> + {dataTransaction&&dataTransaction.map((data,index)=>( + <div className="trx-row" key={index}> <div style={{ - background: kindColor.list + "40", - color: isDarkModeOn ? "#fff" : kindColor.list, + background: kindColor[data.kind] + "40", + color: isDarkModeOn ? "#fff" : kindColor[data.kind], }} className="kind" > - LIST + {data.kind&&data.kind.toUpperCase()} </div> <div className="title"> - 384 + {data.token_ids[0]} </div> <div className="price"> - 17 + {" "} + {data.price ? ( + <div> + {YoctoToNear(data.price)} <svg width="25px" height="25px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + + </div> + ) : ( + <div>-</div> + )}{" "} </div> - <div className="address"> - <a href="#" target="_blank" className="link">huunhanz.near</a> - </div> - <div className="address_2"> - <a href="#" target="_blank" className="link text-truncate">{truncateString("simple.market.mintbase.near",15)}</a> - </div> - <div className="time"> - 2 days ago + <Widget + src="near/widget/AccountProfileOverlay" + props={{ + accountId: data.action_sender, + children: ( <a href={ - "https://nearblocks.io/txns/" + - hashData.body.receipts[0] - ?.originated_from_transaction_hash + "https://near.org/near/widget/ProfilePage?accountId=" + + data.action_sender } + className="address" target="_blank" - > - <svg - viewBox="0 0 512 512" - xmlns="http://www.w3.org/2000/svg" - > - <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> - </svg> + > + {_address(data.action_sender)}{" "} </a> + ), + }} + /> + <Widget + src="near/widget/AccountProfileOverlay" + props={{ + accountId: data.action_receiver, + children: ( + <a + href={ + "https://near.org/near/widget/ProfilePage?accountId=" + + data.action_receiver + } + className="address_2" + target="_blank" + > + {_address(data.action_receiver)}{" "} + </a> + ), + }} + /> + <div className="time"> + {" "} + {getTimePassed(data.timestamp)} ago{" "} + {hashData(data.receipt_id).body.receipts[0]?.originated_from_transaction_hash && ( + <a + href={ + "https://nearblocks.io/txns/" +hashData(data.receipt_id).body.receipts[0]?.originated_from_transaction_hash + } + target="_blank" + > + <svg + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + <path d="m432 320h-32a16 16 0 0 0 -16 16v112h-320v-320h144a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-160a48 48 0 0 0 -48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48v-128a16 16 0 0 0 -16-16zm56-320h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73-243.73 243.64a24 24 0 0 0 0 34l22.67 22.63a24 24 0 0 0 34 0l243.61-243.68 35.72 35.68c15 15 41 4.5 41-17v-128a24 24 0 0 0 -24-24z" /> + </svg> + </a> + )} </div> </div> + ))} </div> </ContainerTable> </> From 2bc14fa42c70c73126eef0a41e5c4ed7cc44050b Mon Sep 17 00:00:00 2001 From: vo huu nhan <vohuunhan1310@gmail.com> Date: Wed, 10 Apr 2024 00:51:18 +0700 Subject: [PATCH 3/4] Feat: update index.jsx --- .../widget/Mintbase/App/NFTDetails/Index.jsx | 65 ++++++++++-------- .../Mintbase/App/NFTDetails/NFTShow.jsx | 41 ++++++----- .../src/Mintbase/App/NFTDetails/Index.jsx | 68 +++++++++++-------- .../src/Mintbase/App/NFTDetails/NFTShow.jsx | 41 ++++++----- 4 files changed, 120 insertions(+), 95 deletions(-) diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx index 56d38052..d1ff1756 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx @@ -1,5 +1,6 @@ const {isDarkModeOn} = props - +const contractId = props.contractId || "testmintbase.mintspace2.testnet"; +const metadataId = props.metadataId || "testmintbase.mintspace2.testnet:93bfaf5d4661ebd149db0340b69a9147"; const Navbar = styled.div` display:flex; flex-direction:row; @@ -28,43 +29,38 @@ const Navbar = styled.div` color:red; } `; +const [SDK,setSDK] = useState(null); const fetchStoreFrontData = (nftId) => { - const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + const response2 = fetch("https://graph.mintbase.xyz/testnet", { method: "POST", headers: { "mb-api-key": "anon", "Content-Type": "application/json", }, body: JSON.stringify({ - query: `query MyQuery { - mb_views_nft_metadata( - where: {id: {_eq: "${nftId}"}} + query: `query getTokenByMetadataId { + mb_views_nft_tokens( + where: {metadata_id: {_eq: "${nftId}"}} ) { - id - description - base_uri media + minter + token_id + metadata_id + splits + royalties_percent + royalties title - listings { - minter - listed_by - market_id - created_at - price - token_id - metadata_id - token { - last_transfer_receipt_id - } - } + nft_contract_id + owner + base_uri + description listings_aggregate { aggregate { - count + count } } - nft_contract_id - } + } mb_views_nft_activities_rollup( where: {metadata_id: {_eq: "${nftId}"}} order_by: {timestamp: desc} @@ -91,15 +87,15 @@ const fetchStoreFrontData = (nftId) => { }); //return response2.body.data; State.update({ - infoNFT: response2.body.data.mb_views_nft_metadata[0], + infoNFT: response2.body.data.mb_views_nft_tokens[0], NftCount: - response2.body.data.mb_views_nft_metadata[0].listings_aggregate.aggregate.count, + response2.body.data.mb_views_nft_tokens[0].listings_aggregate.aggregate.count, dataTransaction:response2.body.data.mb_views_nft_activities_rollup, }); }; const fetchNFTData = (contractId) => { - const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + const response2 = fetch("https://graph.mintbase.xyz/testnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -129,9 +125,10 @@ const fetchNFTData = (contractId) => { dataNFT:response2.body.data.mb_views_active_listings, }); }; -fetchNFTData("pixelpals.mintbase1.near") -fetchStoreFrontData("pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285") -//console.log(state.dataNFT) +fetchNFTData(contractId); +fetchStoreFrontData(metadataId); + + return( <> <Navbar> @@ -161,5 +158,15 @@ return( dataNFT:state.dataNFT, }} /> + <Widget + src="bos.genadrop.near/widget/Mintbase.SDK" + props={{ + mainnet: false, + contractName: "mintspace2.testnet", + loaded: SDK, + onLoad: (SDK) => setSDK(SDK), + onRefresh: (SDK) => setSDK(SDK), + }} + /> </> ) \ No newline at end of file diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx index f63f7a53..7609d758 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx @@ -205,17 +205,20 @@ const hanleVisibleDetails = ()=>{ } -//console.log("data",data.listings[0].token.last_transfer_receipt_id) +//console.log("data",data) return( <Container> <div className="layout"> <div className="view-nft"> <div className="layout-image"> - <img className="nft" src={data.media} alt="nft"/> + {data.media&&data.media.startsWith("https://arweave.net/") + ? <img className="nft" src={data.media} alt="nft"/> + : <img className="nft" src={`https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/${data.media}`} alt="nft"/> + } </div> <div className="layout-title"> <div className="title"> - {data.title} + {data.title?data.title:"This is NFT not title"} </div> <button className="audit"> Audited @@ -228,7 +231,7 @@ return( </a> <a href="#" className="item"> <small>Owner</small> - <small className="text-desc">{data.listings[0].listed_by}</small> + <small className="text-desc">{data.owner}</small> </a> <a href="#" className="item"> <small>Total Minted</small> @@ -237,9 +240,9 @@ return( </div> <div className="minter"> <small> - Minter: <a href="#" className="text-desc text-decoration-none">{data.listings[0].minter}</a> + Minter: <a href="#" className="text-desc text-decoration-none">{data.minter}</a> </small> - <small>Token Id: {data.listings[0].token_id}</small> + <small>Token Id: {data.token_id}</small> <small>Type: Image</small> </div> <div className="footer"> @@ -328,7 +331,7 @@ return( </a> </div> <div>Metadata ID: - <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.id} + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.metadata_id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> @@ -340,20 +343,22 @@ return( <div className="d-flex justify-content-end"> <div className="right-container"> <div className="right-header"> - <span className="text" style={{fontWeight:500}}>1 </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> + <span className="text" style={{fontWeight:500}}>{NftCount} </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> </div> - <div className="right-main"> - <span className="d-flex flex-row justify-content-start">Lowest Price</span> - <div className="text text-left d-flex flex-row justify-content-start align-items-end"> - <div style={{fontSize:"25px",fontWeight:600}}>2.00 - <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + {NftCount>1?<div> + <div className="right-main"> + <span className="d-flex flex-row justify-content-start">Lowest Price</span> + <div className="text text-left d-flex flex-row justify-content-start align-items-end"> + <div style={{fontSize:"25px",fontWeight:600}}>2.00 + <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> </div> - <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> </div> - </div> - <div className="right-footer"> - <button className="btn-cus">Buy With Crypto</button> - </div> + <div className="right-footer"> + <button className="btn-cus">Buy With Crypto</button> + </div> + </div>:<div className="mx-5 my-3 text-left">Not listed</div>} </div> </div> </Container> diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx index 56d38052..4385c6db 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx @@ -1,5 +1,4 @@ const {isDarkModeOn} = props - const Navbar = styled.div` display:flex; flex-direction:row; @@ -28,43 +27,38 @@ const Navbar = styled.div` color:red; } `; +const [SDK,setSDK] = useState(null); const fetchStoreFrontData = (nftId) => { - const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + const response2 = fetch("https://graph.mintbase.xyz/testnet", { method: "POST", headers: { "mb-api-key": "anon", "Content-Type": "application/json", }, body: JSON.stringify({ - query: `query MyQuery { - mb_views_nft_metadata( - where: {id: {_eq: "${nftId}"}} + query: `query getTokenByMetadataId { + mb_views_nft_tokens( + where: {metadata_id: {_eq: "${nftId}"}} ) { - id - description - base_uri media + minter + token_id + metadata_id + splits + royalties_percent + royalties title - listings { - minter - listed_by - market_id - created_at - price - token_id - metadata_id - token { - last_transfer_receipt_id - } - } + nft_contract_id + owner + base_uri + description listings_aggregate { aggregate { - count + count } } - nft_contract_id - } + } mb_views_nft_activities_rollup( where: {metadata_id: {_eq: "${nftId}"}} order_by: {timestamp: desc} @@ -91,15 +85,15 @@ const fetchStoreFrontData = (nftId) => { }); //return response2.body.data; State.update({ - infoNFT: response2.body.data.mb_views_nft_metadata[0], + infoNFT: response2.body.data.mb_views_nft_tokens[0], NftCount: - response2.body.data.mb_views_nft_metadata[0].listings_aggregate.aggregate.count, + response2.body.data.mb_views_nft_tokens[0].listings_aggregate.aggregate.count, dataTransaction:response2.body.data.mb_views_nft_activities_rollup, }); }; const fetchNFTData = (contractId) => { - const response2 = fetch("https://graph.mintbase.xyz/mainnet", { + const response2 = fetch("https://graph.mintbase.xyz/testnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -129,16 +123,20 @@ const fetchNFTData = (contractId) => { dataNFT:response2.body.data.mb_views_active_listings, }); }; -fetchNFTData("pixelpals.mintbase1.near") -fetchStoreFrontData("pixelpals.mintbase1.near:6c807f26cc58a9d25108a98b2335e285") -//console.log(state.dataNFT) +fetchNFTData("testmintbase.mintspace2.testnet"); +fetchStoreFrontData("testmintbase.mintspace2.testnet:93bfaf5d4661ebd149db0340b69a9147"); + +const handleTransfer = ()=>{ + SDK.nftTransfer(state.infoNFT.token_id,"gonzoe.near","testmintbase.mintspace2.testnet") +} + return( <> <Navbar> <div className="container"> <button className="button cus">Burn</button> <button className="button">Multiply</button> - <button className="button">Transfer</button> + <button className="button" onClick={handleTransfer}>Transfer</button> <button className="button">Sell</button> </div> </Navbar> @@ -161,5 +159,15 @@ return( dataNFT:state.dataNFT, }} /> + <Widget + src="bos.genadrop.near/widget/Mintbase.SDK" + props={{ + mainnet: false, + contractName: "mintspace2.testnet", + loaded: SDK, + onLoad: (SDK) => setSDK(SDK), + onRefresh: (SDK) => setSDK(SDK), + }} + /> </> ) \ No newline at end of file diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx index f63f7a53..7609d758 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx @@ -205,17 +205,20 @@ const hanleVisibleDetails = ()=>{ } -//console.log("data",data.listings[0].token.last_transfer_receipt_id) +//console.log("data",data) return( <Container> <div className="layout"> <div className="view-nft"> <div className="layout-image"> - <img className="nft" src={data.media} alt="nft"/> + {data.media&&data.media.startsWith("https://arweave.net/") + ? <img className="nft" src={data.media} alt="nft"/> + : <img className="nft" src={`https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/${data.media}`} alt="nft"/> + } </div> <div className="layout-title"> <div className="title"> - {data.title} + {data.title?data.title:"This is NFT not title"} </div> <button className="audit"> Audited @@ -228,7 +231,7 @@ return( </a> <a href="#" className="item"> <small>Owner</small> - <small className="text-desc">{data.listings[0].listed_by}</small> + <small className="text-desc">{data.owner}</small> </a> <a href="#" className="item"> <small>Total Minted</small> @@ -237,9 +240,9 @@ return( </div> <div className="minter"> <small> - Minter: <a href="#" className="text-desc text-decoration-none">{data.listings[0].minter}</a> + Minter: <a href="#" className="text-desc text-decoration-none">{data.minter}</a> </small> - <small>Token Id: {data.listings[0].token_id}</small> + <small>Token Id: {data.token_id}</small> <small>Type: Image</small> </div> <div className="footer"> @@ -328,7 +331,7 @@ return( </a> </div> <div>Metadata ID: - <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.id} + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.metadata_id} <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> @@ -340,20 +343,22 @@ return( <div className="d-flex justify-content-end"> <div className="right-container"> <div className="right-header"> - <span className="text" style={{fontWeight:500}}>1 </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> + <span className="text" style={{fontWeight:500}}>{NftCount} </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> </div> - <div className="right-main"> - <span className="d-flex flex-row justify-content-start">Lowest Price</span> - <div className="text text-left d-flex flex-row justify-content-start align-items-end"> - <div style={{fontSize:"25px",fontWeight:600}}>2.00 - <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + {NftCount>1?<div> + <div className="right-main"> + <span className="d-flex flex-row justify-content-start">Lowest Price</span> + <div className="text text-left d-flex flex-row justify-content-start align-items-end"> + <div style={{fontSize:"25px",fontWeight:600}}>2.00 + <svg width="30px" height="30px" viewBox="0 0 18 18" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" style={{marginLeft:"-5px"}} class="fill-current text-black dark:text-white"><path d="M5.10976 4.05615C5.47596 4.05615 5.81596 4.24601 6.00779 4.55812L8.07455 7.62657C8.14188 7.7277 8.11455 7.86404 8.01343 7.93136C7.93145 7.98601 7.823 7.97925 7.74835 7.91502L5.71399 6.15052C5.68019 6.1201 5.62807 6.12319 5.59765 6.157C5.58385 6.17249 5.57652 6.19249 5.57652 6.21305V11.7376C5.57652 11.7832 5.61343 11.8198 5.65906 11.8198C5.68357 11.8198 5.70667 11.8091 5.72216 11.7902L11.8717 4.42911C12.072 4.19277 12.3661 4.05643 12.6757 4.05615H12.8906C13.4723 4.05615 13.9438 4.5277 13.9438 5.10939V12.8902C13.9438 13.4719 13.4723 13.9435 12.8906 13.9435C12.5244 13.9435 12.1844 13.7536 11.9926 13.4415L9.92582 10.3731C9.8585 10.2719 9.88582 10.1356 9.98695 10.0683C10.0689 10.0136 10.1774 10.0204 10.252 10.0846L12.2864 11.8491C12.3202 11.8795 12.3723 11.8764 12.4027 11.8426C12.4165 11.8271 12.4238 11.8071 12.4236 11.7866V6.26066C12.4236 6.21503 12.3867 6.17841 12.341 6.17841C12.3168 6.17841 12.2934 6.18911 12.2779 6.20798L6.1292 13.5705C5.92892 13.8069 5.63483 13.9432 5.32526 13.9435H5.11033C4.52864 13.9438 4.05681 13.4725 4.05624 12.8908V5.10939C4.05624 4.5277 4.52779 4.05615 5.10948 4.05615H5.10976Z" fill="currentColor"></path></svg> + </div> + <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> </div> - <strong className="font-weight-light" style={{fontSize:"16px",marginLeft:"20px",color:"gray"}}>$14,5</strong> </div> - </div> - <div className="right-footer"> - <button className="btn-cus">Buy With Crypto</button> - </div> + <div className="right-footer"> + <button className="btn-cus">Buy With Crypto</button> + </div> + </div>:<div className="mx-5 my-3 text-left">Not listed</div>} </div> </div> </Container> From 6ac7c30fe6f1bd6b2e0e4713a6751e79514abd4a Mon Sep 17 00:00:00 2001 From: vo huu nhan <vohuunhan1310@gmail.com> Date: Mon, 15 Apr 2024 20:37:49 +0700 Subject: [PATCH 4/4] fix: style response mobile and dark mode and explore not found --- .../widget/Mintbase/App/NFTDetails/Index.jsx | 34 ++-- .../Mintbase/App/NFTDetails/NFTMore.jsx | 9 +- .../Mintbase/App/NFTDetails/NFTShow.jsx | 155 ++++++++++++++---- .../Mintbase/App/NFTDetails/NFTTable.jsx | 3 +- .../src/Mintbase/App/NFTDetails/Index.jsx | 39 +++-- .../src/Mintbase/App/NFTDetails/NFTMore.jsx | 9 +- .../src/Mintbase/App/NFTDetails/NFTShow.jsx | 155 ++++++++++++++---- .../src/Mintbase/App/NFTDetails/NFTTable.jsx | 3 +- 8 files changed, 306 insertions(+), 101 deletions(-) diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx index d1ff1756..57fb3481 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/Index.jsx @@ -1,6 +1,6 @@ -const {isDarkModeOn} = props -const contractId = props.contractId || "testmintbase.mintspace2.testnet"; -const metadataId = props.metadataId || "testmintbase.mintspace2.testnet:93bfaf5d4661ebd149db0340b69a9147"; +const {isDarkModeOn,accountId} = props +const contractId = props.contractId || "nft.herewallet.near"; +const metadataId = props.metadataId || "nft.herewallet.near:d96acabbdb8bc6ad1317385be84030ed"; const Navbar = styled.div` display:flex; flex-direction:row; @@ -28,11 +28,15 @@ const Navbar = styled.div` .cus{ color:red; } + @media screen and (max-width:768px){ + display:none; + height:10px; + } `; const [SDK,setSDK] = useState(null); const fetchStoreFrontData = (nftId) => { - const response2 = fetch("https://graph.mintbase.xyz/testnet", { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -95,7 +99,7 @@ const fetchStoreFrontData = (nftId) => { }; const fetchNFTData = (contractId) => { - const response2 = fetch("https://graph.mintbase.xyz/testnet", { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -127,18 +131,20 @@ const fetchNFTData = (contractId) => { }; fetchNFTData(contractId); fetchStoreFrontData(metadataId); - +console.log(state.infoNFT.owner) return( <> - <Navbar> - <div className="container"> - <button className="button cus">Burn</button> - <button className="button">Multiply</button> - <button className="button">Transfer</button> - <button className="button">Sell</button> - </div> - </Navbar> + {state.infoNFT.owner==accountId&& + <Navbar> + <div className="container"> + <button className="button cus">Burn</button> + <button className="button">Multiply</button> + <button className="button">Transfer</button> + <button className="button">Sell</button> + </div> + </Navbar> + } <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} props={{ isDarkModeOn, diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx index 82b78490..917f73f8 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTMore.jsx @@ -26,7 +26,7 @@ const Card = styled.a` transition-duration: .5s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); - background-color: #f6f5f4; + background-color: ${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; border-radius: .25rem; cursor: pointer; display: inline-block; @@ -84,18 +84,18 @@ const Container = styled.div` .text{ margin-top:10px; font-size:17px; - color:#000000; + color:${isDarkModeOn?"#ffffff":"#000000"}; } .sub-text{ - color:#86868a; + color:${isDarkModeOn?"rgb(90, 91, 104)":"#86868a"}; } .desc{ display:flex; justify-content:space-between; align-items:center; .text-s{ - color:#000000; + color:${isDarkModeOn?"#ffffff":"#000000"}; } } `; @@ -108,6 +108,7 @@ const Footer = styled.div` margin:auto; gap:30px; margin-top:3rem; + color:${isDarkModeOn?"#ffffff":"#000000"}; .button{ padding:5px 20px; background:none; diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx index 7609d758..4cc9bfc8 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTShow.jsx @@ -1,7 +1,7 @@ const {isDarkModeOn,data,NftCount} = props const Container = styled.div` display:grid; - margin:30px 0; + margin:10px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:20px; @media screen and (max-width:768px){ @@ -14,13 +14,17 @@ const Container = styled.div` } .view-nft{ padding:30px; - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; display:flex; flex-direction:column; justify-content:center; align-item:center; min-width:800px; border-radius:5px; + @media screen and (max-width:768px){ + min-width:100%; + padding:10px; + } } .layout-image{ display:flex; @@ -31,6 +35,11 @@ const Container = styled.div` .nft{ width:512px; height:512px; + object-fit: contain; + @media screen and (max-width:768px){ + width:200px; + height:200px; + } } .desc{ display:grid; @@ -45,15 +54,29 @@ const Container = styled.div` flex-direction:column; padding:7px 10px; gap:3px; - background:#ffffff; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ffffff"}; + text-decoration:none; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .item-view{ + display:flex; + flex-direction:column; + padding:7px 10px; + gap:3px; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ffffff"}; text-decoration:none; border-radius:5px; color:${isDarkModeOn?"#ffffff":"#000000"} } .title{ + color:${isDarkModeOn?"#ffffff":"#000000"}; margin:20px 0; font-size:30px; font-weight:500; + @media screen and (max-width:768px){ + font-size:20px; + } } .layout-title{ display:flex; @@ -63,7 +86,7 @@ const Container = styled.div` } .audit{ border:none; - background:#ebeae9; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ebeae9"}; padding:5px 10px; border-radius:5px; max-height:40px; @@ -71,9 +94,12 @@ const Container = styled.div` :hover{ background:#9dc7f3; } + @media screen and (max-width:768px){ + font-size:16px; + } } .text-desc{ - color:#164b8e; + color:${isDarkModeOn?"rgb(179, 181, 189)":"#164b8e"}; } .minter{ margin-top:20px; @@ -81,11 +107,13 @@ const Container = styled.div` flex-direction:row; gap:30px; } + .footer{ display:flex; margin-top:20px; flex-direction:column; gap:20px; + color:${isDarkModeOn?"#ffffff":"#000000"}; } .btn-nft{ border:1px solid #000000; @@ -96,7 +124,7 @@ const Container = styled.div` cursor:pointer; } .split{ - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:10px 20px; max-hight:300px; width:100%; @@ -106,9 +134,12 @@ const Container = styled.div` transition-duration: .2s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); + @media screen and (max-width:768px){ + min-width:100%; + } } .splits{ - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:30px; max-hight:300px; width:100%; @@ -116,13 +147,14 @@ const Container = styled.div` border-radius:5px; overflow: hidden; transition: height .25s ease-out; + color:${isDarkModeOn?"#ffffff":"#000000"} } .split-title{ display:flex; flex-direction:row; justify-content:space-between; margin-bottom:20px; - + color:${isDarkModeOn?"#ffffff":"#000000"} } .left{ margin-top:10px; @@ -140,7 +172,8 @@ const Container = styled.div` grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; @media screen and (max-width:768px){ - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); + font-size:16px; } } .right-header{ @@ -179,6 +212,13 @@ const Container = styled.div` border-radius: 5px; margin-right:40px; } + .truncate{ + display:block; + width: 180px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .text{ color:${isDarkModeOn?"#ffffff":"#000000"}; } @@ -191,6 +231,49 @@ const Container = styled.div` width:100%; color:${isDarkModeOn?"#000000":"#ffffff"} } + .custom-sale{ + display:flex; + justify-content:end; + } + @media screen and (max-width:768px){ + .item-view{ + flex-direction:row; + justify-content:space-between; + background:none; + padding:0 10px; + } + .item{ + width:100%; + } + .minter{ + flex-direction:column; + padding:0px 10px; + gap:10px; + margin-top:10px; + } + .item-minter{ + display:flex; + flex-direction:row; + justify-content:space-between; + } + .btn-nft{ + font-size:13px; + } + .text-decs{ + font-size:15px; + } + .splits{ + min-width:100%; + font-size:16px; + padding:10px; + } + .custom-sale{ + display:block; + } + .right-container{ + min-width:100%; + } + } `; const [dropdowVisible,setDropDownVisible] = useState(true) @@ -203,9 +286,6 @@ const hanleVisible = ()=>{ const hanleVisibleDetails = ()=>{ setVisible(!visible) } - - -//console.log("data",data) return( <Container> <div className="layout"> @@ -225,28 +305,35 @@ return( </button> </div> <div className="desc"> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Contract</small> <small className="text-desc">{data.nft_contract_id}</small> </a> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Owner</small> <small className="text-desc">{data.owner}</small> </a> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Total Minted</small> <small>{NftCount}</small> </a> </div> <div className="minter"> - <small> - Minter: <a href="#" className="text-desc text-decoration-none">{data.minter}</a> + <small className="item-minter"> + <span>Minter: </span> + <a href="#" className="text-desc text-decoration-none">{data.minter}</a> + </small> + <small className="item-minter"> + <span>Token Id:</span> + <span>{data.token_id}</span> + </small> + <small className="item-minter"> + <span>Type: </span> + <span>Image</span> </small> - <small>Token Id: {data.token_id}</small> - <small>Type: Image</small> </div> <div className="footer"> - <div>{data.description}</div> + <div className="px-2">{data.description}</div> <div className="d-flex flex-row gap-3"> <a href={`https://mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> @@ -315,23 +402,31 @@ return( {visible&&( <div className="splits"> <div className="d-flex flex-column gap-3"> - <div>Storage Gateway: - <a href={data.base_uri} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.base_uri} + <div className="d-flex flex-row"> + <span>Storage Gateway: </span> + <a href={data.base_uri} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.base_uri}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Storage ID: - <a href={data.media} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.media&&(data.media).replace("https://arweave.net/","")} - <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + <div className="d-flex flex-row"> + <span>Storage ID: </span> + <a href={data.media} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.media&&(data.media).replace("https://arweave.net/","")}</span> + <img className="ml-" width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Contract: - <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.nft_contract_id} + <div className="d-flex flex-row"> + <span>Contract: </span> + <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.nft_contract_id}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Metadata ID: - <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.metadata_id} + <div className="d-flex flex-row"> + <span>Metadata ID: </span> + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.metadata_id}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> @@ -340,7 +435,7 @@ return( )} </div> </div> - <div className="d-flex justify-content-end"> + <div className="custom-sale"> <div className="right-container"> <div className="right-header"> <span className="text" style={{fontWeight:500}}>{NftCount} </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> diff --git a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx index fdc7ff28..af107deb 100644 --- a/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx +++ b/apps/BosGenaDrop/widget/Mintbase/App/NFTDetails/NFTTable.jsx @@ -1,6 +1,6 @@ const {isDarkModeOn,dataTransaction} = props const Provenance = styled.div` - background:#f6f5f4; + background-color: ${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:30px; border-bottom:1px solid #bdbbb4; .title{ @@ -187,6 +187,7 @@ const ContainerTable = styled.div` .header, .trx-row { grid-template-columns: repeat(7, 150px); + font-size:13px; } } `; diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx index 4385c6db..57fb3481 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/Index.jsx @@ -1,4 +1,6 @@ -const {isDarkModeOn} = props +const {isDarkModeOn,accountId} = props +const contractId = props.contractId || "nft.herewallet.near"; +const metadataId = props.metadataId || "nft.herewallet.near:d96acabbdb8bc6ad1317385be84030ed"; const Navbar = styled.div` display:flex; flex-direction:row; @@ -26,11 +28,15 @@ const Navbar = styled.div` .cus{ color:red; } + @media screen and (max-width:768px){ + display:none; + height:10px; + } `; const [SDK,setSDK] = useState(null); const fetchStoreFrontData = (nftId) => { - const response2 = fetch("https://graph.mintbase.xyz/testnet", { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -93,7 +99,7 @@ const fetchStoreFrontData = (nftId) => { }; const fetchNFTData = (contractId) => { - const response2 = fetch("https://graph.mintbase.xyz/testnet", { + const response2 = fetch("https://graph.mintbase.xyz/mainnet", { method: "POST", headers: { "mb-api-key": "anon", @@ -123,23 +129,22 @@ const fetchNFTData = (contractId) => { dataNFT:response2.body.data.mb_views_active_listings, }); }; -fetchNFTData("testmintbase.mintspace2.testnet"); -fetchStoreFrontData("testmintbase.mintspace2.testnet:93bfaf5d4661ebd149db0340b69a9147"); - -const handleTransfer = ()=>{ - SDK.nftTransfer(state.infoNFT.token_id,"gonzoe.near","testmintbase.mintspace2.testnet") -} +fetchNFTData(contractId); +fetchStoreFrontData(metadataId); +console.log(state.infoNFT.owner) return( <> - <Navbar> - <div className="container"> - <button className="button cus">Burn</button> - <button className="button">Multiply</button> - <button className="button" onClick={handleTransfer}>Transfer</button> - <button className="button">Sell</button> - </div> - </Navbar> + {state.infoNFT.owner==accountId&& + <Navbar> + <div className="container"> + <button className="button cus">Burn</button> + <button className="button">Multiply</button> + <button className="button">Transfer</button> + <button className="button">Sell</button> + </div> + </Navbar> + } <Widget src={"bos.genadrop.near/widget/Mintbase.App.NFTDetails.NFTShow"} props={{ isDarkModeOn, diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx index 82b78490..917f73f8 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTMore.jsx @@ -26,7 +26,7 @@ const Card = styled.a` transition-duration: .5s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); - background-color: #f6f5f4; + background-color: ${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; border-radius: .25rem; cursor: pointer; display: inline-block; @@ -84,18 +84,18 @@ const Container = styled.div` .text{ margin-top:10px; font-size:17px; - color:#000000; + color:${isDarkModeOn?"#ffffff":"#000000"}; } .sub-text{ - color:#86868a; + color:${isDarkModeOn?"rgb(90, 91, 104)":"#86868a"}; } .desc{ display:flex; justify-content:space-between; align-items:center; .text-s{ - color:#000000; + color:${isDarkModeOn?"#ffffff":"#000000"}; } } `; @@ -108,6 +108,7 @@ const Footer = styled.div` margin:auto; gap:30px; margin-top:3rem; + color:${isDarkModeOn?"#ffffff":"#000000"}; .button{ padding:5px 20px; background:none; diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx index 7609d758..4cc9bfc8 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTShow.jsx @@ -1,7 +1,7 @@ const {isDarkModeOn,data,NftCount} = props const Container = styled.div` display:grid; - margin:30px 0; + margin:10px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:20px; @media screen and (max-width:768px){ @@ -14,13 +14,17 @@ const Container = styled.div` } .view-nft{ padding:30px; - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; display:flex; flex-direction:column; justify-content:center; align-item:center; min-width:800px; border-radius:5px; + @media screen and (max-width:768px){ + min-width:100%; + padding:10px; + } } .layout-image{ display:flex; @@ -31,6 +35,11 @@ const Container = styled.div` .nft{ width:512px; height:512px; + object-fit: contain; + @media screen and (max-width:768px){ + width:200px; + height:200px; + } } .desc{ display:grid; @@ -45,15 +54,29 @@ const Container = styled.div` flex-direction:column; padding:7px 10px; gap:3px; - background:#ffffff; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ffffff"}; + text-decoration:none; + border-radius:5px; + color:${isDarkModeOn?"#ffffff":"#000000"} + } + .item-view{ + display:flex; + flex-direction:column; + padding:7px 10px; + gap:3px; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ffffff"}; text-decoration:none; border-radius:5px; color:${isDarkModeOn?"#ffffff":"#000000"} } .title{ + color:${isDarkModeOn?"#ffffff":"#000000"}; margin:20px 0; font-size:30px; font-weight:500; + @media screen and (max-width:768px){ + font-size:20px; + } } .layout-title{ display:flex; @@ -63,7 +86,7 @@ const Container = styled.div` } .audit{ border:none; - background:#ebeae9; + background:${isDarkModeOn?"rgb(40, 42, 58)":"#ebeae9"}; padding:5px 10px; border-radius:5px; max-height:40px; @@ -71,9 +94,12 @@ const Container = styled.div` :hover{ background:#9dc7f3; } + @media screen and (max-width:768px){ + font-size:16px; + } } .text-desc{ - color:#164b8e; + color:${isDarkModeOn?"rgb(179, 181, 189)":"#164b8e"}; } .minter{ margin-top:20px; @@ -81,11 +107,13 @@ const Container = styled.div` flex-direction:row; gap:30px; } + .footer{ display:flex; margin-top:20px; flex-direction:column; gap:20px; + color:${isDarkModeOn?"#ffffff":"#000000"}; } .btn-nft{ border:1px solid #000000; @@ -96,7 +124,7 @@ const Container = styled.div` cursor:pointer; } .split{ - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:10px 20px; max-hight:300px; width:100%; @@ -106,9 +134,12 @@ const Container = styled.div` transition-duration: .2s; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); + @media screen and (max-width:768px){ + min-width:100%; + } } .splits{ - background:#f6f5f4; + background:${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:30px; max-hight:300px; width:100%; @@ -116,13 +147,14 @@ const Container = styled.div` border-radius:5px; overflow: hidden; transition: height .25s ease-out; + color:${isDarkModeOn?"#ffffff":"#000000"} } .split-title{ display:flex; flex-direction:row; justify-content:space-between; margin-bottom:20px; - + color:${isDarkModeOn?"#ffffff":"#000000"} } .left{ margin-top:10px; @@ -140,7 +172,8 @@ const Container = styled.div` grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; @media screen and (max-width:768px){ - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(0, 1fr)); + font-size:16px; } } .right-header{ @@ -179,6 +212,13 @@ const Container = styled.div` border-radius: 5px; margin-right:40px; } + .truncate{ + display:block; + width: 180px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .text{ color:${isDarkModeOn?"#ffffff":"#000000"}; } @@ -191,6 +231,49 @@ const Container = styled.div` width:100%; color:${isDarkModeOn?"#000000":"#ffffff"} } + .custom-sale{ + display:flex; + justify-content:end; + } + @media screen and (max-width:768px){ + .item-view{ + flex-direction:row; + justify-content:space-between; + background:none; + padding:0 10px; + } + .item{ + width:100%; + } + .minter{ + flex-direction:column; + padding:0px 10px; + gap:10px; + margin-top:10px; + } + .item-minter{ + display:flex; + flex-direction:row; + justify-content:space-between; + } + .btn-nft{ + font-size:13px; + } + .text-decs{ + font-size:15px; + } + .splits{ + min-width:100%; + font-size:16px; + padding:10px; + } + .custom-sale{ + display:block; + } + .right-container{ + min-width:100%; + } + } `; const [dropdowVisible,setDropDownVisible] = useState(true) @@ -203,9 +286,6 @@ const hanleVisible = ()=>{ const hanleVisibleDetails = ()=>{ setVisible(!visible) } - - -//console.log("data",data) return( <Container> <div className="layout"> @@ -225,28 +305,35 @@ return( </button> </div> <div className="desc"> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Contract</small> <small className="text-desc">{data.nft_contract_id}</small> </a> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Owner</small> <small className="text-desc">{data.owner}</small> </a> - <a href="#" className="item"> + <a href="#" className="item-view"> <small>Total Minted</small> <small>{NftCount}</small> </a> </div> <div className="minter"> - <small> - Minter: <a href="#" className="text-desc text-decoration-none">{data.minter}</a> + <small className="item-minter"> + <span>Minter: </span> + <a href="#" className="text-desc text-decoration-none">{data.minter}</a> + </small> + <small className="item-minter"> + <span>Token Id:</span> + <span>{data.token_id}</span> + </small> + <small className="item-minter"> + <span>Type: </span> + <span>Image</span> </small> - <small>Token Id: {data.token_id}</small> - <small>Type: Image</small> </div> <div className="footer"> - <div>{data.description}</div> + <div className="px-2">{data.description}</div> <div className="d-flex flex-row gap-3"> <a href={`https://mintbase.xyz/meta/${data.id&&data.id.replace(":","%3A")}`} target="_blank" className="btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none"> <img width="20" height="20" src="https://img.icons8.com/material-outlined/24/share-rounded.png" alt="share-rounded"/> @@ -315,23 +402,31 @@ return( {visible&&( <div className="splits"> <div className="d-flex flex-column gap-3"> - <div>Storage Gateway: - <a href={data.base_uri} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.base_uri} + <div className="d-flex flex-row"> + <span>Storage Gateway: </span> + <a href={data.base_uri} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.base_uri}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Storage ID: - <a href={data.media} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.media&&(data.media).replace("https://arweave.net/","")} - <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> + <div className="d-flex flex-row"> + <span>Storage ID: </span> + <a href={data.media} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.media&&(data.media).replace("https://arweave.net/","")}</span> + <img className="ml-" width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Contract: - <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.nft_contract_id} + <div className="d-flex flex-row"> + <span>Contract: </span> + <a href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.nft_contract_id}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> - <div>Metadata ID: - <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="text-decoration-none" style={{color:"#5861a8"}}>{data.metadata_id} + <div className="d-flex flex-row"> + <span>Metadata ID: </span> + <a href={`https://www.mintbase.xyz/meta/${data.id}`} target="_blank" className="d-flex flex-row align-items-center text-decoration-none" style={{color:"#5861a8"}}> + <span className="truncate">{data.metadata_id}</span> <img width="10" height="10" src="https://img.icons8.com/ios/50/up-right-arrow.png" alt="down-left-arrow"/> </a> </div> @@ -340,7 +435,7 @@ return( )} </div> </div> - <div className="d-flex justify-content-end"> + <div className="custom-sale"> <div className="right-container"> <div className="right-header"> <span className="text" style={{fontWeight:500}}>{NftCount} </span> of <span className="text" style={{fontWeight:500}}>1 </span> Listed <span className="text" style={{fontWeight:500}}> as Simple Sale</span> diff --git a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx index fdc7ff28..af107deb 100644 --- a/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx +++ b/build/BosGenaDrop/src/Mintbase/App/NFTDetails/NFTTable.jsx @@ -1,6 +1,6 @@ const {isDarkModeOn,dataTransaction} = props const Provenance = styled.div` - background:#f6f5f4; + background-color: ${isDarkModeOn?"rgb(30, 32, 48)":"#f6f5f4"}; padding:30px; border-bottom:1px solid #bdbbb4; .title{ @@ -187,6 +187,7 @@ const ContainerTable = styled.div` .header, .trx-row { grid-template-columns: repeat(7, 150px); + font-size:13px; } } `;