@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/components/CreationCard/index.jsx

@@ -1,252 +1,73 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 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 { 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // 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) {
+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) {
+        ? 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 {
+    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 (
-    <CreationCard
-      {...props}
-      isShowCheckbox={isActiveGalleryMode}
-      isActiveCheckbox={getIsActiveCreation(creationsToGallery, props.creation)}
-      toggleCreationToGallery={toggleCreationToGallery}
-    />
-  );
+    }); }), toggleCreationToGallery = _a.toggleCreationToGallery, isActiveGalleryMode = _a.isActiveGalleryMode, creationsToGallery = _a.creationsToGallery;
+    return (<CreationCard {...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 (
-    <StyledRegularCard
-      isNeedHeight={isNeedHeight}
-      isNeedTransform={isNeedShowMoreButton}
-      isShowCheckbox={isShowCheckbox}
-    >
-      {isShowCheckbox && (
-        <CardCheckBox
-          isActiveCheckbox={!!isActiveCheckbox}
-          onChange={function () {
-            toggleCreationToGallery === null ||
-            toggleCreationToGallery === void 0
-              ? void 0
-              : toggleCreationToGallery(creation);
-          }}
-        />
-      )}
+    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 (<StyledRegularCard isNeedHeight={isNeedHeight} isNeedTransform={isNeedShowMoreButton} isShowCheckbox={isShowCheckbox}>
+      {isShowCheckbox && (<CardCheckBox isActiveCheckbox={!!isActiveCheckbox} onChange={function () {
+                toggleCreationToGallery === null || toggleCreationToGallery === void 0 ? void 0 : toggleCreationToGallery(creation);
+            }}/>)}
       <HideLink className="linkRegularCard" href={creation.getCreationLink()}>
         <StyledCardHead>
           {creation.detectMediaType().displaySingleMedia()}
-          <CardHead
-            isRegularCard={!!isRegularCard}
-            isIconLiked={likes.isLiked}
-            creation={creation}
-            addLikeToCard={addLike}
-            deleteLikeFromCard={deleteLike}
-            isUserProfile={isUserProfile || false}
-            isDisabled={!!isLoadingLikes}
-            isShowCheckbox={isShowCheckbox}
-            currentMyGalleryId={currentMyGalleryId}
-          />
+          <CardHead isRegularCard={!!isRegularCard} isIconLiked={likes.isLiked} creation={creation} addLikeToCard={addLike} deleteLikeFromCard={deleteLike} isUserProfile={isUserProfile || false} isDisabled={!!isLoadingLikes} isShowCheckbox={isShowCheckbox} currentMyGalleryId={currentMyGalleryId}/>
         </StyledCardHead>
-        <CardContent
-          creationName={creationName}
-          firstName={creation.getCreatorAddress()}
-          secondName={creation.getName()}
-          cuttedSecondName={creation.getCuttedSecondName(!isMobile)}
-          itemId={creation.getItemId()}
-          isNeedShowMoreButton={isNeedShowMoreButton || false}
-          href={creation.getCreationLink()}
-        >
+        <CardContent creationName={creationName} firstName={creation.getCreatorAddress()} secondName={creation.getName()} cuttedSecondName={creation.getCuttedSecondName(!isMobile)} itemId={creation.getItemId()} isNeedShowMoreButton={isNeedShowMoreButton || false} href={creation.getCreationLink()}>
           <Flex alignItems="end" justifyContent={'space-between'}>
-            <CardCategory label={creation.getLabel()} />
+            <CardCategory label={creation.getLabel()}/>
             {/* // Todo cardLikes */}
             {!isProd() &&
-              (isLoadingLikes ? (
-                <Skeleton
-                  style={{ borderRadius: '3px' }}
-                  height="100%"
-                  width="30px"
-                />
-              ) : (
-                <CardLikes isLiked={likes.isLiked} likes={likes.likesCount} />
-              ))}
+            (isLoadingLikes ? (<Skeleton style={{ borderRadius: '3px' }} height="100%" width="30px"/>) : (<CardLikes isLiked={likes.isLiked} likes={likes.likesCount}/>))}
           </Flex>
         </CardContent>
       </HideLink>
-    </StyledRegularCard>
-  );
+    </StyledRegularCard>);
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/addWalletsRedirectPage/index.jsx

@@ -1,90 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 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 { AccentColor, BlackColor, TextGray2Color, } from '@ludo.ninja/ui/build/styles/colors';
 import { rotate } from '@/styles/animations';
-
 import { Box, Flex, H1, H5 } from '@system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // 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']
-    ))
-);
+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 (
-    <StyledRedirectOpportunityIdPage>
+    var walletType = _a.walletType;
+    return (<StyledRedirectOpportunityIdPage>
       <Box>
         <Flex flexDirection="column" alignItems={'center'}>
           <Box mt={16}>
             <Flex flexDirection="column" alignItems={'center'}>
-              <StyledImage
-                width={74}
-                height={74}
-                src={''
-                  .concat(
-                    getStaticDomain({
-                      ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
-                    }),
-                    '/wallets/regular/'
-                  )
-                  .concat(walletType, '.svg')}
-                alt={''.concat(walletType, ' icon')}
-              />
+              <StyledImage width={74} height={74} src={"".concat(getStaticDomain({
+            ENV: process.env.NEXT_PUBLIC_STATIC_DOMAIN,
+        }), "/wallets/regular/").concat(walletType, ".svg")} alt={"".concat(walletType, " icon")}/>
               <H1 color={BlackColor}>Redirecting...</H1>
               <H5 mt={8} color={TextGray2Color} textAlign={'center'}>
-                {'Please wait while we add your new wallet'}
+                {"Please wait while we add your new wallet"}
               </H5>
-              <div className={'loading'} />
+              <div className={'loading'}/>
             </Flex>
           </Box>
         </Flex>
       </Box>
-    </StyledRedirectOpportunityIdPage>
-  );
+    </StyledRedirectOpportunityIdPage>);
 };
 // Export
 export default AddWalletsRedirectPage;

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

@@ -1,114 +1,59 @@
 import React from 'react';
-
 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 (
-    <>
-      {isLoading ? (
-        <Skeleton
-          style={{
-            borderRadius: ''.concat(
-              getAdaptiveValueWithCheck4k({
+    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 (<>
+      {isLoading ? (<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: 3,
-              }),
-              'px'
-            ),
-            marginRight: ''.concat(
-              getAdaptiveValueWithCheck4k({
-                windowDimensions: windowDimensions,
-                currentSize: 16.8,
-              }),
-              'px'
-            ),
-          }}
-          height="100%"
-          width={''.concat(
-            getAdaptiveValueWithCheck4k({
-              windowDimensions: windowDimensions,
-              currentSize: 30,
-            }),
-            'px'
-          )}
-        />
-      ) : (
-        <IconWithButton
-          variant={'figcaption'}
-          text={likes.likesCount}
-          onClick={onLikeBtnClick}
-        >
-          <div
-            style={{
-              width: ''.concat(
-                getAdaptiveValueWithCheck4k({
-                  windowDimensions: windowDimensions,
-                  currentSize: 18,
-                }),
-                'px'
-              ),
-              height: ''.concat(
-                getAdaptiveValueWithCheck4k({
-                  windowDimensions: windowDimensions,
-                  currentSize: 18,
-                }),
-                'px'
-              ),
-            }}
-          >
-            <HeartIcon
-              className={'icon '.concat(likes.isLiked ? 'liked' : '')}
-              style={getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-              })}
-            />
+                currentSize: 30,
+            }), "px")}/>) : (<IconWithButton variant={'figcaption'} text={likes.likesCount} onClick={onLikeBtnClick}>
+          <div style={{
+                width: "".concat(getAdaptiveValueWithCheck4k({
+                    windowDimensions: windowDimensions,
+                    currentSize: 18,
+                }), "px"),
+                height: "".concat(getAdaptiveValueWithCheck4k({
+                    windowDimensions: windowDimensions,
+                    currentSize: 18,
+                }), "px"),
+            }}>
+            <HeartIcon className={"icon ".concat(likes.isLiked ? 'liked' : '')} style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>
           </div>
-        </IconWithButton>
-      )}
-    </>
-  );
+        </IconWithButton>)}
+    </>);
 };
 export default AssetLikes;

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

@@ -1,71 +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 React from 'react';
-
 import styled from 'styled-components';
-
 import { isImage } from '@ludo.ninja/core';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import { Box, ExternalImage, Flex } from '@system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-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 (
-    <Flex justifyContent="center">
-      <Box borderRadius={16} overflow="hidden" />
-    </Flex>
-  );
-};
+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 (<Flex justifyContent="center">
+    <Box borderRadius={16} overflow="hidden"/>
+  </Flex>); };
 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 <EmptyState />;
-  var media = medias[0];
-  var url = media.url,
-    mimeType = media.mimeType;
-  if (
-    url &&
-    isImage({ media: url, mimeType: mimeType, originalMimeType: null })
-  ) {
-    return (
-      <Flex justifyContent="center">
+    var medias = _a.medias;
+    if (!(medias === null || medias === void 0 ? void 0 : medias.length) || medias.length > 1 || !medias[0])
+        return <EmptyState />;
+    var media = medias[0];
+    var url = media.url, mimeType = media.mimeType;
+    if (url && isImage({ media: url, mimeType: mimeType, originalMimeType: null })) {
+        return (<Flex justifyContent="center">
         <Box borderRadius={16} overflow="hidden">
-          <ResponsiveImage src={url} />
+          <ResponsiveImage src={url}/>
         </Box>
-      </Flex>
-    );
-  }
-  return <EmptyState />;
+      </Flex>);
+    }
+    return <EmptyState />;
 };
 var templateObject_1;