| 6 | "": "State.init({\\\\n copiedShareUrl: false,\\\\n});\\\\n\\\\nconst accountUrl = `/#/vfdao.near/widget/App.Index?page=nftDetails&contractId=${accountId}`;\\\\nconst shareUrl = `https://app.vfdao.org${accountUrl}`;\\\\nconst {\\\\n isDarkModeOn,\\\\n data,\\\\n NftCount,\\\\n listingCount,\\\\n connectedDao,\\\\n usersTokens,\\\\n} = props;\\\\nconst { buyToken } = VM.require(\\\\n \\\\\\\"bos.genadrop.near/widget/Mintbase.NFT.modules\\\\\\\"\\\\n);\\\\nconst { buyTokenAsADao } = VM.require(\\\\n \\\\\\\"bos.genadrop.near/widget/Mintbase.utils.sdk\\\\\\\"\\\\n) || { buyTokenAsADao: () => {} };\\\\nconst { href } = VM.require(\\\\\\\"buildhub.near/widget/lib.url\\\\\\\") || {\\\\n href: () => {},\\\\n};\\\\nconst nearIcon = (\\\\n <svg\\\\n width=\\\\\\\"25px\\\\\\\"\\\\n height=\\\\\\\"25px\\\\\\\"\\\\n viewBox=\\\\\\\"0 0 18 18\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\"\\\\n class=\\\\\\\"fill-current text-black dark:text-white\\\\\\\"\\\\n >\\\\n <path\\\\n 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\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n ></path>\\\\n </svg>\\\\n);\\\\nconst usdtIcon = (\\\\n <svg\\\\n width=\\\\\\\"25px\\\\\\\"\\\\n height=\\\\\\\"25px\\\\\\\"\\\\n viewBox=\\\\\\\"0 0 24 24\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\"\\\\n class=\\\\\\\"fill-current text-black dark:text-white\\\\\\\"\\\\n >\\\\n <path\\\\n fill-rule=\\\\\\\"evenodd\\\\\\\"\\\\n clip-rule=\\\\\\\"evenodd\\\\\\\"\\\\n d=\\\\\\\"M17.9572 6V8.12708H13.4849V9.60186C16.6259 9.75946 18.9825 10.4068 19 11.1826L18.9999 12.8C18.9824 13.5759 16.6259 14.2231 13.4849 14.3807V18H10.5152V14.3807C7.37411 14.2231 5.01749 13.5759 5 12.8L5.00012 11.1826C5.01759 10.4068 7.37411 9.75946 10.5152 9.60186V8.12708H6.04284V6H17.9572ZM12 13.2696C15.3521 13.2696 18.1538 12.7222 18.8395 11.9913C18.258 11.3715 16.1549 10.8837 13.4849 10.7497V12.2938C13.0063 12.3178 12.5095 12.3304 12 12.3304C11.4905 12.3304 10.9937 12.3178 10.5152 12.2938V10.7497C7.84511 10.8837 5.74197 11.3715 5.16051 11.9913C5.84619 12.7222 8.64794 13.2696 12 13.2696Z\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n ></path>\\\\n </svg>\\\\n);\\\\nconst usdcIcon = (\\\\n <svg\\\\n width=\\\\\\\"25px\\\\\\\"\\\\n height=\\\\\\\"24px\\\\\\\"\\\\n viewBox=\\\\\\\"0 0 18 18\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\"\\\\n class=\\\\\\\"fill-current text-black dark:text-white\\\\\\\"\\\\n >\\\\n <path\\\\n d=\\\\\\\"M7.47402 14.1481C7.4776 14.1885 7.47065 14.2292 7.45386 14.2661C7.43706 14.3031 7.41099 14.3351 7.37817 14.359C7.34535 14.3829 7.30691 14.3979 7.26658 14.4025C7.22625 14.4072 7.1854 14.4013 7.148 14.3855C5.94359 13.9999 4.89282 13.2416 4.14728 12.2201C3.40175 11.1986 3 9.96668 3 8.70205C3 7.43741 3.40175 6.20547 4.14728 5.18396C4.89282 4.16245 5.94359 3.40419 7.148 3.01858C7.1854 3.00277 7.22625 2.9969 7.26658 3.00155C7.30691 3.0062 7.34535 3.0212 7.37817 3.0451C7.41099 3.06901 7.43706 3.10099 7.45386 3.13796C7.47065 3.17492 7.4776 3.2156 7.47402 3.25604V3.71913C7.47124 3.78612 7.44975 3.851 7.41197 3.90639C7.3742 3.96179 7.32166 4.00549 7.26031 4.03255C6.30285 4.38214 5.47599 5.01761 4.89178 5.85286C4.30756 6.68811 3.99423 7.68276 3.99423 8.70205C3.99423 9.72134 4.30756 10.716 4.89178 11.5512C5.47599 12.3865 6.30285 13.022 7.26031 13.3716C7.32166 13.3986 7.3742 13.4423 7.41197 13.4977C7.44975 13.5531 7.47124 13.618 7.47402 13.685V14.1481Z\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n ></path>\\\\n <path\\\\n d=\\\\\\\"M9.46248 12.4304C9.46248 12.4963 9.4363 12.5595 9.38968 12.6061C9.34307 12.6527 9.27985 12.6789 9.21393 12.6789H8.71681C8.65089 12.6789 8.58767 12.6527 8.54106 12.6061C8.49444 12.5595 8.46826 12.4963 8.46826 12.4304V11.6456C8.03635 11.629 7.62386 11.4618 7.30235 11.1729C6.98084 10.884 6.77059 10.4917 6.70807 10.064C6.70268 10.0308 6.70459 9.99674 6.71368 9.9643C6.72276 9.93185 6.7388 9.90177 6.76068 9.87615C6.78256 9.85052 6.80975 9.82996 6.84037 9.8159C6.87099 9.80184 6.90431 9.79462 6.938 9.79472H7.50499C7.5626 9.79522 7.61827 9.81552 7.66266 9.85223C7.70706 9.88894 7.73746 9.9398 7.74877 9.99629C7.85411 10.4878 8.13969 10.8676 9.00757 10.8676C9.6494 10.8676 10.1047 10.51 10.1047 9.97362C10.1047 9.43711 9.83638 9.23408 8.89366 9.07966C7.50404 8.89264 6.84568 8.47002 6.84568 7.38101C6.86174 6.95441 7.03741 6.5494 7.33791 6.24617C7.63841 5.94294 8.04182 5.76361 8.46826 5.74369V4.97365C8.46826 4.90773 8.49444 4.84451 8.54106 4.7979C8.58767 4.75128 8.65089 4.7251 8.71681 4.7251H9.21393C9.27985 4.7251 9.34307 4.75128 9.38968 4.7979C9.4363 4.84451 9.46248 4.90773 9.46248 4.97365V5.76556C9.82128 5.80342 10.1584 5.95556 10.4242 6.19955C10.69 6.44354 10.8703 6.76647 10.9386 7.12072C10.9453 7.15438 10.9445 7.18912 10.9361 7.22241C10.9278 7.2557 10.9121 7.2867 10.8902 7.31318C10.8684 7.33965 10.8409 7.36093 10.8098 7.37546C10.7787 7.38999 10.7448 7.39742 10.7104 7.3972H10.1876C10.1334 7.39668 10.0808 7.37861 10.0377 7.34569C9.99468 7.31277 9.96346 7.26678 9.94875 7.21461C9.80729 6.73539 9.46482 6.52756 8.86936 6.52756C8.211 6.52756 7.86975 6.84467 7.86975 7.29156C7.86975 7.76292 8.06468 7.99868 9.07239 8.14501C10.4379 8.33184 11.145 8.72201 11.145 9.88414C11.131 10.3335 10.9515 10.7618 10.6409 11.0868C10.3304 11.4118 9.9107 11.6107 9.46248 11.6451V12.4304Z\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n ></path>\\\\n <path\\\\n d=\\\\\\\"M10.7825 14.3855C10.7451 14.4013 10.7043 14.4072 10.6639 14.4025C10.6236 14.3979 10.5852 14.3829 10.5523 14.359C10.5195 14.3351 10.4934 14.3031 10.4766 14.2661C10.4599 14.2292 10.4529 14.1885 10.4565 14.1481V13.685C10.4559 13.6172 10.476 13.5508 10.5142 13.4948C10.5524 13.4387 10.6068 13.3957 10.6702 13.3716C11.6277 13.022 12.4545 12.3865 13.0387 11.5512C13.6229 10.716 13.9363 9.72134 13.9363 8.70205C13.9363 7.68276 13.6229 6.68811 13.0387 5.85286C12.4545 5.01761 11.6277 4.38214 10.6702 4.03255C10.6088 4.00549 10.5563 3.96179 10.5185 3.90639C10.4808 3.85099 10.4593 3.78612 10.4565 3.71912V3.25604C10.4529 3.2156 10.4599 3.17492 10.4766 3.13796C10.4934 3.10099 10.5195 3.06901 10.5523 3.0451C10.5852 3.0212 10.6236 3.0062 10.6639 3.00155C10.7043 2.9969 10.7451 3.00277 10.7825 3.01858C11.9869 3.40419 13.0377 4.16245 13.7832 5.18396C14.5288 6.20547 14.9305 7.43741 14.9305 8.70205C14.9305 9.96668 14.5288 11.1986 13.7832 12.2201C13.0377 13.2416 11.9869 13.9999 10.7825 14.3855Z\\\\\\\"\\\\n fill=\\\\\\\"currentColor\\\\\\\"\\\\n ></path>\\\\n </svg>\\\\n);\\\\nconst listingType = {\\\\n near: nearIcon,\\\\n \\\\\\\"ft::a0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.factory.bridge.near\\\\\\\": usdcIcon,\\\\n \\\\\\\"ft::dac17f958d2ee523a2206206994597c13d831ec7.factory.bridge.near\\\\\\\": usdtIcon,\\\\n \\\\\\\"usdc.fakes.testnet\\\\\\\": usdcIcon,\\\\n \\\\\\\"usdt.fakes.testnet\\\\\\\": usdtIcon,\\\\n};\\\\nconst Container = styled.div`\\\\n display: grid;\\\\n margin: 10px 0;\\\\n word-wrap: break-word;\\\\n white-space: normal;\\\\n overflow-wrap: anywhere;\\\\n grid-template-columns: repeat(2, minmax(0, 1fr));\\\\n gap: 20px;\\\\n @media screen and (max-width: 768px) {\\\\n grid-template-columns: repeat(1, minmax(0, 1fr));\\\\n }\\\\n .layout {\\\\n display: flex;\\\\n flex-direction: column;\\\\n gap: 20px;\\\\n }\\\\n .view-nft {\\\\n padding: 30px;\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(30, 32, 48)\\\\\\\" : \\\\\\\"white\\\\\\\"};\\\\n display: flex;\\\\n flex-direction: column;\\\\n justify-content: center;\\\\n align-item: center;\\\\n min-width: 800px;\\\\n border-radius: 5px;\\\\n @media screen and (max-width: 768px) {\\\\n min-width: 100%;\\\\n padding: 10px;\\\\n }\\\\n }\\\\n .layout-image {\\\\n display: flex;\\\\n justify-content: center;\\\\n align-items: center;\\\\n margin-bottom: 20px;\\\\n }\\\\n .nft {\\\\n width: 100%;\\\\n max-width: 512px; /* Sets a maximum width */\\\\n height: auto; /* Keeps the aspect ratio */\\\\n object-fit: contain;\\\\n margin: 0 auto; /* Center the image horizontally */\\\\n border-radius: 10px; /* Adds 10px rounded corners */\\\\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds a shadow effect */\\\\n \\\\n @media screen and (max-width: 768px) {\\\\n max-width: 100%; /* Use a smaller max-width on smaller screens */\\\\n }\\\\n}\\\\n}\\\\n\\\\n }\\\\n .desc {\\\\n display: grid;\\\\n grid-template-columns: repeat(3, minmax(0, 1fr));\\\\n gap: 10px;\\\\n @media screen and (max-width: 768px) {\\\\n grid-template-columns: repeat(1, minmax(0, 1fr));\\\\n }\\\\n }\\\\n .item {\\\\n display: flex;\\\\n flex-direction: column;\\\\n padding: 7px 10px;\\\\n gap: 3px;\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(40, 42, 58)\\\\\\\" : \\\\\\\"#ffffff\\\\\\\"};\\\\n text-decoration: none;\\\\n border-radius: 5px;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .item-view {\\\\n display: flex;\\\\n flex-direction: column;\\\\n padding: 7px 10px;\\\\n gap: 3px;\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(40, 42, 58)\\\\\\\" : \\\\\\\"#ffffff\\\\\\\"};\\\\n text-decoration: none;\\\\n border-radius: 5px;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .title {\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n margin: 15px 0;\\\\n font-size: 30px;\\\\n font-weight: 600;\\\\n @media screen and (max-width: 768px) {\\\\n font-size: 20px;\\\\n }\\\\n }\\\\n .layout-title {\\\\n display: flex;\\\\n flex-direction: row;\\\\n justify-content: space-between;\\\\n align-items: center;\\\\n }\\\\n .audit {\\\\n border: none;\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(40, 42, 58)\\\\\\\" : \\\\\\\"#ebeae9\\\\\\\"};\\\\n padding: 5px 10px;\\\\n border-radius: 5px;\\\\n max-height: 40px;\\\\n cursor: pointer;\\\\n :hover {\\\\n background: #9dc7f3;\\\\n }\\\\n @media screen and (max-width: 768px) {\\\\n font-size: 16px;\\\\n }\\\\n }\\\\n .text-desc {\\\\n color: ${isDarkModeOn ? \\\\\\\"rgb(179, 181, 189)\\\\\\\" : \\\\\\\"#164b8e\\\\\\\"};\\\\n }\\\\n .minter {\\\\n margin-top: 20px;\\\\n display: flex;\\\\n flex-direction: row;\\\\n gap: 30px;\\\\n word-wrap: break-word;\\\\n white-space: normal;\\\\n overflow-wrap: anywhere;\\\\n }\\\\n .footer {\\\\n display: flex;\\\\n margin-top: 20px;\\\\n flex-direction: column;\\\\n gap: 20px;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .btn-nft {\\\\n border: 1px solid #232528;\\\\n background: none;\\\\n padding: 3px 6px;\\\\n border-radius: 5px;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n cursor: pointer;\\\\n }\\\\n .split {\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(30, 32, 48)\\\\\\\" : \\\\\\\"white\\\\\\\"};\\\\n padding: 10px 20px;\\\\n max-hight: 300px;\\\\n width: 100%;\\\\n min-width: 800px;\\\\n border-radius: 5px 5px 0 0;\\\\n cursor: pointer;\\\\n transition-duration: 0.2s;\\\\n transition-property: all;\\\\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\\\\n @media screen and (max-width: 768px) {\\\\n min-width: 100%;\\\\n }\\\\n }\\\\n .splits {\\\\n background: ${isDarkModeOn ? \\\\\\\"rgb(30, 32, 48)\\\\\\\" : \\\\\\\"white\\\\\\\"};\\\\n padding: 30px;\\\\n max-hight: 300px;\\\\n width: 100%;\\\\n min-width: 800px;\\\\n border-radius: 5px;\\\\n overflow: hidden;\\\\n transition: height 0.25s ease-out;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .split-title {\\\\n display: flex;\\\\n flex-direction: row;\\\\n justify-content: space-between;\\\\n margin-bottom: 20px;\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .left {\\\\n margin-top: 10px;\\\\n font-size: 19px;\\\\n font-weight: 600;\\\\n }\\\\n .right {\\\\n margin-top: 10px;\\\\n display: flex;\\\\n flex-direction: row;\\\\n gap: 10px;\\\\n }\\\\n .split-content {\\\\n display: grid;\\\\n grid-template-columns: repeat(3, minmax(0, 1fr));\\\\n gap: 10px;\\\\n @media screen and (max-width: 768px) {\\\\n grid-template-columns: repeat(2, minmax(0, 1fr));\\\\n font-size: 16px;\\\\n }\\\\n }\\\\n .right-header {\\\\n padding: 10px 20px;\\\\n color: gray;\\\\n background: ${isDarkModeOn ? \\\\\\\"#282a3a\\\\\\\" : \\\\\\\"#eceae8\\\\\\\"};\\\\n width: 100%;\\\\n display: flex;\\\\n text-align: start;\\\\n align-items: start;\\\\n justify-content: start;\\\\n flex-direction: row;\\\\n gap: 3px;\\\\n }\\\\n .right-footer {\\\\n display: flex;\\\\n justify-content: space-between;\\\\n flex-direction: column;\\\\n gap: 20px;\\\\n width: 100%;\\\\n padding: 20px 20px;\\\\n @media screen and (max-width: 768px) {\\\\n justify-content: center;\\\\n }\\\\n }\\\\n .right-main {\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n padding: 10px 20px;\\\\n margin-top: 10px;\\\\n }\\\\n .right-container {\\\\n border: none;\\\\n background: ${isDarkModeOn ? \\\\\\\"#1e2030\\\\\\\" : \\\\\\\"white\\\\\\\"};\\\\n display: flex;\\\\n flex-direction: column;\\\\n min-width: 400px;\\\\n max-height: 200px;\\\\n border-radius: 5px;\\\\n margin-right: 40px;\\\\n }\\\\n .truncate {\\\\n display: block;\\\\n width: 180px;\\\\n white-space: nowrap;\\\\n overflow: hidden;\\\\n text-overflow: ellipsis;\\\\n }\\\\n .text {\\\\n color: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n }\\\\n .btn-cus {\\\\n background: ${isDarkModeOn ? \\\\\\\"#ffffff\\\\\\\" : \\\\\\\"#232528\\\\\\\"};\\\\n border: none;\\\\n border-radius: 5px;\\\\n outline: none;\\\\n padding: 5px 20px;\\\\n width: 100%;\\\\n color: ${isDarkModeOn ? \\\\\\\"#232528\\\\\\\" : \\\\\\\"#ffffff\\\\\\\"};\\\\n }\\\\n .custom-sale {\\\\n display: flex;\\\\n justify-content: end;\\\\n }\\\\n @media screen and (max-width: 768px) {\\\\n .item-view {\\\\n flex-direction: row;\\\\n justify-content: space-between;\\\\n background: none;\\\\n padding: 0 10px;\\\\n }\\\\n .item {\\\\n width: 100%;\\\\n }\\\\n .minter {\\\\n flex-direction: column;\\\\n padding: 0px 10px;\\\\n gap: 10px;\\\\n margin-top: 10px;\\\\n }\\\\n .item-minter {\\\\n display: flex;\\\\n flex-direction: row;\\\\n justify-content: space-between;\\\\n }\\\\n .btn-nft {\\\\n font-size: 13px;\\\\n }\\\\n .text-decs {\\\\n font-size: 15px;\\\\n }\\\\n .splits {\\\\n min-width: 100%;\\\\n font-size: 16px;\\\\n padding: 10px;\\\\n }\\\\n .custom-sale {\\\\n display: block;\\\\n }\\\\n .right-container {\\\\n min-width: 100%;\\\\n }\\\\n }\\\\n`;\\\\nconst [dropdowVisible, setDropDownVisible] = useState(true);\\\\nconst [visible, setVisible] = useState(true);\\\\nconst hanleVisible = () => {\\\\n setDropDownVisible(!dropdowVisible);\\\\n};\\\\nconst hanleVisibleDetails = () => {\\\\n setVisible(!visible);\\\\n};\\\\nconst YoctoToNear = (amountYocto) => {\\\\n return new Big(amountYocto || 0).div(new Big(10).pow(24)).toString();\\\\n};\\\\nconst getUsdValue = (price) => {\\\\n const convertToNear = YoctoToNear(price);\\\\n const res = fetch(\\\\n `https://api.coingecko.com/api/v3/simple/price?ids=near&vs_currencies=usd`\\\\n );\\\\n if (res.ok) {\\\\n const multiplyBy = Object.values(res?.body)[0]?.usd;\\\\n const value = multiplyBy * Number(convertToNear)?.toFixed(2);\\\\n return value?.toFixed(4) !== \\\\\\\"NaN\\\\\\\" ? `$${value?.toFixed(2)}` : 0;\\\\n }\\\\n};\\\\nconst firstListing = data?.listings[0];\\\\nconst handleBuy = () => {\\\\n if (!context.accountId) return;\\\\n buyToken(\\\\n data?.nft_contract_id,\\\\n data?.token_id,\\\\n data?.listings[0]?.price,\\\\n context?.networkId === \\\\\\\"mainnet\\\\\\\",\\\\n firstListing?.currency\\\\n );\\\\n};\\\\nconst handleBuyAsADao = () => {\\\\n if (!context.accountId && !connectedDao?.address) return;\\\\n buyTokenAsADao(\\\\n connectedDao?.address,\\\\n data?.nft_contract_id,\\\\n data?.token_id,\\\\n data?.listings[0]?.price,\\\\n context?.networkId === \\\\\\\"mainnet\\\\\\\",\\\\n firstListing?.currency\\\\n );\\\\n};\\\\nreturn (\\\\n <Container>\\\\n <div className=\\\\\\\"layout\\\\\\\">\\\\n <div className=\\\\\\\"view-nft\\\\\\\">\\\\n <div className=\\\\\\\"layout-image\\\\\\\">\\\\n {/* {data.media && data.media.startsWith(\\\\\\\"https://arweave.net/\\\\\\\") ? ( */}\\\\n <img className=\\\\\\\"nft\\\\\\\" src={data.media} alt=\\\\\\\"\\\\\\\" />\\\\n {/* ) : (\\\\n <img\\\\n className=\\\\\\\"nft\\\\\\\"\\\\n src={`https://image-cache-service-z3w7d7dnea-ew.a.run.app/media?url=https://arweave.net/${data.media}`}\\\\n alt=\\\\\\\"nft\\\\\\\"\\\\n />\\\\n )} */}\\\\n </div>\\\\n <div className=\\\\\\\"layout-title\\\\\\\">\\\\n <div className=\\\\\\\"title\\\\\\\">{data.title ? data.title : \\\\\\\"\\\\\\\"}</div>\\\\n {/* <button className=\\\\\\\"audit\\\\\\\">Audited</button> */}\\\\n </div>\\\\n <div className=\\\\\\\"desc\\\\\\\">\\\\n <a href=\\\\\\\"#\\\\\\\" className=\\\\\\\"item-view\\\\\\\">\\\\n <small>Contract</small>\\\\n <Link\\\\n to={href({\\\\n widgetSrc: \\\\\\\"vfdao.near/widget/App.Index\\\\\\\",\\\\n params: {\\\\n page: \\\\\\\"contract\\\\\\\",\\\\n accountId: data?.nft_contract_id,\\\\n },\\\\n })}\\\\n >\\\\n <small className=\\\\\\\"text-desc\\\\\\\">{data?.nft_contract_id}</small>\\\\n </Link>\\\\n </a>\\\\n <a href=\\\\\\\"#\\\\\\\" className=\\\\\\\"item-view\\\\\\\">\\\\n <small>Owner</small>\\\\n <Link\\\\n to={href({\\\\n widgetSrc: \\\\\\\"vfdao.near/widget/ProfilePage\\\\\\\",\\\\n params: {\\\\n page: \\\\\\\"nfts\\\\\\\",\\\\n accountId: usersTokens ? usersTokens[0].owner : data.owner,\\\\n },\\\\n })}\\\\n >\\\\n <small className=\\\\\\\"text-desc\\\\\\\">\\\\n {usersTokens\\\\n ? `${usersTokens[0].owner} (${usersTokens[0].token_id})`\\\\n : data.owner}\\\\n </small>\\\\n </Link>\\\\n </a>\\\\n <a href=\\\\\\\"#\\\\\\\" className=\\\\\\\"item-view\\\\\\\">\\\\n <small>Total Minted</small>\\\\n <small>{NftCount}</small>\\\\n </a>\\\\n </div>\\\\n <div className=\\\\\\\"minter\\\\\\\">\\\\n <small className=\\\\\\\"item-minter\\\\\\\">\\\\n <span>Minter: </span>\\\\n <a href=\\\\\\\"#\\\\\\\" className=\\\\\\\"text-desc text-decoration-none\\\\\\\">\\\\n {data.minter}\\\\n </a>\\\\n </small>\\\\n <small className=\\\\\\\"item-minter\\\\\\\">\\\\n <span>Token Id:</span>\\\\n <span>{data.token_id}</span>\\\\n </small>\\\\n <small className=\\\\\\\"item-minter\\\\\\\">\\\\n <span>Type: </span>\\\\n <span>Image</span>\\\\n </small>\\\\n </div>\\\\n <div className=\\\\\\\"footer\\\\\\\">\\\\n <div className=\\\\\\\"px-2\\\\\\\">{data.description}</div>\\\\n {/* <div className=\\\\\\\"d-flex flex-row gap-3\\\\\\\">\\\\n <a\\\\n onClick={() => {\\\\n clipboard.writeText(props.text).then(() => {\\\\n State.update({ copied: true });\\\\n if (props.onCopy) {\\\\n props.onCopy(props.text);\\\\n }\\\\n });\\\\n }}\\\\n className=\\\\\\\"btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none\\\\\\\"\\\\n >\\\\n <div>Share</div>\\\\n </a>\\\\n <a\\\\n href={`https://www.mintbase.xyz/meta/${\\\\n data.id && data.id.replace(\\\\\\\":\\\\\\\", \\\\\\\"%3A\\\\\\\")\\\\n }?affiliateAccount=${data.listings[0].listed_by}`}\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className=\\\\\\\"btn-nft d-flex flex-row gap-1 align-items-center text-decoration-none\\\\\\\"\\\\n >\\\\n <img\\\\n width=\\\\\\\"18\\\\\\\"\\\\n height=\\\\\\\"18\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/pulsar-line/48/share-3.png\\\\\\\"\\\\n alt=\\\\\\\"share-3\\\\\\\"\\\\n />\\\\n <div>AffiliateDirect Link</div>\\\\n </a>\\\\n </div> */}\\\\n </div>\\\\n </div>\\\\n\\\\n <div>\\\\n <div onClick={hanleVisible} className=\\\\\\\"split border-bottom\\\\\\\">\\\\n <div className=\\\\\\\"split-title\\\\\\\">\\\\n <div className=\\\\\\\"left\\\\\\\">Splits</div>\\\\n <div className=\\\\\\\"right\\\\\\\">\\\\n <img\\\\n width=\\\\\\\"20\\\\\\\"\\\\n height=\\\\\\\"20\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/color/48/info--v1.png\\\\\\\"\\\\n alt=\\\\\\\"info--v1\\\\\\\"\\\\n />\\\\n {dropdowVisible ? (\\\\n <img\\\\n width=\\\\\\\"20\\\\\\\"\\\\n height=\\\\\\\"20\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios-glyphs/30/chevron-up.png\\\\\\\"\\\\n alt=\\\\\\\"chevron-up\\\\\\\"\\\\n />\\\\n ) : (\\\\n <img\\\\n width=\\\\\\\"20\\\\\\\"\\\\n height=\\\\\\\"20\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios-glyphs/30/chevron-down.png\\\\\\\"\\\\n alt=\\\\\\\"chevron-up\\\\\\\"\\\\n />\\\\n )}\\\\n </div>\\\\n </div>\\\\n </div>\\\\n {dropdowVisible && (\\\\n <div className=\\\\\\\"splits\\\\\\\">\\\\n <div className=\\\\\\\"split-content\\\\\\\">\\\\n <div className=\\\\\\\"item\\\\\\\">\\\\n <div className=\\\\\\\"d-flex flex-row gap-2 align-items-center\\\\\\\">\\\\n <div\\\\n class=\\\\\\\"error\\\\\\\"\\\\n style={{\\\\n background: \\\\\\\"#c74c4c\\\\\\\",\\\\n height: \\\\\\\"10px\\\\\\\",\\\\n width: \\\\\\\"10px\\\\\\\",\\\\n borderRadius: \\\\\\\"50px\\\\\\\",\\\\n }}\\\\n ></div>\\\\n <small>Forever Royalties</small>\\\\n </div>\\\\n <small>0%</small>\\\\n </div>\\\\n <div className=\\\\\\\"item\\\\\\\">\\\\n <div className=\\\\\\\"d-flex flex-row gap-2 align-items-center\\\\\\\">\\\\n <div\\\\n className=\\\\\\\"success\\\\\\\"\\\\n style={{\\\\n background: \\\\\\\"#0a7d6c\\\\\\\",\\\\n height: \\\\\\\"10px\\\\\\\",\\\\n width: \\\\\\\"10px\\\\\\\",\\\\n borderRadius: \\\\\\\"50px\\\\\\\",\\\\n }}\\\\n ></div>\\\\n <small>Split Revenue</small>\\\\n </div>\\\\n <small>97.5%</small>\\\\n </div>\\\\n <div className=\\\\\\\"item\\\\\\\">\\\\n <div className=\\\\\\\"d-flex flex-row gap-2 align-items-center\\\\\\\">\\\\n <div\\\\n className=\\\\\\\"disable\\\\\\\"\\\\n style={{\\\\n background: \\\\\\\"#b3b5bd\\\\\\\",\\\\n height: \\\\\\\"10px\\\\\\\",\\\\n width: \\\\\\\"10px\\\\\\\",\\\\n borderRadius: \\\\\\\"50px\\\\\\\",\\\\n }}\\\\n ></div>\\\\n <small>Market</small>\\\\n </div>\\\\n <small>2.5%</small>\\\\n </div>\\\\n </div>\\\\n </div>\\\\n )}\\\\n </div>\\\\n <div>\\\\n <div onClick={hanleVisibleDetails} className=\\\\\\\"split border-bottom\\\\\\\">\\\\n <div className=\\\\\\\"split-title\\\\\\\">\\\\n <div className=\\\\\\\"left\\\\\\\">Details</div>\\\\n <div className=\\\\\\\"right\\\\\\\">\\\\n {visible ? (\\\\n <img\\\\n width=\\\\\\\"20\\\\\\\"\\\\n height=\\\\\\\"20\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios-glyphs/30/chevron-up.png\\\\\\\"\\\\n alt=\\\\\\\"chevron-up\\\\\\\"\\\\n />\\\\n ) : (\\\\n <img\\\\n width=\\\\\\\"20\\\\\\\"\\\\n height=\\\\\\\"20\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios-glyphs/30/chevron-down.png\\\\\\\"\\\\n alt=\\\\\\\"chevron-up\\\\\\\"\\\\n />\\\\n )}\\\\n </div>\\\\n </div>\\\\n </div>\\\\n {visible && (\\\\n <div className=\\\\\\\"splits\\\\\\\">\\\\n <div className=\\\\\\\"d-flex flex-column gap-3\\\\\\\">\\\\n <div className=\\\\\\\"d-flex flex-row\\\\\\\">\\\\n <span>Storage Gateway: </span>\\\\n <a\\\\n href={data.base_uri}\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className=\\\\\\\"d-flex flex-row align-items-center text-decoration-none\\\\\\\"\\\\n style={{ color: \\\\\\\"#5861a8\\\\\\\" }}\\\\n >\\\\n <span className=\\\\\\\"truncate\\\\\\\">{data.base_uri}</span>\\\\n <img\\\\n width=\\\\\\\"10\\\\\\\"\\\\n height=\\\\\\\"10\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios/50/up-right-arrow.png\\\\\\\"\\\\n alt=\\\\\\\"down-left-arrow\\\\\\\"\\\\n />\\\\n </a>\\\\n </div>\\\\n <div className=\\\\\\\"d-flex flex-row\\\\\\\">\\\\n <span>Storage ID: </span>\\\\n <a\\\\n href={data.media}\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className=\\\\\\\"d-flex flex-row align-items-center text-decoration-none\\\\\\\"\\\\n style={{ color: \\\\\\\"#5861a8\\\\\\\" }}\\\\n >\\\\n <span className=\\\\\\\"truncate\\\\\\\">\\\\n {data.media &&\\\\n data.media.replace(\\\\\\\"https://arweave.net/\\\\\\\", \\\\\\\"\\\\\\\")}\\\\n </span>\\\\n <img\\\\n className=\\\\\\\"ml-\\\\\\\"\\\\n width=\\\\\\\"10\\\\\\\"\\\\n height=\\\\\\\"10\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios/50/up-right-arrow.png\\\\\\\"\\\\n alt=\\\\\\\"down-left-arrow\\\\\\\"\\\\n />\\\\n </a>\\\\n </div>\\\\n <div className=\\\\\\\"d-flex flex-row\\\\\\\">\\\\n <span>Contract: </span>\\\\n <a\\\\n href={`https://www.mintbase.xyz/contract/${data.nft_contract_id}/nfts/all/0`}\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className=\\\\\\\"d-flex flex-row align-items-center text-decoration-none\\\\\\\"\\\\n style={{ color: \\\\\\\"#5861a8\\\\\\\" }}\\\\n >\\\\n <span className=\\\\\\\"truncate\\\\\\\">{data.nft_contract_id}</span>\\\\n <img\\\\n width=\\\\\\\"10\\\\\\\"\\\\n height=\\\\\\\"10\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios/50/up-right-arrow.png\\\\\\\"\\\\n alt=\\\\\\\"down-left-arrow\\\\\\\"\\\\n />\\\\n </a>\\\\n </div>\\\\n <div className=\\\\\\\"d-flex flex-row\\\\\\\">\\\\n <span>Metadata ID: </span>\\\\n <a\\\\n href={`https://www.mintbase.xyz/meta/${data.id}`}\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className=\\\\\\\"d-flex flex-row align-items-center text-decoration-none\\\\\\\"\\\\n style={{ color: \\\\\\\"#5861a8\\\\\\\" }}\\\\n >\\\\n <span className=\\\\\\\"truncate\\\\\\\">{data.metadata_id}</span>\\\\n <img\\\\n width=\\\\\\\"10\\\\\\\"\\\\n height=\\\\\\\"10\\\\\\\"\\\\n src=\\\\\\\"https://img.icons8.com/ios/50/up-right-arrow.png\\\\\\\"\\\\n alt=\\\\\\\"down-left-arrow\\\\\\\"\\\\n />\\\\n </a>\\\\n </div>\\\\n </div>\\\\n </div>\\\\n )}\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"custom-sale\\\\\\\">\\\\n <div className=\\\\\\\"right-container\\\\\\\">\\\\n <div className=\\\\\\\"right-header\\\\\\\">\\\\n <span className=\\\\\\\"text\\\\\\\" style={{ fontWeight: 500 }}>\\\\n {listingCount}{\\\\\\\" \\\\\\\"}\\\\n </span>{\\\\\\\" \\\\\\\"}\\\\n of{\\\\\\\" \\\\\\\"}\\\\n <span className=\\\\\\\"text\\\\\\\" style={{ fontWeight: 500 }}>\\\\n {NftCount}{\\\\\\\" \\\\\\\"}\\\\n </span>{\\\\\\\" \\\\\\\"}\\\\n Listed{\\\\\\\" \\\\\\\"}\\\\n <span className=\\\\\\\"text\\\\\\\" style={{ fontWeight: 500 }}>\\\\n {\\\\\\\" \\\\\\\"}\\\\n as Simple Sale\\\\n </span>\\\\n </div>\\\\n {data?.listings[0]?.price > 1 ? (\\\\n <div>\\\\n <div className=\\\\\\\"right-main\\\\\\\">\\\\n <span className=\\\\\\\"d-flex flex-row justify-content-start\\\\\\\">\\\\n Lowest Price\\\\n </span>\\\\n <div className=\\\\\\\"text text-left d-flex flex-row justify-content-start align-items-end\\\\\\\">\\\\n <div style={{ fontSize: \\\\\\\"25px\\\\\\\", fontWeight: 600 }}>\\\\n {firstListing?.price\\\\n ? firstListing?.currency === \\\\\\\"near\\\\\\\"\\\\n ? YoctoToNear(firstListing?.price)\\\\n : (firstListing?.price / 1000000).toFixed(2)\\\\n : \\\\\\\"\\\\\\\"}\\\\n {listingType[firstListing?.currency]}\\\\n </div>\\\\n <strong\\\\n className=\\\\\\\"font-weight-light\\\\\\\"\\\\n style={{\\\\n fontSize: \\\\\\\"16px\\\\\\\",\\\\n marginLeft: \\\\\\\"20px\\\\\\\",\\\\n color: \\\\\\\"gray\\\\\\\",\\\\n }}\\\\n >\\\\n {firstListing?.currency === \\\\\\\"near\\\\\\\"\\\\n ? getUsdValue(firstListing?.price)\\\\n : (firstListing?.price / 1000000).toFixed(2)}\\\\n </strong>\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"right-footer\\\\\\\">\\\\n {firstListing?.price &&\\\\n context?.accountId !== data?.owner &&\\\\n context?.accountId && (\\\\n <button onClick={handleBuy} className=\\\\\\\"btn-cus\\\\\\\">\\\\n Buy\\\\n </button>\\\\n )}\\\\n {firstListing?.price &&\\\\n context?.accountId !== data?.owner &&\\\\n connectedDao?.permission &&\\\\n context.accountId && (\\\\n <button onClick={handleBuyAsADao} className=\\\\\\\"btn-cus\\\\\\\">\\\\n Buy as A DAO\\\\n </button>\\\\n )}\\\\n </div>\\\\n </div>\\\\n ) : (\\\\n <div className=\\\\\\\"mx-5 my-3 text-left\\\\\\\">Not listed</div>\\\\n )}\\\\n </div>\\\\n </div>\\\\n </Container>\\\\n);\\\\n" |