@ludo.ninja/components 1.1.4 → 1.1.6

package/dist/components/CreationCard/CardHead.js

@@ -0,0 +1,116 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/modules/user/store';
+import { useUiStore } from '@/store/ui';
+import { ScreenWidth } from '@/styles/ScreenWidth';
+import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
+import CardRank from '@/system/Cards/CardRank';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+import { redirectToLoginWindow } from '@/utils/auth';
+import { isProd } from '@/utils/env';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import { LabelKeys } from '@/dto/common/ItemType';
+import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
+import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
+import AddToLikesIcon from '@/public/cards/heart.svg';
+// Component
+export var CardHead = function (_a) {
+    var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled, isShowCheckbox = _a.isShowCheckbox, currentMyGalleryId = _a.currentMyGalleryId;
+    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var isLicked = isIconLiked && isSignedIn;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    var isMobile = !!((windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth) &&
+        windowDimensions.windowWidth <= ScreenWidth.DESKTOP);
+    var router = useRouter();
+    var isGallery = router.pathname.includes('gallery');
+    var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!!isSignedIn) return [3 /*break*/, 1];
+                    redirectToLoginWindow();
+                    return [3 /*break*/, 6];
+                case 1:
+                    if (!(type === 'fav-list')) return [3 /*break*/, 2];
+                    openModalSidebarPortal(_jsx(AddCreationToFavoriteList, { ids: [
+                            creation instanceof CollectionCreationEntity
+                                ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
+                                : creation.getCreationId(),
+                        ], currentMyGalleryId: currentMyGalleryId }));
+                    return [3 /*break*/, 6];
+                case 2:
+                    if (!(type === 'likes')) return [3 /*break*/, 6];
+                    if (!!isLicked) return [3 /*break*/, 4];
+                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity &&
+                            creation.getItemType() !== LabelKeys.collection
+                            ? creation.getCollectionCreationId()
+                            : creation.getItemId())];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
+                        creation.getItemType() !== LabelKeys.collection
+                        ? creation.getCollectionCreationId()
+                        : creation.getItemId())];
+                case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var renderLikeButton = function () {
+        if ([LabelKeys.asset, LabelKeys.collection].includes(creation.getItemType())) {
+            return (_jsx("div", { className: "icon like ".concat(isLicked ? 'liked' : ''), onClick: function (e) { return handleClick(e, 'likes'); }, children: _jsx(AddToLikesIcon, {}) }));
+        }
+    };
+    return (_jsxs(StyledHeadIcons, { isMobile: isMobile, style: isDisabled
+            ? {
+                pointerEvents: 'none',
+            }
+            : {}, children: [_jsx("div", { className: 'rank', children: _jsx(CardRank, { rank: creation.getRank() }) }), !isProd() && !isShowCheckbox && (_jsxs("div", { className: "icons", children: [_jsx("div", { className: "icon", onClick: function (e) {
+                            return handleClick(e, isRegularCard || !isUserProfile || isGallery
+                                ? 'fav-list'
+                                : 'gallery');
+                        }, children: isRegularCard || !isUserProfile || isGallery ? (_jsx(AddToFavListIcon, {})) : (_jsx(AddToGalleryIcon, {})) }), renderLikeButton()] }))] }));
+};

package/dist/components/CreationCard/index.js

@@ -0,0 +1,70 @@
+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 from 'react';
+import Link from 'next/link';
+import Skeleton from 'react-loading-skeleton';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import useLikes from '@/hooks/likes';
+import { getIsActiveCreation, useToGalleryStore, } from '@/hooks/useToGalleryAsset';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import { CardHead } from '@/components/CreationCard/CardHead';
+import CardCheckBox from '@/system/Cards/CardCheckbox';
+import CardContent from '@/system/Cards/CardContent';
+import CardCategory from '@/system/Cards/CardContent/CardCategory';
+import CardLikes from '@/system/Cards/CardContent/CardLikes';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+import { Flex } from '@system';
+import { isProd } from '@/utils/env';
+// Styles
+var StyledRegularCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"])), WhiteColor, BoxShadow, BoxTransform, function (props) { return (props.isNeedTransform ? null : BoxTransform); }, function (props) { return (props.isNeedHeight ? '346px' : ''); }, function (props) {
+    return props.isShowCheckbox
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "], ["\n          ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "])), StyledHeadIcons) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          &:hover ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "], ["\n          &:hover ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "])), StyledHeadIcons);
+}, mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); }, mediaQuery.minWidthFourK, adaptiveValueCalc(6), function (props) {
+    return props.isNeedHeight ? adaptiveValueCalc(346) : '';
+});
+// Component
+export var CreationCardWithCheckboxState = function (props) {
+    var _a = useToGalleryStore(function (state) { return ({
+        toggleCreationToGallery: state.toggleCreationToGallery,
+        isActiveGalleryMode: state.isActiveGalleryMode,
+        creationsToGallery: state.creationsToGallery,
+    }); }), toggleCreationToGallery = _a.toggleCreationToGallery, isActiveGalleryMode = _a.isActiveGalleryMode, creationsToGallery = _a.creationsToGallery;
+    return (_jsx(CreationCard, __assign({}, props, { isShowCheckbox: isActiveGalleryMode, isActiveCheckbox: getIsActiveCreation(creationsToGallery, props.creation), toggleCreationToGallery: toggleCreationToGallery })));
+};
+export var CreationCard = function (_a) {
+    var creationName = _a.creationName, creation = _a.creation, isNeedHeight = _a.isNeedHeight, likesDynamicInfo = _a.likesDynamicInfo, toolsForRemove = _a.toolsForRemove, isMobile = _a.isMobile, isLoadingLikes = _a.isLoadingLikes, isNeedShowMoreButton = _a.isNeedShowMoreButton, isUserProfile = _a.isUserProfile, _b = _a.isRegularCard, isRegularCard = _b === void 0 ? true : _b, isShowCheckbox = _a.isShowCheckbox, isActiveCheckbox = _a.isActiveCheckbox, toggleCreationToGallery = _a.toggleCreationToGallery, currentMyGalleryId = _a.currentMyGalleryId;
+    var _c = useLikes({
+        defaultLikesCount: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.likesNum) || creation.getLikes(),
+        defaultIsLiked: (likesDynamicInfo === null || likesDynamicInfo === void 0 ? void 0 : likesDynamicInfo.isLikedByUser) || creation.getIsLiked(),
+        itemType: creation.getItemType(),
+        removeOnDislike: toolsForRemove,
+        isLoadingLikes: isLoadingLikes,
+    }), likes = _c.likes, addLike = _c.addLike, deleteLike = _c.deleteLike;
+    // Todo cardLink
+    var isHide = isProd();
+    var HideLink = isHide ? React.Fragment : Link;
+    return (_jsxs(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && (_jsx(CardCheckBox, { isActiveCheckbox: !!isActiveCheckbox, onChange: function () {
+                    toggleCreationToGallery === null || toggleCreationToGallery === void 0 ? void 0 : toggleCreationToGallery(creation);
+                } })), _jsxs(HideLink, { className: "linkRegularCard", href: creation.getCreationLink(), children: [_jsxs(StyledCardHead, { children: [creation.detectMediaType().displaySingleMedia(), _jsx(CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), _jsx(CardContent, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: _jsxs(Flex, { alignItems: "end", justifyContent: 'space-between', children: [_jsx(CardCategory, { label: creation.getLabel() }), !isProd() &&
+                                    (isLoadingLikes ? (_jsx(Skeleton, { style: { borderRadius: '3px' }, height: "100%", width: "30px" })) : (_jsx(CardLikes, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/addWalletsRedirectPage/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 } from "react/jsx-runtime";
+import Image from 'next/image';
+import process from 'process';
+import styled from 'styled-components';
+import { getStaticDomain } from '@ludo.ninja/core';
+import { AccentColor, BlackColor, TextGray2Color, } from '@ludo.ninja/ui/build/styles/colors';
+import { rotate } from '@/styles/animations';
+import { Box, Flex, H1, H5 } from '@system';
+// Styles
+var StyledRedirectOpportunityIdPage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  .loading {\n    display: inline-block;\n    width: 36px;\n    height: 36px;\n    border: 4px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n    margin-top: 16px;\n  }\n"], ["\n  padding-top: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  .loading {\n    display: inline-block;\n    width: 36px;\n    height: 36px;\n    border: 4px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n    margin-top: 16px;\n  }\n"])), AccentColor, rotate);
+var StyledImage = styled(Image)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 16px;\n"], ["\n  margin-bottom: 16px;\n"])));
+// Component
+var AddWalletsRedirectPage = function (_a) {
+    var walletType = _a.walletType;
+    return (_jsx(StyledRedirectOpportunityIdPage, { children: _jsx(Box, { children: _jsx(Flex, { flexDirection: "column", alignItems: 'center', children: _jsx(Box, { mt: 16, children: _jsxs(Flex, { flexDirection: "column", alignItems: 'center', children: [_jsx(StyledImage, { width: 74, height: 74, src: "".concat(getStaticDomain({
+                                    ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
+                                }), "/wallets/regular/").concat(walletType, ".svg"), alt: "".concat(walletType, " icon") }), _jsx(H1, { color: BlackColor, children: "Redirecting..." }), _jsx(H5, { mt: 8, color: TextGray2Color, textAlign: 'center', children: "Please wait while we add your new wallet" }), _jsx("div", { className: 'loading' })] }) }) }) }) }));
+};
+// Export
+export default AddWalletsRedirectPage;
+var templateObject_1, templateObject_2;

package/dist/components/assetJSONLD.js

@@ -0,0 +1,27 @@
+// import { schema } from '@ludo.ninja/api';
+export var assetJSONLD = function () {
+    // const imageUrl = asset.medias?.[0]?.url;
+    // const user = asset.creatorsProfiles?.[0]?.username;
+    //
+    // return {
+    //   __html: `{
+    //     "@context": "http://schema.org",
+    //     "@type": "Article",
+    //     "mainEntityOfPage": {
+    //       "@type": "WebPage",
+    //       "@id": "${url}"
+    //     },
+    //     "headline": "${asset.name}",
+    //     "image": [
+    //       "${imageUrl}"
+    //     ],
+    //     "datePublished": "${Date.now().toString()}",
+    //     "dateModified": "${Date.now().toString()}",
+    //     "author": {
+    //       "@type": "Person",
+    //       "name": "${user}"
+    //     },
+    //     "description": "${asset.description}"
+    //   }`,
+    // };
+};

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Skeleton from 'react-loading-skeleton';
+import useLikes from '@/hooks/likes';
+import { useUserStore } from '@/modules/user/store';
+import IconWithButton from '@/system/Buttons/IconWithButton';
+import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { redirectToLoginWindow } from '@/utils/auth';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { LabelKeys } from '@/dto/common/ItemType';
+import HeartIcon from '@/public/showCaseIcons/heart.svg';
+var AssetLikes = function (_a) {
+    var assetId = _a.assetId, likesByUser = _a.likesByUser, isLikedByUser = _a.isLikedByUser;
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var _b = useLikes({
+        defaultLikesCount: likesByUser,
+        defaultIsLiked: isLikedByUser,
+        itemType: LabelKeys.asset,
+    }), likes = _b.likes, addLike = _b.addLike, deleteLike = _b.deleteLike, isLoading = _b.isLoading;
+    var handleLikes = function (isLiked) {
+        if (!isSignedIn) {
+            redirectToLoginWindow();
+        }
+        else {
+            !isLiked ? addLike(assetId) : deleteLike(assetId);
+        }
+    };
+    var onLikeBtnClick = function () { return handleLikes(likes.isLiked); };
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(_Fragment, { children: isLoading ? (_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(IconWithButton, { variant: 'figcaption', text: likes.likesCount, onClick: onLikeBtnClick, children: _jsx("div", { style: {
+                    width: "".concat(getAdaptiveValueWithCheck4k({
+                        windowDimensions: windowDimensions,
+                        currentSize: 18,
+                    }), "px"),
+                    height: "".concat(getAdaptiveValueWithCheck4k({
+                        windowDimensions: windowDimensions,
+                        currentSize: 18,
+                    }), "px"),
+                }, children: _jsx(HeartIcon, { className: "icon ".concat(likes.isLiked ? 'liked' : ''), style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }) }) })) }));
+};
+export default AssetLikes;

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

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { isImage } from '@ludo.ninja/core';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { Box, ExternalImage, Flex } from '@system';
+var ResponsiveImage = styled(ExternalImage)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 320px;\n  max-height: 320px;\n\n  ", " {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ", " {\n    max-width: 508px;\n    max-height: 508px;\n  }\n"], ["\n  max-width: 320px;\n  max-height: 320px;\n\n  ", " {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ", " {\n    max-width: 508px;\n    max-height: 508px;\n  }\n"])), mediaQuery.tablet, mediaQuery.desktop);
+var EmptyState = function () { return (_jsx(Flex, { justifyContent: "center", children: _jsx(Box, { borderRadius: 16, overflow: "hidden" }) })); };
+export var AssetMedia = function (_a) {
+    var medias = _a.medias;
+    if (!(medias === null || medias === void 0 ? void 0 : medias.length) || medias.length > 1 || !medias[0])
+        return _jsx(EmptyState, {});
+    var media = medias[0];
+    var url = media.url, mimeType = media.mimeType;
+    if (url && isImage({ media: url, mimeType: mimeType, originalMimeType: null })) {
+        return (_jsx(Flex, { justifyContent: "center", children: _jsx(Box, { borderRadius: 16, overflow: "hidden", children: _jsx(ResponsiveImage, { src: url }) }) }));
+    }
+    return _jsx(EmptyState, {});
+};
+var templateObject_1;

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

@@ -0,0 +1,37 @@
+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 { useFetchAssetByBlockchain } from '@/api/server-assets/queries/useFetchAssetByBlockchain';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { CollectionSlider, Description, DetailsAccordeon, Figcaption, MarketPlaces, Participants, PriceRank, Title, } from '@/components/assetPage';
+import AssetImage from '../media/AssetImage';
+var AvatarContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  ", " {\n    width: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  ", " {\n    width: ", ";\n    margin-right: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet, mediaQuery.mobile, mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(510), adaptiveValueCalc(60));
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ", " {\n    flex-direction: column;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ", " {\n    flex-direction: column;\n    align-items: center;\n  }\n"])), mediaQuery.tablet);
+var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ", " {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ", " {\n    width: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ", " {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.mobile, mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(510));
+var AssetComponents = function (_a) {
+    // const file2D = '/test/test.svg';
+    // const file3D =
+    // 'https://nfts.snowx.com/0xfe2674e976884844db9ff5e49b6bbca878ddac2d/2-artwork.glb';
+    // 'https://ipfs.io/ipfs/QmPsVLBHhczr6uF6AaWsS2fUcWuMFHBsUZi3BGKgSsDpxJ/2109.glb';
+    // const audio = "https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3";
+    // const video = "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4";
+    var _b, _c;
+    var clientData = _a.clientData;
+    var isSlider = clientData.getIsSlider();
+    var markets = clientData.getMarkets();
+    return (_jsxs(_Fragment, { children: [isSlider && _jsx(CollectionSlider, { medias: clientData.getAssetMediaType() }), _jsxs(Wrapper, { children: [_jsxs(AvatarContainer, { children: [!isSlider &&
+                                ((_c = (_b = clientData.getAssetMediaType()[0]) === null || _b === void 0 ? void 0 : _b.displayLinkedMedia()) !== null && _c !== void 0 ? _c : (_jsx(AssetImage, { alt: "".concat(clientData.getName(), " ").concat(clientData.getAddress() || ''), imageUrl: '/noContent/noContent.svg', errorImg: '/noContent/noContent.svg' }))), _jsx(Figcaption, { asset: clientData }), _jsx(Description, { description: clientData.getDescription() })] }), _jsxs(Container, { children: [_jsx(Title, { collectionId: clientData.getCollection().collectionId, collectionTitle: clientData.getCollection().collectionTitle, collectionMedias: clientData.getCollection().collectionMedias, name: clientData.getName() }), _jsx(Participants, { creatorsAddresses: clientData.getCreatorsAddresses(), creatorsProfiles: clientData.getCreatorsProfiles(), ownersAddresses: clientData.getOwnersAddresses(), ownersProfiles: clientData.getOwnersProfiles() }), _jsx(PriceRank, { latestPriceAmount: clientData.getPrice().latestPriceAmount, latestPriceCurrency: clientData.getPrice().latestPriceCurrency, rank: clientData.getRank(), blockchain: clientData.getBlockchain() }), markets && _jsx(MarketPlaces, { markets: markets }), _jsx(Description, { description: clientData.getDescription() }), _jsx(DetailsAccordeon, { asset: clientData })] })] })] }));
+};
+var AssetWrapper = function (_a) {
+    var blockchain = _a.blockchain, address = _a.address, elrondId = _a.elrondId, tokenId = _a.tokenId;
+    var _b = useFetchAssetByBlockchain({ blockchain: blockchain, address: address, tokenId: tokenId, elrondId: elrondId }, null), clientData = _b.clientData, loading = _b.loading, error = _b.error;
+    if (loading || error || !clientData)
+        return null;
+    return _jsx(AssetComponents, { clientData: clientData });
+};
+export default AssetWrapper;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/assetPage/audioVideoPlayer/Duration.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InactiveButtonColor } from '@/styles/colors';
+import { H5 } from '@system';
+export default function Duration(_a) {
+    var seconds = _a.seconds;
+    return (_jsx("time", { dateTime: "P".concat(Math.round(seconds), "S"), children: _jsx(H5, { color: InactiveButtonColor, children: format(seconds) }) }));
+}
+function format(seconds) {
+    var date = new Date(seconds * 1000);
+    var hh = date.getUTCHours();
+    var mm = date.getUTCMinutes();
+    var ss = pad(date.getUTCSeconds());
+    if (hh) {
+        return "".concat(hh, ":").concat(pad(mm), ":").concat(ss);
+    }
+    return "".concat(mm, ":").concat(ss);
+}
+function pad(string) {
+    return ('0' + string).slice(-2);
+}

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

@@ -0,0 +1,147 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Component } from 'react';
+import Image from 'next/image';
+import Skeleton from 'react-loading-skeleton';
+import ReactPlayer from 'react-player';
+import screenfull from 'screenfull';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor } from '@/styles/colors';
+import { Flex } from '@system';
+import Duration from './Duration';
+export var ReactPlayerWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 510px;\n  height: ", ";\n  display: flex;\n  margin-right: 60px;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 16px;\n  overflow: hidden;\n\n  ", " {\n    height: ", ";\n    align-items: flex-start;\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  .player {\n    display: flex;\n    height: auto !important;\n    border-radius: 16px;\n    overflow: hidden;\n    ", "\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n\n    .player {\n      border-radius: ", ";\n    }\n  }\n"])), function (props) { return (props.playerType === 'audio' ? '280px' : 'auto'); }, function (props) {
+    return props.playerType === 'audio'
+        ? props.poster || '/assetPage/audioPlaceholder.svg'
+        : null;
+}, mediaQuery.desktop, function (props) { return (props.playerType === 'audio' ? '180px' : 'auto'); }, mediaQuery.tablet, function (props) {
+    return props.isFullscreenMode
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100% !important;\n          "], ["\n            width: 100% !important;\n          "]))) : '';
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(510), function (props) {
+    return props.playerType === 'audio' ? adaptiveValueCalc(280) : 'auto';
+}, adaptiveValueCalc(60), adaptiveValueCalc(16), adaptiveValueCalc(16));
+var InputRangeVolume = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n\n  &:before {\n    content: '';\n    display: flex;\n    position: absolute;\n    transition: 0.5s color ease;\n    left: 0;\n    width: ", "%;\n    height: 5px;\n    background: #ebf0fc;\n\n    ", " {\n      height: ", ";\n    }\n  }\n"])), function (props) { return props.value * 100; }, mediaQuery.minWidthFourK, adaptiveValueCalc(5));
+var InputRangeSound = styled(InputRangeVolume)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"], ["\n  width: 70px;\n\n  ", " {\n    width: ", ";\n  }\n\n  &:before {\n    background: #b0b2c0;\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(70));
+var FlexHelper = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  padding: 25px;\n\n  ", " {\n    padding: 20px;\n  }\n\n  ", " {\n    padding: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(25));
+var InputRange = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"], ["\n  width: 100%;\n  -webkit-appearance: none;\n  position: relative;\n  opacity: 0.5;\n  -moz-appearance: none;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    opacity: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &::-webkit-slider-runnable-track {\n    background: #909999;\n    height: 5px;\n    ", " {\n      height: ", ";\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(5));
+var Controls = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  bottom: 0;\n"])));
+var ControlButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"], ["\n  padding: 0;\n  background: transparent;\n  position: relative;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n  user-select: none;\n  outline: none;\n\n  * {\n    user-select: none;\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: ", ";\n    opacity: 0.5;\n    z-index: -1;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n\n  &:hover {\n    &:before {\n      opacity: 0.6;\n    }\n  }\n  img {\n    width: 15px;\n    height: 15px;\n    ", " {\n      height: ", ";\n      width: ", ";\n    }\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(36), adaptiveValueCalc(36), mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(15));
+var AudioVideoPlayer = /** @class */ (function (_super) {
+    __extends(AudioVideoPlayer, _super);
+    function AudioVideoPlayer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.load = function (url) {
+            _this.setState({
+                url: url,
+                played: 0,
+            });
+        };
+        _this.handlePlayPause = function () {
+            _this.setState({ playing: !_this.state.playing });
+        };
+        _this.handleVolumeChange = function (e) {
+            _this.setState({ volume: parseFloat(e.target.value) });
+        };
+        _this.handleToggleMuted = function () {
+            _this.setState({
+                muted: !_this.state.muted,
+                volume: 0,
+            });
+        };
+        _this.handlePlay = function () {
+            _this.setState({ playing: true });
+        };
+        _this.handlePause = function () {
+            _this.setState({ playing: false });
+        };
+        _this.handleSeekMouseDown = function () {
+            _this.setState({ seeking: true });
+        };
+        _this.handleSeekChange = function (e) {
+            _this.setState({ played: parseFloat(e.target.value) });
+        };
+        _this.handleSeekMouseUp = function (e) {
+            var _a;
+            _this.setState({ seeking: false });
+            var event = e.target.value;
+            (_a = _this.player) === null || _a === void 0 ? void 0 : _a.seekTo(parseFloat(event));
+        };
+        _this.handleProgress = function (state) {
+            if (!_this.state.seeking) {
+                _this.setState(state);
+            }
+        };
+        _this.handleDuration = function (duration) {
+            _this.setState({ duration: duration });
+        };
+        _this.handleClickFullscreen = function () {
+            var elem = document.getElementById('video-player');
+            screenfull.toggle(elem);
+        };
+        _this.handleErrors = function () {
+            _this.setState({ error: true });
+        };
+        _this.renderLoadButton = function (url, label) {
+            return _jsx("button", { onClick: function () { return _this.load(url); }, children: label });
+        };
+        _this.ref = function (player) {
+            _this.player = player;
+        };
+        _this.updateIsFullscreenMode = function () {
+            _this.setState({
+                isFullscreenMode: screenfull.isFullscreen,
+            });
+        };
+        _this.state = {
+            url: _this.props.src,
+            playing: false,
+            controls: false,
+            light: false,
+            volume: 0.8,
+            muted: false,
+            played: 0,
+            duration: 0,
+            playedSeconds: 0,
+            seeking: false,
+            loaded: 0,
+            loadedSeconds: 0,
+            error: false,
+            isFullscreenMode: false,
+        };
+        return _this;
+    }
+    AudioVideoPlayer.prototype.componentDidMount = function () {
+        screenfull.on('change', this.updateIsFullscreenMode);
+    };
+    AudioVideoPlayer.prototype.componentWillUnmount = function () {
+        screenfull.off('change', this.updateIsFullscreenMode);
+    };
+    AudioVideoPlayer.prototype.render = function () {
+        var _a = this.state, url = _a.url, playing = _a.playing, light = _a.light, volume = _a.volume, muted = _a.muted, played = _a.played, duration = _a.duration, playedSeconds = _a.playedSeconds, error = _a.error, isFullscreenMode = _a.isFullscreenMode;
+        if (!url)
+            return null;
+        return (_jsx(ReactPlayerWrapper, { id: 'video-player', playerType: this.props.playerType, poster: this.props.poster, isFullscreenMode: isFullscreenMode, children: this.props.isLoading ? (_jsx(Skeleton, { style: { position: 'absolute', left: 0, top: 0 }, height: "100%", width: "100%" })) : (_jsx(_Fragment, { children: error && this.props.playerType !== 'audio' ? (_jsx(Image, { width: 508, height: 216, alt: 'audioPlaceholder', src: "/assetPage/audioPlaceholder.svg" })) : (_jsx(_Fragment, { children: !error && (_jsxs(_Fragment, { children: [_jsx(ReactPlayer, { className: "player", id: this.props.playerType, url: url, playing: playing, light: light, volume: volume, playsinline: true, muted: muted, ref: this.ref, controls: false, onPlay: this.handlePlay, onPause: this.handlePause, onError: this.handleErrors, onProgress: this.handleProgress, onDuration: this.handleDuration }), _jsxs(Controls, { children: [_jsxs(Flex, { p: "0 15px 5px", justifyContent: "space-between", children: [_jsx(Duration, { seconds: playedSeconds }), _jsx(Duration, { seconds: duration })] }), _jsx(InputRangeVolume, { value: played, children: _jsx(InputRange, { type: "range", min: 0, max: 0.99, step: "any", value: played, onMouseDown: this.handleSeekMouseDown, onChange: this.handleSeekChange, onMouseUp: this.handleSeekMouseUp }) }), _jsxs(FlexHelper, { children: [_jsxs(Flex, { children: [_jsx(ControlButton, { style: { marginRight: '45px' }, onClick: this.handlePlayPause, children: _jsx(Image, { width: 15, height: 15, alt: playing ? 'Play' : 'pause', src: "/assetPage/".concat(playing ? 'pause' : 'play', ".svg") }) }), _jsx(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: _jsx(Image, { width: 15, height: 15, alt: 'sound-volume', src: "/assetPage/".concat(volume ? 'soundOn' : 'soundOf', ".svg") }) }), _jsx(InputRangeSound, { value: volume, children: _jsx(InputRange, { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.handleVolumeChange }) })] }), Boolean(this.props.playerType === 'audio') || (_jsx(ControlButton, { onClick: this.handleClickFullscreen, children: _jsx(Image, { width: 15, height: 15, alt: 'fullScreen', src: "/assetPage/fullScreen.svg" }) }))] })] })] })) })) })) }));
+    };
+    return AudioVideoPlayer;
+}(Component));
+export { AudioVideoPlayer };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,32 @@
+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 } from "react/jsx-runtime";
+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 { Box, Text } from '@system';
+import { poppinsFontVarCss } from '@/fonts/vars';
+// Styles
+var StyledBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"], ["\n  text-align: center;\n  width: max-content;\n  background: ", ";\n  transition: all 0.2s ease-in;\n  padding: 8px 16px;\n  border-radius: 6px;\n\n  :hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.buttonInactive;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.accentHoverBg;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(6));
+var StyledText = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"], ["\n  font-family: ", ";\n\n  font-weight: 500;\n  font-size: 1.5em;\n  line-height: 1.46;\n  color: ", ";\n\n  ", " {\n    font-size: 1.4em;\n    line-height: 1.42;\n  }\n\n  ", " {\n    font-size: ", ";\n  }\n"])), poppinsFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.primaryText;
+}, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(15));
+export var Category = function (_a) {
+    var _b, _c;
+    var asset = _a.asset;
+    //update
+    var category = (_b = asset.getCategory()) !== null && _b !== void 0 ? _b : 'all';
+    var categoryLabel = (_c = asset.getCategoryLabel()) !== null && _c !== void 0 ? _c : 'All';
+    return (_jsx(Link, { style: { display: 'block', width: 'max-content' }, href: "/search/nfts?category=".concat(category), children: _jsx(StyledBox, { children: _jsx(StyledText, { children: categoryLabel }) }) }));
+};
+var templateObject_1, templateObject_2;

package/dist/components/assetPage/description/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 } from "react/jsx-runtime";
+import Hyphenated from 'react-hyphen';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { TextGrayColor } from '@/styles/colors';
+import { Flex, H3 } from '@system';
+var SH3 = styled(H3)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-top: 20px;\n  margin-bottom: 5px;\n\n  ", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(5));
+var SFlex = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"], ["\n  .text {\n    font-size: 14px;\n    color: ", ";\n\n    ", " {\n      font-size: ", ";\n    }\n  }\n"])), TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(14));
+export var Description = function (_a) {
+    var description = _a.description;
+    if (!description)
+        return null;
+    return (_jsxs(SFlex, { className: "description", flexDirection: "column", children: [_jsx(SH3, { children: "Description" }), _jsx(Hyphenated, { children: _jsx("div", { 
+                    // style={{
+                    //   color: TextGrayColor,
+                    //   fontSize: '14px',
+                    // }}
+                    className: "text", dangerouslySetInnerHTML: { __html: description } }) })] }));
+};
+var templateObject_1, templateObject_2;