@ludo.ninja/components 1.1.4 → 1.1.6

package/dist/components/assetPage/detailsAccordeon/index.js

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Accordion from 'react-bootstrap/Accordion';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { H3 } from '@system';
+import { Category } from '../category';
+import { Information } from '../information';
+import { Properties } from '../properties';
+var StyledAccordion = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .accordion {\n    width: 100%;\n\n    &-header {\n      .accordion-button::after {\n        transform: rotate(90deg);\n        background-image: url('/tabs/arrow_right_dark.svg');\n        width: 24px;\n        height: 24px;\n        background-size: 100%;\n      }\n\n      .accordion-button:not(.collapsed)::after {\n        transform: rotate(-90deg);\n      }\n    }\n\n    &-item {\n      border: none;\n      border-radius: 0;\n      background: transparent;\n    }\n\n    &-body {\n      padding: 10px 0;\n    }\n\n    &-button {\n      padding: 10px 0;\n      color: inherit;\n      box-shadow: none;\n      background: transparent;\n\n      &:not(.collapsed) {\n        background: transparent;\n      }\n    }\n  }\n\n  ", " {\n    .accordion {\n      &-header {\n        .accordion-button::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n\n      &-body {\n        padding: ", " 0;\n      }\n\n      &-button {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(10));
+var StyledCategoryH3 = styled(H3)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  padding-top: 10px;\n  margin-bottom: 20px;\n\n  ", " {\n    padding-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(20));
+export var DetailsAccordeon = function (_a) {
+    var asset = _a.asset;
+    var attributes = asset.getAttributes();
+    return (_jsx(StyledAccordion, { children: _jsxs(Accordion, { defaultActiveKey: "1", style: { width: '100%' }, children: [(attributes.length && (_jsxs(_Fragment, { children: [_jsxs(Accordion.Item, { eventKey: "0", children: [_jsx(Accordion.Header, { children: _jsx(H3, { children: "Properties" }) }), _jsx(Accordion.Body, { children: _jsx(Properties, { attributes: attributes }) })] }), _jsx("hr", {})] }))) ||
+                    null, _jsxs(Accordion.Item, { eventKey: "1", children: [_jsx(Accordion.Header, { children: _jsx(H3, { children: "Chain Info" }) }), _jsx(Accordion.Body, { children: _jsx(Information, { asset: asset }) })] }), _jsx("hr", {}), asset.getCategory() && (_jsxs(_Fragment, { children: [_jsx(StyledCategoryH3, { children: "Category" }), _jsx(Category, { asset: asset })] }))] }) }));
+};
+var templateObject_1, templateObject_2;

package/dist/components/assetPage/figCaption/index.js

@@ -0,0 +1,183 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+import { authCookies } from '@ludo.ninja/api';
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { copyToClipboard } from '@ludo.ninja/utils';
+import { useUserStore } from '@/modules/user/store';
+import { useUiStore } from '@/store/ui';
+import useFetchDynamicAssetLikes from '@/api/server-assets/queries/useFetchDynamicAssetLikes';
+import { ScreenWidth, mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextDarkGrayColor, TextGrayColor } from '@/styles/colors';
+import AssetLikes from '@/components/assetPage/assetLikes';
+import { MoreDropDown } from '@/components/assetPage/moreDropDown';
+import AddAssetToFavoriteList from '@/components/favoriteList/add/addAssetToFavoriteList';
+import AddAssetToGallery from '@/components/gallery/add/addAssetToGallery';
+// import MoreIcon from '@/public/creation/card/moreBtn.svg';
+import ShareDialog from '@/components/shareDialog';
+import IconWithButton from '@/system/Buttons/IconWithButton';
+import StyledLikes from '@/system/Cards/Styles/Likes';
+import { Flex } from '@system';
+import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import GalleryIcon from '@/public/assetPage/favorite.svg';
+import FavoriteIcon from '@/public/assetPage/flag.svg';
+import ShareIcon from '@/public/assetPage/shareWithDots.svg';
+var ImageDetails = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n    margin-top: 16px;\n  }\n\n  @media (max-width: 767px) {\n    margin-top: 24px;\n    align-items: center;\n    width: 100%;\n    margin-right: 0;\n  }\n\n  h5:hover {\n    color: ", ";\n  }\n\n  ", " {\n    margin-right: 20px;\n    cursor: pointer;\n  }\n\n  .icon.liked {\n    path {\n      fill: #f94c66;\n    }\n  }\n\n  .shareIconStyle {\n    path {\n      stroke: none;\n      fill: ", ";\n    }\n\n    :hover {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-top: ", ";\n    width: ", ";\n\n    ", " {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  margin-top: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n    margin-top: 16px;\n  }\n\n  @media (max-width: 767px) {\n    margin-top: 24px;\n    align-items: center;\n    width: 100%;\n    margin-right: 0;\n  }\n\n  h5:hover {\n    color: ", ";\n  }\n\n  ", " {\n    margin-right: 20px;\n    cursor: pointer;\n  }\n\n  .icon.liked {\n    path {\n      fill: #f94c66;\n    }\n  }\n\n  .shareIconStyle {\n    path {\n      stroke: none;\n      fill: ", ";\n    }\n\n    :hover {\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  ", " {\n    margin-top: ", ";\n    width: ", ";\n\n    ", " {\n      margin-right: ", ";\n    }\n  }\n"])), mediaQuery.desktop, BlackColor, StyledLikes, TextDarkGrayColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(510), StyledLikes, adaptiveValueCalc(20));
+var SIconResizeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16));
+export var Figcaption = function (_a) {
+    var _b;
+    var asset = _a.asset;
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var getUser = useUserStore(function (state) { return state.user; });
+    var _c = useFetchDynamicAssetLikes({
+        assetId: (asset === null || asset === void 0 ? void 0 : asset.getAssetId()) || '',
+    }), likesByUser = _c.likesByUser, isLikedByUser = _c.isLikedByUser, loading = _c.loading;
+    var url = typeof window !== 'undefined'
+        ? window.location.origin + window.location.pathname
+        : null;
+    var _d = useUiStore(function (state) { return ({
+        openModal: state.openModal,
+        closeModal: state.closeModal,
+        openAlert: state.openAlert,
+        openModalSidebarPortal: state.openModalSidebarPortal,
+    }); }), openModal = _d.openModal, closeModal = _d.closeModal, openModalSidebarPortal = _d.openModalSidebarPortal, openAlert = _d.openAlert;
+    var userId = authCookies.getCookies().userId;
+    var _e = useWindowDimensionsWithServerInitial(), windowDimensions = _e.windowDimensions, isMobile = _e.isMobile;
+    var currentDimensions = (windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth) || 1440;
+    // const isCreator = useMemo(
+    //   () =>
+    //     Boolean(
+    //       asset?.getCreatorsProfiles() &&
+    //         asset
+    //           ?.getCreatorsProfiles()
+    //           .filter((item: schema.IProfile) => item?.userId === userId)
+    //     ),
+    //   [asset?.getCreatorsProfiles()]
+    // );
+    var isOwner = useMemo(function () {
+        return (asset === null || asset === void 0 ? void 0 : asset.getOwnersProfiles().filter(function (item) { return (item === null || item === void 0 ? void 0 : item.userId) === userId; }).length) !== 0;
+    }, [asset === null || asset === void 0 ? void 0 : asset.getOwnersProfiles()]);
+    var onShareBtnClick = function () {
+        var title = (asset === null || asset === void 0 ? void 0 : asset.getName()) || undefined;
+        openModal(_jsx(ShareDialog, { link: url, onHide: closeModal, params: {
+                telegram: {
+                    title: title,
+                },
+                whatsapp: {
+                    title: title,
+                },
+                twitter: {
+                    title: title,
+                    hashtags: ['ludo', 'nft'],
+                },
+                reddit: {
+                    title: title,
+                },
+                facebook: {
+                    quote: title,
+                    hashtag: '#ludo',
+                },
+            } }));
+    };
+    var onAddFavoriteClick = function () {
+        return openModalSidebarPortal(_jsx(AddAssetToFavoriteList, { ids: [asset === null || asset === void 0 ? void 0 : asset.getAssetId()] }));
+    };
+    var onAddGalleryClick = function () {
+        return openModalSidebarPortal(_jsx(AddAssetToGallery, { ids: [asset === null || asset === void 0 ? void 0 : asset.getAssetId()] }));
+    };
+    return (_jsxs(ImageDetails, { children: [_jsxs(Flex, { alignItems: "center", children: [loading ? (_jsx(Skeleton, { style: {
+                            borderRadius: "".concat(getAdaptiveValueWithCheck4k({
+                                windowDimensions: windowDimensions,
+                                currentSize: 3,
+                            }), "px"),
+                            marginRight: "".concat(getAdaptiveValueWithCheck4k({
+                                windowDimensions: windowDimensions,
+                                currentSize: 16.8,
+                            }), "px"),
+                        }, height: "100%", width: "".concat(getAdaptiveValueWithCheck4k({
+                            windowDimensions: windowDimensions,
+                            currentSize: 30,
+                        }), "px") })) : (_jsx(AssetLikes, { assetId: (asset === null || asset === void 0 ? void 0 : asset.getAssetId()) || '', isLikedByUser: isLikedByUser, likesByUser: likesByUser })), isSignedIn && (_jsxs(_Fragment, { children: [(((asset === null || asset === void 0 ? void 0 : asset.getCreatorsAddresses()) &&
+                                ((_b = asset === null || asset === void 0 ? void 0 : asset.getCreatorsAddresses()) === null || _b === void 0 ? void 0 : _b[0]) === (getUser === null || getUser === void 0 ? void 0 : getUser.wallets[0])) ||
+                                isOwner) && (_jsx(IconWithButton, { variant: 'figcaption', text: currentDimensions > ScreenWidth.DESKTOP
+                                    ? 'Add to Gallery'
+                                    : '+ Gallery', onClick: onAddGalleryClick, children: _jsx(SIconResizeWrapper, { children: _jsx(GalleryIcon, { style: getAdaptiveScale({
+                                            windowDimensions: windowDimensions,
+                                            currentSize: 1,
+                                        }) }) }) })), _jsx(IconWithButton, { variant: 'figcaption', text: currentDimensions > ScreenWidth.DESKTOP
+                                    ? 'Add to Favourite list'
+                                    : '+Fave list', onClick: onAddFavoriteClick, children: _jsx(SIconResizeWrapper, { children: _jsx(FavoriteIcon, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }) }) })] }))] }), _jsxs(Flex, { children: [!isMobile && (_jsx(IconWithButton, { variant: 'share', text: '', onClick: onShareBtnClick, children: _jsx(SIconResizeWrapper, { children: _jsx(ShareIcon, { className: "shareIconStyle", style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }) }) })), _jsx(MoreDropDown, { items: [
+                            // {
+                            //   id: 'make',
+                            //   title: 'Make profile picture',
+                            // },
+                            {
+                                id: 'copy',
+                                title: 'Copy link',
+                                onClick: function () {
+                                    return __awaiter(this, void 0, void 0, function () {
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0: return [4 /*yield*/, copyToClipboard(window.location.href)];
+                                                case 1:
+                                                    _a.sent();
+                                                    openAlert({
+                                                        type: alertVariants.copied,
+                                                    });
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    });
+                                },
+                            },
+                            // {
+                            //   id: 'Hide',
+                            //   title: 'Hide'
+                            // }
+                        ] })] })] }));
+};
+var templateObject_1, templateObject_2;

package/dist/components/assetPage/information/index.js

@@ -0,0 +1,49 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import moment from 'moment';
+import styled from 'styled-components';
+import { BlackColor } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { shortenedText } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { AccentColor, TextGrayColor } from '@/styles/colors';
+import { Flex, H5 } from '@system';
+import { CopyButton } from '@/utils/copyBtn';
+import { getStaticENVDomain } from '@/utils/env';
+import { useWindowDimensions } from '@/utils/screen';
+import { poppinsFontVarCss } from '@/fonts/vars';
+var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16));
+var BoxOverflow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(90));
+var FlexOverflow = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ", " {\n    gap: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ", " {\n    gap: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8));
+var OverflowH5 = styled(H5)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SBlockchain = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ", ";\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n    gap: ", ";\n\n    p {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"], ["\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ", ";\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n    gap: ", ";\n\n    p {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.buttonInactive;
+}, BlackColor, poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.accentHoverBg;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(22));
+var SFlex = styled(Flex)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 8px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 8px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8));
+export var Information = function (_a) {
+    var asset = _a.asset;
+    var tokenId = asset.getTokenId();
+    var splittedAssetId = asset.getSplitedAssetId();
+    var address = asset.getAddress();
+    var blockChain = asset.getBlockchain();
+    var blockTimestamp = asset.getBlockTimestamp();
+    var id = tokenId ? tokenId : splittedAssetId;
+    var idTittle = tokenId ? 'Token ID' : 'ID';
+    var deviceType = useWindowDimensions().deviceType;
+    var isDesktop = deviceType === 'isDesktop';
+    var styleOverflow = isDesktop
+        ? { overflow: 'hidden' }
+        : undefined;
+    return (_jsxs(Flex, { flexDirection: "column", justifyContent: "space-between", children: [_jsxs(SFlex, { justifyContent: "space-between", alignItems: "center", children: [_jsx(H5, { color: TextGrayColor, children: "Blockchain" }), _jsx(Link, { href: "/search/nfts?blockchain=".concat(blockChain.getBlockChainPrivateLabel()), children: _jsxs(SBlockchain, { children: [_jsx("p", { children: blockChain.getBlockChainPublicLabel() }), _jsx(StyledImage, { width: 16, height: 16, src: blockChain.getBlockChainIconRegular({
+                                        domain: getStaticENVDomain(),
+                                    }), alt: blockChain.getBlockChainPublicLabel() })] }) })] }), address && (_jsxs(FlexOverflow, { children: [_jsx(H5, { color: TextGrayColor, children: "Contract Address" }), _jsx(CopyButton, { value: address, style: styleOverflow, children: isDesktop ? (_jsx(OverflowH5, { color: AccentColor, title: address, children: address })) : (_jsx(H5, { color: AccentColor, title: address, children: shortenedText(address) })) })] })), _jsxs(FlexOverflow, { children: [_jsx(H5, { color: TextGrayColor, children: idTittle }), _jsx(CopyButton, { value: id, style: styleOverflow, children: isDesktop ? (_jsx(OverflowH5, { color: AccentColor, title: id, children: id })) : (_jsx(BoxOverflow, { children: _jsx(H5, { color: AccentColor, title: id, children: _jsx(BoxOverflow, { children: id }) }) })) })] }), blockTimestamp && (_jsxs(SFlex, { justifyContent: "space-between", children: [_jsx(H5, { color: TextGrayColor, children: "Added on" }), _jsx(H5, { color: TextGrayColor, children: moment(blockTimestamp * 1000).format('LL') })] }))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/assetPage/marketPlaces/index.js

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import { getStaticENVDomain } from '@/utils/env';
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", " {\n    margin: 20px 0 0;\n  }\n\n  ", " {\n    margin: ", " 0 0 0;\n  }\n"], ["\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", " {\n    margin: 20px 0 0;\n  }\n\n  ", " {\n    margin: ", " 0 0 0;\n  }\n"])), mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(30));
+var StyledImage = styled(Image)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ", " {\n    border-radius: ", ";\n    margin: 0 ", " ", " 0;\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ", " {\n    border-radius: ", ";\n    margin: 0 ", " ", " 0;\n    width: ", ";\n    height: ", ";\n  }\n"])), BoxShadow, BoxTransform, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(7), adaptiveValueCalc(6), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var MarketLinkWrapper = function (_a) {
+    var market = _a.market, children = _a.children;
+    if (market.getMarketPlaceUrl()) {
+        return (_jsx(Link, { target: "_blank", title: market.getMarketPlaceName(), href: market.getMarketPlaceUrl(), children: children }));
+    }
+    return _jsx(_Fragment, { children: children });
+};
+export var MarketPlaces = function (_a) {
+    var markets = _a.markets;
+    return (_jsx(Container, { children: markets === null || markets === void 0 ? void 0 : markets.map(function (market) { return (_jsx(MarketLinkWrapper, { market: market, children: _jsx(StyledImage, { width: 40, height: 40, src: market.getMarketPlaceIconRegular({
+                    domain: getStaticENVDomain(),
+                }), alt: market.getMarketPlaceName() }) }, market.getMarketPlaceId())); }) }));
+};
+var templateObject_1, templateObject_2;

package/dist/components/assetPage/media/AssetImage/index.js

@@ -0,0 +1,67 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import Skeleton from 'react-loading-skeleton';
+import styled, { css } from 'styled-components';
+import { AccentColor, InactiveButtonColor, WhiteColor, } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { defineImgProportion } from '@/utils/imageProportionsSize';
+import { poppinsFontVarCss } from '@/fonts/vars';
+var SScreenshotContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"], ["\n  border-radius: 16px;\n  overflow: hidden;\n  background-color: ", ";\n  transition: background-color 150ms;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .link {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n    width: 100%;\n    height: 48px;\n\n    ", " {\n      height: 42px;\n    }\n\n    span {\n      text-align: center;\n      color: ", ";\n      font-family: ", ";\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 22px;\n      width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    .link {\n      padding: ", ";\n      height: ", ";\n\n      span {\n        font-size: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), WhiteColor, InactiveButtonColor, mediaQuery.desktop, AccentColor, poppinsFontVarCss.css, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(10), adaptiveValueCalc(48), adaptiveValueCalc(15), adaptiveValueCalc(22));
+var ImageContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"], ["\n  display: flex;\n  position: relative;\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n\n  & img {\n    object-fit: contain;\n    aspect-ratio: auto;\n    width: 100%;\n    border-radius: 16px;\n    max-height: 510px;\n    max-width: 510px;\n  }\n\n  ", "\n  ", " {\n    & img {\n      border-radius: ", ";\n      max-height: ", ";\n      max-width: ", ";\n    }\n\n    ", "\n  }\n"])), function (props) {
+    return props.isScreenshot
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "], ["\n          width: 508px;\n          height: 244px;\n\n          ", " {\n            width: 336px;\n            height: 164px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 154px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "], ["\n          border-radius: 16px;\n          width: 510px;\n          height: 510px;\n\n          ", " {\n            width: 335px;\n            height: 335px;\n          }\n\n          ", " {\n            width: 320px;\n            height: 320px;\n          }\n        "])), mediaQuery.desktop, mediaQuery.mobile);
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510), function (props) {
+    return props.isScreenshot
+        ? css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            width: ", ";\n            height: ", ";\n          "], ["\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(508), adaptiveValueCalc(244)) : css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "], ["\n            border-radius: ", ";\n            width: ", ";\n            height: ", ";\n          "])), adaptiveValueCalc(16), adaptiveValueCalc(510), adaptiveValueCalc(510));
+});
+var AssetImage = function (_a) {
+    var imageUrl = _a.imageUrl, errorImg = _a.errorImg, originalUrl = _a.originalUrl, alt = _a.alt, isScreenshot = _a.isScreenshot;
+    var _b = useState({}), size = _b[0], setSize = _b[1];
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    var ref = useRef(null);
+    useLayoutEffect(function () {
+        var _a = defineImgProportion(ref, 80), width = _a.width, height = _a.height;
+        if (imageUrl && parseFloat(height) && parseFloat(width)) {
+            defineImgProportion(ref, 80);
+            setSize({ width: width, height: height });
+        }
+    }, [imageUrl]);
+    var LinkComponent = originalUrl ? Link : React.Fragment;
+    var ScreenShotContainer = isScreenshot
+        ? SScreenshotContainer
+        : React.Fragment;
+    return (_jsx(LinkComponent, { href: "".concat(originalUrl), target: "_blank", children: _jsxs(ScreenShotContainer, { children: [_jsxs(ImageContainer, { isScreenshot: isScreenshot, children: [loading && (_jsx(Skeleton, { height: '100%', width: '100%', style: {
+                                lineHeight: 'normal',
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                visibility: "".concat(loading ? 'hidden' : 'visible'),
+                            } })), _jsx("img", { alt: alt, ref: ref, src: imageUrl, onError: function (e) {
+                                e.target.src = errorImg;
+                                setSize({ width: '100%', height: '100%' });
+                            }, onLoad: function () { return setLoading(false); }, style: __assign({ opacity: loading ? '0' : '1' }, (isScreenshot
+                                ? {
+                                    maxHeight: '100%',
+                                    maxWidth: '100%',
+                                }
+                                : size)) })] }), isScreenshot && originalUrl && (_jsx("div", { className: "link", title: originalUrl, children: _jsx("span", { children: originalUrl }) }))] }) }));
+};
+export default AssetImage;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/assetPage/moreDropDown/index.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { ClickAwayListener } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BackgroundColorLight, BlackColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import IconWithButton from '@/system/Buttons/IconWithButton';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import MoreIcon from '@/public/creation/card/moreBtn.svg';
+var SContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  & > *:first-child {\n    width: 24px;\n    height: 24px;\n\n    ", " {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(24));
+var SContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"], ["\n  position: absolute;\n  padding: 8px;\n  top: calc(100% + 8px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n\n  transition: opacity 200ms;\n\n  pointer-events: ", ";\n  opacity: ", ";\n\n  border-radius: 6px;\n  background: ", ";\n  box-shadow: 0px 8px 16px -16px rgba(33, 21, 95, 0.1);\n  width: 184px;\n\n  ", " {\n    padding: ", ";\n    top: calc(100% + ", ");\n    border-radius: ", ";\n    box-shadow: 0 ", " ", "\n      ", " rgba(33, 21, 95, 0.1);\n    width: ", ";\n  }\n"])), function (props) { return (props.isOpen ? 'unset' : 'none'); }, function (props) { return (props.isOpen ? '1' : '0'); }, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(184));
+var hover = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  color: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(4));
+var SButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"], ["\n  font-family: ", ";\n  padding: 6px 8px;\n  color: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  outline: none;\n  border: none;\n  background: inherit;\n  transition: background-color 200ms;\n  text-align: left;\n\n  &:active {\n    ", "\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      ", "\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    font-size: ", ";\n    line-height: ", ";\n  }\n"])), dmsansFontVarCss.css, TextGrayColor, hover, hover, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(13), adaptiveValueCalc(18));
+var SIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(17), adaptiveValueCalc(4));
+var IconResize = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(SIcon, { children: _jsx(MoreIcon, { style: getAdaptiveScale({
+                windowDimensions: windowDimensions,
+                currentSize: 1,
+            }) }) }));
+};
+export var MoreDropDown = function (_a) {
+    var items = _a.items;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var handle = {
+        close: function () {
+            setIsOpen(false);
+        },
+        toggle: function () {
+            setIsOpen(function (prev) { return !prev; });
+        },
+    };
+    return (_jsx(ClickAwayListener, { onClickAway: handle.close, children: _jsxs(SContainer, { children: [_jsx(IconWithButton, { variant: 'dots', onClick: handle.toggle, children: _jsx(IconResize, {}) }), _jsx(SContent, { isOpen: isOpen, children: items.map(function (_a) {
+                        var title = _a.title, onClick = _a.onClick, id = _a.id;
+                        return (_jsx(SButton, { onClick: function () {
+                                onClick === null || onClick === void 0 ? void 0 : onClick();
+                                handle.close();
+                            }, children: _jsx("span", { children: title }) }, id));
+                    }) })] }) }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/assetPage/participants/index.js

@@ -0,0 +1,94 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { shortenedText } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { Flex, H5, H6, ProfilePic } from '@system';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { CopyButton } from '@/utils/copyBtn';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { getUserPicImage } from '@/dto/common/Media/Urls';
+import DetailsIcon from '@/public/assetPage/details.svg';
+var MultiFlexRight = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 100px;\n  align-items: center;\n\n  ", " {\n    margin: 20px 0 0 0;\n  }\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(100));
+var MultiFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"], ["\n  margin: 20px 0 10px;\n\n  ", " {\n    flex-direction: column;\n  }\n\n  ", " {\n    margin: ", " 0 ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(10));
+var SMultipleCreators = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-left: 20px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-left: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var SMultipleCreatorsH6 = styled(H6)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 15px;\n  color: ", ";\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
+var MultipleCreators = function (_a) {
+    var creatorsProfiles = _a.creatorsProfiles, creatorsAddresses = _a.creatorsAddresses;
+    if (!creatorsProfiles && !creatorsAddresses)
+        return null;
+    var accumulatedResult;
+    if (creatorsProfiles) {
+        accumulatedResult = __spreadArray([], creatorsProfiles, true);
+    }
+    if (creatorsAddresses) {
+        creatorsAddresses.map(function (item) {
+            return { userId: item, userpic: '/defaultUserpics/defaultUserpic.svg' };
+        });
+        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
+            creatorsAddresses,
+        ], false);
+    }
+    return (_jsx(Flex, { alignItems: "center", children: _jsxs(SMultipleCreators, { flexDirection: "row", alignItems: "center", children: [creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.slice(0, 3).map(function (creator) {
+                    return (_jsx(ProfilePic, { size: 40, userPicSrc: getUserPicImage(creator === null || creator === void 0 ? void 0 : creator.userpic, '/defaultUserpics/defaultUserpic.svg') }, creator === null || creator === void 0 ? void 0 : creator.userId));
+                }), _jsxs(SMultipleCreatorsH6, { children: [accumulatedResult && (accumulatedResult === null || accumulatedResult === void 0 ? void 0 : accumulatedResult.length), " Creators"] })] }) }));
+};
+var SSingleUserLink = styled(Link)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-size: 14px;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(14));
+var SSingleUser = styled(Flex)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 10px;\n\n  img {\n    width: 40px;\n    height: 40px;\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var SSingleUserFlex = styled(Flex)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"], ["\n  margin-left: 16px;\n\n  ", " {\n    margin-left: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16));
+var SingleUser = function (props) {
+    var _a, _b, _c;
+    if (!props.profile && !props.address)
+        return null;
+    var isLudoWallet = function (userName) {
+        return userName ? (_jsx(H5, { color: BlackColor, children: userName })) : (_jsx(CopyButton, { value: props.address, children: _jsx(H5, { color: BlackColor, children: shortenedText(props.address) }) }));
+    };
+    var ludoUserMurkUp = function (name) {
+        var _a, _b;
+        return name ? (_jsx(SSingleUserLink, { href: "/profile/".concat((_a = props.profile) === null || _a === void 0 ? void 0 : _a.userId, "/nfts"), children: name })) : (isLudoWallet((_b = props.profile) === null || _b === void 0 ? void 0 : _b.username));
+    };
+    return (_jsxs(SSingleUser, { width: '50%', alignItems: "center", children: [Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_a = props === null || props === void 0 ? void 0 : props.profile) === null || _a === void 0 ? void 0 : _a.userpic)) && (_jsx(ProfilePic, { size: 40, userPicSrc: getUserPicImage((_b = props === null || props === void 0 ? void 0 : props.profile) === null || _b === void 0 ? void 0 : _b.userpic, '/defaultUserpics/defaultUserpic.svg') })), Boolean((props === null || props === void 0 ? void 0 : props.profile) && ((_c = props === null || props === void 0 ? void 0 : props.profile) === null || _c === void 0 ? void 0 : _c.userpic)) || (_jsx(ProfilePic, { size: 40, userPicSrc: '/defaultUserpics/defaultUserpic.svg' })), _jsxs(SSingleUserFlex, { flexDirection: "column", children: [_jsx(H6, { color: TextGrayColor, children: props.title }), ludoUserMurkUp((props === null || props === void 0 ? void 0 : props.profile) && props.profile.username)] })] }));
+};
+var SIconWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(10));
+var DetailsIconResize = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(SIconWrapper, { children: _jsx(DetailsIcon, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }) }));
+};
+var SMultipleOwnersFlex = styled(Flex)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 7px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(7));
+var MultipleOwners = function (_a) {
+    var ownersProfiles = _a.ownersProfiles, ownersAddresses = _a.ownersAddresses;
+    if (!ownersAddresses && !ownersProfiles)
+        return null;
+    var accumulatedResult = __spreadArray([], ownersProfiles, true);
+    if (ownersAddresses) {
+        accumulatedResult = __spreadArray(__spreadArray([], accumulatedResult, true), [
+            ownersAddresses,
+        ], false);
+    }
+    return (_jsx(MultiFlexRight, { alignItems: "center", children: _jsx(Flex, { flexDirection: "column", children: _jsxs(SMultipleOwnersFlex, { alignItems: "center", children: [_jsx(DetailsIconResize, {}), ' ', _jsxs(H6, { children: [accumulatedResult.length, ' ', accumulatedResult.length > 1 ? 'Owners' : 'Owner'] })] }) }) }));
+};
+export var Participants = function (_a) {
+    // console.clear();
+    // console.log(creatorsProfiles, 'creatorsProfiles');
+    // console.log(creatorsAddresses, 'creatorsAddresses');
+    // console.log(ownersProfiles, 'ownersProfiles');
+    var creatorsProfiles = _a.creatorsProfiles, ownersProfiles = _a.ownersProfiles, creatorsAddresses = _a.creatorsAddresses, ownersAddresses = _a.ownersAddresses;
+    return (_jsx(_Fragment, { children: ((creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) && (creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles.length) > 1) ||
+            ((ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) && (ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles.length) > 1) ? (_jsxs(MultiFlex, { children: [_jsx(MultipleCreators, { creatorsAddresses: creatorsAddresses, creatorsProfiles: creatorsProfiles }), _jsx(MultipleOwners, { ownersProfiles: ownersProfiles, ownersAddresses: ownersAddresses })] })) : (_jsxs(MultiFlex, { children: [_jsx(SingleUser, { title: "Creator", address: creatorsAddresses === null || creatorsAddresses === void 0 ? void 0 : creatorsAddresses[0], profile: creatorsProfiles === null || creatorsProfiles === void 0 ? void 0 : creatorsProfiles[0] }), _jsx(SingleUser, { title: "Owner", address: ownersAddresses === null || ownersAddresses === void 0 ? void 0 : ownersAddresses[0], profile: ownersProfiles === null || ownersProfiles === void 0 ? void 0 : ownersProfiles[0] })] })) }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/assetPage/priceRank/index.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { getRankColor } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, InactiveButtonColor, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { Box, Flex, H2, H3, H6 } from '@system';
+var RangeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100px;\n  background: ", ";\n  height: 9px;\n  border-radius: 2px;\n\n  ", " {\n    width: 40px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: block;\n  width: 100px;\n  background: ", ";\n  height: 9px;\n  border-radius: 2px;\n\n  ", " {\n    width: 40px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(100), adaptiveValueCalc(9), adaptiveValueCalc(2));
+var RangeValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    border-radius: ", " 0 0 ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    border-radius: ", " 0 0 ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, mediaQuery.minWidthFourK, adaptiveValueCalc(2), adaptiveValueCalc(2));
+var SPrice = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 65%;\n  border-radius: 6px;\n  margin-right: 15px;\n  padding: 15px;\n  background-color: ", ";\n\n  .title-price {\n    margin-bottom: 6px;\n  }\n\n  .price-latest {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n\n    .title-price {\n      margin-bottom: ", ";\n    }\n\n    .price-latest {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  width: 65%;\n  border-radius: 6px;\n  margin-right: 15px;\n  padding: 15px;\n  background-color: ", ";\n\n  .title-price {\n    margin-bottom: 6px;\n  }\n\n  .price-latest {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n\n    .title-price {\n      margin-bottom: ", ";\n    }\n\n    .price-latest {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(8));
+var SPriceFlex = styled(Flex)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 6px;\n\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  border-radius: 6px;\n\n  ", " {\n    border-radius: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(6));
+var SRank = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 35%;\n  border-radius: 6px;\n  padding: 15px;\n\n  .rank-title {\n    margin-bottom: 6px;\n  }\n\n  .rank-text {\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    padding: ", ";\n\n    .rank-title {\n      margin-bottom: ", ";\n    }\n\n    .rank-text {\n      margin-right: ", ";\n    }\n  }\n"], ["\n  width: 35%;\n  border-radius: 6px;\n  padding: 15px;\n\n  .rank-title {\n    margin-bottom: 6px;\n  }\n\n  .rank-text {\n    margin-right: 8px;\n  }\n\n  ", " {\n    border-radius: ", ";\n    padding: ", ";\n\n    .rank-title {\n      margin-bottom: ", ";\n    }\n\n    .rank-text {\n      margin-right: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(8));
+export var PriceRank = function (_a) {
+    // const { isLoading, converterAmount } = useConvertedValue({
+    //   latestPriceCurrency,
+    //   latestPriceAmount,
+    // });
+    var rank = _a.rank, latestPriceAmount = _a.latestPriceAmount, latestPriceCurrency = _a.latestPriceCurrency;
+    return (_jsxs(Flex, { children: [latestPriceAmount && latestPriceAmount !== 0 && latestPriceCurrency && (_jsxs(SPrice, { children: [_jsx(H6, { color: TextGrayColor, className: "title-price", children: "Price" }), _jsx(Flex, { children: _jsx(SPriceFlex, { alignItems: "center", children: _jsx(H2, { color: BlackColor, className: "price-latest", children: latestPriceAmount }) }) })] })), _jsxs(SRank, { backgroundColor: WhiteColor, children: [_jsx(H6, { color: TextGrayColor, className: "rank-title", children: "Ludo Rank" }), _jsx(Flex, { children: _jsx(SPriceFlex, { alignItems: "center", children: rank ? (_jsxs(_Fragment, { children: [_jsx(H2, { color: BlackColor, className: "rank-text", children: rank }), _jsx(RangeContainer, { children: _jsx(RangeValue, { rankValue: rank, style: { width: "".concat(rank, "%") } }) })] })) : (_jsx(H3, { color: BlackColor, className: "rank-text", children: "unknown" })) }) })] })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/assetPage/properties/index.js

@@ -0,0 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BorderColorLight, TextGrayColor } from '@/styles/colors';
+import { Flex, H5, H6 } from '@system';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 15px;\n\n  ", " {\n    gap: 10px;\n  }\n\n  ", " {\n    gap: ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 15px;\n\n  ", " {\n    gap: 10px;\n  }\n\n  ", " {\n    gap: ", ";\n  }\n"])), mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
+var SFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 6px;\n  border: 1px solid ", ";\n  padding: 10px 16px;\n\n  ", " {\n    border-radius: ", ";\n    border: ", " solid ", ";\n    padding: ", " ", ";\n  }\n"], ["\n  border-radius: 6px;\n  border: 1px solid ", ";\n  padding: 10px 16px;\n\n  ", " {\n    border-radius: ", ";\n    border: ", " solid ", ";\n    padding: ", " ", ";\n  }\n"])), BorderColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(10), adaptiveValueCalc(16));
+export var Properties = function (_a) {
+    var attributes = _a.attributes;
+    return (_jsx(Wrapper, { children: attributes === null || attributes === void 0 ? void 0 : attributes.map(function (item) {
+            return (_jsxs(SFlex, { flexDirection: "column", children: [_jsx(H6, { style: { wordBreak: 'break-word' }, color: TextGrayColor, children: item === null || item === void 0 ? void 0 : item.name }), _jsx(H5, { style: { wordBreak: 'break-word' }, children: item === null || item === void 0 ? void 0 : item.value })] }, item === null || item === void 0 ? void 0 : item.name));
+        }) }));
+};
+var templateObject_1, templateObject_2;