@ludo.ninja/components 1.4.3 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "private": false,
   "scripts": {
     "dev": "next dev -p 4000",

package/src/components/index.ts

@@ -0,0 +1 @@
+export { default as ShareDialog } from './shareDialog';

package/src/index.ts

@@ -6,3 +6,5 @@ export * from './hooks';
 export * from './utils';
 export * from './store';
 export * from './system';
+export * from './components';
+

package/src/components/assetPage/assetLikes/index.tsx

@@ -1,96 +0,0 @@
-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';
-
-const AssetLikes = ({
-  assetId,
-  likesByUser,
-  isLikedByUser,
-}: {
-  assetId: string;
-  likesByUser: number;
-  isLikedByUser: boolean;
-}) => {
-  const isSignedIn = useUserStore((state) => state.isSignedIn);
-
-  const { likes, addLike, deleteLike, isLoading } = useLikes({
-    defaultLikesCount: likesByUser,
-    defaultIsLiked: isLikedByUser,
-    itemType: LabelKeys.asset,
-  });
-
-  const handleLikes = (isLiked: boolean) => {
-    if (!isSignedIn) {
-      redirectToLoginWindow();
-    } else {
-      !isLiked ? addLike(assetId) : deleteLike(assetId);
-    }
-  };
-  const onLikeBtnClick = () => handleLikes(likes.isLiked);
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <>
-      {isLoading ? (
-        <Skeleton
-          style={{
-            borderRadius: `${getAdaptiveValueWithCheck4k({
-              windowDimensions,
-              currentSize: 3,
-            })}px`,
-            marginRight: `${getAdaptiveValueWithCheck4k({
-              windowDimensions,
-              currentSize: 16.8,
-            })}px`,
-          }}
-          height="100%"
-          width={`${getAdaptiveValueWithCheck4k({
-            windowDimensions,
-            currentSize: 30,
-          })}px`}
-        />
-      ) : (
-        <IconWithButton
-          variant={'figcaption'}
-          text={likes.likesCount}
-          onClick={onLikeBtnClick}
-        >
-          <div
-            style={{
-              width: `${getAdaptiveValueWithCheck4k({
-                windowDimensions,
-                currentSize: 18,
-              })}px`,
-              height: `${getAdaptiveValueWithCheck4k({
-                windowDimensions,
-                currentSize: 18,
-              })}px`,
-            }}
-          >
-            <HeartIcon
-              className={`icon ${likes.isLiked ? 'liked' : ''}`}
-              style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-            />
-          </div>
-        </IconWithButton>
-      )}
-    </>
-  );
-};
-
-export default AssetLikes;

package/src/components/assetPage/assetNft/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { assetSchema as schema } from '@ludo.ninja/api';
-import { isImage } from '@ludo.ninja/core';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import { Box, ExternalImage, Flex } from '@system';
-
-type AssetMediaProps = Pick<schema.IAsset, 'medias'>;
-
-const ResponsiveImage = styled(ExternalImage)`
-  max-width: 320px;
-  max-height: 320px;
-
-  ${mediaQuery.tablet} {
-    max-width: 336px;
-    max-height: 336px;
-  }
-
-  ${mediaQuery.desktop} {
-    max-width: 508px;
-    max-height: 508px;
-  }
-`;
-
-const EmptyState = () => (
-  <Flex justifyContent="center">
-    <Box borderRadius={16} overflow="hidden" />
-  </Flex>
-);
-
-export const AssetMedia = ({ medias }: AssetMediaProps) => {
-  if (!medias?.length || medias.length > 1 || !medias[0]) return <EmptyState />;
-
-  const [media] = medias;
-  const { url, mimeType } = media;
-
-  if (url && isImage({ media: url, mimeType, originalMimeType: null })) {
-    return (
-      <Flex justifyContent="center">
-        <Box borderRadius={16} overflow="hidden">
-          <ResponsiveImage src={url} />
-        </Box>
-      </Flex>
-    );
-  }
-
-  return <EmptyState />;
-};

package/src/components/assetPage/assetWrapper/index.tsx

@@ -1,174 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { BlockChainKeys } from '@ludo.ninja/core';
-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 AssetEntity from '@/dto/AssetEntity';
-
-import AssetImage from '../media/AssetImage';
-
-const AvatarContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 510px;
-  margin-right: 60px;
-
-  ${mediaQuery.desktop} {
-    width: 335px;
-    margin-right: 30px;
-  }
-
-  ${mediaQuery.tablet} {
-    margin-right: 0;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 320px;
-  }
-
-  .description {
-    display: flex;
-
-    ${mediaQuery.tablet} {
-      display: none;
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(510)};
-    margin-right: ${adaptiveValueCalc(60)};
-  }
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  align-items: flex-start;
-
-  ${mediaQuery.tablet} {
-    flex-direction: column;
-    align-items: center;
-  }
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 510px;
-
-  ${mediaQuery.desktop} {
-    width: 335px;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 320px;
-  }
-
-  .description {
-    display: none;
-
-    ${mediaQuery.tablet} {
-      display: flex;
-      margin-bottom: 25px;
-    }
-  }
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(510)};
-  }
-`;
-
-const AssetComponents = ({ clientData }: { clientData: AssetEntity }) => {
-  // 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";
-
-  const isSlider = clientData.getIsSlider();
-
-  const markets = clientData.getMarkets();
-
-  return (
-    <>
-      {isSlider && <CollectionSlider medias={clientData.getAssetMediaType()} />}
-      <Wrapper>
-        <AvatarContainer>
-          {!isSlider &&
-            (clientData.getAssetMediaType()[0]?.displayLinkedMedia() ?? (
-              <AssetImage
-                alt={`${clientData.getName()} ${clientData.getAddress() || ''}`}
-                imageUrl={'/noContent/noContent.svg'}
-                errorImg={'/noContent/noContent.svg'}
-              />
-            ))}
-          <Figcaption asset={clientData} />
-          <Description description={clientData.getDescription()} />
-        </AvatarContainer>
-        <Container>
-          <Title
-            collectionId={clientData.getCollection().collectionId}
-            collectionTitle={clientData.getCollection().collectionTitle}
-            collectionMedias={clientData.getCollection().collectionMedias}
-            name={clientData.getName()}
-          />
-          <Participants
-            creatorsAddresses={clientData.getCreatorsAddresses()}
-            creatorsProfiles={clientData.getCreatorsProfiles()}
-            ownersAddresses={clientData.getOwnersAddresses()}
-            ownersProfiles={clientData.getOwnersProfiles()}
-          />
-          <PriceRank
-            latestPriceAmount={clientData.getPrice().latestPriceAmount}
-            latestPriceCurrency={clientData.getPrice().latestPriceCurrency}
-            rank={clientData.getRank()}
-            blockchain={clientData.getBlockchain()}
-          />
-          {markets && <MarketPlaces markets={markets} />}
-          <Description description={clientData.getDescription()} />
-          <DetailsAccordeon asset={clientData} />
-        </Container>
-      </Wrapper>
-    </>
-  );
-};
-
-const AssetWrapper = ({
-  blockchain,
-  address,
-  elrondId,
-  tokenId,
-}: {
-  blockchain: BlockChainKeys;
-  address: string;
-  elrondId: string;
-  tokenId: string;
-}) => {
-  const { clientData, loading, error } = useFetchAssetByBlockchain(
-    { blockchain, address, tokenId, elrondId },
-    null
-  );
-
-  if (loading || error || !clientData) return null;
-
-  return <AssetComponents clientData={clientData} />;
-};
-export default AssetWrapper;

package/src/components/assetPage/audioVideoPlayer/Duration.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { InactiveButtonColor } from '@/styles/colors';
-
-import { H5 } from '@system';
-
-type DurationProps = {
-  seconds: number;
-};
-
-export default function Duration({ seconds }: DurationProps) {
-  return (
-    <time dateTime={`P${Math.round(seconds)}S`}>
-      <H5 color={InactiveButtonColor}>{format(seconds as number)}</H5>
-    </time>
-  );
-}
-
-function format(seconds: number) {
-  const date = new Date(seconds * 1000);
-  const hh = date.getUTCHours();
-  const mm = date.getUTCMinutes();
-  const ss = pad(date.getUTCSeconds());
-  if (hh) {
-    return `${hh}:${pad(mm)}:${ss}`;
-  }
-  return `${mm}:${ss}`;
-}
-
-function pad(string: number) {
-  return ('0' + string).slice(-2);
-}